@talgent/workbench-ui 0.0.0 → 0.1.2

package/components/rail/rail.css

@@ -0,0 +1,19 @@
+/* A context rail: a card of collapsible sections beside a page's main
+   content, shared by every page that has one. */
+.cr-card { padding: 6px 18px; background: var(--surface); border: 1px solid color-mix(in oklch,var(--separator) 35%,transparent); border-radius: 22px; box-shadow: 0 4px 20px rgb(0 0 0 / 4%); max-height: calc(100dvh - 88px); overflow-y: auto; }
+.cr-section { padding: 14px 0; min-width: 0; }
+.cr-section~.cr-section { border-top: 1px solid color-mix(in oklch,var(--separator) 50%,transparent); }
+.cr-heading { display: flex; align-items: center; justify-content: space-between; min-height: 24px; gap: 6px; }
+.cr-heading h3 { flex: 1; min-width: 0; }
+.cr-heading>.button { min-width: 24px; width: 24px; height: 24px; padding: 0; color: var(--muted); }
+.cr-section h3,.cr-section-trigger { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted); line-height: 22px; }
+.cr-section-trigger { --button-bg: transparent; --button-bg-hover: transparent; --button-bg-pressed: transparent; width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 0; height: 24px; min-height: 24px; }
+.cr-summary { margin-right: auto; color: color-mix(in oklch,var(--muted) 70%,transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
+.cr-expand { opacity: 0; flex-shrink: 0; }
+.cr-section-trigger[aria-expanded="true"] .cr-expand { transform: rotate(90deg); }
+.cr-section:hover .cr-expand,.cr-section:focus-within .cr-expand { opacity: 1; }
+.cr-heading+div:not([hidden])>.cr-list { margin-top: 5px; }
+.cr-list { list-style: none; margin: 0; padding: 0; }
+@media (pointer: coarse) { .cr-expand { opacity: 1; } }
+@media (max-width: 900px) { .cr-card { max-height: none; } }
+.cr-notice { padding-block: 10px; font-size: 12px; }

package/components/rail/use-expand-on-change.ts

@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+// Whether a rail section is expanded, opening it when its content changes
+// while the rail is in view. `content` names what the section shows, undefined
+// until it is known; the first known content is where changes count from, and
+// a new `scope` (another subject) starts over at the section's default.
+export function useExpandOnChange({ content, scope, visible, defaultOpen }: { content: string | undefined; scope: string; visible: boolean; defaultOpen: boolean }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [seen, setSeen] = useState<{ scope: string; content: string | undefined }>({ scope, content });
+  if (seen.scope !== scope) {
+    setSeen({ scope, content });
+    setOpen(defaultOpen);
+  } else if (content !== undefined && content !== seen.content) {
+    setSeen({ scope, content });
+    if (seen.content !== undefined && visible) setOpen(true);
+  }
+  return [open, setOpen] as const;
+}

package/components/session/startup-progress.css

@@ -0,0 +1,77 @@
+/* Shared startup presentation, within the existing Work shell. */
+.wlp-stage { --wlp-secondary: color-mix(in oklch, var(--foreground) 75%, var(--surface)); width: min(688px, 100%); margin: clamp(20px, 4vh, 40px) auto 20px; padding-inline: 24px; }
+.wlp-panel { border: 1px solid var(--border); border-radius: 28px; padding: 24px 28px 0; background: var(--surface); box-shadow: 0 3px 8px oklch(0 0 0 / 0.02), 0 14px 40px -20px oklch(0 0 0 / 0.1); }
+.wlp-heading { display: flex; align-items: center; gap: 24px; }
+.wlp-symbol { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--default); color: var(--foreground); flex-shrink: 0; }
+.wlp-symbol > svg { width: 23px; height: 23px; stroke-width: 1.5; }
+.wlp-heading h2 { font-size: 23px; font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; }
+.wlp-heading-copy { min-width: 0; flex: 1; }
+.wlp-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; color: var(--wlp-secondary); font-size: 13px; line-height: 1.55; }
+.wlp-elapsed { align-self: flex-start; margin-left: auto; padding-top: 5px; color: var(--wlp-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
+.wlp-steps { list-style: none; margin: 22px 0 16px; padding: 0; }
+.wlp-steps li { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 38px; padding: 0 0 10px; }
+.wlp-steps li:not(:last-child)::after { content: ""; position: absolute; width: 1px; background: var(--separator); left: 11px; top: 25px; bottom: 1px; }
+.wlp-steps li:last-child { padding-bottom: 0; min-height: 24px; }
+.wlp-step-marker { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: var(--wlp-secondary); }
+.wlp-step-marker > span:empty { width: 6px; height: 6px; border: 1px solid var(--wlp-secondary); border-radius: 50%; opacity: 0.5; }
+.wlp-step-copy { min-width: 0; flex: 1; padding-top: 2px; font-size: 14px; }
+.wlp-step-copy p { color: var(--wlp-secondary); font-size: 12px; line-height: 1.6; margin-top: 4px; }
+.wlp-steps [data-state="pending"] .wlp-step-copy { color: var(--wlp-secondary); }
+.wlp-steps [data-state="active"] .wlp-step-copy > span { font-weight: 600; }
+.wlp-steps [data-state="active"] .wlp-step-marker { background: var(--default); }
+.wlp-steps [data-state="complete"] .wlp-step-marker { color: oklch(48% 0.055 160); background: oklch(96% 0.018 160); }
+.wlp-steps [data-state="failed"] .wlp-step-marker { color: var(--danger); background: color-mix(in oklch, var(--danger) 8%, var(--surface)); }
+.wlp-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; background: var(--default); }
+.wlp-error { margin-bottom: 14px; gap: 8px; padding: 10px 12px; border-radius: 12px; box-shadow: none; }
+.wlp-error.alert--danger { background: color-mix(in oklch, var(--danger) 8%, var(--surface)); }
+.wlp-error .alert__description { font-size: 13px; line-height: 1.6; color: var(--foreground); }
+.wlp-request { border-top: 1px solid var(--separator); }
+.wlp-request summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-block: 12px; font-size: 12px; list-style: none; }
+.wlp-request summary::-webkit-details-marker { display: none; }
+.wlp-request summary > span:nth-child(2) { margin-left: auto; color: var(--wlp-secondary); }
+.wlp-request[open] summary > svg { transform: rotate(180deg); }
+.wlp-request-content { padding: 0 0 20px; font-size: 13px; line-height: 1.7; }
+.wlp-request-content > p { white-space: pre-wrap; overflow-wrap: anywhere; }
+.wlp-request-content dl { display: grid; gap: 6px; margin-top: 16px; }
+.wlp-request-content dl > div { display: flex; gap: 14px; }
+.wlp-request-content dt { width: 90px; flex-shrink: 0; color: var(--wlp-secondary); }
+.wlp-request-content dd { min-width: 0; overflow-wrap: anywhere; }
+.wlp-footer { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 0 -28px; padding: 10px 20px 10px 28px; border-radius: 0 0 28px 28px; background: color-mix(in oklch, var(--foreground) 3%, var(--surface)); }
+.wlp-footer p { display: flex; align-items: center; gap: 6px; color: var(--wlp-secondary); font-size: 12px; }
+.wlp-footer button { flex-shrink: 0; }
+:is(.dark, [data-theme="dark"]) .wlp-steps [data-state="complete"] .wlp-step-marker { color: oklch(78% 0.055 160); background: oklch(28% 0.025 160); }
+@media (max-width: 740px) {
+  .wlp-stage { padding-inline: 12px; margin-top: 16px; }
+  .wlp-panel { padding: 20px 18px 0; border-radius: 24px; }
+  .wlp-heading { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
+  .wlp-symbol { width: 36px; height: 36px; border-radius: 12px; }
+  .wlp-heading > div { flex: 1; min-width: 0; }
+  .wlp-heading h2 { font-size: 20px; }
+  .wlp-elapsed { padding-top: 0; }
+  .wlp-steps li { gap: 10px; }
+  .wlp-request summary { flex-wrap: wrap; }
+  .wlp-request summary > span:nth-child(2) { margin-left: 0; font-size: 11px; }
+  .wlp-request summary > svg { margin-left: auto; }
+  .wlp-footer { margin-inline: -18px; padding: 10px 18px; border-radius: 0 0 24px 24px; flex-wrap: wrap; }
+  }
+
+/* Ambient motion shows activity, never invented percentage progress. */
+.wlp-panel { animation: wlp-enter 240ms cubic-bezier(0.2, 0, 0, 1) both; }
+.wlp-symbol { position: relative; isolation: isolate; }
+.wlp-symbol[data-running="true"]::before { content: ""; position: absolute; inset: -9px; border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent); border-radius: 50%; z-index: -1; animation: wlp-breathe 2800ms ease-in-out infinite; }
+.wlp-symbol[data-running="true"] > svg { animation: wlp-glow 2800ms ease-in-out infinite; }
+.wlp-heading-copy, .wlp-stage-detail { animation: wlp-enter 200ms cubic-bezier(0.2, 0, 0, 1) both; }
+.wlp-steps [data-state="complete"] .wlp-step-marker { animation: wlp-complete 200ms cubic-bezier(0.2, 0, 0, 1) both; }
+@keyframes wlp-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes wlp-breathe { 0%, 100% { opacity: 0.25; transform: scale(0.96); } 50% { opacity: 0.75; transform: scale(1.08); } }
+@keyframes wlp-glow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
+@keyframes wlp-complete { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
+.wlp-orbit { position: absolute; inset: -9px; border-radius: 50%; animation: wlp-orbit 4000ms linear infinite; }
+.wlp-orbit::before { content: ""; position: absolute; width: 6px; height: 6px; left: calc(50% - 3px); top: -2px; background: var(--foreground); opacity: 0.6; border-radius: 50%; box-shadow: 0 0 8px color-mix(in oklch, var(--foreground) 12%, transparent); }
+.wlp-activity { display: block; width: min(240px, 100%); height: 2px; margin-top: 8px; border-radius: 2px; overflow: hidden; background: var(--separator); }
+.wlp-activity::after { content: ""; display: block; width: 25%; height: 100%; background: var(--wlp-secondary); border-radius: inherit; animation: wlp-flow 1800ms cubic-bezier(0.2, 0, 0, 1) infinite; }
+@keyframes wlp-orbit { to { transform: rotate(360deg); } }
+@keyframes wlp-flow { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
+@media (prefers-reduced-motion: reduce) {
+  .wlp-stage *, .wlp-stage *::before, .wlp-stage *::after { animation: none !important; transition: none !important; }
+}

package/components/session/startup-progress.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+import { Alert, Button, Spinner } from "@heroui/react";
+import { Check, ChevronDown, CircleAlert, Cloud, Monitor, RotateCcw, Square, X } from "lucide-react";
+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 } from "@talgent/workbench-contracts/agent/public/v1/model_pb";
+import { modelVendors } from "../../lib/model-vendors";
+import type { WorkComputer } from "../../lib/computer-service";
+import "./startup-progress.css";
+
+const stages: Record<string, { name: string; detail: string }> = {
+  admission: { name: "Preparing to start", detail: "Checking availability for your Work." },
+  sandbox: { name: "Preparing computer", detail: "Bringing your cloud environment online." },
+
+  agent: { name: "Starting Agent", detail: "Loading the Agent and enabled plugins." },
+  workspace: { name: "Preparing workspace", detail: "Getting your working files and tools ready." },
+  input: { name: "Submitting task", detail: "Passing your instruction to the Agent." },
+};
+const statuses: Record<string, string> = { pending: "Waiting", active: "In progress", completed: "Ready", failed: "Failed", cancelled: "Cancelled" };
+interface Props {
+  progress: StartupProgress | undefined;
+  workTitle?: string;
+  request?: WorkStartupRequest;
+  model?: WorkModelOption;
+  onRetry?: () => void;
+  onArchive?: () => void;
+  retryLabel?: string;
+  retryDescription?: string;
+  retryPending?: boolean;
+  retryError?: string;
+  /** The start waits in its Computer's line for room. */
+  waitingForRoom?: boolean;
+  /** The Computer the Work starts on; a Cloud when absent. */
+  computer?: WorkComputer;
+}
+
+export function StartupProgressPanel(props: Props) {
+  if (!props.progress || props.progress.status === "completed") return null;
+  return <StartupProgressView key={props.progress.requestId} {...props} progress={props.progress} />;
+}
+
+function StartupProgressView({ computer, progress, workTitle, request, model, onRetry, onArchive, retryLabel = "Retry startup", retryDescription, retryPending = false, retryError, waitingForRoom = false }: Props & { progress: StartupProgress }) {
+  const running = progress.status === "preparing" || progress.status === "recovering";
+  const failed = progress.status === "failed";
+  const cancelled = progress.status === "cancelled";
+  const [observedAt] = useState(() => Date.now());
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!running) return;
+    const timer = window.setInterval(() => setElapsed(Math.floor((Date.now() - observedAt) / 1000)), 1000);
+    return () => window.clearInterval(timer);
+  }, [observedAt, running]);
+  // A start waiting in its Computer's line has no preparation under way yet.
+  const queued = waitingForRoom && !failed && !cancelled;
+  const managed = computer?.managed ?? false;
+  const title = failed ? "Work couldn’t start" : cancelled ? "Startup cancelled" : queued ? "Waiting for room" : running ? "Starting your Work" : "Waiting for startup status";
+  const current = progress.stages.find(stage => stage.status === "active");
+  const elapsedText = `${String(Math.floor(elapsed / 60)).padStart(2, "0")}:${String(elapsed % 60).padStart(2, "0")}`;
+  return <section className="wlp-stage" aria-label="Startup progress">
+    <div className="wlp-panel" data-state={progress.status}>
+      <header className="wlp-heading">
+        <span className="wlp-symbol" data-running={running} aria-hidden="true">{running && <span className="wlp-orbit" />}{failed ? <CircleAlert /> : cancelled ? <Square /> : managed ? <Monitor /> : <Cloud />}</span>
+        <div key={title} className="wlp-heading-copy"><h2>{title}</h2>{workTitle && <p title={workTitle}>{workTitle}</p>}</div>
+        {running && <span className="wlp-elapsed" role="timer" title="Time observing this startup on this page" aria-label={`Observed on this page for ${elapsed} seconds`}>{elapsedText}</span>}
+      </header>
+      {!queued && <ol className="wlp-steps" aria-label="Startup stages">
+        {progress.stages.map(stage => {
+          const active = stage.status === "active" && running;
+          const done = stage.status === "completed";
+          const state = done ? "complete" : stage.status;
+          return <li key={stage.stage} data-state={state} aria-current={active || stage.status === "failed" ? "step" : undefined}>
+            <span key={state} className="wlp-step-marker" aria-hidden="true">{done ? <Check size={14} /> : active ? <Spinner size="sm" /> : stage.status === "failed" ? <X size={14} /> : <span />}</span>
+            <div className="wlp-step-copy"><span>{stages[stage.stage]?.name ?? stage.stage}</span>{active && <p className="wlp-stage-detail">{stageDetail(stage.stage, managed)}<span className="wlp-activity" aria-hidden="true" /></p>}</div>
+            <span className="sr-only">{statuses[stage.status] ?? "Waiting for status"}</span>
+          </li>;
+        })}
+      </ol>}
+      <div className="sr-only" role="status">{title}. {running && current && !queued ? stages[current.stage]?.name ?? current.stage : ""}</div>
+      {queued ? <p className="wlp-notice">It starts once a running Work on its Computer ends.</p>
+        : progress.status === "recovering" ? <p className="wlp-notice">A startup step is being retried automatically.</p>
+        : running && elapsed >= 45 && <p className="wlp-notice">This is taking longer than usual. Work is still preparing.</p>}
+      {(failed || cancelled) && progress.reason && <Alert className="wlp-error" status={failed ? "danger" : "default"} role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{progress.reason}</Alert.Description></Alert.Content></Alert>}
+      {request && <details className="wlp-request"><summary><span>View request</span><span>{[model?.name, request.initialThinkingLevel].filter(Boolean).join(" · ")}</span><ChevronDown size={14} /></summary>
+        <div className="wlp-request-content"><p>{request.initialMessage}</p><dl>
+          <div><dt>Computer</dt><dd>{computer?.name ?? (managed ? "Managed Computer" : "Cloud")}</dd></div>
+          {model && <div><dt>Model</dt><dd>{model.name} · {modelVendors[model.vendor]?.label}</dd></div>}
+          <div><dt>Agent</dt><dd>{request.startupAgent || "Default Agent"}</dd></div>
+          {request.repositories.length > 0 && <div><dt>Repository</dt><dd>{request.repositories.map(repository => repository.name || repository.repositoryId).join(", ")}</dd></div>}
+          <div><dt>Plugins</dt><dd>{request.plugins.length ? request.plugins.join(", ") : "None"}</dd></div>
+        </dl></div>
+      </details>}
+      {retryError && <Alert className="wlp-error" status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{retryError}</Alert.Description></Alert.Content></Alert>}
+      <footer className="wlp-footer"><p>{retryDescription ?? (running ? "Work starts in the background." : request ? "Your request is saved." : "Waiting for startup details.")}</p>{onArchive && <Button size="sm" variant="danger-soft" isDisabled={retryPending} onPress={onArchive}>Archive Work</Button>}{onRetry && <Button size="sm" isPending={retryPending} onPress={onRetry}><RotateCcw size={14} />{retryLabel}</Button>}</footer>
+    </div>
+  </section>;
+}
+
+// A Managed Computer is the person's own machine, already online when a start
+// reaches it; its sandbox stage readies the Work there.
+function stageDetail(stage: string, managed: boolean): string {
+  if (managed && stage === "sandbox") return "Getting your computer ready for this Work.";
+  return stages[stage]?.detail ?? "Waiting for the next startup update.";
+}

