Add expandable command and file-change activity boxes

apps/web/src/components/chat/MessagesTimeline.logic.ts

@@ -8,6 +8,7 @@ import {
 } from "../../session-logic";
 import { type ChatMessage, type ProposedPlan, type TurnDiffSummary } from "../../types";
 import { type MessageId, type OrchestrationLatestTurn, type TurnId } from "@t3tools/contracts";
+import { formatWorkspaceRelativePath } from "../../filePathDisplay";
 
 export const MAX_VISIBLE_WORK_LOG_ENTRIES = 1;
 export const TIMELINE_MINIMAP_ITEM_SPACING = 8;
@@ -166,6 +167,83 @@ export function normalizeCompactToolLabel(value: string): string {
   return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim();
 }
 
+function capitalizePhrase(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return value;
+  }
+  return `${trimmed.charAt(0).toUpperCase()}${trimmed.slice(1)}`;
+}
+
+export function deriveToolWorkEntryHeading(workEntry: WorkLogEntry): string {
+  if (!workEntry.toolTitle) {
+    return capitalizePhrase(normalizeCompactToolLabel(workEntry.label));
+  }
+  return capitalizePhrase(normalizeCompactToolLabel(workEntry.toolTitle));
+}
+
+export function deriveWorkEntryPreview(
+  workEntry: Pick<WorkLogEntry, "detail" | "command" | "changedFiles" | "itemType" | "requestKind">,
+  workspaceRoot: string | undefined,
+): string | null {
+  const changedFilesPreview = deriveChangedFilesPreview(workEntry, workspaceRoot);
+  if (workEntry.itemType === "file_change" || workEntry.requestKind === "file-change") {
+    return changedFilesPreview ?? workEntry.command ?? workEntry.detail ?? null;
+  }
+  if (workEntry.command) return workEntry.command;
+  if (workEntry.detail) return workEntry.detail;
+  return changedFilesPreview;
+}
+
+export interface DerivedWorkEntryDisplay {
+  heading: string;
+  preview: string | null;
+  displayText: string;
+}
+
+export function deriveWorkEntryDisplay(
+  workEntry: WorkLogEntry,
+  workspaceRoot: string | undefined,
+): DerivedWorkEntryDisplay {
+  const heading = deriveToolWorkEntryHeading(workEntry);
+  const rawPreview = deriveWorkEntryPreview(workEntry, workspaceRoot);
+  const preview =
+    rawPreview &&
+    normalizeCompactToolLabel(rawPreview).toLowerCase() ===
+      normalizeCompactToolLabel(heading).toLowerCase()
+      ? null
+      : rawPreview;
+
+  return {
+    heading,
+    preview,
+    displayText: preview ? `${heading} - ${preview}` : heading,
+  };
+}
+
+function deriveChangedFilesPreview(
+  workEntry: Pick<WorkLogEntry, "changedFiles">,
+  workspaceRoot: string | undefined,
+): string | null {
+  if ((workEntry.changedFiles?.length ?? 0) === 0) return null;
+  const [firstPath] = workEntry.changedFiles ?? [];
+  if (!firstPath) return null;
+  const displayPath = formatWorkspaceRelativePath(firstPath, workspaceRoot);
+  return workEntry.changedFiles!.length === 1
+    ? displayPath
+    : `${displayPath} +${workEntry.changedFiles!.length - 1} more`;
+}
+
+export function shouldToggleWorkEntryRowFromKeyDown({
+  key,
+  targetIsCurrentTarget,
+}: {
+  key: string;
+  targetIsCurrentTarget: boolean;
+}): boolean {
+  return targetIsCurrentTarget && (key === "Enter" || key === " ");
+}
+
 export function resolveAssistantMessageCopyState({
   text,
   showCopyButton,

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -159,6 +159,8 @@ beforeAll(() => {
     documentElement: {
       classList,
       offsetHeight: 0,
+      removeAttribute: () => {},
+      setAttribute: () => {},
     },
   });
 });
@@ -459,6 +461,132 @@ describe("MessagesTimeline", () => {
     expect(markup).not.toContain("C:/Users/mike/dev-stuff/t3code/apps/web/src/session-logic.ts");
   });
 
+  it("renders command work entries as expandable rows", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const stdout = Array.from({ length: 45 }, (_, index) => `stdout ${index + 1}`).join("\n");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "work",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            entry: {
+              id: "work-1",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              label: "Ran command",
+              tone: "tool",
+              itemType: "command_execution",
+              command: "vp test",
+              stdout,
+              stderr: "warning",
+              exitCode: 0,
+              durationMs: 1234,
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("Ran command");
+    expect(markup).toContain("vp test");
+    expect(markup).toContain('aria-expanded="false"');
+    expect(markup).toContain('aria-label="Expand Ran command - vp test"');
+  });
+
+  it("renders dynamic tool command metadata as expandable command rows", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "work",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            entry: {
+              id: "work-1",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              label: "Dynamic tool",
+              tone: "tool",
+              itemType: "dynamic_tool_call",
+              command: "vp test",
+              stdout: "passed",
+              exitCode: 0,
+              durationMs: 1234,
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("Dynamic tool");
+    expect(markup).toContain("vp test");
+    expect(markup).toContain('aria-expanded="false"');
+    expect(markup).toContain('aria-label="Expand Dynamic tool - vp test"');
+  });
+
+  it("does not render typed non-command stdout as command details", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "work",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            entry: {
+              id: "work-1",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              label: "Web search",
+              tone: "tool",
+              itemType: "web_search",
+              stdout: "search results",
+              durationMs: 1234,
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("Web search");
+    expect(markup).not.toContain('aria-expanded="false"');
+    expect(markup).not.toContain('aria-label="Expand Web search"');
+  });
+
+  it("renders file-change work entries as expandable rows", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "work",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            entry: {
+              id: "work-1",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              label: "Changed files",
+              tone: "tool",
+              itemType: "file_change",
+              changedFiles: ["apps/web/src/session-logic.ts"],
+              patch:
+                "diff --git a/apps/web/src/session-logic.ts b/apps/web/src/session-logic.ts\n--- a/apps/web/src/session-logic.ts\n+++ b/apps/web/src/session-logic.ts\n@@ -1 +1 @@\n-old\n+new\n",
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("Changed files");
+    expect(markup).toContain("apps/web/src/session-logic.ts");
+    expect(markup).toContain('aria-expanded="false"');
+    expect(markup).toContain('aria-label="Expand Changed files - apps/web/src/session-logic.ts"');
+  });
+
   it("renders review comment contexts as structured cards instead of raw tags", async () => {
     const { MessagesTimeline } = await import("./MessagesTimeline");
     const markup = renderToStaticMarkup(