@talgent/workbench-ui 0.0.0 → 0.2.0

package/components/analytics/token-report.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Card, Chip, Tooltip, Typography } from "@heroui/react";
+import { ArrowDown, ArrowUpRight, Box, CheckCheck, DatabaseZap, Medal } from "lucide-react";
+import { DistributionChart, MetricCard, TimeChart } from "./dashboard-charts";
+import { ModelUsageChart } from "./model-usage-chart";
+import { formatDashboardNumber } from "../../lib/dashboard";
+import { reportBucketLabels } from "../../lib/dashboard-report";
+import { otherModels, type TokenAnalytics } from "../../lib/token-analytics";
+
+const colors = { input: "#0a8f76", cacheRead: "#2563eb", cacheWrite: "#7c3aed", output: "#d97706" };
+const tokenSeries = [{ key: "input", label: "Input", color: colors.input }, { key: "cacheRead", label: "Cache read", color: colors.cacheRead }, { key: "cacheWrite", label: "Cache write", color: colors.cacheWrite }, { key: "output", label: "Output", color: colors.output }] as const;
+// Models and call mixes share one categorical order; Other is always neutral.
+const palette = ["#26d0a8", "#2563eb", "#7c3aed", "#db2777", "#d97706"];
+const shown = (value: number) => formatDashboardNumber(value);
+
+/** One ranking of the report: who or what used the most tokens. */
+export type TokenRanking = { title: string; rows: Array<{ key: string; label: string; totalTokens: number; icon: ReactNode; detail?: string }> };
+
+/** Spend's report of token usage over a window: metric cards with the
+ * previous period, the token and model trends, the rankings and the call mixes. */
+export function TokenReport({ analytics, rankings, hover, onHover }: {
+  analytics: TokenAnalytics; rankings: TokenRanking[];
+  hover: { index: number; chart: string } | null; onHover: (hover: { index: number; chart: string } | null) => void;
+}) {
+  const { summary, period, tokenValues, previous } = analytics;
+  const points = analytics.tokenTrend.map((token, index) => ({ ...reportBucketLabels(period, index), input: token.input, cacheRead: token.cacheRead, cacheWrite: token.cacheWrite, output: token.output }));
+  const modelPoints = analytics.modelUsage.buckets.map((bucket, index) => ({ ...reportBucketLabels(period, index), usage: bucket.usage }));
+  const modelColors = Object.fromEntries(analytics.modelUsage.models.map((model, index) => [model, model === otherModels ? "var(--muted)" : palette[index % palette.length]]));
+  const metrics = [
+    { key: "total", label: "Total", hint: "Input + Cache read + Cache write + Output.", Icon: Box, color: "#64748b" },
+    { key: "input", label: "Input", hint: "Input tokens excluding cache reads and writes.", Icon: ArrowDown, color: colors.input },
+    { key: "cacheRead", label: "Cache read", hint: "Input tokens read from the prompt cache.", Icon: CheckCheck, color: colors.cacheRead },
+    { key: "cacheWrite", label: "Cache write", hint: "Input tokens written to the prompt cache.", Icon: DatabaseZap, color: colors.cacheWrite },
+    { key: "output", label: "Output", hint: "Model-generated output tokens.", Icon: ArrowUpRight, color: colors.output },
+  ] as const;
+  if (!analytics.metrics.totals.length && !analytics.metrics.buckets.length) {
+    return <Typography type="body-sm" color="muted" role="status">No Token records received in this window.</Typography>;
+  }
+  return <div className="p-analytics" aria-label="Token analytics">
+    {analytics.comparisonUnavailable && <Typography type="body-sm" color="muted" role="status">{analytics.comparisonUnavailable}</Typography>}
+    <div className="p-metric-grid p-token-metrics">{metrics.map(metric => <MetricCard key={metric.key} label={metric.label} hint={metric.hint} icon={<metric.Icon size={17} color={metric.color} />} value={shown(tokenValues[metric.key])} comparison={{ current: tokenValues[metric.key], previous: previous?.[metric.key] ?? null, period: analytics.window.toUpperCase(), bounds: period }} />)}</div>
+    <div className="p-trace-charts">
+      <TimeChart title="Token usage" kind="area" unit="tokens" points={points} series={[...tokenSeries]} summary={`${shown(tokenValues.total)} tokens`} formatValue={shown} hover={hover} onHover={onHover} />
+      <ModelUsageChart points={modelPoints} models={analytics.modelUsage.models} colors={modelColors} />
+    </div>
+    <div className={rankings.length > 1 ? "p-ranking-grid" : undefined}>{rankings.map(group => <Card key={group.title} role="group" aria-label={group.title}><Card.Header><Card.Title role="heading" aria-level={2}>{group.title}</Card.Title></Card.Header><Card.Content>
+      {group.rows.length ? <ol className="p-ranking">{group.rows.map((row, index) => <li key={row.key}>
+        <Chip size="sm" color={index === 0 ? "warning" : index === 1 ? "accent" : index === 2 ? "success" : "default"} variant="soft">{index < 3 && <Medal size={12} />}<Chip.Label>{index + 1}</Chip.Label></Chip>
+        {row.icon}
+        <Typography type="body-sm" truncate title={row.label}>{row.label}</Typography><Tooltip><Tooltip.Trigger className="shrink-0 ms-auto"><Typography type="body-sm" weight="medium">{shown(row.totalTokens)}</Typography></Tooltip.Trigger><Tooltip.Content>{row.totalTokens.toLocaleString()} tokens · {row.detail ?? row.key}</Tooltip.Content></Tooltip>
+      </li>)}</ol> : <Typography type="body-sm" color="muted">No observations</Typography>}
+    </Card.Content></Card>)}</div>
+    <div className="p-trace-distributions">{[
+      { title: "Model mix", data: summary.modelDistribution }, { title: "Tool mix", data: summary.toolDistribution }, { title: "Agent mix", data: summary.agentDistribution }, { title: "MCP mix", data: summary.mcpDistribution }, { title: "Skill mix", data: summary.skillDistribution },
+    ].map(group => <DistributionChart key={group.title} title={group.title} unit="calls" data={group.data.map((row, index) => ({ ...row, color: palette[index % palette.length] }))} />)}</div>
+  </div>;
+}