package/components/session/work-permission-control.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Popover } from "@heroui/react";
+import { ChevronDown, Lock, Shield } from "lucide-react";
+import type { PermissionMode } from "@talgent/workbench-contracts/agent/public/v1/harness_pb";
+import type { GetWorkResponse } from "@talgent/workbench-contracts/agent/public/v1/work_pb";
+import { PermissionModeList } from "../composer/permission-mode-list";
+import { PopoverFootnote } from "../composer/prompt-bar-controls";
+import { agentWorkClient } from "../../lib/client";
+import { agentWorkQueryKey } from "../../lib/agent-work-service";
+import { permissionModeOption } from "../../lib/permission-modes";
+import "../composer/work-start.css";
+
+// A running Managed Work's permission mode, which only its starter may switch
+// while it runs. A change shows at once and returns to the previous mode if
+// the Harness refuses it; the Work then follows the mode its Harness reports,
+// also one the Harness changed to by itself. Whether the Work runs in Claude
+// Code's sandbox is fixed at start, so it is only stated.
+export function WorkPermissionControl({ workId, mode, sandbox, canAdjust, starterOnly }: { workId: string; mode: PermissionMode; sandbox: boolean; canAdjust: boolean; starterOnly: boolean }) {
+  const [open, setOpen] = useState(false);
+  const cache = useQueryClient();
+  // The accepted mode until the Work itself reports a newer one.
+  const [accepted, setAccepted] = useState<{ mode: PermissionMode; basis: PermissionMode }>();
+  const change = useMutation({
+    mutationFn: async (next: PermissionMode) => (await agentWorkClient.setPermissionMode({ workId, permissionMode: next })).permissionMode,
+    onSuccess: next => {
+      setAccepted({ mode: next, basis: mode });
+      cache.setQueryData<GetWorkResponse>(agentWorkQueryKey(workId), data => data?.work ? { ...data, work: { ...data.work, permissionMode: next } } : data);
+      void cache.invalidateQueries({ queryKey: agentWorkQueryKey(workId) });
+    },
+  });
+  const shown = change.isPending ? change.variables ?? mode : accepted && accepted.basis === mode ? accepted.mode : mode;
+  const option = permissionModeOption(shown);
+  return <Popover isOpen={open} onOpenChange={value => { setOpen(value); if (value && !change.isPending) change.reset(); }}>
+    <Button size="sm" variant="ghost" aria-label="Permission mode" className="wpb-mode-trigger">
+      <Shield size={14} aria-hidden="true" /><span className="wpb-mode-name">{option?.short ?? "Permissions"}</span><ChevronDown size={13} />
+    </Button>
+    <Popover.Content placement="top end" className="wpb-popover wpb-popover-narrow"><Popover.Dialog aria-label="Permission mode">
+      <PermissionModeList value={shown} disabled={!canAdjust || change.isPending} onChange={next => change.mutate(next)} />
+      {change.error && <p className="wpb-popover-error" role="alert">Permission mode wasn’t changed: {change.error.message}</p>}
+      {starterOnly && <PopoverFootnote>Only the person who started this Work can change it</PopoverFootnote>}
+      {sandbox && <PopoverFootnote><span className="wpb-sandbox-note"><Lock size={12} aria-hidden="true" />Runs in Claude Code’s sandbox</span></PopoverFootnote>}
+    </Popover.Dialog></Popover.Content>
+  </Popover>;
+}

