@talgent/workbench-ui 0.0.0 → 0.2.0

package/components/work/tool-output-preview.tsx

@@ -0,0 +1,52 @@
+import { Alert } from "@heroui/react";
+import type { ToolOutputPreview as Preview } from "@talgent/workbench-contracts/dispatcher/public/v1/unified_message_pb";
+import { DiffView, SourcePreview, TextPreview } from "../preview/text-preview";
+
+/**
+ * What one Read, Write or Edit call actually read, wrote or changed, from the
+ * call's own result. The path only picks the rendering; the file itself is
+ * never read, and nothing is rebuilt from the input.
+ */
+export function ToolOutputPreview({ preview, toolbar }: { preview: Preview; toolbar: HTMLElement | null }) {
+  const notes: string[] = [];
+  if (preview.truncated) notes.push(`Showing the first ${shownLength(preview).toLocaleString()} of ${preview.totalLength.toLocaleString()} characters.`);
+  const empty = preview.toolName !== "Edit" && preview.content === "";
+  if (preview.toolName === "Read") {
+    const last = preview.startLine + preview.numLines - 1;
+    const whole = preview.startLine <= 1 && last >= preview.totalLines && !preview.truncatedByTokenCap && !preview.truncated;
+    // A partial read names its range as a file preview names its truncation.
+    if (!whole && preview.numLines > 0) notes.unshift(`Showing lines ${preview.startLine}–${last} of ${preview.totalLines}.`);
+    if (preview.truncatedByTokenCap) notes.push("The read stopped at the token limit.");
+    return <section aria-label="Read content">
+      <Notes notes={notes} />
+      {empty ? <p>Empty file</p> : whole
+        ? <TextPreview path={preview.filePath} content={preview.content} toolbar={toolbar} />
+        : <SourcePreview path={preview.filePath} content={preview.content} startLine={Math.max(1, preview.startLine)} />}
+    </section>;
+  }
+  if (preview.toolName === "Write") {
+    return <section aria-label="Written content">
+      <Notes notes={notes} />
+      {/* A cut body is never rendered as a whole document. */}
+      {empty ? <p>Empty file</p> : preview.truncated
+        ? <SourcePreview path={preview.filePath} content={preview.content} />
+        : <TextPreview path={preview.filePath} content={preview.content} toolbar={toolbar} />}
+    </section>;
+  }
+  if (preview.toolName !== "Edit") return null;
+  return <section aria-label="Edited lines">
+    <Notes notes={notes} />
+    <DiffView content={preview.hunks.map(hunk => [`@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`, ...hunk.lines].join("\n")).join("\n")} />
+  </section>;
+}
+
+// Code points shown, counted as the limit counts them: a patch line and its break.
+function shownLength(preview: Preview): number {
+  if (preview.toolName !== "Edit") return [...preview.content].length;
+  return preview.hunks.reduce((sum, hunk) => sum + hunk.lines.reduce((lines, line) => lines + [...line].length + 1, 0), 0);
+}
+
+function Notes({ notes }: { notes: string[] }) {
+  if (notes.length === 0) return null;
+  return <Alert status="default" className="pv-alert"><Alert.Indicator /><Alert.Content>{notes.map(note => <Alert.Description key={note}>{note}</Alert.Description>)}</Alert.Content></Alert>;
+}

package/components/work/tool-preview-reading.tsx

@@ -0,0 +1,27 @@
+import { Alert, Button } from "@heroui/react";
+import { useQuery } from "@tanstack/react-query";
+import { useWorkStreamSource } from "../../lib/work-stream-source";
+import { ToolOutputPreview } from "./tool-output-preview";
+import type { ToolPreview } from "./work-message-flow";
+
+/**
+ * A Read, Write or Edit call in the reading area, shown like an opened file:
+ * what it read, wrote or changed, never its original input or output.
+ */
+export function ToolPreviewReading({ tool, toolbar }: { tool: ToolPreview; toolbar: HTMLElement | null }) {
+  const streamClient = useWorkStreamSource();
+  const detail = useQuery({
+    queryKey: ["tool-preview", tool.workId, tool.toolCallId],
+    // The preview comes with the first page; one code point of each side is
+    // enough to tell a recorded result from one still to come.
+    queryFn: ({ signal }) => streamClient.getToolDetail({ agentWorkId: tool.workId, toolCallId: tool.toolCallId, inputOffset: 0, outputOffset: 0, limit: 1 }, { signal }),
+    gcTime: 0, staleTime: Infinity, retry: false, refetchOnWindowFocus: false, refetchOnReconnect: false,
+    refetchInterval: query => query.state.data && !query.state.data.output && !query.state.error ? 5000 : false,
+  });
+  return <div className="pr-file-document">
+    {detail.isPending && <p className="sr-only" role="status">Loading preview…</p>}
+    {detail.isError && <Alert status="danger" className="pv-alert" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Could not load the preview.</Alert.Description></Alert.Content><Button size="sm" variant="secondary" onPress={() => void detail.refetch()}>Retry preview</Button></Alert>}
+    {detail.data && (detail.data.preview ? <ToolOutputPreview preview={detail.data.preview} toolbar={toolbar} />
+      : <Alert status="default" className="pv-alert" role="status"><Alert.Indicator /><Alert.Content><Alert.Description>{detail.data.output ? "This call has nothing to preview." : "Waiting for this call to finish…"}</Alert.Description></Alert.Content></Alert>)}
+  </div>;
+}