package/components/analytics/work-usage/turn-timeline.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { Button, Tooltip } from "@heroui/react";
+import { useQuery } from "@tanstack/react-query";
+import { UnifiedMessageKind } from "@talgent/workbench-contracts/dispatcher/public/v1/unified_message_pb";
+import { streamClient } from "../../../lib/client";
+import { formatCompactTokenCount } from "../../../lib/trace-view-model";
+import { tokenCategories, tokenTotal } from "../../../lib/token-usage";
+import { turnAxis, type Call, type ModelCall, type TimeRange, type ToolCall, type Turn } from "./turns";
+import { formatClock, formatMillis } from "./work-status";
+
+const shownCalls = 40;
+const legend = [["model", "Model call"], ["tool", "Tool"], ["mcp", "MCP tool"], ["agent", "Subagent"], ["wait", "Waited for you"]] as const;
+const visibleWaitMillis = 1000;
+
+/** One Turn's calls on an axis covering only that Turn. */
+export function TurnTimeline({ turn, workId, now }: { turn: Turn; workId: string; now: number }) {
+  const [showAll, setShowAll] = useState(false);
+  const range = { start: turn.start, end: turn.open ? Math.max(turn.end, now) : turn.end };
+  const axis = turnAxis(range, turn.calls);
+  const calls = showAll ? turn.calls : turn.calls.slice(0, shownCalls);
+  // The legend names only the kinds this Turn's bars use.
+  const kinds = new Set<string>(calls.flatMap(call => call.kind === "model" ? ["model"] : [call.family, ...(call.wait && call.wait.end - call.wait.start >= visibleWaitMillis ? ["wait"] : [])]));
+  if (!turn.calls.length) return <p className="wu-empty">No calls recorded in this Turn.</p>;
+  return <div className="wu-timeline">
+    <ul className="wu-legend" aria-label="Bar colours">
+      {legend.filter(([kind]) => kinds.has(kind)).map(([kind, label]) => <li key={kind}><i className="wu-bar-swatch" data-kind={kind} />{label}</li>)}
+    </ul>
+    <div className="wu-axis" aria-hidden="true">
+      <span>{formatClock(range.start)}</span><span>{formatClock(range.end)}</span>
+      {axis.breaks.map(at => <i key={at} className="wu-break" style={{ left: `${at}%` }} />)}
+    </div>
+    <ol className="wu-calls" aria-label="Calls in this Turn">
+      {calls.map(call => <li key={call.key}><CallRow call={call} workId={workId} bar={segment => ({ left: `${axis.position(segment.start)}%`, width: `${Math.max(axis.position(segment.end) - axis.position(segment.start), .6)}%` })} /></li>)}
+    </ol>
+    {turn.calls.length > calls.length && <Button size="sm" variant="ghost" onPress={() => setShowAll(true)}>Show {turn.calls.length - calls.length} more calls</Button>}
+  </div>;
+}
+
+function CallRow({ call, workId, bar }: { call: Call; workId: string; bar: (range: TimeRange) => { left: string; width: string } }) {
+  const [open, setOpen] = useState(false);
+  const label = call.kind === "model" ? "Model call" : call.name;
+  const waited = call.kind === "tool" && call.wait && call.wait.end - call.wait.start >= visibleWaitMillis ? call.wait : null;
+  const metric = call.kind === "model" ? formatCompactTokenCount(tokenTotal(call.usage)) : formatMillis(call.end - call.start);
+  return <Tooltip delay={0} closeDelay={100} isOpen={open} onOpenChange={setOpen}>
+    <Button variant="ghost" className="wu-call" aria-label={`${label}${call.kind === "tool" && call.source ? ` (${call.source})` : ""}, ${metric}`} onPress={() => setOpen(true)}>
+      <span className="wu-call-name"><span>{label}</span>{call.kind === "tool" && call.source && <span className="wu-muted">{call.source}</span>}</span>
+      <span className="wu-track" aria-hidden="true">
+        {waited && <span className="wu-bar" data-kind="wait" style={bar(waited)} />}
+        <span className="wu-bar" data-kind={call.kind === "tool" ? call.family : "model"} style={bar(call.kind === "tool" && call.run ? call.run : call)} />
+      </span>
+      <span className="wu-call-metric">{waited ? <>Waited for you {formatMillis(waited.end - waited.start)}</> : metric}</span>
+    </Button>
+    <Tooltip.Content placement="bottom" className="wu-card">
+      {call.kind === "model" ? <ModelCallCard call={call} /> : <ToolCallCard call={call} workId={workId} waited={waited} enabled={open} />}
+    </Tooltip.Content>
+  </Tooltip>;
+}
+
+function ModelCallCard({ call }: { call: ModelCall }) {
+  return <>
+    <p className="wu-card-title">Model call</p>
+    <p className="wu-muted">{call.model} · {formatClock(call.start)}</p>
+    <dl className="wu-facts">
+      <Fact label="Duration" value={formatMillis(call.end - call.start)} />
+      {call.ttftMs !== null && <Fact label="First token" value={formatMillis(call.ttftMs)} />}
+      {call.stopReason && <Fact label="Stop reason" value={call.stopReason} />}
+    </dl>
+    <dl className="wu-facts">{tokenCategories.map(category => <Fact key={category.key} label={category.label} value={call.usage[category.key].toLocaleString()} />)}</dl>
+  </>;
+}
+
+function ToolCallCard({ call, workId, waited, enabled }: { call: ToolCall; workId: string; waited: TimeRange | null; enabled: boolean }) {
+  // The call's summary is the message stream's, found by the call's identity.
+  const summary = useQuery({
+    queryKey: ["tool-call-summary", workId, call.callId],
+    queryFn: async ({ signal }) => {
+      const message = (await streamClient.listMessagesBySession({ agentWorkId: workId, toolCallIds: [call.callId], kinds: [UnifiedMessageKind.ACTION], limit: 1 }, { signal })).messages[0];
+      return message?.payload.case === "action" ? message.payload.value.summary : "";
+    },
+    enabled: enabled && Boolean(call.callId),
+    retry: false,
+    staleTime: Infinity,
+  });
+  return <>
+    <p className="wu-card-title">{call.name}</p>
+    <p className="wu-muted">{[call.source, formatClock(call.start)].filter(Boolean).join(" · ")}</p>
+    {summary.data && <p className="wu-summary">{summary.data}</p>}
+    <dl className="wu-facts">
+      {waited && <Fact label="Waited for you" value={formatMillis(waited.end - waited.start)} />}
+      <Fact label="Ran" value={formatMillis(call.run ? call.run.end - call.run.start : call.end - call.start)} />
+      {call.result && <Fact label="Result" value={call.result === "succeeded" ? "Succeeded" : "Failed"} />}
+    </dl>
+  </>;
+}
+
+function Fact({ label, value }: { label: string; value: string }) {
+  return <div><dt>{label}</dt><dd>{value}</dd></div>;
+}

