From 86d8a5f186c7aa8ecc881bea962c6886157b4498 Mon Sep 17 00:00:00 2001
From: sam2tom <sam2tom@users.noreply.github.com>
Date: Thu, 17 Sep 2026 09:05:43 +0800
Subject: [PATCH 1/2] feat(web): add protocol-honest trace workbench

---
 apps/web/e2e/agents-lifecycle.spec.ts         | 107 +++
 apps/web/e2e/fixture-core.mjs                 |  12 +-
 .../src/features/sessions/SessionsView.tsx    |  77 ++
 .../sessions/trace/TraceView.test.tsx         | 130 +++
 .../src/features/sessions/trace/TraceView.tsx | 487 ++++++++++++
 .../sessions/trace/trace-model.test.ts        | 423 ++++++++++
 .../features/sessions/trace/trace-model.ts    | 738 ++++++++++++++++++
 apps/web/src/style.css                        | 711 +++++++++++++++++
 docs/protocol-coverage.md                     |  62 +-
 9 files changed, 2735 insertions(+), 12 deletions(-)
 create mode 100644 apps/web/src/features/sessions/trace/TraceView.test.tsx
 create mode 100644 apps/web/src/features/sessions/trace/TraceView.tsx
 create mode 100644 apps/web/src/features/sessions/trace/trace-model.test.ts
 create mode 100644 apps/web/src/features/sessions/trace/trace-model.ts

diff --git a/apps/web/e2e/agents-lifecycle.spec.ts b/apps/web/e2e/agents-lifecycle.spec.ts
index 29ac6c2..899feb5 100644
--- a/apps/web/e2e/agents-lifecycle.spec.ts
+++ b/apps/web/e2e/agents-lifecycle.spec.ts
@@ -1285,6 +1285,113 @@ test("loads every Turn page, reconciles terminal events, and keeps failures besi
   await attachElementScreenshot(timeline, testInfo, "narrow-turn-timeline");
 });
 