package/components/work/tool-reading-content.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, Button } from "@heroui/react";
+import { useWorkStreamSource } from "../../lib/work-stream-source";
+import type { ToolPreview } from "./work-message-flow";
+import { detailPageSize, MessageDetailContent } from "./tool-message-detail";
+
+/** One call's original input and output, opened inline in the conversation. */
+export function ToolReadingContent({ tool }: { tool: ToolPreview }) {
+  const streamClient = useWorkStreamSource();
+  const [offsets, setOffsets] = useState({ input: 0, output: 0 });
+  const detail = useQuery({
+    queryKey: ["tool-detail", tool.workId, tool.toolCallId, offsets.input, offsets.output],
+    queryFn: ({ signal }) => streamClient.getToolDetail({ agentWorkId: tool.workId, toolCallId: tool.toolCallId, inputOffset: offsets.input, outputOffset: offsets.output, limit: detailPageSize }, { signal }),
+    gcTime: 0, staleTime: Infinity, retry: false, refetchOnWindowFocus: false, refetchOnReconnect: false,
+    refetchInterval: query => query.state.data && !query.state.data.output && !query.state.error ? 5000 : false,
+    placeholderData: previous => previous,
+  });
+  const pages = detail.data;
+  return <div className="wm-tool-reader wm-tool-detail">
+    {detail.isPending && <p className="sr-only" role="status">Loading detail…</p>}
+    {detail.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Could not load detail.</Alert.Description></Alert.Content><Button variant="ghost" size="sm" onPress={() => void detail.refetch()}>Retry</Button></Alert>}
+    {pages && (["input", "output"] as const).map(side => {
+      const page = pages[side];
+      return <section key={side} aria-label={side === "input" ? "Tool input" : "Tool output"}>
+        <h4>{side === "input" ? "Input" : "Output"}</h4>
+        {page ? <MessageDetailContent emptyLabel={side === "input" ? "Empty input" : "Empty output"} detail={page} offset={offsets[side]} onPage={offset => setOffsets(current => ({ ...current, [side]: offset }))} /> : <p>{side === "input" ? "Input unavailable" : "No output yet"}</p>}
+      </section>;
+    })}
+  </div>;
+}

package/components/work/work-context-rail.tsx

@@ -0,0 +1,23 @@
+import { Button, Tooltip } from "@heroui/react";
+import { List } from "lucide-react";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useReadingArea } from "../shell/reading-context";
+import "./context-rail.css";
+
+/** The Work context card every Work page shows beside its conversation: the
+ * card collapses from the top bar's toggle, and closing a reading in the
+ * reading area makes room for it. The toggle and card exist only while some
+ * section has something to show; `beside` holds what stays outside the card.
+ * A Project's Home shows the Project in the same card under its own `label`. */
+export function WorkContextRail({ label = "Work context", hasContent, collapsed, onCollapsedChange, beside, children }: { label?: string; hasContent: boolean; collapsed: boolean; onCollapsedChange: (collapsed: boolean) => void; beside?: ReactNode; children: ReactNode }) {
+  const reader = useReadingArea();
+  const shown = !reader.content && !collapsed;
+  return <aside className="cr-rail" data-collapsed={!shown} aria-label={label}>
+    {/* The context toggle has a slot of its own so it stays rightmost whichever
+        topbar buttons appear first. */}
+    {hasContent && reader.contextToggleToolbar && createPortal(<Tooltip><Button aria-label={label} aria-pressed={shown} variant={shown ? "tertiary" : "ghost"} size="sm" isIconOnly onPress={() => { if (reader.content) reader.close(); onCollapsedChange(shown); }}><List size={17} aria-hidden="true" /></Button><Tooltip.Content>{label}</Tooltip.Content></Tooltip>, reader.contextToggleToolbar)}
+    {beside}
+    {hasContent && <div className="cr-card" hidden={!shown}>{children}</div>}
+  </aside>;
+}

package/components/work/work-conversation.tsx

