fix(FN-1031): replace var(--error) with var(--color-error) in project components

- Fix incorrect CSS token var(--error) → var(--color-error) in ProjectCard, ProjectHealthBadge, and ProjectSelector
- Add regression test suite (ProjectThemeTokens.test.tsx) covering all project components for correct token usage
- Ensures consistency with the design system's CSS custom property naming convention

packages/dashboard/app/components/ProjectCard.tsx

@@ -15,7 +15,7 @@ export interface ProjectCardProps {
 const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string; icon: typeof Play }> = {
   active: { label: "Active", color: "var(--success)", icon: Play },
   paused: { label: "Paused", color: "var(--warning)", icon: Pause },
-  errored: { label: "Error", color: "var(--error)", icon: AlertCircle },
+  errored: { label: "Error", color: "var(--color-error)", icon: AlertCircle },
   initializing: { label: "Initializing", color: "var(--info)", icon: Loader2 },
 };
 

packages/dashboard/app/components/ProjectHealthBadge.tsx

@@ -13,7 +13,7 @@ export interface ProjectHealthBadgeProps {
 const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string; icon: typeof Play }> = {
   active: { label: "Active", color: "var(--success)", icon: Play },
   paused: { label: "Paused", color: "var(--warning)", icon: Pause },
-  errored: { label: "Error", color: "var(--error)", icon: AlertCircle },
+  errored: { label: "Error", color: "var(--color-error)", icon: AlertCircle },
   initializing: { label: "Initializing", color: "var(--info)", icon: Loader2 },
 };
 

packages/dashboard/app/components/ProjectSelector.tsx