package/components/analytics/work-usage/turns.ts

@@ -0,0 +1,170 @@
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { Span } from "@talgent/workbench-contracts/trace/public/v1/trace_pb";
+import { addTokenUsage, emptyTokenUsage, tokenUsageFromAttributes, type TokenUsage } from "../../../lib/token-usage";
+
+export type TimeRange = { start: number; end: number };
+
+export type ModelCall = TimeRange & {
+  kind: "model"; key: string; model: string; ttftMs: number | null; stopReason: string; usage: TokenUsage;
+};
+
+/** What kind of tool a call used, which its bar's colour tells apart. */
+export type ToolFamily = "tool" | "mcp" | "agent";
+
+export type ToolCall = TimeRange & {
+  kind: "tool"; key: string; callId: string; name: string; source: string; family: ToolFamily;
+  /** Time spent waiting on the person, from the blocked-on-user evidence. */
+  wait: TimeRange | null;
+  run: TimeRange | null;
+  result: "succeeded" | "failed" | null;
+};
+
+export type Call = ModelCall | ToolCall;
+
+export type Turn = TimeRange & {
+  key: string;
+  /** No interaction span yet: the newest Turn, still running or cut off. */
+  open: boolean;
+  /** Every model call in the Turn, delegated ones included. */
+  usage: TokenUsage;
+  /** The Turn's own calls, oldest first. */
+  calls: Call[];
+};
+
+const interaction = "claude_code.interaction";
+const modelRequest = "claude_code.llm_request";
+const toolCall = "claude_code.tool";
+const waitSpan = "claude_code.tool.blocked_on_user";
+const executionSpan = "claude_code.tool.execution";
+
+const keyOf = (span: Span) => `${span.traceId}:${span.spanId}`;
+const parentKeyOf = (span: Span) => `${span.traceId}:${span.parentSpanId}`;
+
+export function spanRange(span: Span): TimeRange {
+  const start = span.startTime ? timestampDate(span.startTime).getTime() : 0;
+  return { start, end: start + Number(span.durationNanos) / 1_000_000 };
+}
+
+/**
+ * Groups loaded spans into Turns, newest first. A Turn is an interaction span
+ * and its descendants. Claude Code exports the interaction span only when the
+ * Turn ends, so the newest calls without one form an open Turn. Older calls
+ * without one belong to a Turn on a page not loaded yet; they are left out
+ * until it is, unless no earlier page remains.
+ */
+export function buildTurns(spans: Span[], hasEarlier: boolean): Turn[] {
+  const byKey = new Map(spans.map(span => [keyOf(span), span]));
+  const groups = new Map<string, { root: Span | null; spans: Span[] }>();
+  const rootCache = new Map<string, string>();
+  const rootOf = (span: Span, seen = new Set<string>()): string => {
+    const key = keyOf(span);
+    const cached = rootCache.get(key);
+    if (cached) return cached;
+    const parent = byKey.get(parentKeyOf(span));
+    const root = span.name === interaction ? key : parent && !seen.has(key) ? rootOf(parent, seen.add(key)) : parentKeyOf(span);
+    rootCache.set(key, root);
+    return root;
+  };
+  for (const span of byKey.values()) {
+    const root = rootOf(span);
+    const group = groups.get(root) ?? { root: null, spans: [] };
+    if (keyOf(span) === root) group.root = span;
+    else group.spans.push(span);
+    groups.set(root, group);
+  }
+
+  const newestInteraction = Math.max(...[...groups.values()].flatMap(group => group.root ? [spanRange(group.root).start] : []));
+  const rangeOf = (group: { root: Span | null; spans: Span[] }) => {
+    if (group.root) return spanRange(group.root);
+    const ranges = group.spans.map(spanRange);
+    return { start: Math.min(...ranges.map(item => item.start)), end: Math.max(...ranges.map(item => item.end)) };
+  };
+  // Only the newest group without an interaction span, after every finished Turn, can be the open one.
+  const openKey = [...groups].filter(([, group]) => !group.root && rangeOf(group).start > newestInteraction)
+    .sort((left, right) => rangeOf(right[1]).start - rangeOf(left[1]).start)[0]?.[0];
+  const turns: Turn[] = [];
+  for (const [rootKey, group] of groups) {
+    const range = rangeOf(group);
+    const open = rootKey === openKey;
+    if (!group.root && !open && hasEarlier) continue;
+    turns.push({ key: rootKey, ...range, open, usage: turnUsage(group.spans), calls: turnCalls(rootKey, group.spans) });
+  }
+  return turns.sort((left, right) => right.start - left.start);
+}
+
+function turnUsage(spans: Span[]): TokenUsage {
+  return spans.filter(span => span.name === modelRequest).reduce((usage, span) => addTokenUsage(usage, tokenUsageFromAttributes(span.attributes)), emptyTokenUsage());
+}
+
+function turnCalls(rootKey: string, spans: Span[]): Call[] {
+  const children = new Map<string, Span[]>();
+  for (const span of spans) children.set(parentKeyOf(span), [...(children.get(parentKeyOf(span)) ?? []), span]);
+  const calls: Call[] = [];
+  for (const span of children.get(rootKey) ?? []) {
+    const range = spanRange(span);
+    if (span.name === modelRequest) {
+      const ttft = Number(span.attributes.ttft_ms);
+      calls.push({ kind: "model", key: keyOf(span), ...range, model: span.attributes.model || "Unknown model", ttftMs: span.attributes.ttft_ms && Number.isFinite(ttft) ? ttft : null, stopReason: span.attributes.stop_reason ?? "", usage: tokenUsageFromAttributes(span.attributes) });
+    }
+    if (span.name === toolCall) {
+      // One call is one row: its wait and execution are its child spans.
+      const parts = children.get(keyOf(span)) ?? [];
+      const wait = parts.find(part => part.name === waitSpan);
+      const execution = parts.find(part => part.name === executionSpan);
+      const success = execution?.attributes.success;
+      calls.push({
+        kind: "tool", key: keyOf(span), ...range, callId: span.callId || span.attributes.tool_use_id || "",
+        ...toolName(span.attributes),
+        wait: wait ? spanRange(wait) : null, run: execution ? spanRange(execution) : null,
+        result: success === "true" ? "succeeded" : success === "false" || execution?.attributes.error ? "failed" : null,
+      });
+    }
+  }
+  return calls.sort((left, right) => left.start - right.start);
+}
+
+/** MCP tools read by their own name with their server as the source. */
+export function toolName(attributes: Record<string, string>): { name: string; source: string; family: ToolFamily } {
+  const tool = attributes.tool_name || "Unknown tool";
+  const mcp = /^mcp__(.+?)__(.+)$/.exec(tool);
+  if (mcp) return { name: mcp[2], source: mcp[1], family: "mcp" };
+  if (tool === "mcp_tool") return { name: attributes.mcp_tool_name || "MCP tool", source: attributes.mcp_server_name ?? "", family: "mcp" };
+  if (tool === "Skill") return { name: "Skill", source: attributes.skill_name ?? "", family: "tool" };
+  if (tool === "Agent" || tool === "Task") return { name: tool, source: attributes.subagent_type ?? "", family: "agent" };
+  return { name: tool, source: "", family: "tool" };
+}
+
+/** Waits longer than this fold into an axis break. */
+export const foldedWaitMillis = 60_000;
+const breakWidth = 3;
+
+export type TurnAxis = { position: (time: number) => number; breaks: number[] };
+
+/** A Turn's time axis in percent, with each long wait folded to a short break
+ * so that it does not flatten every other call. */
+export function turnAxis(turn: TimeRange, calls: Call[]): TurnAxis {
+  const folds = calls.flatMap(call => call.kind === "tool" && call.wait && call.wait.end - call.wait.start > foldedWaitMillis ? [call.wait] : [])
+    .sort((left, right) => left.start - right.start)
+    .reduce<TimeRange[]>((merged, wait) => {
+      const last = merged.at(-1);
+      if (last && wait.start <= last.end) last.end = Math.max(last.end, wait.end);
+      else merged.push({ ...wait });
+      return merged;
+    }, []);
+  const folded = folds.reduce((sum, fold) => sum + fold.end - fold.start, 0);
+  const visible = Math.max(turn.end - turn.start - folded, 1);
+  const scale = (100 - folds.length * breakWidth) / visible;
+  const position = (time: number) => {
+    const at = Math.min(Math.max(time, turn.start), turn.end);
+    let offset = 0;
+    let elapsed = at - turn.start;
+    for (const fold of folds) {
+      if (at <= fold.start) break;
+      const inside = Math.min(at, fold.end) - fold.start;
+      elapsed -= inside;
+      offset += breakWidth * inside / (fold.end - fold.start);
+    }
+    return Math.min(100, elapsed * scale + offset);
+  };
+  return { position, breaks: folds.map(fold => position(fold.start) + breakWidth / 2) };
+}

