@saadnvd1/agent-os 0.3.749 → 0.3.750

package/components/Chat/StepOutcomes.tsx

@@ -1,21 +1,10 @@
 "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";
+import { failedSteps } from "@/lib/chat/step-summary";
 
-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.
+// Under a collapsed group that had failures: which steps failed. Nothing when
+// every step passed.
 export function StepOutcomes({
   tools,
   onOpen,
@@ -23,44 +12,19 @@ export function StepOutcomes({
   tools: ToolItem[];
   onOpen: () => void;
 }) {
-  const shown = tools.slice(0, MAX_CHIPS);
+  const { names, more } = failedSteps(tools);
+  if (names.length === 0) return null;
   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"
+      className="text-destructive flex min-h-8 w-full min-w-0 items-center gap-x-3 px-2 pb-1 text-left text-xs 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>
-      )}
+      <span className="min-w-0 truncate">
+        {names.map((n) => `✕ ${n}`).join("  ")}
+        {more > 0 && `  +${more} more`}
+      </span>
     </button>
   );
 }

package/components/Chat/Tools.test.ts

@@ -2,7 +2,6 @@ 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 => ({
@@ -20,7 +19,7 @@ const render = (tools: ToolItem[]) =>
   renderToStaticMarkup(createElement(ToolGroup, { tools }));
 
 describe("collapsed ToolGroup", () => {
-  it("keeps each step's outcome in view", () => {
+  it("names the failed steps and counts the rest", () => {
     const html = render([
       tool("a", { output: "HTTP/2 200 \n" }),
       tool("b", { status: "error", output: "Exit code 7" }),
@@ -31,22 +30,20 @@ describe("collapsed ToolGroup", () => {
     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");
+    expect(html).toContain("✕ check b");
+    expect(html).toContain("✕ check c");
+    expect(html).not.toContain("check a");
   });
 
-  it("shows no strip while a step runs", () => {
-    expect(render([tool("a", { status: "running" })])).not.toContain(
-      "Show steps"
-    );
+  it("has no outcome row when every step passed", () => {
+    const html = render([tool("a"), tool("b")]);
+    expect(html).toContain("2 steps · ran 2 commands");
+    expect(html).not.toContain("Show steps");
   });
 
-  it("caps the strip", () => {
-    const tools = Array.from({ length: MAX_CHIPS + 3 }, (_, i) =>
-      tool(`x${i}`)
+  it("shows no outcome row while a step runs", () => {
+    expect(render([tool("a", { status: "running" })])).not.toContain(
+      "Show steps"
     );
-    expect(render(tools)).toContain("+3 more");
   });
 });

package/components/Chat/Tools.tsx

@@ -9,6 +9,7 @@ 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 { stepSummary } from "@/lib/chat/step-summary";
 import { StepOutcomes } from "./StepOutcomes";
 import { Highlighted } from "./Code";
 import { BackgroundButton, BackgroundState, useBackground } from "./background";
@@ -227,13 +228,12 @@ function ToolRow({ tool }: { tool: ToolItem }) {
 export function ToolGroup({ tools }: { tools: ToolItem[] }) {
   const running = tools.some((t) => t.status === "running");
   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);
   const latest =
     tools.findLast((t) => t.status === "running") ?? tools[tools.length - 1];
   return (
-    <div className="bg-foreground/[0.025] rounded-xl px-2 py-1">
+    <div className="bg-foreground/[0.025] rounded-xl px-2 py-0.5">
       <div className="flex items-center gap-1">
         <button
           type="button"
@@ -250,12 +250,7 @@ export function ToolGroup({ tools }: { tools: ToolItem[] }) {
             <Loader2 className="text-primary h-3.5 w-3.5 shrink-0 animate-spin" />
           ) : null}
           <span className="min-w-0 flex-1 truncate">
-            {running
-              ? latest.title
-              : `${tools.length} step${tools.length === 1 ? "" : "s"}`}
-            {!running &&
-              edits > 0 &&
-              ` · ${edits} edit${edits === 1 ? "" : "s"}`}
+            {running ? latest.title : stepSummary(tools)}
             {!running && (failed > 0 || stopped > 0) && ` · ${ok} ok`}
           </span>
           {running && <Elapsed tool={latest} />}

package/lib/chat/step-summary.ts

@@ -0,0 +1,54 @@
+import type { ToolItem } from "./group";
+
+export const MAX_FILES = 3;
+export const MAX_FAILED = 3;
+
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+
+const baseName = (p: string) => p.split("/").filter(Boolean).pop() ?? p;
+
+const editedPath = (t: ToolItem): string | undefined => {
+  if (t.diff?.path) return t.diff.path;
+  const i = (t.input ?? {}) as Record<string, unknown>;
+  const p = i.file_path ?? i.notebook_path;
+  return typeof p === "string" ? p : undefined;
+};
+
+// What a finished run of steps did, after its count: "5 steps · edited a.ts,
+// lib/b.ts · ran 2 commands". Files edited more than once are named once.
+export function stepSummary(tools: ToolItem[]): string {
+  const parts = [plural(tools.length, "step")];
+  const edited = tools.filter((t) => t.diff || t.hasDiff);
+  if (edited.length > 0) {
+    const files = [
+      ...new Set(
+        edited
+          .map(editedPath)
+          .filter((p): p is string => !!p)
+          .map(baseName)
+      ),
+    ];
+    if (files.length === 0) parts.push(plural(edited.length, "edit"));
+    else {
+      const more = files.length - MAX_FILES;
+      parts.push(
+        `edited ${files.slice(0, MAX_FILES).join(", ")}${more > 0 ? ` +${more}` : ""}`
+      );
+    }
+  }
+  const commands = tools.filter((t) => t.name === "Bash").length;
+  if (commands > 0) parts.push(`ran ${plural(commands, "command")}`);
+  return parts.join(" · ");
+}
+
+// The failed steps' names, for the line under a group that had failures.
+export function failedSteps(tools: ToolItem[]): {
+  names: string[];
+  more: number;
+} {
+  const failed = tools.filter((t) => t.status === "error");
+  return {
+    names: failed.slice(0, MAX_FAILED).map((t) => t.title),
+    more: Math.max(0, failed.length - MAX_FAILED),
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.749",
+  "version": "0.3.750",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"