Keep terminal status and input prompt visible

Author: areshand

client/README.md

@@ -26,8 +26,10 @@ is open, the client maintains an authenticated WebSocket to receive conversation
 events, thread state, heartbeats, and bounded subagent status. A separate
 session WebSocket carries live orchestrator terminal output only while an
 execution is active. The interactive TTY reserves a small bottom pane for each
-subagent's state, role, and current work; HTTP event replay repairs gaps after a
-disconnect.
+subagent's state, role, and current work. The pane also keeps the open thread and
+orchestrator state visible, while asynchronous output redraws the active
+`THREAD_ID> ` prompt without discarding partially typed follow-up text. HTTP
+event replay repairs gaps after a disconnect.
 
 The first command securely prompts for the password. For a non-interactive
 caller, provide the password on stdin. Do not put it in a command argument:

client/src/client.mjs

@@ -177,7 +177,22 @@ export async function runInteractive({
   let cursor = 0;
   let monitor = null;
   let threadConnection = null;
-  const agentPane = createAgentPane(stdout);
+  let promptActive = false;
+  let promptLabel = "multiagent> ";
+  const refreshPrompt = () => {
+    if (!promptActive) return;
+    if (typeof terminal.setPrompt !== "function" || typeof terminal.prompt !== "function") return;
+    terminal.setPrompt(promptLabel);
+    terminal.prompt(true);
+  };
+  const interactiveOutput = {
+    write(value) {
+      if (promptActive && stdout.isTTY) stdout.write("\r\u001b[2K");
+      stdout.write(value);
+      refreshPrompt();
+    },
+  };
+  const agentPane = createAgentPane(stdout, { onDraw: refreshPrompt });
 
   const listThreads = async () => {
     threads = (await client.request("/api/threads")).value.threads || [];
@@ -202,7 +217,7 @@ export async function runInteractive({
       const sequence = Number(event.sequence) || 0;
       if (sequence <= cursor) continue;
       cursor = sequence;
-      renderInteractiveEvent(stdout, event);
+      renderInteractiveEvent(interactiveOutput, event);
     }
     return events;
   };
@@ -238,15 +253,18 @@ export async function runInteractive({
       createWebSocketImpl,
       onState: (state) => agentPane.setConnectionState(state),
       onThread: (thread) => {
-        if (current?.id === threadId) current = thread;
+        if (current?.id === threadId) {
+          current = thread;
+          agentPane.setThread(thread);
+        }
       },
       onAgents: (agents) => agentPane.render(agents),
       onEvent: (event) => {
         if (current?.id !== threadId) return;
         const sequence = Number(event.sequence) || 0;
         if (sequence <= cursor) return;
         cursor = sequence;
-        renderInteractiveEvent(stdout, event);
+        renderInteractiveEvent(interactiveOutput, event);
         if (new Set(["assistant_message", "question", "session_interrupted"]).has(event.type)) {
           monitor?.controller.abort();
         }
@@ -263,7 +281,7 @@ export async function runInteractive({
     const active = { sessionId, controller, promise: null };
     monitor = active;
     active.promise = (async () => {
-      const stream = streamSessionTerminal({ client, sessionId, stdout, sleep, signal: controller.signal, createWebSocketImpl });
+      const stream = streamSessionTerminal({ client, sessionId, stdout: interactiveOutput, sleep, signal: controller.signal, createWebSocketImpl });
       try {
         while (!controller.signal.aborted) {
           const events = await replay();
@@ -286,6 +304,7 @@ export async function runInteractive({
     await stopMonitor();
     await stopThreadConnection();
     current = response.value.thread;
+    agentPane.setThread(current);
     cursor = 0;
     stdout.write(`\nOpened ${current.id} [${current.state}] — ${current.repository}\n`);
     await replay({ all: true });
@@ -302,7 +321,15 @@ export async function runInteractive({
     await listThreads();
     if (initialThreadId) await openThread(initialThreadId);
     while (true) {
-      const line = String(await terminal.question(current ? `${current.id}> ` : "multiagent> ")).trim();
+      promptLabel = current ? `${current.id}> ` : "multiagent> ";
+      promptActive = true;
+      let answer;
+      try {
+        answer = await terminal.question(promptLabel);
+      } finally {
+        promptActive = false;
+      }
+      const line = String(answer).trim();
       if (!line) continue;
       try {
         if (line === "/quit" || line === "/exit") return 0;
@@ -332,6 +359,7 @@ export async function runInteractive({
           await stopMonitor();
           await stopThreadConnection();
           current = created.value.thread;
+          agentPane.setThread(current);
           cursor = 0;
           startThreadConnection(current.id);
           await listThreads();
@@ -349,11 +377,14 @@ export async function runInteractive({
           const sequence = Number(routed.event.sequence) || 0;
           if (sequence > cursor) {
             cursor = sequence;
-            renderInteractiveEvent(stdout, routed.event);
+            renderInteractiveEvent(interactiveOutput, routed.event);
           }
         }
         const session = routed.session;
-        if (session) stdout.write(`[execution ${session.status}] ${session.id}\n`);
+        if (session) {
+          agentPane.setThread(current, session.status);
+          stdout.write(`[execution ${session.status}] ${session.id}\n`);
+        }
         await startMonitor(session?.id || "");
       } catch (error) {
         if (!(error instanceof ClientError)) throw error;
@@ -634,19 +665,27 @@ function claudeStreamProgress(lines) {
 
 const inactiveAgentStatuses = new Set(["done", "completed", "closed", "cancelled", "canceled", "failed", "released", "skipped", "finalized", "killed", "missing"]);
 
-export function renderAgentPane(agents, { columns = 80, maxRows = 6, connectionState = "connected" } = {}) {
+export function renderAgentPane(agents, {
+  columns = 80,
+  maxRows = 6,
+  connectionState = "connected",
+  thread = null,
+  executionStatus = "",
+} = {}) {
   const values = Array.isArray(agents) ? agents : [];
   const active = values.filter((agent) => !inactiveAgentStatuses.has(String(agent.status || "").toLowerCase())).length;
-  const header = `Subagents | ${connectionState} | ${active} active, ${values.length} total`;
-  const rows = values.slice(0, Math.max(0, maxRows - 1)).map((agent) => {
+  const headers = [];
+  if (thread?.id) headers.push(`Thread ${thread.id} | orchestrator ${executionStatus || thread.state || "idle"}`);
+  headers.push(`Subagents | ${connectionState} | ${active} active, ${values.length} total`);
+  const rows = values.slice(0, Math.max(0, maxRows - headers.length)).map((agent) => {
     const status = String(agent.status || "unknown");
     const role = agent.role ? ` (${agent.role})` : "";
     const work = String(agent.workingOn || agent.assignment || "waiting");
     return `${inactiveAgentStatuses.has(status.toLowerCase()) ? "-" : ">"} ${agent.name || "agent"} [${status}]${role}: ${work}`;
   });
-  if (values.length > rows.length) rows.push(`... ${values.length - rows.length} more`);
-  if (!rows.length && maxRows > 1) rows.push("  No subagents reported yet");
-  return [header, ...rows].slice(0, maxRows).map((line) => truncateTerminalLine(line, columns));
+  if (values.length > rows.length && headers.length + rows.length < maxRows) rows.push(`... ${values.length - rows.length} more`);
+  if (!rows.length && maxRows > headers.length) rows.push("  No subagents reported yet");
+  return [...headers, ...rows].slice(0, maxRows).map((line) => truncateTerminalLine(line, columns));
 }
 
 function truncateTerminalLine(value, columns) {
@@ -656,10 +695,12 @@ function truncateTerminalLine(value, columns) {
   return width <= 3 ? line.slice(0, width) : `${line.slice(0, width - 3)}...`;
 }
 
-function createAgentPane(stdout) {
+function createAgentPane(stdout, { onDraw = () => {} } = {}) {
   const enabled = Boolean(stdout?.isTTY && Number(stdout.rows) >= 8);
   let agents = [];
   let connectionState = "disconnected";
+  let thread = null;
+  let executionStatus = "";
   let panel = null;
   let lastFrame = "";
 
@@ -682,7 +723,13 @@ function createAgentPane(stdout) {
     const mainBottom = start - 1;
     if (panel && (panel.rows !== rows || panel.start !== start)) clear();
     panel = { rows, start };
-    const lines = renderAgentPane(agents, { columns, maxRows: height, connectionState });
+    const lines = renderAgentPane(agents, {
+      columns,
+      maxRows: height,
+      connectionState,
+      thread,
+      executionStatus,
+    });
     const frame = JSON.stringify({ rows, columns, height, lines });
     if (frame === lastFrame) return;
     lastFrame = frame;
@@ -692,6 +739,7 @@ function createAgentPane(stdout) {
     }
     output += "\u001b8";
     stdout.write(output);
+    onDraw();
   };
 
   return {
@@ -704,6 +752,11 @@ function createAgentPane(stdout) {
       connectionState = next;
       draw();
     },
+    setThread(nextThread, nextExecutionStatus = "") {
+      thread = nextThread || null;
+      executionStatus = nextExecutionStatus || "";
+      draw();
+    },
     close: clear,
   };
 }

client/test/client.test.mjs

@@ -10,6 +10,10 @@ function writer() {
   return { output: "", write(value) { this.output += String(value); } };
 }
 
+function ttyWriter({ rows = 24, columns = 100 } = {}) {
+  return { ...writer(), isTTY: true, rows, columns };
+}
+
 function jsonResponse(value, init = {}) {
   return new Response(JSON.stringify(value), {
     status: init.status || 200,
@@ -456,3 +460,72 @@ test("subagent pane includes status, role, and current work within its width", (
   assert.match(lines[2], /- tester \[done\] \(verification\): Ran the client tests/);
   assert.ok(lines.every((line) => line.length <= 72));
 });
+
+test("subagent pane keeps the open thread and orchestrator status visible", () => {
+  const lines = renderAgentPane([
+    { name: "reader", status: "running", role: "investigator", workingOn: "Inspecting the runtime" },
+  ], {
+    columns: 100,
+    maxRows: 5,
+    connectionState: "connected",
+    thread: { id: "thread-123", state: "running" },
+  });
+  assert.equal(lines[0], "Thread thread-123 | orchestrator running");
+  assert.equal(lines[1], "Subagents | connected | 1 active, 1 total");
+});
+
+test("asynchronous status redraw restores the active input prompt", async () => {
+  const sessionFile = await sessionFixture();
+  const output = ttyWriter();
+  let questionCount = 0;
+  let threadSocket = null;
+  const prompts = [];
+  const terminal = {
+    async question() {
+      questionCount += 1;
+      if (questionCount === 1) return "/open 1";
+      return new Promise((resolve) => {
+        setImmediate(() => {
+          threadSocket.emit("message", Buffer.from(JSON.stringify({
+            type: "agents",
+            agents: [{ name: "reader", status: "running", role: "investigator", workingOn: "Checking status" }],
+          })));
+          threadSocket.emit("message", Buffer.from(JSON.stringify({
+            type: "event",
+            event: { sequence: 1, type: "assistant_message", payload: { text: "Still working" } },
+          })));
+          setImmediate(() => resolve("/quit"));
+        });
+      });
+    },
+    setPrompt(value) { this.label = value; },
+    prompt(preserveCursor) { prompts.push({ label: this.label, preserveCursor }); },
+    close() {},
+  };
+
+  await main([
+    "--server", "https://control.example", "--session-file", sessionFile,
+  ], {
+    stdin: { isTTY: true },
+    stdout: output,
+    createInterface: () => terminal,
+    sleep: async () => {},
+    createWebSocket: (url) => {
+      const socket = new EventEmitter();
+      socket.close = () => queueMicrotask(() => socket.emit("close"));
+      if (String(url).includes("/stream")) threadSocket = socket;
+      return socket;
+    },
+    fetchImpl: async (url) => {
+      const value = String(url);
+      if (value.endsWith("/api/threads")) return jsonResponse({ threads: [{ id: "thread-1", state: "running", repository: "multiagent" }] });
+      if (value.endsWith("/api/threads/thread-1")) return jsonResponse({ thread: { id: "thread-1", state: "running", repository: "multiagent" } });
+      if (value.includes("/events?after_sequence=0")) return jsonResponse({ events: [] });
+      throw new Error(`unexpected request: ${value}`);
+    },
+  });
+
+  assert.match(output.output, /Thread thread-1 \| orchestrator running/);
+  assert.match(output.output, /\r\u001b\[2K\nassistant> Still working/);
+  assert.ok(prompts.some((prompt) => prompt.label === "thread-1> " && prompt.preserveCursor === true));
+});