package/components/analytics/work-usage/work-status.ts

@@ -0,0 +1,36 @@
+import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
+import { useAgentWork } from "../../../lib/agent-work-service";
+
+export type WorkUsageStatus = { state: string; waiting: boolean; updatedAt: Date | null };
+
+export function workUsageStatus(work: { state: string; waiting: boolean; updatedAt?: Timestamp } | undefined): WorkUsageStatus | null {
+  return work ? { state: work.state, waiting: work.waiting, updatedAt: work.updatedAt ? timestampDate(work.updatedAt) : null } : null;
+}
+
+/** The Work's own state, the authority on whether it works (AgentWork), as
+ * its owner reads it. */
+export function useOwnWorkUsageStatus(workId: string): WorkUsageStatus | null {
+  return workUsageStatus(useAgentWork(workId).data?.work);
+}
+
+export function formatMillis(millis: number): string {
+  if (millis < 1000) return `${Math.round(millis)}ms`;
+  const seconds = millis / 1000;
+  if (seconds < 60) return `${seconds.toFixed(1).replace(/\.0$/, "")}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${String(Math.round(seconds % 60)).padStart(2, "0")}s`;
+  return `${Math.floor(minutes / 60)}h ${String(minutes % 60).padStart(2, "0")}m`;
+}
+
+export function formatClock(time: number, now = Date.now()): string {
+  const date = new Date(time);
+  const clock = date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  return new Date(now).toDateString() === date.toDateString() ? clock : `${date.toLocaleDateString(undefined, { month: "short", day: "numeric" })} ${clock}`;
+}
+
+export function formatAgo(millis: number): string {
+  if (millis < 60_000) return `${Math.max(0, Math.round(millis / 1000))}s ago`;
+  if (millis < 3_600_000) return `${Math.floor(millis / 60_000)}m ago`;
+  if (millis < 86_400_000) return `${Math.floor(millis / 3_600_000)}h ago`;
+  return `${Math.floor(millis / 86_400_000)}d ago`;
+}

