feat(web): expand empty state migration coverage

Author: pallyoung

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

@@ -19,7 +19,7 @@
 | 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 |
 | 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 and workspace route resolving/load-failed shells covered; list-style and other feature-owned empty blocks remain | 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 |
 | Tabs | 🟢 complete | `.panel-tabs`, `.panel-tab`, `.worktree-tabs`, `.worktree-tab`, feature-local workspace/terminal tab shells | 0 | 2026-05-09 |
 | SegmentedControl | 🟢 complete | `.settings-provider-tabs`, `.settings-provider-tab`, `.settings-provider-subnav`, `.settings-provider-subnav-button`, `.shortcuts-category-tabs`, `.shortcuts-category-tab` | 0 | 2026-05-09 |
 | Sheet | 🟢 complete | `.mobile-sheet*` | 0 | 2026-05-09 |
@@ -71,6 +71,6 @@
 
 `SegmentedControl` now completes the bounded selector-family inventory: provider chooser tabs, provider sub-navigation, and shortcuts category selectors all use the shared primitive from the public UI barrel while preserving the existing legacy compatibility classes for zero-regression styling.
 
-`EmptyState` now covers a broader bounded shell slice: config editor, terminal panel, git diff/code editor/image preview empties, the desktop workspace no-workspace shell, the mobile agent empty shell, and the workspace route resolving/load-failed shells all use the shared primitive from the public UI barrel while preserving feature-owned card chrome such as `workspace-resolving-shell` and `workspace-resolving-card`. List-style and other feature-owned empty-state chromes remain intentionally deferred.
+`EmptyState` now covers a broader bounded shell slice: config editor, terminal panel, git diff/code editor/image preview empties, the desktop workspace no-workspace shell, the agent-panes no-workspace shell, the topbar no-workspace hint, the worktree detail no-diff and empty-tree states, the worktree manager list-empty state, the workspace launch directory-empty state, the command palette no-results state, the desktop branch quick-pick loading and compact empty-result states, the shared git-panel compact worktree/change/history shells, the shared file-tree-panel loading/search-empty/tree fallback shells, the mobile agent empty shell, the mobile select empty shell, the mobile supervisor enable shell, and the workspace route resolving/load-failed shells all use the shared primitive from the public UI barrel while preserving feature-owned chrome such as `workspace-resolving-shell`, `workspace-resolving-card`, `agent-panes-empty`, `topbar-empty-state`, `mobile-select-sheet__empty`, `mobile-supervisor-sheet__empty`, `worktree-empty`, `directory-empty`, `command-palette-empty`, `branch-quick-pick-empty`, `git-panel-empty`, and `file-tree-empty`. Additional list-style and other feature-owned empty-state chromes remain intentionally deferred.
 
 `Tabs` now complete the bounded tab-navigation inventory: workspace desktop/mobile/worktree surfaces, the topbar workspace switcher, and the desktop terminal session tabs all use the shared primitive from the public UI barrel while preserving legacy compatibility classes and feature-owned closable-tab shells where secondary close actions must remain siblings of the tab trigger for valid DOM and keyboard semantics.

packages/web/src/features/agent-panes/index.test.tsx

@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { localeAtom } from "../../atoms/app-ui";
 import { connectionStatusAtom, wsClientAtom } from "../../atoms/connection";
 import { sessionsAtom } from "../../atoms/sessions";
-import { activeWorkspaceIdAtom } from "../../atoms/workspaces";
+import { activeWorkspaceIdAtom, workspacesLoadStateAtom } from "../../atoms/workspaces";
 import { seedReadyWorkspaceState } from "../../test-utils/workspace-state";
 import { LEGACY_PANE_LAYOUT_STORAGE_KEY_PREFIX, paneLayoutAtomFamily } from "./atoms/pane-layout";
 import { AgentPanes } from "./index";
@@ -153,6 +153,26 @@ describe("AgentPanes", () => {
     window.localStorage.clear();
   });
 