@@ -0,0 +1,207 @@
+import type { StartupProgress } from "@talgent/workbench-contracts/agent/public/v1/startup_pb";
+import type { WorkStartupRequest } from "@talgent/workbench-contracts/agent/public/v1/work_pb";
+import type { WorkModelOption, WorkModelSelection } from "@talgent/workbench-contracts/agent/public/v1/model_pb";
+import { PermissionMode } from "@talgent/workbench-contracts/agent/public/v1/harness_pb";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { Alert, Button } from "@heroui/react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { StartupProgressPanel } from "../session/startup-progress";
+import type { WorkComputer } from "../../lib/computer-service";
+import { WorkPermissionControl } from "../session/work-permission-control";
+import { WorkThinkingControl } from "../session/work-thinking-control";
+import { useReadingArea } from "../shell/reading-context";
+import { useWorkLifecycleControls } from "../../hooks/use-work-lifecycle-controls";
+import { useWorkConversation } from "../../hooks/use-work-conversation";
+import { agentWorkClient } from "../../lib/client";
+import type { WorkStartInput } from "../../lib/start-work-request";
+import { newestStartupProgress } from "../../lib/startup-progress";
+import { adaptSubAgents, type SubAgent } from "../../lib/subagents";
+import { workModelOption as presentedModel } from "../../lib/work-model";
+import { stopReasonNotice } from "../../lib/work-state-presentation";
+import { awaitingReconnectionNotice, computerOfflineMessage } from "../../lib/work-projection";
+import { WorkMessageFlow, type ToolPreview } from "./work-message-flow";
+import { WorkInteraction } from "./work-interaction";
+import { WorkPromptBar } from "./work-prompt-bar";
+import { WorkStatusControl } from "./work-status-control";
+
+/** The Work's live Turn and requests are not observed now: Agent answers
+ * Unavailable during a Disconnection or while Dispatcher reattaches. */
+const unobserved = (error: unknown) => Boolean(error) && ConnectError.from(error).code === Code.Unavailable;
+
+export interface WorkConversationProps {
+  /** The Computer the Work runs on. */
+  computer?: WorkComputer;
+  agentWorkId: string;
+  /** What the Work is for, the first crumb of what it opens in the reading area. */
+  label: string;
+  /** Names what the Work is for while it starts. */
+  startupTitle?: string;
+  workLifecycle?: string;
+  /** Why the Work stopped, when it is Stopped. */
+  stateReason?: string;
+  /** Why a Failed Work ended, as Agent recorded it. */
+  failureReason?: string;
+  /** When the Work was disconnected; absent while observed. */
+  disconnectedSince?: Date;
+  /** The Stopped Work keeps its messages for its Managed Computer's return
+   * and resumes with them when it reconnects. */
+  resumeOnReconnection?: boolean;
+  workControlPending?: boolean;
+  startupProgress?: StartupProgress;
+  startupRequest?: WorkStartupRequest;
+  workModel?: WorkModelSelection;
+  /** The retained Model Configuration as currently provided; absent when withdrawn. */
+  workModelOption?: WorkModelOption;
+  allowedActions?: string[];
+  /** A Managed Work's permission mode; unspecified for a Cloud Work. */
+  permissionMode?: PermissionMode;
+  /** The Work runs in Claude Code's sandbox for its life. */
+  sandbox?: boolean;
+  /** The Work's start waits in its Computer's line for room. */
+  deskWaiting?: boolean;
+  workVersion?: bigint;
+  onWorkControlChange?: () => void;
+  onWorkLifecycleChange?: (lifecycle: string, updatedAt?: Date, startupProgress?: StartupProgress) => void;
+  /** The Work's SubAgents from each state frame of this stream. */
+  onSubAgentsChange?: (agents: SubAgent[]) => void;
+  /** Starts the Work again with its first startup request after admission failed. */
+  onRetryStart?: (input: WorkStartInput) => Promise<void>;
+  /** Adds a file to the Work; absent where the Work takes none. */
+  onUploadAttachment?: (file: File) => Promise<unknown>;
+  /** The Work's snapshot is still loading and no live state has arrived. */
+  isWorkLifecyclePending?: boolean;
+  /** A reader who is not the owner: the conversation renders without the
+   * prompt bar, responses or controls. */
+  readOnly?: boolean;
+  /** The reader's access was withdrawn while reading. */
+  onAccessWithdrawn?: () => void;
+  /** Says the Work's state shown is the last one read, when refreshing fails. */
+  snapshotNotice?: ReactNode;
+  /** Replaces the Work's own status control with one its page supplies. */
+  statusControl?: ReactNode;
+  /** Shown in place of the prompt bar once the Work is closed. */
+  closedText?: string;
+}
+
+/** A started Work's conversation: its startup until it is ready, then its
+ * messages, the request awaiting the owner and the prompt bar. */
+export function WorkConversation({ computer, agentWorkId, label, startupTitle, workLifecycle = "", stateReason, failureReason, disconnectedSince, resumeOnReconnection = false, workControlPending = false, startupProgress, startupRequest, workModel, workModelOption, workVersion, allowedActions = [], permissionMode = PermissionMode.UNSPECIFIED, sandbox = false, deskWaiting = false, onWorkControlChange, onWorkLifecycleChange, onSubAgentsChange, onRetryStart, onUploadAttachment, isWorkLifecyclePending = false, readOnly = false, onAccessWithdrawn, snapshotNotice, statusControl, closedText = "This Work has ended" }: WorkConversationProps) {
+  const cache = useQueryClient();
+  const { open: openReader } = useReadingArea();
+  const pendingInput = useRef<{ text: string; id: string } | null>(null);
+  const [liveStartup, setLiveStartup] = useState<StartupProgress>();
+  const processing = workLifecycle === "working";
+  const model = presentedModel(workModel, workModelOption);
+  // Turn and request controls are the owner's; a reader never queries them.
+  // During a Disconnection neither is observed, so neither is read; the
+  // Disconnection shown on the Work explains it.
+  const disconnected = Boolean(disconnectedSince);
+  const controlling = processing && !readOnly;
+  const observing = controlling && !disconnected;
+  const turn = useQuery({
+    queryKey: ["work-current-turn", agentWorkId], enabled: Boolean(agentWorkId && observing),
+    queryFn: ({ signal }) => agentWorkClient.getCurrentTurn({ workId: agentWorkId! }, { signal }),
+    retry: false, refetchInterval: observing ? 2000 : false, refetchOnWindowFocus: false,
+  });
+  const interactions = useQuery({
+    queryKey: ["work-pending-interactions", agentWorkId], enabled: Boolean(agentWorkId && observing),
+    queryFn: ({ signal }) => agentWorkClient.listPendingInteractions({ workId: agentWorkId! }, { signal }),
+    retry: false, refetchInterval: observing ? 2000 : false, refetchOnWindowFocus: false, gcTime: 0,
+  });
+  // What was last read is not current while unobserved, so it is not shown.
+  const turnObserved = processing && !disconnected && !unobserved(turn.error);
+  const requestsObserved = processing && !disconnected && !unobserved(interactions.error);
+  const refreshControls = useCallback(() => {
+    void cache.invalidateQueries({ queryKey: ["work-current-turn", agentWorkId] });
+    void cache.invalidateQueries({ queryKey: ["work-pending-interactions", agentWorkId] });
+  }, [cache, agentWorkId]);
+  const conversation = useWorkConversation(agentWorkId ?? undefined, state => {
+    if (state.preparationProgress) setLiveStartup(state.preparationProgress);
+    onWorkLifecycleChange?.(state.state, state.updatedAt ? timestampDate(state.updatedAt) : undefined, state.preparationProgress);
+    onSubAgentsChange?.(adaptSubAgents(state.subagents));
+    if (state.workProgress) onWorkControlChange?.();
+    refreshControls();
+  }, () => { refreshControls(); onWorkControlChange?.(); }, refreshControls, onAccessWithdrawn);
+  const currentStartup = newestStartupProgress(liveStartup, startupProgress);
+  const currentTurnId = turnObserved ? turn.data?.turnId : undefined;
+  const currentRequest = requestsObserved ? interactions.data?.interactions.find(item => !item.replySubmitted) ?? interactions.data?.interactions[0] : undefined;
+  const requiredResponse = Boolean(requestsObserved && interactions.data?.interactions.some(item => !item.replySubmitted));
+  const applyWork = (work?: { state: string; updatedAt?: Parameters<typeof timestampDate>[0]; startupProgress?: StartupProgress }) => {
+    if (!work) return;
+    onWorkLifecycleChange?.(work.state, work.updatedAt ? timestampDate(work.updatedAt) : undefined, work.startupProgress);
+  };
+  const controls = useWorkLifecycleControls(agentWorkId, applyWork, () => { onWorkControlChange?.(); refreshControls(); }, workVersion);
+  const { pending: actionPending, error: controlError, run: runAction, resume, continueWithInput, restart, setArchiveOpen } = controls;
+  // A Work awaiting its Computer's return says so itself, so its refused
+  // Resume adds no error of its own; once the Work is no longer stopped, the
+  // refusal no longer describes it.
+  const awaitingReconnection = resumeOnReconnection && workLifecycle === "stopped";
+  const actionError = controlError === computerOfflineMessage && (awaitingReconnection || workLifecycle !== "stopped") ? "" : controlError;
+  const controlsPending = workControlPending || actionPending;
+  // Input sent while a Turn runs is Steer. A required response holds the
+  // composer; its reply card stays usable. A Work not closed takes input:
+  // the owner's message to a stopped Work also resumes it.
+  // An unobserved Work takes it too: its buffer holds it for the Harness.
+  const resumable = workLifecycle === "stopped" && allowedActions.includes("resume") && !controlsPending;
+  const stopNotice = stopReasonNotice(workLifecycle, stateReason);
+  const canSend = (processing && (!requestsObserved || (interactions.isSuccess && !requiredResponse)) && !controlsPending) || resumable;
+  const openTool = useCallback((tool: ToolPreview, trigger: HTMLElement) => openReader({ kind: "tool", label, tool }, trigger), [openReader, label]);
+  // A running Work's settings change only while it runs and its controls are free.
+  const canAdjust = processing && allowedActions.includes("stop") && !controlsPending;
+  const thinkingControl = workModel ? <WorkThinkingControl sessionId={agentWorkId} option={model} initialLevel={startupRequest?.initialThinkingLevel} canAdjust={canAdjust} /> : undefined;
+  const workStatus = !readOnly && (statusControl ?? <WorkStatusControl workLifecycle={workLifecycle} stateReason={stateReason} disconnectedSince={disconnectedSince} allowedActions={allowedActions} disabled={workControlPending} controls={controls} />);
+
+  if (workLifecycle !== "closed" && currentStartup && currentStartup.status !== "completed") {
+    const retryInitial = !readOnly && workLifecycle === "created" && currentStartup.status === "failed" && !currentStartup.admitted && allowedActions.includes("retry_start") && startupRequest && onRetryStart;
+    const canRestart = !readOnly && workLifecycle === "failed" && allowedActions.includes("restart");
+    const retry = retryInitial ? () => void runAction(() => onRetryStart!({ initialMessage: startupRequest!.initialMessage, model: workModel, thinkingLevel: startupRequest!.initialThinkingLevel, repositorySelections: startupRequest!.repositories.map(repository => ({ repositoryId: repository.repositoryId, baseBranch: repository.baseBranch })) }))
+      : canRestart ? () => void restart() : !readOnly && workLifecycle === "stopped" && allowedActions.includes("resume") ? () => void resume() : undefined;
+    return <section data-testid="agent-stream-panel" className="stream-panel stream-panel-starting" aria-label="Agent Stream">{workStatus}{snapshotNotice}<StartupProgressPanel computer={computer} progress={currentStartup} waitingForRoom={deskWaiting && workLifecycle === "starting"} workTitle={startupTitle} request={startupRequest} model={model} onRetry={retry} retryLabel={retryInitial ? "Retry startup" : canRestart ? "Restart Work" : "Resume Work"} retryDescription={canRestart ? "Restart continues this Work using its saved conversation when available." : undefined} retryPending={controlsPending} retryError={actionError} onArchive={!readOnly && allowedActions.includes("archive") && ["failed", "stopped"].includes(workLifecycle) && !workControlPending ? () => setArchiveOpen(true) : undefined} /></section>;
+  }
+  // Until the Work's snapshot arrives, a newly started Work shows startup, never an empty conversation.
+  if (!currentStartup && (isWorkLifecyclePending || ["created", "starting"].includes(workLifecycle))) return <section data-testid="agent-stream-panel" className="stream-panel stream-panel-starting" aria-label="Agent Stream">{workStatus}{snapshotNotice}<p className="sr-only" role="status">Loading startup progress…</p></section>;
+
+  return <section data-testid="agent-stream-panel" className="stream-panel" aria-label="Agent Stream">
+    {workStatus}
+    {snapshotNotice}
+    <WorkMessageFlow conversation={conversation} currentTurnId={currentTurnId} waiting={requiredResponse} onOpenTool={openTool} />
+    {readOnly ? conversation.error && <div className="wi-notices"><Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Message history could not be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="ghost" onPress={conversation.retry}>Retry</Button></Alert></div> : <div className="wi-dock">
+      {currentRequest && <WorkInteraction key={currentRequest.id} workId={agentWorkId} request={currentRequest} disabled={controlsPending} onResponded={refreshControls} />}
+      {workLifecycle === "failed" && failureReason && <p className="wpb-feedback" role="status">This Work failed. {failureReason}</p>}
+      {stopNotice && <p className="wpb-feedback" role="status">{stopNotice}{allowedActions.includes("resume") && !awaitingReconnection && " Resume continues the conversation."}</p>}
+      {awaitingReconnection && <p className="wpb-feedback" role="status">{awaitingReconnectionNotice(computer?.name)}</p>}
+      {turnObserved && turn.data?.active && !currentTurnId && <p className="wpb-feedback" role="status">Starting turn…</p>}
+      {turnObserved && turn.data?.cancelRequested && <p className="wpb-feedback" role="status">Cancelling turn…</p>}
+      {(conversation.error || (turnObserved && turn.isError) || (requestsObserved && interactions.isError)) && <div className="wi-notices">
+        {turnObserved && turn.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Current turn unavailable.</Alert.Description></Alert.Content><Button size="sm" variant="ghost" onPress={() => void turn.refetch()}>Retry</Button></Alert>}
+        {requestsObserved && interactions.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Could not load the current request.</Alert.Description></Alert.Content><Button size="sm" variant="ghost" onPress={() => void interactions.refetch()}>Retry</Button></Alert>}
+        {conversation.error && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Message history could not be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="ghost" onPress={conversation.retry}>Retry</Button></Alert>}
+      </div>}
+      <WorkPromptBar repositories={startupRequest?.repositories} workId={agentWorkId} active={processing} disabled={false} mode={processing || resumable ? "send" : "disabled"} sendDisabled={!canSend}
+        workActionPending={controlsPending || Boolean(currentTurnId && turn.data?.cancelRequested)} workActionError={actionError}
+        placeholder={requiredResponse ? "Answer the request above to continue" : currentTurnId ? "Add to this turn" : processing && disconnected ? "Delivered once the Work reconnects" : "Work on anything"} unavailableText={workLifecycle === "closed" ? closedText : undefined} inputLabel="Instruction" sendLabel="Send instruction"
+        onSend={async text => {
+          if (!canSend) throw new Error(requiredResponse ? "Answer the request above first." : "Work is not ready for another instruction.");
+          if (!pendingInput.current || pendingInput.current.text !== text) pendingInput.current = { text, id: crypto.randomUUID() };
+          const input = pendingInput.current;
+          await agentWorkClient.sendMessage({ workId: agentWorkId, text, inputId: input.id });
+          if (pendingInput.current === input) pendingInput.current = null;
+          // A stopped Work keeps the message for its next start; resuming reads it.
+          if (resumable) { await continueWithInput(); return; }
+          // Keep the send lock until the authoritative post-admission state
+          // arrives; an unobserved Work has none to read.
+          if (observing) await turn.refetch();
+        }}
+        onCancelTurn={currentTurnId ? async () => {
+          await agentWorkClient.cancelTurn({ workId: agentWorkId, turnId: currentTurnId });
+          await turn.refetch();
+        } : undefined}
+        onUploadAttachment={workLifecycle === "closed" ? undefined : onUploadAttachment}
+        modelControl={permissionMode ? <div className="wpb-work-controls">
+          <WorkPermissionControl workId={agentWorkId} mode={permissionMode} sandbox={sandbox} canAdjust={canAdjust && allowedActions.includes("set_permission_mode")} starterOnly={processing && !allowedActions.includes("set_permission_mode")} />{thinkingControl}
+        </div> : thinkingControl} />
+    </div>}
+  </section>;
+}