package/components/analytics/work-usage/work-usage-reader.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Alert, Button, Chip, Disclosure, Skeleton, Tooltip } from "@heroui/react";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import { Download, RefreshCw } from "lucide-react";
+import type { Span } from "@talgent/workbench-contracts/trace/public/v1/trace_pb";
+import { traceClient } from "../../../lib/client";
+import { formatCompactTokenCount, traceMetricKinds } from "../../../lib/trace-view-model";
+import { cacheHitRate, formatHitRate, tokenCategories, tokenTotal, tokenUsageFromMeasurements } from "../../../lib/token-usage";
+import { workMetricsWindow } from "../../../lib/use-work-trace";
+import { workPresentation } from "../../../lib/work-state-presentation";
+import { buildTurns, spanRange, toolName, type Turn } from "./turns";
+import { TurnTimeline } from "./turn-timeline";
+import { formatAgo, formatClock, formatMillis, type WorkUsageStatus } from "./work-status";
+import "./work-usage.css";
+
+const refreshMillis = 10_000;
+const pageSize = 500;
+
+/** A Work's Token Usage: its totals, whether it is working, and its Turns
+ * newest first. Native evidence stays out of view; the download keeps it.
+ * `status` is the Work's state as the caller may read it; `projectId` is
+ * empty for a Work without a Project. */
+export function WorkUsageReader({ projectId, agentWorkId, createdAt = null, status, toolbar }: {
+  projectId: string; agentWorkId: string; createdAt?: Date | null; status: WorkUsageStatus | null; toolbar?: HTMLElement | null;
+}) {
+  const live = status?.state === "working" || status?.state === "starting";
+  const now = useNow(refreshMillis);
+  const spans = useInfiniteQuery({
+    queryKey: ["work-usage-spans", projectId, agentWorkId], initialPageParam: "",
+    queryFn: ({ pageParam, signal }) => traceClient.listSpansBySession({ projectId, agentWorkId, limit: pageSize, afterCursor: pageParam, newestFirst: true }, { signal }),
+    getNextPageParam: page => page.nextCursor || undefined,
+    refetchInterval: live ? refreshMillis : false, retry: false, refetchOnWindowFocus: false,
+  });
+  const metrics = useQuery({
+    queryKey: ["trace-metrics", projectId, agentWorkId, createdAt?.getTime() ?? 0],
+    queryFn: ({ signal }) => {
+      const range = workMetricsWindow(new Date(), createdAt);
+      return traceClient.getSessionTraceMetrics({ projectId, agentWorkId, startTime: timestampFromDate(range.start), endTime: timestampFromDate(range.end), stepSeconds: range.stepSeconds, metricKinds: [...traceMetricKinds] }, { signal });
+    },
+    refetchInterval: live ? refreshMillis : false, retry: false, refetchOnWindowFocus: false,
+  });
+  const loaded = useMemo(() => spans.data?.pages.flatMap(page => page.spans) ?? [], [spans.data]);
+  const turns = useMemo(() => buildTurns(loaded, Boolean(spans.hasNextPage)), [loaded, spans.hasNextPage]);
+  const refresh = () => { void spans.refetch(); void metrics.refetch(); };
+  const download = () => {
+    const body = JSON.stringify({ agentWorkId, spans: loaded, hasEarlierSpans: Boolean(spans.hasNextPage), metrics: metrics.data ?? null }, (_, value) => typeof value === "bigint" ? value.toString() : value, 2);
+    const url = URL.createObjectURL(new Blob([body], { type: "application/json" }));
+    const link = document.createElement("a"); link.href = url; link.download = `${agentWorkId}-usage.json`; link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+
+  return <div className="pr-document wu-reader">
+    {toolbar && createPortal(<>
+      <Tooltip><Button isIconOnly size="sm" variant="ghost" aria-label="Refresh usage" isPending={spans.isFetching || metrics.isFetching} onPress={refresh}><RefreshCw size={16} /></Button><Tooltip.Content>Refresh usage</Tooltip.Content></Tooltip>
+      <Tooltip><Button isIconOnly size="sm" variant="ghost" aria-label="Download usage details" isDisabled={!spans.data && !metrics.data} onPress={download}><Download size={16} /></Button><Tooltip.Content>Download usage details</Tooltip.Content></Tooltip>
+    </>, toolbar)}
+    {metrics.isPending ? <Skeleton className="h-16 rounded-lg" aria-label="Loading token usage" />
+      : metrics.isError && !metrics.data ? <QueryError title="Token usage couldn't load." onRetry={() => void metrics.refetch()} />
+      : <UsageTotals totals={metrics.data?.totals ?? []} />}
+    <StatusLine status={status} spans={loaded} now={now} />
+    <h2 className="pr-section-title">Turns</h2>
+    {spans.isPending ? <Skeleton className="h-24 rounded-lg" aria-label="Loading Turns" />
+      : spans.isError && !spans.data ? <QueryError title="Turns couldn't load." onRetry={() => void spans.refetch()} />
+      : turns.length ? <ol className="wu-turns">{turns.map((turn, index) => <li key={turn.key}><TurnRow turn={turn} running={turn.open && live} defaultExpanded={index === 0} workId={agentWorkId} now={now} /></li>)}</ol>
+      : !spans.hasNextPage && <p className="wu-empty">No Turns to show.</p>}
+    {spans.hasNextPage && <Button size="sm" variant="secondary" className="wu-earlier" isPending={spans.isFetchingNextPage} onPress={() => void spans.fetchNextPage()}>Load earlier turns</Button>}
+  </div>;
+}
+
+function UsageTotals({ totals }: { totals: Array<{ metricKind: string; value: number }> }) {
+  const usage = tokenUsageFromMeasurements(totals);
+  const rate = cacheHitRate(usage);
+  return <section aria-label="Token usage"><dl className="pr-metrics wu-totals">
+    <div><dt>Total</dt><dd>{formatCompactTokenCount(tokenTotal(usage))}</dd></div>
+    {tokenCategories.map(category => <div key={category.key}><dt>{category.label}</dt><dd>{formatCompactTokenCount(usage[category.key])}</dd></div>)}
+    {rate !== null && <div><dt>Cache hit rate</dt><dd>{formatHitRate(rate)}</dd></div>}
+  </dl></section>;
+}
+
+/** Whether the Work is working comes from its state; trace activity only adds
+ * what it did last and when. */
+function StatusLine({ status, spans, now }: { status: WorkUsageStatus | null; spans: Span[]; now: number }) {
+  const latest = spans.filter(span => span.name === "claude_code.llm_request" || span.name === "claude_code.tool")
+    .map(span => ({ span, end: spanRange(span).end })).sort((left, right) => right.end - left.end)[0];
+  const presentation = workPresentation(status ?? undefined);
+  const stopped = status && ["stopped", "failed", "closed"].includes(status.state) && status.updatedAt;
+  const activity = latest && <span>{latest.span.name === "claude_code.llm_request" ? `Model call by ${latest.span.attributes.model || "an unknown model"}` : toolName(latest.span.attributes).name} finished {formatClock(latest.end, now)} · {formatAgo(now - latest.end)}</span>;
+  return <p className="wu-status" role="status">
+    {presentation && <Chip size="sm" variant="soft" color={presentation.color}><Chip.Label>{presentation.label}</Chip.Label></Chip>}
+    {stopped ? <span>at {formatClock(stopped.getTime(), now)}</span> : status?.waiting ? null : activity}
+  </p>;
+}
+
+function TurnRow({ turn, running, defaultExpanded, workId, now }: { turn: Turn; running: boolean; defaultExpanded: boolean; workId: string; now: number }) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  return <Disclosure isExpanded={expanded} onExpandedChange={setExpanded}>
+    <Disclosure.Heading>
+      <Button slot="trigger" variant="ghost" className="wu-turn">
+        <Disclosure.Indicator />
+        <span className="wu-turn-time"><span className="sr-only">Turn started </span>{formatClock(turn.start, now)}</span>
+        <span className="wu-turn-duration">{running ? <Chip size="sm" variant="soft" color="success"><Chip.Label>Running</Chip.Label></Chip> : formatMillis(turn.end - turn.start)}</span>
+        <span className="wu-turn-tokens">{formatCompactTokenCount(tokenTotal(turn.usage))}<span className="sr-only"> tokens</span></span>
+      </Button>
+    </Disclosure.Heading>
+    <Disclosure.Content>{expanded && <TurnTimeline turn={turn} workId={workId} now={now} />}</Disclosure.Content>
+  </Disclosure>;
+}
+
+function QueryError({ title, onRetry }: { title: string; onRetry: () => void }) {
+  return <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Title>{title}</Alert.Title></Alert.Content><Button size="sm" variant="secondary" onPress={onRetry}>Retry</Button></Alert>;
+}
+
+function useNow(intervalMillis: number) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), intervalMillis);
+    return () => clearInterval(timer);
+  }, [intervalMillis]);
+  return now;
+}

