feat(web): group live tool activity

Author: maria-rcks

apps/web/src/components/chat/ChangedFilesTree.test.tsx

@@ -23,24 +23,22 @@ describe("ChangedFilesCard", () => {
     expect(markup).toContain('data-changed-files-state="expanded"');
     expect(markup).toContain('aria-expanded="true"');
     expect(markup).toContain("whitespace-nowrap");
-    expect(markup).toContain('class="group flex min-w-0 flex-1 items-center rounded-xl');
-    expect(markup).not.toMatch(/class="group flex min-w-0 flex-1 items-center[^"]*overflow-hidden/);
-    expect(markup).toContain('class="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden"');
+    expect(markup).toContain('class="flex min-w-0 items-center gap-1.5 rounded-md px-1 py-1');
     expect(markup).toContain('class="flex shrink-0 items-center gap-1 whitespace-nowrap');
-    expect(markup).toContain('class="ml-1 hidden min-w-0 flex-1 truncate');
-    expect(markup).toContain("@[24rem]/changed-files:inline");
-    expect(markup).not.toContain("sm:inline");
-    expect(markup).toContain('class="flex shrink-0 items-center gap-1.5 pr-1"');
+    expect(markup).toContain('class="hidden @[24rem]/changed-files:inline">Open diff</span>');
+    expect(markup).toContain('class="flex shrink-0 items-center gap-1.5"');
     expect(markup).toContain("!size-[22px]");
     expect(markup).toContain("size-3");
     expect(markup).toContain('aria-label="Collapse all folders"');
     expect(markup).toContain('aria-label="Open diff"');
     expect(markup).toContain('role="group" aria-label="2 additions, 1 deletions"');
     expect(markup).toContain("1 changed file");
     expect(markup).not.toContain("1 changed files");
+    expect(markup).not.toContain("Hide files");
+    expect(markup).not.toContain("ml-auto");
   });
 
