@talgent/workbench-ui 0.0.0 → 0.2.0

package/components/shell/core-reading-views.tsx

@@ -0,0 +1,26 @@
+import type { WorkFile } from "@talgent/workbench-contracts/agent/public/v1/work_file_pb";
+import { useCurrentUser } from "../../lib/account-service";
+import { requestWorkFilePreview, useDownloadWorkFile, workFileKey, workFilePreview } from "../../lib/work-file-service";
+import { useOwnWorkUsageStatus } from "../analytics/work-usage/work-status";
+import { WorkUsageReader } from "../analytics/work-usage/work-usage-reader";
+import { FileReading } from "./file-reading";
+import type { ReadingContent, ReadingSlots } from "./reading-context";
+
+/** The Work's Token Usage as its owner reads it. */
+export function OwnWorkUsage({ content, slots }: { content: Extract<ReadingContent, { kind: "trace" }>; slots: ReadingSlots }) {
+  const status = useOwnWorkUsageStatus(content.workId);
+  return <WorkUsageReader key={content.workId} projectId={content.projectId} agentWorkId={content.workId} createdAt={content.createdAt} status={status} toolbar={slots.toolbar} />;
+}
+
+/** A Work's file, previewed through Agent. */
+export function WorkFileReading({ workId, file, toolbar }: { workId: string; file: WorkFile; toolbar: HTMLElement | null }) {
+  const userId = useCurrentUser().data?.user?.id;
+  const download = useDownloadWorkFile(workId);
+  if (!userId) return null;
+  return <FileReading name={file.name} toolbar={toolbar}
+    // A replaced file keeps its position; its change time tells new content.
+    verdictKey={[userId, workId, workFileKey(file), String(file.updatedAt?.seconds ?? "")]}
+    loadVerdict={() => workFilePreview(workId, file)}
+    requestRender={() => requestWorkFilePreview(workId, file)}
+    download={{ run: () => download.mutate(file), isPending: download.isPending, error: download.error, reset: download.reset }} />;
+}

package/components/shell/core-reading.tsx

@@ -0,0 +1,17 @@
+import { workFileKey } from "../../lib/work-file-service";
+import { ToolPreviewReading } from "../work/tool-preview-reading";
+import { OwnWorkUsage, WorkFileReading } from "./core-reading-views";
+import type { ReadingRenderer } from "./reading-context";
+
+/** The core's readings: a tool call's preview, a Work's Token Usage and a
+ * Work's file. */
+export const coreReading: ReadingRenderer = content => {
+  switch (content.kind) {
+    case "tool": return { key: `${content.tool.workId}:${content.tool.toolCallId}`, label: content.label, title: content.tool.title,
+      render: ({ toolbar }) => <ToolPreviewReading key={`${content.tool.workId}:${content.tool.toolCallId}`} tool={content.tool} toolbar={toolbar} /> };
+    case "trace": return { key: `trace:${content.workId}`, label: content.label, title: "Token Usage", render: slots => <OwnWorkUsage content={content} slots={slots} /> };
+    case "work-file": return { key: `${content.workId}:${workFileKey(content.file)}`, label: content.label, title: content.file.name,
+      render: ({ toolbar }) => <WorkFileReading key={`${workFileKey(content.file)}:${String(content.file.updatedAt?.seconds ?? "")}`} workId={content.workId} file={content.file} toolbar={toolbar} /> };
+    default: return null;
+  }
+};

package/components/shell/document-title.tsx

@@ -0,0 +1,11 @@
+import { useEffect, type ReactNode } from "react";
+
+const titleSuffix = "Talgent";
+
+export function DocumentTitle({ title, children }: { title: string; children: ReactNode }) {
+  useEffect(() => {
+    document.title = `${title} | ${titleSuffix}`;
+  }, [title]);
+
+  return <>{children}</>;
+}

package/components/shell/entry-shell.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+
+/** What a page shared by both entries asks of its frame. */
+export type PageLayoutProps = {
+  children: ReactNode;
+  workspaceTitle?: string;
+  topActions?: ReactNode;
+  centerActions?: ReactNode;
+  width?: "contained" | "fluid";
+  /** Levels between the entry and the current page, such as Marketplace › Plugins. */
+  trail?: Array<{ label: string; onPress: () => void }>;
+};
+
+/** Where an entry serves a person's own pages. */
+export type PersonalPaths = { newWork: string; works: string; work: (workId: string) => string; library: string; usage: string };
+
+/** A person's own pages under root; at an entry's root, its New work page is
+ * the root itself. */
+export function personalPathsAt(root: "" | `/${string}`): PersonalPaths {
+  return {
+    newWork: root ? `${root}/new` : "/",
+    works: `${root}/works`,
+    work: workId => `${root}/works/${encodeURIComponent(workId)}`,
+    library: `${root}/library`,
+    usage: `${root}/usage`,
+  };
+}
+
+/** The entry a shared page renders in: its page frame, the page a signed-in
+ * person lands on, and where it serves the person's own pages. */
+export type EntryShell = { Layout: ComponentType<PageLayoutProps>; home: string; personal: PersonalPaths };
+
+export const EntryShellContext = createContext<EntryShell | null>(null);
+
+export function useEntryShell() {
+  const value = useContext(EntryShellContext);
+  if (!value) throw new Error("A shared page requires an EntryShellContext");
+  return value;
+}