@@ -26,7 +26,7 @@ export interface ProjectSelectorProps {
 const STATUS_CONFIG: Record<ProjectStatus, { color: string; icon: typeof Play }> = {
   active: { color: "var(--success)", icon: Play },
   paused: { color: "var(--warning)", icon: Pause },
-  errored: { color: "var(--error)", icon: AlertCircle },
+  errored: { color: "var(--color-error)", icon: AlertCircle },
   initializing: { color: "var(--info)", icon: Loader2 },
 };
 

packages/dashboard/app/components/__tests__/ProjectThemeTokens.test.tsx

@@ -0,0 +1,147 @@
+import { describe, it, expect } from "vitest";
+
+// Import STATUS_CONFIG objects by reading source module internals.
+// Each component exports the config as a module-level constant.
+// We re-import the raw source to inspect the token strings.
+
+// ProjectHealthBadge STATUS_CONFIG
+import type { ProjectStatus } from "@fusion/core";
+
+// We need to read the actual source to access STATUS_CONFIG.
+// Since STATUS_CONFIG is module-scoped (not exported), we read the source
+// at build time and assert on the token patterns via rendered output.
+
+// Instead, we test the rendered output of each component for correct CSS tokens.
+import { render } from "@testing-library/react";
+import { ProjectHealthBadge } from "../ProjectHealthBadge";
+import { ProjectCard } from "../ProjectCard";
+import { ProjectSelector } from "../ProjectSelector";
+import type { RegisteredProject, ProjectHealth } from "@fusion/core";
+import type { ProjectInfo } from "../../../app/api";
+
+// Mock lucide-react icons
+vi.mock("lucide-react", () => ({
+  Play: () => <span>Play</span>,
+  Pause: () => <span>Pause</span>,
+  AlertCircle: () => <span>AlertCircle</span>,
+  Loader2: () => <span>Loader2</span>,
+  ChevronDown: () => <span>ChevronDown</span>,
+  Check: () => <span>Check</span>,
+  Folder: () => <span>Folder</span>,
+  Grid3X3: () => <span>Grid3X3</span>,
+  Search: () => <span>Search</span>,
+  Clock: () => <span>Clock</span>,
+  X: () => <span>X</span>,
+  MoreHorizontal: () => null,
+  Trash2: () => <span>Trash2</span>,
+  ArrowRight: () => <span>ArrowRight</span>,
+}));
+
+describe("Project component CSS theme tokens", () => {
+  it("ProjectHealthBadge uses var(--color-error) for errored status, not var(--error)", () => {
+    const { container } = render(<ProjectHealthBadge status="errored" />);
+
+    const badge = container.querySelector("[data-status='errored']") as HTMLElement;
+    expect(badge).toBeTruthy();
+
+    const style = badge.style;
+    // The color property should use the correct token
+    expect(style.color).toBe("var(--color-error)");
+    // Must NOT use the undefined bare token
+    expect(style.color).not.toBe("var(--error)");
+    expect(style.borderColor).toBe("var(--color-error)");
+    expect(style.borderColor).not.toBe("var(--error)");
+  });
+
+  it("ProjectCard uses var(--color-error) for errored status, not var(--error)", () => {
+    const project: RegisteredProject = {
+      id: "proj_test",
+      name: "Test Project",
+      path: "/test/path",
+      status: "errored",
+      isolationMode: "in-process",
+      createdAt: "2026-01-01T00:00:00.000Z",
+      updatedAt: "2026-01-01T00:00:00.000Z",
+    };
+
+    const { container } = render(
+      <ProjectCard
+        project={project}
+        health={null}
+        onSelect={() => {}}
+        onPause={() => {}}
+        onResume={() => {}}
+        onRemove={() => {}}
+      />
+    );
+
+    const statusBadge = container.querySelector(".project-card-status-badge") as HTMLElement;
+    expect(statusBadge).toBeTruthy();
+
+    const style = statusBadge.style;
+    expect(style.color).toBe("var(--color-error)");
+    expect(style.color).not.toBe("var(--error)");
+    expect(style.borderColor).toBe("var(--color-error)");
+    expect(style.borderColor).not.toBe("var(--error)");
+  });
+
+  it("ProjectSelector uses var(--color-error) for errored status, not var(--error)", () => {
+    const erroredProject: ProjectInfo = {
+      id: "proj_errored",
+      name: "Errored Project",
+      path: "/test/errored",
+      status: "errored",
+      isolationMode: "in-process",
+      createdAt: "2026-01-01T00:00:00.000Z",
+      updatedAt: "2026-01-01T00:00:00.000Z",
+      lastActivityAt: new Date().toISOString(),
+    };
+
+    const { container } = render(
+      <ProjectSelector
+        projects={[
+          erroredProject,
+          { ...erroredProject, id: "proj_other", status: "active", name: "Other" },
+        ]}
+        currentProject={erroredProject}
+        onSelect={() => {}}
+        onViewAll={() => {}}
+      />
+    );
+
+    // ProjectSelector returns null when only 1 project, so we provide 2
+    // The trigger shows current project — we check that no var(--error) exists in rendered output
+    const html = container.innerHTML;
+    expect(html).not.toContain("var(--error)");
+  });
+
+  it("no STATUS_CONFIG in any project component uses bare var(--error)", async () => {
+    // This is a source-code-level regression check.
+    // Read the source files and verify no bare var(--error) remains.
+    const fs = await import("fs");
+    const path = await import("path");
+
+    const componentDir = path.resolve(__dirname, "..");
+    const files = [
+      "ProjectHealthBadge.tsx",
+      "ProjectSelector.tsx",
+      "ProjectCard.tsx",
+    ];
+
+    for (const file of files) {
+      const source = fs.readFileSync(path.join(componentDir, file), "utf-8");
+
+      // Should NOT contain the bare var(--error) token
+      expect(
+        source,
+        `${file} should not contain var(--error)`
+      ).not.toMatch(/var\(--error\)(?!\w)/);
+
+      // Should contain the correct token for errored status
+      expect(
+        source,
+        `${file} should contain var(--color-error) for errored status`
+      ).toContain('var(--color-error)');
+    }
+  });
+});