package/components/analytics/work-usage/work-usage.css

@@ -0,0 +1,48 @@
+/* Work Token Usage reader. Bars tell call kinds apart with
+   low-saturation hues blended into the surface, so both themes stay quiet. */
+.wu-totals { margin-bottom: 16px; }
+.wu-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.wu-empty { padding-block: 16px; font-size: 13px; color: var(--muted); }
+.wu-turns { display: grid; margin-top: 8px; border-top: 1px solid var(--separator); }
+.wu-turns>li { border-bottom: 1px solid var(--separator); }
+.wu-turn { width: 100%; justify-content: flex-start; gap: 12px; font-variant-numeric: tabular-nums; }
+.wu-turn-time { flex: 1; text-align: start; font-weight: 500; }
+.wu-turn-duration { min-width: 72px; text-align: end; color: var(--muted); }
+.wu-turn-tokens { min-width: 56px; text-align: end; }
+.wu-earlier { margin-top: 12px; }
+
+.wu-timeline { padding: 4px 0 16px 28px; }
+.wu-axis { position: relative; display: flex; justify-content: space-between; margin-left: 180px; padding-bottom: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.wu-break { position: absolute; bottom: 0; width: 8px; height: 10px; transform: translateX(-50%) skewX(-20deg); border-inline: 1px solid var(--muted); background: var(--surface); }
+.wu-calls { display: grid; gap: 2px; }
+.wu-call { display: grid; width: 100%; height: auto; min-height: 30px; grid-template-columns: 172px minmax(0,1fr) 96px; gap: 8px; align-items: center; padding-inline: 4px; font-size: 12px; text-align: start; }
+.wu-call-name { display: flex; gap: 6px; min-width: 0; }
+.wu-call-name>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wu-call-metric { text-align: end; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wu-muted { color: var(--muted); }
+.wu-track { position: relative; height: 12px; border-radius: 3px; background: var(--default); }
+.wu-bar { position: absolute; top: 2px; height: 8px; border-radius: 2px; }
+.wu-bar, .wu-bar-swatch { background: color-mix(in oklch,var(--wu-hue) 78%,var(--surface)); }
+.wu-timeline [data-kind="model"] { --wu-hue: oklch(0.6 0.07 255); }
+.wu-timeline [data-kind="tool"] { --wu-hue: oklch(0.62 0.06 170); }
+.wu-timeline [data-kind="mcp"] { --wu-hue: oklch(0.6 0.07 305); }
+.wu-timeline [data-kind="agent"] { --wu-hue: oklch(0.66 0.07 70); }
+/* A wait on the person is hatched so that it is not read as work. */
+:is(.wu-bar, .wu-bar-swatch)[data-kind="wait"] { background: repeating-linear-gradient(135deg,color-mix(in oklch,var(--warning) 70%,var(--surface)) 0 3px,transparent 3px 6px); }
+.wu-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px 180px; font-size: 11px; color: var(--muted); }
+.wu-legend>li { display: inline-flex; align-items: center; gap: 6px; }
+.wu-bar-swatch { display: block; width: 10px; height: 8px; border-radius: 2px; }
+
+.wu-card { display: grid; gap: 6px; max-width: 300px; padding: 10px 12px; font-size: 12px; }
+.wu-card-title { font-size: 13px; font-weight: 600; }
+.wu-summary { overflow-wrap: anywhere; }
+.wu-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 16px; }
+.wu-facts dt { color: var(--muted); }
+.wu-facts dd { font-weight: 500; font-variant-numeric: tabular-nums; }
+
+@media (max-width: 740px) {
+  .wu-timeline { padding-left: 0; }
+  .wu-axis, .wu-legend { margin-left: 0; }
+  .wu-call { grid-template-columns: minmax(0,1fr) 88px; }
+  .wu-track { grid-column: 1 / -1; grid-row: 2; }
+}