-  it("renders a scope and representative-file preview for a large latest change", () => {
+  it("renders a clean representative-file preview for a large latest change", () => {
     const markup = renderToStaticMarkup(
       <ChangedFilesCard
         turnId={TurnId.make("turn-1")}
@@ -67,14 +65,16 @@ describe("ChangedFilesCard", () => {
 
     expect(markup).toContain('data-changed-files-state="preview"');
     expect(markup).toContain('aria-expanded="false"');
-    expect(markup).toContain("apps");
-    expect(markup).toContain("2 files");
-    expect(markup).toContain("packages");
-    expect(markup).toContain("root");
+    expect(markup).toContain("apps/web/src/");
+    expect(markup).toContain("packages/shared/src/");
     expect(markup).toContain("App.tsx");
     expect(markup).toContain("git.ts");
     expect(markup).toContain("README.md");
-    expect(markup).toContain("Show all 4 files");
+    expect(markup).not.toContain("basis-0");
+    expect(markup).not.toContain("+1 more");
+    expect(markup).not.toContain("Show files");
+    expect(markup).toContain('aria-label="120 additions, 20 deletions"');
+    expect(markup).toContain("focus-visible:ring-inset");
     expect(markup).not.toContain("App.test.tsx");
   });
 

apps/web/src/components/chat/ChangedFilesTree.tsx

@@ -19,11 +19,7 @@ import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { PierreEntryIcon } from "./PierreEntryIcon";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import {
-  changedFileName,
-  selectChangedFilePreview,
-  summarizeChangedFileScopes,
-} from "./changedFilesPresentation";
+import { changedFileName, selectChangedFilePreview } from "./changedFilesPresentation";
 
 const EMPTY_DIRECTORY_OVERRIDES: Record<string, boolean> = {};
 
@@ -50,21 +46,20 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
     onOpenTurnDiff,
   } = props;
   const summaryStat = useMemo(() => summarizeTurnDiffStats(files), [files]);
-  const scopeSummary = useMemo(() => summarizeChangedFileScopes(files), [files]);
   const previewFiles = useMemo(() => selectChangedFilePreview(files), [files]);
   const compactPreviewVisible = showCompactPreview && !expanded;
 
   return (
     <div
-      className="@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32"
+      className="@container/changed-files mt-4 rounded-xl border border-border/70 bg-secondary p-1.5 dark:border-transparent dark:bg-input/32"
       data-changed-files-state={
         expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"
       }
     >
       <div
         data-changed-files-header=""
         className={cn(
-          "flex items-center justify-between gap-2 rounded-xl",
+          "flex items-center justify-between gap-2 rounded-lg px-1",
           expanded &&
             "sticky top-2 z-10 mb-2 bg-secondary dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]",
         )}
@@ -73,36 +68,31 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
           type="button"
           aria-expanded={expanded}
           data-scroll-anchor-ignore
-          className="group flex min-w-0 flex-1 items-center rounded-xl px-2 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex min-w-0 items-center gap-1.5 rounded-md px-1 py-1 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           onClick={() => onExpandedChange(!expanded)}
         >
-          <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
-            <ChevronRightIcon
-              aria-hidden="true"
-              className={cn(
-                "size-3.5 shrink-0 text-muted-foreground transition-transform",
-                expanded && "rotate-90",
-              )}
-            />
-            <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
-              <span>
-                {files.length} changed file{files.length === 1 ? "" : "s"}
-              </span>
-              {hasNonZeroStat(summaryStat) && (
-                <DiffStatLabel
-                  additions={summaryStat.additions}
-                  className="text-xs leading-4"
-                  deletions={summaryStat.deletions}
-                  layout="inline"
-                />
-              )}
-            </span>
-            <span className="ml-1 hidden min-w-0 flex-1 truncate text-[11px] text-muted-foreground group-hover:text-foreground/80 @[24rem]/changed-files:inline">
-              {expanded ? "Hide files" : "Show files"}
+          <ChevronRightIcon
+            aria-hidden="true"
+            className={cn(
+              "size-3.5 shrink-0 text-muted-foreground transition-transform",
+              expanded && "rotate-90",
+            )}
+          />
+          <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
+            <span>
+              {files.length} changed file{files.length === 1 ? "" : "s"}
             </span>
+            {hasNonZeroStat(summaryStat) && (
+              <DiffStatLabel
+                additions={summaryStat.additions}
+                className="text-xs leading-4"
+                deletions={summaryStat.deletions}
+                layout="inline"
+              />
+            )}
           </span>
         </button>
-        <div className="flex shrink-0 items-center gap-1.5 pr-1">
+        <div className="flex shrink-0 items-center gap-1.5">
           {expanded ? (
             <Tooltip>
               <TooltipTrigger
@@ -160,43 +150,35 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
           onOpenTurnDiff={onOpenTurnDiff}
         />
       ) : compactPreviewVisible ? (
-        <div className="px-2 pb-1.5 pt-1">
-          <p className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] text-muted-foreground">
-            {scopeSummary.map((scope, index) => (
-              <span key={scope.label} className="inline-flex items-center gap-1">
-                {index > 0 ? <span aria-hidden="true">·</span> : null}
-                <span className="font-mono text-foreground/75">{scope.label}</span>
-                <span>
-                  {scope.fileCount} file{scope.fileCount === 1 ? "" : "s"}
-                </span>
-              </span>
-            ))}
-          </p>
-          <div className="mt-2 flex flex-wrap items-center gap-1.5">
+        <div className="px-1.5 pb-1 pt-0.5">
+          <div className="flex min-w-0 items-center gap-x-3 overflow-hidden">
             {previewFiles.map((file) => (
               <button
                 key={file.path}
                 type="button"
                 title={file.path}
-                className="inline-flex max-w-48 items-center gap-1 rounded-md border border-border/70 bg-background/45 px-1.5 py-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="group flex min-h-6 min-w-0 max-w-72 shrink items-center gap-1.5 rounded-md px-1 text-left transition-colors hover:bg-accent/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
                 onClick={() => onOpenTurnDiff(turnId, file.path)}
               >
                 <PierreEntryIcon
                   pathValue={file.path}
                   kind="file"
                   theme={resolvedTheme}
-                  className="size-3 shrink-0 text-muted-foreground/70"
+                  className="size-3.5 shrink-0 text-muted-foreground/70"
                 />
-                <span className="truncate">{changedFileName(file.path)}</span>
+                <span className="min-w-0 truncate font-mono text-xs text-foreground/75 group-hover:text-foreground">
+                  {changedFileName(file.path)}
+                </span>
+                {hasNonZeroStat(file) ? (
+                  <DiffStatLabel
+                    additions={file.additions}
+                    deletions={file.deletions}
+                    layout="inline"
+                    className="shrink-0 text-[10px]"
+                  />
+                ) : null}
               </button>
             ))}
-            <button
-              type="button"
-              className="rounded-md px-1.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={() => onExpandedChange(true)}
-            >
-              Show all {files.length} files
-            </button>
           </div>
         </div>
       ) : null}
@@ -272,11 +254,11 @@ export const ChangedFilesTree = memo(function ChangedFilesTree(props: {
             ) : (
               <FolderClosedIcon className="size-3.5 shrink-0 text-muted-foreground/75" />
             )}
-            <span className="truncate font-mono text-[11px] text-muted-foreground/90 group-hover:text-foreground/90">
+            <span className="min-w-0 truncate font-mono text-[11px] text-muted-foreground/90 group-hover:text-foreground/90">
               {node.name}
             </span>
             {hasNonZeroStat(node.stat) && (
-              <span className="ml-auto shrink-0 font-mono text-[10px] tabular-nums">
+              <span className="ml-1 shrink-0 font-mono text-[10px] tabular-nums">
                 <DiffStatLabel additions={node.stat.additions} deletions={node.stat.deletions} />
               </span>
             )}
@@ -307,11 +289,11 @@ export const ChangedFilesTree = memo(function ChangedFilesTree(props: {
           theme={resolvedTheme}
           className="size-3.5 text-muted-foreground/70"
         />
-        <span className="truncate font-mono text-[11px] text-muted-foreground/80 group-hover:text-foreground/90">
+        <span className="min-w-0 truncate font-mono text-[11px] text-muted-foreground/80 group-hover:text-foreground/90">
           {node.name}
         </span>
         {node.stat && (
-          <span className="ml-auto shrink-0 font-mono text-[10px] tabular-nums">
+          <span className="ml-1 shrink-0 font-mono text-[10px] tabular-nums">
             <DiffStatLabel additions={node.stat.additions} deletions={node.stat.deletions} />
           </span>
         )}