package/components/shell/file-reading.tsx

@@ -0,0 +1,22 @@
+import { Button, Tooltip } from "@heroui/react";
+import { Download } from "lucide-react";
+import { createPortal } from "react-dom";
+import type { PreviewVerdict } from "../preview/preview-verdict";
+import { FilePreview } from "../preview/file-preview";
+
+/** One file in the reading area: its preview, and its download in the
+ * reading area's top bar. */
+export function FileReading({ name, verdictKey, loadVerdict, requestRender, toolbar, download }: {
+  name: string;
+  verdictKey: readonly unknown[];
+  loadVerdict: (signal: AbortSignal) => Promise<PreviewVerdict>;
+  requestRender: () => Promise<PreviewVerdict>;
+  toolbar: HTMLElement | null;
+  download: { run: () => void; isPending: boolean; error: Error | null; reset: () => void };
+}) {
+  return <>
+    {toolbar && createPortal(<Tooltip><Button isIconOnly size="sm" variant="ghost" aria-label="Download file" isPending={download.isPending} onPress={download.run}><Download size={16} /></Button><Tooltip.Content>Download</Tooltip.Content></Tooltip>, toolbar)}
+    {download.error && <p role="alert">{download.error.message} <Button variant="ghost" size="sm" onPress={download.reset}>Dismiss</Button></p>}
+    <FilePreview name={name} toolbar={toolbar} onDownload={download.run} verdictKey={verdictKey} loadVerdict={loadVerdict} requestRender={requestRender} />
+  </>;
+}

package/components/shell/page-layout.tsx

@@ -0,0 +1,7 @@
+import { useEntryShell, type PageLayoutProps } from "./entry-shell";
+
+/** The current entry's page frame. */
+export function PageLayout(props: PageLayoutProps) {
+  const { Layout } = useEntryShell();
+  return <Layout {...props} />;
+}

package/components/shell/reading-context.ts

@@ -0,0 +1,41 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { WorkFile } from "@talgent/workbench-contracts/agent/public/v1/work_file_pb";
+import type { ToolPreview } from "../work/work-message-flow";
+
+/** What the reading area can show, by kind. `label` names what the reading
+ * belongs to, the first crumb of its location. An extension adds its own
+ * kinds by augmenting this interface and renders them with its own
+ * ReadingRenderer. */
+export interface ReadingKinds {
+  tool: { label: string; tool: ToolPreview };
+  /** The Work's Token Usage, its state read from the Work itself. */
+  trace: { label: string; projectId: string; workId: string; createdAt: Date | null };
+  "work-file": { label: string; workId: string; file: WorkFile };
+}
+
+export type ReadingContent = { [Kind in keyof ReadingKinds]: { kind: Kind } & ReadingKinds[Kind] }[keyof ReadingKinds];
+
+export type ReadingSlots = { toolbar: HTMLDivElement | null; location: HTMLDivElement | null };
+
+/** How one reading shows: `ownLocation` gives it the location slot to name its
+ * own path; otherwise its location is its label and title. */
+export type ReadingView = { key: string; label: string; title: string; ownLocation?: boolean; render: (slots: ReadingSlots) => ReactNode };
+
+export type ReadingRenderer = (content: ReadingContent) => ReadingView | null;
+
+export const ReadingContext = createContext<{
+  content: ReadingContent | null;
+  open: (content: ReadingContent, trigger?: HTMLElement) => void;
+  close: () => void;
+  contextToolbar: HTMLDivElement | null;
+  // The Work context card's toggle, always the topbar's last button.
+  contextToggleToolbar: HTMLDivElement | null;
+  workStatusToolbar: HTMLDivElement | null;
+  toolbar: HTMLDivElement | null;
+} | null>(null);
+
+export function useReadingArea() {
+  const value = useContext(ReadingContext);
+  if (!value) throw new Error("Reading area requires AppShell");
+  return value;
+}

package/components/shell/reading-panel.css

