@stigmer/react 3.11.0 → 3.12.0

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -9,6 +9,7 @@ import {
 } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
 import type { CursorMemberSpend } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
 import { Button } from "../button/index.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { StateBadge } from "./badges.js";
 import { formatPoolPercent, formatSpendMicros } from "./cursor-account-format.js";
 import type { CursorAccountCoverage } from "./cursor-account-coverage.js";
@@ -225,9 +226,9 @@ function CoverageGroup({
  * The member-identity cell shared by key rows and gap rows. The email is
  * the row's identity, so it must be fully readable: it wraps onto more
  * lines when the column is narrow (emails are unbroken strings, so they
- * need explicit word-breaking) with a hover tooltip as backup, unlike
- * the other text cells which truncate. The secondary name line stays
- * truncated — it is display sugar, not identity.
+ * need explicit word-breaking), unlike the other text cells which
+ * truncate. The secondary name line stays truncated — it is display
+ * sugar, not identity.
  */
 function MemberCell({
   email,
@@ -238,7 +239,9 @@ function MemberCell({
 }) {
   return (
     <span role="cell" className="stg:min-w-0">
-      <span className="stg:block stg:break-words stg:font-medium stg:text-foreground" title={email}>
+      {/* No tooltip: break-words shows the full email, so a hover hint
+          would only repeat what is already visible. */}
+      <span className="stg:block stg:break-words stg:font-medium stg:text-foreground">
         {email}
       </span>
       {name && (
@@ -273,16 +276,15 @@ function KeyRow({
     <div role="row" className={cn(ROW_GRID, "stg:border-t stg:border-border-muted stg:text-xs")}>
       <MemberCell email={key.boundEmail} />
       <span role="cell" className="stg:min-w-0">
-        <span
-          className="stg:block stg:truncate stg:text-muted-foreground"
-          title={key.cursorKeyName || undefined}
-        >
-          {key.cursorKeyName || "unnamed key"}
-        </span>
+        <TruncatedText
+          text={key.cursorKeyName || "unnamed key"}
+          className="stg:block stg:text-muted-foreground"
+        />
         {key.label && (
-          <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground" title={key.label}>
-            {key.label}
-          </span>
+          <TruncatedText
+            text={key.label}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         )}
       </span>
       <SpendCells spend={keyView.spend} />

package/src/cursor-accounts/__tests__/CursorAccountsConsole.test.tsx

@@ -237,10 +237,10 @@ describe("CursorAccountsConsole", () => {
     expect(screen.getByText(/On the team — key held/)).toBeTruthy();
     expect(screen.getByText("zane@scenar.ai")).toBeTruthy();
     expect(screen.getByText("stigmer-prod")).toBeTruthy();
-    // The email is the row's identity: full value always hoverable on
-    // both row kinds (the cell wraps rather than truncates).
-    expect(screen.getByTitle("zane@scenar.ai")).toBeTruthy();
-    expect(screen.getByTitle("uncovered@scenar.ai")).toBeTruthy();
+    // The email is the row's identity: the cell wraps rather than
+    // truncates, so the full value is always visible text on both row
+    // kinds — and never a native title (banned, stigmer-cloud#268).
+    expect(document.querySelector("[title]")).toBeNull();
     expect(screen.getByText("$0.17")).toBeTruthy(); // included, 169342 micro-USD
     expect(screen.getByText("Active")).toBeTruthy();
     // Category 2: on the team, no key — server-joined spend on the gap row.

package/src/dashboard/DashboardKPICards.tsx

@@ -103,11 +103,12 @@ export const DashboardKPICards = memo(function DashboardKPICards({
     <div className={cn("stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4", className)}>
       {STAT_CARDS.map((card) => {
         const breakdown = card.getBreakdown(summary);
+        // No tooltip on the card: the breakdown is rendered visibly below
+        // the value, so the old title only repeated on-screen text.
         return (
           <div
             key={card.label}
             className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-3"
-            title={breakdown ?? undefined}
           >
             <p className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               {card.label}

package/src/dependency-graph/DependencyTreeNode.tsx

@@ -2,7 +2,6 @@
 
 import { useCallback, useState, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
-import { DatastoreIcon } from "../datastore/DatastoreDetailView.js";
 import type { DependencyNode, NodeKind } from "./types.js";
 
 interface DependencyTreeNodeProps {
@@ -16,7 +15,6 @@ const KIND_LABELS: Record<NodeKind, string> = {
   agent: "Agent",
   "mcp-server": "MCP",
   skill: "Skill",
-  datastore: "Datastore",
   "sub-agent": "Sub-Agent",
 };
 
@@ -182,9 +180,7 @@ function kindBadgeClasses(kind: NodeKind): string {
     case "skill":
       return "stg:bg-[var(--stgm-status-pending-subtle)] stg:text-[var(--stgm-status-pending)]";
     // Badges borrow status hues as category colors (skill=pending,
-    // sub-agent=ready); datastore takes the remaining distinct hue.
-    case "datastore":
-      return "stg:bg-[var(--stgm-status-degraded-subtle)] stg:text-[var(--stgm-status-degraded)]";
+    // sub-agent=ready).
     case "sub-agent":
       return "stg:bg-[var(--stgm-status-ready-subtle)] stg:text-[var(--stgm-status-ready)]";
     case "agent":
@@ -211,8 +207,6 @@ function NodeIcon({
       return <McpServerIcon className={className} />;
     case "skill":
       return <SkillIcon className={className} />;
-    case "datastore":
-      return <DatastoreIcon className={className} />;
   }
 }
 

package/src/dependency-graph/__tests__/useDependencyGraph.test.ts

@@ -15,48 +15,46 @@ function graphFor(spec: Parameters<typeof useDependencyGraph>[0]["spec"]) {
   return result.current;
 }
 
-describe("useDependencyGraph — datastore nodes", () => {
-  it("derives a datastore node with a navigation ref", () => {
+describe("useDependencyGraph", () => {
+  it("derives a skill node with a navigation ref", () => {
     const { tree, isEmpty } = graphFor({
       ...emptySpec,
-      datastoreUsages: [
-        { datastoreRef: { org: "acme", slug: "clinic-records" } },
-      ],
+      skillRefs: [{ org: "acme", slug: "triage-guide" }],
     });
 
-    // A datastore-only agent has dependencies — the tab must appear.
+    // A skill-only agent has dependencies — the tab must appear.
     expect(isEmpty).toBe(false);
     expect(tree).not.toBeNull();
     expect(tree!.nodeCount).toBe(2);
 
     const node = tree!.root.children[0];
     expect(node).toMatchObject({
-      id: "datastore:clinic-records",
-      kind: "datastore",
-      label: "clinic-records",
-      ref: { org: "acme", slug: "clinic-records" },
+      id: "skill:triage-guide",
+      kind: "skill",
+      label: "triage-guide",
+      ref: { org: "acme", slug: "triage-guide" },
     });
     // Same-org ref gets no qualified label.
     expect(node.qualifiedLabel).toBeUndefined();
   });
 
-  it("qualifies cross-org datastore labels and falls back to the agent org for empty refs", () => {
+  it("qualifies cross-org labels and falls back to the agent org for empty refs", () => {
     const { tree } = graphFor({
       ...emptySpec,
-      datastoreUsages: [
-        { datastoreRef: { org: "partner", slug: "shared-records" } },
-        { datastoreRef: { org: "", slug: "local-records" } },
+      skillRefs: [
+        { org: "partner", slug: "shared-guide" },
+        { org: "", slug: "local-guide" },
       ],
     });
 
     const [crossOrg, relative] = tree!.root.children;
-    expect(crossOrg.qualifiedLabel).toBe("partner/shared-records");
-    expect(crossOrg.ref).toEqual({ org: "partner", slug: "shared-records" });
+    expect(crossOrg.qualifiedLabel).toBe("partner/shared-guide");
+    expect(crossOrg.ref).toEqual({ org: "partner", slug: "shared-guide" });
     expect(relative.qualifiedLabel).toBeUndefined();
-    expect(relative.ref).toEqual({ org: "acme", slug: "local-records" });
+    expect(relative.ref).toEqual({ org: "acme", slug: "local-guide" });
   });
 
-  it("orders children to mirror the Overview sections: MCP, skills, datastores, sub-agents", () => {
+  it("orders children to mirror the Overview sections: MCP, skills, sub-agents", () => {
     const { tree } = graphFor({
       mcpServerUsages: [
         {
@@ -75,32 +73,18 @@ describe("useDependencyGraph — datastore nodes", () => {
           modelOverride: "",
         },
       ],
-      datastoreUsages: [
-        { datastoreRef: { org: "acme", slug: "clinic-records" } },
-      ],
     });
 
     expect(tree!.root.children.map((c) => c.kind)).toEqual([
       "mcp-server",
       "skill",
-      "datastore",
       "sub-agent",
     ]);
-    expect(tree!.nodeCount).toBe(5);
-  });
-
-  it("accepts specs without the datastoreUsages field (pre-existing public callers)", () => {
-    const { tree, isEmpty } = graphFor({
-      ...emptySpec,
-      skillRefs: [{ org: "acme", slug: "triage-guide" }],
-    });
-
-    expect(isEmpty).toBe(false);
-    expect(tree!.root.children.map((c) => c.kind)).toEqual(["skill"]);
+    expect(tree!.nodeCount).toBe(4);
   });
 
   it("stays empty when no dependencies exist at all", () => {
-    const { tree, isEmpty } = graphFor({ ...emptySpec, datastoreUsages: [] });
+    const { tree, isEmpty } = graphFor(emptySpec);
 
     expect(isEmpty).toBe(true);
     expect(tree).toBeNull();

package/src/dependency-graph/types.ts

@@ -4,10 +4,9 @@
  * - `"agent"` — the root agent (always the tree root)
  * - `"mcp-server"` — an MCP server referenced via `mcpServerUsages` or `mcpAccess`
  * - `"skill"` — a skill referenced via `skillRefs`
- * - `"datastore"` — a datastore referenced via `datastoreUsages`
  * - `"sub-agent"` — an inline sub-agent definition with its own dependencies
  */
-export type NodeKind = "agent" | "mcp-server" | "skill" | "datastore" | "sub-agent";
+export type NodeKind = "agent" | "mcp-server" | "skill" | "sub-agent";
 
 /**
  * A single node in the agent dependency tree.
@@ -16,9 +15,9 @@ export type NodeKind = "agent" | "mcp-server" | "skill" | "datastore" | "sub-age
  * (MCP servers and skills they access). Edges are implicit in the
  * parent-child relationship — no separate edge type is needed.
  *
- * Nodes are navigable when `ref` is defined (MCP servers, skills,
- * datastores). Sub-agent nodes have no `ref` because they are inline
- * definitions within the agent spec, not standalone resources.
+ * Nodes are navigable when `ref` is defined (MCP servers and skills).
+ * Sub-agent nodes have no `ref` because they are inline definitions
+ * within the agent spec, not standalone resources.
  */
 export interface DependencyNode {
   /**
@@ -47,9 +46,9 @@ export interface DependencyNode {
   /** Child nodes. Empty array for leaf nodes (MCP servers, skills). */
   readonly children: readonly DependencyNode[];
   /**
-   * Navigation reference for clickable nodes. Defined for MCP servers,
-   * skills, and datastores (standalone resources). Undefined for
-   * sub-agents (inline definitions) and the root agent.
+   * Navigation reference for clickable nodes. Defined for MCP servers
+   * and skills (standalone resources). Undefined for sub-agents (inline
+   * definitions) and the root agent.
    */
   readonly ref?: { readonly org: string; readonly slug: string };
 }
@@ -71,7 +70,7 @@ export interface DependencyGraphProps {
   /**
    * Called when a navigable node is clicked. The `node.ref` field
    * contains the `org` and `slug` for routing. Only fired for nodes
-   * where `ref` is defined (MCP servers, skills, datastores).
+   * where `ref` is defined (MCP servers and skills).
    */
   readonly onNodeClick?: (node: DependencyNode) => void;
   /**
@@ -120,17 +119,6 @@ export interface UseDependencyGraphOptions {
       }[];
       readonly modelOverride: string;
     }[];
-    /**
-     * Datastore attachments (`spec.datastoreUsages`). Optional because
-     * this hook is a public SDK export: callers passing hand-built spec
-     * objects written before the field existed must keep compiling.
-     */
-    readonly datastoreUsages?: readonly {
-      readonly datastoreRef?: {
-        readonly org: string;
-        readonly slug: string;
-      };
-    }[];
   } | undefined;
 }
 

package/src/dependency-graph/useDependencyGraph.ts

@@ -41,12 +41,10 @@ export function useDependencyGraph({
     if (!spec) return { tree: null, isEmpty: true };
 
     const { mcpServerUsages, skillRefs, subAgents } = spec;
-    const datastoreUsages = spec.datastoreUsages ?? [];
 
     const hasDeps =
       mcpServerUsages.length > 0 ||
       skillRefs.length > 0 ||
-      datastoreUsages.length > 0 ||
       subAgents.length > 0;
 
     if (!hasDeps) return { tree: null, isEmpty: true };
@@ -94,24 +92,6 @@ export function useDependencyGraph({
       };
     });
 
-    const datastoreNodes: DependencyNode[] = datastoreUsages
-      .filter((u) => u.datastoreRef)
-      .map((usage) => {
-        nodeCount++;
-        const ref = usage.datastoreRef!;
-        return {
-          id: `datastore:${ref.slug}`,
-          kind: "datastore" as const,
-          label: ref.slug,
-          qualifiedLabel:
-            ref.org && ref.org !== agentOrg
-              ? `${ref.org}/${ref.slug}`
-              : undefined,
-          children: [],
-          ref: { org: ref.org || agentOrg, slug: ref.slug },
-        };
-      });
-
     const subAgentNodes: DependencyNode[] = subAgents.map((sa) => {
       nodeCount++;
 
@@ -164,12 +144,12 @@ export function useDependencyGraph({
     });
 
     // Child ordering mirrors the Overview sections: MCP servers,
-    // skills, datastores, then sub-agents.
+    // skills, then sub-agents.
     const root: DependencyNode = {
       id: `agent:${agentName}`,
       kind: "agent",
       label: agentName,
-      children: [...mcpNodes, ...skillNodes, ...datastoreNodes, ...subAgentNodes],
+      children: [...mcpNodes, ...skillNodes, ...subAgentNodes],
     };
 
     return {

package/src/environment/EnvironmentVariableEditor.tsx

@@ -12,6 +12,7 @@ import { getUserMessage, type EnvVarInput } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables.js";
 import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables.js";
@@ -390,12 +391,22 @@ function VariableRow({
       <div className="stg:group stg:flex stg:items-center stg:gap-3 stg:py-2">
         {/* Key + badge */}
         <div className="stg:flex stg:shrink-0 stg:items-baseline stg:gap-1.5">
-          <span
-            className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground"
-            title={variable.description || undefined}
-          >
-            {variable.key}
-          </span>
+          {variable.description ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground" />
+                }
+              >
+                {variable.key}
+              </TooltipTrigger>
+              <TooltipContent side="top">{variable.description}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
+              {variable.key}
+            </span>
+          )}
           {variable.isSecret && (
             <span className="stg:text-[0.55rem] stg:uppercase stg:tracking-wider stg:text-muted-foreground-subtle">
               secret

package/src/execution/ApprovalCard.tsx

@@ -407,12 +407,10 @@ export function ApprovalCardBody({
       </div>
 
       {/* De-emphasized provenance, trailing the decision it explains. Only the
-          informative reasons reach here (see showGateReason); the full phrase is
-          on hover. */}
+          informative reasons reach here (see showGateReason). */}
       {showGateReason && (
         <p
           className="stg:text-[11px] stg:italic stg:text-muted-foreground"
-          title={gateReason ?? undefined}
           data-cursor-target="approval-gate-reason"
         >
           {gateReason}

package/src/execution/ArtifactRowView.tsx

@@ -5,6 +5,7 @@
 
 import { cn } from "@stigmer/theme";
 import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { ArtifactRowItem } from "./artifact-row-item.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 
@@ -59,54 +60,73 @@ export function ArtifactRowView({
 }: ArtifactRowViewProps) {
   return (
     <li className={cn("stg:group stg:flex stg:items-stretch", className)}>
-      <button
-        type="button"
-        onClick={onOpen}
-        onDoubleClick={onActivate}
-        title={item.tooltip}
-        className={cn(
-          "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
-          "stg:hover:bg-muted stg:hover:text-foreground",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-        )}
-      >
-        <span className="stg:shrink-0 stg:text-muted-foreground">
-          {item.isDirectory ? (
-            <FolderTypeIcon open={false} />
-          ) : (
-            <FileTypeIcon fileName={item.name} />
-          )}
-        </span>
-        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
-          {item.name}
-          {item.isDirectory && "/"}
-          {item.subtitlePath && (
-            <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
-              {item.subtitlePath}
-            </span>
-          )}
-        </span>
-        <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
-          {formatArtifactSize(item.sizeBytes)}
-        </span>
-      </button>
-      <button
-        type="button"
-        onClick={onDownload}
-        disabled={isDownloading}
-        aria-label={
-          isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
-        }
-        title={item.isDirectory ? "Download ZIP" : "Download"}
-        className={cn(
-          "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
-          "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-          "stg:hover:text-foreground stg:disabled:opacity-50",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-        )}
-      >
-        <DownloadIcon />
-      </button>
+      {/* The open button is its own tooltip trigger (hover and keyboard focus
+          both reveal the full path); the Download button's trigger is a
+          wrapper span so the hint survives the in-flight `disabled` state
+          (browsers suppress pointer events on disabled form controls, so a
+          disabled button can never open its own tooltip). */}
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onOpen}
+              onDoubleClick={onActivate}
+              className={cn(
+                "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+                "stg:hover:bg-muted stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+              )}
+            />
+          }
+        >
+          <span className="stg:shrink-0 stg:text-muted-foreground">
+            {item.isDirectory ? (
+              <FolderTypeIcon open={false} />
+            ) : (
+              <FileTypeIcon fileName={item.name} />
+            )}
+          </span>
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
+            {item.name}
+            {item.isDirectory && "/"}
+            {item.subtitlePath && (
+              <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
+                {item.subtitlePath}
+              </span>
+            )}
+          </span>
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
+            {formatArtifactSize(item.sizeBytes)}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {item.tooltip}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger render={<span className="stg:flex stg:shrink-0" />}>
+          <button
+            type="button"
+            onClick={onDownload}
+            disabled={isDownloading}
+            aria-label={
+              isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
+            }
+            className={cn(
+              "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+              "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+              "stg:hover:text-foreground stg:disabled:opacity-50",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+            )}
+          >
+            <DownloadIcon />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {item.isDirectory ? "Download ZIP" : "Download"}
+        </TooltipContent>
+      </Tooltip>
     </li>
   );
 }

package/src/execution/FilePathLink.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useContext, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { FilePathContext } from "./FilePathContext.js";
 import { resolvePathAction, splitDisplayPath } from "./file-path-resolver.js";
 
@@ -18,9 +19,9 @@ export interface FilePathLinkProps {
   readonly path: string;
   /**
    * How much of the directory prefix to show. Defaults to `"hide"` (file name
-   * only); the full path is always available on hover via `title`. Use `"dim"`
-   * where the surrounding directory aids comprehension (diff headers, the
-   * multi-file changes list).
+   * only); the full path is always available on the hover/focus tooltip. Use
+   * `"dim"` where the surrounding directory aids comprehension (diff headers,
+   * the multi-file changes list).
    */
   readonly dirDisplay?: FilePathDirDisplay;
   /** Additional CSS class names for the root element. */
@@ -35,7 +36,7 @@ const COPIED_FEEDBACK_MS = 2000;
  *
  * **Filename-first.** It shows the base name prominently and never clips it;
  * the directory is optional (`dirDisplay`) and dimmed, and the *full* path is
- * always available on hover via `title` (and to screen readers via
+ * always available on the hover/focus tooltip (and to screen readers via
  * `aria-label`). This fixes the prior behaviour, where a single `truncate` on
  * the whole path clipped the file name — the one part that identifies the
  * change — and surfaced only the action verb on hover.
@@ -75,7 +76,6 @@ export function FilePathLink({
   // path. The action verb moves into the aria-label so hover surfaces the path,
   // not "Copy path".
   const fullPath = resolved.action === "copy" ? resolved.value : path;
-  const title = fullPath;
   const ariaLabel = `${resolved.tooltip}: ${fullPath}`;
 
   const handleCopy = useCallback(() => {
@@ -143,32 +143,48 @@ export function FilePathLink({
   // in-app viewer) and only calls `preventDefault` when the handler took it.
   if (resolved.action === "link") {
     return (
-      <a
-        href={resolved.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={handleClick}
-        aria-label={ariaLabel}
-        title={title}
-        className={cn(sharedClasses, "stg:group/fpl")}
-      >
-        {label}
-        <ExternalLinkIcon />
-      </a>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <a
+              href={resolved.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleClick}
+              aria-label={ariaLabel}
+              className={cn(sharedClasses, "stg:group/fpl")}
+            />
+          }
+        >
+          {label}
+          <ExternalLinkIcon />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {fullPath}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      aria-label={ariaLabel}
-      title={title}
-      className={cn(sharedClasses, "stg:group/fpl stg:cursor-pointer")}
-    >
-      {label}
-      {!copied && <CopyIcon />}
-    </button>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={handleClick}
+            aria-label={ariaLabel}
+            className={cn(sharedClasses, "stg:group/fpl stg:cursor-pointer")}
+          />
+        }
+      >
+        {label}
+        {!copied && <CopyIcon />}
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {fullPath}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/execution/McpToolDetail.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { cn } from "@stigmer/theme";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { formatDuration } from "./ToolCallDetail.js";
 import { humanizeToolName } from "./tool-categories.js";
 import {
@@ -301,8 +302,11 @@ function ScalarRow({ label, value }: { label: string; value: string }) {
           </pre>
         </dd>
       ) : (
-        <dd className="stg:min-w-0 stg:truncate stg:font-mono stg:text-foreground" title={value}>
-          {value}
+        <dd className="stg:min-w-0">
+          <TruncatedText
+            text={value}
+            className="stg:block stg:font-mono stg:text-foreground"
+          />
         </dd>
       )}
     </>