feat(web): complete tooltip migration inventory

Author: pallyoung

packages/web/src/components/ui/MIGRATION.md

@@ -16,7 +16,7 @@
 | Modal | 🟢 complete | `.modal-overlay .modal-card .modal-*` | 0 | 2026-05-09 |
 | ConfirmDialog | 🟡 partial | modal convenience wrapper | richer confirm/auth flows remain on raw `Modal` | 2026-05-09 |
 | Toast | 🟢 complete | `.toast*` | 0 | 2026-05-09 |
-| Tooltip | 🟡 partial | native `title` hover labels | branch picker, code-editor actions, file-tree actions, git-diff close, fullscreen, topbar actions, connection-status, git status-strip branch, session/supervisor actions, selected settings actions, and workspace/terminal file-toolbar actions covered; truncation/path and other non-action long-text titles remain deferred | 2026-05-09 |
+| Tooltip | 🟢 complete | native `title` hover labels | 0 | 2026-05-09 |
 | ProgressBar | 🟢 complete | `--progress-height` patterns | 0 | 2026-05-09 |
 | Notice | 🟢 complete | `.settings-page__notice*` | 0 | 2026-05-09 |
 | EmptyState | 🟡 partial | feature-specific empty state blocks | centered shared shells plus workspace desktop/mobile no-session or no-workspace empties, agent-panes no-workspace, topbar no-workspace, workspace route resolving/load-failed shells, worktree detail no-diff and empty-tree states, worktree manager list-empty, workspace launch directory-empty, command palette no-results, desktop branch quick-pick loading/idle/filter-empty states, shared git-panel compact worktree/change/history shells, file-tree-panel loading/search-empty/tree fallback shells, the mobile select empty shell, and the mobile supervisor enable shell covered; additional list-style and other feature-owned empty blocks remain | 2026-05-09 |
@@ -63,7 +63,7 @@
 
 `Switch` now completes the bounded boolean-toggle inventory: the settings notifications toggles use the shared primitive from the public UI barrel, and no additional feature-local switch implementations remain in the selected scope.
 
-`Tooltip` now covers a broader bounded action-trigger batch: branch picker, topbar/workspace fullscreen, selected code-editor actions, file-tree delete/create actions, git-diff close, connection-status hover copy, the git status-strip branch trigger, session/supervisor actions, the settings config-editor format action, workspace desktop/mobile file-toolbar actions, and terminal toolbar open/close actions all use the shared primitive from the public UI barrel. The shared primitive also preserves hover help for real disabled button triggers so these migrations do not regress existing affordances. Deferred tooltip-like families such as truncation/path and other non-action long-text titles remain intentionally outside this slice.
+`Tooltip` now completes the feature-layer native hover-label migration inventory: the earlier action-trigger adoptions plus the remaining file-tree path labels, git history subjects, workspace tab path labels, settings config path labels, and supervisor objective text all use the shared primitive from the public UI barrel instead of native `title` attributes. The shared primitive also preserves hover help for real disabled button triggers so these migrations do not regress existing affordances, and no feature-local native `title` hover-label callsites remain.
 
 `Sheet` now completes the mobile sheet-shell migration inventory: the mobile workspace files and terminal fullscreen sheets, mobile supervisor flows, mobile select sheet presentation, mobile worktree manager surface, workspace launch modal, worktree modal, and command palette all use the shared primitive from the public UI barrel while preserving the existing `mobile-sheet*` compatibility classes and caller-owned body/content modifiers.
 

packages/web/src/features/settings/components/config-editor.test.tsx