package/components/session/work-thinking-control.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button, Popover, Tooltip } from "@heroui/react";
+import { Lock } from "lucide-react";
+import type { WorkModelOption } from "@talgent/workbench-contracts/agent/public/v1/model_pb";
+import { ModelTrigger, ModelVendorIcon, ThinkingEffort } from "../composer/prompt-bar-controls";
+import { agentWorkClient } from "../../lib/client";
+import { modelVendors } from "../../lib/model-vendors";
+import { thinkingLevelName } from "../../lib/thinking-levels";
+import "../composer/work-start.css";
+
+type ThinkingLevel = { level: string };
+
+// A running Work keeps its model, so the card presents it read
+// only and adjusts only the thinking effort. The model comes from the Work
+// itself; a withdrawn configuration has no option and offers no levels. The
+// level is read from the Harness once and cached: a change shows at once and
+// returns to the previous level if the Harness refuses it.
+export function WorkThinkingControl({ sessionId, option, initialLevel = "", canAdjust }: { sessionId: string; option?: WorkModelOption; initialLevel?: string; canAdjust: boolean }) {
+  const [open, setOpen] = useState(false);
+  const cache = useQueryClient();
+  const key = ["work-thinking-level", sessionId];
+  const current = useQuery({ queryKey: key, queryFn: ({ signal }) => agentWorkClient.getThinkingLevel({ workId: sessionId }, { signal }), retry: false, staleTime: 60_000 });
+  const change = useMutation({
+    mutationFn: (level: string) => agentWorkClient.setThinkingLevel({ workId: sessionId, level }),
+    onMutate: async level => {
+      // A read still in flight must not overwrite the level just chosen.
+      await cache.cancelQueries({ queryKey: key });
+      const previous = cache.getQueryData<ThinkingLevel>(key);
+      cache.setQueryData<ThinkingLevel>(key, { level });
+      return { previous };
+    },
+    onError: (_error, _level, context) => cache.setQueryData(key, context?.previous),
+  });
+  const levels = option?.thinkingLevels ?? [];
+  const level = current.data?.level ?? (initialLevel || option?.defaultThinkingLevel || "");
+  const effort = current.isError ? "Unavailable" : option ? thinkingLevelName(level) : "";
+  // Opening refreshes a stale level in the background; the card never waits on it.
+  return <Popover isOpen={open} onOpenChange={value => { setOpen(value); if (!value) return; change.reset(); if (current.isStale && !change.isPending) void current.refetch(); }}>
+    <ModelTrigger name={option?.name ?? "Unavailable model"} effort={effort} tentative={current.isPending} />
+    <Popover.Content placement="top end" className="wpb-popover wpb-popover-narrow"><Popover.Dialog aria-label="Model settings">
+      <div className="wpb-model-head">
+        {option && <ModelVendorIcon vendor={option.vendor} />}
+        <span className="wpb-choice-copy"><span className="wpb-model-head-name">{option?.name ?? "Unavailable model"}</span>{option && <span className="wpb-muted">{modelVendors[option.vendor]?.label}</span>}</span>
+        <Tooltip delay={200}><Tooltip.Trigger className="wpb-lock" tabIndex={0} aria-label="Model is fixed for this Work"><Lock size={13} aria-hidden="true" /></Tooltip.Trigger><Tooltip.Content>Fixed for this Work</Tooltip.Content></Tooltip>
+      </div>
+      {levels.length > 0 && <ThinkingEffort levels={levels} value={level} disabled={!canAdjust || current.isError || change.isPending} onChange={next => change.mutate(next)} />}
+      {change.error && <p className="wpb-popover-error" role="alert">Thinking effort wasn’t changed: {change.error.message}</p>}
+      {current.isError && <p className="wpb-popover-error" role="alert">Thinking effort couldn’t be read. <Button size="sm" variant="ghost" onPress={() => void current.refetch()}>Retry</Button></p>}
+    </Popover.Dialog></Popover.Content>
+  </Popover>;
+}

