refactor(dashboard,acp): rename /dashboard/agents → /dashboard/acp-agents + use shared concept/comparison cards (plan 14 F7)

- git mv agents/ → acp-agents/ (preserves history)
- useTranslations("agents") → useTranslations("acpAgents")
- Replace inline architecture/comparison cards with <CliConceptCard currentType="acp" /> + <CliComparisonCard currentType="acp" />
- Update all cross-links from /dashboard/cli-tools → /dashboard/cli-code
- Update cliToolsRedirectCta/openCliTools keys → cliCodeRedirectCta
- Update sidebarVisibility: id "agents" → "acp-agents", href "/dashboard/agents" → "/dashboard/acp-agents", i18nKey "agents" → "acpAgents"
- Update HIDEABLE_SIDEBAR_ITEM_IDS and DEVELOPER_SHOWN preset: "agents" → "acp-agents"
- Add tests/unit/ui/AcpAgentsPage.test.tsx (6 vitest tests: smoke, namespace, concept card, comparison card, cross-link, agent grid)

src/app/(dashboard)/dashboard/acp-agents/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { Card, Button, Input } from "@/shared/components";
 import ProviderIcon from "@/shared/components/ProviderIcon";
+import { CliConceptCard, CliComparisonCard } from "@/shared/components/cli";
 import { useTranslations } from "next-intl";
 
 interface AgentInfo {
@@ -65,7 +66,7 @@ export default function AgentsPage() {
     versionCommand: "",
     spawnArgs: "",
   });
