refactor: use assistant transcript in Scene 2

web/apps/console/src/presentation/opening/ProblemLoopScene.test.tsx

@@ -1,4 +1,5 @@
 import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it } from "vitest";
 import { findBeat, findScene } from "../storyboard.js";
 import { ProblemLoopScene } from "./ProblemLoopScene.js";
@@ -8,22 +9,18 @@ const problemScene = findScene("problem")!;
 afterEach(() => cleanup());
 
 describe("ProblemLoopScene", () => {
-  it("renders the direct-action side as a chat-style tool transcript", () => {
+  it("uses the assistant transcript surface for the direct-action side", async () => {
+    const user = userEvent.setup();
     render(<ProblemLoopScene scene={problemScene} beat={findBeat("problem", "direct-actions")!} />);
 
-    const transcript = screen.getByRole("list", { name: /one-off chat and tool transcript/i });
+    const transcript = screen.getByRole("log", { name: /one-off assistant transcript/i });
-    const turns = within(transcript).getAllByRole("listitem");
+    expect(transcript).toHaveClass("assistant-operator-thread");
+    expect(within(transcript).getByText("Can you finish this workspace task?")).toBeInTheDocument();
+    expect(within(transcript).getByRole("button", { name: /workspace.run_once/i })).toBeInTheDocument();
+    expect(within(transcript).getByText("Reports success, but leaves no reusable workflow behind.")).toBeInTheDocument();
 
-    expect(turns).toHaveLength(5);
+    await user.click(within(transcript).getByRole("button", { name: /workspace.run_once/i }));
-    expect(turns[0]).toHaveAttribute("data-turn-kind", "user");
+    expect(within(transcript).getByText(/ephemeral/i)).toBeInTheDocument();
-    expect(turns[1]).toHaveAttribute("data-turn-kind", "assistant");
-    expect(turns[2]).toHaveAttribute("data-turn-kind", "tool");
-    expect(turns[3]).toHaveAttribute("data-turn-kind", "observation");
-    expect(turns[4]).toHaveAttribute("data-turn-kind", "answer");
-    expect(within(transcript).getByText("User")).toBeInTheDocument();
-    expect(within(transcript).getByText("Tool call")).toBeInTheDocument();
-    expect(within(transcript).getByText("Observation")).toBeInTheDocument();
-    expect(screen.queryByRole("group", { name: /^Action sequence$/i })).not.toBeInTheDocument();
   });
 
   it("renders reusable automation as a durable workflow blueprint", () => {

web/apps/console/src/presentation/opening/ProblemLoopScene.tsx

@@ -1,34 +1,33 @@
+import type { AgentMessage } from "../../demo/agent/events.js";
+import type { AgentToolName } from "../../demo/agent/tools.js";
+import { AssistantOperatorThread } from "../chat/AssistantOperatorThread.js";
 import { StageCaption } from "../StageCaption.js";
 import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js";
 import { ConceptNode, ConceptRail } from "./ConceptPrimitives.js";
 
-const toolLoopTurns = [
+const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
   {
-    kind: "user",
+    id: "scene-2-user",
-    label: "User",
+    role: "user",
-    detail: "Can you finish this workspace task?",
+    parts: [{ type: "text", text: "Can you finish this workspace task?" }],
   },
   {
-    kind: "assistant",
+    id: "scene-2-assistant",
-    label: "Assistant",
+    role: "assistant",
-    detail: "Plans the next direct action.",
+    parts: [
-  },
+      { type: "text", text: "I can solve the immediate request." },
       {
-    kind: "tool",
+        type: "tool-call",
-    label: "Tool call",
+        call: {
-    detail: "Runs one operation against the workspace.",
+          id: "scene-2-tool",
+          name: "workspace.run_once" as AgentToolName,
+          input: { persistence: "ephemeral", reusable_workflow: false },
         },
-  {
-    kind: "observation",
-    label: "Observation",
-    detail: "Reads the result and decides what to do next.",
       },
-  {
+      { type: "text", text: "Reports success, but leaves no reusable workflow behind." },
-    kind: "answer",
+    ],
-    label: "Answer",
-    detail: "Reports success, but leaves no reusable workflow behind.",
   },
-] as const;
+];
 
 const automationProof = ["schemas", "bindings", "records"] as const;
 
@@ -55,14 +54,9 @@ export const ProblemLoopScene = ({ scene, beat }: ProblemLoopSceneProps) => {
             <h2>Chat + tool loop</h2>
             <p>Good at getting through one request.</p>
           </header>
-          <ol className="problem-chat-transcript" aria-label="one-off chat and tool transcript">
+          <div aria-label="one-off assistant transcript" role="group">
-            {toolLoopTurns.map((turn) => (
+            <AssistantOperatorThread mode="dock" messages={oneOffToolLoopMessages} ariaLabel="one-off assistant transcript" />
-              <li key={turn.kind} className="problem-chat-turn" data-turn-kind={turn.kind}>
+          </div>
-                <span className="problem-chat-turn__label">{turn.label}</span>
-                <p>{turn.detail}</p>
-              </li>
-            ))}
-          </ol>
           <p className="problem-artifact-note">The useful work lives in the conversation history.</p>
         </article>
 

web/apps/console/src/presentation/presentation.css

@@ -1466,47 +1466,6 @@
   font: 0.86rem/1.3 var(--font-interface);
 }
 
-.problem-chat-transcript {
-  display: grid;
-  align-content: start;
-  gap: 0.45rem;
-  min-height: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.problem-chat-turn {
-  display: grid;
-  grid-template-columns: 5.8rem minmax(0, 1fr);
-  gap: 0.65rem;
-  align-items: start;
-  border: 1px solid color-mix(in oklch, var(--stage-line) 62%, transparent);
-  border-radius: 0.55rem;
-  background: color-mix(in oklch, var(--stage-canvas) 72%, transparent);
-  padding: 0.46rem 0.55rem;
-}
-
-.problem-chat-turn[data-turn-kind="tool"] {
-  border-color: color-mix(in oklch, var(--accent-cyan) 44%, var(--stage-line));
-  background: color-mix(in oklch, var(--accent-cyan) 9%, var(--stage-canvas));
-}
-
-.problem-chat-turn[data-turn-kind="observation"] {
-  border-style: dashed;
-}
-
-.problem-chat-turn__label {
-  color: var(--accent-cyan);
-  font: 700 0.68rem/1.1 var(--font-evidence);
-}
-
-.problem-chat-turn p {
-  margin: 0;
-  color: var(--text-primary);
-  font: 0.79rem/1.25 var(--font-interface);
-}
-
 .problem-blueprint .concept-rail {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));