FN-5894: share project data-boundary and status helpers

Centralize project loading and status-state handling across dashboard surfaces.

- add a reusable DataBoundary component for loading, empty, error, and loaded states
- extract shared project status config helpers for labels, colors, icons, and initializing detection
- update project overview, cards, badges, and selector UI to use the shared helpers
- add regression coverage for data-boundary behavior, project overview empty/loading transitions, and status config fallbacks

Files changed:
 packages/dashboard/app/components/DataBoundary.tsx | 64 ++++++++++++++++++++++
 packages/dashboard/app/components/ProjectCard.tsx  | 48 ++--------------
 .../app/components/ProjectHealthBadge.tsx          | 45 +--------------
 .../dashboard/app/components/ProjectOverview.tsx   |  4 +-
 .../dashboard/app/components/ProjectSelector.tsx   | 27 +--------
 .../app/components/__tests__/DataBoundary.test.tsx | 62 +++++++++++++++++++++
 .../components/__tests__/ProjectOverview.test.tsx  | 25 +++++++++
 .../__tests__/ProjectThemeTokens.test.tsx          | 37 ++++---------
 .../utils/__tests__/projectStatusConfig.test.ts    | 53 ++++++++++++++++++
 .../dashboard/app/utils/projectStatusConfig.ts     | 50 +++++++++++++++++
 packages/dashboard/vitest.config.ts                |  2 +
 11 files changed, 282 insertions(+), 135 deletions(-)

Fusion-Task-Id: FN-5894

Fusion-Task-Lineage: 3626a4af-b62b-456d-82d7-cf47bbf55c21

packages/dashboard/app/utils/__tests__/projectStatusConfig.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { AlertCircle, Loader2, Pause, Play } from "lucide-react";
+import {
+  STATUS_CONFIG,
+  formatStatusLabel,
+  getProjectStatusConfig,
+  isInitializingStatus,
+} from "../projectStatusConfig";
+
+describe("projectStatusConfig", () => {
+  it("maps each known status to the expected config", () => {
+    expect(STATUS_CONFIG.active.label).toBe("Active");
+    expect(STATUS_CONFIG.active.color).toBe("var(--color-success)");
+    expect(STATUS_CONFIG.active.icon).toBe(Play);
+
+    expect(STATUS_CONFIG.paused.label).toBe("Paused");
+    expect(STATUS_CONFIG.paused.color).toBe("var(--color-warning)");
+    expect(STATUS_CONFIG.paused.icon).toBe(Pause);
+
+    expect(STATUS_CONFIG.errored.label).toBe("Error");
+    expect(STATUS_CONFIG.errored.color).toBe("var(--color-error)");
+    expect(STATUS_CONFIG.errored.icon).toBe(AlertCircle);
+
+    expect(STATUS_CONFIG.initializing.label).toBe("Initializing");
+    expect(STATUS_CONFIG.initializing.color).toBe("var(--color-info)");
+    expect(STATUS_CONFIG.initializing.icon).toBe(Loader2);
+  });
+
+  it("formats unknown statuses into readable labels", () => {
+    expect(formatStatusLabel("removing_now")).toBe("Removing Now");
+    expect(getProjectStatusConfig("removing")).toMatchObject({
+      label: "Removing",
+      color: "var(--color-error)",
+    });
+    expect(getProjectStatusConfig("removing").icon).toBe(AlertCircle);
+  });
+
+  it("returns Unknown fallback labels for undefined, null, or empty statuses", () => {
+    for (const status of [undefined, null, ""]) {
+      const config = getProjectStatusConfig(status);
+      expect(config.label).toBe("Unknown");
+      expect(config.color).toBe("var(--color-error)");
+      expect(config.icon).toBe(AlertCircle);
+      expect(config.icon).toBeDefined();
+    }
+  });
+
+  it("only treats literal initializing as the spinner state", () => {
+    expect(isInitializingStatus("initializing")).toBe(true);
+    expect(isInitializingStatus("INITIALIZING")).toBe(false);
+    expect(isInitializingStatus(undefined)).toBe(false);
+  });
+});

packages/dashboard/app/utils/projectStatusConfig.ts

@@ -0,0 +1,50 @@
+import { AlertCircle, Loader2, Pause, Play } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ProjectStatus } from "@fusion/core";
+
+export interface ProjectStatusConfig {
+  label: string;
+  color: string;
+  icon: LucideIcon;
+}
+
+export const STATUS_CONFIG: Record<ProjectStatus, ProjectStatusConfig> = {
+  active: { label: "Active", color: "var(--color-success)", icon: Play },
+  paused: { label: "Paused", color: "var(--color-warning)", icon: Pause },
+  errored: { label: "Error", color: "var(--color-error)", icon: AlertCircle },
+  initializing: { label: "Initializing", color: "var(--color-info)", icon: Loader2 },
+};
+
+const FALLBACK_STATUS_CONFIG: ProjectStatusConfig = {
+  label: "Unknown",
+  color: "var(--color-error)",
+  icon: AlertCircle,
+};
+
+export function formatStatusLabel(status: string | null | undefined): string {
+  if (!status) {
+    return FALLBACK_STATUS_CONFIG.label;
+  }
+
+  return status
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+export function getProjectStatusConfig(status: string | null | undefined): ProjectStatusConfig {
+  const config = STATUS_CONFIG[status as ProjectStatus];
+  if (config) {
+    return config;
+  }
+
+  return {
+    ...FALLBACK_STATUS_CONFIG,
+    label: formatStatusLabel(status),
+  };
+}
+
+export function isInitializingStatus(status: string | null | undefined): boolean {
+  return status === "initializing";
+}