-  const t = useTranslations("agents");
+  const t = useTranslations("acpAgents");
 
   const fetchAgents = useCallback(async () => {
     try {
@@ -160,174 +161,8 @@ export default function AgentsPage() {
         </Button>
       </div>
 
-      <Card className="border-blue-500/20 bg-blue-500/5">
-        <div className="flex flex-col gap-4">
-          <div className="flex items-start justify-between gap-4 flex-wrap">
-            <div>
-              <h2 className="text-sm font-semibold text-text-main">{t("architectureTitle")}</h2>
-              <p className="text-sm text-text-muted mt-1">{t("architectureDescription")}</p>
-            </div>
-            <Link
-              href="/dashboard/cli-tools"
-              className="inline-flex items-center gap-1.5 rounded-lg border border-blue-500/20 px-3 py-1.5 text-xs text-blue-500 hover:bg-blue-500/10 transition-colors"
-            >
-              <span className="material-symbols-outlined text-[14px]">open_in_new</span>
-              {t("cliToolsRedirectCta")}
-            </Link>
-          </div>
-          <div className="flex flex-wrap items-center gap-1 text-xs">
-            <span className="rounded-full bg-primary/10 px-3 py-1 font-medium text-primary">
-              {t("flowOmniRoute")}
-            </span>
-            <span className="material-symbols-outlined text-[14px] text-text-muted">
-              arrow_forward
-            </span>
-            <span className="rounded-full bg-amber-500/10 px-3 py-1 font-medium text-amber-600 dark:text-amber-400">
-              {t("flowSpawn")}
-            </span>
-            <span className="material-symbols-outlined text-[14px] text-text-muted">
-              arrow_forward
-            </span>
-            <span className="rounded-full bg-emerald-500/10 px-3 py-1 font-medium text-emerald-600 dark:text-emerald-400">
-              {t("flowLocalBinary")}
-            </span>
-            <span className="material-symbols-outlined text-[14px] text-text-muted">
-              arrow_forward
-            </span>
-            <span className="rounded-full bg-blue-500/10 px-3 py-1 font-medium text-blue-500">
-              {t("flowExecute")}
-            </span>
-          </div>
-          <div className="rounded-lg border border-border/30 bg-surface/20 p-4">
-            <div className="flex flex-col items-stretch gap-0 md:flex-row">
-              <div className="flex flex-1 flex-col items-center p-3 text-center">
-                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-text-main/10">
-                  <span className="material-symbols-outlined text-[20px] text-text-main">
-                    devices
-                  </span>
-                </div>
-                <p className="text-xs font-semibold text-text-main">{t("flowDiagramClient")}</p>
-                <p className="mt-0.5 text-[10px] text-text-muted">{t("flowDiagramClientDesc")}</p>
-              </div>
-              <div className="flex items-center justify-center px-2 py-1 md:py-0">
-                <span className="material-symbols-outlined rotate-90 text-[20px] text-primary md:rotate-0">
-                  arrow_forward
-                </span>
-              </div>
-              <div className="flex flex-1 flex-col items-center rounded-lg border border-primary/20 bg-primary/5 p-3 text-center">
-                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
-                  <span className="material-symbols-outlined text-[20px] text-primary">hub</span>
-                </div>
-                <p className="text-xs font-semibold text-primary">{t("flowDiagramOmniRoute")}</p>
-                <p className="mt-0.5 text-[10px] text-text-muted">
-                  {t("flowDiagramOmniRouteDesc")}
-                </p>
-              </div>
-              <div className="flex items-center justify-center px-2 py-1 md:py-0">
-                <span className="material-symbols-outlined rotate-90 text-[20px] text-amber-500 md:rotate-0">
-                  arrow_forward
-                </span>
-              </div>
-              <div className="flex flex-1 flex-col items-center rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 text-center">
-                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/10">
-                  <span className="material-symbols-outlined text-[20px] text-amber-600 dark:text-amber-400">
-                    launch
-                  </span>
-                </div>
-                <p className="text-xs font-semibold text-amber-600 dark:text-amber-400">
-                  {t("flowDiagramSpawn")}
-                </p>
-                <p className="mt-0.5 text-[10px] text-text-muted">{t("flowDiagramSpawnDesc")}</p>
-              </div>
-              <div className="flex items-center justify-center px-2 py-1 md:py-0">
-                <span className="material-symbols-outlined rotate-90 text-[20px] text-emerald-500 md:rotate-0">
-                  arrow_forward
-                </span>
-              </div>
-              <div className="flex flex-1 flex-col items-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 text-center">
-                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/10">
-                  <span className="material-symbols-outlined text-[20px] text-emerald-600 dark:text-emerald-400">
-                    terminal
-                  </span>
-                </div>
-                <p className="text-xs font-semibold text-emerald-600 dark:text-emerald-400">
-                  {t("flowDiagramCli")}
-                </p>
-                <p className="mt-0.5 text-[10px] text-text-muted">{t("flowDiagramCliDesc")}</p>
-              </div>
-            </div>
-          </div>
-          <div className="rounded-lg border border-blue-500/15 bg-surface/40 p-3 text-sm text-text-muted">
-            <span className="font-medium text-text-main">{t("cliToolsRedirectTitle")}</span>{" "}
-            {t("cliToolsRedirectDesc")}{" "}
-            <Link href="/dashboard/cli-tools" className="text-blue-500 hover:underline">
-              {t("openCliTools")}
-            </Link>
-            .
-          </div>
-        </div>
-      </Card>
-
-      <Card className="border-amber-500/20 bg-amber-500/5">
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-3">
-            <div className="rounded-lg bg-amber-500/10 p-2 text-amber-600 dark:text-amber-400">
-              <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
-                compare_arrows
-              </span>
-            </div>
-            <h3 className="text-sm font-semibold text-text-main">{t("comparisonTitle")}</h3>
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <div className="rounded-lg border border-blue-500/20 bg-blue-500/5 p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <span className="material-symbols-outlined text-[16px] text-blue-500">
-                  arrow_forward
-                </span>
-                <p className="text-xs font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">
-                  {t("comparisonCliToolsLabel")}
-                </p>
-              </div>
-              <p className="mb-1 text-sm font-medium text-text-main">
-                {t("comparisonCliToolsTitle")}
-              </p>
-              <p className="text-xs text-text-muted">{t("comparisonCliToolsDesc")}</p>
-              <div className="mt-3 flex flex-wrap items-center gap-1.5 text-[11px] font-mono text-blue-500">
-                <span>IDE</span>
-                <span className="material-symbols-outlined text-[12px]">arrow_forward</span>
-                <span>OmniRoute</span>
-                <span className="material-symbols-outlined text-[12px]">arrow_forward</span>
-                <span>Provider API</span>
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <span className="material-symbols-outlined text-[16px] text-emerald-500">
-                  arrow_back
-                </span>
-                <p className="text-xs font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
-                  {t("comparisonAgentsLabel")}
-                </p>
-              </div>
-              <p className="mb-1 text-sm font-medium text-text-main">
-                {t("comparisonAgentsTitle")}
-              </p>
-              <p className="text-xs text-text-muted">{t("comparisonAgentsDesc")}</p>
-              <div className="mt-3 flex flex-wrap items-center gap-1.5 text-[11px] font-mono text-emerald-500">
-                <span>Client</span>
-                <span className="material-symbols-outlined text-[12px]">arrow_forward</span>
-                <span>OmniRoute</span>
-                <span className="material-symbols-outlined text-[12px]">arrow_forward</span>
-                <span>CLI Binary</span>
-              </div>
-            </div>
-          </div>
-
-          <p className="text-xs text-text-muted">{t("comparisonSummary")}</p>
-        </div>
-      </Card>
+      <CliConceptCard currentType="acp" />
+      <CliComparisonCard currentType="acp" />
 
       {/* Summary Cards */}
       {summary && (
@@ -363,10 +198,10 @@ export default function AgentsPage() {
             <h3 className="text-lg font-semibold">{t("setupGuideTitle")}</h3>
           </div>
           <Link
-            href="/dashboard/cli-tools"
+            href="/dashboard/cli-code"
             className="text-xs px-2.5 py-1.5 rounded-lg border border-border/60 hover:bg-surface/40 transition-colors"
           >
-            {t("openCliTools")}
+            {t("cliCodeRedirectCta")}
           </Link>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3">

src/shared/constants/sidebarVisibility.ts

@@ -14,7 +14,7 @@ export const HIDEABLE_SIDEBAR_ITEM_IDS = [
   "context-combos",
   // OmniProxy > Tools
   "cli-tools",
-  "agents",
+  "acp-agents",
   "cloud-agents",
   // OmniProxy > Integrations
   "api-endpoints",
@@ -236,10 +236,10 @@ const TOOLS_GROUP: SidebarItemGroup = {
       icon: "terminal",
     },
     {
-      id: "agents",
-      href: "/dashboard/agents",
-      i18nKey: "agents",
-      subtitleKey: "agentsSubtitle",
+      id: "acp-agents",
+      href: "/dashboard/acp-agents",
+      i18nKey: "acpAgents",
+      subtitleKey: "acpAgentsSubtitle",
       icon: "smart_toy",
     },
     {
@@ -802,7 +802,7 @@ const DEVELOPER_SHOWN: ReadonlySet<HideableSidebarItemId> = new Set([
   "context-rtk",
   "context-combos",
   "cli-tools",
-  "agents",
+  "acp-agents",
   "api-endpoints",
   "analytics",
   "analytics-combo-health",

tests/unit/ui/AcpAgentsPage.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+
+let capturedTranslationsNamespace = "";
+
+vi.mock("next/link", () => ({
+  default: ({
+    href,
+    children,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: (ns: string) => {
+    capturedTranslationsNamespace = ns;
+    return (key: string) => key;
+  },
+}));
+
+vi.mock("@/shared/components", () => ({
+  Card: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-testid="card" {...props}>
+      {children}
+    </div>
+  ),
+  Button: ({
+    children,
+    onClick,
+    loading,
+    ...props
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean }) => (
+    <button onClick={onClick} disabled={loading} {...props}>
+      {children}
+    </button>
+  ),
+  Input: ({
+    label,
+    ...props
+  }: React.InputHTMLAttributes<HTMLInputElement> & { label?: string }) => (
+    <input aria-label={label} {...props} />
+  ),
+}));
+
+vi.mock("@/shared/components/ProviderIcon", () => ({
+  default: ({ providerId }: { providerId: string; size?: number; type?: string }) => (
+    <span data-testid="provider-icon" data-provider={providerId} />
+  ),
+}));
+
+vi.mock("@/shared/components/cli", () => ({
+  CliConceptCard: ({ currentType }: { currentType: string }) => (
+    <div data-testid="cli-concept-card" data-current-type={currentType} />
+  ),
+  CliComparisonCard: ({ currentType }: { currentType: string }) => (
+    <div data-testid="cli-comparison-card" data-current-type={currentType} />
+  ),
+}));
+
+// ── Fetch mock ────────────────────────────────────────────────────────────────
+
+const mockAgents = [
+  {
+    id: "claude-code",
+    name: "Claude Code",
+    binary: "claude",
+    version: "1.2.3",
+    installed: true,
+    protocol: "stdio",
+    isCustom: false,
+  },
+  {
+    id: "codex",
+    name: "Codex",
+    binary: "codex",
+    version: null,
+    installed: false,
+    protocol: "stdio",
+    isCustom: false,
+  },
+];
+
+const mockSummary = {
+  total: 2,
+  installed: 1,
+  notFound: 1,
+  builtIn: 2,
+  custom: 0,
+};
+
+const mockFetch = vi.fn().mockResolvedValue({
+  ok: true,
+  json: async () => ({ agents: mockAgents, summary: mockSummary }),
+});
+
+(globalThis as typeof globalThis & { fetch: typeof fetch }).fetch = mockFetch;
+
+// ── Import after mocks ────────────────────────────────────────────────────────
+
+const { default: AcpAgentsPage } = await import(
+  "@/app/(dashboard)/dashboard/acp-agents/page"
+);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const containers: HTMLElement[] = [];
+
+async function renderPage(): Promise<HTMLElement> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(<AcpAgentsPage />);
+  });
+  // Allow data-fetching effects to resolve
+  await act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+  });
+  return container;
+}
+
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+  capturedTranslationsNamespace = "";
+  mockFetch.mockClear();
+});
+
+afterEach(() => {
+  while (containers.length > 0) {
+    containers.pop()?.remove();
+  }
+  document.body.innerHTML = "";
+});
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("AcpAgentsPage", () => {
+  it("smoke: renders without crashing", async () => {
+    const container = await renderPage();
+    expect(container).toBeTruthy();
+    expect(container.innerHTML.length).toBeGreaterThan(0);
+  });
+
+  it("calls useTranslations with 'acpAgents' namespace", async () => {
+    await renderPage();
+    expect(capturedTranslationsNamespace).toBe("acpAgents");
+  });
+
+  it("renders <CliConceptCard currentType='acp' />", async () => {
+    const container = await renderPage();
+    const card = container.querySelector("[data-testid='cli-concept-card']");
+    expect(card).not.toBeNull();
+    expect(card?.getAttribute("data-current-type")).toBe("acp");
+  });
+
+  it("renders <CliComparisonCard currentType='acp' />", async () => {
+    const container = await renderPage();
+    const card = container.querySelector("[data-testid='cli-comparison-card']");
+    expect(card).not.toBeNull();
+    expect(card?.getAttribute("data-current-type")).toBe("acp");
+  });
+
+  it("cross-link points to /dashboard/cli-code (not /dashboard/cli-tools)", async () => {
+    const container = await renderPage();
+    const links = container.querySelectorAll("a");
+    const hrefs = Array.from(links).map((a) => a.getAttribute("href"));
+    const cliCodeLinks = hrefs.filter((h) => h === "/dashboard/cli-code");
+    const cliToolsLinks = hrefs.filter((h) => h === "/dashboard/cli-tools");
+    expect(cliCodeLinks.length).toBeGreaterThan(0);
+    expect(cliToolsLinks).toHaveLength(0);
+  });
+
+  it("agent grid renders with mocked /api/acp/agents response", async () => {
+    const container = await renderPage();
+    expect(mockFetch).toHaveBeenCalledWith("/api/acp/agents");
+    // Agent names from mock should appear somewhere in the rendered output
+    expect(container.textContent).toContain("Claude Code");
+    expect(container.textContent).toContain("Codex");
+  });
+});