@@ -0,0 +1,67 @@
+.p-app[data-reading="true"] { height: 100dvh; overflow: hidden; grid-template-columns: auto minmax(300px,var(--pr-main-share,1fr)) 1px minmax(320px,var(--pr-reader-share,2fr)); }
+.p-app[data-reading="true"]>.p-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; container-type: inline-size; }
+.p-app[data-reading="true"] .p-topbar { position: relative; flex-shrink: 0; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; padding-inline: 10px; }
+.p-app[data-reading="true"] .p-breadcrumb { grid-column: 1; grid-row: 1; flex-wrap: nowrap; overflow: hidden; }
+.p-app[data-reading="true"] .p-location { flex-wrap: nowrap; white-space: nowrap; }
+.p-app[data-reading="true"] .p-perspective-tabs { grid-column: 2; grid-row: 1; justify-self: center; }
+.p-app[data-reading="true"] .p-page-actions { grid-column: 3; grid-row: 1; justify-self: end; flex-wrap: nowrap; gap: 4px; }
+@container (max-width: 560px) {
+  .p-app[data-reading="true"] .p-location>li:not(:last-child) { display: none; }
+  .p-app[data-reading="true"] .p-perspective-tabs .tabs__tab { padding-inline: 10px; }
+  .p-app[data-reading="true"] .p-page-actions .button:has(.lucide-check-check) { font-size: 0; gap: 0; width: 32px; min-width: 32px; padding-inline: 8px; }
+}
+@container (max-width: 380px) {
+  .p-app[data-reading="true"] .p-topbar { gap: 4px; padding-inline: 6px; }
+  .p-app[data-reading="true"] .p-perspective-tabs .tabs__tab { padding-inline: 6px; font-size: 12px; }
+  .p-app[data-reading="true"] .p-page-actions { gap: 2px; }
+  .p-app[data-reading="true"] .p-page-actions .button { width: 28px; min-width: 28px; padding-inline: 6px; }
+}
+.p-app[data-reading="true"] .p-page { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 16px; }
+.p-app[data-reading="true"] .idp-page,.p-app[data-reading="true"] .agent-grid { grid-template-columns: minmax(0,1fr); gap: 0; min-height: 0; }
+.p-app[data-reading="true"] .agent-grid { height: 100%; }
+.p-app[data-reading="true"] .stream-panel { height: 100%; min-height: 0; }
+.p-app[data-reading="true"] .idp-description { padding: 16px; }
+.p-app[data-reading="true"] .idp-heading { padding-inline: 0; }
+.p-app[data-reading="true"] .idp-meta { flex-wrap: wrap; }
+.p-app[data-reading="true"] .idp-activity>.tabs>.tabs__list-container { overflow-x: auto; }
+.pr-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; background: var(--background); color: var(--foreground); }
+.pr-divider { position: relative; z-index: 30; height: 100dvh; background: var(--separator); cursor: col-resize; touch-action: none; }
+.pr-divider::before { content: ""; position: absolute; inset: 0 -5px; }
+.pr-divider::after { content: ""; position: absolute; width: 3px; inset-block: 0; left: -1px; background: var(--muted); opacity: 0; pointer-events: none; }
+.pr-divider:hover::after,.pr-divider:focus-visible::after,.pr-divider[data-dragging="true"]::after { opacity: 1; }
+.pr-divider:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.p-app:has(>.pr-divider[data-dragging="true"]) { cursor: col-resize; user-select: none; }
+.p-app:has(>.pr-divider[data-dragging="true"]) iframe { pointer-events: none; }
+.p-app:has(>.pr-reader[data-fullscreen="true"])>.pr-divider { visibility: hidden; }
+.pr-reader[data-fullscreen="true"] { position: fixed; inset: 0; z-index: 60; border: 0; }
+/* The page top bar's frame, minus the page's centred tab column. */
+.p-app .pr-reader>.p-topbar.pr-topbar { position: relative; flex-shrink: 0; grid-template-columns: minmax(0,1fr) auto; }
+.pr-topbar .p-breadcrumb { flex-wrap: nowrap; overflow: hidden; }
+.pr-topbar .p-location { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
+.pr-topbar .p-location span[title] { display: block; overflow: hidden; text-overflow: ellipsis; }
+.pr-tools { flex-wrap: nowrap; flex-shrink: 0; gap: 4px; }
+.pr-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; }
+.pr-document,.pr-file-document { width: 100%; margin-inline: auto; }
+/* Total is the headline; the four categories and Cache hit rate read smaller. */
+.pr-metrics { display: grid; grid-template-columns: 1.4fr repeat(5,minmax(0,1fr)); align-items: end; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--separator); }
+.pr-metrics dt { font-size: 12px; color: var(--muted); }
+.pr-metrics dd { margin-top: 8px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.pr-metrics>div:first-child dd { font-size: 30px; font-weight: 600; line-height: 1.1; }
+
+.pr-section-title { margin-top: 28px; font-size: 14px; font-weight: 600; }
+.pr-file-document>pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
+.pr-file-document>img { max-width: 100%; height: auto; margin-inline: auto; }
+.pr-file-document>iframe { width: 100%; height: calc(100dvh - 104px); border: 0; }
+@media (max-width: 1050px) {
+  .pr-scroll { padding: 20px; }
+}
+@media (max-width: 740px) {
+  .p-app[data-reading="true"] { display: block; }
+  .pr-reader { position: fixed; inset: 0; z-index: 60; }
+  .pr-divider { display: none; }
+  .pr-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
+}
+
+.p-context-actions { display: flex; align-items: center; }
+.p-context-actions:empty { display: none; }
+.pr-location-slot { display: contents; }

package/components/shell/reading-panel.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { Breadcrumbs, Button, Tooltip } from "@heroui/react";
+import { Maximize2, Minimize2, X } from "lucide-react";
+import type { ReadingView } from "./reading-context";
+import "./reading-panel.css";
+
+/** The reading area's frame: the divider that splits it from the page, its
+ * top bar and its scrolling body. What it shows comes from `view`. */
+export function ReadingPanel({ view, onClose, fullscreen, onFullscreenChange, onSplitChange, split, body, container }: {
+  view: ReadingView; onClose: () => void; fullscreen: boolean;
+  onFullscreenChange: (value: boolean) => void; onSplitChange: (value: number) => void;
+  split: number; body: HTMLElement | null; container: HTMLElement | null;
+}) {
+  const [toolbar, setToolbar] = useState<HTMLDivElement | null>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const panel = useRef<HTMLElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const [limits, setLimits] = useState({ min: 0.2, max: 0.7 });
+  const { title } = view;
+  const [location, setLocation] = useState<HTMLDivElement | null>(null);
+  useEffect(() => { closeButton.current?.focus(); }, []);
+  useEffect(() => {
+    const escape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented || (event.target instanceof Element && event.target.closest('[role="dialog"], [role="listbox"]'))) return;
+      event.preventDefault();
+      if (fullscreen) onFullscreenChange(false); else onClose();
+    };
+    document.addEventListener("keydown", escape);
+    return () => document.removeEventListener("keydown", escape);
+  }, [fullscreen, onFullscreenChange, onClose]);
+  useEffect(() => {
+    if (!body || !container) return;
+    const measure = () => {
+      const width = container.getBoundingClientRect().right - body.getBoundingClientRect().left - 1;
+      if (width < 620) return;
+      const min = 300 / width, max = 1 - 320 / width;
+      setLimits({ min, max });
+      onSplitChange(Math.min(max, Math.max(min, split)));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    observer.observe(body);
+    return () => observer.disconnect();
+  }, [body, container, onSplitChange, split]);
+  const resize = (value: number) => onSplitChange(Math.min(limits.max, Math.max(limits.min, value)));
+  return <>
+    <div className="pr-divider" role="separator" tabIndex={0} aria-label="Resize conversation and reading area" aria-orientation="vertical" aria-valuemin={Math.round(limits.min * 100)} aria-valuemax={Math.round(limits.max * 100)} aria-valuenow={Math.round(split * 100)} aria-valuetext={`Conversation ${Math.round(split * 100)}%, reading area ${Math.round((1 - split) * 100)}%`} data-dragging={dragging}
+      onPointerDown={event => { if (event.button !== 0) return; event.preventDefault(); event.currentTarget.focus(); event.currentTarget.setPointerCapture(event.pointerId); setDragging(true); }}
+      onPointerMove={event => { if (!event.currentTarget.hasPointerCapture(event.pointerId) || !body || !container) return; const left = body.getBoundingClientRect().left; resize((event.clientX - left) / (container.getBoundingClientRect().right - left - 1)); }}
+      onPointerUp={event => { if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); setDragging(false); }}
+      onLostPointerCapture={() => setDragging(false)} onDoubleClick={() => resize(1 / 3)}
+      onKeyDown={event => { if (!["ArrowLeft", "ArrowRight", "Home", "End", "Enter"].includes(event.key)) return; event.preventDefault(); resize(event.key === "Home" ? limits.min : event.key === "End" ? limits.max : event.key === "Enter" ? 1 / 3 : split + (event.key === "ArrowLeft" ? -0.02 : 0.02)); }} />
+    <section ref={panel} className="pr-reader" data-fullscreen={fullscreen} aria-label={`${title} reading area`}>
+      {/* The reading area's top bar is the page top bar: same frame, same
+          breadcrumbs, same action row. */}
+      <header className="p-topbar pr-topbar">
+        <div className="p-breadcrumb">
+          {/* A reading with a path of its own names it in the same breadcrumbs. */}
+          {view.ownLocation ? <div ref={setLocation} className="pr-location-slot" />
+            : <Breadcrumbs aria-label="Reading location" className="p-location">
+            <Breadcrumbs.Item>{view.label}</Breadcrumbs.Item>
+            <Breadcrumbs.Item><span title={title}>{title}</span></Breadcrumbs.Item>
+          </Breadcrumbs>}
+        </div>
+        <div className="p-actions pr-tools"><div ref={setToolbar} className="p-context-actions" />
+          <Tooltip><Button isIconOnly size="sm" variant="ghost" aria-label={fullscreen ? "Exit full screen" : "Full screen"} onPress={() => onFullscreenChange(!fullscreen)}>{fullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}</Button><Tooltip.Content>{fullscreen ? "Exit full screen" : "Full screen"}</Tooltip.Content></Tooltip>
+          <Tooltip><Button ref={closeButton} isIconOnly size="sm" variant="ghost" aria-label="Close reading area" onPress={onClose}><X size={18} /></Button><Tooltip.Content>Close</Tooltip.Content></Tooltip>
+        </div>
+      </header>
+      <div className="pr-scroll">{view.render({ toolbar, location })}</div>
+    </section>
+  </>;
+}