@@ -62,13 +62,19 @@ function renderConfigEditor(options?: {
 }
 
 describe("ConfigEditor", () => {
-  it("preserves the full config path in the header title when the visible path is truncated", async () => {
+  it("preserves the full config path in the header tooltip when the visible path is truncated", async () => {
     renderConfigEditor();
 
-    const path = await screen.findByTitle("/home/spencer/.claude/settings.json");
+    const path = await screen.findByText("/home/spencer/.claude/settings.json");
 
     expect(path).toHaveClass("config-card-path");
     expect(path).toHaveTextContent("/home/spencer/.claude/settings.json");
+    expect(path).not.toHaveAttribute("title");
+
+    fireEvent.mouseEnter(path);
+    const tooltip = await screen.findByRole("tooltip");
+    expect(tooltip).toHaveTextContent("/home/spencer/.claude/settings.json");
+    expect(path).toHaveAttribute("aria-describedby", tooltip.getAttribute("id") ?? "");
 
     await waitFor(() => {
       expect(screen.getByTestId("monaco-host")).toBeInTheDocument();

packages/web/src/features/settings/components/config-editor.tsx

@@ -264,9 +264,9 @@ export function ConfigEditor({
       <div className="config-card-header" onClick={handleToggle}>
         <div className="config-card-title">
           <FileJson2 size={16} />
-          <span className="config-card-path" title={configPath}>
-            {configPath}
-          </span>
+          <Tooltip content={configPath}>
+            <span className="config-card-path">{configPath}</span>
+          </Tooltip>
         </div>
         <div className="config-card-header-right">
           {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}

packages/web/src/features/supervisor/components/supervisor-card.test.tsx

@@ -128,6 +128,29 @@ describe("SupervisorCard", () => {
     );
   });
 
+  it("uses the shared tooltip for the supervisor objective text", () => {
+    const store = createStore();
+    window.localStorage.setItem("ui.locale", JSON.stringify("en"));
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, { sendCommand: vi.fn() } as never);
+    store.set(supervisorsAtom, new Map([["sess-1", createSupervisor()]]));
+    store.set(supervisorCyclesAtom, new Map());
+
+    render(
+      <Provider store={store}>
+        <SupervisorCard sessionId="sess-1" workspaceId="ws-1" />
+      </Provider>
+    );
+
+    const objective = screen.getByText("Finish the server refactor");
+    expect(objective).not.toHaveAttribute("title");
+
+    fireEvent.mouseEnter(objective);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip).toHaveTextContent("Finish the server refactor");
+    expect(objective).toHaveAttribute("aria-describedby", tooltip.getAttribute("id") ?? "");
+  });
+
   it('shows "No guidance injected this cycle" for a completed cycle with no result and no errorReason', () => {
     const sendCommand = vi.fn().mockResolvedValue(undefined);
     const store = createStore();

packages/web/src/features/supervisor/views/shared/supervisor-card.tsx

@@ -115,9 +115,9 @@ export function SupervisorCard({ sessionId, workspaceId }: SupervisorCardProps)
       </div>
 
       <div className="supervisor-objective-row" onDoubleClick={() => openDialog("edit")}>
-        <span className="supervisor-objective-text" title={supervisor.objective}>
-          {supervisor.objective}
-        </span>
+        <Tooltip content={supervisor.objective}>
+          <span className="supervisor-objective-text">{supervisor.objective}</span>
+        </Tooltip>
         <span className="supervisor-provider-pill">{supervisor.evaluatorProviderId}</span>
       </div>
 

packages/web/src/features/topbar/components/tab.test.tsx

@@ -70,7 +70,7 @@ describe("WorkspaceTab", () => {
     );
   }
 
-  it("renders the folder basename when workspace name is a full path", () => {
+  it("renders the folder basename and uses a shared tooltip for the full path", () => {
     const workspace = {
       ...createWorkspace("ws-2", "/home/spencer/workspace/coder-studio"),
       name: "/home/spencer/workspace/coder-studio",
@@ -80,11 +80,17 @@ describe("WorkspaceTab", () => {
 
     renderWorkspaceTab(store, workspace);
 
-    expect(screen.getByRole("tab", { name: "coder-studio" })).toHaveAttribute(
-      "title",
-      "/home/spencer/workspace/coder-studio"
-    );
+    const tab = screen.getByRole("tab", { name: "coder-studio" });
+    const label = screen.getByText("coder-studio");
+
+    expect(tab).not.toHaveAttribute("title");
+    expect(label).not.toHaveAttribute("title");
     expect(screen.queryByText("/home/spencer/workspace/coder-studio")).toBeNull();
+
+    fireEvent.mouseEnter(label);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip).toHaveTextContent("/home/spencer/workspace/coder-studio");
+    expect(label).toHaveAttribute("aria-describedby", tooltip.getAttribute("id") ?? "");
   });
 
   it("sets the active workspace without navigating when a tab is clicked", () => {

packages/web/src/features/topbar/components/tab.tsx

@@ -10,7 +10,7 @@ import { useSetAtom } from "jotai";
 import { X } from "lucide-react";
 import type { FC } from "react";
 import { activeWorkspaceIdAtom } from "../../../atoms/workspaces";
-import { Badge, IconButton, Tab } from "../../../components/ui";
+import { Badge, IconButton, Tab, Tooltip } from "../../../components/ui";
 import { useTranslation } from "../../../lib/i18n";
 import { formatWorkspaceLabel } from "../../notifications/format";
 import { useWorkspaceCloseAction } from "../../workspace/actions/use-workspace-close-action";
@@ -46,14 +46,11 @@ export const WorkspaceTab: FC<WorkspaceTabProps> = ({ workspace, isActive }) =>
 
   return (
     <div className={`topbar-tab-shell ${isActive ? "active" : ""}`} role="presentation">
-      <Tab
-        className="topbar-tab"
-        onClick={handleClick}
-        title={workspace.path || workspace.id}
-        value={workspace.id}
-      >
+      <Tab className="topbar-tab" onClick={handleClick} value={workspace.id}>
         <span className={`topbar-dot ${workspace.isActive ? "active" : "idle"}`} />
-        <span className="topbar-tab-name">{displayName}</span>
+        <Tooltip content={workspace.path || workspace.id}>
+          <span className="topbar-tab-name">{displayName}</span>
+        </Tooltip>
         <Badge count={workspace.unreadCount ?? 0} max={9} />
       </Tab>
       <IconButton

packages/web/src/features/workspace/views/shared/file-tree-panel.test.tsx

@@ -827,7 +827,7 @@ describe("FileTreePanel", () => {
     expect(await screen.findByRole("dialog")).toBeInTheDocument();
   });
 
-  it("uses shared tooltips for file-tree action triggers while preserving row path titles", () => {
+  it("uses shared tooltips for file-tree action triggers and row path labels", () => {
     const store = createStore();
     store.set(wsClientAtom, { sendCommand: vi.fn().mockResolvedValue({}) } as never);
     store.set(
@@ -871,11 +871,12 @@ describe("FileTreePanel", () => {
     expect(newFolderButton).not.toHaveAttribute("title");
     expect(deleteDirectoryButton).not.toHaveAttribute("title");
     expect(deleteFileButton).not.toHaveAttribute("title");
-    expect(screen.getByText("src").closest(".tree-item")).toHaveAttribute("title", "src");
-    expect(screen.getByText("app.tsx").closest(".tree-item")).toHaveAttribute(
-      "title",
-      "src/app.tsx"
-    );
+    const directoryLabel = screen.getByText("src");
+    const fileLabel = screen.getByText("app.tsx");
+    expect(directoryLabel).not.toHaveAttribute("title");
+    expect(fileLabel).not.toHaveAttribute("title");
+    expect(directoryLabel.closest(".tree-item")).not.toHaveAttribute("title");
+    expect(fileLabel.closest(".tree-item")).not.toHaveAttribute("title");
 
     fireEvent.mouseEnter(newFileButton);
     expect(screen.getByRole("tooltip")).toHaveTextContent("file.new_file");
@@ -891,6 +892,14 @@ describe("FileTreePanel", () => {
     fireEvent.mouseLeave(deleteDirectoryButton);
     fireEvent.mouseEnter(deleteFileButton);
     expect(screen.getByRole("tooltip")).toHaveTextContent("file.delete");
+
+    fireEvent.mouseLeave(deleteFileButton);
+    fireEvent.mouseEnter(directoryLabel);
+    expect(screen.getByRole("tooltip")).toHaveTextContent("src");
+
+    fireEvent.mouseLeave(directoryLabel);
+    fireEvent.mouseEnter(fileLabel);
+    expect(screen.getByRole("tooltip")).toHaveTextContent("src/app.tsx");
   });
 
   it("keeps expanded directories populated after refreshing the file tree", async () => {

packages/web/src/features/workspace/views/shared/file-tree-panel.tsx

@@ -252,7 +252,6 @@ const FileSearchResultRow: FC<FileSearchResultRowProps> = ({
       className={`tree-item ${selectedPath === node.path ? "selected" : ""}`}
       onClick={() => onSelectFile(node.path)}
       style={{ paddingLeft: 12 }}
-      title={node.path}
     >
       <span className="tree-chevron" aria-hidden="true" />
 
@@ -261,8 +260,14 @@ const FileSearchResultRow: FC<FileSearchResultRowProps> = ({
       </span>
 
       <span className="tree-search-labels">
-        <span className="tree-label">{node.name}</span>
-        {dirName ? <span className="tree-search-path">{dirName}</span> : null}
+        <Tooltip content={node.path}>
+          <span className="tree-label">{node.name}</span>
+        </Tooltip>
+        {dirName ? (
+          <Tooltip content={node.path}>
+            <span className="tree-search-path">{dirName}</span>
+          </Tooltip>
+        ) : null}
       </span>
 
       <div className="tree-item-actions">
@@ -352,7 +357,6 @@ const FileTreeNode: FC<FileTreeNodeProps> = ({
         className={`tree-item ${selectedPath === node.path ? "selected" : ""}`}
         onClick={handleClick}
         style={{ paddingLeft }}
-        title={node.path}
       >
         <span className="tree-chevron" aria-hidden="true">
           {isFolder ? isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} /> : null}
@@ -362,7 +366,9 @@ const FileTreeNode: FC<FileTreeNodeProps> = ({
           <Icon size={14} />
         </span>
 
-        <span className="tree-label">{node.name}</span>
+        <Tooltip content={node.path}>
+          <span className="tree-label">{node.name}</span>
+        </Tooltip>
 
         <div className="tree-item-actions">
           {isFolder ? (

packages/web/src/features/workspace/views/shared/git-panel.test.tsx

@@ -675,6 +675,49 @@ describe("GitPanel", () => {
     });
   });
 
+  it("uses the shared tooltip for long history subjects instead of native titles", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "git.status") {
+        return status;
+      }
+
+      if (op === "git.branches") {
+        return { current: "feature/ai-agent", branches: [] };
+      }
+
+      if (op === "worktree.list") {
+        return { worktrees: [] };
+      }
+
+      if (op === "git.log") {
+        return { entries: historyEntries };
+      }
+
+      return {};
+    });
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, { sendCommand } as never);
+    seedWorkspaceStore(store);
+
+    render(
+      <Provider store={store}>
+        <GitPanel workspaceId="ws-test" />
+      </Provider>
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "History" }));
+
+    const subject = await screen.findByText("feat: refresh source control surface");
+    expect(subject).not.toHaveAttribute("title");
+    expect(subject.closest(".git-history-row")).not.toHaveAttribute("title");
+
+    fireEvent.mouseEnter(subject);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip).toHaveTextContent("feat: refresh source control surface");
+    expect(subject).toHaveAttribute("aria-describedby", tooltip.getAttribute("id") ?? "");
+  });
+
   it("renders the shared commit textarea styling in the updated panel shell", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "git.status") {