@saadnvd1/agent-os 0.3.738 → 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

@@ -33,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";
@@ -319,6 +320,7 @@ export function ChatPanel({
     requestFiles,
     search,
     compacting,
+    modelWait,
     loadedFor,
   } = useChat(sessionId, (text) => setPrefill({ text, at: Date.now() }));
   const startFresh = useFreshStart();
@@ -796,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/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";
@@ -111,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)
@@ -123,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" />
@@ -148,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}`,
@@ -186,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>
   );
 }
@@ -244,6 +276,11 @@ export function ToolGroup({ tools }: { tools: ToolItem[] }) {
       {!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) => (

package/data/chat/useChat.ts

@@ -16,6 +16,7 @@ import type {
   ChatServerMessage,
   ChatState,
   Compacting,
+  ModelWait,
   FileSuggestion,
   QueuedMessage,
   ToolBody,
@@ -164,6 +165,7 @@ export function useChat(
   }, []);
   const [state, setState] = useState<ChatState>("idle");
   const [compacting, setCompacting] = useState<Compacting | null>(null);
+  const [modelWait, setModelWait] = useState<ModelWait | null>(null);
   const [connected, setConnected] = useState(false);
   // The chat whose snapshot the items are, once one has landed.
   const [loadedFor, setLoadedFor] = useState<string | null>(null);
@@ -271,6 +273,7 @@ export function useChat(
           setLoadingOlder(false);
           setState(m.state);
           setCompacting(m.compacting ?? null);
+          setModelWait(m.modelWait ?? null);
           setQueue(m.queue ?? []);
           setSuggestion(m.suggestion ?? null);
           setLoadedFor(sessionId);
@@ -295,9 +298,14 @@ export function useChat(
           searchRequests.current.delete(m.reqId);
         } else if (m.type === "compacting") {
           setCompacting(m.compacting);
+        } else if (m.type === "model_wait") {
+          setModelWait(m.wait);
         } else if (m.type === "state") {
           setState(m.state);
-          if (m.state === "idle" || m.state === "error") setCompacting(null);
+          if (m.state === "idle" || m.state === "error") {
+            setCompacting(null);
+            setModelWait(null);
+          }
         } else if (m.type === "capabilities") {
           setRefreshingCommands(false);
           setCommands(m.commands);
@@ -596,6 +604,7 @@ export function useChat(
     pinToolBody,
     state,
     compacting,
+    modelWait,
     connected,
     commands,
     refreshCommands,

package/lib/chat/drivers/claude-mapper.ts

@@ -233,6 +233,16 @@ export class ClaudeMapper {
       case "task_progress":
       case "task_notification":
         return this.task(m);
+      case "api_retry": {
+        const r = m as { attempt?: number; error_status?: number | null };
+        return [
+          {
+            type: "model_retry",
+            attempt: Number(r.attempt) || 1,
+            message: r.error_status ? `HTTP ${r.error_status}` : undefined,
+          },
+        ];
+      }
       case "status": {
         // "compacting" while the context is summarised, null once it's done.
         const status = (m as { status?: string | null }).status;

package/lib/chat/drivers/claude.ts

@@ -454,5 +454,13 @@ export function usageEvents(
       ? "review"
       : "sub";
   const call = callFromAssistant(m.message, kind, agentType, at);
-  return call ? [{ type: "call_usage", call }] : [];
+  if (!call) return [];
+  const prompt =
+    call.input + call.cacheRead + call.cacheWrite5m + call.cacheWrite1h;
+  return [
+    { type: "call_usage", call },
+    ...(kind === "main" && prompt > 0
+      ? [{ type: "prompt_tokens" as const, tokens: prompt }]
+      : []),
+  ];
 }