package/components/shell/sidebar-parts.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { Button, Link as HeroLink, Tooltip, buttonVariants, typographyVariants } from "@heroui/react";
+import { PanelLeftClose, PanelLeftOpen, X, type LucideIcon } from "lucide-react";
+import { Link } from "react-router-dom";
+
+/** One entry of a sidebar's navigation. */
+export type SidebarItem = { label: string; icon: LucideIcon; to: string; badge?: ReactNode; describedBy?: string };
+
+/** A sidebar's navigation link: icon and label, or the icon with a tooltip when compact. */
+export function SidebarLink({ item, current, compact, onCloseMobile }: { item: SidebarItem; current: boolean; compact: boolean; onCloseMobile: () => void }) {
+  return <Tooltip isDisabled={!compact}>
+    <HeroLink href={item.to} aria-label={item.label} aria-describedby={item.describedBy} aria-current={current ? "page" : undefined}
+      className={buttonVariants({ size: "sm", variant: current ? "secondary" : "ghost", isIconOnly: compact, className: compact ? "relative" : "p-nav-item" })}
+      render={props => "href" in props ? <Link {...props} to={item.to} onClick={onCloseMobile} /> : <span {...props} />}>
+      <item.icon size={17} aria-hidden="true" />
+      {!compact && <span className={`${typographyVariants({ type: "body-sm", color: current ? "default" : "muted" }).base()} p-nav-label`}>{item.label}</span>}
+      {item.badge}
+    </HeroLink>
+    <Tooltip.Content placement="right">{item.label}</Tooltip.Content>
+  </Tooltip>;
+}
+
+/** A sidebar's top: the brand leading to the entry's home, and collapsing,
+ * expanding or closing the navigation. */
+export function SidebarHeader({ compact, mobile, isReading, homeLabel, onHome, onCollapsedChange, onCloseMobile }: {
+  compact: boolean; mobile: boolean; isReading: boolean; homeLabel: string; onHome: () => void; onCollapsedChange: (collapsed: boolean) => void; onCloseMobile: () => void;
+}) {
+  return <div className="p-sidebar-header">
+    <div className="p-sidebar-brand" data-testid="sidebar-brand-row">
+      <div className="p-brand-lockup">
+        <Button size="sm" variant="ghost" className="p-brand-button" isIconOnly aria-label={homeLabel} onPress={onHome}><span className="p-brand-icon" aria-hidden="true" /></Button>
+        {!compact && <span className="p-brand-name" aria-hidden="true" />}
+      </div>
+      {!compact && <Tooltip><Button variant="ghost" size="sm" isIconOnly aria-label={mobile ? "Close navigation" : "Collapse sidebar"} onPress={mobile ? onCloseMobile : () => onCollapsedChange(true)}>{mobile ? <X size={16} /> : <PanelLeftClose size={16} />}</Button><Tooltip.Content>{mobile ? "Close navigation" : "Collapse sidebar"}</Tooltip.Content></Tooltip>}
+    </div>
+    {compact && <Tooltip><Button variant="ghost" isIconOnly isDisabled={isReading} aria-label="Expand sidebar" onPress={() => onCollapsedChange(false)}><PanelLeftOpen size={18} /></Button><Tooltip.Content placement="right">Expand sidebar</Tooltip.Content></Tooltip>}
+  </div>;
+}

