feat(frontend): client web read-only pairing + snapshot état (#13)
Lot F2 du chantier server/client mode : client web read-only complétant le premier incrément livrable — pairing, liste des projets, ouverture et snapshot de l'état, sans PTY. - frontend/src/adapters/http/webSession.ts : session web (pairing/cookie). - frontend/src/features/web : PairingScreen, WebWorkspace, WebApp, index. - Câblage main.tsx et adaptations httpInvoker.ts / index.ts (cas 401). - Tests : webSession.test.ts, WebApp.test.tsx, cas 401 dans httpInvoker.test.ts. Validé : frontend 736 tests verts, build vert, garde no-direct-invoke verte, contrat B4↔F2 aligné, desktop non régressé. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
156
frontend/src/features/web/WebWorkspace.tsx
Normal file
156
frontend/src/features/web/WebWorkspace.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
/**
|
||||
* Read-only web workspace — ticket #13, lot F2 (first shippable increment).
|
||||
*
|
||||
* The minimal post-pairing surface: list the projects, open one **read-only**,
|
||||
* and show a snapshot of its live/work state. No PTY (xterm over WS = F3), no
|
||||
* mutation — every call goes through the existing transport-neutral gateways
|
||||
* (`project`, `workState`) via DI, so no component touches `@tauri-apps/api`.
|
||||
*
|
||||
* It reuses the frozen read-model types (`ProjectWorkState`) and only calls the
|
||||
* commands B4 puts on the read-only allowlist: `list_projects`, `open_project`,
|
||||
* `get_project_work_state`. A deliberately small surface — the full IDE (layout,
|
||||
* agents, terminals) is out of scope until the streaming lots.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import type { GatewayError, Project, ProjectWorkState } from "@/domain";
|
||||
import { useGateways } from "@/app/di";
|
||||
import { Button, Panel, Spinner } from "@/shared";
|
||||
|
||||
function describe(e: unknown): string {
|
||||
if (e && typeof e === "object" && "message" in e) {
|
||||
return String((e as GatewayError).message);
|
||||
}
|
||||
return String(e);
|
||||
}
|
||||
|
||||
export function WebWorkspace() {
|
||||
const { project, workState } = useGateways();
|
||||
const [projects, setProjects] = useState<Project[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const [snapshot, setSnapshot] = useState<ProjectWorkState | null>(null);
|
||||
const [loadingSnapshot, setLoadingSnapshot] = useState(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null);
|
||||
try {
|
||||
setProjects(await project.listProjects());
|
||||
} catch (e) {
|
||||
setError(describe(e));
|
||||
}
|
||||
}, [project]);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
const openReadOnly = useCallback(
|
||||
async (projectId: string) => {
|
||||
setError(null);
|
||||
setLoadingSnapshot(true);
|
||||
setOpenId(projectId);
|
||||
setSnapshot(null);
|
||||
try {
|
||||
// Read-only: open resolves the project server-side, then we read the
|
||||
// live/work-state snapshot. No layout/agents/PTY are mounted.
|
||||
await project.openProject(projectId);
|
||||
setSnapshot(await workState.getProjectWorkState(projectId));
|
||||
} catch (e) {
|
||||
setError(describe(e));
|
||||
} finally {
|
||||
setLoadingSnapshot(false);
|
||||
}
|
||||
},
|
||||
[project, workState],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-4 overflow-y-auto p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold tracking-tight">Projets</h2>
|
||||
<Button variant="ghost" size="sm" onClick={() => void refresh()}>
|
||||
Rafraîchir
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Panel className="border-danger/40">
|
||||
<p className="text-sm text-danger">{error}</p>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{projects === null ? (
|
||||
<span className="inline-flex items-center gap-1.5 text-sm text-muted">
|
||||
<Spinner size={12} /> Chargement des projets…
|
||||
</span>
|
||||
) : projects.length === 0 ? (
|
||||
<p className="text-sm text-muted">Aucun projet.</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-2" data-testid="web-project-list">
|
||||
{projects.map((p) => (
|
||||
<li key={p.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void openReadOnly(p.id)}
|
||||
aria-pressed={openId === p.id}
|
||||
className="flex w-full flex-col items-start rounded-md border border-border bg-raised px-3 py-2 text-left transition-colors hover:border-primary aria-pressed:border-primary"
|
||||
>
|
||||
<span className="text-sm font-medium text-content">{p.name}</span>
|
||||
<span className="text-xs text-faint">{p.root}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{openId && (
|
||||
<Panel className="mt-2">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">
|
||||
État (lecture seule)
|
||||
<span className="ml-2 rounded bg-canvas px-1.5 py-0.5 text-[0.6rem] uppercase text-muted">
|
||||
read-only
|
||||
</span>
|
||||
</h3>
|
||||
{loadingSnapshot && <Spinner size={12} />}
|
||||
</div>
|
||||
{snapshot ? (
|
||||
<WorkStateSnapshot snapshot={snapshot} />
|
||||
) : loadingSnapshot ? (
|
||||
<p className="text-xs text-muted">Chargement de l'état…</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted">Aucun état disponible.</p>
|
||||
)}
|
||||
</Panel>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Pure render of the read-only work-state snapshot. */
|
||||
function WorkStateSnapshot({ snapshot }: { snapshot: ProjectWorkState }) {
|
||||
if (snapshot.agents.length === 0) {
|
||||
return <p className="text-xs text-muted">Aucun agent actif.</p>;
|
||||
}
|
||||
return (
|
||||
<ul className="flex flex-col gap-1.5" data-testid="web-workstate">
|
||||
{snapshot.agents.map((a) => (
|
||||
<li key={a.agentId} className="flex items-center justify-between text-xs">
|
||||
<span className="text-content">{a.name}</span>
|
||||
<span className="flex items-center gap-2 text-faint">
|
||||
<span>{a.live ? `live · ${a.live.kind}` : "offline"}</span>
|
||||
<span
|
||||
className={
|
||||
a.busy.state === "busy" ? "text-warning" : "text-success"
|
||||
}
|
||||
>
|
||||
{a.busy.state === "busy" ? "busy" : "idle"}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user