@agimon-ai/doompi-runner 0.0.1-alpha.48 → 0.0.1-alpha.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-runner",
-  "version": "0.0.1-alpha.48",
+  "version": "0.0.1-alpha.49",
   "description": "Supervised shell execution, background process control, and run logs for Pi coding agents.",
   "keywords": [
     "ai",
@@ -324,12 +324,12 @@
     "@xterm/headless": "6.0.0",
     "hono": "4.13.5",
     "typebox": "1.3.19",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.47",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.47",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.48",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.8",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.11",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.9"
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.48",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.49",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.9",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.48",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.12",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.10"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.84.4",
@@ -357,14 +357,14 @@
     }
   },
   "optionalDependencies": {
-    "@agimon-ai/doompi-runner-rmux-darwin-arm64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rmux-linux-arm64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rmux-linux-x64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rtk-darwin-arm64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rtk-darwin-x64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rtk-linux-arm64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rtk-linux-x64": "0.0.1-alpha.45",
-    "@agimon-ai/doompi-runner-rmux-darwin-x64": "0.0.1-alpha.45"
+    "@agimon-ai/doompi-runner-rmux-darwin-arm64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rmux-darwin-x64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rmux-linux-x64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rtk-darwin-arm64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rtk-darwin-x64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rtk-linux-arm64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rtk-linux-x64": "0.0.1-alpha.46",
+    "@agimon-ai/doompi-runner-rmux-linux-arm64": "0.0.1-alpha.46"
   },
   "engines": {
     "node": ">=22.19.0"

package/src/web/BashToolMessage.tsx

@@ -1,4 +1,5 @@
 import {
+  AnsiText,
   Button,
   FileIcon,
   MessageItem,
@@ -6,6 +7,7 @@ import {
   MessageItemHeader,
   MessageItemStatus,
   type StatusTone,
+  SyntaxText,
   toolTone,
 } from '@agimon-ai/doompi-web-components';
 import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
@@ -29,11 +31,13 @@ const STATUS_TONE: Record<BashStatusTone, StatusTone> = {
 
 /**
  * The bash tool's timeline item, the web half of renderBashCall and
- * renderBashResult: the collapsed command and its modifiers in the header;
- * the streamed tail while running, then the bounded log tail with its
- * one-line summary in the body. A command promoted to a background runner
- * offers the same stop the activity dock does, for as long as the runners
- * channel reports it running.
+ * renderBashResult. Collapsed it is a single header row: the tool name, the
+ * command shortened to one line, its modifiers, and the outcome badge, so a
+ * transcript of many calls stays scannable. Expanding it opens the body: the
+ * command exactly as it was run, then the whole tail the frame carries, each
+ * in its own scroll box so one chatty command cannot own the viewport. A
+ * command promoted to a background runner offers the same stop the activity
+ * dock does, for as long as the runners channel reports it running.
  */
 export function BashToolMessage({
   sessionId,
@@ -58,30 +62,35 @@ export function BashToolMessage({
     runners.store,
     (state) => runnerId !== undefined && runners.select(state, sessionId).stopRequested.includes(runnerId),
   );
-  const command = typeof args.command === 'string' ? formatBashCommand(args.command) : '';
+  const rawCommand = typeof args.command === 'string' ? args.command : '';
+  const command = formatBashCommand(rawCommand);
   const flags = formatBashFlags(args);
-  const collapsed = bashResultView({ details: result?.details, output, expanded: false, isPartial: running, isError });
   const stoppable = sessionId !== null && runnerId !== undefined && run !== undefined && run.exit === undefined;
 
   return (
-    <MessageItem
-      tone={toolTone({ running, isError })}
-      expandable={collapsed.hidden > 0 || details.logPath !== undefined}
-    >
+    <MessageItem tone={toolTone({ running, isError })} expandable>
       {({ expanded }) => {
-        const view = expanded
-          ? bashResultView({ details: result?.details, output, expanded: true, isPartial: running, isError })
-          : collapsed;
+        // Nothing is shown until the card is open, so the body always reads the
+        // unclipped view; the collapsed state has no lines to bound.
+        const view = bashResultView({
+          details: result?.details,
+          output,
+          expanded: true,
+          isPartial: running,
+          isError,
+        });
         return (
           <>
             <MessageItemHeader title="bash">
               <span data-testid="tool-call-bash" className="flex min-w-0 flex-1 items-center gap-2">
                 <span className="min-w-0 flex-1 truncate font-mono text-doom-text">{command}</span>
-                {flags.length > 0 ? <span className="shrink-0 text-doom-faint">· {flags.join(' · ')}</span> : null}
+                {flags.length > 0 ? (
+                  <span className="hidden shrink-0 text-doom-faint sm:inline">· {flags.join(' · ')}</span>
+                ) : null}
               </span>
-              {/* The card only ever shows a bounded tail, and expanding it
-                  shows a longer bounded tail. The whole log is a click away
-                  whether or not the card is open. */}
+              {/* The log and the stop live in the header, not the body: a
+                  collapsed row still has to reach the whole log and still has
+                  to be able to stop a run it promoted to the background. */}
               {run !== undefined && sessionId !== null ? (
                 <Button
                   variant="outline"
@@ -98,54 +107,66 @@ export function BashToolMessage({
                   log
                 </Button>
               ) : null}
+              {stoppable ? (
+                <Button
+                  size="xs"
+                  variant={stopping ? 'outline' : 'danger-outline'}
+                  disabled={stopping}
+                  data-testid="tool-result-bash-stop"
+                  data-stopping={stopping}
+                  title={
+                    stopping ? 'stop requested; the runner reports its own exit' : 'ask the runtime to stop this runner'
+                  }
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    if (sessionId !== null && runnerId !== undefined)
+                      requestRunnerStop(sendSessionFrame, sessionId, runnerId);
+                  }}
+                  className="shrink-0 px-1.5 text-[9px] font-bold"
+                >
+                  {stopping ? 'stopping…' : 'stop'}
+                </Button>
+              ) : null}
             </MessageItemHeader>
-            {view.lines.length > 0 || view.status !== null || stoppable ? (
-              <MessageItemBody data-testid="tool-result-bash" className="flex flex-col gap-1">
+            {expanded ? (
+              <MessageItemBody data-testid="tool-result-bash" className="flex flex-col gap-2">
+                {/* The header had to shorten the command to one row; this is
+                    the command as it was actually run, wrapped rather than
+                    clipped and coloured as the shell it is. */}
+                {rawCommand.length > 0 ? (
+                  <SyntaxText
+                    data-testid="tool-result-bash-command"
+                    grammar="shell"
+                    text={rawCommand}
+                    className="max-h-40 overflow-auto text-doom-text"
+                  />
+                ) : null}
+                {/* The tail arrives with the colours the command wrote: the
+                    log keeps them, and only the model's copy is flattened. */}
                 {view.lines.length > 0 ? (
-                  <pre
-                    className={`${expanded ? 'whitespace-pre-wrap break-words' : 'overflow-hidden whitespace-pre'} font-mono text-doom-dim`}
-                  >
-                    {view.lines.join('\n')}
-                  </pre>
+                  <AnsiText
+                    data-testid="tool-result-bash-output"
+                    text={view.lines.join('\n')}
+                    className="max-h-96 overflow-auto whitespace-pre-wrap break-words [overflow-wrap:anywhere] border-doom-border-soft border-t pt-2 font-mono text-doom-dim"
+                  />
                 ) : null}
                 {view.status ? (
                   <MessageItemStatus
                     data-testid="tool-result-bash-status"
                     tone={STATUS_TONE[view.status.tone]}
                     glyph={view.status.glyph}
+                    className="min-w-0"
                   >
-                    {view.status.text}
-                    {view.hidden > 0 ? ` · ${String(view.hidden)} more line(s) above` : ''}
+                    <span className="break-words">{view.status.text}</span>
                   </MessageItemStatus>
                 ) : null}
-                {expanded && details.logPath !== undefined ? (
+                {details.logPath !== undefined ? (
                   // The tail is bounded by the runner; the whole log only ever exists on
                   // disk, so the item names the file rather than pretending this is all.
-                  <span data-testid="tool-result-bash-log" className="truncate text-doom-faint">
+                  <span data-testid="tool-result-bash-log" className="min-w-0 break-all text-doom-faint">
                     full log · <span className="text-doom-dim">{details.logPath}</span>
                   </span>
                 ) : null}
-                {stoppable ? (
-                  <Button
-                    size="xs"
-                    variant={stopping ? 'outline' : 'danger-outline'}
-                    disabled={stopping}
-                    data-testid="tool-result-bash-stop"
-                    data-stopping={stopping}
-                    title={
-                      stopping
-                        ? 'stop requested; the runner reports its own exit'
-                        : 'ask the runtime to stop this runner'
-                    }
-                    onClick={() => {
-                      if (sessionId !== null && runnerId !== undefined)
-                        requestRunnerStop(sendSessionFrame, sessionId, runnerId);
-                    }}
-                    className="self-start px-1.5 text-[8px] font-bold"
-                  >
-                    {stopping ? 'stopping…' : 'stop'}
-                  </Button>
-                ) : null}
               </MessageItemBody>
             ) : null}
           </>

package/src/web/RunnerLogPanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, SearchIcon, StatusBadge, type StatusTone } from '@agimon-ai/doompi-web-components';
+import { AnsiText, Button, Input, SearchIcon, StatusBadge, type StatusTone } from '@agimon-ai/doompi-web-components';
 import type { TransientTab, WebPluginSlotProps } from '@agimon-ai/doompi-web-contracts';
 import { useStore } from '@tanstack/react-store';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -249,9 +249,10 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
         ) : lines.length === 0 ? (
           <p className="text-[10px] text-doom-faint">{filtering ? 'nothing matched' : 'the log is empty'}</p>
         ) : (
-          <pre className="whitespace-pre-wrap break-words font-mono text-[10px] leading-[1.6] text-doom-dim">
-            {lines.join('\n')}
-          </pre>
+          <AnsiText
+            text={lines.join('\n')}
+            className="whitespace-pre-wrap break-words font-mono text-[10px] leading-[1.6] text-doom-dim"
+          />
         )}
         <div ref={bottom} />
       </div>

package/src/web/RunnersActivitySection.tsx

@@ -6,6 +6,7 @@ import type { RunnerRunView } from '../types/webRunners.ts';
 import { formatRunnerUptime } from './format.ts';
 import { runnerLogTab } from './RunnerLogPanel.tsx';
 import { requestRunnerStop, runners } from './runnersStore.ts';
+import { useRunnerTail } from './runnerTail.ts';
 
 const TICK_MS = 10_000;
 
@@ -39,69 +40,102 @@ export function RunnersActivitySection({ sessionId, sendSessionFrame, openTransi
 
   return (
     <div data-testid="activity-runner-runs" className="flex flex-col gap-0.5">
-      {running.map((run: RunnerRunView) => {
-        const stopRequested = session.stopRequested.includes(run.id);
-        return (
+      {running.map((run: RunnerRunView) => (
+        <RunnerRow
+          key={run.id}
+          run={run}
+          now={now}
+          stopRequested={session.stopRequested.includes(run.id)}
+          sessionId={sessionId}
+          sendSessionFrame={sendSessionFrame}
+          openTransientTab={openTransientTab}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * One running runner: its name, how long it has been up, a stop control, and
+ * one line of what it is doing. Its own component because the tail line is a
+ * subscription per row, and a row that scrolls out of the dock closes it.
+ */
+function RunnerRow({
+  run,
+  now,
+  stopRequested,
+  sessionId,
+  sendSessionFrame,
+  openTransientTab,
+}: {
+  run: RunnerRunView;
+  now: number;
+  stopRequested: boolean;
+} & Pick<WebPluginSlotProps, 'sessionId' | 'sendSessionFrame' | 'openTransientTab'>) {
+  const tail = useRunnerTail(sessionId, run.id, run.state === 'running');
+  return (
+    <Button
+      variant="ghost"
+      size="card"
+      data-testid={`activity-runner-${run.id}`}
+      data-runner-tone="running"
+      title="open this runner's log"
+      onClick={() => {
+        if (sessionId === null) return;
+        openTransientTab(runnerLogTab(run));
+      }}
+      className="min-w-0 gap-0.5 rounded-[5px] px-1 py-1 hover:bg-doom-panel"
+    >
+      <span className="flex min-w-0 items-center gap-1.5">
+        <Dot tone="yellow" pulse />
+        <span className="min-w-0 flex-1 truncate text-left text-[10px] font-bold text-doom-hi">{run.name}</span>
+        <span className="shrink-0 text-[9px] text-doom-faint">
+          {formatRunnerUptime(run.startedAt, now)}
+          {run.interactive ? ' · tty' : ''}
+        </span>
+        {sessionId !== null ? (
           <Button
-            key={run.id}
-            variant="ghost"
-            size="card"
-            data-testid={`activity-runner-${run.id}`}
-            data-runner-tone="running"
-            title="open this runner's log"
-            onClick={() => {
-              if (sessionId === null) return;
-              openTransientTab(runnerLogTab(run));
-            }}
-            className="min-w-0 gap-0.5 rounded-[5px] px-1 py-1 hover:bg-doom-panel"
+            asChild
+            variant={stopRequested ? 'outline' : 'danger-outline'}
+            size="xs"
+            data-testid={`activity-runner-stop-${run.id}`}
+            data-stopping={stopRequested}
+            title={
+              stopRequested ? 'stop requested; the runner reports its own exit' : 'ask the runtime to stop this runner'
+            }
+            className="px-1.5 text-[8px] font-bold"
           >
-            <span className="flex min-w-0 items-center gap-1.5">
-              <Dot tone="yellow" pulse />
-              <span className="min-w-0 flex-1 truncate text-left text-[10px] font-bold text-doom-hi">{run.name}</span>
-              <span className="shrink-0 text-[9px] text-doom-faint">
-                {formatRunnerUptime(run.startedAt, now)}
-                {run.interactive ? ' · tty' : ''}
-              </span>
-              {sessionId !== null ? (
-                <Button
-                  asChild
-                  variant={stopRequested ? 'outline' : 'danger-outline'}
-                  size="xs"
-                  data-testid={`activity-runner-stop-${run.id}`}
-                  data-stopping={stopRequested}
-                  title={
-                    stopRequested
-                      ? 'stop requested; the runner reports its own exit'
-                      : 'ask the runtime to stop this runner'
-                  }
-                  className="px-1.5 text-[8px] font-bold"
-                >
-                  {/* The row is already a button, so the stop control lends it
-                      the primitive's styling rather than nesting a second one. */}
-                  <span
-                    role="button"
-                    tabIndex={stopRequested ? -1 : 0}
-                    aria-disabled={stopRequested}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      if (!stopRequested) requestRunnerStop(sendSessionFrame, sessionId, run.id);
-                    }}
-                    onKeyDown={(event) => {
-                      if (event.key !== 'Enter' && event.key !== ' ') return;
-                      event.preventDefault();
-                      event.stopPropagation();
-                      if (!stopRequested) requestRunnerStop(sendSessionFrame, sessionId, run.id);
-                    }}
-                  >
-                    {stopRequested ? 'stopping…' : 'stop'}
-                  </span>
-                </Button>
-              ) : null}
+            {/* The row is already a button, so the stop control lends it
+                the primitive's styling rather than nesting a second one. */}
+            <span
+              role="button"
+              tabIndex={stopRequested ? -1 : 0}
+              aria-disabled={stopRequested}
+              onClick={(event) => {
+                event.stopPropagation();
+                if (!stopRequested) requestRunnerStop(sendSessionFrame, sessionId, run.id);
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter' && event.key !== ' ') return;
+                event.preventDefault();
+                event.stopPropagation();
+                if (!stopRequested) requestRunnerStop(sendSessionFrame, sessionId, run.id);
+              }}
+            >
+              {stopRequested ? 'stopping…' : 'stop'}
             </span>
-            <span className="truncate pl-3 text-left text-[9px] text-doom-faint">{run.command}</span>
           </Button>
-        );
-      })}
-    </div>
+        ) : null}
+      </span>
+      {/* What it is doing, falling back to what it was asked to do until the
+          first line of output arrives. */}
+      <span
+        data-testid={`activity-runner-detail-${run.id}`}
+        data-detail={tail === undefined ? 'command' : 'tail'}
+        className="truncate pl-3 text-left text-[9px] text-doom-faint"
+      >
+        {tail ?? run.command}
+      </span>
+    </Button>
   );
 }

package/src/web/runnerTail.ts

@@ -0,0 +1,82 @@
+import { ansiSpans } from '@agimon-ai/doompi-web-components';
+import { useEffect, useState } from 'react';
+import { fetchRunnerLog, followRunnerLog, type RunnerLogFollow } from './logApi.ts';
+
+/**
+ * The newest line a running runner has written, for a row that has one line to
+ * spend.
+ *
+ * The dock answers "what is happening", and a command that has not changed
+ * since it started answers "what was asked". The last line of the log is the
+ * closest thing to progress the cockpit can show without opening the log, so a
+ * row that is still running trades its command for it.
+ *
+ * The line comes from the same two calls the log panel makes: read the tail,
+ * then follow the stream from exactly where that read ended. Nothing new goes
+ * on the wire, and a runner nobody is looking at is not followed, because the
+ * stream lives and dies with the row.
+ */
+
+/** Enough lines that a trailing blank, or a final progress redraw, is not the whole answer. */
+const TAIL_REQUEST_LINES = 5;
+
+/**
+ * The last line worth showing, as plain text.
+ *
+ * Blank lines are skipped, because a log that ends with a newline would
+ * otherwise report nothing at all. Colour is dropped rather than rendered: the
+ * row is nine pixels of faint text beside a name and a stop control, and a
+ * green tick from someone else's palette in the middle of it reads as damage.
+ */
+export function plainTailLine(lines: readonly string[]): string | undefined {
+  for (let index = lines.length - 1; index >= 0; index -= 1) {
+    const text = ansiSpans(lines[index] ?? '')
+      .map((span) => span.text)
+      .join('')
+      .trim();
+    if (text.length > 0) return text;
+  }
+  return undefined;
+}
+
+/**
+ * The newest log line of a running runner, or undefined for a runner that is
+ * finished, unreachable, or has not written anything yet. The caller decides
+ * what to show instead; this hook never invents a placeholder.
+ */
+export function useRunnerTail(sessionId: string | null, runId: string, running: boolean): string | undefined {
+  // Kept with the run it belongs to, so a row that is reused for another
+  // runner shows nothing rather than the previous runner's output.
+  const [tail, setTail] = useState<{ runId: string; text: string } | undefined>(undefined);
+
+  useEffect(() => {
+    if (!running || sessionId === null) return;
+    let live = true;
+    let follow: RunnerLogFollow | undefined;
+    const controller = new AbortController();
+    void fetchRunnerLog(sessionId, runId, { lines: TAIL_REQUEST_LINES }, controller.signal).then((result) => {
+      // A log the hub cannot serve leaves the row on its command, which is
+      // still true; the log tab is where an unreachable runner is diagnosed.
+      if (!live || 'error' in result) return;
+      const initial = plainTailLine(result.slice.text.split('\n'));
+      if (initial !== undefined) setTail({ runId, text: initial });
+      if (!result.slice.running) return;
+      follow = followRunnerLog(sessionId, runId, result.slice.fileSize, {
+        onEvent: (event) => {
+          const next = plainTailLine(event.lines);
+          if (live && next !== undefined) setTail({ runId, text: next });
+        },
+        // A dropped stream freezes the line at the last one that arrived. The
+        // row is a glance, and reconnecting it would cost more than it says.
+        onError: () => undefined,
+      });
+    });
+    return () => {
+      live = false;
+      controller.abort();
+      follow?.close();
+    };
+  }, [sessionId, runId, running]);
+
+  return running && tail?.runId === runId ? tail.text : undefined;
+}

package/src/web/tsconfig.json

@@ -19,5 +19,5 @@
     "forceConsistentCasingInFileNames": true,
     "types": ["node"]
   },
-  "include": [".", "../types", "../exports/webClient.ts"]
+  "include": [".", "../types", "../exports/webClient.ts", "../../tests/web"]
 }