@stigmer/react 3.11.0 → 3.12.0

package/src/execution/MessageAttachments.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { cn } from "@stigmer/theme";
 import { AttachmentImageLightbox } from "../attachment/AttachmentImageLightbox.js";
 import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { useArtifactDownload } from "./useArtifactDownload.js";
 import { useArtifactDownloadUrl } from "./useArtifactDownloadUrl.js";
 
@@ -172,38 +174,45 @@ function ImagePreviewChip({
   }
 
   return (
-    <span role="listitem" aria-label={name} title={name} className="stg:inline-flex">
-      {/* The whole tile is the preview target. UNSTYLED_BUTTON adds the
-          pointer cursor — the image tile carries no other clickability
-          cue. */}
-      <button
-        type="button"
-        onClick={onPreview}
-        aria-label={`Preview ${name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-        )}
+    <Tooltip>
+      <TooltipTrigger
+        render={<span role="listitem" aria-label={name} className="stg:inline-flex" />}
       >
-        {url ? (
-          <img
-            src={url}
-            alt=""
-            aria-hidden="true"
-            loading="lazy"
-            className="stg:h-full stg:w-full stg:object-cover"
-          />
-        ) : (
-          // Pulse placeholder while the presigned URL is minted — pulse
-          // means work is genuinely in flight (contrast ImageGlyphTile).
-          // Same footprint as the image, so no layout shift.
-          <span
-            className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
-            aria-hidden="true"
-          />
-        )}
-      </button>
-    </span>
+        {/* The whole tile is the preview target. UNSTYLED_BUTTON adds the
+            pointer cursor — the image tile carries no other clickability
+            cue. */}
+        <button
+          type="button"
+          onClick={onPreview}
+          aria-label={`Preview ${name}`}
+          className={cn(
+            UNSTYLED_BUTTON,
+            "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          )}
+        >
+          {url ? (
+            <img
+              src={url}
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+              className="stg:h-full stg:w-full stg:object-cover"
+            />
+          ) : (
+            // Pulse placeholder while the presigned URL is minted — pulse
+            // means work is genuinely in flight (contrast ImageGlyphTile).
+            // Same footprint as the image, so no layout shift.
+            <span
+              className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
+              aria-hidden="true"
+            />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -215,14 +224,22 @@ function ImagePreviewChip({
  */
 function ImageGlyphTile({ name }: { readonly name: string }) {
   return (
-    <span
-      role="listitem"
-      aria-label={name}
-      title={name}
-      className="stg:inline-flex stg:h-14 stg:w-14 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted-subtle"
-    >
-      <ImageGlyph />
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={name}
+            className="stg:inline-flex stg:h-14 stg:w-14 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted-subtle"
+          />
+        }
+      >
+        <ImageGlyph />
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -251,7 +268,7 @@ function DocumentChip({
   const content = (
     <>
       <FileGlyph />
-      <span className="stg:min-w-0 stg:truncate">{name}</span>
+      <TruncatedText text={name} className="stg:min-w-0" />
     </>
   );
 
@@ -259,7 +276,6 @@ function DocumentChip({
     <span
       role="listitem"
       aria-label={name}
-      title={name}
       className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
     >
       {downloadable ? (

package/src/execution/MessageEntry.tsx

@@ -19,6 +19,7 @@ import {
 } from "./MessageAttachments.js";
 import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link MessageEntry}. */
 export interface MessageEntryProps {
@@ -192,21 +193,27 @@ function HumanMessage({
       )}
       <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
       {onEdit && (
-        <button
-          type="button"
-          onClick={onEdit}
-          aria-label="Edit message"
-          title="Edit"
-          className={cn(
-            "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
-            "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
-            "stg:hover:text-foreground stg:hover:bg-accent-hover",
-            "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-          )}
-        >
-          <EditIcon />
-        </button>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={onEdit}
+                aria-label="Edit message"
+                className={cn(
+                  "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+                  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+                  "stg:hover:text-foreground stg:hover:bg-accent-hover",
+                  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                )}
+              />
+            }
+          >
+            <EditIcon />
+          </TooltipTrigger>
+          <TooltipContent side="top">Edit</TooltipContent>
+        </Tooltip>
       )}
     </div>
   );

package/src/execution/PlanArtifactCard.tsx

@@ -3,6 +3,7 @@
 import { memo, useState, type ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 import { useArtifactCopy } from "./useArtifactCopy.js";
@@ -184,9 +185,11 @@ const FOCUS_RING =
   "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm";
 
 /**
- * An icon-only secondary action. The accessible name doubles as the hover
- * tooltip (native `title` — the codebase's tooltip pattern), and the padded
- * hit area keeps the target comfortable despite the compact glyph.
+ * An icon-only secondary action. The accessible name doubles as the house
+ * tooltip's content; the trigger is a wrapper span so the hint stays
+ * hoverable while the action is disabled (`pointer-events-none` on the
+ * button would otherwise take the tooltip down with it). The padded hit
+ * area keeps the target comfortable despite the compact glyph.
  */
 function IconAction({
   label,
@@ -200,21 +203,25 @@ function IconAction({
   readonly disabled?: boolean;
 }) {
   return (
-    <button
-      type="button"
-      aria-label={label}
-      title={label}
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        "stg:inline-flex stg:items-center stg:rounded-md stg:p-1.5 stg:text-muted-foreground",
-        "stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
-        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
-        FOCUS_RING,
-      )}
-    >
-      {icon}
-    </button>
+    <Tooltip>
+      <TooltipTrigger render={<span className="stg:inline-flex" />}>
+        <button
+          type="button"
+          aria-label={label}
+          onClick={onClick}
+          disabled={disabled}
+          className={cn(
+            "stg:inline-flex stg:items-center stg:rounded-md stg:p-1.5 stg:text-muted-foreground",
+            "stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            FOCUS_RING,
+          )}
+        >
+          {icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/execution/ToolCallDetail.tsx

@@ -312,10 +312,7 @@ function ProvenanceNote({ toolCall }: { toolCall: ToolCall }) {
   if (!provenance) return null;
 
   return (
-    <p
-      className="stg:text-[11px] stg:italic stg:text-muted-foreground"
-      title={provenance}
-    >
+    <p className="stg:text-[11px] stg:italic stg:text-muted-foreground">
       {provenance}
     </p>
   );

package/src/execution/ToolCallItem.tsx

@@ -31,6 +31,7 @@ import type { FileReviewRowState } from "./file-review-status.js";
 import { FilePathLink } from "./FilePathLink.js";
 import { isFileCategory, type ToolCategory } from "./tool-categories.js";
 import { useToolPresentation } from "./tool-presenter.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link ToolCallItem}. */
 export interface ToolCallItemProps {
@@ -307,13 +308,23 @@ export const ToolCallItem = memo(function ToolCallItem({
           />
         ) : (
           displaySubtitle && (
-            <span
-              ref={measuresSubtitle ? subtitleRef : undefined}
-              title={displaySubtitle}
-              className="stg:min-w-0 stg:truncate stg:text-muted-foreground stg:font-mono"
-            >
-              {displaySubtitle}
-            </span>
+            // Not TruncatedText: the span must carry the external measurement
+            // ref (useIsTextTruncated) that the expanded detail reads.
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span
+                    ref={measuresSubtitle ? subtitleRef : undefined}
+                    className="stg:min-w-0 stg:truncate stg:text-muted-foreground stg:font-mono"
+                  />
+                }
+              >
+                {displaySubtitle}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {displaySubtitle}
+              </TooltipContent>
+            </Tooltip>
           )
         )}
         {!isSubAgent && category !== "shell" && resultSummary && (

package/src/execution/WriteBackCard.tsx

@@ -5,6 +5,8 @@ import type { WorkspaceWriteBack } from "@stigmer/protos/ai/stigmer/agentic/agen
 import { WorkspaceWriteBackPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
 import { cn } from "@stigmer/theme";
 import { DiffSummary } from "../version-history/DiffSummary.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import {
   parseDiffStatSummary,
   trailingDiffStatLine,
@@ -73,12 +75,10 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
     >
       {/* Header: workspace name + quiet phase caption */}
       <div className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1">
-        <span
-          className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-medium stg:text-foreground"
-          title={displayName}
-        >
-          {displayName}
-        </span>
+        <TruncatedText
+          text={displayName}
+          className="stg:min-w-0 stg:flex-1 stg:text-xs stg:font-medium stg:text-foreground"
+        />
         <PhaseCaption
           phase={writeBack.phase}
           pullRequestNumber={writeBack.pullRequestNumber}
@@ -236,16 +236,17 @@ function BranchRow({
 
   return (
     <div className="stg:group stg:flex stg:items-stretch">
-      <div
-        className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs"
-        title={baseBranch ? `${branchName} \u2190 ${baseBranch}` : branchName}
-      >
+      {/* The old row title restated "branch ← base", which is already visible
+          text; only the branch name can clip, so it alone carries the
+          overflow-gated tooltip. */}
+      <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs">
         <span className="stg:shrink-0 stg:text-muted-foreground">
           <GitBranchIcon />
         </span>
-        <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-foreground">
-          {branchName}
-        </span>
+        <TruncatedText
+          text={branchName}
+          className="stg:min-w-0 stg:font-mono stg:text-foreground"
+        />
         {baseBranch && (
           <span className="stg:shrink-0 stg:font-mono stg:text-muted-foreground-faint">
             {"\u2190 "}
@@ -253,22 +254,30 @@ function BranchRow({
           </span>
         )}
       </div>
-      <button
-        type="button"
-        onClick={handleCopy}
-        aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
-        title={copied ? "Copied" : "Copy branch name"}
-        className={cn(
-          "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:transition-opacity",
-          copied
-            ? "stg:opacity-100"
-            : "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-          "stg:hover:text-foreground",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-        )}
-      >
-        {copied ? <CheckIcon /> : <CopyIcon />}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={handleCopy}
+              aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
+              className={cn(
+                "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:transition-opacity",
+                copied
+                  ? "stg:opacity-100"
+                  : "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+                "stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+              )}
+            />
+          }
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {copied ? "Copied" : "Copy branch name"}
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }

package/src/execution/__tests__/ArtifactRow.test.tsx

@@ -132,8 +132,12 @@ describe("ArtifactRow — download", () => {
     });
   });
 
-  it("labels the Download control 'Download ZIP' for a directory", () => {
+  it("renders the directory Download control with no native title", () => {
     renderRow({ artifact: dirArtifact("return-policy") });
-    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+    // The "Download ZIP" copy moved to the house tooltip (native titles
+    // are banned — stigmer-cloud#268); its reveal is pinned in the
+    // real-browser suite (artifact-row-tooltips.layout.test.tsx).
+    expect(screen.getByLabelText("Download return-policy")).toBeTruthy();
+    expect(document.querySelector("[title]")).toBeNull();
   });
 });

package/src/execution/__tests__/ArtifactRowView.test.tsx

@@ -68,11 +68,14 @@ describe("ArtifactRowView — the shared row primitive", () => {
     expect((download as HTMLButtonElement).disabled).toBe(true);
   });
 
-  it("renders directory affordances (slash suffix, ZIP download title)", () => {
+  it("renders directory affordances with no native title anywhere", () => {
     renderView({
       item: { ...fileItem, name: "bundle", tooltip: "bundle", isDirectory: true },
     });
     expect(screen.getByText("bundle/")).toBeTruthy();
-    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+    // The "Download ZIP" copy moved to the house tooltip (native titles
+    // are banned — stigmer-cloud#268); its reveal is pinned in the
+    // real-browser suite (artifact-row-tooltips.layout.test.tsx).
+    expect(document.querySelector("[title]")).toBeNull();
   });
 });

package/src/execution/__tests__/FilePathLink.test.tsx

@@ -46,8 +46,8 @@ describe("FilePathLink filename-first display", () => {
   });
 });
 
-describe("FilePathLink full path on hover", () => {
-  it("puts the absolute local path in the title (not the action verb)", () => {
+describe("FilePathLink full path resolution", () => {
+  it("resolves the absolute local path into the accessible name (hover ride the house tooltip)", () => {
     const entries = [localEntry("my-app", "/Users/dev/my-app")];
     render(
       <FilePathContext.Provider value={{ workspaceEntries: entries }}>
@@ -55,14 +55,18 @@ describe("FilePathLink full path on hover", () => {
       </FilePathContext.Provider>,
     );
     const el = screen.getByRole("button");
-    expect(el.getAttribute("title")).toBe("/Users/dev/my-app/src/main.go");
-    // The action verb moves into the accessible name, with the path.
+    // The resolved path is observable in the accessible name; the visual
+    // hover reveal is the house tooltip (native titles are banned,
+    // stigmer-cloud#268).
     expect(el.getAttribute("aria-label")).toBe("Copy path: /Users/dev/my-app/src/main.go");
+    expect(el.getAttribute("title")).toBeNull();
   });
 
-  it("falls back to the logical path in the title when unresolved", () => {
+  it("falls back to the logical path when unresolved", () => {
     render(<FilePathLink path="src/main.go" />);
-    expect(screen.getByRole("button").getAttribute("title")).toBe("src/main.go");
+    const el = screen.getByRole("button");
+    expect(el.getAttribute("aria-label")).toBe("Copy path: src/main.go");
+    expect(el.getAttribute("title")).toBeNull();
   });
 });
 

package/src/execution/__tests__/FileReviewCard.test.tsx

@@ -883,7 +883,8 @@ describe("FileReviewCard", () => {
       expect(screen.getByText("a.ts")).toBeTruthy();
       expect(screen.getByText("b.ts")).toBeTruthy();
       expect(screen.getByRole("button", { name: /Copy path: src\/a\.ts/ })).toBeTruthy();
-      expect(screen.getByTitle("src/a.ts")).toBeTruthy();
+      // Full path on hover rides the house tooltip; no native title remains.
+      expect(document.querySelector("[title]")).toBeNull();
     });
 
     it("keeps a single complete file collapsed behind the 'Files' expander", () => {

package/src/execution/__tests__/MessageEntry-attachments.test.tsx

@@ -135,9 +135,10 @@ describe("MessageEntry attachment rendering", () => {
 
     // The tile is preview-only: no "screenshot.png" text node anywhere…
     expect(screen.queryByText("screenshot.png")).toBeNull();
-    // …but the name stays reachable — tooltip on the listitem, aria on both.
+    // …but the name stays reachable — house tooltip on the tile (native
+    // titles are banned, stigmer-cloud#268), aria on both.
     const tile = screen.getByRole("listitem", { name: "screenshot.png" });
-    expect(tile.getAttribute("title")).toBe("screenshot.png");
+    expect(tile.getAttribute("title")).toBeNull();
     expect(
       screen.getByRole("button", { name: "Preview screenshot.png" }),
     ).toBeTruthy();

package/src/execution/__tests__/MessageThread.test.tsx

@@ -365,7 +365,12 @@ describe("MessageThread", () => {
     // shows the folded set's changed file.
     expect(screen.getByText("File changes")).toBeTruthy();
     fireEvent.click(screen.getByRole("button", { name: "Show" }));
-    expect(screen.getByTitle("src/a.ts")).toBeTruthy();
+    // The changed file renders as a FilePathLink whose accessible name
+    // carries the full path (the hover reveal is the house tooltip now —
+    // native titles are banned, stigmer-cloud#268).
+    expect(
+      screen.getByRole("button", { name: /Copy path: src\/a\.ts/ }),
+    ).toBeTruthy();
     expect(
       document.querySelector('[data-cursor-target="file-review-approve"]'),
     ).toBeNull();

package/src/execution/__tests__/artifact-row-tooltips.layout.test.tsx

@@ -0,0 +1,115 @@
+// The interactive-trigger tooltip contract from the native-title sweep
+// (stigmer-cloud#268), pinned in a real Chromium on ArtifactRowView. When
+// an enabled control is its own tooltip trigger, keyboard FOCUS opens the
+// hint too — the concrete accessibility gain over the native `title` this
+// replaced, which no keyboard user ever saw. Focus-open is real focus
+// machinery (Base UI opens on focus-visible), so only a real browser can
+// pin it honestly.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import { ArtifactRowView } from "../ArtifactRowView.js";
+
+const ITEM = {
+  name: "report.pdf",
+  tooltip: "/workspace/output/report.pdf",
+  subtitlePath: null,
+  sizeBytes: 2048,
+  isDirectory: false,
+};
+
+function renderRow() {
+  const pane = document.createElement("div");
+  pane.className = "stgm";
+  pane.style.width = "320px";
+  document.body.appendChild(pane);
+  render(
+    <ul>
+      <ArtifactRowView
+        item={ITEM}
+        onOpen={() => {}}
+        onDownload={() => {}}
+        isDownloading={false}
+      />
+    </ul>,
+    { container: pane },
+  );
+  return pane;
+}
+
+function portaledText(pane: HTMLElement): string {
+  return Array.from(document.body.children)
+    .filter((node) => node !== pane)
+    .map((node) => node.textContent ?? "")
+    .join(" ");
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("ArtifactRowView tooltips", () => {
+  it("opens the full-path hint on keyboard focus — no pointer required", async () => {
+    const pane = renderRow();
+    expect(pane.querySelector("[title]")).toBeNull();
+
+    // Tab reaches the open button (first focusable in the row); the
+    // tooltip must follow focus per the interactive-trigger pattern.
+    await userEvent.tab();
+    const openButton = Array.from(pane.querySelectorAll("button")).find((el) =>
+      el.textContent?.includes("report.pdf"),
+    );
+    expect(document.activeElement).toBe(openButton);
+
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("/workspace/output/report.pdf"),
+      { timeout: 3000, interval: 50 },
+    );
+  });
+
+  it("keeps the download hint hoverable through the wrapper span", async () => {
+    const pane = renderRow();
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download report.pdf",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+
+  it("says 'Download ZIP' for a directory", async () => {
+    const pane = document.createElement("div");
+    pane.className = "stgm";
+    pane.style.width = "320px";
+    document.body.appendChild(pane);
+    render(
+      <ul>
+        <ArtifactRowView
+          item={{ ...ITEM, name: "bundle", tooltip: "bundle", isDirectory: true }}
+          onOpen={() => {}}
+          onDownload={() => {}}
+          isDownloading={false}
+        />
+      </ul>,
+      { container: pane },
+    );
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download bundle",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download ZIP"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+});

package/src/execution/artifact-row-item.ts

@@ -19,7 +19,7 @@ import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/ap
 export interface ArtifactRowItem {
   /** Display label (file or directory name). */
   readonly name: string;
-  /** Hover title — the fullest location/name known for the artifact. */
+  /** House-tooltip content — the fullest location/name known for the artifact. */
   readonly tooltip: string;
   /**
    * Disambiguation subtitle rendered after the name when another row shares