feat(web): extend empty state workspace shells

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 covered; richer workspace resolving/card shells remain | 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 |
 | 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, and the mobile agent empty shell all use the shared primitive from the public UI barrel. Richer workspace resolving/card shells 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 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.
 
 `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/workspace/views/shared/workspace-empty-state.tsx

@@ -1,22 +1,59 @@
+import type { ReactNode } from "react";
+import { EmptyState } from "../../../../components/ui";
 import { useTranslation } from "../../../../lib/i18n";
 
 interface WorkspaceEmptyStateProps {
-  title?: string;
-  description?: string;
+  title?: ReactNode;
+  description?: ReactNode;
 }
 
-export function WorkspaceEmptyState({ title, description }: WorkspaceEmptyStateProps) {
+interface WorkspaceResolvingStateShellProps {
+  title: ReactNode;
+  description: ReactNode;
+  testId?: string;
+}
+
+const workspaceResolvingEmptyStateStyle = {
+  minHeight: "auto",
+  padding: 0,
+  gap: 0,
+  alignItems: "stretch",
+  justifyContent: "flex-start",
+  textAlign: "left",
+};
+
+export function WorkspaceResolvingStateShell({
+  title,
+  description,
+  testId,
+}: WorkspaceResolvingStateShellProps) {
   const t = useTranslation();
 
   return (
-    <div className="workspace-resolving-shell">
+    <div className="workspace-resolving-shell" data-testid={testId}>
       <div className="workspace-resolving-card">
-        <div className="workspace-resolving-kicker">{t("workspace.title")}</div>
-        <div className="workspace-resolving-title">{title ?? t("workspace.load_failed_title")}</div>
-        <div className="workspace-resolving-desc">
-          {description ?? t("workspace.load_failed_description")}
-        </div>
+        <EmptyState
+          style={workspaceResolvingEmptyStateStyle}
+          title={
+            <div>
+              <div className="workspace-resolving-kicker">{t("workspace.title")}</div>
+              <div className="workspace-resolving-title">{title}</div>
+            </div>
+          }
+          description={<div className="workspace-resolving-desc">{description}</div>}
+        />
       </div>
     </div>
   );
 }
+
+export function WorkspaceEmptyState({ title, description }: WorkspaceEmptyStateProps) {
+  const t = useTranslation();
+
+  return (
+    <WorkspaceResolvingStateShell
+      title={title ?? t("workspace.load_failed_title")}
+      description={description ?? t("workspace.load_failed_description")}
+    />
+  );
+}

packages/web/src/features/workspace/views/shared/workspace-loading-state.tsx

@@ -1,15 +1,14 @@
 import { useTranslation } from "../../../../lib/i18n";
+import { WorkspaceResolvingStateShell } from "./workspace-empty-state";
 
 export function WorkspaceLoadingState() {
   const t = useTranslation();
 
   return (
-    <div className="workspace-resolving-shell" data-testid="workspace-resolving-shell">
-      <div className="workspace-resolving-card">
-        <div className="workspace-resolving-kicker">{t("workspace.title")}</div>
-        <div className="workspace-resolving-title">{t("workspace.loading_title")}</div>
-        <div className="workspace-resolving-desc">{t("workspace.loading_description")}</div>
-      </div>
-    </div>
+    <WorkspaceResolvingStateShell
+      testId="workspace-resolving-shell"
+      title={t("workspace.loading_title")}
+      description={t("workspace.loading_description")}
+    />
   );
 }