package/components/work/context-rail.css

@@ -0,0 +1,61 @@
+/* A page's context card. */
+/* The rail's top edge on both tabs: below the top bar and the page's 16px top
+   padding, where the Work grid starts. */
+.p-page { --context-rail-width: 280px; --context-gap: 40px; --context-content-gutter: 28px; --context-rail-top: calc(var(--topbar-height) + 16px); }
+.p-page>.idp-page,
+.p-page>.agent-grid { grid-template-columns: minmax(0, 1fr) var(--context-rail-width); gap: var(--context-gap); }
+.p-page>.agent-grid:has(.stream-panel-unstarted, .stream-panel-starting) { grid-template-columns: minmax(0, 1fr); }
+.cr-rail { position: sticky; top: var(--context-rail-top); align-self: start; min-width: 0; margin-top: -8px; }
+.cr-file-row { display: flex; align-items: center; min-width: 0; }
+.cr-file { display: flex; justify-content: start; gap: 8px; width: 100%; min-width: 0; height: 30px; padding: 4px 0; font-size: 13px; font-weight: 400; text-align: left; }
+.cr-file>svg { flex-shrink: 0; }
+.cr-file>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cr-file-icon[data-kind="document"] { color: color-mix(in oklab,var(--color-blue-500) 65%,var(--foreground)); }
+.cr-file-icon[data-kind="pdf"] { color: var(--danger); }
+.cr-file-icon[data-kind="image"] { color: color-mix(in oklab,var(--color-pink-500) 65%,var(--foreground)); }
+.cr-file-icon[data-kind="code"] { color: var(--muted); }
+.cr-file-more { min-width: 22px; width: 22px; height: 28px; padding: 0; color: var(--muted); opacity: 0; }
+.cr-file-row:hover .cr-file-more,.cr-file-row:focus-within .cr-file-more { opacity: 1; }
+.cr-todos { display: grid; gap: 2px; margin: 0; padding: 8px 0 0; list-style: none; font-size: 13px; line-height: 26px; }
+.cr-todos>li { display: flex; gap: 10px; align-items: center; min-width: 0; color: var(--foreground); }
+.cr-todos>li>span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cr-todos svg, .cr-todo-now { flex-shrink: 0; }
+.cr-todos [data-status="completed"] { color: var(--muted); }
+.cr-todos [data-status="pending"]>svg { color: color-mix(in oklch,var(--muted) 55%,transparent); }
+.cr-todos [data-status="in_progress"] { font-weight: 500; }
+/* The item being worked on: the one mark in the list that moves. */
+.cr-todo-now { position: relative; width: 12px; height: 12px; }
+.cr-todo-now::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--foreground); animation: cr-todo-pulse 1.8s ease-in-out infinite; }
+@keyframes cr-todo-pulse { 50% { opacity: .25; transform: scale(.6); } }
+@media (prefers-reduced-motion: reduce) { .cr-todo-now::after { animation: none; } }
+.cr-popover { width: 300px; max-width: calc(100vw - 24px); }
+.cr-popover .popover__dialog { display: grid; gap: 12px; }
+.cr-manifest { max-height: 240px; overflow: auto; font-size: 12px; overflow-wrap: anywhere; }
+.cr-token-usage { padding-top: 0; font-variant-numeric: tabular-nums; }
+.cr-token-bar { display: flex; gap: 3px; height: 5px; margin: 16px 0 12px; overflow: hidden; border-radius: 3px; }
+.cr-token-bar>span { min-width: 0; }
+@media (pointer: coarse) { .cr-file-more { opacity: 1; } }
+@media (max-width: 1100px) {
+  .p-page { --context-rail-width: 250px; --context-gap: 20px; }
+}
+@media (max-width: 900px) {
+  .p-page>.idp-page,.p-page>.agent-grid { grid-template-columns: minmax(0,1fr); }
+  .cr-rail { position: relative; top: auto; margin-top: 30px; width: 100%; }
+  .cr-file-more { opacity: 1; }
+}
+
+.cr-rail[data-collapsed="true"] { display: none; }
+.cr-file-tooltip { display: grid; gap: 5px; max-width: min(320px,calc(100vw - 24px)); padding: 12px; font-size: 12px; overflow-wrap: anywhere; }
+.cr-file-tooltip strong { font-size: 13px; font-weight: 500; }
+.cr-file-tooltip>span { color: var(--muted); }
+
+/* Token Usage is one total; its bar and parts show on hover or keyboard
+   focus within the section, and always where there is no hover. */
+.cr-token-total { display: block; margin-top: 4px; font-size: 18px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
+/* The parts stay readable by assistive tech while visually folded away. */
+@media (hover: hover) {
+  .cr-token-section:not(:hover, :focus-within) .cr-token-bar { display: none; }
+  .cr-token-section:not(:hover, :focus-within) .cr-token-breakdown { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+}
+
+@media (max-width: 800px) { .p-page { --context-content-gutter: 18px; } }

package/components/work/conversation-unavailable.css

@@ -0,0 +1,6 @@
+/* One quiet line where a private conversation would be; status and Progress
+   stay in the context card. */
+.wca-unavailable { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 30vh 16px 0; color: var(--foreground); font-size: 15px; text-align: center; text-wrap: balance; }
+/* The line is the panel's message, so it reads in the text color; --muted
+   measures 4.44:1 on the page background. The icon stays quiet. */
+.wca-unavailable svg { flex-shrink: 0; color: var(--muted); }

package/components/work/conversation-unavailable.tsx

@@ -0,0 +1,11 @@
+import { Lock, ShieldOff } from "lucide-react";
+import "./conversation-unavailable.css";
+
+/** The single line shown in place of a conversation the caller cannot read. */
+export function ConversationUnavailable({ withdrawn = false }: { withdrawn?: boolean }) {
+  const Icon = withdrawn ? ShieldOff : Lock;
+  return <p className="wca-unavailable" role="status">
+    <Icon size={20} aria-hidden="true" />
+    {withdrawn ? "Your access to this conversation was withdrawn" : "This conversation is private"}
+  </p>;
+}

package/components/work/subagent-item.tsx

@@ -0,0 +1,42 @@
+import { Tooltip } from "@heroui/react";
+import { CircleCheck, CircleSlash, CircleX, LoaderCircle } from "lucide-react";
+import { AgentIcon } from "../agent/agent-icon";
+import { agentColors } from "../../lib/agent-icon";
+import type { SubAgent, SubAgentStatus } from "../../lib/subagents";
+
+const statuses: Record<SubAgentStatus, { label: string; Icon: typeof LoaderCircle; tone: "success" | "danger" | "muted" }> = {
+  running: { label: "Running", Icon: LoaderCircle, tone: "success" },
+  completed: { label: "Completed", Icon: CircleCheck, tone: "muted" },
+  failed: { label: "Failed", Icon: CircleX, tone: "danger" },
+  stopped: { label: "Stopped", Icon: CircleSlash, tone: "muted" },
+};
+
+// A SubAgent keeps one look for its whole life: its color follows its Harness
+// identity, its glyph its type, with the robot for every other type.
+const colorKeys = Object.keys(agentColors);
+const typeGlyphs: Record<string, string> = { Explore: "compass", Plan: "brain", fork: "atom" };
+const hash = (text: string) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) >>> 0, 7);
+const iconOf = (agent: SubAgent) => ({ glyph: typeGlyphs[agent.type] ?? "bot", color: colorKeys[hash(agent.id) % colorKeys.length] });
+const typeOf = (agent: SubAgent) => agent.type || "SubAgent";
+
+// Status is carried by weight: running is full color with the orbit, an ended
+// one recedes, and only failed and stopped carry a mark.
+export function SubAgentItem({ agent, leaving }: { agent: SubAgent; leaving: boolean }) {
+  const status = statuses[agent.status];
+  const marked = agent.status === "failed" || agent.status === "stopped";
+  return <li data-leaving={leaving || undefined}>
+    <Tooltip delay={200} closeDelay={0}>
+      <Tooltip.Trigger className="sa-trigger" tabIndex={0} aria-label={`${typeOf(agent)}, ${status.label}${agent.task ? `: ${agent.task}` : ""}`}>
+        <span className="sa-avatar" data-status={agent.status}>
+          <AgentIcon icon={iconOf(agent)} size={26} />
+          {marked && <span className="sa-badge" data-tone={status.tone} aria-hidden="true"><status.Icon size={10} strokeWidth={2} /></span>}
+        </span>
+      </Tooltip.Trigger>
+      <Tooltip.Content className="sa-tip">
+        <span className="sa-tip-head"><AgentIcon icon={iconOf(agent)} size={20} /><strong>{typeOf(agent)}</strong></span>
+        <span className="sa-tip-status" data-tone={status.tone}><status.Icon size={12} aria-hidden="true" />{status.label}</span>
+        {agent.task && <p>{agent.task}</p>}
+      </Tooltip.Content>
+    </Tooltip>
+  </li>;
+}

