feat(FN-4016): convert hardcoded rgba colors to CSS token variables across

Migrated dashboard component CSS from hardcoded `rgba()` values to design token variables across nine components including `CustomModelDropdown`, `CliBinaryPanel`, and `CliBinaryInstallBanner`, with test coverage added for the affected components.

Fusion-Task-Id: FN-4016

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

@@ -1,6 +1,8 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { AgentReflectionsTab } from "../AgentReflectionsTab";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import {
   addAgentRating,
   deleteAgentRating,
@@ -281,4 +283,10 @@ describe("AgentReflectionsTab", () => {
       expect(screen.queryByText("Insights")).not.toBeInTheDocument();
     });
   });
+
+  it("keeps budget warning banner tokenized", () => {
+    const source = readFileSync(resolve(__dirname, "../AgentReflectionsTab.css"), "utf8");
+    expect(source).toMatch(/\.budget-warning-banner\s*\{[^}]*var\(--state-error-bg, color-mix\(in srgb, var\(--color-error\) 15%, transparent\)\)/);
+    expect(source).not.toMatch(/\.budget-warning-banner\s*\{[^}]*rgba\(/);
+  });
 });

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

@@ -10,6 +10,8 @@ import {
 } from "../../api";
 import type { Task } from "@fusion/core";
 import type { GitRemote } from "../../api";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 
 // Mock the API module
 vi.mock("../../api", async (importOriginal) => {
@@ -68,6 +70,14 @@ describe("GitHubImportModal", () => {
   const onClose = vi.fn();
   const onImport = vi.fn();
 
+  it("uses color-mix tokens for focus and selection surfaces", () => {
+    const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8");
+    expect(source).not.toContain("rgba(var(--color-primary-rgb)");
+    expect(source).not.toContain("rgba(var(--in-progress-rgb)");
+    expect(source).toContain("color-mix(in srgb, var(--in-progress) 12%, transparent)");
+    expect(source).toContain("Some hardcoded colors below");
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(fetchGitRemotes).mockReset();

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

@@ -4,6 +4,8 @@ import userEvent from "@testing-library/user-event";
 import { WorkspaceSelector } from "../WorkspaceSelector";
 import type { WorkspaceInfo } from "../../hooks/useWorkspaces";
 import { loadAllAppCss } from "../../test/cssFixture";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 
 const workspaces: WorkspaceInfo[] = [
   {
@@ -96,4 +98,10 @@ describe("WorkspaceSelector", () => {
 
     expect(css).toMatch(/\.workspace-selector-menu\s*\{[^}]*left:\s*auto;[^}]*right:\s*0;/);
   });
+
+  it("uses tokenized active-option background styling", () => {
+    const source = readFileSync(resolve(__dirname, "../WorkspaceSelector.css"), "utf8");
+    expect(source).toMatch(/\.workspace-selector-option\.active\s*\{[^}]*color-mix\(in srgb, var\(--todo\) 12%, transparent\)/);
+    expect(source).not.toMatch(/\.workspace-selector-option\.active\s*\{[^}]*rgba\(/);
+  });
 });