package/components/shell/account-menu.tsx

@@ -0,0 +1,134 @@
+import { Avatar, Button, Dropdown, Header, Label, Separator, typographyVariants } from "@heroui/react";
+import { AlertTriangle, Box, ChartColumn, Ellipsis, History, Library, LogOut, Monitor, Plus, Puzzle, UserRound } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { useCurrentUser, useLogout } from "../../lib/account-service";
+import type { PersonalPaths } from "./entry-shell";
+import { useInstalledConnectors, useInstalledPlugins, usePluginReleases } from "../../lib/marketplace-catalog";
+import { serviceLabel } from "../../lib/marketplace-connections";
+import { pluginDisplayName, pluginPresentation } from "../../lib/marketplace-plugins";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import { installationNeedsSetup } from "../../lib/plugin-parameters";
+import { safeDisplayName, safeEmail } from "../../lib/user-display";
+import { ConnectorIcon, PluginIcon } from "../marketplace/marketplace-icons";
+
+// The account sits at the sidebar bottom and owns what is about the person:
+// what they installed, their profile and signing out.
+const installedShown = 8;
+
+type InstalledItem = { id: string; label: string; to: string; icon: ReactNode; disabled: boolean; needsSetup: boolean };
+
+// Installed Plugins (by the name shown), then Installed Connectors. Loads only
+// once the person reaches for the menu, and reads the release of each installed
+// Plugin (to name it and mark one needing setup), never the whole catalog.
+function useInstalledItems(enabled: boolean) {
+  const plugins = useInstalledPlugins({ enabled });
+  const connectors = useInstalledConnectors({ enabled });
+  const installedPlugins = [...(plugins.data?.values() ?? [])];
+  const releases = usePluginReleases(installedPlugins.map(installed => installed.slug));
+  const pluginItems: InstalledItem[] = installedPlugins.map(installed => {
+    const release = releases.get(installed.slug);
+    return {
+      id: `plugin:${installed.slug}`,
+      label: release ? pluginPresentation(release).name : pluginDisplayName(installed.slug),
+      to: marketplacePaths.plugin(installed.slug),
+      icon: release ? <PluginIcon plugin={release} size={20} /> : <Puzzle size={16} />,
+      disabled: !installed.enabled,
+      needsSetup: Boolean(release && installationNeedsSetup(release.parameters, installed)),
+    };
+  });
+  const connectorItems: InstalledItem[] = (connectors.data ?? []).map(connector => ({
+    id: `connector:${connector.name}`,
+    label: serviceLabel(connector.name),
+    to: marketplacePaths.connector(connector.name),
+    icon: <ConnectorIcon name={connector.name} size={20} />,
+    disabled: connector.status === "disabled",
+    needsSetup: Boolean(connector.provider && connector.providerConnection !== "connected"),
+  }));
+  pluginItems.sort((a, b) => a.label.localeCompare(b.label));
+  return {
+    items: [...pluginItems, ...connectorItems],
+    isLoading: enabled && (plugins.isPending || connectors.isPending) && !(plugins.isError || connectors.isError),
+    isError: plugins.isError || connectors.isError,
+    retry: () => { void plugins.refetch(); void connectors.refetch(); },
+  };
+}
+
+const personalItems = [
+  { id: "personal-new", label: "New work", icon: Plus, to: (paths: PersonalPaths) => paths.newWork },
+  { id: "personal-works", label: "Personal works", icon: History, to: (paths: PersonalPaths) => paths.works },
+  { id: "personal-library", label: "Library", icon: Library, to: (paths: PersonalPaths) => paths.library },
+  { id: "personal-usage", label: "Usage", icon: ChartColumn, to: (paths: PersonalPaths) => paths.usage },
+] as const;
+
+/** `personal` adds the person's own pages where the entry's navigation has
+ * no place for them. */
+export function AccountMenu({ compact, onNavigate, personal }: { compact: boolean; onNavigate: (path: string) => void; personal?: PersonalPaths }) {
+  const user = useCurrentUser().data?.user;
+  const logout = useLogout();
+  // Hovering or focusing the trigger starts loading, so the menu rarely opens empty.
+  const [wanted, setWanted] = useState(false);
+  const { items: installed, isLoading, isError, retry } = useInstalledItems(wanted);
+  const email = safeEmail(user?.primaryEmail);
+  const name = safeDisplayName(user?.displayName, user?.id, email || "Profile");
+  const initial = name.trim().charAt(0).toUpperCase() || "P";
+  return (
+    <Dropdown onOpenChange={open => { if (open) setWanted(true); }}>
+      <Button variant="ghost" className={compact ? undefined : "p-sidebar-account"} isIconOnly={compact} aria-label={`Account menu: ${name}`}
+        onHoverStart={() => setWanted(true)} onFocus={() => setWanted(true)}>
+        <Avatar size="sm" className="size-6 shrink-0 rounded-full" aria-hidden="true">
+          {user?.avatarUrl && <Avatar.Image src={user.avatarUrl} alt="" />}
+          <Avatar.Fallback>{initial}</Avatar.Fallback>
+        </Avatar>
+        {!compact && <><span className={`${typographyVariants({ type: "body-sm", weight: "medium", truncate: true }).base()} p-sidebar-account-name`}>{name}</span><Ellipsis size={14} aria-hidden="true" /></>}
+      </Button>
+      <Dropdown.Popover placement="top start" className="p-sidebar-menu">
+        <Dropdown.Menu aria-label="Account" onAction={key => {
+          const own = personal && personalItems.find(item => item.id === key);
+          if (own) onNavigate(own.to(personal));
+          else if (key === "profile") onNavigate("/profile");
+          else if (key === "computers") onNavigate("/computers");
+          else if (key === "sign-out") logout.mutate();
+          else if (key === "installed-retry") retry();
+          else { const item = installed.find(entry => entry.id === key); if (item) onNavigate(item.to); }
+        }}>
+          {installed.length > 0 && <Dropdown.Section aria-label="Installed">
+            <Header>Installed</Header>
+            {installed.slice(0, installedShown).map(item => <InstalledEntry key={item.id} item={item} />)}
+            {/* The rest open beside the menu; the entry is marked when one of them needs attention. */}
+            {installed.length > installedShown && <Dropdown.SubmenuTrigger>
+              <Dropdown.Item id="all-installed" textValue={`All installed (${installed.length})`}><Box size={16} aria-hidden="true" /><Label>All installed ({installed.length})</Label>
+                {installed.slice(installedShown).some(item => item.needsSetup) && <AlertTriangle size={13} className="ml-auto shrink-0 text-warning" aria-label="Needs attention" />}
+                <Dropdown.SubmenuIndicator /></Dropdown.Item>
+              <Dropdown.Popover className="p-sidebar-menu max-h-[60vh] overflow-y-auto">
+                <Dropdown.Menu aria-label="All installed" onAction={key => { const item = installed.find(entry => entry.id === key); if (item) onNavigate(item.to); }}>
+                  {installed.slice(installedShown).map(item => <InstalledEntry key={item.id} item={item} />)}
+                </Dropdown.Menu>
+              </Dropdown.Popover>
+            </Dropdown.SubmenuTrigger>}
+          </Dropdown.Section>}
+          {isLoading && <Dropdown.Item id="installed-loading" textValue="Loading installed" isDisabled><Label>Loading installed…</Label></Dropdown.Item>}
+          {isError && <Dropdown.Item id="installed-retry" textValue="Installed couldn’t be loaded. Retry"><AlertTriangle size={16} className="text-warning" aria-hidden="true" /><Label>Installed couldn’t be loaded. Retry</Label></Dropdown.Item>}
+          {(installed.length > 0 || isLoading || isError) && <Separator />}
+          {personal && <Dropdown.Section aria-label="Personal">
+            <Header>Personal</Header>
+            {personalItems.map(({ id, label, icon: Icon }) => <Dropdown.Item key={id} id={id} textValue={label}><Icon size={16} aria-hidden="true" /><Label>{label}</Label></Dropdown.Item>)}
+          </Dropdown.Section>}
+          {personal && <Separator />}
+          <Dropdown.Item id="profile" textValue="Edit profile"><UserRound size={16} aria-hidden="true" /><Label>Edit profile</Label></Dropdown.Item>
+          <Dropdown.Item id="computers" textValue="Computers"><Monitor size={16} aria-hidden="true" /><Label>Computers</Label></Dropdown.Item>
+          <Separator />
+          <Dropdown.Item id="sign-out" textValue="Sign out" isDisabled={logout.isPending}><LogOut size={16} aria-hidden="true" /><Label>Sign out</Label></Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown.Popover>
+    </Dropdown>
+  );
+}
+
+function InstalledEntry({ item }: { item: InstalledItem }) {
+  return <Dropdown.Item id={item.id} textValue={item.label} className={item.disabled ? "opacity-50" : undefined}>
+    <span className="flex size-5 shrink-0 items-center justify-center" aria-hidden="true">{item.icon}</span>
+    <Label>{item.label}</Label>
+    {item.disabled && <span className="sr-only">Disabled</span>}
+    {item.needsSetup && <AlertTriangle size={13} className="ml-auto shrink-0 text-warning" aria-label="Needs attention" />}
+  </Dropdown.Item>;
+}