package/components/work/subagents-section.css

@@ -0,0 +1,31 @@
+/* The Work context card's Agents section. */
+.sa-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 0 2px; list-style: none; }
+.sa-row>li { display: flex; animation: sa-in 200ms cubic-bezier(0.2, 0, 0, 1); }
+.sa-row>li[data-leaving] { animation: sa-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
+@keyframes sa-in { from { opacity: 0; transform: scale(.6); } }
+@keyframes sa-out { to { opacity: 0; transform: scale(.6); } }
+
+.sa-trigger { display: inline-flex; padding: 3px; border-radius: 10px; cursor: default; }
+.sa-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.sa-avatar { position: relative; display: inline-flex; }
+.sa-avatar .agent-icon { transition: opacity 200ms, filter 200ms; }
+/* The one moving mark: an orbit while a SubAgent runs. */
+.sa-avatar[data-status="running"]::after { content: ""; position: absolute; inset: -3px; border: 1.5px solid transparent; border-top-color: var(--success); border-inline-end-color: var(--success); border-radius: 10px; pointer-events: none; animation: sa-orbit 1.8s linear infinite; }
+@keyframes sa-orbit { to { transform: rotate(360deg); } }
+.sa-avatar[data-status="completed"] .agent-icon,
+.sa-avatar[data-status="stopped"] .agent-icon { opacity: .42; filter: grayscale(.6); }
+.sa-trigger:hover .agent-icon, .sa-trigger:focus-visible .agent-icon { opacity: 1; filter: none; }
+.sa-badge { position: absolute; right: -4px; bottom: -4px; z-index: 1; display: inline-grid; place-items: center; padding: 2px; border-radius: 999px; background: var(--surface); }
+.sa-badge[data-tone="danger"], .sa-tip-status[data-tone="danger"] { color: var(--danger); }
+.sa-badge[data-tone="muted"] { color: var(--muted); }
+
+.sa-tip { display: grid; gap: 6px; max-width: 260px; }
+.sa-tip-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+.sa-tip-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
+.sa-tip-status[data-tone="success"] { color: var(--success); }
+.sa-tip p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--foreground); word-break: normal; overflow-wrap: break-word; }
+
+@media (prefers-reduced-motion: reduce) {
+  .sa-row>li, .sa-avatar[data-status="running"]::after { animation: none; }
+  .sa-row>li[data-leaving] { animation: none; visibility: hidden; }
+}

