refactor: polish assistant-ui chat surface and rename tools

- Remove useExternalStoreRuntime (caused duplicate ID crashes on re-render)
- Render messages directly from projected data for read-only transcripts
- ToolCard open by default for single tools, collapsed inside ToolGroupCard
- Remove result bubble from ToolCard (was unstyled)
- Move run button below thread (chat-style layout)
- Add user/assistant visual distinction (right-aligned cyan bubble for user)
- Rename startPreparedReportRun -> startRun
- Add 3 workflow.run_once tool calls to Scene 2
- Add overflow handling with max-height + hidden overflow
- Update all tests for new behavior

web/apps/console/src/demo/agent/events.test.ts

@@ -18,19 +18,19 @@ describe("agent events", () => {
   });
 
   it("creates tool call, tool result, and presentation action parts", () => {
-    expect(agentToolCallPart("c1", "startPreparedReportRun", { deploymentId: "lda_report_case_study.default" })).toEqual({
+    expect(agentToolCallPart("c1", "startRun", { deploymentId: "lda_report_case_study.default" })).toEqual({
       type: "tool-call",
       call: {
         id: "c1",
-        name: "startPreparedReportRun",
+        name: "startRun",
         input: { deploymentId: "lda_report_case_study.default" },
       },
     });
-    expect(agentToolResultPart("c1", "startPreparedReportRun", "success", { runId: "run_1" })).toEqual({
+    expect(agentToolResultPart("c1", "startRun", "success", { runId: "run_1" })).toEqual({
       type: "tool-result",
       result: {
         callId: "c1",
-        name: "startPreparedReportRun",
+        name: "startRun",
         status: "success",
         output: { runId: "run_1" },
       },

web/apps/console/src/demo/agent/preparedRecipeDriver.test.ts

@@ -16,7 +16,7 @@ describe("prepared recipe driver", () => {
     const messages = await collect(runPreparedRecipeReplay(recording, signal, async () => ({ approved: true, comment: "test" })));
     expect(messages[0]?.role).toBe("user");
     expect(messages.some((message) =>
-      message.parts.some((part) => part.type === "tool-call" && part.call.name === "startPreparedReportRun"),
+      message.parts.some((part) => part.type === "tool-call" && part.call.name === "startRun"),
     )).toBe(true);
     expect(messages.some((message) =>
       message.parts.some((part) => part.type === "presentation-action" && part.action.type === "selectWorkflowNode"),
@@ -35,7 +35,7 @@ describe("prepared recipe driver", () => {
     );
     expect(toolNames).toEqual([
       "inspectDeployment",
-      "startPreparedReportRun",
+      "startRun",
       "selectWorkflowNode",
       "resumeIssueReview",
       "readRunTrace",
@@ -92,7 +92,7 @@ describe("prepared recipe driver", () => {
     );
     expect(toolCalls).toEqual([
       "inspectDeployment",
-      "startPreparedReportRun",
+      "startRun",
       "selectWorkflowNode",
       "resumeIssueReview",
     ]);

web/apps/console/src/demo/agent/preparedRecipeDriver.ts

@@ -58,7 +58,7 @@ export async function* runPreparedRecipeReplay(
       case "inspectDeployment":
         yield emitToolStep(step.id, step.toolName, { deploymentId }, { deploymentId });
         break;
-      case "startPreparedReportRun":
+      case "startRun":
         yield emitToolStep(step.id, step.toolName, { deploymentId }, {
           runId,
           eventId: runStart?.id ?? null,

web/apps/console/src/demo/agent/recipes.ts

@@ -2,7 +2,7 @@ import { LDA_REPORT_DEPLOYMENT_ID } from "../ldaReportDemoConfig.js";
 import type { PresentationToolName, WorkflowToolName } from "./tools.js";
 
 export type RecipeTool =
-  | Extract<WorkflowToolName, "inspectDeployment" | "startPreparedReportRun" | "resumeIssueReview" | "readRunTrace">
+  | Extract<WorkflowToolName, "inspectDeployment" | "startRun" | "resumeIssueReview" | "readRunTrace">
   | Extract<PresentationToolName, "selectWorkflowNode">;
 
 type SelectWorkflowNodeStep = {
@@ -47,7 +47,7 @@ export const PREPARE_THESIS_REPORT_RECIPE: PreparedRecipe = {
     {
       id: "start-run",
       narration: "I will start the prepared workflow run.",
-      toolName: "startPreparedReportRun",
+      toolName: "startRun",
     },
     {
       id: "focus-interrupt",

web/apps/console/src/demo/agent/timelineAgent.ts

@@ -96,7 +96,7 @@ export const useTimelineAgent = (
     setMessages((current) => appendToolMessage(
       current,
       "timeline-agent-start",
-      "startPreparedReportRun",
+      "startRun",
       { mode: modeLabel },
       { phase: "started" },
     ));

web/apps/console/src/demo/agent/tools.test.ts

@@ -4,7 +4,7 @@ import { AGENT_TOOLS, isAllowedAgentToolName } from "./tools.js";
 describe("agent tools", () => {
   it("separates workflow tools from presentation tools", () => {
     expect(AGENT_TOOLS.inspectDeployment.kind).toBe("workflow");
-    expect(AGENT_TOOLS.startPreparedReportRun.kind).toBe("workflow");
+    expect(AGENT_TOOLS.startRun.kind).toBe("workflow");
     expect(AGENT_TOOLS.resumeIssueReview.kind).toBe("workflow");
     expect(AGENT_TOOLS.readRunTrace.kind).toBe("workflow");
     expect(AGENT_TOOLS.selectWorkflowNode.kind).toBe("presentation");

web/apps/console/src/demo/agent/tools.ts

@@ -1,6 +1,6 @@
 export type WorkflowToolName =
   | "inspectDeployment"
-  | "startPreparedReportRun"
+  | "startRun"
   | "resumeIssueReview"
   | "readRunTrace";
 
@@ -23,8 +23,8 @@ export const AGENT_TOOLS = {
     kind: "workflow",
     description: "Inspect the prepared report deployment.",
   },
-  startPreparedReportRun: {
+  startRun: {
-    name: "startPreparedReportRun",
+    name: "startRun",
     kind: "workflow",
     description: "Start the prepared report workflow run.",
   },

web/apps/console/src/presentation/OperatorChat.test.tsx

@@ -77,7 +77,7 @@ describe("OperatorChat", () => {
     expect(screen.getByRole("button", { name: /selectWorkflowNode/i })).toBeInTheDocument();
   });
 
-  it("renders tool calls as collapsed tool cards", async () => {
+  it("renders tool calls as open tool cards", async () => {
     const user = userEvent.setup();
     const messages: ReadonlyArray<AgentMessage> = [
       {
@@ -92,9 +92,10 @@ describe("OperatorChat", () => {
     render(<OperatorChat state={initialPresentationState} messages={messages} />);
 
     const tool = screen.getByRole("button", { name: /readRunTrace/i });
-    expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
+    expect(tool).toHaveAttribute("aria-expanded", "true");
-    await user.click(tool);
     expect(screen.getByText(/run_1/)).toBeInTheDocument();
+    await user.click(tool);
+    expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
   });
 
   it("renders schema approval surface inside chat approval request", async () => {
@@ -157,8 +158,9 @@ describe("OperatorChat", () => {
     const tool = screen.getByRole("button", { name: /resumeIssueReview/i });
     expect(screen.queryByRole("button", { name: /Approve/i })).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: /Deny/i })).not.toBeInTheDocument();
-    await user.click(tool);
     expect(screen.getByLabelText("tool input")).toBeInTheDocument();
+    await user.click(tool);
+    expect(screen.queryByLabelText("tool input")).not.toBeInTheDocument();
   });
 
   it("renders error and presentation action parts", () => {
@@ -256,7 +258,7 @@ describe("OperatorChat", () => {
         parts: [
           {
             type: "tool-call",
-            call: { id: "call-1", name: "startPreparedReportRun", input: { deploymentId: "demo" } },
+            call: { id: "call-1", name: "startRun", input: { deploymentId: "demo" } },
           },
         ],
       },
@@ -264,7 +266,7 @@ describe("OperatorChat", () => {
 
     render(<OperatorChat state={initialPresentationState} messages={messages} />);
 
-    expect(screen.getByRole("button", { name: /startPreparedReportRun/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /startRun/i })).toBeInTheDocument();
   });
 
   it("disables schema approval buttons when approval actions are unavailable", () => {

web/apps/console/src/presentation/chat/AssistantOperatorThread.test.tsx

@@ -7,7 +7,7 @@ import { AssistantOperatorThread } from "./AssistantOperatorThread.js";
 afterEach(() => cleanup());
 
 describe("AssistantOperatorThread", () => {
-  it("renders text interleaved with a collapsed tool call", async () => {
+  it("renders text interleaved with an open tool call", async () => {
     const user = userEvent.setup();
     const messages: ReadonlyArray<AgentMessage> = [
       {
@@ -30,9 +30,10 @@ describe("AssistantOperatorThread", () => {
     expect(screen.getByText("I will inspect the run.")).toBeInTheDocument();
     expect(screen.getByText("The trace is inspectable.")).toBeInTheDocument();
     const tool = screen.getByRole("button", { name: /readRunTrace/i });
-    expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
+    expect(tool).toHaveAttribute("aria-expanded", "true");
-    await user.click(tool);
     expect(screen.getByText(/run_1/)).toBeInTheDocument();
+    await user.click(tool);
+    expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
   });
 
   it("renders grouped consecutive tool calls", () => {

web/apps/console/src/presentation/chat/AssistantOperatorThread.tsx

@@ -1,11 +1,4 @@
 import { useCallback, useMemo, useState } from "react";
-import {
-  AssistantRuntimeProvider,
-  MessagePrimitive,
-  ThreadPrimitive,
-  useExternalStoreRuntime,
-  type AppendMessage,
-} from "@assistant-ui/react";
 import type { AgentMessage } from "../../demo/agent/events.js";
 import { SchemaApprovalSurface } from "../approval/SchemaApprovalSurface.js";
 import { projectAgentMessagesForAssistant, type AssistantProjectedMessage } from "./assistantRuntimeProjection.js";
@@ -31,15 +24,13 @@ const formatJson = (value: unknown): string => {
 const ToolCard = ({
   toolName,
   args,
-  result,
+  defaultOpen = true,
-  isError,
 }: {
   readonly toolName: string;
   readonly args?: unknown;
-  readonly result?: unknown;
+  readonly defaultOpen?: boolean;
-  readonly isError?: boolean;
 }) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
   return (
     <div className="assistant-tool-card" data-open={open ? "true" : "false"}>
       <button
@@ -48,19 +39,13 @@ const ToolCard = ({
         aria-expanded={open}
         onClick={() => setOpen((c) => !c)}
       >
-        <span className="assistant-tool-card__label">Used tool: <b>{toolName}</b></span>
+        <span className="assistant-tool-card__label">{toolName}</span>
       </button>
       {open ? (
         <div className="assistant-tool-card__body">
           {args !== undefined ? (
             <pre className="assistant-tool-card__io" aria-label="tool input">{formatJson(args)}</pre>
           ) : null}
-          {result !== undefined ? (
-            <div className="assistant-tool-card__result" data-error={isError ? "true" : undefined}>
-              <span>{isError ? "error" : "success"}</span>
-              <pre className="assistant-tool-card__io" aria-label="tool output">{formatJson(result)}</pre>
-            </div>
-          ) : null}
         </div>
       ) : null}
     </div>
@@ -100,9 +85,10 @@ const renderContentPart = (
   part: ContentPart,
   submitApproval?: (() => void) | undefined,
   cancelApproval?: (() => void) | undefined,
+  defaultOpen?: boolean,
 ): React.ReactNode => {
   if (part.type === "text") {
-    return <MessagePrimitive.Content />;
+    return <p style={{ whiteSpace: "pre-line" }}>{part.text}</p>;
   }
   const toolName = part.toolName;
   const args = part.args as Record<string, unknown> | undefined;
@@ -130,7 +116,7 @@ const renderContentPart = (
       </div>
     );
   }
-  return <ToolCard toolName={toolName} args={part.args} result={part.result} isError={part.isError ?? false} />;
+  return <ToolCard toolName={toolName} args={part.args} {...(defaultOpen !== undefined ? { defaultOpen } : {})} />;
 };
 
 const AssistantMessageBody = ({
@@ -142,11 +128,16 @@ const AssistantMessageBody = ({
   readonly submitApproval?: (() => void) | undefined;
   readonly cancelApproval?: (() => void) | undefined;
 }) => {
-  const textParts = parts.filter((p) => p.type === "text");
   const toolParts = parts.filter((p) => p.type === "tool-call");
 
   if (toolParts.length === 0) {
-    return <MessagePrimitive.Content />;
+    return (
+      <>
+        {parts.filter((p) => p.type === "text").map((p, i) => (
+          <p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
+        ))}
+      </>
+    );
   }
 
   if (toolParts.length === 1) {
@@ -164,54 +155,38 @@ const AssistantMessageBody = ({
   }
 
   const firstToolIndex = parts.findIndex((p) => p.type === "tool-call");
+  const lastToolIndex = parts.findLastIndex((p) => p.type === "tool-call");
   const beforeText = parts.slice(0, firstToolIndex).filter((p) => p.type === "text");
+  const afterText = parts.slice(lastToolIndex + 1).filter((p) => p.type === "text");
   return (
     <>
       {beforeText.map((p, i) => <p key={`before-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
       <ToolGroupCard toolCount={toolParts.length}>
         {toolParts.map((tool, i) => (
           <div key={i}>
-            {renderContentPart(tool, submitApproval, cancelApproval)}
+            {renderContentPart(tool, submitApproval, cancelApproval, false)}
           </div>
         ))}
       </ToolGroupCard>
+      {afterText.map((p, i) => <p key={`after-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
     </>
   );
 };
 
-const ThreadBody = ({
+const MessageBubble = ({
-  submitApproval,
+  role,
-  cancelApproval,
+  children,
 }: {
-  readonly submitApproval?: (() => void) | undefined;
+  readonly role: "user" | "assistant";
-  readonly cancelApproval?: (() => void) | undefined;
+  readonly children: React.ReactNode;
 }) => (
-  <ThreadPrimitive.Root className="assistant-thread">
+  <div className="assistant-message" data-role={role}>
-    <ThreadPrimitive.Viewport className="assistant-thread__viewport">
+    {role === "user" ? (
-      <ThreadPrimitive.Messages>
+      <div className="assistant-message__user-bubble">{children}</div>
-        {({ message }) => {
+    ) : (
-          const content = (message as unknown as { content?: unknown }).content;
+      children
-          const parts: ContentPart[] = Array.isArray(content)
+    )}
-            ? (content as ContentPart[])
+  </div>
-            : typeof content === "string"
-              ? [{ type: "text" as const, text: content }]
-              : [];
-          return (
-            <MessagePrimitive.Root
-              className="assistant-message"
-              data-role={message.role}
-            >
-              <AssistantMessageBody
-                parts={parts}
-                submitApproval={submitApproval}
-                cancelApproval={cancelApproval}
-              />
-            </MessagePrimitive.Root>
-          );
-        }}
-      </ThreadPrimitive.Messages>
-    </ThreadPrimitive.Viewport>
-  </ThreadPrimitive.Root>
 );
 
 export const AssistantOperatorThread = ({
@@ -223,41 +198,53 @@ export const AssistantOperatorThread = ({
   ariaLabel = "operator conversation",
 }: AssistantOperatorThreadProps) => {
   const projected = useMemo(() => projectAgentMessagesForAssistant(messages), [messages]);
-  const [localMessages, setLocalMessages] = useState<AssistantProjectedMessage[]>([]);
-  const runtimeMessages = projected.length > 0 ? projected : localMessages;
 
-  const onNew = useCallback(async (message: AppendMessage) => {
+  const handleRun = useCallback(() => {
-    const text = message.content.find((part) => part.type === "text")?.text ?? "";
+    if (!runAction || runAction.disabled) return;
-    setLocalMessages((current) => [
+    runAction.run();
-      ...current,
+  }, [runAction]);
-      {
-        id: `local-${current.length + 1}`,
-        role: "user" as const,
-        content: [{ type: "text" as const, text }],
-      },
-    ]);
-  }, []);
-
-  const runtime = useExternalStoreRuntime({
-    messages: runtimeMessages,
-    setMessages: (msgs) => setLocalMessages([...msgs]),
-    onNew,
-    convertMessage: (message) => message,
-    isRunning: false,
-  });
 
   return (
     <section className="assistant-operator-thread" data-mode={mode} role="log" aria-label={ariaLabel}>
+      <div className="assistant-thread">
+        <div className="assistant-thread__viewport">
+          {projected.map((message) => {
+            const content = (message as unknown as { content?: unknown }).content;
+            const parts: ContentPart[] = Array.isArray(content)
+              ? (content as ContentPart[])
+              : typeof content === "string"
+                ? [{ type: "text" as const, text: content }]
+                : [];
+
+            if (message.role === "user") {
+              return (
+                <MessageBubble key={message.id} role="user">
+                  {parts.filter((p) => p.type === "text").map((p, i) => (
+                    <p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
+                  ))}
+                </MessageBubble>
+              );
+            }
+
+            return (
+              <MessageBubble key={message.id} role="assistant">
+                <AssistantMessageBody
+                  parts={parts}
+                  submitApproval={submitApproval}
+                  cancelApproval={cancelApproval}
+                />
+              </MessageBubble>
+            );
+          })}
+        </div>
+      </div>
       {runAction ? (
         <div className="assistant-operator-thread__action">
-          <button type="button" disabled={runAction.disabled} onClick={runAction.run}>
+          <button type="button" disabled={runAction.disabled} onClick={handleRun}>
             {runAction.label}
           </button>
         </div>
       ) : null}
-      <AssistantRuntimeProvider runtime={runtime}>
-        <ThreadBody submitApproval={submitApproval} cancelApproval={cancelApproval} />
-      </AssistantRuntimeProvider>
     </section>
   );
 };

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

@@ -10,17 +10,14 @@ afterEach(() => cleanup());
 
 describe("ProblemLoopScene", () => {
   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("log", { name: /one-off assistant transcript/i });
     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();
+    const toolButtons = within(transcript).getAllByRole("button", { name: /workflow.run_once/i });
-    expect(within(transcript).getByText("Reports success, but leaves no reusable workflow behind.")).toBeInTheDocument();
+    expect(toolButtons).toHaveLength(3);
-
+    expect(within(transcript).getByText("Done. But none of this is recorded in a durable workflow.")).toBeInTheDocument();
-    await user.click(within(transcript).getByRole("button", { name: /workspace.run_once/i }));
-    expect(within(transcript).getByText(/ephemeral/i)).toBeInTheDocument();
   });
 
   it("renders reusable automation as a durable workflow blueprint", () => {

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

@@ -19,12 +19,28 @@ const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
       {
         type: "tool-call",
         call: {
-          id: "scene-2-tool",
+          id: "scene-2-tool-1",
-          name: "workspace.run_once" as AgentToolName,
+          name: "workflow.run_once" as AgentToolName,
-          input: { persistence: "ephemeral", reusable_workflow: false },
+          input: { source: "api", endpoint: "/tasks" },
         },
       },
-      { type: "text", text: "Reports success, but leaves no reusable workflow behind." },
+      {
+        type: "tool-call",
+        call: {
+          id: "scene-2-tool-2",
+          name: "workflow.run_once" as AgentToolName,
+          input: { format: "json", validate: true },
+        },
+      },
+      {
+        type: "tool-call",
+        call: {
+          id: "scene-2-tool-3",
+          name: "workflow.run_once" as AgentToolName,
+          input: { destination: "file", path: "/tmp/result.json" },
+        },
+      },
+      { type: "text", text: "Done. But none of this is recorded in a durable workflow." },
     ],
   },
 ];

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

@@ -1639,6 +1639,24 @@
   margin-bottom: 0.65rem;
 }
 
+.assistant-message[data-role="user"] {
+  justify-items: end;
+}
+
+.assistant-message__user-bubble {
+  background: color-mix(in oklch, var(--accent-cyan) 14%, var(--stage-surface));
+  border: 1px solid color-mix(in oklch, var(--accent-cyan) 30%, var(--stage-line));
+  border-radius: 0.65rem;
+  padding: 0.55rem 0.75rem;
+  max-width: 80%;
+  color: var(--text-primary);
+  font: 0.82rem/1.5 var(--font-interface);
+}
+
+.assistant-message[data-role="assistant"] {
+  justify-items: start;
+}
+
 .assistant-tool-card {
   border: 1px solid var(--stage-line);
   border-radius: 0.65rem;
@@ -1680,19 +1698,6 @@
   overflow-x: auto;
 }
 
-.assistant-tool-card__result {
-  margin-top: 0.35rem;
-  font: 600 0.7rem/1 var(--font-interface);
-}
-
-.assistant-tool-card__result span {
-  color: var(--accent-cyan);
-}
-
-.assistant-tool-card__result[data-error="true"] span {
-  color: var(--accent-error);
-}
-
 .assistant-tool-group {
   border: 1px solid var(--stage-line);
   border-radius: 0.65rem;
@@ -1723,6 +1728,8 @@
   flex-direction: column;
   gap: 0.35rem;
   padding: 0 0.65rem 0.55rem;
+  max-height: 14rem;
+  overflow: hidden;
 }
 
 .assistant-tool-group__body .assistant-tool-card {