package/components/shell/app-shell.tsx

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Breadcrumbs, Button, Card, Drawer } from "@heroui/react";
+import { Menu } from "lucide-react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { coreReading } from "./core-reading";
+import { ReadingContext, type ReadingContent, type ReadingRenderer } from "./reading-context";
+import { ReadingPanel } from "./reading-panel";
+
+/** What every entry's sidebar is given by the shell. */
+export type ShellSidebarProps = {
+  compact: boolean;
+  mobile: boolean;
+  isReading: boolean;
+  onNavigate: (path: string) => void;
+  onCollapsedChange: (collapsed: boolean) => void;
+  onCloseMobile: () => void;
+};
+
+/** One level of the page location; the last one is the current page. */
+export type Crumb = { label: string; to?: string; onPress?: () => void };
+
+export interface AppShellProps {
+  children: ReactNode;
+  sidebar: (props: ShellSidebarProps) => ReactNode;
+  /** The page's name for assistive technology. */
+  title: string;
+  /** What precedes the location, such as the Project switcher. */
+  lead?: ReactNode;
+  /** The page location; absent where the sidebar entry already names the page. */
+  crumbs?: Crumb[];
+  /** Centered in the top bar, such as a perspective switch. */
+  center?: ReactNode;
+  topActions?: ReactNode;
+  hideTopline?: boolean;
+  width?: "contained" | "fluid";
+  /** Shown above the page, such as a closed Project's banner. */
+  banner?: ReactNode;
+  /** Mounted beside the page, such as the shell's dialogs. */
+  overlays?: ReactNode;
+  /** The entry's own readings, tried before the core's. */
+  reading?: ReadingRenderer;
+}
+
+const sidebarStorageKey = "talgent.shell.sidebarCollapsed";
+
+/** The page frame every entry shares: the collapsible sidebar and its mobile
+ * drawer, the top bar with location and actions, the page, and the reading
+ * area that splits off beside it. */
+export function AppShell({ children, sidebar, title, lead, crumbs, center, topActions, hideTopline = false, width = "fluid", banner, overlays, reading: entryReading }: AppShellProps) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(readStoredSidebarCollapsed);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const widthClass = width === "fluid" ? "p-page w-full max-w-none" : "p-page mx-auto w-full max-w-[1400px]";
+  const routeScope = `${location.pathname}${location.search}`;
+  const [selection, setSelection] = useState<{ scope: string; content: ReadingContent } | null>(null);
+  const reading = selection?.scope === routeScope ? selection.content : null;
+  const view = reading ? entryReading?.(reading) ?? coreReading(reading) : null;
+  const [fullscreen, setFullscreen] = useState(false);
+  const [narrowReader, setNarrowReader] = useState(() => window.matchMedia?.("(max-width: 740px)").matches ?? false);
+  useEffect(() => {
+    const media = window.matchMedia?.("(max-width: 740px)");
+    if (!media) return;
+    const update = () => setNarrowReader(media.matches);
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const [split, setSplit] = useState(1 / 3);
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+  const [body, setBody] = useState<HTMLElement | null>(null);
+  const [contextToolbar, setContextToolbar] = useState<HTMLDivElement | null>(null);
+  const [contextToggleToolbar, setContextToggleToolbar] = useState<HTMLDivElement | null>(null);
+  const [workStatusToolbar, setWorkStatusToolbar] = useState<HTMLDivElement | null>(null);
+  const [toolbar, setToolbar] = useState<HTMLDivElement | null>(null);
+  const returnFocus = useRef<HTMLElement | null>(null);
+  const openReading = (content: ReadingContent, trigger?: HTMLElement) => {
+    returnFocus.current = trigger ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    setSelection({ scope: routeScope, content });
+    setFullscreen(false);
+  };
+  const closeReading = useCallback(() => {
+    setSelection(null); setFullscreen(false);
+    requestAnimationFrame(() => {
+      if (returnFocus.current?.isConnected) returnFocus.current.focus();
+      else toolbar?.querySelector<HTMLElement>("button")?.focus();
+    });
+  }, [toolbar, setFullscreen, setSelection]);
+  const effectiveCollapsed = Boolean(view) || sidebarCollapsed;
+  const sidebarState = effectiveCollapsed ? "collapsed" : "expanded";
+
+  useEffect(() => {
+    writeStoredSidebarCollapsed(sidebarCollapsed);
+  }, [sidebarCollapsed]);
+
+  const go = (path: string) => { navigate(path); setMobileOpen(false); };
+  const renderSidebar = (compact: boolean, mobile = false) => sidebar({ compact, mobile, isReading: Boolean(view), onNavigate: go, onCollapsedChange: setSidebarCollapsed, onCloseMobile: () => setMobileOpen(false) });
+  const crumbLink = (crumb: Crumb) => crumb.to ? { href: crumb.to, onClick: (event: { preventDefault: () => void }) => { event.preventDefault(); navigate(crumb.to!); } }
+    : crumb.onPress ? { href: "#", onClick: (event: { preventDefault: () => void }) => { event.preventDefault(); crumb.onPress!(); } } : {};
+
+  return (
+    <ReadingContext.Provider value={{ content: view ? reading : null, open: openReading, close: closeReading, workStatusToolbar, contextToolbar, contextToggleToolbar, toolbar }}><main ref={setContainer} className="p-app" data-reading={Boolean(view)} data-sidebar-state={sidebarState} style={{ "--pr-main-share": `${split}fr`, "--pr-reader-share": `${1 - split}fr` } as CSSProperties}>
+      <aside className="p-sidebar" inert={Boolean(view && (fullscreen || narrowReader))} data-collapsed={effectiveCollapsed} data-sidebar-state={sidebarState} data-sidebar-tone="light" data-testid="app-sidebar" aria-label="Workspace navigation">
+        <Card variant="transparent" className="p-sidebar-shell">{renderSidebar(effectiveCollapsed)}</Card>
+      </aside>
+      <Drawer.Backdrop isOpen={mobileOpen} onOpenChange={setMobileOpen}>
+        <Drawer.Content placement="left" className="p-sidebar-drawer"><Drawer.Dialog aria-label="Workspace navigation"><div className="p-drawer-navigation">{renderSidebar(false, true)}</div></Drawer.Dialog></Drawer.Content>
+      </Drawer.Backdrop>
+      <section ref={setBody} className="p-body" inert={Boolean(view && (fullscreen || narrowReader))}>
+        {hideTopline ? null : (
+          <header className={`p-topbar ${center ? "p-dashboard-topbar" : ""}`} data-testid="app-title-header">
+            <div className="p-breadcrumb">
+              <Button variant="ghost" isIconOnly className="p-mobile-toggle" aria-label="Open navigation" onPress={() => setMobileOpen(true)}><Menu size={20} /></Button>
+              <h1 className="sr-only">{title}</h1>
+              {lead}
+              {crumbs && <Breadcrumbs aria-label="Page location" className="p-location">
+                {crumbs.map((crumb, index) => <Breadcrumbs.Item key={`${index}:${crumb.label}`} {...(index < crumbs.length - 1 ? crumbLink(crumb) : {})}>{crumb.label}</Breadcrumbs.Item>)}
+              </Breadcrumbs>}
+            </div>
+            {center}
+            <div className="p-actions p-page-actions" data-testid="app-title-actions">{topActions}<div className="p-context-actions" ref={setToolbar} /><div className="p-context-actions" ref={setWorkStatusToolbar} /><div className="p-context-actions" ref={setContextToolbar} /><div className="p-context-actions" ref={setContextToggleToolbar} /></div>
+          </header>
+        )}
+        <div data-testid="app-layout-main" data-layout-width={width} data-sidebar-state={sidebarState} className={widthClass}>
+          {banner}
+          {children}
+        </div>
+      </section>
+      {overlays}
+      {reading && view && <ReadingPanel key={view.key} view={view} onClose={closeReading} fullscreen={fullscreen} onFullscreenChange={setFullscreen} split={split} onSplitChange={setSplit} body={body} container={container} />}
+    </main></ReadingContext.Provider>
+  );
+}
+
+function readStoredSidebarCollapsed() {
+  try {
+    return window.localStorage.getItem(sidebarStorageKey) === "true";
+  } catch {
+    return false;
+  }
+}
+
+function writeStoredSidebarCollapsed(collapsed: boolean) {
+  try {
+    window.localStorage.setItem(sidebarStorageKey, collapsed ? "true" : "false");
+  } catch {
+    // localStorage can be unavailable in privacy-restricted browsers.
+  }
+}