package/components/work/subagents-section.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import type { SubAgent } from "../../lib/subagents";
+import { RailSection } from "../rail/rail-section";
+import { SubAgentItem } from "./subagent-item";
+import "./subagents-section.css";
+
+const leaveMs = 200;
+
+// SubAgents arrive only on the Work's stream, so a reader who cannot read the
+// conversation has none. Undefined is no report yet; the first report is
+// where changes count from. The section opens when a SubAgent starts running
+// while the rail is in view, as Progress opens on a new report; one finishing
+// never opens it.
+export function useSubAgentsSection({ agents, scope, visible }: { agents: SubAgent[] | undefined; scope: string; visible: boolean }) {
+  const running = agents?.filter(agent => agent.status === "running").map(agent => agent.id);
+  const [open, setOpen] = useState(false);
+  const [seen, setSeen] = useState({ scope, running });
+  if (seen.scope !== scope) {
+    setSeen({ scope, running });
+    setOpen(false);
+  } else if (running && running.join() !== seen.running?.join()) {
+    setSeen({ scope, running });
+    if (seen.running && visible && running.some(id => !seen.running!.includes(id))) setOpen(true);
+  }
+  // Cleared SubAgents leave with their exit motion before the section goes.
+  const list = agents ?? [];
+  const [shown, setShown] = useState(list);
+  const leaving = !list.length && shown.length > 0;
+  if (list.length && shown !== list) setShown(list);
+  useEffect(() => {
+    if (!leaving) return;
+    const timer = window.setTimeout(() => setShown([]), leaveMs);
+    return () => window.clearTimeout(timer);
+  }, [leaving]);
+  if (!shown.length) return null;
+  const runningCount = running?.length ?? 0;
+  return <RailSection title="Agents" summary={leaving ? undefined : runningCount ? `${runningCount} running` : `${shown.length}`} open={open} onOpenChange={setOpen}>
+    <ul className="sa-row" aria-label="SubAgents">{shown.map(agent => <SubAgentItem key={agent.id} agent={agent} leaving={leaving} />)}</ul>
+  </RailSection>;
+}