package/components/work/work-history.tsx

@@ -0,0 +1,115 @@
+import { workPresentation } from "../../lib/work-state-presentation";
+import { useRef, useState } from "react";
+import { typographyVariants, Button, Chip, Dropdown, Label, ListBox, Modal, Spinner, Tooltip, Typography } from "@heroui/react";
+import { Archive, Circle, Ellipsis, Folder, Pause, Play } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { agentWorkClient } from "../../lib/client";
+import { agentWorkQueryKey } from "../../lib/agent-work-service";
+import { isStaleWorkControl, workControlErrorMessage } from "../../lib/work-projection";
+
+/** One recent Work: what it is for, its state and why it stopped, since when
+ * it is disconnected (when it is) and where it opens. */
+export type WorkHistoryRow = { id: string; title: string; state: string; waiting: boolean; stateReason?: string; disconnectedSince?: Date | null; to: string };
+
+/** The recent Works as the entry lists them, and what refreshes once one is controlled. */
+export type WorkHistorySource = {
+  data: WorkHistoryRow[] | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => unknown;
+  /** Query keys whose answers change with a Work's state. */
+  affects: ReadonlyArray<readonly unknown[]>;
+};
+
+/** Recent in the sidebar: the person's recent Works, each opening its page,
+ * with the owner's stop, resume and archive. */
+export function WorkHistory({ history, activeId, onNavigate }: { history: WorkHistorySource; activeId: string | null; onNavigate: (path: string) => void }) {
+  const [hoverId, setHoverId] = useState<string | null>(null);
+  const [menuId, setMenuId] = useState<string | null>(null);
+  const [archiveTarget, setArchiveTarget] = useState<WorkHistoryRow | null>(null);
+  const inFlight = useRef(false);
+  const queryClient = useQueryClient();
+  const targetId = archiveTarget?.id ?? menuId;
+  const snapshot = useQuery({
+    queryKey: agentWorkQueryKey(targetId),
+    queryFn: () => agentWorkClient.getWork({ workId: targetId ?? "" }),
+    enabled: Boolean(targetId),
+    staleTime: 0,
+    retry: false,
+    refetchInterval: targetId ? 5000 : false,
+  });
+  const control = useMutation({
+    mutationFn: async ({ id, action }: { id: string; action: "stop" | "resume" | "archive" }) => {
+      if (inFlight.current) return;
+      inFlight.current = true;
+      try {
+        // The version of the state this menu offered; a changed Work is refused.
+        const request = { workId: id, expectedVersion: snapshot.data?.work?.version };
+        if (action === "stop") await agentWorkClient.stopWork(request);
+        else if (action === "resume") await agentWorkClient.resumeWork(request);
+        else await agentWorkClient.archiveWork(request);
+        if (action === "archive") setArchiveTarget(null);
+      } catch (cause) {
+        if (action === "archive" && isStaleWorkControl(cause)) setArchiveTarget(null);
+        throw cause;
+      } finally { inFlight.current = false; }
+    },
+    onSettled: async (_, __, { id }) => {
+      await Promise.all([agentWorkQueryKey(id), ...history.affects].map(queryKey => queryClient.invalidateQueries({ queryKey })));
+    },
+  });
+  const session = snapshot.data?.work;
+  const allowed = snapshot.isError || snapshot.isFetching || control.isPending || session?.archivePending || session?.resumePending ? [] : session?.allowedActions ?? [];
+  const accessLost = history.error && [Code.PermissionDenied, Code.Unauthenticated].includes(ConnectError.from(history.error).code);
+  const rows = accessLost ? [] : history.data ?? [];
+  return <section className="p-session-history" aria-label="History">
+    {/* Archived Works stay in Recent, marked by their Closed state. */}
+    <Typography type="body-sm" color="muted" className="p-history-heading">Recent</Typography>
+    {history.error && <div role="alert"><Typography type="body-sm">History unavailable</Typography><Button size="sm" variant="ghost" onPress={() => { void history.refetch(); }}>Retry history</Button></div>}
+    {control.isError && !archiveTarget && <Typography type="body-sm" className="text-danger" role="alert">{workControlErrorMessage(control.error)}</Typography>}
+    {/* Selection marks the open Work, so choosing a row navigates on selection
+        change: with toggle selection a click on a list that already has a
+        selected row changes selection and never fires onAction. */}
+    <div className="p-history-list"><div className="p-session-rows" onMouseLeave={() => setHoverId(null)} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setHoverId(null); }}>
+      <ListBox className="p-session-list" aria-label="Recent" selectionMode="single" disallowEmptySelection selectedKeys={activeId && rows.some(row => row.id === activeId) ? [activeId] : []} onSelectionChange={keys => { const id = keys === "all" ? undefined : [...keys][0]; const row = rows.find(item => item.id === id); if (row && row.id !== activeId) onNavigate(row.to); }} renderEmptyState={() => <Typography type="body-sm" color="muted" className={history.isLoading ? "sr-only" : "p-sidebar-empty"}>{history.isLoading ? "Loading history…" : history.error ? "" : "No recent work"}</Typography>}>
+        {rows.map(row => {
+          // A forgotten question outranks the lifecycle, so the row asks for the
+          // person even after the Work stopped.
+          const presentation = workPresentation(row);
+          const Icon = presentation?.icon ?? Circle;
+          const label = presentation?.label ?? "Unknown state";
+          return <ListBox.Item key={row.id} id={row.id} textValue={row.title} className="p-session-item" data-waiting={row.waiting || undefined} data-actions-visible={hoverId === row.id || menuId === row.id} onHoverStart={() => setHoverId(row.id)} onFocus={() => setHoverId(row.id)}>
+            <Chip size="sm" variant="soft" color={presentation?.color ?? "default"} aria-hidden="true">{!row.waiting && !row.disconnectedSince && (row.state === "starting" || row.state === "stopping") ? <Spinner size="sm" color="current" /> : <Icon size={16} />}</Chip>
+            <Tooltip><Tooltip.Trigger role="presentation" tabIndex={-1} className="p-session-label"><Label><span className={typographyVariants({ type: "body-sm", color: row.id === activeId || row.waiting ? "default" : "muted", truncate: true }).base()} >{row.title}<span className="sr-only"> · {label}{presentation?.description && `. ${presentation.description}`}</span></span></Label></Tooltip.Trigger><Tooltip.Content placement="right" offset={48} className="p-session-tooltip">{row.title} · {label}{presentation?.description && <span className="block text-muted">{presentation.description}</span>}</Tooltip.Content></Tooltip>
+          </ListBox.Item>;
+        })}
+      </ListBox>
+      <div className="p-session-actions">{rows.map(row => <div key={row.id} className="p-session-action" data-visible={hoverId === row.id || menuId === row.id}>
+        <Dropdown onOpenChange={open => { setMenuId(open ? row.id : null); setHoverId(row.id); }}>
+          <Button size="sm" variant="ghost" isIconOnly aria-label={`Actions for ${row.id}`}><Ellipsis size={16} /></Button>
+          <Dropdown.Popover><Dropdown.Menu aria-label={`Actions for ${row.id}`} onAction={key => {
+            if (key === "open") onNavigate(row.to);
+            else if (key === "retry") void snapshot.refetch();
+            else if (key === "archive") { control.reset(); setArchiveTarget(row); }
+            else if ((key === "stop" || key === "resume") && allowed.includes(key)) control.mutate({ id: row.id, action: key });
+          }}>
+            <Dropdown.Item id="open" textValue="Open work"><Folder size={16} /><Label>Open work</Label></Dropdown.Item>
+            {snapshot.isFetching && <Dropdown.Item id="loading" isDisabled textValue="Checking actions"><Spinner size="sm" /><Label>Checking actions</Label></Dropdown.Item>}
+            {snapshot.isError && <Dropdown.Item id="retry" textValue="Retry actions"><Label>Retry actions</Label></Dropdown.Item>}
+            {allowed.includes("resume") && <Dropdown.Item id="resume" textValue="Resume work"><Play size={16} /><Label>Resume work</Label></Dropdown.Item>}
+            {allowed.includes("stop") && <Dropdown.Item id="stop" textValue="Stop work"><Pause size={16} /><Label>Stop work</Label></Dropdown.Item>}
+            {allowed.includes("archive") && <Dropdown.Item id="archive" textValue="Archive work"><Archive size={16} /><Label>Archive work</Label></Dropdown.Item>}
+          </Dropdown.Menu></Dropdown.Popover>
+        </Dropdown>
+      </div>)}</div>
+    </div></div>
+    <Modal><Modal.Backdrop isOpen={Boolean(archiveTarget)} onOpenChange={open => { if (!open && !control.isPending) setArchiveTarget(null); }} isDismissable={!control.isPending} isKeyboardDismissDisabled={control.isPending}>
+      <Modal.Container placement="center" size="sm"><Modal.Dialog>
+        <Modal.Header><Modal.Heading>Archive work?</Modal.Heading></Modal.Header>
+        <Modal.Body><Typography type="body-sm">Archive “{archiveTarget?.title}”? This permanently closes the conversation and removes its working files. Conversation history, attachment originals, published files and your home are kept.</Typography>{control.isError && <Typography type="body-sm" className="text-danger" role="alert">{workControlErrorMessage(control.error)}</Typography>}{snapshot.isError && <Button variant="ghost" onPress={() => { void snapshot.refetch(); }}>Retry actions</Button>}</Modal.Body>
+        <Modal.Footer><Button autoFocus variant="secondary" isDisabled={control.isPending} onPress={() => setArchiveTarget(null)}>Cancel</Button><Button variant="danger" isPending={control.isPending} isDisabled={!allowed.includes("archive")} onPress={() => { if (archiveTarget && !inFlight.current) control.mutate({ id: archiveTarget.id, action: "archive" }); }}>Archive work</Button></Modal.Footer>
+      </Modal.Dialog></Modal.Container>
+    </Modal.Backdrop></Modal>
+  </section>;
+}

