@saadnvd1/agent-os 0.3.737 → 0.3.742

package/components/Chat/Activity.test.ts

@@ -5,7 +5,7 @@ describe("currentActivity while compacting", () => {
   it("says so, with the size going in and when it began", () => {
     expect(
       currentActivity([], "running", { since: 5, before: 182_000 })
-    ).toEqual({
+    ).toMatchObject({
       label: "Compacting context… 182k tokens",
       since: 5,
       compacting: true,
@@ -18,5 +18,6 @@ describe("currentActivity while compacting", () => {
   it("is plain work without it, and nothing once the turn is over", () => {
     expect(currentActivity([], "running")?.compacting).toBeUndefined();
     expect(currentActivity([], "idle", { since: 5 })).toBeNull();
+    expect(currentActivity([], "running")?.label).toBe("Waiting for the model");
   });
 });

package/components/Chat/Activity.tsx

@@ -1,91 +1,129 @@
 "use client";
 
-import { Loader2, MessageCircleQuestion, Shrink, Square } from "lucide-react";
-import type { ChatItem, ChatState, Compacting } from "@/lib/chat/events";
+import {
+  AlertTriangle,
+  Loader2,
+  MessageCircleQuestion,
+  Shrink,
+  Square,
+} from "lucide-react";
+import type {
+  ChatItem,
+  ChatState,
+  Compacting,
+  ModelWait,
+} from "@/lib/chat/events";
 import { formatTokens } from "@/lib/chat/context";
 import { formatElapsed } from "@/lib/chat/elapsed";
+import { currentActivity, type Phase } from "@/lib/chat/progress";
+import { cn } from "@/lib/utils";
 import { useNow } from "./useNow";
 
-type Tool = Extract<ChatItem, { kind: "tool" }>;
+export { currentActivity };
 
-// What the turn is doing now and for how long, from its items: the latest
-// running step, else whether it's writing or thinking.
-export function currentActivity(
-  items: ChatItem[],
-  state: ChatState,
-  compacting: Compacting | null = null
-): { label: string; since?: number; compacting?: boolean } | null {
-  if (state === "waiting") return { label: "Waiting for your answer" };
-  if (state !== "running") return null;
-  if (compacting)
-    return {
-      label: `Compacting context…${compacting.before ? ` ${formatTokens(compacting.before)} tokens` : ""}`,
-      since: compacting.since,
-      compacting: true,
-    };
-  const lastUser = items.findLast((i) => i.kind === "user");
-  const tool = items.findLast(
-    (i): i is Tool => i.kind === "tool" && i.status === "running"
-  );
-  if (tool) return { label: tool.title, since: tool.createdAt };
-  const last = items.at(-1);
-  const writing =
-    last && (last.kind === "assistant" || last.kind === "reasoning");
-  return {
-    label:
-      writing && last.streaming
-        ? last.kind === "assistant"
-          ? "Writing"
-          : "Thinking"
-        : "Working",
-    since: lastUser?.createdAt,
-  };
-}
+const PHASE: Record<Phase, string> = {
+  planning: "Planning",
+  coding: "Coding",
+  testing: "Testing",
+  error: "Error",
+};
 
-// One line above the composer while a turn runs, so a long wait never
-// looks like nothing is happening.
+// Up to three lines above the composer while a turn runs, so a long wait
+// never looks like nothing is happening: what it's doing and for how long,
+// the phase and step count, and a hint when a model call drags on.
 export function ActivityLine({
   items,
   state,
   compacting = null,
+  modelWait = null,
+  model,
   onStop,
 }: {
   items: ChatItem[];
   state: ChatState;
   compacting?: Compacting | null;
+  modelWait?: ModelWait | null;
+  model?: string;
   onStop: () => void;
 }) {
-  const activity = currentActivity(items, state, compacting);
-  const now = useNow(!!activity?.since);
+  const now = useNow(state === "running");
+  const activity = currentActivity(
+    items,
+    state,
+    compacting,
+    modelWait,
+    model,
+    now
+  );
   if (!activity) return null;
   const waiting = state === "waiting";
+  const failed = activity.phase === "error" && activity.kind === "waiting";
   return (
-    <div className="text-muted-foreground flex min-h-9 items-center gap-2 px-2 text-xs">
-      {waiting ? (
-        <MessageCircleQuestion className="text-primary h-3.5 w-3.5 shrink-0" />
-      ) : activity.compacting ? (
-        <Shrink className="h-3.5 w-3.5 shrink-0 animate-pulse text-blue-600 dark:text-blue-400" />
-      ) : (
-        <Loader2 className="text-primary h-3.5 w-3.5 shrink-0 animate-spin" />
-      )}
-      <span className="text-foreground/80 min-w-0 flex-1 truncate">
-        {activity.label}
-      </span>
-      {activity.since && (
-        <span className="shrink-0 font-mono tabular-nums">
-          {formatElapsed(now - activity.since)}
+    <div className="text-muted-foreground px-2 text-xs">
+      <div className="flex min-h-9 items-center gap-2">
+        {waiting ? (
+          <MessageCircleQuestion className="text-primary h-3.5 w-3.5 shrink-0" />
+        ) : activity.compacting ? (
+          <Shrink className="h-3.5 w-3.5 shrink-0 animate-pulse text-blue-600 dark:text-blue-400" />
+        ) : failed ? (
+          <AlertTriangle className="text-destructive h-3.5 w-3.5 shrink-0" />
+        ) : (
+          <Loader2 className="text-primary h-3.5 w-3.5 shrink-0 animate-spin" />
+        )}
+        <span className="text-foreground/80 min-w-0 flex-1 truncate">
+          {activity.label}
         </span>
+        {activity.tokens && (
+          <span className="shrink-0 whitespace-nowrap">
+            {formatTokens(activity.tokens)}+ tokens
+          </span>
+        )}
+        {activity.since && (
+          <span className="shrink-0 font-mono tabular-nums">
+            {formatElapsed(now - activity.since)}
+          </span>
+        )}
+        {!waiting && (
+          <button
+            type="button"
+            onClick={onStop}
+            aria-label="Stop"
+            className="hover:text-foreground hover:bg-foreground/[0.06] -my-1 flex h-11 shrink-0 items-center gap-1 rounded-md px-2 md:my-0 md:h-7"
+          >
+            <Square className="h-3 w-3 fill-current" />
+            Stop
+          </button>
+        )}
+      </div>
+      {!waiting && activity.steps > 0 && activity.phase && (
+        <div className="flex items-center gap-1.5 pb-1 pl-5 text-[11px]">
+          <span
+            className={cn(
+              "shrink-0 font-medium",
+              activity.phase === "error"
+                ? "text-destructive"
+                : "text-foreground/70"
+            )}
+          >
+            {PHASE[activity.phase]}
+          </span>
+          <span className="shrink-0">
+            · {activity.steps} {activity.steps === 1 ? "step" : "steps"}
+          </span>
+          {activity.lastStep && (
+            <span className="min-w-0 flex-1 truncate">
+              · {activity.lastStep}
+            </span>
+          )}
+          {activity.turnSince && (
+            <span className="ml-auto shrink-0 pl-2 font-mono tabular-nums">
+              turn {formatElapsed(now - activity.turnSince)}
+            </span>
+          )}
+        </div>
       )}
-      {!waiting && (
-        <button
-          type="button"
-          onClick={onStop}
-          aria-label="Stop"
-          className="hover:text-foreground hover:bg-foreground/[0.06] -my-1 flex h-11 shrink-0 items-center gap-1 rounded-md px-2 md:my-0 md:h-7"
-        >
-          <Square className="h-3 w-3 fill-current" />
-          Stop
-        </button>
+      {activity.hint && (
+        <p className="pb-1.5 pl-5 text-[11px]">{activity.hint}</p>
       )}
     </div>
   );

package/components/Chat/ChatPanel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { StepCounts } from "@/lib/chat/tool-outcome";
 import {
   memo,
   useCallback,
@@ -32,6 +33,7 @@ import { sentPrompts } from "@/lib/chat/history";
 import { quoteInsert, quoteMarkdown } from "@/lib/chat/quote";
 import { OrchestratorBar } from "@/components/Orchestrator/OrchestratorBar";
 import { ActivityLine } from "./Activity";
+import { modelLabel as pickedModelLabel } from "./ModelPicker";
 import { Approval } from "./Approval";
 import { BackgroundTasks } from "./BackgroundTasks";
 import { SubagentCard } from "./Subagent";
@@ -99,7 +101,15 @@ interface ItemActions {
   onQuote?: (text: string) => void;
 }
 
-function Item({ item, actions }: { item: ChatItem; actions: ItemActions }) {
+function Item({
+  item,
+  actions,
+  steps,
+}: {
+  item: ChatItem;
+  actions: ItemActions;
+  steps?: StepCounts;
+}) {
   switch (item.kind) {
     case "user":
       return (
@@ -119,7 +129,7 @@ function Item({ item, actions }: { item: ChatItem; actions: ItemActions }) {
     case "todos":
       return <Todos item={item} />;
     case "turn_end":
-      return <TurnEnd item={item} />;
+      return <TurnEnd item={item} steps={steps} />;
     case "error":
       return <ErrorMessage item={item} />;
     case "command_output":
@@ -209,7 +219,7 @@ const Block = memo(
       </UndoneBlock>
     ) : (
       <div data-item={b.item.id}>
-        <Item item={b.item} actions={actions} />
+        <Item item={b.item} actions={actions} steps={b.steps} />
       </div>
     );
   },
@@ -310,6 +320,7 @@ export function ChatPanel({
     requestFiles,
     search,
     compacting,
+    modelWait,
     loadedFor,
   } = useChat(sessionId, (text) => setPrefill({ text, at: Date.now() }));
   const startFresh = useFreshStart();
@@ -787,6 +798,8 @@ export function ChatPanel({
           items={items}
           state={state}
           compacting={compacting}
+          modelWait={modelWait}
+          model={pickedModelLabel(models, model, modelLabel)}
           onStop={interrupt}
         />
         <BackgroundTasks

package/components/Chat/LiveOutput.test.ts

@@ -0,0 +1,36 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import type { ToolItem } from "@/lib/chat/group";
+import { ToolGroup } from "./Tools";
+
+const tool = (over: Partial<ToolItem>): ToolItem => ({
+  id: "t1",
+  kind: "tool",
+  name: "Bash",
+  title: "npm test",
+  input: { command: "npm test" },
+  status: "running",
+  createdAt: Date.now(),
+  ...over,
+});
+
+const html = (t: ToolItem) =>
+  renderToStaticMarkup(createElement(ToolGroup, { tools: [t] }));
+
+describe("a running step", () => {
+  it("shows its output so far without being opened", () => {
+    const out = html(tool({ output: "PASS a.test.ts\nRUNS b.test.ts" }));
+    expect(out).toContain('data-testid="tool-output"');
+    expect(out).toContain("RUNS b.test.ts");
+  });
+
+  it("shows no output block before it prints anything", () => {
+    expect(html(tool({}))).not.toContain("tool-output");
+  });
+
+  it("keeps a finished step collapsed", () => {
+    const out = html(tool({ status: "done", output: "ok" }));
+    expect(out).not.toContain("tool-output");
+  });
+});

package/components/Chat/Messages.test.ts

@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
-import { AssistantMessage, UserMessage } from "./Messages";
+import { AssistantMessage, TurnEnd, UserMessage } from "./Messages";
 
 const item = {
   id: "a1",
@@ -119,3 +119,15 @@ describe("UserMessage code blocks", () => {
     }
   });
 });
+
+describe("TurnEnd steps", () => {
+  it("says what a stopped turn got through", () => {
+    const html = renderToStaticMarkup(
+      createElement(TurnEnd, {
+        item: { id: "e", kind: "turn_end", interrupted: true } as never,
+        steps: { total: 5, ok: 3, failed: 1, stopped: 1, running: 0 },
+      })
+    );
+    expect(html).toContain("Stopped · 4 of 5 steps done, 1 failed, 1 not run");
+  });
+});

package/components/Chat/Messages.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { StepCounts } from "@/lib/chat/tool-outcome";
 import { memo } from "react";
 import { useSnapshot } from "valtio";
 import {
@@ -378,7 +379,23 @@ export function Todos({ item }: { item: Of<"todos"> }) {
   );
 }
 
-export function TurnEnd({ item }: { item: Of<"turn_end"> }) {
+// What a stopped or failed turn got through.
+export function stepsLabel(s: StepCounts): string {
+  const done = s.ok + s.failed;
+  const parts = [`${done} of ${s.total} steps done`];
+  if (s.failed) parts.push(`${s.failed} failed`);
+  const unfinished = s.stopped + s.running;
+  if (unfinished) parts.push(`${unfinished} not run`);
+  return parts.join(", ");
+}
+
+export function TurnEnd({
+  item,
+  steps,
+}: {
+  item: Of<"turn_end">;
+  steps?: StepCounts;
+}) {
   const secs = item.durationMs ? Math.round(item.durationMs / 1000) : null;
   const early = !item.interrupted && item.ended;
   const label = item.interrupted
@@ -407,7 +424,7 @@ export function TurnEnd({ item }: { item: Of<"turn_end"> }) {
       )}
       <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">
         <span className="bg-foreground/[0.06] h-px flex-1" />
-        {label}
+        {steps ? `${label} · ${stepsLabel(steps)}` : label}
         <TurnCopy turnEndId={item.id} />
         <TurnBookmark turnEndId={item.id} />
         <span className="bg-foreground/[0.06] h-px flex-1" />

package/components/Chat/StepOutcomes.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { ToolItem } from "@/lib/chat/group";
+import { toolOutcome } from "@/lib/chat/tool-outcome";
+import { cn } from "@/lib/utils";
+import { StatusIcon } from "./Tools";
+
+export const MAX_CHIPS = 24;
+
+const WORD = {
+  running: "running",
+  done: "ok",
+  error: "failed",
+  stopped: "not run",
+} as const;
+
+// One line per collapsed group: how each step ended, so the results aren't
+// lost behind the fold.
+export function StepOutcomes({
+  tools,
+  onOpen,
+}: {
+  tools: ToolItem[];
+  onOpen: () => void;
+}) {
+  const shown = tools.slice(0, MAX_CHIPS);
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label="Show steps"
+      className="flex min-h-11 w-full flex-wrap items-center gap-x-3 gap-y-1 px-2 pb-1.5 text-left md:min-h-0"
+    >
+      {shown.map((t) => {
+        const code = toolOutcome(t);
+        return (
+          <span
+            key={t.id}
+            title={`${t.title}: ${WORD[t.status]}${code ? `, ${code}` : ""}`}
+            aria-label={`${t.title}: ${WORD[t.status]}${code ? `, ${code}` : ""}`}
+            className="flex min-w-0 items-center gap-1"
+          >
+            <StatusIcon status={t.status} />
+            {code && (
+              <span
+                className={cn(
+                  "font-mono text-[11px]",
+                  t.status === "error"
+                    ? "text-destructive"
+                    : "text-muted-foreground"
+                )}
+              >
+                {code}
+              </span>
+            )}
+          </span>
+        );
+      })}
+      {tools.length > shown.length && (
+        <span className="text-muted-foreground/70 font-mono text-[11px]">
+          +{tools.length - shown.length} more
+        </span>
+      )}
+    </button>
+  );
+}

package/components/Chat/Tools.test.ts

@@ -0,0 +1,52 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import type { ToolItem } from "@/lib/chat/group";
+import { MAX_CHIPS } from "./StepOutcomes";
+import { ToolGroup } from "./Tools";
+
+const tool = (id: string, over: Partial<ToolItem> = {}): ToolItem => ({
+  id,
+  kind: "tool",
+  name: "Bash",
+  title: `check ${id}`,
+  input: {},
+  status: "done",
+  createdAt: 0,
+  ...over,
+});
+
+const render = (tools: ToolItem[]) =>
+  renderToStaticMarkup(createElement(ToolGroup, { tools }));
+
+describe("collapsed ToolGroup", () => {
+  it("keeps each step's outcome in view", () => {
+    const html = render([
+      tool("a", { output: "HTTP/2 200 \n" }),
+      tool("b", { status: "error", output: "Exit code 7" }),
+      tool("c", { status: "error", deferred: true, outcome: "HTTP 404" }),
+      tool("d", { status: "stopped" }),
+    ]);
+    expect(html).toContain("4 steps");
+    expect(html).toContain("1 ok");
+    expect(html).toContain("2 failed");
+    expect(html).toContain("1 not run");
+    expect(html).toContain("check a: ok, HTTP 200");
+    expect(html).toContain("check b: failed, exit 7");
+    expect(html).toContain("check c: failed, HTTP 404");
+    expect(html).toContain("check d: not run");
+  });
+
+  it("shows no strip while a step runs", () => {
+    expect(render([tool("a", { status: "running" })])).not.toContain(
+      "Show steps"
+    );
+  });
+
+  it("caps the strip", () => {
+    const tools = Array.from({ length: MAX_CHIPS + 3 }, (_, i) =>
+      tool(`x${i}`)
+    );
+    expect(render(tools)).toContain("+3 more");
+  });
+});

package/components/Chat/Tools.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 import { Check, ChevronRight, Layers, Loader2, Square, X } from "lucide-react";
 import type { FileDiff, ToolBody } from "@/lib/chat/events";
 import type { ToolItem } from "@/lib/chat/group";
@@ -8,6 +8,8 @@ import { lineDiff, shortPath, type DiffLine } from "@/lib/chat/diff";
 import { needsBody } from "@/lib/chat/bodyCache";
 import { cn } from "@/lib/utils";
 import { formatElapsed } from "@/lib/chat/elapsed";
+import { stepCounts, toolOutcome } from "@/lib/chat/tool-outcome";
+import { StepOutcomes } from "./StepOutcomes";
 import { Highlighted } from "./Code";
 import { BackgroundButton, BackgroundState, useBackground } from "./background";
 import { useNow } from "./useNow";
@@ -109,6 +111,36 @@ export function ToolPreview({
   );
 }
 
+// A step's output. While it runs the view follows the end, unless the
+// reader scrolled up to read.
+export function LiveOutput({
+  text,
+  running,
+}: {
+  text: string;
+  running: boolean;
+}) {
+  const ref = useRef<HTMLPreElement>(null);
+  const pinned = useRef(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (running && el && pinned.current) el.scrollTop = el.scrollHeight;
+  }, [text, running]);
+  return (
+    <pre
+      ref={ref}
+      data-testid="tool-output"
+      onScroll={(e) => {
+        const el = e.currentTarget;
+        pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+      }}
+      className="text-muted-foreground max-h-64 overflow-auto rounded-lg px-2 font-mono text-[11px] whitespace-pre-wrap"
+    >
+      {text}
+    </pre>
+  );
+}
+
 function ToolDetail({ tool }: { tool: ToolItem }) {
   const body = useToolBody(tool);
   if (body === undefined && tool.hasDiff)
@@ -121,9 +153,7 @@ function ToolDetail({ tool }: { tool: ToolItem }) {
     <div className="space-y-2 pb-2 pl-6">
       <ToolPreview name={tool.name} input={tool.input} diff={body?.diff} />
       {body?.output && !body.diff && (
-        <pre className="text-muted-foreground max-h-64 overflow-auto rounded-lg px-2 font-mono text-[11px] whitespace-pre-wrap">
-          {body.output}
-        </pre>
+        <LiveOutput text={body.output} running={tool.status === "running"} />
       )}
       {body === undefined && tool.hasOutput && (
         <Loader2 className="text-muted-foreground h-3.5 w-3.5 animate-spin" />
@@ -146,6 +176,10 @@ function Elapsed({ tool }: { tool: ToolItem }) {
   );
 }
 
+// A running step that has printed something: its output shows as it comes.
+const streaming = (tool: ToolItem) =>
+  tool.status === "running" && !!tool.output && !tool.deferred;
+
 function ToolRow({ tool }: { tool: ToolItem }) {
   const [open, setOpen] = useRowState(
     `tool:${tool.id}`,
@@ -163,6 +197,18 @@ function ToolRow({ tool }: { tool: ToolItem }) {
           <span className="min-w-0 flex-1 truncate font-mono text-xs">
             {tool.title}
           </span>
+          {toolOutcome(tool) && (
+            <span
+              className={cn(
+                "shrink-0 font-mono text-[11px]",
+                tool.status === "error"
+                  ? "text-destructive"
+                  : "text-muted-foreground"
+              )}
+            >
+              {toolOutcome(tool)}
+            </span>
+          )}
           {tool.backgroundTaskId ? (
             <BackgroundState tool={tool} />
           ) : (
@@ -172,7 +218,7 @@ function ToolRow({ tool }: { tool: ToolItem }) {
         <BackgroundButton tool={tool} />
         <BookmarkButton itemId={tool.id} />
       </div>
-      {open && <ToolDetail tool={tool} />}
+      {(open || streaming(tool)) && <ToolDetail tool={tool} />}
     </div>
   );
 }
@@ -180,8 +226,7 @@ function ToolRow({ tool }: { tool: ToolItem }) {
 // A run of tool calls: one quiet line, expandable to every step.
 export function ToolGroup({ tools }: { tools: ToolItem[] }) {
   const running = tools.some((t) => t.status === "running");
-  const failed = tools.filter((t) => t.status === "error").length;
-  const stopped = tools.filter((t) => t.status === "stopped").length;
+  const { ok, failed, stopped } = stepCounts(tools);
   const edits = tools.filter((t) => t.diff || t.hasDiff).length;
   const moved = tools.filter((t) => t.backgroundTaskId).length;
   const [open, setOpen] = useRowState(`steps:${tools[0].id}`, false);
@@ -211,13 +256,14 @@ export function ToolGroup({ tools }: { tools: ToolItem[] }) {
             {!running &&
               edits > 0 &&
               ` · ${edits} edit${edits === 1 ? "" : "s"}`}
+            {!running && (failed > 0 || stopped > 0) && ` · ${ok} ok`}
           </span>
           {running && <Elapsed tool={latest} />}
           {failed > 0 && (
             <span className="text-destructive">{failed} failed</span>
           )}
-          {stopped > 0 && failed === 0 && (
-            <span className="text-muted-foreground/70">stopped</span>
+          {stopped > 0 && (
+            <span className="text-muted-foreground/70">{stopped} not run</span>
           )}
           {!running && moved > 0 && (
             <span className="text-muted-foreground/70">
@@ -227,6 +273,14 @@ export function ToolGroup({ tools }: { tools: ToolItem[] }) {
         </button>
         {running && <BackgroundButton tool={latest} />}
       </div>
+      {!open && !running && (
+        <StepOutcomes tools={tools} onOpen={() => setOpen(true)} />
+      )}
+      {!open && streaming(latest) && (
+        <div className="pb-1">
+          <ToolDetail tool={latest} />
+        </div>
+      )}
       {open && (
         <div className="pb-1">
           {tools.map((t) => (