+  it("renders the shared empty state when no workspace is active", () => {
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(connectionStatusAtom, "connected");
+    store.set(workspacesLoadStateAtom, "ready");
+    store.set(activeWorkspaceIdAtom, null);
+    store.set(wsClientAtom, {
+      sendCommand: vi.fn(),
+      subscribe: vi.fn(() => () => {}),
+    } as never);
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    expect(screen.getByText("No workspace open")).toBeInTheDocument();
+  });
+
   it("splits the active session pane when session-card requests a split", async () => {
     const { store } = createAgentPaneStore();
 

packages/web/src/features/agent-panes/index.tsx

@@ -8,6 +8,7 @@
 import { useAtomValue } from "jotai";
 import type { FC } from "react";
 import { activeWorkspaceAtom } from "../../atoms/workspaces";
+import { EmptyState } from "../../components/ui";
 import { useTranslation } from "../../lib/i18n";
 import { usePaneActions } from "./actions/use-pane-actions";
 import { useSessionActions } from "./actions/use-session-actions";
@@ -31,6 +32,12 @@ interface AgentPanesProps {
   hydrateSessions?: boolean;
 }
 
+const emptyStateTitleStyle = {
+  margin: 0,
+  color: "var(--text-tertiary)",
+  fontWeight: "var(--font-normal)",
+};
+
 export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
   const t = useTranslation();
   const workspace = useAtomValue(activeWorkspaceAtom);
@@ -48,7 +55,10 @@ export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
   if (!workspace) {
     return (
       <div className="agent-panes-empty">
-        <p>{t("workspace.no_workspace")}</p>
+        <EmptyState
+          style={{ padding: 0 }}
+          title={<p style={emptyStateTitleStyle}>{t("workspace.no_workspace")}</p>}
+        />
       </div>
     );
   }

packages/web/src/features/command-palette/components/command-palette.test.tsx

@@ -148,6 +148,32 @@ describe("CommandPalette", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders the shared empty state shell for no command results", () => {
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(commandPaletteOpenAtom, true);
+    store.set(workspacesAtom, {
+      "ws-1": createWorkspace("ws-1", "/tmp/one"),
+    });
+    store.set(workspaceOrderAtom, ["ws-1"]);
+    store.set(workspacesLoadStateAtom, "ready");
+
+    render(
+      <Provider store={store}>
+        <CommandPalette />
+      </Provider>
+    );
+
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "__missing-command__" },
+    });
+
+    const emptyStateTitle = screen.getByText("No results found");
+
+    expect(emptyStateTitle.tagName).toBe("P");
+    expect(emptyStateTitle.closest(".command-palette-empty")).toBeTruthy();
+  });
+
   it("keeps desktop-only layout commands available on desktop and executes them", () => {
     const store = createStore();
     store.set(localeAtom, "en");

packages/web/src/features/command-palette/components/command-palette.tsx

@@ -15,7 +15,7 @@ import {
   orderedWorkspacesAtom,
   resolvedActiveWorkspaceIdAtom,
 } from "../../../atoms/workspaces";
-import { Sheet } from "../../../components/ui";
+import { EmptyState, Sheet } from "../../../components/ui";
 import { useViewport } from "../../../hooks/use-viewport";
 import { useTranslation } from "../../../lib/i18n";
 import { formatWorkspaceLabel } from "../../notifications/format";
@@ -37,6 +37,18 @@ interface Command {
 
 type ShellKind = "desktop" | "mobile";
 
+const commandPaletteEmptyStateStyle = {
+  minHeight: "auto",
+  padding: "var(--sp-8)",
+  gap: 0,
+};
+
+const commandPaletteEmptyStateTitleStyle = {
+  margin: 0,
+  color: "var(--text-tertiary)",
+  fontWeight: "var(--font-normal)",
+};
+
 /**
  * Command Palette
  *
@@ -196,7 +208,11 @@ export function CommandPalette() {
           </div>
         ))
       ) : (
-        <div className="command-palette-empty">{t("command.no_results")}</div>
+        <EmptyState
+          className="command-palette-empty"
+          style={commandPaletteEmptyStateStyle}
+          title={<p style={commandPaletteEmptyStateTitleStyle}>{t("command.no_results")}</p>}
+        />
       )}
     </div>
   );

packages/web/src/features/mobile-select/components/mobile-select-sheet.test.tsx

@@ -464,6 +464,33 @@ describe("MobileSelectSheet", () => {
     expect(onCreate).toHaveBeenCalledWith("feature/mobile-select");
   });
 
+  it("renders the empty state through the shared primitive while preserving the feature shell hook", () => {
+    renderWithEnglishLocale(
+      <MobileSelectSheet
+        title="Branch"
+        sections={[{ kind: "options", id: "branches", items: [] }]}
+        emptyText="No branches found"
+        onSelect={vi.fn()}
+        onClose={vi.fn()}
+      />
+    );
+
+    const emptyState = document.querySelector(".mobile-select-sheet__empty");
+    const emptyStateStyle = emptyState?.getAttribute("style") ?? "";
+    const emptyStateTitleStyle = emptyState?.firstElementChild?.getAttribute("style") ?? "";
+
+    expect(emptyState).not.toBeNull();
+    expect(emptyState).toHaveTextContent("No branches found");
+    expect(emptyStateStyle).toContain("min-height: auto");
+    expect(emptyStateStyle).toContain("padding: var(--sp-6) var(--sp-4)");
+    expect(emptyStateStyle).toContain("gap: 0");
+    expect(emptyState?.childElementCount).toBe(1);
+    expect(emptyState?.firstElementChild).toHaveTextContent("No branches found");
+    expect(emptyState?.firstElementChild?.tagName).toBe("DIV");
+    expect(emptyStateTitleStyle).toContain("color: var(--text-tertiary)");
+    expect(emptyStateTitleStyle).toContain("font-weight: var(--font-normal)");
+  });
+
   it("keeps the sheet open when closeOnSelect is false", async () => {
     const user = userEvent.setup();
     const onClose = vi.fn();

packages/web/src/features/mobile-select/components/mobile-select-sheet.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useId, useMemo, useState } from "react";
-import { IconButton } from "../../../components/ui";
+import { EmptyState, IconButton } from "../../../components/ui";
 import { Sheet } from "../../../components/ui/sheet";
 import { Tag } from "../../../components/ui/tag";
 import { useTranslation } from "../../../lib/i18n";
@@ -80,6 +80,19 @@ export interface MobileSelectSheetProps {
   onClose: () => void;
 }
 
+const mobileSelectEmptyStateStyle = {
+  minHeight: "auto",
+  padding: "var(--sp-6) var(--sp-4)",
+  gap: 0,
+};
+
+const mobileSelectEmptyStateTitleStyle = {
+  color: "var(--text-tertiary)",
+  fontSize: "inherit",
+  fontWeight: "var(--font-normal)",
+  lineHeight: "inherit",
+};
+
 export function MobileSelectSheet({
   title,
   sections,
@@ -383,7 +396,11 @@ export function MobileSelectSheet({
             ) : null}
 
             {!hasVisibleItems && !canCreate ? (
-              <div className="mobile-select-sheet__empty">{resolvedEmptyText}</div>
+              <EmptyState
+                className="mobile-select-sheet__empty"
+                style={mobileSelectEmptyStateStyle}
+                title={<div style={mobileSelectEmptyStateTitleStyle}>{resolvedEmptyText}</div>}
+              />
             ) : null}
           </>
         )}

packages/web/src/features/supervisor/views/mobile/mobile-supervisor-sheet.test.tsx

@@ -94,7 +94,13 @@ describe("MobileSupervisorSheet", () => {
       </Provider>
     );
 
-    expect(screen.getByText("Supervisor is not enabled")).toBeInTheDocument();
+    const emptyState = screen
+      .getByText("Supervisor is not enabled")
+      .closest(".mobile-supervisor-sheet__empty");
+
+    expect(emptyState).not.toBeNull();
+    expect(emptyState).toHaveTextContent("Supervisor");
+    expect(emptyState).toHaveTextContent("Supervisor is not enabled");
 
     fireEvent.click(screen.getByRole("button", { name: "Enable Objective" }));
 

packages/web/src/features/supervisor/views/mobile/mobile-supervisor-sheet.tsx

@@ -1,6 +1,6 @@
 import { useSetAtom } from "jotai";
 import { useEffect, useState } from "react";
-import { Button, Sheet } from "../../../../components/ui";
+import { Button, EmptyState, Sheet } from "../../../../components/ui";
 import { useTranslation } from "../../../../lib/i18n";
 import {
   type ObjectiveDialogEvaluatorProviderId,
@@ -20,6 +20,23 @@ interface MobileSupervisorSheetProps {
   onClose: () => void;
 }
 
+const mobileSupervisorEmptyStateStyle = {
+  minHeight: 0,
+  padding: "var(--sp-4)",
+  gap: "var(--sp-2)",
+  alignItems: "stretch",
+  textAlign: "left",
+};
+
+const mobileSupervisorEmptySlotStyle = {
+  width: "auto",
+  maxWidth: "none",
+  color: "inherit",
+  fontSize: "inherit",
+  fontWeight: "inherit",
+  lineHeight: "inherit",
+};
+
 export function MobileSupervisorSheet({
   sessionId,
   workspaceId,
@@ -146,13 +163,27 @@ export function MobileSupervisorSheet({
               </div>
             </>
           ) : (
-            <div className="mobile-supervisor-sheet__empty">
-              <h3>{t("supervisor.title")}</h3>
-              <p>{t("supervisor.empty")}</p>
-              <Button variant="primary" onClick={() => openDetail("enable")}>
-                {t("supervisor.action.enable_objective")}
-              </Button>
-            </div>
+            <EmptyState
+              className="mobile-supervisor-sheet__empty"
+              style={mobileSupervisorEmptyStateStyle}
+              title={
+                <div style={mobileSupervisorEmptySlotStyle}>
+                  <h3>{t("supervisor.title")}</h3>
+                </div>
+              }
+              description={
+                <div style={mobileSupervisorEmptySlotStyle}>
+                  <p>{t("supervisor.empty")}</p>
+                </div>
+              }
+              action={
+                <div style={{ width: "100%" }}>
+                  <Button variant="primary" onClick={() => openDetail("enable")}>
+                    {t("supervisor.action.enable_objective")}
+                  </Button>
+                </div>
+              }
+            />
           )}
         </div>
       }

packages/web/src/features/topbar/index.test.tsx

@@ -103,7 +103,10 @@ describe("TopBar", () => {
       </Provider>
     );
 
-    expect(screen.getByText("No workspace open")).toBeInTheDocument();
+    const emptyState = screen.getByText("No workspace open").closest(".topbar-empty-state");
+
+    expect(emptyState).not.toBeNull();
+    expect(emptyState).toHaveTextContent("No workspace open");
     expect(screen.getByRole("button", { name: "Quick Actions" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Settings" })).toBeInTheDocument();
   });