package/components/work/work-interaction.css

@@ -0,0 +1,38 @@
+/* Floating interaction cards share the accepted PromptBar's width and bottom anchor. */
+.stream-panel:has(> .wm-scroll) > .wi-dock { position: absolute; inset-inline: 0; bottom: 0; z-index: 20; width: min(var(--wpb-panel-width), calc(100% - 2 * var(--wpb-panel-gutter))); margin-inline: auto; }
+.wi-dock > .wpb-conversation { width: 100%; }
+.wi-card { padding: 12px 14px; border: 1px solid color-mix(in oklch, var(--separator) 55%, transparent); border-radius: 20px; background: var(--surface); box-shadow: 0 4px 24px rgb(0 0 0 / 3%); max-height: calc(100dvh - 200px); overflow-y: auto; }
+.wi-heading { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding-inline: 2px; color: var(--muted); font-size: 14px; }
+.wi-heading > span, .wi-heading nav { display: flex; align-items: center; gap: 9px; }
+.wi-heading nav { gap: 3px; }
+.wi-heading nav .button { width: 24px; min-width: 24px; height: 24px; color: var(--muted); }
+.wi-count { min-width: 46px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
+.wi-card h3 { margin: 8px 2px; font-size: 15px; font-weight: 600; line-height: 1.5; outline: none; }
+.wi-choices { display: flex; flex-direction: column; gap: 2px; margin-inline: -4px; }
+.wi-choice { display: flex; position: relative; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 15px; line-height: 1.5; cursor: pointer; }
+.wi-choice:hover, .wi-choice[data-selected="true"] { background: var(--surface-secondary); }
+.wi-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
+.wi-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.wi-choice-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--separator) 65%, transparent); background: var(--surface-secondary); color: var(--muted); font-size: 14px; }
+.wi-choice-arrow { margin-left: auto; flex-shrink: 0; color: var(--muted); opacity: 0; }
+.wi-choice:hover .wi-choice-arrow, .wi-choice[data-selected="true"] .wi-choice-arrow { opacity: 1; }
+.wi-question-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.wi-custom { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
+.wi-custom input { width: 100%; min-width: 0; background: transparent; padding-block: 6px; font-size: 15px; outline: none; }
+.wi-custom input::placeholder { color: color-mix(in oklch, var(--muted) 55%, var(--surface)); }
+.wi-custom:focus-within { border-radius: 6px; outline: 2px solid var(--focus); outline-offset: 3px; }
+.wi-card footer .button { border-radius: 999px; flex-shrink: 0; font-size: 14px; }
+.wi-command { margin: 12px 2px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.wi-approval-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
+.wi-approval-footer kbd { padding: 0 5px; border-radius: 4px; background: var(--surface-secondary); font-size: 12px; }
+@media (max-width: 740px) { .wi-card { padding: 10px 12px; border-radius: 18px; } .wi-question-footer { flex-wrap: wrap; justify-content: flex-end; } .wi-custom { flex-basis: 100%; margin-bottom: 4px; } }
+
+.wi-feedback { margin: 8px 2px 0; color: var(--muted); font-size: 13px; }
+.wi-card .wm-tool-detail pre { max-height: 120px; }
+
+.wi-notices { display: grid; gap: 8px; margin-top: 8px; }
+
+/* Compact Work notices have one text row beside their indicator and action. */
+.wi-dock .alert { align-items: center; }
+.wi-dock .alert__content { height: auto; min-width: 0; justify-content: center; }
+.wi-dock .alert > :is(.alert__indicator, .button) { flex-shrink: 0; }