package/components/work/token-usage.tsx

@@ -0,0 +1,28 @@
+import { Button, Tooltip } from "@heroui/react";
+import { ChartNoAxesColumnIncreasing } from "lucide-react";
+import { formatCompactTokenCount } from "../../lib/trace-view-model";
+import { tokenCategories, tokenTotal, tokenUsageFromMeasurements } from "../../lib/token-usage";
+import { TokenBreakdown } from "../analytics/token-breakdown";
+import { RailSection } from "../rail/rail-section";
+
+type Totals = Array<{ metricKind: string; value: number }>;
+
+/** The Work context card's Token Usage section, whose action opens the Work's
+ * Token Usage reader. */
+export function WorkTokenSection({ totals, onOpenTimeline }: { totals: Totals; onOpenTimeline: () => void }) {
+  return <RailSection title="Token Usage" className="cr-token-section" action={<Tooltip><Button isIconOnly size="sm" variant="ghost" aria-label="View Work timeline" onPress={onOpenTimeline}><ChartNoAxesColumnIncreasing size={15} aria-hidden="true" /></Button><Tooltip.Content>View Work timeline</Tooltip.Content></Tooltip>}>
+    <TokenUsage totals={totals} />
+  </RailSection>;
+}
+
+/** A Work's token usage: the total, then on hover or focus a bar of its four
+ * parts, their amounts and the Cache hit rate. */
+function TokenUsage({ totals: measurements }: { totals: Totals }) {
+  const usage = tokenUsageFromMeasurements(measurements);
+  const total = tokenTotal(usage);
+  return <div className="cr-token-usage">
+    <strong className="cr-token-total">{formatCompactTokenCount(total)}</strong>
+    {total > 0 && <div className="cr-token-bar" aria-hidden="true">{tokenCategories.map(({ key }) => <span key={key} data-token-tone={key} style={{ flexGrow: usage[key] / total }} />)}</div>}
+    <TokenBreakdown usage={usage} className="cr-token-breakdown" />
+  </div>;
+}

package/components/work/tool-message-detail.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, Button } from "@heroui/react";
+import { MessageDetailFormat } from "@talgent/workbench-contracts/dispatcher/public/v1/unified_message_pb";
+import type { GetMessageDetailResponse } from "@talgent/workbench-contracts/streamgateway/public/v1/streamgateway_pb";
+import { useWorkStreamSource } from "../../lib/work-stream-source";
+
+export const detailPageSize = 16384;
+
+// Mount only while the detail is open. Each reader retains one bounded page;
+// closing it aborts the request and releases the query's original body.
+export function ToolMessageDetail({ workId, messageId }: { workId: string; messageId: string }) {
+  const streamClient = useWorkStreamSource();
+  const [position, setPosition] = useState({ workId, messageId, offset: 0 });
+  const offset = position.workId === workId && position.messageId === messageId ? position.offset : 0;
+  const detail = useQuery({
+    queryKey: ["message-detail", workId, messageId, offset],
+    queryFn: ({ signal }) => streamClient.getMessageDetail({ agentWorkId: workId, messageId, offset, limit: detailPageSize }, { signal }),
+    gcTime: 0, staleTime: Infinity, retry: false, refetchOnWindowFocus: false, refetchOnReconnect: false,
+  });
+  return <div className="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>}
+    {detail.data && <MessageDetailContent detail={detail.data} offset={offset} onPage={offset => setPosition({ workId, messageId, offset })} />}
+  </div>;
+}
+
+export function MessageDetailContent({ detail, offset, onPage, emptyLabel = "Empty output" }: { emptyLabel?: string; detail: GetMessageDetailResponse; offset: number; onPage: (offset: number) => void }) {
+  return <>
+      {detail.format === MessageDetailFormat.UNSPECIFIED ? <p>No detail available</p>
+        : detail.totalLength === 0 ? <p>{emptyLabel}</p>
+        : <pre tabIndex={0} aria-label="Original tool detail">{detail.text}</pre>}
+      {detail.totalLength > detailPageSize && <nav aria-label="Detail pages" className="wm-detail-pages">
+        <Button variant="ghost" size="sm" isDisabled={offset === 0} onPress={() => onPage(Math.max(0, offset - detailPageSize))}>Previous page</Button>
+        <span>{Math.floor(offset / detailPageSize) + 1} / {Math.ceil(detail.totalLength / detailPageSize)}</span>
+        <Button variant="ghost" size="sm" isDisabled={detail.nextOffset >= detail.totalLength} onPress={() => onPage(detail.nextOffset)}>Next page</Button>
+      </nav>}
+  </>;
+}