+test("presents an honest searchable Trace workbench without changing the conversation draft", async ({ page, request }, testInfo) => {
+  await resetFixture(request);
+  await controlFixture(request, {
+    turnsScenario: 1,
+    turnsPageSize: 2,
+    itemsScenario: 2,
+  });
+  await page.goto("/");
+  await expect(page.getByText("listening", { exact: true })).toBeVisible();
+
+  const viewTabs = page.getByRole("tablist", { name: "Session view" });
+  const conversationTab = viewTabs.getByRole("tab", { name: "Conversation" });
+  const traceTab = viewTabs.getByRole("tab", { name: "Trace" });
+  const composer = page.getByLabel("Message the Agent");
+  await expect(page.locator("#session-trace-panel")).toBeHidden();
+  await composer.fill("Draft survives Trace inspection\nwith a second line");
+  const sendsBefore = (await fixtureRequests(request)).filter(
+    (entry) => entry.method === "POST" && entry.path.endsWith("/events"),
+  ).length;
+
+  await conversationTab.focus();
+  await page.keyboard.press("ArrowRight");
+  await expect(traceTab).toHaveAttribute("aria-selected", "true");
+  const trace = page.getByRole("tabpanel", { name: "Trace" });
+  await expect(trace).toBeVisible();
+  await expect(trace).toContainText("Known Turn time");
+  await expect(trace.getByText("7 observed Turns")).toHaveCount(0);
+  await expect(trace).toContainText("Turns");
+  await expect(trace).toContainText("Tool calls");
+  await expect(trace).toContainText("Equal-width sequence · not time-scaled");
+  await expect(trace.locator(".trace-order-scroll")).toHaveCount(1);
+  await expect(trace).toContainText("Per-item timing is unavailable");
+  await expect(trace).toContainText("Configured instructions");
+  await expect(trace).toContainText("Completed Turn output remains in the conversation.");
+  await expect(trace).not.toContainText("TTFT");
+  await expect(trace).not.toContainText("Throughput");
+
+  const search = trace.getByRole("searchbox", { name: "Search trace" });
+  await search.fill("Persisted input failed");
+  await expect(trace.locator(".trace-ledger-row")).toHaveCount(1);
+  await expect(trace).toContainText("Persisted input before the Turn failed.");
+  await search.fill("");
+
+  const patchRow = trace.locator(".trace-ledger-row-tools").filter({ hasText: "apply_patch" }).first();
+  await patchRow.click();
+  const detail = page.getByRole("complementary", { name: "Trace item details" });
+  await expect(detail).toBeVisible();
+  await expect(detail.getByRole("button", { name: "Close trace details" })).toBeFocused();
+  const previewTab = detail.getByRole("tab", { name: "Preview" });
+  await expect(previewTab).toHaveAttribute("aria-controls", "session-trace-panel-detail-content");
+  await previewTab.click();
+  await expect(detail.getByRole("tabpanel", { name: "Preview" })).toHaveAttribute("tabindex", "0");
+  const viewer = detail.getByRole("region", { name: "Parsar apply patch diff" });
+  await expect(viewer).toContainText("3 files");
+  await expect(viewer).toContainText("Completed");
+  const desktopSplit = await Promise.all([
+    trace.locator(".trace-ledger").boundingBox(),
+    detail.boundingBox(),
+  ]);
+  expect(desktopSplit[0]).not.toBeNull();
+  expect(desktopSplit[1]).not.toBeNull();
+  expect(desktopSplit[1]!.x).toBeGreaterThanOrEqual(desktopSplit[0]!.x + desktopSplit[0]!.width - 1);
+  await attachScreenshot(page, testInfo, "desktop-trace-detail");
+  await page.keyboard.press("Escape");
+  await expect(detail).toHaveCount(0);
+  await expect(patchRow).toBeFocused();
+
+  await patchRow.click();
+  await search.fill("filter selected row out");
+  await expect(patchRow).toBeHidden();
+  await page.getByRole("button", { name: "Close trace details" }).click();
+  await expect(search).toBeFocused();
+  await search.fill("");
+
+  await conversationTab.click();
+  await expect(composer).toBeVisible();
+  await expect(composer).toHaveValue("Draft survives Trace inspection\nwith a second line");
+  const sendsAfter = (await fixtureRequests(request)).filter(
+    (entry) => entry.method === "POST" && entry.path.endsWith("/events"),
+  ).length;
+  expect(sendsAfter).toBe(sendsBefore);
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await traceTab.click();
+  const narrowTrace = page.getByRole("tabpanel", { name: "Trace" });
+  const narrowPatchRow = narrowTrace.locator(".trace-ledger-row-tools").filter({ hasText: "apply_patch" }).first();
+  await narrowPatchRow.click();
+  const narrowDetail = page.getByRole("complementary", { name: "Trace item details" });
+  await expect(narrowDetail).toBeVisible();
+  await expect(narrowTrace.locator(".trace-ledger")).toBeHidden();
+  const widths = await narrowDetail.evaluate((element) => {
+    const box = element.getBoundingClientRect();
+    return {
+      viewport: innerWidth,
+      document: document.documentElement.scrollWidth,
+      body: document.body.scrollWidth,
+      left: box.left,
+      right: box.right,
+    };
+  });
+  expect(widths.document).toBeLessThanOrEqual(widths.viewport);
+  expect(widths.body).toBeLessThanOrEqual(widths.viewport);
+  expect(widths.left).toBeGreaterThanOrEqual(0);
+  expect(widths.right).toBeLessThanOrEqual(widths.viewport);
+  await attachScreenshot(page, testInfo, "narrow-trace-detail");
+});
+
 test("drops a delayed Turn page after switching Sessions", async ({ page, request }) => {
   await resetFixture(request);
   await controlFixture(request, {
diff --git a/apps/web/e2e/fixture-core.mjs b/apps/web/e2e/fixture-core.mjs
index 577736b..2c3a6b1 100644
--- a/apps/web/e2e/fixture-core.mjs
+++ b/apps/web/e2e/fixture-core.mjs
@@ -659,11 +659,13 @@ const server = http.createServer(async (request, response) => {
       }
       const items = sessionId !== "session_snapshot"
         ? []
-        : state.controls.itemsScenario
-          ? patchItems()
-          : state.controls.turnsScenario
-            ? observableTurnItems()
-            : [];
+        : state.controls.itemsScenario === 2
+          ? [...observableTurnItems(), ...patchItems()]
+          : state.controls.itemsScenario
+            ? patchItems()
+            : state.controls.turnsScenario
+              ? observableTurnItems()
+              : [];
       return sendJson(response, page(items));
     }
 
diff --git a/apps/web/src/features/sessions/SessionsView.tsx b/apps/web/src/features/sessions/SessionsView.tsx
index 4d7e91f..068a3fc 100644
--- a/apps/web/src/features/sessions/SessionsView.tsx
+++ b/apps/web/src/features/sessions/SessionsView.tsx
@@ -38,11 +38,13 @@ import {
 } from "./environment/EnvironmentPanel";
 import type { EnvironmentObservation } from "./environment/environment-state";
 import { ThreadItems } from "./items/ItemRenderers";
+import { TraceView } from "./trace/TraceView";
 import { TurnTimeline, type TurnTimelineLoadState } from "./turns/TurnTimeline";
 import { SessionActionsDialog } from "./actions/SessionActionsDialog";
 
 export type StreamState = "idle" | "connecting" | "listening" | "recovering" | "failed";
 export type SessionDetailState = "idle" | "loading" | "ready" | "failed";
+type SessionView = "conversation" | "trace";
 
 interface SessionsViewProps {
   agents: SavedAgent[];
@@ -329,6 +331,7 @@ export function SessionsView({
       : "Create or load a saved Agent before starting a Session."
     : null;
   const [message, setMessage] = useState("");
+  const [sessionView, setSessionView] = useState<SessionView>("conversation");
   const [newSessionOpen, setNewSessionOpen] = useState(false);
   const [agentId, setAgentId] = useState(firstStartableAgent?.id ?? "");
   const [actionSession, setActionSession] = useState<AgentSession | null>(null);
@@ -461,6 +464,25 @@ export function SessionsView({
     (unsupportedActionCount > 0 || environmentConnections.length > 0 && functionActions.length === 0),
   );
 
+  const onViewTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const tabs = Array.from(event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>("[role=tab]") ?? []);
+    const index = tabs.indexOf(event.currentTarget);
+    if (index < 0) return;
+    const target = event.key === "ArrowRight"
+      ? tabs[(index + 1) % tabs.length]
+      : event.key === "ArrowLeft"
+        ? tabs[(index - 1 + tabs.length) % tabs.length]
+        : event.key === "Home"
+          ? tabs[0]
+          : event.key === "End"
+            ? tabs[tabs.length - 1]
+            : null;
+    if (!target) return;
+    event.preventDefault();
+    target.click();
+    target.focus();
+  };
+
   return (
     <section ref={pageRef} className="page-section session-page" tabIndex={-1}>
       <aside className="session-browser">
@@ -589,6 +611,40 @@ export function SessionsView({
             </button>
           </header>
 
+          <div className="session-view-tabs" role="tablist" aria-label="Session view">
+            <button
+              id="session-conversation-tab"
+              type="button"
+              role="tab"
+              aria-controls="session-conversation-panel"
+              aria-selected={sessionView === "conversation"}
+              tabIndex={sessionView === "conversation" ? 0 : -1}
+              onClick={() => setSessionView("conversation")}
+              onKeyDown={onViewTabKeyDown}
+            >
+              Conversation
+            </button>
+            <button
+              id="session-trace-tab"
+              type="button"
+              role="tab"
+              aria-controls="session-trace-panel"
+              aria-selected={sessionView === "trace"}
+              tabIndex={sessionView === "trace" ? 0 : -1}
+              onClick={() => setSessionView("trace")}
+              onKeyDown={onViewTabKeyDown}
+            >
+              Trace
+            </button>
+          </div>
+
+          <div
+            className="session-view-panel conversation-view-panel"
+            id="session-conversation-panel"
+            role="tabpanel"
+            aria-labelledby="session-conversation-tab"
+            hidden={sessionView !== "conversation"}
+          >
           <div className="conversation-thread-frame">
             <div ref={setViewport} className="conversation-scroll">
               <div ref={setThreadContent} className="thread-content">
@@ -751,6 +807,27 @@ export function SessionsView({
               </form>
             )}
           </footer>
+          </div>
+          {sessionView === "trace" ? (
+            <TraceView
+              id="session-trace-panel"
+              labelledBy="session-trace-tab"
+              session={selected}
+              turns={turns}
+              items={items}
+              detailState={detailState}
+              detailError={detailError}
+              turnState={turnState}
+              turnError={turnError}
+            />
+          ) : (
+            <div
+              id="session-trace-panel"
+              role="tabpanel"
+              aria-labelledby="session-trace-tab"
+              hidden
+            />
+          )}
         </div>
       ) : (
         <div className="workspace-empty">
diff --git a/apps/web/src/features/sessions/trace/TraceView.test.tsx b/apps/web/src/features/sessions/trace/TraceView.test.tsx
new file mode 100644
index 0000000..9472432
--- /dev/null
+++ b/apps/web/src/features/sessions/trace/TraceView.test.tsx
@@ -0,0 +1,130 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { AgentSession, AgentTurn, SessionItem } from "@agents-core-web/agents-client";
+
+import { TraceView } from "./TraceView";
+
+const session: AgentSession = {
+  id: "session-1",
+  object: "agent.session",
+  agent: {
+    id: "agent-1",
+    model: "fixture/model",
+    name: "Fixture Agent",
+    instructions: "Use durable evidence.",
+    multi_agent: { enabled: false, max_concurrent_subagents: null },
+    reasoning: {},
+    service_tier: "auto",
+    text: { format: { type: "text" }, verbosity: "medium" },
+    tools: [{
+      type: "function",
+      name: "lookup",
+      description: "Look up a record",
+      parameters: { type: "object", properties: { query: { type: "string" } } },
+    }],
+  },
+  environment: { type: "none" },
+  status: "idle",
+  error: null,
+  metadata: {},
+  required_actions: [],
+  vault_ids: [],
+  usage: null,
+  created_at: 1,
+  last_active_at: 1,
+};
+
+function turn(id: string, overrides: Partial<AgentTurn> = {}): AgentTurn {
+  return {
+    id,
+    agent_id: "agent-1",
+    session_id: session.id,
+    object: "agent.session.turn",
+    status: "completed",
+    created_at: 1,
+    started_at: null,
+    completed_at: null,
+    error: null,
+    usage: null,
+    ...overrides,
+  };
+}
+
+const items: SessionItem[] = [
+  { id: "user", turn_id: "known", type: "message", status: "completed", role: "user", content: [{ type: "input_text", text: "Find Alpha" }] },
+  { id: "assistant", turn_id: "known", type: "message", status: "completed", role: "assistant", phase: "final_answer", content: [{ type: "output_text", text: "Alpha found" }] },
+  { id: "call", turn_id: "known", type: "function_call", status: "in_progress", name: "lookup", call_id: "call-1", arguments: { query: "Alpha" } },
+  { id: "output", turn_id: "known", type: "function_call_output", status: "completed", call_id: "call-1", output: { found: true }, duration_ms: 42 },
+  { id: "orphan", turn_id: "missing", type: "future_item" as SessionItem["type"], status: "completed", output: "future" },
+];
+
+function render(options: {
+  detailState?: "idle" | "loading" | "ready" | "failed";
+  detailError?: string | null;
+  turnState?: "idle" | "loading" | "ready" | "failed";
+  turnError?: string | null;
+} = {}) {
+  return renderToStaticMarkup(
+    <TraceView
+      id="trace-panel"
+      labelledBy="trace-tab"
+      session={session}
+      turns={[
+        turn("known", { started_at: 10, completed_at: 12, usage: {
+          input_tokens: 8,
+          output_tokens: 3,
+          total_tokens: 11,
+          input_tokens_details: { cached_tokens: 2 },
+          output_tokens_details: { reasoning_tokens: 1 },
+        } }),
+        turn("unknown"),
+      ]}
+      items={items}
+      detailState={options.detailState ?? "ready"}
+      detailError={options.detailError ?? null}
+      turnState={options.turnState ?? "ready"}
+      turnError={options.turnError ?? null}
+    />,
+  );
+}
+
+describe("Trace workbench presentation", () => {
+  it("renders honest summaries, durable lanes, grouped rows, and search", () => {
+    const html = render();
+
+    expect(html).toContain('id="trace-panel"');
+    expect(html).toContain('aria-labelledby="trace-tab"');
+    expect(html).toContain("Known Turn time");
+    expect(html).toContain("2 s · 1 unknown");
+    expect(html).toContain("Tool calls");
+    expect(html).toContain("Durable order");
+    expect(html).toContain("Equal-width sequence · not time-scaled");
+    expect(html).toContain("Per-item timing is unavailable");
+    expect(html).toContain("Configured instructions");
+    expect(html).toContain("Turn 1");
+    expect(html).toContain("Turn 2");
+    expect(html).toContain("Unassociated Items 1");
+    expect(html).toContain("Find Alpha");
+    expect(html).toContain("Alpha found");
+    expect(html).toContain("lookup");
+    expect(html).toContain('type="search"');
+    expect(html).not.toContain("TTFT");
+    expect(html).not.toContain("Throughput");
+  });
+
+  it("retains durable rows while partial Turn and Item reads are reported", () => {
+    const html = render({
+      detailState: "failed",
+      detailError: "Items read unavailable",
+      turnState: "failed",
+      turnError: "Turns read unavailable",
+    });
+
+    expect(html).toContain("Turn history is incomplete");
+    expect(html).toContain("Turns read unavailable");
+    expect(html).toContain("Item history is incomplete");
+    expect(html).toContain("Items read unavailable");
+    expect(html).toContain("Alpha found");
+  });
+});
diff --git a/apps/web/src/features/sessions/trace/TraceView.tsx b/apps/web/src/features/sessions/trace/TraceView.tsx
new file mode 100644
index 0000000..d304d81
--- /dev/null
+++ b/apps/web/src/features/sessions/trace/TraceView.tsx
@@ -0,0 +1,487 @@
+import {
+  Bot,
+  Clock3,
+  FileJson,
+  Search,
+  Settings2,
+  UserRound,
+  Wrench,
+  X,
+} from "lucide-react";
+import {
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import type {
+  AgentSession,
+  AgentTurn,
+  SessionItem,
+} from "@agents-core-web/agents-client";
+
+import { MessageMarkdown } from "../../../components/MessageMarkdown";
+import { StatusIcon, type StatusKind } from "../../../components/StatusIcon";
+import { ApplyPatchDiffViewer } from "../items/ApplyPatchDiffViewer";
+import { parseParsarApplyPatch } from "../items/apply-patch";
+import type { SessionDetailState } from "../SessionsView";
+import type { TurnTimelineLoadState } from "../turns/TurnTimeline";
+import {
+  buildTraceModel,
+  filterTraceModel,
+  type TraceGroup,
+  type TraceRow,
+  type TraceValue,
+} from "./trace-model";
+
+interface TraceViewProps {
+  id: string;
+  labelledBy: string;
+  session: AgentSession;
+  turns: AgentTurn[];
+  items: SessionItem[];
+  detailState: SessionDetailState;
+  detailError: string | null;
+  turnState: TurnTimelineLoadState;
+  turnError: string | null;
+}
+
+type DetailTab = "summary" | "preview" | "payload" | "result" | "schema" | "timing" | "raw";
+
+interface DetailTabDefinition {
+  id: DetailTab;
+  label: string;
+}
+
+function pretty(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value === undefined) return "Unavailable";
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return "Unavailable";
+  }
+}
+
+function formatDuration(milliseconds: number): string {
+  const value = Math.max(0, milliseconds);
+  if (value < 1_000) return `${value.toLocaleString("en-US")} ms`;
+  const seconds = value / 1_000;
+  if (seconds < 60) return `${seconds.toFixed(seconds < 10 && !Number.isInteger(seconds) ? 1 : 0)} s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainder = Math.floor(seconds % 60);
+  return `${minutes}m ${String(remainder).padStart(2, "0")}s`;
+}
+
+function formatTimestamp(seconds: number | null | undefined): string {
+  if (typeof seconds !== "number" || !Number.isSafeInteger(seconds) || seconds < 0) return "Unknown";
+  const timestamp = new Date(seconds * 1_000);
+  return Number.isNaN(timestamp.getTime())
+    ? "Unknown"
+    : `${timestamp.toISOString().slice(0, 19).replace("T", " ")} UTC`;
+}
+
+function itemStatusKind(status: TraceRow["status"]): StatusKind {
+  if (status === "in_progress") return "running";
+  if (status === "failed") return "failed";
+  if (status === "incomplete") return "interrupted";
+  return status === "completed" ? "completed" : "queued";
+}
+
+function turnStatusKind(status: unknown): StatusKind | null {
+  if (status === "in_progress" || status === "waiting") return "running";
+  if (status === "failed") return "failed";
+  if (status === "cancelled") return "cancelled";
+  if (status === "completed") return "completed";
+  return status === "queued" ? "queued" : null;
+}
+
+function titleCase(value: unknown): string {
+  return typeof value === "string"
+    ? value.replaceAll("_", " ").replace(/^./, (first) => first.toUpperCase())
+    : "Unknown";
+}
+
+function rowIcon(row: TraceRow): ReactNode {
+  if (row.kind === "configured_instructions") return <Settings2 size={14} strokeWidth={1.5} aria-hidden="true" />;
+  if (row.kind === "user_message") return <UserRound size={14} strokeWidth={1.5} aria-hidden="true" />;
+  if (row.kind === "assistant_message") return <Bot size={14} strokeWidth={1.5} aria-hidden="true" />;
+  if (row.kind === "tool_call" || row.kind === "tool_result") return <Wrench size={14} strokeWidth={1.5} aria-hidden="true" />;
+  return <FileJson size={14} strokeWidth={1.5} aria-hidden="true" />;
+}
+
+function valueLabel<T>(value: TraceValue<T>, format: (available: T) => string = String): string {
+  if (value.state === "available" && value.value !== null) return format(value.value);
+  return value.state === "unknown" ? "Unknown" : "Unavailable";
+}
+
+function rowExcerpt(row: TraceRow): string {
+  if (row.text.state === "available" && row.text.value) return row.text.value;
+  if (row.tool?.payload.state === "available") return "Payload available";
+  if (row.tool?.result.state === "available") return "Result available";
+  return row.text.state === "unknown" ? "Unknown" : "No preview available";
+}
+
+function applyPatchItem(row: TraceRow): SessionItem | null {
+  if (row.kind !== "tool_call" || row.tool?.type !== "function_call") return null;
+  return row.sourceItems.find((candidate) => candidate.type === "function_call" && candidate.name === "apply_patch") ?? null;
+}
+
+function traceTabs(row: TraceRow): DetailTabDefinition[] {
+  const tabs: DetailTabDefinition[] = [{ id: "summary", label: "Summary" }];
+  if (row.text.state === "available" || applyPatchItem(row)) tabs.push({ id: "preview", label: "Preview" });
+  if (row.tool) {
+    tabs.push({ id: "payload", label: "Payload" }, { id: "result", label: "Result" });
+    if (row.tool.configuredFunction.state === "available") tabs.push({ id: "schema", label: "Schema" });
+  }
+  if (row.kind !== "configured_instructions") tabs.push({ id: "timing", label: "Timing" });
+  tabs.push({ id: "raw", label: "Raw" });
+  return tabs;
+}
+
+function onTabKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+  const tabs = Array.from(event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>("[role=tab]") ?? []);
+  const index = tabs.indexOf(event.currentTarget);
+  if (index < 0) return;
+  const target = event.key === "ArrowRight"
+    ? tabs[(index + 1) % tabs.length]
+    : event.key === "ArrowLeft"
+      ? tabs[(index - 1 + tabs.length) % tabs.length]
+      : event.key === "Home"
+        ? tabs[0]
+        : event.key === "End"
+          ? tabs[tabs.length - 1]
+          : null;
+  if (!target) return;
+  event.preventDefault();
+  target.click();
+  target.focus();
+}
+
+function ValuePanel({ value }: { value: TraceValue<unknown> }) {
+  if (value.state !== "available") {
+    return <p className="trace-detail-unavailable">{value.state === "unknown" ? "Unknown" : "Unavailable from the current Core contract."}</p>;
+  }
+  return <pre className="trace-detail-code">{pretty(value.value)}</pre>;
+}
+
+function TraceSummaryPanel({ row, group, session }: { row: TraceRow; group: TraceGroup; session: AgentSession }) {
+  const rawUsage = group.turn?.usage as unknown;
+  const turnUsage = rawUsage !== null && typeof rawUsage === "object"
+    && Number.isSafeInteger((rawUsage as Record<string, unknown>).input_tokens)
+    && Number.isSafeInteger((rawUsage as Record<string, unknown>).output_tokens)
+    && Number.isSafeInteger((rawUsage as Record<string, unknown>).total_tokens)
+    ? rawUsage as AgentTurn["usage"]
+    : null;
+  const configuredModel = typeof session.agent.model === "string" ? session.agent.model : "Unknown";
+  return (
+    <div className="trace-detail-summary">
+      <dl>
+        <div><dt>Source</dt><dd>{row.kind === "configured_instructions" ? "Agent configuration snapshot" : "Durable Item snapshot"}</dd></div>
+        <div><dt>Status</dt><dd>{row.status ? titleCase(row.status) : "Not applicable"}</dd></div>
+        <div><dt>Group</dt><dd>{group.title}</dd></div>
+        <div><dt>Configured model</dt><dd><code>{configuredModel}</code></dd></div>
+        <div><dt>Item timing</dt><dd>Unavailable</dd></div>
+        {row.durationMs.state === "available" && row.durationMs.value !== null ? (
+          <div><dt>Tool-reported duration</dt><dd>{formatDuration(row.durationMs.value)}</dd></div>
+        ) : null}
+      </dl>
+      {turnUsage ? (
+        <section className="trace-detail-usage" aria-label="Turn-scoped token usage">
+          <strong>Turn-scoped tokens</strong>
+          <dl>
+            <div><dt>Input</dt><dd>{turnUsage.input_tokens.toLocaleString("en-US")}</dd></div>
+            <div><dt>Output</dt><dd>{turnUsage.output_tokens.toLocaleString("en-US")}</dd></div>
+            <div><dt>Total</dt><dd>{turnUsage.total_tokens.toLocaleString("en-US")}</dd></div>
+          </dl>
+        </section>
+      ) : null}
+      <p className="trace-detail-boundary">This view reports Core resource scope. It does not infer a model span, provider, request step, or subagent relationship.</p>
+    </div>
+  );
+}
+
+function TracePreviewPanel({ row }: { row: TraceRow }) {
+  if (applyPatchItem(row)) return <ApplyPatchPreview row={row} />;
+  if (row.text.state !== "available" || row.text.value === null) return <p className="trace-detail-unavailable">Unavailable from the current Core contract.</p>;
+  if (row.kind === "assistant_message") return <div className="trace-detail-preview"><MessageMarkdown content={row.text.value} /></div>;
+  return <pre className="trace-detail-text">{row.text.value}</pre>;
+}
+
+function TraceTimingPanel({ row, group }: { row: TraceRow; group: TraceGroup }) {
+  return (
+    <div className="trace-detail-timing">
+      <dl>
+        <div><dt>Turn started</dt><dd>{formatTimestamp(group.turn?.started_at)}</dd></div>
+        <div><dt>Turn completed</dt><dd>{formatTimestamp(group.turn?.completed_at)}</dd></div>
+        <div><dt>Turn wall clock</dt><dd>{valueLabel(group.turnWallClockDurationMs, formatDuration)}</dd></div>
+        <div><dt>Item started</dt><dd>Unavailable</dd></div>
+        <div><dt>Item completed</dt><dd>Unavailable</dd></div>
+        <div><dt>Tool-reported duration</dt><dd>{valueLabel(row.durationMs, formatDuration)}</dd></div>
+      </dl>
+      <p>Turn timestamps are server resources. Tool duration has no public absolute start, so it is not positioned on a time-scaled waterfall.</p>
+    </div>
+  );
+}
+
+function ApplyPatchPreview({ row }: { row: TraceRow }) {
+  const item = applyPatchItem(row);
+  const patch = item ? parseParsarApplyPatch(item.arguments) : null;
+  if (!item || !patch) return null;
+  const result = row.tool?.result.state === "available" ? row.tool.result.value : undefined;
+  const effectiveItem = row.status ? { ...item, status: row.status } : item;
+  return <ApplyPatchDiffViewer item={effectiveItem} patch={patch} result={result} />;
+}
+
+function TraceDetailPanel({
+  row,
+  group,
+  session,
+  activeTab,
+}: {
+  row: TraceRow;
+  group: TraceGroup;
+  session: AgentSession;
+  activeTab: DetailTab;
+}) {
+  if (activeTab === "summary") return <TraceSummaryPanel row={row} group={group} session={session} />;
+  if (activeTab === "preview") return <TracePreviewPanel row={row} />;
+  if (activeTab === "payload") return <ValuePanel value={row.tool?.payload ?? { state: "unavailable", value: null }} />;
+  if (activeTab === "result") return <ValuePanel value={row.tool?.result ?? { state: "unavailable", value: null }} />;
+  if (activeTab === "schema") return <ValuePanel value={row.tool?.configuredFunction ?? { state: "unavailable", value: null }} />;
+  if (activeTab === "timing") return <TraceTimingPanel row={row} group={group} />;
+  return <pre className="trace-detail-code">{pretty(row.safeRaw.length === 1 ? row.safeRaw[0] : row.safeRaw)}</pre>;
+}
+
+export function TraceView({
+  id,
+  labelledBy,
+  session,
+  turns,
+  items,
+  detailState,
+  detailError,
+  turnState,
+  turnError,
+}: TraceViewProps) {
+  const [query, setQuery] = useState("");
+  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<DetailTab>("summary");
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const lastTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const model = useMemo(() => buildTraceModel({ turns, items, agent: session.agent }), [items, session.agent, turns]);
+  const filtered = useMemo(() => filterTraceModel(model, query), [model, query]);
+  const selectedRow = selectedRowId ? model.rows.find((row) => row.id === selectedRowId) ?? null : null;
+  const selectedGroup = selectedRow ? model.groups.find((group) => group.id === selectedRow.groupId) ?? null : null;
+  const tabs = selectedRow ? traceTabs(selectedRow) : [];
+
+  useEffect(() => {
+    setQuery("");
+    setSelectedRowId(null);
+    setActiveTab("summary");
+  }, [session.id]);
+
+  useEffect(() => {
+    if (!selectedRow) return;
+    setActiveTab((current) => traceTabs(selectedRow).some((tab) => tab.id === current) ? current : "summary");
+  }, [selectedRow]);
+
+  useEffect(() => {
+    if (!selectedRow) return;
+    const frame = window.requestAnimationFrame(() => closeButtonRef.current?.focus({ preventScroll: true }));
+    return () => window.cancelAnimationFrame(frame);
+  }, [selectedRow?.id]);
+
+  const selectRow = (row: TraceRow, trigger: HTMLButtonElement) => {
+    lastTriggerRef.current = trigger;
+    setSelectedRowId(row.id);
+    setActiveTab("summary");
+  };
+
+  const closeDetails = () => {
+    setSelectedRowId(null);
+    const trigger = lastTriggerRef.current;
+    window.requestAnimationFrame(() => {
+      const fallback = searchInputRef.current?.isConnected
+        ? searchInputRef.current
+        : document.getElementById(labelledBy);
+      const target = trigger?.isConnected ? trigger : fallback;
+      target?.focus({ preventScroll: true });
+    });
+  };
+
+  const orderedRows = filtered.rows.filter((row) => row.kind !== "configured_instructions");
+  const sequenceColumns = Math.max(orderedRows.length, 1);
+  const sequenceStyle = {
+    gridTemplateColumns: `50px repeat(${sequenceColumns}, minmax(18px, 1fr))`,
+    minWidth: `${50 + sequenceColumns * 20}px`,
+  } satisfies CSSProperties;
+  const detailPanelId = `${id}-detail-panel`;
+  const detailContentId = `${id}-detail-content`;
+  const activeDetailTabId = `${id}-detail-tab-${activeTab}`;
+  const knownTime = model.summary.turnsWithKnownWallClock
+    ? `${formatDuration(model.summary.knownTurnWallClockDurationMs)}${model.summary.turnsWithUnknownWallClock ? ` · ${model.summary.turnsWithUnknownWallClock} unknown` : ""}`
+    : model.summary.turnCount ? "Unknown" : "Unavailable";
+
+  return (
+    <section
+      className={`trace-workbench ${selectedRow ? "has-detail" : ""}`}
+      id={id}
+      role="tabpanel"
+      aria-labelledby={labelledBy}
+      onKeyDown={(event) => {
+        if (event.key === "Escape" && selectedRow) {
+          event.stopPropagation();
+          closeDetails();
+        }
+      }}
+    >
+      <header className="trace-toolbar">
+        <dl className="trace-metrics">
+          <div><dt>Known Turn time</dt><dd>{knownTime}</dd></div>
+          <div><dt>Turns</dt><dd>{model.summary.turnCount}</dd></div>
+          <div><dt>Tool calls</dt><dd>{model.summary.toolCallCount}</dd></div>
+        </dl>
+        <label className="trace-search">
+          <Search size={14} strokeWidth={1.5} aria-hidden="true" />
+          <span className="sr-only">Search trace</span>
+          <input ref={searchInputRef} type="search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search trace" />
+        </label>
+      </header>
+
+      <section className="trace-order-overview" aria-label="Durable execution order">
+        <header>
+          <strong>Durable order</strong>
+          <span>Equal-width sequence · not time-scaled</span>
+        </header>
+        <div className="trace-order-scroll">
+          <div className="trace-order-grid" style={sequenceStyle}>
+            {(["input", "model", "tools"] as const).map((lane, laneIndex) => (
+              <Fragment key={lane}>
+                <span style={{ gridColumn: 1, gridRow: laneIndex + 1 }}>{lane === "tools" ? "Tools" : lane.charAt(0).toUpperCase() + lane.slice(1)}</span>
+                {orderedRows.map((row, index) => row.lane === lane ? (
+                <button
+                  type="button"
+                  className={`trace-order-item trace-order-item-${lane}`}
+                  style={{ gridColumn: index + 2, gridRow: laneIndex + 1 }}
+                  aria-label={`Open ${row.label.toLowerCase()} trace item: ${row.title}`}
+                  aria-pressed={selectedRow?.id === row.id}
+                  aria-expanded={selectedRow?.id === row.id}
+                  aria-controls={detailPanelId}
+                  title={`${row.label} · ${row.title}`}
+                  key={row.id}
+                  onClick={(event) => selectRow(row, event.currentTarget)}
+                />
+                ) : null)}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <div className="trace-contract-note" role="note">
+        <Clock3 size={14} strokeWidth={1.5} aria-hidden="true" />
+        <span>Per-item timing is unavailable. The overview preserves Core order and does not imply model, tool, or first-token timing.</span>
+      </div>
+
+      {turnState === "loading" || detailState === "loading" ? (
+        <p className="trace-load-state" role="status">Loading complete durable Turn and Item history…</p>
+      ) : null}
+      {turnState === "failed" ? (
+        <div className="trace-load-error" role="alert"><strong>Turn history is incomplete</strong><span>{turnError || "The Core Turn read failed."}</span></div>
+      ) : null}
+      {detailState === "failed" ? (
+        <div className="trace-load-error" role="alert"><strong>Item history is incomplete</strong><span>{detailError || "The Core Item read failed."}</span></div>
+      ) : null}
+
+      <div className="trace-workspace">
+        <div className="trace-ledger" aria-label="Trace items">
+          {filtered.groups.length ? filtered.groups.map((group) => {
+            const groupStatusKind = group.turn ? turnStatusKind(group.turn.status) : null;
+            return (
+            <section className={`trace-group trace-group-${group.kind}`} key={group.id} aria-labelledby={`${group.id}-title`}>
+              <header className="trace-group-header">
+                <strong id={`${group.id}-title`}>{group.title}</strong>
+                {group.turn && groupStatusKind ? <StatusIcon status={groupStatusKind} title={`Turn status: ${titleCase(group.turn.status)}`} /> : null}
+                {group.turn ? <span>{titleCase(group.turn.status)}</span> : null}
+                <span className="trace-group-duration">{valueLabel(group.turnWallClockDurationMs, formatDuration)}</span>
+              </header>
+              {group.rows.length ? (
+                <ol>
+                  {group.rows.map((row) => (
+                    <li key={row.id}>
+                      <button
+                        type="button"
+                        className={`trace-ledger-row trace-ledger-row-${row.lane}`}
+                        aria-pressed={selectedRow?.id === row.id}
+                        aria-expanded={selectedRow?.id === row.id}
+                        aria-controls={detailPanelId}
+                        onClick={(event) => selectRow(row, event.currentTarget)}
+                      >
+                        <span className={`trace-row-icon trace-row-icon-${row.lane}`}>{rowIcon(row)}</span>
+                        <span className="trace-row-label">{row.label}</span>
+                        <span className="trace-row-copy">
+                          <strong>{row.title}</strong>
+                          <small>{rowExcerpt(row)}</small>
+                        </span>
+                        {row.status ? <StatusIcon status={itemStatusKind(row.status)} title={`Item status: ${titleCase(row.status)}`} /> : null}
+                        <span className="trace-row-duration">{valueLabel(row.durationMs, formatDuration)}</span>
+                      </button>
+                    </li>
+                  ))}
+                </ol>
+              ) : <p className="trace-group-empty">No durable Items reported for this Turn.</p>}
+            </section>
+            );
+          }) : (
+            <div className="trace-empty"><Search size={18} strokeWidth={1.5} aria-hidden="true" /><p>No trace rows match this search.</p></div>
+          )}
+        </div>
+
+        {selectedRow && selectedGroup ? (
+          <aside className="trace-detail" id={detailPanelId} aria-label="Trace item details">
+            <header className="trace-detail-header">
+              <span className={`trace-row-label trace-row-label-${selectedRow.lane}`}>{selectedRow.label}</span>
+              <div><strong>{selectedRow.title}</strong><small>{selectedGroup.title}</small></div>
+              <button ref={closeButtonRef} className="icon-button ghost" type="button" aria-label="Close trace details" onClick={closeDetails}>
+                <X size={16} strokeWidth={1.5} aria-hidden="true" />
+              </button>
+            </header>
+            <div className="trace-detail-tabs" role="tablist" aria-label="Trace detail view">
+              {tabs.map((tab) => (
+                <button
+                  id={`${id}-detail-tab-${tab.id}`}
+                  type="button"
+                  role="tab"
+                  aria-controls={detailContentId}
+                  aria-selected={activeTab === tab.id}
+                  tabIndex={activeTab === tab.id ? 0 : -1}
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  onKeyDown={onTabKeyDown}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+            <div
+              className="trace-detail-content"
+              id={detailContentId}
+              role="tabpanel"
+              aria-labelledby={activeDetailTabId}
+              tabIndex={0}
+            >
+              <TraceDetailPanel row={selectedRow} group={selectedGroup} session={session} activeTab={activeTab} />
+            </div>
+          </aside>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/features/sessions/trace/trace-model.test.ts b/apps/web/src/features/sessions/trace/trace-model.test.ts
new file mode 100644
index 0000000..1da1357
--- /dev/null
+++ b/apps/web/src/features/sessions/trace/trace-model.test.ts
@@ -0,0 +1,423 @@
+import { describe, expect, it } from "vitest";
+
+import type { AgentTurn, SessionItem } from "@agents-core-web/agents-client";
+
+import { buildTraceModel, filterTraceModel, type TraceAgentSnapshot } from "./trace-model";
+
+function turn(id: string, overrides: Partial<AgentTurn> = {}): AgentTurn {
+  return {
+    id,
+    agent_id: "agent-1",
+    session_id: "session-1",
+    object: "agent.session.turn",
+    status: "completed",
+    created_at: 1,
+    started_at: null,
+    completed_at: null,
+    error: null,
+    usage: null,
+    ...overrides,
+  };
+}
+
+const agent: TraceAgentSnapshot = {
+  instructions: "Answer with source-grounded evidence.",
+  tools: [{
+    type: "function",
+    name: "lookup",
+    description: "Look up a record",
+    parameters: { type: "object", properties: { query: { type: "string" } } },
+  }],
+};
+
+describe("trace model grouping", () => {
+  it("uses complete ascending Turn order while preserving Item order inside each Turn", () => {
+    const items: SessionItem[] = [
+      { id: "two-user", turn_id: "two", type: "message", status: "completed", role: "user", content: [{ type: "input_text", text: "second turn" }] },
+      { id: "one-user", turn_id: "one", type: "message", status: "completed", role: "user", content: [{ type: "input_text", text: "first question" }] },
+      { id: "two-assistant", turn_id: "two", type: "message", status: "completed", role: "assistant", content: [{ type: "output_text", text: "second answer" }] },
+      { id: "one-assistant", turn_id: "one", type: "message", status: "completed", role: "assistant", phase: "final_answer", content: [{ type: "output_text", text: "first answer" }] },
+    ];
+
+    const model = buildTraceModel({ turns: [turn("one"), turn("two"), turn("empty")], items, agent });
+
+    expect(model.groups.map((group) => [group.kind, group.title])).toEqual([
+      ["configuration", "Agent configuration"],
+      ["turn", "Turn 1"],
+      ["turn", "Turn 2"],
+      ["turn", "Turn 3"],
+    ]);
+    expect(model.groups[1]?.rows.map((row) => row.sourceItems[0]?.id)).toEqual(["one-user", "one-assistant"]);
+    expect(model.groups[2]?.rows.map((row) => row.sourceItems[0]?.id)).toEqual(["two-user", "two-assistant"]);
+    expect(model.groups[3]?.rows).toEqual([]);
+    expect(model.groups[0]?.rows[0]).toMatchObject({
+      kind: "configured_instructions",
+      label: "SYSTEM",
+      text: { state: "available", value: "Answer with source-grounded evidence." },
+    });
+  });
+
+  it("appends orphan groups in first-observed order without dropping unknown Items", () => {
+    const future = {
+      id: "future",
+      turn_id: "missing-b",
+      type: "future_protocol_item",
+      status: "completed",
+      future_private_field: "must not enter safe Raw",
+      output: { visible: true },
+    } as unknown as SessionItem;
+    const items: SessionItem[] = [
+      future,
+      { id: "known", turn_id: "known", type: "message", status: "completed", role: "user", content: [] },
+      { id: "orphan-a", turn_id: "missing-a", type: "command_execution", status: "failed", command: "false" },
+      { id: "orphan-b", turn_id: "missing-b", type: "message", status: "completed", role: "assistant", content: [] },
+    ];
+
+    const model = buildTraceModel({ turns: [turn("known")], items, agent });
+    const orphans = model.groups.filter((group) => group.kind === "orphan");
+
+    expect(orphans.map((group) => group.id)).toEqual(["orphan:missing-b", "orphan:missing-a"]);
+    expect(orphans[0]?.rows.map((row) => row.sourceItems[0]?.id)).toEqual(["future", "orphan-b"]);
+    expect(orphans[0]?.rows[0]).toMatchObject({ kind: "unknown_item", label: "ITEM" });
+    expect(orphans[0]?.rows[0]?.safeRaw[0]).toEqual({
+      type: "future_protocol_item",
+      status: "completed",
+      output: { visible: true },
+    });
+    expect(orphans[0]?.rows[0]?.sourceItems[0]).toBe(future);
+    expect(orphans[0]?.turnWallClockDurationMs.state).toBe("unknown");
+  });
+});
+
+describe("function call correlation", () => {
+  it("links an unambiguous call/output pair by call_id and retains both original snapshots", () => {
+    const call: SessionItem = {
+      id: "call",
+      turn_id: "one",
+      type: "function_call",
+      status: "in_progress",
+      call_id: "call-1",
+      name: "lookup",
+      arguments: { query: "alpha" },
+    };
+    const output: SessionItem = {
+      id: "output",
+      turn_id: "one",
+      type: "function_call_output",
+      status: "completed",
+      call_id: "call-1",
+      output: { match: "Alpha" },
+      duration_ms: 42,
+    };
+    const model = buildTraceModel({ turns: [turn("one")], items: [call, output], agent });
+    const row = model.groups[1]?.rows[0];
+
+    expect(model.groups[1]?.rows).toHaveLength(1);
+    expect(row).toMatchObject({
+      kind: "tool_call",
+      status: "completed",
+      durationMs: { state: "available", value: 42 },
+      tool: {
+        payload: { state: "available", value: { query: "alpha" } },
+        result: {
+          state: "available",
+          value: { output: { match: "Alpha" }, duration_ms: 42 },
+        },
+        configuredFunction: {
+          state: "available",
+          value: { name: "lookup", description: "Look up a record" },
+        },
+      },
+    });
+    expect(row?.sourceItems).toEqual([call, output]);
+    expect(row?.safeRaw).toHaveLength(2);
+    expect(row?.safeRaw[0]).not.toHaveProperty("call_id");
+    expect(row?.safeRaw[1]).not.toHaveProperty("id");
+  });
+
+  it("does not correlate across Turns or guess among duplicate calls", () => {
+    const items: SessionItem[] = [
+      { id: "call-a", turn_id: "one", type: "function_call", status: "completed", call_id: "same", name: "lookup", arguments: null },
+      { id: "call-b", turn_id: "one", type: "function_call", status: "completed", call_id: "same", name: "lookup", arguments: null },
+      { id: "output-a", turn_id: "one", type: "function_call_output", status: "completed", call_id: "same", output: "ambiguous" },
+      { id: "output-other", turn_id: "two", type: "function_call_output", status: "completed", call_id: "same", output: "other turn" },
+    ];
+    const model = buildTraceModel({ turns: [turn("one"), turn("two")], items, agent });
+
+    expect(model.groups[1]?.rows).toHaveLength(3);
+    expect(model.groups[1]?.rows.map((row) => row.sourceItems)).toEqual(items.slice(0, 3).map((item) => [item]));
+    expect(model.groups[2]?.rows).toHaveLength(1);
+    expect(model.summary.toolCallCount).toBe(2);
+  });
+
+  it("does not infer a correlation when an output precedes its call", () => {
+    const output: SessionItem = {
+      id: "output-first",
+      turn_id: "one",
+      type: "function_call_output",
+      status: "completed",
+      call_id: "late-call",
+      output: "durable result",
+    };
+    const call: SessionItem = {
+      id: "call-later",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      call_id: "late-call",
+      name: "lookup",
+      arguments: null,
+    };
+
+    const rows = buildTraceModel({ turns: [turn("one")], items: [output, call], agent }).groups[1]?.rows;
+
+    expect(rows).toHaveLength(2);
+    expect(rows?.map((row) => row.sourceItems)).toEqual([[output], [call]]);
+    expect(rows?.map((row) => row.safeRaw[0]?.type)).toEqual(["function_call_output", "function_call"]);
+  });
+
+  it("does not infer a correlation when one call_id has multiple outputs", () => {
+    const call: SessionItem = {
+      id: "call",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      call_id: "ambiguous-results",
+      name: "lookup",
+      arguments: null,
+    };
+    const firstOutput: SessionItem = {
+      id: "output-one",
+      turn_id: "one",
+      type: "function_call_output",
+      status: "completed",
+      call_id: "ambiguous-results",
+      output: "first",
+    };
+    const secondOutput: SessionItem = {
+      id: "output-two",
+      turn_id: "one",
+      type: "function_call_output",
+      status: "failed",
+      call_id: "ambiguous-results",
+      output: "second",
+    };
+
+    const rows = buildTraceModel({
+      turns: [turn("one")],
+      items: [call, firstOutput, secondOutput],
+      agent,
+    }).groups[1]?.rows;
+
+    expect(rows).toHaveLength(3);
+    expect(rows?.map((row) => row.sourceItems)).toEqual([[call], [firstOutput], [secondOutput]]);
+  });
+
+  it("only attaches a strictly valid and uniquely named configured function", () => {
+    const call: SessionItem = {
+      id: "call",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      name: "lookup",
+      call_id: "lookup-call",
+      arguments: null,
+    };
+    const duplicateTools: TraceAgentSnapshot = {
+      instructions: null,
+      tools: [
+        agent.tools[0],
+        { ...agent.tools[0] as Record<string, unknown> },
+        { type: "function", name: "unsafe", description: "", parameters: {}, secret: true },
+      ],
+    };
+    const model = buildTraceModel({ turns: [turn("one")], items: [call], agent: duplicateTools });
+
+    expect(model.groups[0]?.rows[0]?.text).toEqual({ state: "unavailable", value: null });
+    expect(model.groups[1]?.rows[0]?.tool?.payload).toEqual({ state: "available", value: null });
+    expect(model.groups[1]?.rows[0]?.tool?.configuredFunction).toEqual({ state: "unavailable", value: null });
+  });
+});
+
+describe("trace summary and search", () => {
+  it("sums only valid per-Turn wall clocks and reports unknown durations separately", () => {
+    const turns = [
+      turn("one", { started_at: 100, completed_at: 102 }),
+      turn("two", { started_at: 200, completed_at: 203 }),
+      turn("missing", { started_at: null, completed_at: 999 }),
+      turn("backwards", { started_at: 10, completed_at: 9 }),
+    ];
+    const items: SessionItem[] = [
+      { id: "command", turn_id: "one", type: "command_execution", status: "completed", command: "pwd", duration_ms: 99_999 },
+      { id: "search", turn_id: "two", type: "web_search_call", status: "completed", action: { type: "search", query: "evidence" } },
+      { id: "result", turn_id: "two", type: "function_call_output", status: "completed", output: "not a call" },
+    ];
+
+    const summary = buildTraceModel({ turns, items, agent }).summary;
+
+    expect(summary).toEqual({
+      turnCount: 4,
+      toolCallCount: 2,
+      knownTurnWallClockDurationMs: 5_000,
+      turnsWithKnownWallClock: 2,
+      turnsWithUnknownWallClock: 2,
+    });
+  });
+
+  it("filters locally across instructions, message text, payload, and result without mutating the model", () => {
+    const items: SessionItem[] = [
+      { id: "user", turn_id: "one", type: "message", status: "completed", role: "user", content: [{ type: "input_text", text: "Find customer Alpha" }] },
+      { id: "call", turn_id: "one", type: "function_call", status: "completed", call_id: "lookup-1", name: "lookup", arguments: { query: "customer-alpha" } },
+      { id: "output", turn_id: "one", type: "function_call_output", status: "completed", call_id: "lookup-1", output: { account: "A-42" } },
+    ];
+    const model = buildTraceModel({ turns: [turn("one")], items, agent });
+
+    expect(filterTraceModel(model, "  ")).toBe(model);
+    expect(filterTraceModel(model, "source-grounded").rows.map((row) => row.kind)).toEqual(["configured_instructions"]);
+    expect(filterTraceModel(model, "find customer alpha").rows.map((row) => row.kind)).toEqual(["user_message"]);
+    expect(filterTraceModel(model, "customer-alpha A-42").rows.map((row) => row.kind)).toEqual(["tool_call"]);
+    expect(filterTraceModel(model, "not-present").groups).toEqual([]);
+    expect(model.groups[1]?.rows).toHaveLength(2);
+    expect(filterTraceModel(model, "A-42").summary).toBe(model.summary);
+  });
+
+  it("marks missing snapshot and Item fields unknown or unavailable without inventing values", () => {
+    const item = {
+      id: "unknown-message",
+      turn_id: "one",
+      type: "message",
+      status: "completed",
+      content: [{ type: "input_image", image_url: "https://example.invalid/image" }],
+    } as SessionItem;
+    const model = buildTraceModel({ turns: [turn("one")], items: [item], agent: null });
+
+    expect(model.groups[0]?.rows[0]?.text).toEqual({ state: "unknown", value: null });
+    expect(model.groups[1]?.turnWallClockDurationMs).toEqual({ state: "unknown", value: null });
+    expect(model.groups[1]?.rows[0]).toMatchObject({
+      kind: "unknown_item",
+      lane: "unknown",
+      text: { state: "unavailable", value: null },
+      durationMs: { state: "unavailable", value: null },
+    });
+  });
+
+  it("degrades malformed known variants without throwing or deriving a title from arguments", () => {
+    const malformedSearch = {
+      id: "search",
+      turn_id: "one",
+      type: "web_search_call",
+      status: "completed",
+      action: { type: "search", queries: { secret: "must-not-be-a-title" } },
+    } as unknown as SessionItem;
+    const malformedFunction = {
+      id: "function",
+      turn_id: "one",
+      type: "function_call",
+      status: { unexpected: true },
+      call_id: "call",
+      name: { unexpected: true },
+      arguments: { api_key: "must-not-be-a-title" },
+    } as unknown as SessionItem;
+    const malformedType = {
+      id: "bad-type",
+      turn_id: "one",
+      type: { toString: null },
+      status: "completed",
+    } as unknown as SessionItem;
+
+    const model = buildTraceModel({
+      turns: [turn("one")],
+      items: [malformedSearch, malformedFunction, malformedType],
+      agent,
+    });
+    const rows = model.groups[1]?.rows;
+
+    expect(rows).toHaveLength(3);
+    expect(rows?.map((row) => row.kind)).toEqual(["unknown_item", "unknown_item", "unknown_item"]);
+    expect(rows?.map((row) => row.title)).toEqual([
+      "Unsupported web_search_call Item",
+      "Unsupported function_call Item",
+      "Unsupported Item",
+    ]);
+    expect(rows?.[1]?.status).toBeNull();
+    expect(rows?.[1]?.title).not.toContain("must-not-be-a-title");
+    expect(model.summary.toolCallCount).toBe(0);
+  });
+
+  it("bounds each row search index while retaining early payload terms", () => {
+    const item: SessionItem = {
+      id: "large-call",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      call_id: "large",
+      name: "lookup",
+      arguments: { query: "needle", output: "x".repeat(100_000) },
+    };
+
+    const row = buildTraceModel({ turns: [turn("one")], items: [item], agent }).groups[1]?.rows[0];
+
+    expect(row?.searchText).toContain("needle");
+    expect(row?.searchText.length).toBeLessThan(17_000);
+  });
+
+  it("bounds search traversal depth without overflowing the call stack", () => {
+    let deeplyNested: unknown = "beyond-the-node-budget";
+    for (let depth = 0; depth < 10_000; depth += 1) deeplyNested = [deeplyNested];
+    const item: SessionItem = {
+      id: "deep-call",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      call_id: "deep",
+      name: "lookup",
+      arguments: deeplyNested,
+    };
+
+    expect(() => buildTraceModel({ turns: [turn("one")], items: [item], agent })).not.toThrow();
+  });
+
+  it("bounds search traversal breadth for very wide payloads", () => {
+    const wide: Record<string, unknown> = {};
+    for (let index = 0; index < 10_000; index += 1) wide[`field_${index}`] = index;
+    wide.last_unindexed_value = "outside-the-node-budget";
+    const item: SessionItem = {
+      id: "wide-call",
+      turn_id: "one",
+      type: "function_call",
+      status: "completed",
+      call_id: "wide",
+      name: "lookup",
+      arguments: wide,
+    };
+
+    const row = buildTraceModel({ turns: [turn("one")], items: [item], agent }).groups[1]?.rows[0];
+
+    expect(row?.searchText).not.toContain("outside-the-node-budget");
+    expect(row?.searchText.length).toBeLessThan(17_000);
+  });
+
+  it("keeps a selected row identity stable when an earlier durable Item is inserted", () => {
+    const existing: SessionItem = {
+      id: "existing",
+      turn_id: "one",
+      type: "message",
+      status: "completed",
+      role: "assistant",
+      content: [{ type: "output_text", text: "existing" }],
+    };
+    const inserted: SessionItem = {
+      id: "inserted",
+      turn_id: "one",
+      type: "message",
+      status: "completed",
+      role: "user",
+      content: [{ type: "input_text", text: "inserted" }],
+    };
+
+    const before = buildTraceModel({ turns: [turn("one")], items: [existing], agent }).groups[1]?.rows[0]?.id;
+    const after = buildTraceModel({ turns: [turn("one")], items: [inserted, existing], agent }).groups[1]?.rows[1]?.id;
+
+    expect(after).toBe(before);
+  });
+});
diff --git a/apps/web/src/features/sessions/trace/trace-model.ts b/apps/web/src/features/sessions/trace/trace-model.ts
new file mode 100644
index 0000000..7e2ba79
--- /dev/null
+++ b/apps/web/src/features/sessions/trace/trace-model.ts
@@ -0,0 +1,738 @@
+import type {
+  AgentSnapshot,
+  AgentTurn,
+  ItemStatus,
+  SessionItem,
+} from "@agents-core-web/agents-client";
+
+export type TraceValueState = "available" | "unavailable" | "unknown";
+
+export interface TraceValue<T> {
+  state: TraceValueState;
+  value: T | null;
+}
+
+export type TraceLane = "configuration" | "input" | "model" | "tools" | "unknown";
+export type TraceRowKind =
+  | "configured_instructions"
+  | "user_message"
+  | "assistant_message"
+  | "tool_call"
+  | "tool_result"
+  | "unknown_item";
+export type TraceRowLabel = "SYSTEM" | "USER" | "ASSISTANT" | "TOOL" | "ITEM";
+
+export interface TraceConfiguredFunctionTool {
+  type: "function";
+  name: string;
+  description: string;
+  parameters: Record<string, unknown>;
+  defer_loading?: boolean;
+}
+
+export interface TraceToolDetails {
+  type: string;
+  name: string | null;
+  payload: TraceValue<unknown>;
+  result: TraceValue<unknown>;
+  configuredFunction: TraceValue<TraceConfiguredFunctionTool>;
+}
+
+/**
+ * An allow-listed projection for the Raw tab. Durable identifiers used to join
+ * resources stay on sourceItems and are deliberately absent here. Values of
+ * public protocol fields remain verbatim; this is not recursive redaction.
+ */
+export type TraceSafeRaw = Readonly<Record<string, unknown>>;
+
+export interface TraceRow {
+  id: string;
+  groupId: string;
+  kind: TraceRowKind;
+  lane: TraceLane;
+  label: TraceRowLabel;
+  title: string;
+  text: TraceValue<string>;
+  status: ItemStatus | null;
+  durationMs: TraceValue<number>;
+  tool: TraceToolDetails | null;
+  safeRaw: readonly TraceSafeRaw[];
+  /** Original public Item snapshots, retained for specialised safe renderers. */
+  sourceItems: readonly SessionItem[];
+  searchText: string;
+}
+
+export type TraceGroupKind = "configuration" | "turn" | "orphan";
+
+export interface TraceGroup {
+  id: string;
+  kind: TraceGroupKind;
+  title: string;
+  turnIndex: number | null;
+  turn: AgentTurn | null;
+  turnWallClockDurationMs: TraceValue<number>;
+  rows: readonly TraceRow[];
+  searchText: string;
+}
+
+export interface TraceSummary {
+  turnCount: number;
+  toolCallCount: number;
+  knownTurnWallClockDurationMs: number;
+  turnsWithKnownWallClock: number;
+  turnsWithUnknownWallClock: number;
+}
+
+export interface TraceModel {
+  groups: readonly TraceGroup[];
+  rows: readonly TraceRow[];
+  summary: TraceSummary;
+}
+
+export type TraceAgentSnapshot = Pick<AgentSnapshot, "instructions" | "tools">;
+
+export interface BuildTraceModelInput {
+  turns: readonly AgentTurn[];
+  items: readonly SessionItem[];
+  agent: TraceAgentSnapshot | null;
+}
+
+const SAFE_ITEM_FIELDS = [
+  "type",
+  "status",
+  "role",
+  "phase",
+  "content",
+  "command",
+  "cwd",
+  "duration_ms",
+  "exit_code",
+  "name",
+  "server_label",
+  "arguments",
+  "output",
+  "error",
+  "action",
+] as const;
+
+const TOOL_CALL_TYPES = new Set<SessionItem["type"]>([
+  "command_execution",
+  "mcp_call",
+  "function_call",
+  "web_search_call",
+]);
+const ITEM_STATUSES = new Set<ItemStatus>(["in_progress", "completed", "failed", "incomplete"]);
+const MESSAGE_ROLES = new Set(["user", "assistant"]);
+const MESSAGE_PHASES = new Set(["commentary", "final_answer"]);
+const CONTENT_TYPES = new Set(["input_text", "output_text", "input_image"]);
+const WEB_SEARCH_ACTION_TYPES = new Set(["search", "open_page", "find_in_page", "other"]);
+const SEARCH_TEXT_LIMIT = 16_384;
+const SEARCH_NODE_LIMIT = 2_048;
+
+function available<T>(value: T): TraceValue<T> {
+  return { state: "available", value };
+}
+
+function unavailable<T>(): TraceValue<T> {
+  return { state: "unavailable", value: null };
+}
+
+function unknown<T>(): TraceValue<T> {
+  return { state: "unknown", value: null };
+}
+
+function hasOwn(value: object, key: PropertyKey): boolean {
+  return Object.prototype.hasOwnProperty.call(value, key);
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function isNonEmptyString(value: unknown): value is string {
+  return typeof value === "string" && value.length > 0;
+}
+
+function optionalNullableString(raw: Record<string, unknown>, key: string): boolean {
+  return !hasOwn(raw, key) || raw[key] === undefined || raw[key] === null || typeof raw[key] === "string";
+}
+
+function optionalSafeInteger(raw: Record<string, unknown>, key: string, nonNegative: boolean): boolean {
+  if (!hasOwn(raw, key) || raw[key] === undefined || raw[key] === null) return true;
+  const value = raw[key];
+  return typeof value === "number" && Number.isSafeInteger(value) && (!nonNegative || value >= 0);
+}
+
+function validContent(value: unknown): boolean {
+  if (!Array.isArray(value)) return false;
+  return value.every((candidate) => {
+    if (!isRecord(candidate) || !CONTENT_TYPES.has(candidate.type as string)) return false;
+    return optionalNullableString(candidate, "text")
+      && (!hasOwn(candidate, "image_url") || candidate.image_url === undefined || typeof candidate.image_url === "string");
+  });
+}
+
+function validWebSearchAction(value: unknown): boolean {
+  if (!isRecord(value) || !WEB_SEARCH_ACTION_TYPES.has(value.type as string)) return false;
+  if (
+    !optionalNullableString(value, "query")
+    || !optionalNullableString(value, "url")
+    || !optionalNullableString(value, "pattern")
+  ) return false;
+  return !hasOwn(value, "queries")
+    || value.queries === undefined
+    || (Array.isArray(value.queries) && value.queries.every((query) => typeof query === "string"));
+}
+
+function validatedItemStatus(item: SessionItem): ItemStatus | null {
+  const status = (item as unknown as Record<string, unknown>).status;
+  return typeof status === "string" && ITEM_STATUSES.has(status as ItemStatus) ? status as ItemStatus : null;
+}
+
+function validatedItemType(item: SessionItem): SessionItem["type"] | null {
+  const raw = item as unknown as Record<string, unknown>;
+  if (
+    !isNonEmptyString(raw.id)
+    || !isNonEmptyString(raw.turn_id)
+    || validatedItemStatus(item) === null
+  ) return null;
+
+  if (raw.type === "message") {
+    return MESSAGE_ROLES.has(raw.role as string)
+      && validContent(raw.content)
+      && (!hasOwn(raw, "phase") || raw.phase === undefined || MESSAGE_PHASES.has(raw.phase as string))
+      ? raw.type
+      : null;
+  }
+  if (raw.type === "command_execution") {
+    return isNonEmptyString(raw.command)
+      && optionalNullableString(raw, "cwd")
+      && optionalSafeInteger(raw, "duration_ms", true)
+      && optionalSafeInteger(raw, "exit_code", false)
+      ? raw.type
+      : null;
+  }
+  if (raw.type === "mcp_call") {
+    return isNonEmptyString(raw.server_label)
+      && isNonEmptyString(raw.name)
+      && hasOwn(raw, "arguments")
+      && optionalSafeInteger(raw, "duration_ms", true)
+      ? raw.type
+      : null;
+  }
+  if (raw.type === "function_call") {
+    return isNonEmptyString(raw.name)
+      && isNonEmptyString(raw.call_id)
+      && hasOwn(raw, "arguments")
+      && optionalSafeInteger(raw, "duration_ms", true)
+      ? raw.type
+      : null;
+  }
+  if (raw.type === "function_call_output") {
+    return isNonEmptyString(raw.call_id)
+      && (hasOwn(raw, "output") || hasOwn(raw, "error"))
+      && optionalNullableString(raw, "name")
+      && optionalSafeInteger(raw, "duration_ms", true)
+      ? raw.type
+      : null;
+  }
+  if (raw.type === "web_search_call") {
+    return validWebSearchAction(raw.action)
+      && optionalSafeInteger(raw, "duration_ms", true)
+      ? raw.type
+      : null;
+  }
+  return null;
+}
+
+function safeInteger(value: unknown): number | null {
+  return typeof value === "number" && Number.isSafeInteger(value) && value >= 0 ? value : null;
+}
+
+function turnDuration(turn: AgentTurn): TraceValue<number> {
+  const startedAt = safeInteger(turn.started_at);
+  const completedAt = safeInteger(turn.completed_at);
+  if (startedAt === null || completedAt === null || completedAt < startedAt) return unknown();
+  return available((completedAt - startedAt) * 1_000);
+}
+
+function safeItemProjection(item: SessionItem): TraceSafeRaw {
+  const raw = item as unknown as Record<string, unknown>;
+  const projected: Record<string, unknown> = {};
+  for (const field of SAFE_ITEM_FIELDS) {
+    if (hasOwn(raw, field)) projected[field] = raw[field];
+  }
+  return projected;
+}
+
+function makeSearchText(...values: unknown[]): string {
+  const parts: string[] = [];
+  let remaining = SEARCH_TEXT_LIMIT;
+  const seen = new WeakSet<object>();
+  const queue = [...values];
+  for (let cursor = 0; cursor < queue.length && cursor < SEARCH_NODE_LIMIT && remaining > 0; cursor += 1) {
+    const value = queue[cursor];
+    if (value === null || value === undefined) continue;
+    if (typeof value === "object") {
+      if (seen.has(value)) continue;
+      seen.add(value);
+      if (Array.isArray(value)) {
+        for (let index = 0; index < value.length && queue.length + 2 <= SEARCH_NODE_LIMIT; index += 1) {
+          queue.push(String(index), value[index]);
+        }
+      } else {
+        const record = value as Record<string, unknown>;
+        for (const key in record) {
+          if (!hasOwn(record, key)) continue;
+          if (queue.length + 2 > SEARCH_NODE_LIMIT) break;
+          queue.push(key, record[key]);
+        }
+      }
+      continue;
+    }
+    const rendered = typeof value === "string" ? value : String(value);
+    if (!rendered) continue;
+    const bounded = rendered.slice(0, remaining);
+    parts.push(bounded);
+    remaining -= bounded.length;
+  }
+  return parts.join("\n").toLocaleLowerCase();
+}
+
+function messageText(item: SessionItem): TraceValue<string> {
+  if (!Array.isArray(item.content)) return unavailable();
+  const text = item.content
+    .map((part) => typeof part?.text === "string" ? part.text : null)
+    .filter((part): part is string => part !== null)
+    .join("\n");
+  return text || item.content.some((part) => typeof part?.text === "string")
+    ? available(text)
+    : unavailable();
+}
+
+function hasOnlyKeys(value: Record<string, unknown>, allowed: ReadonlySet<string>): boolean {
+  return Object.keys(value).every((key) => allowed.has(key));
+}
+
+const FUNCTION_TOOL_FIELDS = new Set(["type", "name", "description", "parameters", "defer_loading"]);
+
+function canonicalFunctionTool(value: unknown): TraceConfiguredFunctionTool | null {
+  if (!isRecord(value) || !hasOnlyKeys(value, FUNCTION_TOOL_FIELDS)) return null;
+  if (
+    value.type !== "function"
+    || typeof value.name !== "string"
+    || !value.name.trim()
+    || typeof value.description !== "string"
+    || !isRecord(value.parameters)
+    || (value.defer_loading !== undefined && typeof value.defer_loading !== "boolean")
+  ) return null;
+  return {
+    type: "function",
+    name: value.name,
+    description: value.description,
+    parameters: value.parameters,
+    ...(value.defer_loading === undefined ? {} : { defer_loading: value.defer_loading }),
+  };
+}
+
+function configuredFunctions(agent: TraceAgentSnapshot | null): Map<string, TraceConfiguredFunctionTool | null> | null {
+  if (!agent || !Array.isArray(agent.tools)) return null;
+  const functions = new Map<string, TraceConfiguredFunctionTool | null>();
+  for (const candidate of agent.tools) {
+    const tool = canonicalFunctionTool(candidate);
+    if (!tool) continue;
+    functions.set(tool.name, functions.has(tool.name) ? null : tool);
+  }
+  return functions;
+}
+
+function configuredFunction(
+  functions: Map<string, TraceConfiguredFunctionTool | null> | null,
+  name: string | undefined,
+): TraceValue<TraceConfiguredFunctionTool> {
+  if (functions === null) return unknown();
+  if (!name || !functions.has(name)) return unavailable();
+  const match = functions.get(name);
+  return match ? available(match) : unavailable();
+}
+
+function durationFromItems(primary: SessionItem, results: readonly SessionItem[]): TraceValue<number> {
+  const candidates = results.length ? [...results].reverse() : [primary];
+  for (const candidate of candidates) {
+    if (!hasOwn(candidate, "duration_ms") || candidate.duration_ms === null || candidate.duration_ms === undefined) continue;
+    const duration = safeInteger(candidate.duration_ms);
+    return duration === null ? unknown() : available(duration);
+  }
+  return unavailable();
+}
+
+function payloadFor(item: SessionItem): TraceValue<unknown> {
+  if (item.type === "command_execution") {
+    const payload: Record<string, unknown> = {};
+    if (hasOwn(item, "command") && item.command !== undefined) payload.command = item.command;
+    if (hasOwn(item, "cwd") && item.cwd !== undefined) payload.cwd = item.cwd;
+    return Object.keys(payload).length ? available(payload) : unavailable();
+  }
+  if (item.type === "web_search_call") {
+    return hasOwn(item, "action") && item.action !== undefined ? available(item.action) : unavailable();
+  }
+  if (item.type === "function_call" || item.type === "mcp_call") {
+    return hasOwn(item, "arguments") && item.arguments !== undefined ? available(item.arguments) : unavailable();
+  }
+  return unavailable();
+}
+
+function resultPart(item: SessionItem): TraceValue<unknown> {
+  const result: Record<string, unknown> = {};
+  if (hasOwn(item, "output") && item.output !== undefined) result.output = item.output;
+  if (hasOwn(item, "error") && item.error !== undefined && item.error !== null) result.error = item.error;
+  if (hasOwn(item, "exit_code") && item.exit_code !== undefined && item.exit_code !== null) result.exit_code = item.exit_code;
+  if (hasOwn(item, "duration_ms") && item.duration_ms !== undefined && item.duration_ms !== null) result.duration_ms = item.duration_ms;
+  const entries = Object.entries(result);
+  if (!entries.length) return unavailable();
+  return entries.length === 1 && entries[0]?.[0] === "output"
+    ? available(entries[0][1])
+    : available(result);
+}
+
+function resultFor(primary: SessionItem, results: readonly SessionItem[]): TraceValue<unknown> {
+  const sources = results.length ? results : [primary];
+  const values = sources
+    .map(resultPart)
+    .filter((part): part is TraceValue<unknown> & { state: "available" } => part.state === "available");
+  const first = values[0];
+  if (!first) return unavailable();
+  return values.length === 1 ? available(first.value) : available(values.map((part) => part.value));
+}
+
+function toolTitle(item: SessionItem): string {
+  if (item.type === "command_execution") return item.command || "Command execution";
+  if (item.type === "web_search_call") {
+    return item.action?.query
+      || item.action?.queries?.join(", ")
+      || item.action?.url
+      || item.action?.pattern
+      || "Web search";
+  }
+  if (item.type === "mcp_call") return item.name || item.server_label || "MCP call";
+  if (item.type === "function_call_output") return item.name || "Function result";
+  return item.name || "Function call";
+}
+
+function traceItemRow(
+  item: SessionItem,
+  results: readonly SessionItem[],
+  groupId: string,
+  functions: Map<string, TraceConfiguredFunctionTool | null> | null,
+  rowId: string,
+  sourceOrder: readonly SessionItem[] = [item, ...results],
+): TraceRow {
+  const sourceItems = [...sourceOrder];
+  const safeRaw = sourceItems.map(safeItemProjection);
+  const itemType = validatedItemType(item);
+  const rawType = (item as unknown as Record<string, unknown>).type;
+  let kind: TraceRowKind = "unknown_item";
+  let lane: TraceLane = "unknown";
+  let label: TraceRowLabel = "ITEM";
+  let title = typeof rawType === "string" && rawType.length > 0
+    ? `Unsupported ${rawType.slice(0, 80)} Item`
+    : "Unsupported Item";
+  let text = unavailable<string>();
+  let tool: TraceToolDetails | null = null;
+  let status = validatedItemStatus(item);
+  let durationMs = unavailable<number>();
+
+  if (itemType === "message" && item.role === "user") {
+    kind = "user_message";
+    lane = "input";
+    label = "USER";
+    title = "User message";
+    text = messageText(item);
+  } else if (itemType === "message" && item.role === "assistant") {
+    kind = "assistant_message";
+    lane = "model";
+    label = "ASSISTANT";
+    title = item.phase === "commentary"
+      ? "Assistant commentary"
+      : item.phase === "final_answer" ? "Assistant answer" : "Assistant message";
+    text = messageText(item);
+  } else if (itemType && (TOOL_CALL_TYPES.has(itemType) || itemType === "function_call_output")) {
+    kind = itemType === "function_call_output" ? "tool_result" : "tool_call";
+    lane = "tools";
+    label = "TOOL";
+    title = toolTitle(item);
+    const resultItem = results.at(-1);
+    if (resultItem) status = validatedItemStatus(resultItem);
+    durationMs = durationFromItems(item, results);
+    tool = {
+      type: item.type,
+      name: item.name ?? null,
+      payload: payloadFor(item),
+      result: resultFor(item, results),
+      configuredFunction: itemType === "function_call"
+        ? configuredFunction(functions, item.name)
+        : unavailable(),
+    };
+  }
+
+  const searchText = makeSearchText(
+    label,
+    title,
+    text.state,
+    text.value,
+    status,
+    durationMs.state,
+    durationMs.value,
+    tool?.configuredFunction,
+    safeRaw,
+  );
+  return {
+    id: rowId,
+    groupId,
+    kind,
+    lane,
+    label,
+    title,
+    text,
+    status,
+    durationMs,
+    tool,
+    safeRaw,
+    sourceItems,
+    searchText,
+  };
+}
+
+function groupedRows(
+  items: readonly SessionItem[],
+  groupId: string,
+  functions: Map<string, TraceConfiguredFunctionTool | null> | null,
+): TraceRow[] {
+  const itemIdCounts = new Map<string, number>();
+  for (const item of items) {
+    const rawId = (item as unknown as Record<string, unknown>).id;
+    if (!isNonEmptyString(rawId)) continue;
+    itemIdCounts.set(rawId, (itemIdCounts.get(rawId) ?? 0) + 1);
+  }
+  const rowId = (item: SessionItem, index: number) => {
+    const rawId = (item as unknown as Record<string, unknown>).id;
+    if (!isNonEmptyString(rawId)) return `${groupId}:position:${index}`;
+    const occurrence = itemIdCounts.get(rawId) === 1 ? "" : `:position:${index}`;
+    return `${groupId}:item:${encodeURIComponent(rawId)}${occurrence}`;
+  };
+  const callIndexes = new Map<string, number[]>();
+  const resultIndexes = new Map<string, number[]>();
+  items.forEach((item, index) => {
+    const itemType = validatedItemType(item);
+    if (typeof item.call_id !== "string" || item.call_id.length === 0) return;
+    const target = itemType === "function_call"
+      ? callIndexes
+      : itemType === "function_call_output" ? resultIndexes : null;
+    if (!target) return;
+    const indexes = target.get(item.call_id) ?? [];
+    indexes.push(index);
+    target.set(item.call_id, indexes);
+  });
+
+  const aggregates = new Map<number, { primary: number; results: number[] }>();
+  const consumed = new Set<number>();
+  for (const [callId, calls] of callIndexes) {
+    const results = resultIndexes.get(callId) ?? [];
+    if (calls.length !== 1 || results.length !== 1) continue;
+    const primary = calls[0];
+    const result = results[0];
+    if (primary === undefined || result === undefined || result <= primary) continue;
+    aggregates.set(primary, { primary, results: [result] });
+    consumed.add(primary);
+    consumed.add(result);
+  }
+
+  const rows: TraceRow[] = [];
+  items.forEach((item, index) => {
+    const aggregate = aggregates.get(index);
+    if (aggregate) {
+      const primary = items[aggregate.primary];
+      if (!primary) return;
+      const results = aggregate.results
+        .map((resultIndex) => items[resultIndex])
+        .filter((result): result is SessionItem => result !== undefined);
+      const originalOrder = [aggregate.primary, ...aggregate.results]
+        .sort((left, right) => left - right)
+        .map((memberIndex) => items[memberIndex])
+        .filter((member): member is SessionItem => member !== undefined);
+      rows.push(traceItemRow(
+        primary,
+        results,
+        groupId,
+        functions,
+        rowId(primary, aggregate.primary),
+        originalOrder,
+      ));
+      return;
+    }
+    if (!consumed.has(index)) rows.push(traceItemRow(item, [], groupId, functions, rowId(item, index)));
+  });
+  return rows;
+}
+
+function instructionsGroup(agent: TraceAgentSnapshot | null): TraceGroup {
+  const instructions = agent === null
+    ? unknown<string>()
+    : typeof agent.instructions === "string" ? available(agent.instructions) : unavailable<string>();
+  const safeRaw: TraceSafeRaw = {
+    type: "configured_instructions",
+    availability: instructions.state,
+    ...(instructions.state === "available" ? { instructions: instructions.value } : {}),
+  };
+  const groupId = "configuration";
+  const row: TraceRow = {
+    id: "configuration:instructions",
+    groupId,
+    kind: "configured_instructions",
+    lane: "configuration",
+    label: "SYSTEM",
+    title: "Configured instructions",
+    text: instructions,
+    status: null,
+    durationMs: unavailable(),
+    tool: null,
+    safeRaw: [safeRaw],
+    sourceItems: [],
+    searchText: makeSearchText("SYSTEM", "Configured instructions", instructions.state, instructions.value, safeRaw),
+  };
+  return {
+    id: groupId,
+    kind: "configuration",
+    title: "Agent configuration",
+    turnIndex: null,
+    turn: null,
+    turnWallClockDurationMs: unavailable(),
+    rows: [row],
+    searchText: makeSearchText("Agent configuration", row.searchText),
+  };
+}
+
+function turnGroup(
+  turn: AgentTurn,
+  index: number,
+  items: readonly SessionItem[],
+  functions: Map<string, TraceConfiguredFunctionTool | null> | null,
+): TraceGroup {
+  const turnId = typeof turn.id === "string" && turn.id.length > 0 ? turn.id : `position-${index}`;
+  const groupId = `turn:${encodeURIComponent(turnId)}`;
+  const rows = groupedRows(items, groupId, functions);
+  const duration = turnDuration(turn);
+  return {
+    id: groupId,
+    kind: "turn",
+    title: `Turn ${index + 1}`,
+    turnIndex: index,
+    turn,
+    turnWallClockDurationMs: duration,
+    rows,
+    searchText: makeSearchText(`Turn ${index + 1}`, turn.status, duration.state, duration.value),
+  };
+}
+
+function orphanGroup(
+  turnId: string | null,
+  index: number,
+  items: readonly SessionItem[],
+  functions: Map<string, TraceConfiguredFunctionTool | null> | null,
+): TraceGroup {
+  const groupId = turnId === null ? "orphan:unknown-turn" : `orphan:${encodeURIComponent(turnId)}`;
+  const rows = groupedRows(items, groupId, functions);
+  return {
+    id: groupId,
+    kind: "orphan",
+    title: `Unassociated Items ${index + 1}`,
+    turnIndex: null,
+    turn: null,
+    turnWallClockDurationMs: unknown(),
+    rows,
+    searchText: makeSearchText("Unassociated Items", "Unknown Turn"),
+  };
+}
+
+export function buildTraceModel({ turns, items, agent }: BuildTraceModelInput): TraceModel {
+  const functions = configuredFunctions(agent);
+  const knownTurnIds = new Set(turns.flatMap((turn) => (
+    typeof turn.id === "string" && turn.id.length > 0 ? [turn.id] : []
+  )));
+  const itemsByTurn = new Map<string, SessionItem[]>();
+  const orphanTurnIds: string[] = [];
+  const unknownTurnItems: SessionItem[] = [];
+  for (const item of items) {
+    const turnId = typeof item.turn_id === "string" && item.turn_id.length > 0 ? item.turn_id : null;
+    if (turnId === null) {
+      unknownTurnItems.push(item);
+      continue;
+    }
+    const groupItems = itemsByTurn.get(turnId);
+    if (groupItems) groupItems.push(item);
+    else {
+      itemsByTurn.set(turnId, [item]);
+      if (!knownTurnIds.has(turnId)) orphanTurnIds.push(turnId);
+    }
+  }
+
+  // listTurns(order: "asc") is the ordering authority. Item arrival order must
+  // not reorder complete Turn history.
+  const turnGroups = turns.map((turn, index) => turnGroup(
+    turn,
+    index,
+    itemsByTurn.get(turn.id) ?? [],
+    functions,
+  ));
+  const orphanGroups = orphanTurnIds.map((turnId, index) => orphanGroup(
+    turnId,
+    index,
+    itemsByTurn.get(turnId) ?? [],
+    functions,
+  ));
+  if (unknownTurnItems.length) {
+    orphanGroups.push(orphanGroup(null, orphanGroups.length, unknownTurnItems, functions));
+  }
+  const groups = [instructionsGroup(agent), ...turnGroups, ...orphanGroups];
+  const rows = groups.flatMap((group) => group.rows);
+  const durations = turnGroups.map((group) => group.turnWallClockDurationMs);
+  const knownDurations = durations.filter(
+    (duration): duration is TraceValue<number> & { state: "available"; value: number } => (
+      duration.state === "available" && duration.value !== null
+    ),
+  );
+  return {
+    groups,
+    rows,
+    summary: {
+      turnCount: turns.length,
+      toolCallCount: items.filter((item) => {
+        const itemType = validatedItemType(item);
+        return itemType !== null && TOOL_CALL_TYPES.has(itemType);
+      }).length,
+      knownTurnWallClockDurationMs: knownDurations.reduce((total, duration) => total + duration.value, 0),
+      turnsWithKnownWallClock: knownDurations.length,
+      turnsWithUnknownWallClock: durations.length - knownDurations.length,
+    },
+  };
+}
+
+function includesEveryTerm(searchText: string, terms: readonly string[]): boolean {
+  return terms.every((term) => searchText.includes(term));
+}
+
+/** Returns a filtered view without mutating or rebuilding the durable model. */
+export function filterTraceModel(model: TraceModel, query: string): TraceModel {
+  const terms = query.trim().toLocaleLowerCase().split(/\s+/u).filter(Boolean);
+  if (!terms.length) return model;
+  const groups = model.groups.flatMap((group): TraceGroup[] => {
+    if (includesEveryTerm(group.searchText, terms)) return [{ ...group }];
+    const rows = group.rows.filter((row) => includesEveryTerm(row.searchText, terms));
+    return rows.length ? [{ ...group, rows }] : [];
+  });
+  return {
+    groups,
+    rows: groups.flatMap((group) => group.rows),
+    summary: model.summary,
+  };
+}
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index f59bbdb..2e8282c 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -1401,6 +1401,644 @@ html[data-theme="dark"] .brand-mark-dark {
   font-size: 12px;
 }
 
+.session-view-tabs {
+  display: flex;
+  min-height: 40px;
+  flex: 0 0 40px;
+  align-items: stretch;
+  padding: 0 16px;
+  gap: 24px;
+  border-bottom: 1px solid var(--line);
+}
+
+.session-view-tabs > button {
+  position: relative;
+  padding: 0 1px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.session-view-tabs > button::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: transparent;
+  border-radius: 2px 2px 0 0;
+  content: "";
+}
+
+.session-view-tabs > button:hover {
+  color: var(--fg);
+}
+
+.session-view-tabs > button[aria-selected="true"] {
+  color: var(--accent);
+}
+
+.session-view-tabs > button[aria-selected="true"]::after {
+  background: var(--accent);
+}
+
+.session-view-tabs > button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: -3px;
+}
+
+.session-view-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.session-view-panel[hidden] {
+  display: none;
+}
+
+.trace-workbench {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.trace-toolbar {
+  display: flex;
+  min-height: 52px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  gap: 16px;
+  background: var(--surface-subtle);
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-metrics {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  gap: 24px;
+}
+
+.trace-metrics > div {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.trace-metrics dt,
+.trace-detail-summary dt,
+.trace-detail-timing dt,
+.trace-detail-usage dt {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 15px;
+}
+
+.trace-metrics dd,
+.trace-detail-summary dd,
+.trace-detail-timing dd,
+.trace-detail-usage dd {
+  margin: 0;
+  color: var(--fg);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums slashed-zero;
+  line-height: 17px;
+}
+
+.trace-search {
+  display: flex;
+  width: min(300px, 36vw);
+  min-width: 180px;
+  height: 30px;
+  align-items: center;
+  padding: 0 9px;
+  gap: 7px;
+  color: var(--fg-muted);
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+}
+
+.trace-search:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.trace-search input {
+  min-width: 0;
+  flex: 1;
+  padding: 0;
+  color: var(--fg);
+  font: inherit;
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+
+.trace-search > .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
+.trace-order-overview {
+  flex: 0 0 auto;
+  padding: 9px 16px 10px;
+  background: var(--surface-subtle);
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-order-overview > header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  gap: 12px;
+}
+
+.trace-order-overview > header strong {
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 15px;
+}
+
+.trace-order-overview > header span {
+  color: var(--fg-muted);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.trace-order-scroll {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.trace-order-grid {
+  display: grid;
+  width: 100%;
+  min-height: 15px;
+  align-items: center;
+  gap: 0 2px;
+}
+
+.trace-order-grid > span {
+  padding-right: 8px;
+  color: var(--fg-muted);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.trace-order-item {
+  height: 7px;
+  min-width: 18px;
+  padding: 0;
+  background: var(--line-strong);
+  border: 0;
+  border-radius: 2px;
+}
+
+.trace-order-item-input { background: color-mix(in srgb, var(--accent) 72%, var(--surface)); }
+.trace-order-item-model { background: color-mix(in srgb, #9b77cf 76%, var(--surface)); }
+.trace-order-item-tools { background: color-mix(in srgb, var(--warning) 78%, var(--surface)); }
+
+.trace-order-item:hover,
+.trace-order-item[aria-pressed="true"] {
+  outline: 1px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.trace-order-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.trace-contract-note {
+  display: flex;
+  min-height: 34px;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 6px 16px;
+  gap: 7px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 16px;
+  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-contract-note svg {
+  flex: 0 0 auto;
+}
+
+.trace-load-state,
+.trace-load-error {
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 7px 16px;
+  font-size: 11px;
+  line-height: 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-load-state {
+  color: var(--fg-muted);
+}
+
+.trace-load-error {
+  display: flex;
+  gap: 8px;
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 6%, transparent);
+}
+
+.trace-load-error strong {
+  font-weight: 500;
+}
+
+.trace-workspace {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.trace-workbench.has-detail .trace-workspace {
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
+}
+
+.trace-ledger {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.trace-group {
+  min-width: 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-group-header {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  padding: 0 12px;
+  gap: 7px;
+  color: var(--fg-muted);
+  background: var(--surface-subtle);
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-group-header strong {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.trace-group-header > span {
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.trace-group-duration {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums slashed-zero;
+}
+
+.trace-group ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.trace-group li + li {
+  border-top: 1px solid var(--line);
+}
+
+.trace-ledger-row {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  min-height: 46px;
+  grid-template-columns: 24px 70px minmax(0, 1fr) 14px 86px;
+  align-items: center;
+  padding: 5px 12px;
+  gap: 8px;
+  color: var(--fg);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.trace-ledger-row:hover {
+  background: var(--hover);
+}
+
+.trace-ledger-row[aria-pressed="true"] {
+  background: var(--selected);
+  box-shadow: inset 2px 0 var(--accent);
+}
+
+.trace-ledger-row:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: -2px;
+}
+
+.trace-row-icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+  background: var(--surface-muted);
+  border-radius: 5px;
+}
+
+.trace-row-icon-input { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.trace-row-icon-model { color: #9b77cf; background: color-mix(in srgb, #9b77cf 13%, transparent); }
+.trace-row-icon-tools { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
+
+.trace-row-label {
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 14px;
+  letter-spacing: 0.04em;
+}
+
+.trace-row-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.trace-row-copy strong,
+.trace-row-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trace-row-copy strong {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.trace-row-copy small,
+.trace-row-duration {
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.trace-row-duration {
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums slashed-zero;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trace-group-empty,
+.trace-empty {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.trace-group-empty {
+  padding: 10px 44px;
+}
+
+.trace-empty {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.trace-empty p {
+  margin: 0;
+}
+
+.trace-detail {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface);
+  border-left: 1px solid var(--line-strong);
+}
+
+.trace-detail-header {
+  display: grid;
+  min-height: 56px;
+  grid-template-columns: auto minmax(0, 1fr) 28px;
+  align-items: center;
+  padding: 8px 10px 8px 14px;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-detail-header > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.trace-detail-header strong,
+.trace-detail-header small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trace-detail-header strong {
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.trace-detail-header small {
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.trace-detail-tabs {
+  display: flex;
+  min-height: 38px;
+  flex: 0 0 auto;
+  align-items: stretch;
+  padding: 0 12px;
+  gap: 18px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-detail-tabs > button {
+  position: relative;
+  flex: 0 0 auto;
+  padding: 0;
+  color: var(--fg-muted);
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.trace-detail-tabs > button[aria-selected="true"] {
+  color: var(--accent);
+}
+
+.trace-detail-tabs > button[aria-selected="true"]::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--accent);
+  content: "";
+}
+
+.trace-detail-tabs > button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: -2px;
+}
+
+.trace-detail-content {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  padding: 14px;
+  overflow: auto;
+}
+
+.trace-detail-summary > dl,
+.trace-detail-timing > dl {
+  display: grid;
+  margin: 0;
+  gap: 8px;
+}
+
+.trace-detail-summary > dl > div,
+.trace-detail-timing > dl > div {
+  display: grid;
+  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.trace-detail-summary dd,
+.trace-detail-timing dd {
+  overflow-wrap: anywhere;
+}
+
+.trace-detail-summary code {
+  font-family: var(--font-mono);
+}
+
+.trace-detail-usage {
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+}
+
+.trace-detail-usage > strong {
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.trace-detail-usage dl {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 8px 0 0;
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+}
+
+.trace-detail-usage dl > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: 7px;
+  background: var(--surface-subtle);
+}
+
+.trace-detail-boundary,
+.trace-detail-timing p,
+.trace-detail-unavailable {
+  margin: 16px 0 0;
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.trace-detail-code,
+.trace-detail-text {
+  max-width: 100%;
+  max-height: none;
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  color: var(--fg);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums slashed-zero;
+  line-height: 17px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  background: var(--surface-subtle);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.trace-detail-preview {
+  min-width: 0;
+}
+
+.trace-detail .parsar-diff {
+  padding-left: 0;
+}
+
 .stream-indicator {
   display: inline-flex;
   height: 24px;
@@ -3387,6 +4025,79 @@ button.trace-step-row:hover {
     min-width: 0;
   }
 
+  .session-page .session-view-tabs {
+    padding: 0 12px;
+  }
+
+  .session-page .trace-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    padding: 8px 10px;
+    gap: 8px;
+  }
+
+  .session-page .trace-metrics {
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .session-page .trace-metrics > div {
+    min-width: 0;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .session-page .trace-search {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .session-page .trace-order-overview {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+
+  .session-page .trace-order-overview > header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .session-page .trace-contract-note {
+    align-items: flex-start;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+
+  .session-page .trace-workbench.has-detail .trace-workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .session-page .trace-workbench.has-detail .trace-ledger {
+    display: none;
+  }
+
+  .session-page .trace-detail {
+    border-left: 0;
+  }
+
+  .session-page .trace-ledger-row {
+    grid-template-columns: 24px 64px minmax(0, 1fr) 14px;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+
+  .session-page .trace-row-duration {
+    display: none;
+  }
+
+  .session-page .trace-detail-summary > dl > div,
+  .session-page .trace-detail-timing > dl > div {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+
   .session-page .thread-content {
     padding-right: 10px;
     padding-left: 10px;
diff --git a/docs/protocol-coverage.md b/docs/protocol-coverage.md
index 22305b3..b2eebf3 100644
--- a/docs/protocol-coverage.md
+++ b/docs/protocol-coverage.md
@@ -5,15 +5,15 @@ OpenAI-hosted service compatibility.
 
 ## Compatibility baseline
 
-- Current Parsar Core compatibility audit:
+- Current immutable Parsar Core capability baseline:
   [`d91ba48a`](https://github.com/MiniMax-AI-Dev/parsar/commit/d91ba48ac6c49cfdf6f08d7687b9be76ba6d53ee).
   This immutable revision re-confirms the Web-used Agent admission, chat, and
-  Environment boundaries. `OpenAI-Beta: agents=v1` plus the `/v1/agents/**`
-  resources and Session events endpoint are the versioned Web/Core contract. Core
-  exposes no additional public execution-readiness, capability, or build-version
-  resource; Web does not require one before using the documented chat events. It
-  exposes Environment retrieve plus Session-bound `self_hosted` data, but no public
-  Environment list, template, file-management, or browser-facing key route.
+  Environment and trace-observability boundaries. `OpenAI-Beta: agents=v1` plus the
+  `/v1/agents/**` resources and Session events endpoint are the versioned Web/Core
+  contract. Core exposes no additional public execution-readiness, capability, or
+  build-version resource; Web does not require one before using the documented chat
+  events. It exposes Environment retrieve plus Session-bound `self_hosted` data, but
+  no public Environment list, template, file-management, or browser-facing key route.
 - Upstream resource source: `openai-python` 3.13.0 beta Agents resources at
   [`d7c41efe`](https://github.com/openai/openai-python/tree/d7c41efee1b0802b79f3f88a678ef2052b06e9ce/src/openai/resources/beta/agents)
 - Required beta header: `OpenAI-Beta: agents=v1`
@@ -302,6 +302,54 @@ read keeps the existing conversation usable.
   observability. They are not per-Item timing, monetary cost, provider attribution,
   or a complete OpenAI Trace waterfall.
 
+## Trace workbench boundary
+
+- Against the immutable Parsar `d91ba48a` capability baseline, the trace workbench
+  is a read-only projection of the selected Session's Agent snapshot, all loaded
+  Turn and Item snapshots, and accepted newer lifecycle events. A Turn can contribute
+  its exact status, start/completion timestamps, and available token totals. An Item
+  can present its exact type, status, role/phase, message content,
+  command, working directory, tool identity, arguments/action, output/error, exit
+  code, and tool `duration_ms` when those fields exist. Missing values stay
+  unavailable. Unknown Item types and known discriminants with malformed required
+  fields retain a generic inspectable presentation rather than acquiring a known
+  semantic label.
+- Turn rows follow the durable all-pages creation order with the existing exact live
+  status merge. Items retain their durable order and group under a Turn only by an
+  exact `turn_id`; unmatched Items remain explicit. A function result may be paired
+  with a function call only when the same non-empty `call_id` identifies exactly one
+  call followed by exactly one result within that Turn. Ambiguous or out-of-order
+  snapshots remain separate rows. Sequence labels, Turn/tool counts, bounded local
+  search, and filters are Web-derived views over the currently loaded snapshots.
+  They do not mutate Core state, establish an execution hierarchy, or make a partial
+  or failed read complete.
+- The instructions available to this view are the Session Agent snapshot's
+  configured `instructions`. They are labelled **Configured instructions**, not
+  **System prompt**, because the public contract does not expose the complete prompt
+  assembled by the runtime, daemon, model provider, or native harness. Likewise, the
+  configured model is not proof of the model or provider that executed a Turn.
+- A function Tool schema is shown only when a known `function_call` Item's exact
+  function name has one unambiguous, structurally valid function-tool match in the
+  selected Session's Agent snapshot. Missing, duplicate, malformed, MCP, command,
+  Web-search, and unknown Tool definitions do not receive an inferred schema.
+- Summary, preview, payload, result, and raw-detail panels project allow-listed
+  fields from those public resource snapshots. A merged function row keeps the call
+  and result as two distinct raw snapshots. The Web does not add request headers,
+  authentication material, daemon/native-harness diagnostics, or provider-private
+  payloads that are absent from the resource. Nested public field values are shown
+  as Core returned them and are not claimed to be recursively redacted. The Session
+  SSE endpoint is live-only and does not replay history, so the assembled trace must
+  not be described as an audit log or lossless record of every intermediate state.
+- Core exposes Turn-level `created_at`, `started_at`, and `completed_at`, but no
+  per-Item start/end timestamps, first-token timestamp, model-generation span,
+  throughput, provider attribution, parent span, request/step hierarchy, or subagent
+  relationship in this contract. Item `duration_ms` remains tool progress only;
+  `phase`, `turn_id`, event arrival time, list position, and configured multi-agent
+  fields cannot fill those gaps. Therefore the Web may render an execution-order
+  overview, but it must not draw a time-scaled Input/Model/Tools waterfall or claim
+  TTFT, generation time, tokens-per-second, provider, step, or subagent metrics until
+  Core supplies versioned fields for them.
+
 The client never retries a write automatically. For an input message that receives
 an unexpected non-204 2xx, loses its network/response, or fails with HTTP 5xx or a
 transient 408/409/425/429, the Web keeps the original payload and idempotency key in

From 71db219b82e02d3e4789c7361067906f1cda9fe8 Mon Sep 17 00:00:00 2001
From: sam2tom <sam2tom@users.noreply.github.com>
Date: Thu, 17 Sep 2026 11:38:31 +0800
Subject: [PATCH 2/2] feat(web): refine session and trace UX

---
 apps/web/e2e/agents-lifecycle.spec.ts         | 106 ++++++++++--
 apps/web/e2e/fixture-core.mjs                 |  25 +++
 .../features/CoreCollectionStates.test.tsx    |  27 +++
 .../src/features/agents/AgentsView.test.tsx   |   3 +
 apps/web/src/features/agents/AgentsView.tsx   |  17 +-
 .../src/features/sessions/SessionsView.tsx    |  22 ++-
 .../environment/EnvironmentPanel.test.tsx     |   6 +-
 .../sessions/environment/EnvironmentPanel.tsx |  12 +-
 .../sessions/trace/TraceView.test.tsx         |  14 +-
 .../src/features/sessions/trace/TraceView.tsx |  79 +++++++--
 .../sessions/turns/TurnTimeline.test.tsx      |   2 +-
 .../features/sessions/turns/TurnTimeline.tsx  |   2 +-
 apps/web/src/style.css                        | 157 +++++++++++++++---
 docs/core-connection.md                       |  12 +-
 docs/protocol-coverage.md                     |   8 +-
 15 files changed, 401 insertions(+), 91 deletions(-)

diff --git a/apps/web/e2e/agents-lifecycle.spec.ts b/apps/web/e2e/agents-lifecycle.spec.ts
index 899feb5..d1c4167 100644
--- a/apps/web/e2e/agents-lifecycle.spec.ts
+++ b/apps/web/e2e/agents-lifecycle.spec.ts
@@ -54,6 +54,11 @@ async function emitTurnFixture(request: APIRequestContext, status: "completed" |
   expect(response.ok()).toBe(true);
 }
 
+async function emitSessionFixture(request: APIRequestContext, status: "in_progress" | "idle") {
+  const response = await request.post(`${fixtureBaseUrl}/__fixture/emit-session`, { data: { status } });
+  expect(response.ok()).toBe(true);
+}
+
 async function fixtureRequests(request: APIRequestContext): Promise<FixtureRequest[]> {
   const response = await request.get(`${fixtureBaseUrl}/__fixture/requests`);
   expect(response.ok()).toBe(true);
@@ -295,6 +300,7 @@ test("continues from a default Agent definition into an admitted idle Session",
   await expect(page.getByRole("button", { name: "Start Session" })).toBeEnabled();
   await page.getByRole("button", { name: "Start Session" }).click();
   await expect(page.getByRole("button", { name: "Sessions", exact: true })).toHaveAttribute("aria-current", "page");
+  await expect(page.getByRole("region", { name: "Environment and Workspace status" })).toHaveCount(0);
 
   const sessionCreates = (await fixtureRequests(request)).filter((entry) => (
     entry.method === "POST" && entry.path === "/v1/agents/sessions"
@@ -336,8 +342,10 @@ test("rechecks the saved response before offering the setup-page Session continu
 
 test("starts only Agents that pass known Session admission", async ({ page, request }) => {
   await openAgents(page, request);
+  await expect(page.getByRole("columnheader", { name: "Session" })).toBeVisible();
 
   const blockedStart = page.getByRole("button", { name: /Start a Session with Lifecycle Agent/ });
+  await expect(blockedStart).toContainText("Unavailable");
   await expect(blockedStart).toHaveAttribute("aria-disabled", "true");
   await blockedStart.focus();
   await expect(blockedStart.locator("xpath=..").getByRole("tooltip")).toBeVisible();
@@ -358,6 +366,7 @@ test("starts only Agents that pass known Session admission", async ({ page, requ
     entry.method === "POST" && entry.path === "/v1/agents/sessions"
   ))).toHaveLength(blockedSessionCount);
   await expect(page.getByRole("button", { name: "Start a Session with Second Agent" })).toBeEnabled();
+  await expect(page.getByRole("button", { name: "Start a Session with Second Agent" })).toContainText("Start Session");
 
   const before = (await fixtureRequests(request)).filter((entry) => (
     entry.method === "POST" && entry.path === "/v1/agents/sessions"
@@ -484,6 +493,7 @@ test("keeps the Agent ledger and dialogs usable at 390 px in light and dark mode
     const main = document.querySelector(".app-main")?.getBoundingClientRect();
     const trigger = Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.includes("New Agent"))?.getBoundingClientRect();
     const ledger = document.querySelector(".agent-ledger")?.getBoundingClientRect();
+    const sessionTrigger = document.querySelector('button[aria-label="Start a Session with Second Agent"]')?.getBoundingClientRect();
     return {
       innerWidth,
       documentScrollWidth: document.documentElement.scrollWidth,
@@ -491,6 +501,7 @@ test("keeps the Agent ledger and dialogs usable at 390 px in light and dark mode
       main: main && { left: main.left, right: main.right, width: main.width },
       trigger: trigger && { left: trigger.left, right: trigger.right, width: trigger.width },
       ledger: ledger && { left: ledger.left, right: ledger.right, width: ledger.width },
+      sessionTrigger: sessionTrigger && { left: sessionTrigger.left, right: sessionTrigger.right, width: sessionTrigger.width },
     };
   });
   expect(metrics.documentScrollWidth).toBeLessThanOrEqual(metrics.innerWidth);
@@ -501,6 +512,9 @@ test("keeps the Agent ledger and dialogs usable at 390 px in light and dark mode
   expect(metrics.trigger?.right).toBeLessThanOrEqual(390);
   expect(metrics.ledger?.left).toBeGreaterThanOrEqual(0);
   expect(metrics.ledger?.right).toBeLessThanOrEqual(390);
+  expect(metrics.sessionTrigger?.left).toBeGreaterThanOrEqual(metrics.ledger?.left ?? 0);
+  expect(metrics.sessionTrigger?.right).toBeLessThanOrEqual(metrics.ledger?.right ?? 390);
+  await expect(page.getByRole("button", { name: "Start a Session with Second Agent" })).toContainText("Start Session");
   await attachScreenshot(page, testInfo, "narrow-light-agent-ledger");
 
   await expect(page.getByRole("button", { name: "Environments", exact: true })).toHaveCount(0);
@@ -585,6 +599,27 @@ test("starts one Session with an idempotency key and without browser authorizati
   }
 });
 
+test("shows composer activity only for a Core-reported in-progress Session", async ({ page, request }, testInfo) => {
+  await resetFixture(request);
+  await page.goto("/");
+  await expect(page.getByText("listening", { exact: true })).toBeVisible();
+
+  const activity = page.locator(".conversation-activity");
+  await expect(activity).toHaveCount(0);
+  await emitSessionFixture(request, "in_progress");
+  await expect(activity).toBeVisible();
+  await expect(activity).toContainText("Lifecycle Agent is working…");
+  await expect(activity).toHaveAttribute("aria-live", "polite");
+  await expect(activity).toHaveAttribute("aria-atomic", "true");
+  await expect(activity.locator(".status-running")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Cancel active Turn" })).toBeVisible();
+  await attachElementScreenshot(activity, testInfo, "conversation-activity");
+
+  await emitSessionFixture(request, "idle");
+  await expect(activity).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Send message" })).toBeVisible();
+});
+
 test("updates Session title and metadata after a latest read while preserving failed and unknown drafts", async ({ page, request }) => {
   await resetFixture(request);
   await page.goto("/");
@@ -1218,7 +1253,7 @@ test("applies a buffered live Environment event after an earlier durable snapsho
   await expect(panel).not.toContainText("Pending");
 });
 
-test("loads every Turn page, reconciles terminal events, and keeps failures beside conversation Items", async ({ page, request }, testInfo) => {
+test("loads every Turn page, reconciles terminal events, and keeps diagnostics out of Conversation", async ({ page, request }, testInfo) => {
   await resetFixture(request);
   await controlFixture(request, {
     turnsScenario: 1,
@@ -1227,7 +1262,18 @@ test("loads every Turn page, reconciles terminal events, and keeps failures besi
   await page.goto("/");
   await expect(page.getByText("listening", { exact: true })).toBeVisible();
 
-  const timeline = page.getByRole("region", { name: "Turn timeline" });
+  const conversationTab = page.getByRole("tab", { name: "Conversation" });
+  const conversation = page.getByRole("tabpanel", { name: "Conversation" });
+  await expect(conversation.getByRole("region", { name: "Turn timeline" })).toHaveCount(0);
+
+  await page.getByRole("tab", { name: "Trace" }).click();
+  const trace = page.getByRole("tabpanel", { name: "Trace" });
+  const diagnostics = trace.locator("details.trace-turn-diagnostics");
+  await expect(diagnostics).not.toHaveAttribute("open", "");
+  await diagnostics.locator("summary").click();
+  await expect(diagnostics).toHaveAttribute("open", "");
+
+  const timeline = diagnostics.getByRole("region", { name: "Turn timeline" });
   await expect(timeline).toContainText("7 observed Turns");
   for (const status of ["Queued", "In progress", "Waiting", "Completed", "Failed", "Cancelled"]) {
     await expect(timeline.getByRole("img", { name: `Turn status: ${status}` }).first()).toBeVisible();
@@ -1239,7 +1285,7 @@ test("loads every Turn page, reconciles terminal events, and keeps failures besi
   const failed = timeline.locator('[data-turn-id="turn_failed"]');
   await expect(failed).toContainText("The execution could not complete.");
   await expect(failed).toContainText("1 linked Item");
-  await expect(page.getByText("Persisted input before the Turn failed.")).toBeVisible();
+  await expect(trace.getByText("Persisted input before the Turn failed.")).toBeVisible();
   await expect(timeline).toContainText("1 Item is not associated with an observed Turn yet.");
 
   const readsBeforeTerminal = (await fixtureRequests(request)).filter((entry) => (
@@ -1261,14 +1307,14 @@ test("loads every Turn page, reconciles terminal events, and keeps failures besi
 
   await controlFixture(request, { turnsRetrieveStatus: 503 });
   await page.getByRole("button", { name: "Recover durable state" }).click();
+  await expect(trace.locator(".trace-load-error").filter({ hasText: "Turn history is incomplete" })).toBeVisible();
   await expect(timeline.locator(".turn-timeline-failure")).toContainText("Couldn’t load Turn history");
   await expect(timeline).toContainText("last observed Turn timeline remains visible");
-  await expect(page.getByText("Completed Turn output remains in the conversation.")).toBeVisible();
-  await expect(page.getByLabel("Message the Agent")).toBeVisible();
+  await expect(trace.getByText("Completed Turn output remains in the conversation.")).toBeVisible();
 
   await page.setViewportSize({ width: 390, height: 844 });
-  await timeline.evaluate((element) => element.scrollIntoView({ block: "start" }));
-  const widths = await timeline.evaluate((element) => {
+  await diagnostics.evaluate((element) => element.scrollIntoView({ block: "start" }));
+  const diagnosticsLayout = await diagnostics.evaluate((element) => {
     const box = element.getBoundingClientRect();
     return {
       viewport: innerWidth,
@@ -1276,13 +1322,25 @@ test("loads every Turn page, reconciles terminal events, and keeps failures besi
       body: document.body.scrollWidth,
       left: box.left,
       right: box.right,
+      overflowY: getComputedStyle(element).overflowY,
+      clientHeight: element.clientHeight,
+      scrollHeight: element.scrollHeight,
     };
   });
-  expect(widths.document).toBeLessThanOrEqual(widths.viewport);
-  expect(widths.body).toBeLessThanOrEqual(widths.viewport);
-  expect(widths.left).toBeGreaterThanOrEqual(0);
-  expect(widths.right).toBeLessThanOrEqual(widths.viewport);
-  await attachElementScreenshot(timeline, testInfo, "narrow-turn-timeline");
+  expect(diagnosticsLayout.document).toBeLessThanOrEqual(diagnosticsLayout.viewport);
+  expect(diagnosticsLayout.body).toBeLessThanOrEqual(diagnosticsLayout.viewport);
+  expect(diagnosticsLayout.left).toBeGreaterThanOrEqual(0);
+  expect(diagnosticsLayout.right).toBeLessThanOrEqual(diagnosticsLayout.viewport);
+  expect(diagnosticsLayout.overflowY).toBe("auto");
+  expect(diagnosticsLayout.scrollHeight).toBeGreaterThan(diagnosticsLayout.clientHeight);
+  await diagnostics.evaluate((element) => { element.scrollTop = element.scrollHeight; });
+  await expect(timeline.locator(".turn-card").last()).toBeVisible();
+  await attachElementScreenshot(diagnostics, testInfo, "narrow-turn-diagnostics");
+
+  await conversationTab.click();
+  await expect(conversation.getByRole("region", { name: "Turn timeline" })).toHaveCount(0);
+  await expect(conversation.getByText("Completed Turn output remains in the conversation.")).toBeVisible();
+  await expect(page.getByLabel("Message the Agent")).toBeVisible();
 });
 
 test("presents an honest searchable Trace workbench without changing the conversation draft", async ({ page, request }, testInfo) => {
@@ -1311,12 +1369,14 @@ test("presents an honest searchable Trace workbench without changing the convers
   const trace = page.getByRole("tabpanel", { name: "Trace" });
   await expect(trace).toBeVisible();
   await expect(trace).toContainText("Known Turn time");
-  await expect(trace.getByText("7 observed Turns")).toHaveCount(0);
+  const diagnostics = trace.locator("details.trace-turn-diagnostics");
+  await expect(diagnostics).not.toHaveAttribute("open", "");
+  await expect(diagnostics.locator("summary")).toContainText("Turn diagnostics");
   await expect(trace).toContainText("Turns");
   await expect(trace).toContainText("Tool calls");
   await expect(trace).toContainText("Equal-width sequence · not time-scaled");
   await expect(trace.locator(".trace-order-scroll")).toHaveCount(1);
-  await expect(trace).toContainText("Per-item timing is unavailable");
+  await expect(trace).toContainText("Core reports Turn wall-clock time, but not per-item timing");
   await expect(trace).toContainText("Configured instructions");
   await expect(trace).toContainText("Completed Turn output remains in the conversation.");
   await expect(trace).not.toContainText("TTFT");
@@ -1326,9 +1386,14 @@ test("presents an honest searchable Trace workbench without changing the convers
   await search.fill("Persisted input failed");
   await expect(trace.locator(".trace-ledger-row")).toHaveCount(1);
   await expect(trace).toContainText("Persisted input before the Turn failed.");
+  const messageDuration = trace.locator(".trace-ledger-row").filter({ hasText: "Persisted input before the Turn failed." }).locator(".trace-row-duration");
+  await expect(messageDuration.locator('[aria-hidden="true"]')).toHaveText("—");
+  await expect(messageDuration).toHaveAttribute("title", "Core does not provide per-item timing.");
+  await expect(messageDuration.locator(".trace-visually-hidden")).toHaveText("Per-item timing not provided by Core.");
   await search.fill("");
 
   const patchRow = trace.locator(".trace-ledger-row-tools").filter({ hasText: "apply_patch" }).first();
+  await expect(patchRow.locator('.trace-row-duration [aria-hidden="true"]')).toHaveText("41 ms");
   await patchRow.click();
   const detail = page.getByRole("complementary", { name: "Trace item details" });
   await expect(detail).toBeVisible();
@@ -1400,16 +1465,23 @@ test("drops a delayed Turn page after switching Sessions", async ({ page, reques
     turnsPageSize: 2,
   });
   await page.goto("/");
-  const timeline = page.getByRole("region", { name: "Turn timeline" });
   await expect(page.getByText("Completed Turn output remains in the conversation.")).toBeVisible({ timeout: 1_500 });
+  await page.getByRole("tab", { name: "Trace" }).click();
+  const diagnostics = page.locator("details.trace-turn-diagnostics");
+  await diagnostics.locator("summary").click();
+  const timeline = diagnostics.getByRole("region", { name: "Turn timeline" });
   await expect(timeline).toContainText("Loading every Turn page");
   await page.getByRole("button", { name: "Agents" }).click();
   await expect(page.getByRole("table", { name: "Agents" })).toBeVisible();
   await page.getByRole("button", { name: /Start a Session with Second Agent/ }).click();
 
-  await expect(timeline).toContainText("No Turns reported yet.");
+  await page.getByRole("tab", { name: "Trace" }).click();
+  const nextDiagnostics = page.locator("details.trace-turn-diagnostics");
+  await nextDiagnostics.locator("summary").click();
+  const nextTimeline = nextDiagnostics.getByRole("region", { name: "Turn timeline" });
+  await expect(nextTimeline).toContainText("No Turns reported yet.");
   await page.waitForTimeout(3_000);
-  await expect(timeline).not.toContainText("turn_queued");
+  await expect(nextTimeline).not.toContainText("turn_queued");
   await expect(page.getByText("Completed Turn output remains in the conversation.")).toHaveCount(0);
 
   const turnReads = (await fixtureRequests(request)).filter((entry) => (
diff --git a/apps/web/e2e/fixture-core.mjs b/apps/web/e2e/fixture-core.mjs
index 2c3a6b1..65008fc 100644
--- a/apps/web/e2e/fixture-core.mjs
+++ b/apps/web/e2e/fixture-core.mjs
@@ -312,6 +312,25 @@ function emitTurnLifecycle(status) {
   return true;
 }
 
+function emitSessionLifecycle(status) {
+  if (!["in_progress", "idle"].includes(status)) return false;
+  const session = state.sessions.find((candidate) => candidate.id === "session_snapshot");
+  if (!session) return false;
+  session.status = status;
+  session.required_actions = [];
+  state.sequence += 1;
+  const event = `id: session_${state.sequence}\ndata: ${JSON.stringify({
+    type: `agent.session.${status}`,
+    event_id: `session_${state.sequence}`,
+    session_id: session.id,
+    session,
+  })}\n\n`;
+  for (const [stream, sessionId] of streamResponses) {
+    if (sessionId === session.id) stream.write(event);
+  }
+  return true;
+}
+
 function sendJson(response, value, status = 200) {
   const body = JSON.stringify(value);
   response.writeHead(status, {
@@ -409,6 +428,12 @@ const server = http.createServer(async (request, response) => {
         ? sendJson(response, { emitted: true })
         : sendError(response, 400, "Fixture terminal Turn is unavailable.");
     }
+    if (request.method === "POST" && url.pathname === "/__fixture/emit-session") {
+      const input = await readJson(request);
+      return emitSessionLifecycle(input.status)
+        ? sendJson(response, { emitted: true })
+        : sendError(response, 400, "Fixture Session lifecycle status is unavailable.");
+    }
     if (request.method === "GET" && url.pathname === "/__fixture/requests") {
       return sendJson(response, state.requests);
     }
diff --git a/apps/web/src/features/CoreCollectionStates.test.tsx b/apps/web/src/features/CoreCollectionStates.test.tsx
index 37b98ed..ebaad7a 100644
--- a/apps/web/src/features/CoreCollectionStates.test.tsx
+++ b/apps/web/src/features/CoreCollectionStates.test.tsx
@@ -117,6 +117,33 @@ describe("Agent Core collection states", () => {
     expect(failed).toContain("Researcher");
   });
 
+  it("shows composer activity only for a Core-reported in-progress Session", () => {
+    const renderStatus = (status: AgentSession["status"], busy = false) => renderToStaticMarkup(
+      <SessionsView
+        agents={[]}
+        sessions={[selectedSession]}
+        selected={{ ...selectedSession, status }}
+        items={durableItems}
+        busy={busy}
+        coreError={null}
+        coreState="ready"
+        detailError={null}
+        detailState="ready"
+        streamError={null}
+        streamState="listening"
+        {...sessionsCallbacks}
+      />,
+    );
+
+    const active = renderStatus("in_progress");
+    expect(active).toContain('class="conversation-activity"');
+    expect(active).toContain('role="status" aria-live="polite" aria-atomic="true"');
+    expect(active).toContain("Researcher is working…");
+    expect(renderStatus("idle", true)).not.toContain("conversation-activity");
+    expect(renderStatus("requires_action")).not.toContain("conversation-activity");
+    expect(renderStatus("failed")).not.toContain("conversation-activity");
+  });
+
   it("keeps Sessions loading and failure distinct from ready empty copy", () => {
     const common = {
       agents: [],
diff --git a/apps/web/src/features/agents/AgentsView.test.tsx b/apps/web/src/features/agents/AgentsView.test.tsx
index 3c2724f..0a1917b 100644
--- a/apps/web/src/features/agents/AgentsView.test.tsx
+++ b/apps/web/src/features/agents/AgentsView.test.tsx
@@ -66,6 +66,8 @@ describe("Agents view", () => {
 
     expect(html).toContain('type="button" aria-label="Open details for this Agent"');
     expect(html).toContain('aria-disabled="true" aria-label="Start a Session with this Agent"');
+    expect(html).toContain('<span class="ledger-session-header" role="columnheader">Session</span>');
+    expect(html).toContain('<span>Unavailable</span>');
     expect(html).toContain("Session unavailable: Current Core Session admission requires");
   });
 
@@ -91,6 +93,7 @@ describe("Agents view", () => {
     );
 
     expect(html).toContain('type="button" aria-label="Start a Session with this Agent"');
+    expect(html).toContain('<span>Start Session</span>');
     expect(html).not.toContain("Session unavailable:");
   });
 
diff --git a/apps/web/src/features/agents/AgentsView.tsx b/apps/web/src/features/agents/AgentsView.tsx
index 60f5fce..9150246 100644
--- a/apps/web/src/features/agents/AgentsView.tsx
+++ b/apps/web/src/features/agents/AgentsView.tsx
@@ -82,7 +82,7 @@ function AgentSessionStartAction({
   return (
     <span className="action-tooltip">
       <button
-        className="icon-button ghost agent-session-start"
+        className="button outline agent-session-start"
         type="button"
         onClick={() => {
           if (!blocker) onStart(agent.id);
@@ -90,13 +90,16 @@ function AgentSessionStartAction({
         disabled={busy}
         aria-disabled={blocker ? true : undefined}
         aria-label={`Start a Session with ${agent.name || "this Agent"}`}
-        aria-describedby={descriptionId}
+        aria-describedby={blocker ? descriptionId : undefined}
       >
-        <MessageSquare size={14} strokeWidth={1.5} />
+        <MessageSquare size={14} strokeWidth={1.5} aria-hidden="true" />
+        <span>{blocker ? "Unavailable" : "Start Session"}</span>
       </button>
-      <span className="action-tooltip-content" role="tooltip" id={descriptionId}>
-        {blocker ? `Session unavailable: ${blocker}` : "Start Session"}
-      </span>
+      {blocker ? (
+        <span className="action-tooltip-content" role="tooltip" id={descriptionId}>
+          Session unavailable: {blocker}
+        </span>
+      ) : null}
     </span>
   );
 }
@@ -372,7 +375,7 @@ export function AgentsView({
             <span role="columnheader">Model</span>
             <span role="columnheader">Tools</span>
             <span role="columnheader">Updated</span>
-            <span role="columnheader" aria-label="Actions" />
+            <span className="ledger-session-header" role="columnheader">Session</span>
           </div>
           <div className="ledger-body" role="rowgroup">
             {filteredAgents.map((agent) => (
diff --git a/apps/web/src/features/sessions/SessionsView.tsx b/apps/web/src/features/sessions/SessionsView.tsx
index 068a3fc..3adb482 100644
--- a/apps/web/src/features/sessions/SessionsView.tsx
+++ b/apps/web/src/features/sessions/SessionsView.tsx
@@ -39,7 +39,7 @@ import {
 import type { EnvironmentObservation } from "./environment/environment-state";
 import { ThreadItems } from "./items/ItemRenderers";
 import { TraceView } from "./trace/TraceView";
-import { TurnTimeline, type TurnTimelineLoadState } from "./turns/TurnTimeline";
+import type { TurnTimelineLoadState } from "./turns/TurnTimeline";
 import { SessionActionsDialog } from "./actions/SessionActionsDialog";
 
 export type StreamState = "idle" | "connecting" | "listening" | "recovering" | "failed";
@@ -218,6 +218,15 @@ function CancelOnlyBar({ busy, onCancel }: { busy: boolean; onCancel: () => void
   );
 }
 
+function ConversationActivity({ agentName }: { agentName: string }) {
+  return (
+    <div className="conversation-activity" role="status" aria-live="polite" aria-atomic="true">
+      <StatusIcon status="running" />
+      <span>{agentName} is working…</span>
+    </div>
+  );
+}
+
 function FunctionActionBar({
   actions,
   agentName,
@@ -660,14 +669,6 @@ export function SessionsView({
                   connectionActions={environmentConnections}
                 />
 
-                <TurnTimeline
-                  turns={turns}
-                  items={items}
-                  sessionUsage={selected.usage}
-                  loadState={turnState}
-                  error={turnError}
-                />
-
                 <div className="message-stack">
                   <ThreadItems items={items} agentName={selected.agent.name || "Agent"} />
                 </div>
@@ -755,6 +756,9 @@ export function SessionsView({
               <EnvironmentConnectionNotice action={action} key={`${action.environment_id}:${index}`} />
             ))}
             {unsupportedActionCount ? <UnsupportedActionNotice /> : null}
+            {selected.status === "in_progress" ? (
+              <ConversationActivity agentName={selected.agent.name || "Agent"} />
+            ) : null}
             {showCancelOnly ? (
               <CancelOnlyBar busy={busy} onCancel={cancel} />
             ) : null}
diff --git a/apps/web/src/features/sessions/environment/EnvironmentPanel.test.tsx b/apps/web/src/features/sessions/environment/EnvironmentPanel.test.tsx
index 1474901..b014227 100644
--- a/apps/web/src/features/sessions/environment/EnvironmentPanel.test.tsx
+++ b/apps/web/src/features/sessions/environment/EnvironmentPanel.test.tsx
@@ -64,11 +64,9 @@ function render(environment: AgentEnvironment, live: EnvironmentObservation | nu
 }
 
 describe("EnvironmentPanel", () => {
-  it("renders environment:none as Core-owned with no Workspace", () => {
+  it("does not render Environment or Workspace UI for environment:none", () => {
     const html = render({ type: "none" });
-    expect(html).toContain("Core-owned");
-    expect(html).toContain("No Workspace");
-    expect(html).not.toContain("file://");
+    expect(html).toBe("");
   });
 
   it("renders a canonical durable UUID for an uppercase Session Environment identity", () => {
diff --git a/apps/web/src/features/sessions/environment/EnvironmentPanel.tsx b/apps/web/src/features/sessions/environment/EnvironmentPanel.tsx
index 343ab09..101b8db 100644
--- a/apps/web/src/features/sessions/environment/EnvironmentPanel.tsx
+++ b/apps/web/src/features/sessions/environment/EnvironmentPanel.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Folder, HardDrive, Server, TerminalSquare } from "lucide-react";
+import { ExternalLink, Folder, HardDrive, TerminalSquare } from "lucide-react";
 
 import type {
   AgentEnvironment,
@@ -100,15 +100,7 @@ export function EnvironmentPanel({
   const type = typeof raw.type === "string" ? raw.type : null;
 
   if (type === "none") {
-    return (
-      <section className="environment-panel environment-panel-none" aria-label="Environment and Workspace status">
-        <div className="environment-panel-heading">
-          <Server size={15} strokeWidth={1.5} aria-hidden="true" />
-          <div><strong>Core-owned</strong><span>No Workspace</span></div>
-        </div>
-        <p>Core owns runtime placement. This Session has no Environment execution directory.</p>
-      </section>
-    );
+    return null;
   }
 
   if (type !== "self_hosted") {
diff --git a/apps/web/src/features/sessions/trace/TraceView.test.tsx b/apps/web/src/features/sessions/trace/TraceView.test.tsx
index 9472432..798e00c 100644
--- a/apps/web/src/features/sessions/trace/TraceView.test.tsx
+++ b/apps/web/src/features/sessions/trace/TraceView.test.tsx
@@ -100,7 +100,19 @@ describe("Trace workbench presentation", () => {
     expect(html).toContain("Tool calls");
     expect(html).toContain("Durable order");
     expect(html).toContain("Equal-width sequence · not time-scaled");
-    expect(html).toContain("Per-item timing is unavailable");
+    expect(html).toContain("Core reports Turn wall-clock time, but not per-item timing");
+    expect(html).toContain("Turn diagnostics");
+    expect(html).toContain("Usage, timestamps, errors, and live elapsed");
+    expect(html).toContain("Session aggregate usage");
+    expect(html).toContain('data-duration-state="unavailable"');
+    expect(html).toContain('title="Core does not provide per-item timing."');
+    expect(html).toContain('<span aria-hidden="true">—</span>');
+    expect(html).toContain("Per-item timing not provided by Core.");
+    expect(html).toContain('data-duration-state="available"');
+    expect(html).toContain("Tool-reported duration: 42 ms.");
+    expect(html).toContain("Turn 2 s");
+    expect(html).toContain("Turn time unknown");
+    expect(html).not.toContain("Turn Unavailable");
     expect(html).toContain("Configured instructions");
     expect(html).toContain("Turn 1");
     expect(html).toContain("Turn 2");
diff --git a/apps/web/src/features/sessions/trace/TraceView.tsx b/apps/web/src/features/sessions/trace/TraceView.tsx
index d304d81..bc2ded4 100644
--- a/apps/web/src/features/sessions/trace/TraceView.tsx
+++ b/apps/web/src/features/sessions/trace/TraceView.tsx
@@ -30,7 +30,7 @@ import { StatusIcon, type StatusKind } from "../../../components/StatusIcon";
 import { ApplyPatchDiffViewer } from "../items/ApplyPatchDiffViewer";
 import { parseParsarApplyPatch } from "../items/apply-patch";
 import type { SessionDetailState } from "../SessionsView";
-import type { TurnTimelineLoadState } from "../turns/TurnTimeline";
+import { TurnTimeline, type TurnTimelineLoadState } from "../turns/TurnTimeline";
 import {
   buildTraceModel,
   filterTraceModel,
@@ -120,6 +120,43 @@ function valueLabel<T>(value: TraceValue<T>, format: (available: T) => string =
   return value.state === "unknown" ? "Unknown" : "Unavailable";
 }
 
+function rowDurationPresentation(value: TraceValue<number>): {
+  visible: string;
+  assistive: string;
+  title: string;
+} {
+  if (value.state === "available" && value.value !== null) {
+    const duration = formatDuration(value.value);
+    return {
+      visible: duration,
+      assistive: `Tool-reported duration: ${duration}.`,
+      title: `Tool-reported duration: ${duration}`,
+    };
+  }
+  if (value.state === "unknown") {
+    return {
+      visible: "Unknown",
+      assistive: "Reported duration is unknown.",
+      title: "The reported duration could not be interpreted.",
+    };
+  }
+  return {
+    visible: "—",
+    assistive: "Per-item timing not provided by Core.",
+    title: "Core does not provide per-item timing.",
+  };
+}
+
+function durationDetailLabel(value: TraceValue<number>): string {
+  if (value.state === "available" && value.value !== null) return formatDuration(value.value);
+  return value.state === "unknown" ? "Unknown" : "Not provided by Core";
+}
+
+function turnDurationLabel(value: TraceValue<number>): string {
+  if (value.state === "available" && value.value !== null) return `Turn ${formatDuration(value.value)}`;
+  return value.state === "unknown" ? "Turn time unknown" : "Turn time not provided";
+}
+
 function rowExcerpt(row: TraceRow): string {
   if (row.text.state === "available" && row.text.value) return row.text.value;
   if (row.tool?.payload.state === "available") return "Payload available";
@@ -186,7 +223,7 @@ function TraceSummaryPanel({ row, group, session }: { row: TraceRow; group: Trac
         <div><dt>Status</dt><dd>{row.status ? titleCase(row.status) : "Not applicable"}</dd></div>
         <div><dt>Group</dt><dd>{group.title}</dd></div>
         <div><dt>Configured model</dt><dd><code>{configuredModel}</code></dd></div>
-        <div><dt>Item timing</dt><dd>Unavailable</dd></div>
+        <div><dt>Item timing</dt><dd>Not provided by Core</dd></div>
         {row.durationMs.state === "available" && row.durationMs.value !== null ? (
           <div><dt>Tool-reported duration</dt><dd>{formatDuration(row.durationMs.value)}</dd></div>
         ) : null}
@@ -220,9 +257,9 @@ function TraceTimingPanel({ row, group }: { row: TraceRow; group: TraceGroup })
         <div><dt>Turn started</dt><dd>{formatTimestamp(group.turn?.started_at)}</dd></div>
         <div><dt>Turn completed</dt><dd>{formatTimestamp(group.turn?.completed_at)}</dd></div>
         <div><dt>Turn wall clock</dt><dd>{valueLabel(group.turnWallClockDurationMs, formatDuration)}</dd></div>
-        <div><dt>Item started</dt><dd>Unavailable</dd></div>
-        <div><dt>Item completed</dt><dd>Unavailable</dd></div>
-        <div><dt>Tool-reported duration</dt><dd>{valueLabel(row.durationMs, formatDuration)}</dd></div>
+        <div><dt>Item started</dt><dd>Not provided by Core</dd></div>
+        <div><dt>Item completed</dt><dd>Not provided by Core</dd></div>
+        <div><dt>Tool-reported duration</dt><dd>{durationDetailLabel(row.durationMs)}</dd></div>
       </dl>
       <p>Turn timestamps are server resources. Tool duration has no public absolute start, so it is not positioned on a time-scaled waterfall.</p>
     </div>
@@ -387,9 +424,23 @@ export function TraceView({
 
       <div className="trace-contract-note" role="note">
         <Clock3 size={14} strokeWidth={1.5} aria-hidden="true" />
-        <span>Per-item timing is unavailable. The overview preserves Core order and does not imply model, tool, or first-token timing.</span>
+        <span>Core reports Turn wall-clock time, but not per-item timing. Rows preserve durable order and are not time-scaled.</span>
       </div>
 
+      <details className="trace-turn-diagnostics">
+        <summary>
+          <span><strong>Turn diagnostics</strong><small>Usage, timestamps, errors, and live elapsed</small></span>
+          <span>{turns.length} observed {turns.length === 1 ? "Turn" : "Turns"}</span>
+        </summary>
+        <TurnTimeline
+          turns={turns}
+          items={items}
+          sessionUsage={session.usage}
+          loadState={turnState}
+          error={turnError}
+        />
+      </details>
+
       {turnState === "loading" || detailState === "loading" ? (
         <p className="trace-load-state" role="status">Loading complete durable Turn and Item history…</p>
       ) : null}
@@ -410,11 +461,15 @@ export function TraceView({
                 <strong id={`${group.id}-title`}>{group.title}</strong>
                 {group.turn && groupStatusKind ? <StatusIcon status={groupStatusKind} title={`Turn status: ${titleCase(group.turn.status)}`} /> : null}
                 {group.turn ? <span>{titleCase(group.turn.status)}</span> : null}
-                <span className="trace-group-duration">{valueLabel(group.turnWallClockDurationMs, formatDuration)}</span>
+                {group.turn ? (
+                  <span className="trace-group-duration" title="Turn wall-clock duration">{turnDurationLabel(group.turnWallClockDurationMs)}</span>
+                ) : null}
               </header>
               {group.rows.length ? (
                 <ol>
-                  {group.rows.map((row) => (
+                  {group.rows.map((row) => {
+                    const duration = rowDurationPresentation(row.durationMs);
+                    return (
                     <li key={row.id}>
                       <button
                         type="button"
@@ -431,10 +486,14 @@ export function TraceView({
                           <small>{rowExcerpt(row)}</small>
                         </span>
                         {row.status ? <StatusIcon status={itemStatusKind(row.status)} title={`Item status: ${titleCase(row.status)}`} /> : null}
-                        <span className="trace-row-duration">{valueLabel(row.durationMs, formatDuration)}</span>
+                        <span className="trace-row-duration" data-duration-state={row.durationMs.state} title={duration.title}>
+                          <span aria-hidden="true">{duration.visible}</span>
+                          <span className="trace-visually-hidden">{duration.assistive}</span>
+                        </span>
                       </button>
                     </li>
-                  ))}
+                    );
+                  })}
                 </ol>
               ) : <p className="trace-group-empty">No durable Items reported for this Turn.</p>}
             </section>
diff --git a/apps/web/src/features/sessions/turns/TurnTimeline.test.tsx b/apps/web/src/features/sessions/turns/TurnTimeline.test.tsx
index 186c050..e79942d 100644
--- a/apps/web/src/features/sessions/turns/TurnTimeline.test.tsx
+++ b/apps/web/src/features/sessions/turns/TurnTimeline.test.tsx
@@ -102,7 +102,7 @@ describe("Turn timeline presentation", () => {
 
     expect(html).toContain("2 linked Items");
     expect(html).toContain("Safe durable failure");
-    expect(html).toContain("Conversation Items remain visible below.");
+    expect(html).toContain("Durable conversation Items remain available in the Conversation tab.");
     expect(html).toContain("1 Item is not associated with an observed Turn yet.");
   });
 
diff --git a/apps/web/src/features/sessions/turns/TurnTimeline.tsx b/apps/web/src/features/sessions/turns/TurnTimeline.tsx
index 8eb80f1..7d82344 100644
--- a/apps/web/src/features/sessions/turns/TurnTimeline.tsx
+++ b/apps/web/src/features/sessions/turns/TurnTimeline.tsx
@@ -144,7 +144,7 @@ function TurnCard({ turn, itemCount, now }: { turn: AgentTurn; itemCount: number
           <strong>Turn error</strong>
           <code>{error.code}</code>
           <p>{error.message}</p>
-          <small>Conversation Items remain visible below.</small>
+          <small>Durable conversation Items remain available in the Conversation tab.</small>
         </div>
       ) : null}
 
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 2e8282c..eae767c 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -623,7 +623,7 @@ html[data-theme="dark"] .brand-mark-dark {
 .ledger-row {
   display: grid;
   grid-template-columns:
-    minmax(220px, 2fr) minmax(140px, 1fr) 72px 100px 0;
+    minmax(220px, 2fr) minmax(140px, 1fr) 72px 100px 124px;
   min-width: 760px;
   align-items: center;
   padding: 0 14px 0 24px;
@@ -805,20 +805,16 @@ html[data-theme="dark"] .brand-mark-dark {
   text-align: right;
 }
 
+.ledger-session-header {
+  text-align: right;
+}
+
 .ledger-actions {
-  position: absolute;
-  top: 50%;
-  right: 16px;
   display: flex;
+  min-width: 0;
   min-height: 28px;
   align-items: center;
   justify-content: flex-end;
-  padding: 0 2px;
-  background: var(--surface);
-  border-radius: 6px;
-  opacity: 0;
-  transform: translateY(-50%);
-  transition: opacity 150ms var(--ease-settle);
 }
 
 .skeleton {
@@ -960,16 +956,16 @@ html[data-theme="dark"] .brand-mark-dark {
   gap: 8px;
 }
 
-.ledger-row:hover .ledger-actions,
-.ledger-row:has(:focus-visible) .ledger-actions {
-  opacity: 1;
-}
-
 .action-tooltip {
   position: relative;
   display: inline-flex;
 }
 
+.ledger-actions .action-tooltip,
+.agent-session-start {
+  width: 100%;
+}
+
 .action-tooltip-content {
   position: absolute;
   top: calc(100% + 4px);
@@ -1653,6 +1649,91 @@ html[data-theme="dark"] .brand-mark-dark {
   flex: 0 0 auto;
 }
 
+.trace-turn-diagnostics {
+  flex: 0 0 auto;
+  margin: 10px 16px 0;
+  overflow: hidden;
+  background: var(--surface-subtle);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+}
+
+.trace-turn-diagnostics > summary {
+  position: relative;
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 11px 7px 28px;
+  gap: 12px;
+  color: var(--fg);
+  cursor: pointer;
+  list-style: none;
+}
+
+.trace-turn-diagnostics > summary::before {
+  position: absolute;
+  left: 11px;
+  content: "›";
+  color: var(--fg-muted);
+  font-size: 16px;
+  line-height: 1;
+  transform-origin: center;
+  transition: transform 120ms ease;
+}
+
+.trace-turn-diagnostics > summary::-webkit-details-marker {
+  display: none;
+}
+
+.trace-turn-diagnostics > summary > span:first-child {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.trace-turn-diagnostics > summary strong {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.trace-turn-diagnostics > summary small,
+.trace-turn-diagnostics > summary > span:last-child {
+  color: var(--fg-muted);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.trace-turn-diagnostics > summary > span:last-child {
+  flex: 0 0 auto;
+}
+
+.trace-turn-diagnostics[open] > summary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-subtle);
+  border-bottom: 1px solid var(--line);
+}
+
+.trace-turn-diagnostics[open] {
+  max-height: min(46vh, 460px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.trace-turn-diagnostics[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.trace-turn-diagnostics > .turn-timeline {
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
 .trace-load-state,
 .trace-load-error {
   flex: 0 0 auto;
@@ -1831,6 +1912,18 @@ html[data-theme="dark"] .brand-mark-dark {
   white-space: nowrap;
 }
 
+.trace-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
 .trace-group-empty,
 .trace-empty {
   margin: 0;
@@ -2160,7 +2253,6 @@ html[data-theme="dark"] .brand-mark-dark {
 }
 
 .environment-panel-heading span,
-.environment-panel-none > p,
 .environment-panel-unavailable > p {
   color: var(--fg-muted);
   font-size: 12px;
@@ -2351,7 +2443,6 @@ html[data-theme="dark"] .brand-mark-dark {
   border-radius: 2px;
 }
 
-.environment-panel-none,
 .environment-panel-unavailable {
   display: flex;
   align-items: center;
@@ -2359,7 +2450,6 @@ html[data-theme="dark"] .brand-mark-dark {
   gap: 16px;
 }
 
-.environment-panel-none > p,
 .environment-panel-unavailable > p {
   max-width: 440px;
   margin: 0;
@@ -3312,6 +3402,24 @@ button.trace-step-row:hover {
   background: var(--surface);
 }
 
+.conversation-activity {
+  display: flex;
+  width: 100%;
+  max-width: 736px;
+  min-height: 24px;
+  align-items: center;
+  margin: 0 auto 8px;
+  padding: 0 4px;
+  gap: 7px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.conversation-activity > .status-icon {
+  color: var(--accent);
+}
+
 .environment-connection-notice {
   width: 100%;
   max-width: 736px;
@@ -3960,7 +4068,7 @@ button.trace-step-row:hover {
 
   .agent-ledger .ledger-header,
   .agent-ledger .ledger-row {
-    grid-template-columns: minmax(0, 1fr) 36px;
+    grid-template-columns: minmax(0, 1fr) 116px;
     min-width: 0;
     padding-right: 8px;
     padding-left: 12px;
@@ -3976,9 +4084,7 @@ button.trace-step-row:hover {
   }
 
   .agent-ledger .ledger-actions {
-    position: static;
-    opacity: 1;
-    transform: none;
+    min-width: 0;
   }
 
   .agents-loading {
@@ -4070,6 +4176,11 @@ button.trace-step-row:hover {
     padding-left: 10px;
   }
 
+  .session-page .trace-turn-diagnostics {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
   .session-page .trace-workbench.has-detail .trace-workspace {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -4116,13 +4227,11 @@ button.trace-step-row:hover {
   }
 
   .session-page .environment-panel-footer,
-  .session-page .environment-panel-none,
   .session-page .environment-panel-unavailable {
     align-items: flex-start;
     flex-direction: column;
   }
 
-  .session-page .environment-panel-none > p,
   .session-page .environment-panel-unavailable > p {
     text-align: left;
   }
diff --git a/docs/core-connection.md b/docs/core-connection.md
index 5217dd7..1af46eb 100644
--- a/docs/core-connection.md
+++ b/docs/core-connection.md
@@ -417,7 +417,7 @@ HTTP-only start it is safe to enable execution and submit the message. A timeout
 disconnected write is different. The client never retries automatically. The current
 UI retains the original payload and idempotency key in memory only for an explicit,
 byte-for-byte unchanged manual resend; editing the payload creates a new operation.
-Refresh the durable Session, Items, and Turn timeline, and use Core logs when the
+Refresh the durable Session and Items, inspect Trace → Turn diagnostics, and use Core logs when the
 public resources are insufficient before deciding whether another submission is safe.
 
 ## Credential ownership
@@ -501,11 +501,11 @@ In Agents Core Web:
 2. Create an Agent using a model known to the selected native runtime.
 3. Create an `environment:none` Session and send one text message.
 4. Confirm the events POST returns `204` and live lifecycle/output events arrive.
-5. Confirm Items contain the user and assistant messages, then confirm the Turn
-   timeline shows the terminal Turn snapshot, server wall-clock timestamps, and
-   reported Usage. The timeline may also advance from an exact live lifecycle event;
-   reload or use the corresponding authenticated API read for independent durable
-   proof.
+5. Confirm Items contain the user and assistant messages, then open **Trace → Turn
+   diagnostics** and confirm its Turn timeline shows the terminal Turn snapshot,
+   server wall-clock timestamps, and reported Usage. The diagnostics may also advance
+   from an exact live lifecycle event; reload or use the corresponding authenticated
+   API read for independent durable proof.
 6. Reload and confirm the completed state is recovered from resource reads.
 
 A completed Turn plus durable Item readback is execution evidence. Successful Agent
diff --git a/docs/protocol-coverage.md b/docs/protocol-coverage.md
index b2eebf3..80fb88b 100644
--- a/docs/protocol-coverage.md
+++ b/docs/protocol-coverage.md
@@ -88,6 +88,10 @@ the Core key binding. Agents Core Web's local proxy owns the bearer server-side.
 - Saved Agent names are limited to 128 Unicode characters. Agent metadata is limited
   to 16 string pairs, 64 Unicode characters per key, and 512 per value; the Web
   enforces those limits before a write.
+- A selected `environment:none` Session renders no Environment or Workspace panel;
+  absence of that optional UI is not an error and does not block conversation use.
+  Read-only Environment status is shown only for a real `self_hosted` projection or
+  for an unsupported Environment variant that must fail closed.
 - Parsar Core at the audited revision supports Session-bound `self_hosted` data and
   its documented event inputs. This Web does not create or connect that profile; it
   safely renders selected Sessions that already carry one. That read-only projection
@@ -274,7 +278,9 @@ read keeps the existing conversation usable.
   `limit=100&order=asc`, follows `has_more` using the last returned Turn ID when the
   optional list cursors are absent, and rejects a repeated/cyclic cursor or a Turn
   scoped to another Session. Reads are abortable and never retried automatically.
-- The timeline presents observed Core snapshots for `queued`, `in_progress`,
+- Trace keeps the complete Turn timeline in a collapsed **Turn diagnostics**
+  disclosure so Conversation remains focused on messages and composing. The
+  diagnostics present observed Core snapshots for `queued`, `in_progress`,
   `waiting`, `completed`, `failed`, and `cancelled`. Its all-pages read supplies the
   authoritative creation order, while a newer exact lifecycle SSE snapshot may
   advance a Turn before that read settles. Live projection is limited to exact