Chat theater tool calls render like a real agent TUI

chat.tool now takes the call itself — tool name, the REAL input (the sandbox code the scenario executes, shown as the indented preview block agent TUIs draw), and a result-line renderer — instead of a prose label. The renderer paints name → input block → live spinner → ✓ with the real duration and the real result's first line. The recording reads like an actual agent session: what was called, with what, how long it took, what came back.

Rhys Sullivan committed 5 months ago

Commit 30e118d1 parent 0b5522d3 files · +72 −27Browse files

Unified · Split

3 files

e2e/scenarios/connect-handoff-session.test.ts +8 −7
e2e/src/clients/agent-chat-tui.ts +36 −12
e2e/src/clients/chat-theater.ts +28 −8

e2e/scenarios/connect-handoff-session.test.ts+8−7

         { title: "executor agent — connect Resend", record: join(runDir, "terminal.cast") },
         (chat) =>
           Effect.gen(function* () {
-            // Real MCP OAuth + tool discovery happens behind this spinner.
+            // Real MCP OAuth + tool discovery happens behind this call.
-            yield* chat.tool("mcp · authorize and list tools", session.listTools());
+            yield* chat.tool(
+              { name: "executor (mcp)", result: (tools) => `${tools.length} tools available` },
+              session.listTools(),
+            );
             yield* chat.user(
               "Add the Resend API to my executor and give me a link to connect my account",
             );
             yield* chat.assistant("I'll register the Resend API in your Executor now.");
             const added = yield* chat.tool(
-              "executor.execute · openapi.addSpec(resend)",
+              { name: "execute", input: addSpecCode(integration) },
               executeJson(session, addSpecCode(integration)),
-              (result) => `${String(result.toolCount)} tools`,
             );
             expect(added.ok, `addSpec succeeded: ${JSON.stringify(added)}`).toBe(true);
             yield* chat.assistant("Registered. Creating your connect link…");
             const handoff = yield* chat.tool(
-              "executor.execute · connections.createHandoff",
+              { name: "execute", input: createHandoffCode(integration) },
               executeJson(session, createHandoffCode(integration)),
             );
             expect(handoff.ok, `createHandoff succeeded: ${JSON.stringify(handoff)}`).toBe(true);
             yield* chat.user("Connected, now send a test email to prove it works");
             yield* chat.assistant("Sending a test email through your new connection…");
             const sent = yield* chat.tool(
-              "resend.emails.sendEmail · via the pasted connection",
+              { name: "execute", input: sendEmailCode(integration, emailSubject) },
               executeJson(session, sendEmailCode(integration, emailSubject)),
-              (result) => `path ${String(result.path)}`,
             );
             expect(sent.ok, `email sent through the connection: ${JSON.stringify(sent)}`).toBe(
               true,

e2e/src/clients/agent-chat-tui.ts+36−12

 type TheaterEvent =
   | { readonly type: "user"; readonly text: string }
   | { readonly type: "assistant"; readonly text: string }
-  | { readonly type: "tool-start"; readonly label: string }
+  | {
-  | { readonly type: "tool-end"; readonly ok: boolean; readonly note?: string }
+      readonly type: "tool-start";
+      readonly name: string;
+      /** The call's real input, pre-rendered as preview lines. */
+      readonly input?: readonly string[];
+    }
+  | {
+      readonly type: "tool-end";
+      readonly ok: boolean;
+      /** First line of the call's real result. */
+      readonly result?: string;
+      readonly seconds?: number;
+    }
   | { readonly type: "status"; readonly text: string }
   | { readonly type: "done" };
 out(`${DIM}${"─".repeat(Math.min(96, title.length + 24))}${RESET}\n`);
 let spinnerTimer: ReturnType<typeof setInterval> | undefined;
-let spinnerLabel = "";
+let spinnerName = "";
-const startSpinner = (label: string) => {
+// A tool call renders the way agent TUIs render them: the tool's name, the
-  spinnerLabel = label;
+// call's real input as an indented block, a spinner while the real call
+// runs, then the real result's first line with the real duration.
+//
+//   ⚙ execute
+//   │ const added = await tools.executor.openapi.addSpec({
+//   │   spec: { kind: "url", url: "https://…/openapi.json" },
+//   ⠼ running…
+//   ✓ 2.3s  {"ok":true,"slug":"resend","toolCount":9}
+const startTool = (name: string, input?: readonly string[]) => {
+  spinnerName = name;
+  out(`\n  ${MAGENTA}⚙${RESET} ${BOLD}${name}${RESET}\n`);
+  for (const line of input ?? []) {
+    out(`  ${DIM}│ ${line.slice(0, 92)}${RESET}\n`);
+  }
   let frame = 0;
-  out("\n");
   spinnerTimer = setInterval(() => {
-    out(`${CLEAR_LINE}  ${CYAN}${SPINNER[frame % SPINNER.length]}${RESET} ${DIM}${label}${RESET}`);
+    out(`${CLEAR_LINE}  ${CYAN}${SPINNER[frame % SPINNER.length]}${RESET} ${DIM}running…${RESET}`);
     frame += 1;
   }, 80);
 };
-const stopSpinner = (ok: boolean, note?: string) => {
+const endTool = (ok: boolean, result?: string, seconds?: number) => {
   if (spinnerTimer) clearInterval(spinnerTimer);
   spinnerTimer = undefined;
-  const mark = ok ? `${GREEN}✓${RESET}` : `${RED}✗${RESET}`;
+  const mark = ok ? `${GREEN}✓${RESET}` : `${RED}✗ ${spinnerName}${RESET}`;
-  out(`${CLEAR_LINE}  ${mark} ${DIM}${spinnerLabel}${note ? ` — ${note}` : ""}${RESET}\n`);
+  const took = seconds !== undefined ? `${DIM}${seconds.toFixed(1)}s${RESET}  ` : "";
+  out(`${CLEAR_LINE}  ${mark} ${took}${DIM}${(result ?? "").slice(0, 88)}${RESET}\n`);
 };
 const handle = async (event: TheaterEvent): Promise<boolean> => {
       return true;
     }
     case "tool-start": {
-      startSpinner(event.label);
+      startTool(event.name, event.input);
       return true;
     }
     case "tool-end": {
-      stopSpinner(event.ok, event.note);
+      endTool(event.ok, event.result, event.seconds);
       return true;
     }
     case "status": {

e2e/src/clients/chat-theater.ts+28−8

   readonly user: (text: string) => Effect.Effect<void>;
   /** The agent's reply, streamed on screen. */
   readonly assistant: (text: string) => Effect.Effect<void>;
-  /** Run a REAL effect behind a live tool spinner; the spinner runs exactly
+  /** Run a REAL effect rendered as a tool call: the tool's name, the call's
-   *  as long as the call does and resolves to ✓/✗ with its outcome. */
+   *  real input block, a spinner for exactly as long as the call runs, then
+   *  the call's real result line with the real duration. */
   readonly tool: <A, E, R>(
-    label: string,
+    call: {
+      /** Tool name as an agent TUI would show it (e.g. "execute"). */
+      readonly name: string;
+      /** The call's real input — rendered as the indented block. */
+      readonly input?: string;
+      /** Render the result's display line (defaults to JSON of the value). */
+      readonly result?: (value: A) => string;
+    },
     work: Effect.Effect<A, E, R>,
-    note?: (result: A) => string | undefined,
   ) => Effect.Effect<A, E, R>;
   /** A dim narrator line (e.g. "waiting for the browser hop"). */
   readonly status: (text: string) => Effect.Effect<void>;
 const encode = (event: TheaterEvent) =>
   `${Buffer.from(JSON.stringify(event)).toString("base64")}\n`;
+/** Input block, like a TUI's call preview: trimmed lines, capped count. */
+const inputPreview = (input: string | undefined): string[] | undefined => {
+  if (!input) return undefined;
+  const lines = input
+    .split("\n")
+    .map((line) => line.trimEnd())
+    .filter((line) => line.trim().length > 0);
+  return lines.length > 7 ? [...lines.slice(0, 6), `… +${lines.length - 6} lines`] : lines;
+};
 const makeTheater = (push: (event: TheaterEvent) => Effect.Effect<void>): ChatTheater => ({
   user: (text) => push({ type: "user", text }),
   assistant: (text) => push({ type: "assistant", text }),
   status: (text) => push({ type: "status", text }),
-  tool: (label, work, note) =>
+  tool: (call, work) =>
     Effect.gen(function* () {
-      yield* push({ type: "tool-start", label });
+      yield* push({ type: "tool-start", name: call.name, input: inputPreview(call.input) });
+      const startedAt = Date.now();
       const exit = yield* Effect.exit(work);
+      const seconds = (Date.now() - startedAt) / 1000;
       if (Exit.isSuccess(exit)) {
-        yield* push({ type: "tool-end", ok: true, note: note?.(exit.value) });
+        const line = call.result ? call.result(exit.value) : JSON.stringify(exit.value);
+        yield* push({ type: "tool-end", ok: true, result: line, seconds });
         return exit.value;
       }
-      yield* push({ type: "tool-end", ok: false, note: "failed" });
+      yield* push({ type: "tool-end", ok: false, result: "failed", seconds });
       return yield* exit;
     }),
 });

Chat theater tool calls render like a real agent TUI

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code