package/components/auth/auth-gate.tsx

@@ -0,0 +1,44 @@
+import { Button, Card, Typography } from "@heroui/react";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { useContext, useSyncExternalStore, type ReactNode } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { useCurrentUser } from "../../lib/account-service";
+import { sessionEnded, signInPagePath, subscribeSessionEnd } from "../../lib/session";
+import { EntryShellContext } from "../shell/entry-shell";
+
+// No usable session on this device: sign in, then come back here.
+function SignInRedirect() {
+  const location = useLocation();
+  const home = useContext(EntryShellContext)?.home;
+  return <Navigate replace to={signInPagePath(`${location.pathname}${location.search}${location.hash}`, home)} />;
+}
+
+export function AuthGate({ children }: { children: ReactNode }) {
+  const current = useCurrentUser();
+  const ended = useSyncExternalStore(subscribeSessionEnd, sessionEnded);
+
+  if (ended) {
+    return <SignInRedirect />;
+  }
+  if (current.isLoading) {
+    return <span className="sr-only" role="status">Loading profile…</span>;
+  }
+  if (current.isError) {
+    if (current.error instanceof ConnectError && current.error.code !== Code.Unauthenticated) {
+      return (
+        <div className="flex min-h-screen items-center justify-center p-6">
+          <Card className="w-full max-w-md" role="alert">
+            <Card.Header><Card.Title>Unable to load profile</Card.Title></Card.Header>
+            <Card.Content><Typography type="body-sm" color="muted">Please try again.</Typography></Card.Content>
+            <Card.Footer><Button variant="secondary" isPending={current.isFetching} onPress={() => { void current.refetch(); }}>Retry profile</Button></Card.Footer>
+          </Card>
+        </div>
+      );
+    }
+    return <SignInRedirect />;
+  }
+  if (!current.data?.user) {
+    return <SignInRedirect />;
+  }
+  return <>{children}</>;
+}