feat(settings): add AI Router profiles and attach one per lane

A new **AI Router** tab in Settings, next to Codex, stores named router
endpoints (9Router, OpenRouter, a self-hosted gateway) as profiles: a base
URL, an API key, a default model and an optional per-tier override. The tab
only stores them; a lane CHOOSES one in the Add-lane modal, via a Native /
AI Router radio, and that choice is written into the lane's own config.

The two CLIs are configured differently, and the difference is theirs:

  - a claude lane gets eight `env` keys merged into its own
    `.claude/settings.local.json` (`.local` because the value holds a key);
  - a codex lane gets `$CODEX_HOME/<name>.config.toml` — the layer
    `codex -p <name>` loads — because Codex has NO project-level config.
    Its base `config.toml` is never touched.

Native is a built-in profile rather than a code branch, so "go back to
native" is the same write path. It blanks the two connection variables
instead of removing them (an absent key at project scope lets a USER-level
router apply) and removes the model names instead of writing them (writing
them would override the user's own global model choice).

Key material never leaves the server: profiles live one file each under
`<CLAUDE_HOME>/agenthub-routers/` (0700/0600), `GET /api/ai-routers`
reports only `hasKey`, and there is deliberately no route returning one
profile in full.

Three things this had to get right, each found by review and verified
against the real tools rather than assumed:

  - `wire_api = "chat"` is rejected outright by codex-cli 0.149 ("no longer
    supported"), so every codex lane on a router would have failed to start.
    The layer writes "responses", and writes `env_key` only when the profile
    actually has a key — naming an unset variable is itself a startup error.
  - The key must never be TYPED into a pane. `tmux.sendCommand` used
    `send-keys` with a `KEY='…' cmd` prefix, which the dashboard streams to
    every attached browser and bash appends to history; it now takes over the
    idle pane with `respawn-pane -k -e`, passing env through argv the way
    `newSession` always has. Verified on tmux 3.4: multi-element argv arrives
    intact and the pane renders no trace of the value.
  - Attaching COPIES a profile, so editing or deleting one in Settings has to
    reach the lanes already using it. An edit re-applies it (a rotated key
    would otherwise never reach the lane still holding the revoked one); a
    delete resets those lanes to native and removes the Codex layer file.
    Both report per-lane failures, which the tab surfaces.

`.claude/settings.local.json` is added to the lane's git exclude, for both
native and router lanes: `agenthub lanes reset` runs `git clean -fd` without
`-x`, so an un-excluded settings file is deleted on reset — and untracked
meant the key was committable.

DB: `lanes.router_profile`, nullable, additive. Written only by
`setRouterProfile` beside the disk write, never through `PATCHABLE`.

client/src/components/lanes/AddLaneModal.tsx

@@ -26,7 +26,7 @@ import { ConfirmModal } from "../ConfirmModal";
 import { CwdAutocomplete } from "../run/RunSetup";
 import { FolderBrowseModal } from "./FolderBrowseModal";
 import { api } from "../../lib/api";
-import type { CwdSuggestion } from "../../lib/api";
+import type { AiRouter, CwdSuggestion } from "../../lib/api";
 import type { Lane, LaneTool } from "../../lib/types";
 
 /** Polls the lane until the background `git worktree add` finishes (status
@@ -97,6 +97,10 @@ export function AddLaneModal({
   const [base, setBase] = useState("");
   const [pipeline, setPipeline] = useState("default");
   const [writeDocs, setWriteDocs] = useState(false);
+  // "native" is the built-in profile, not a null state — see server/lib/ai-routers.js.
+  const [router, setRouter] = useState("native");
+  const [routers, setRouters] = useState<AiRouter[]>([]);
+  const [routersLoaded, setRoutersLoaded] = useState(false);
   const [pipelines, setPipelines] = useState<{ id: string; name: string; nodes: unknown[] }[]>([]);
   const [branchesError, setBranchesError] = useState<string | null>(null);
   const [tool, setTool] = useState<LaneTool>("claude");
@@ -107,6 +111,7 @@ export function AddLaneModal({
     profile: "scaffolded" | "skipped" | "failed";
     agents: "ok" | "failed";
     mcp: "ok" | "failed";
+    router: "ok" | "skipped" | "failed";
   } | null>(null);
 
   const reset = () => {
@@ -118,6 +123,8 @@ export function AddLaneModal({
     setBase("");
     setPipeline("default");
     setWriteDocs(false);
+    setRouter("native");
+    setRoutersLoaded(false);
     setTool("claude");
     setBranchesError(null);
     setError(null);
@@ -142,6 +149,26 @@ export function AddLaneModal({
         // below, and the lane still gets created.
         if (!cancelled) setPipelines([]);
       });
+    api.aiRouters
+      .list()
+      .then((r) => {
+        if (cancelled) return;
+        setRouters(r.items);
+        // A profile deleted in another tab while this modal sat open would
+        // otherwise stay selected in state while the select showed no matching
+        // option — and submit would send a name the server no longer knows.
+        setRouter((current) =>
+          current === "native" || r.items.some((item) => item.name === current) ? current : "native"
+        );
+      })
+      .catch(() => {
+        // Quiet: with no list the radio simply offers Native, and the lane is
+        // still created — a router is an optional extra, never a precondition.
+        if (!cancelled) setRouters([]);
+      })
+      .finally(() => {
+        if (!cancelled) setRoutersLoaded(true);
+      });
     return () => {
       cancelled = true;
     };
@@ -189,6 +216,10 @@ export function AddLaneModal({
   const startDocsRun = (laneId: number, cwd: string) =>
     api.run.start({ laneId, cwd, initialPrompt: "/sg-all:sg-md-writing" });
 
+  // Native is the built-in profile, so this is one call either way — there is
+  // no "no router" branch to keep in step with the real one.
+  const applyRouter = (laneId: number) => api.lanes.routerApply(laneId, router);
+
   const submit = async () => {
     const repo = sourceRepo.trim();
     const name = title.trim();
@@ -204,8 +235,29 @@ export function AddLaneModal({
           pipeline,
           tool,
         });
-        if (writeDocs && tool === "claude") await startDocsRun(result.lane.id, result.lane.cwd);
+        // Report the lane the INSTANT it exists server-side. Everything after
+        // this is post-creation setup that can fail on its own, and letting one
+        // of those failures skip `onAdded` would leave a real lane invisible in
+        // the list until some unrelated refetch happened to pick it up.
+        // Worktree mode below already works this way.
         onAdded(result.lane);
+
+        // Router first: a session that booted on the vendor's API would keep
+        // talking to it for its whole life.
+        const [routerOutcome, docsOutcome] = await Promise.allSettled([
+          applyRouter(result.lane.id),
+          writeDocs && tool === "claude"
+            ? startDocsRun(result.lane.id, result.lane.cwd)
+            : Promise.resolve(null),
+        ]);
+        const failed = [routerOutcome, docsOutcome].find((o) => o.status === "rejected");
+        if (failed && failed.status === "rejected") {
+          // The lane exists and is already listed — name what did not finish
+          // instead of closing on a half-set-up lane.
+          setError(failed.reason instanceof Error ? failed.reason.message : String(failed.reason));
+          setBusy(false);
+          return;
+        }
         reset();
         onClose();
       } catch (err) {
@@ -239,10 +291,11 @@ export function AddLaneModal({
         return;
       }
 
-      const [profileOutcome, agentsOutcome, mcpOutcome] = await Promise.allSettled([
+      const [profileOutcome, agentsOutcome, mcpOutcome, routerOutcome] = await Promise.allSettled([
         api.lanes.profileInit(result.lane.id),
         api.lanes.agentsInstall(result.lane.id),
         api.lanes.mcpSync(result.lane.id),
+        applyRouter(result.lane.id),
       ]);
       setSetupResult({
         profile:
@@ -253,6 +306,8 @@ export function AddLaneModal({
             : "failed",
         agents: agentsOutcome.status === "fulfilled" ? "ok" : "failed",
         mcp: mcpOutcome.status === "fulfilled" ? "ok" : "failed",
+        router:
+          routerOutcome.status !== "fulfilled" ? "failed" : router === "native" ? "skipped" : "ok",
       });
 
       if (writeDocs && tool === "claude") {
@@ -265,6 +320,9 @@ export function AddLaneModal({
             profileOutcome.status === "fulfilled" ? profileOutcome.value : profileOutcome.reason,
           agents: agentsOutcome.status === "fulfilled" ? agentsOutcome.value : agentsOutcome.reason,
           mcp: mcpOutcome.status === "fulfilled" ? mcpOutcome.value : mcpOutcome.reason,
+          // Never the profile itself: it would put an endpoint and a lane id in
+          // the browser console. (The key is never sent here at all.)
+          router: routerOutcome.status,
         });
       }
 
@@ -407,6 +465,75 @@ export function AddLaneModal({
           <p className="mt-1 text-[10px] text-fg-muted">{t("addLanePipelineHint")}</p>
         </div>
 
+        <fieldset>
+          <legend className="mb-1 text-xs text-fg-secondary">{t("addLaneRouterLabel")}</legend>
+          <div className="flex gap-2">
+            {(
+              [
+                { value: "native", label: t("addLaneRouterNative") },
+                { value: "router", label: t("addLaneRouterCustom") },
+              ] as const
+            ).map((option) => {
+              const active = option.value === "native" ? router === "native" : router !== "native";
+              return (
+                <label
+                  key={option.value}
+                  className={`flex flex-1 cursor-pointer items-center gap-2 rounded-lg border p-2.5 text-xs shadow-sm transition-colors ${
+                    active
+                      ? "border-accent bg-accent/10 text-accent"
+                      : "border-border bg-surface-2 text-fg-secondary hover:border-border-light hover:bg-surface-3"
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="add-lane-router"
+                    className="h-3.5 w-3.5 accent-accent"
+                    // Clicking "AI Router" before the list lands would resolve
+                    // back to Native and read as a dead control.
+                    disabled={option.value === "router" && !routersLoaded}
+                    checked={active}
+                    onChange={() =>
+                      // Switching to "AI Router" lands on the first saved
+                      // profile; with none saved the radio stays on native and
+                      // the select below explains why.
+                      setRouter(
+                        option.value === "native"
+                          ? "native"
+                          : routers.find((r) => !r.builtin)?.name || "native"
+                      )
+                    }
+                  />
+                  {option.label}
+                </label>
+              );
+            })}
+          </div>
+
+          {router !== "native" && (
+            <select
+              aria-label={t("addLaneRouterProfileLabel")}
+              value={router}
+              onChange={(e) => setRouter(e.target.value)}
+              className="mt-2 w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-blue-500 focus:outline-none"
+            >
+              {routers
+                .filter((r) => !r.builtin)
+                .map((r) => (
+                  <option key={r.name} value={r.name}>
+                    {r.label}
+                  </option>
+                ))}
+            </select>
+          )}
+          <p className="mt-1 text-[10px] text-fg-muted">
+            {!routersLoaded
+              ? t("addLaneRouterLoading")
+              : routers.some((r) => !r.builtin)
+                ? t("addLaneRouterHint")
+                : t("addLaneRouterEmptyHint")}
+          </p>
+        </fieldset>
+
         {tool === "claude" && (
           <label
             // Card that lights up when ticked, matching LaneStripCard's
@@ -494,6 +621,11 @@ export function AddLaneModal({
                 },
                 { label: t("addLaneSetupAgents"), ok: setupResult.agents === "ok" },
                 { label: t("addLaneSetupMcp"), ok: setupResult.mcp === "ok" },
+                {
+                  label: t("addLaneSetupRouter"),
+                  ok: setupResult.router !== "failed",
+                  skipped: setupResult.router === "skipped",
+                },
               ] as const
             ).map((row) => (
               <p key={row.label} className="flex items-center gap-1.5 text-[11px] text-fg-primary">

client/src/components/lanes/__tests__/AddLaneModal.test.tsx

@@ -29,7 +29,9 @@ vi.mock("../../../lib/api", () => ({
       profileInit: vi.fn(),
       agentsInstall: vi.fn(),
       mcpSync: vi.fn(),
+      routerApply: vi.fn(),
     },
+    aiRouters: { list: vi.fn() },
     run: { start: vi.fn() },
   },
 }));
@@ -132,8 +134,49 @@ beforeEach(() => {
     .mockResolvedValue({ scaffolded: false, reason: "no detectable Node.js project" });
   vi.mocked(api.lanes.agentsInstall).mockReset().mockResolvedValue({ installed: [] });
   vi.mocked(api.lanes.mcpSync).mockReset().mockResolvedValue({ servers: [], profilesSeeded: [] });
+  vi.mocked(api.lanes.routerApply)
+    .mockReset()
+    .mockResolvedValue({ tool: "claude", file: null, profile: "native" });
+  // Only the built-in profile by default, so the router radio stays on Native
+  // and no test has to opt out of it.
+  vi.mocked(api.aiRouters.list)
+    .mockReset()
+    .mockResolvedValue({ items: [nativeRouter()] });
 });
 
+/** The built-in profile, exactly as `GET /api/ai-routers` reports it. */
+function nativeRouter() {
+  return {
+    name: "native",
+    label: "Native (Claude / Codex)",
+    builtin: true,
+    baseUrl: "",
+    hasKey: false,
+    model: "claude-sonnet-5",
+    models: {
+      opus: "claude-opus-5",
+      sonnet: "claude-sonnet-5",
+      haiku: "claude-haiku-4-5-20251001",
+      smallFast: "claude-haiku-4-5-20251001",
+      subagent: "claude-haiku-4-5-20251001",
+    },
+  };
+}
+
+/** A saved router profile, for the tests that need the radio to have a target. */
+function savedRouter(over: Record<string, unknown> = {}) {
+  return {
+    ...nativeRouter(),
+    name: "9router",
+    label: "9Router",
+    builtin: false,
+    hasKey: true,
+    baseUrl: "http://localhost:20128/v1",
+    model: "Highest",
+    ...over,
+  };
+}
+
 describe("AddLaneModal — worktree mode (default)", () => {
   it("disables confirm until a repo, a title, a resolved branch list, and a new branch name are all present", () => {
     renderModal();
@@ -435,6 +478,137 @@ describe("AddLaneModal — create/update readme", () => {
   });
 });
 
+describe("AddLaneModal — AI Router", () => {
+  it("applies native without asking, so a lane always has a declared endpoint", async () => {
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(9, "native"));
+  });
+
+  it("sends the picked profile once AI Router is chosen", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter(), savedRouter()] });
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(9, "9router"));
+  });
+
+  it("keeps the radio on Native when no profile is saved, and says why", async () => {
+    // Choosing "AI Router" with nothing to point at would create a lane whose
+    // declared endpoint does not exist.
+    renderModal();
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+
+    expect(screen.getByRole("radio", { name: "Native" })).toBeChecked();
+    expect(screen.getByText(/No router profile saved yet/)).toBeInTheDocument();
+  });
+
+  it("creates the lane anyway when the profile list cannot be fetched", async () => {
+    vi.mocked(api.aiRouters.list).mockRejectedValue(new Error("offline"));
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(api.lanes.ensure).toHaveBeenCalled());
+  });
+});
+
+describe("AddLaneModal — a created lane is never lost to a setup failure", () => {
+  it("reports the adopted lane even when applying the router fails", async () => {
+    // `ensure` already created it server-side; skipping onAdded would hide a
+    // real lane from the list until some unrelated refetch found it.
+    vi.mocked(api.lanes.routerApply).mockRejectedValue(new Error("no router profile named 'gone'"));
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    const onAdded = vi.fn();
+    renderModal({ onAdded });
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(onAdded).toHaveBeenCalled());
+    // …and the failure is still surfaced, on a modal left open.
+    expect(await screen.findByText(/no router profile named/)).toBeInTheDocument();
+  });
+});
+
+describe("AddLaneModal — a router profile that disappeared", () => {
+  it("falls back to Native when the saved profile is gone by the time the list loads", async () => {
+    // Deleted in another tab while this modal sat open: the select would show
+    // no matching option while state still held the dead name.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter(), savedRouter()] });
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    const { rerender } = renderModal();
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeChecked();
+
+    // Re-open with the profile gone from the server's answer.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter()] });
+    rerender(<AddLaneModal open={false} onClose={vi.fn()} onAdded={vi.fn()} cwdSuggestions={[]} />);
+    rerender(<AddLaneModal open onClose={vi.fn()} onAdded={vi.fn()} cwdSuggestions={[]} />);
+
+    await waitFor(() => expect(screen.getByRole("radio", { name: "Native" })).toBeChecked());
+  });
+
+  it("does not offer AI Router until the profile list has arrived", async () => {
+    // Clicking it early resolved back to Native with no feedback, which reads
+    // as a dead control.
+    let resolveList: (v: { items: ReturnType<typeof nativeRouter>[] }) => void = () => {};
+    vi.mocked(api.aiRouters.list).mockReturnValue(
+      new Promise((resolve) => {
+        resolveList = resolve;
+      }) as never
+    );
+    renderModal();
+
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeDisabled();
+    resolveList({ items: [nativeRouter(), savedRouter()] });
+    await waitFor(() => expect(screen.getByRole("radio", { name: "AI Router" })).toBeEnabled());
+  });
+});
+
 describe("AddLaneModal — pipeline template", () => {
   it("offers every template the server reports and sends the chosen one when adopting a repo", async () => {
     // Creation is the ONLY point the UI can set a template, so a lane born on

client/src/i18n/locales/en/lanes.json

@@ -134,5 +134,13 @@
   "splitView.pickLane": "Pick a lane",
   "statusDead": "DEAD",
   "title": "Lanes",
-  "tooltipStart": "Spawn a conversation-mode run with no initial prompt; driven from CLI or via message"
+  "tooltipStart": "Spawn a conversation-mode run with no initial prompt; driven from CLI or via message",
+  "addLaneRouterLabel": "Model endpoint",
+  "addLaneRouterNative": "Native",
+  "addLaneRouterCustom": "AI Router",
+  "addLaneRouterProfileLabel": "Router profile",
+  "addLaneRouterHint": "Native talks to the vendor's own API. An AI Router profile is written into this lane's own config when it is created.",
+  "addLaneRouterEmptyHint": "No router profile saved yet — add one under Settings › AI Router.",
+  "addLaneSetupRouter": "Model endpoint",
+  "addLaneRouterLoading": "Loading router profiles…"
 }

client/src/i18n/locales/en/settings.json

@@ -445,6 +445,45 @@
     "label": "Tools",
     "dashboard": "Dashboard",
     "claudeCode": "Claude Code",
-    "codex": "Codex"
+    "codex": "Codex",
+    "aiRouter": "AI Router"
+  },
+  "aiRouter": {
+    "title": "AI Router",
+    "description": "Endpoints that stand in front of Claude Code and Codex — 9Router, OpenRouter, a self-hosted gateway. Save one here, then pick it when you create a lane.",
+    "add": "Add profile",
+    "edit": "Edit",
+    "remove": "Remove",
+    "empty": "No router profile saved yet. Native runs against the vendor's own API.",
+    "builtinHint": "Built in — this is the vendor's own API, and it cannot be edited or removed.",
+    "colLabel": "Profile",
+    "colBaseUrl": "Endpoint",
+    "colModel": "Model",
+    "colKey": "API key",
+    "keySet": "Saved",
+    "keyMissing": "None",
+    "fieldLabel": "Name",
+    "fieldLabelHint": "What you will see in the lane form. Free text.",
+    "fieldBaseUrl": "Base URL",
+    "fieldBaseUrlHint": "The router's OpenAI/Anthropic-compatible endpoint, e.g. http://localhost:20128/v1",
+    "fieldApiKey": "API key",
+    "fieldApiKeyHint": "Stored on this machine at 0600 and never sent back to the browser.",
+    "fieldApiKeyKeep": "Leave blank to keep the saved key.",
+    "fieldModel": "Model",
+    "fieldModelHint": "Used for every tier unless you override one below. Many routers accept one symbolic name.",
+    "perTier": "Per-tier overrides",
+    "perTierHint": "Leave a field blank to use the model above.",
+    "tier": {
+      "opus": "Opus",
+      "sonnet": "Sonnet",
+      "haiku": "Haiku",
+      "smallFast": "Small / fast",
+      "subagent": "Subagent"
+    },
+    "save": "Save",
+    "cancel": "Cancel",
+    "removeConfirm": "Remove the profile \"{{label}}\"? Every lane using it is reset to the vendor's own API right away — on disk and in the dashboard.",
+    "loading": "Loading profiles…",
+    "lanesFailed": "Saved, but {{count}} lane could not be updated and still carries the old endpoint: {{lanes}}"
   }
 }

client/src/i18n/locales/vi/lanes.json

@@ -134,5 +134,13 @@
   "splitView.pickLane": "Chọn lane",
   "statusDead": "ĐÃ CHẾT",
   "title": "Làn đường",
-  "tooltipStart": "Tạo một lần chạy ở chế độ hội thoại mà không có lời nhắc ban đầu; được điều khiển từ CLI hoặc qua tin nhắn"
+  "tooltipStart": "Tạo một lần chạy ở chế độ hội thoại mà không có lời nhắc ban đầu; được điều khiển từ CLI hoặc qua tin nhắn",
+  "addLaneRouterLabel": "Endpoint model",
+  "addLaneRouterNative": "Native",
+  "addLaneRouterCustom": "AI Router",
+  "addLaneRouterProfileLabel": "Profile router",
+  "addLaneRouterHint": "Native là gọi thẳng API của hãng. Chọn profile AI Router thì cấu hình được ghi vào config riêng của lane này lúc tạo.",
+  "addLaneRouterEmptyHint": "Chưa lưu profile router nào — thêm ở Settings › AI Router.",
+  "addLaneSetupRouter": "Endpoint model",
+  "addLaneRouterLoading": "Đang tải danh sách router…"
 }

client/src/i18n/locales/vi/settings.json

@@ -445,6 +445,45 @@
     "label": "Công cụ",
     "dashboard": "Dashboard",
     "claudeCode": "Claude Code",
-    "codex": "Codex"
+    "codex": "Codex",
+    "aiRouter": "AI Router"
+  },
+  "aiRouter": {
+    "title": "AI Router",
+    "description": "Các endpoint đứng trước Claude Code và Codex — 9Router, OpenRouter, hoặc gateway tự dựng. Lưu ở đây rồi chọn lúc tạo lane.",
+    "add": "Thêm profile",
+    "edit": "Sửa",
+    "remove": "Xoá",
+    "empty": "Chưa lưu profile router nào. Native là chạy thẳng vào API của hãng.",
+    "builtinHint": "Dựng sẵn — đây là API của chính hãng, không sửa và không xoá được.",
+    "colLabel": "Profile",
+    "colBaseUrl": "Endpoint",
+    "colModel": "Model",
+    "colKey": "API key",
+    "keySet": "Đã lưu",
+    "keyMissing": "Chưa có",
+    "fieldLabel": "Tên",
+    "fieldLabelHint": "Tên bạn sẽ thấy trong form tạo lane. Gõ tự do.",
+    "fieldBaseUrl": "Base URL",
+    "fieldBaseUrlHint": "Endpoint tương thích OpenAI/Anthropic của router, ví dụ http://localhost:20128/v1",
+    "fieldApiKey": "API key",
+    "fieldApiKeyHint": "Lưu trên máy này ở quyền 0600, không bao giờ gửi ngược về trình duyệt.",
+    "fieldApiKeyKeep": "Để trống nếu muốn giữ key đã lưu.",
+    "fieldModel": "Model",
+    "fieldModelHint": "Dùng cho mọi bậc trừ khi bạn ghi đè bên dưới. Nhiều router chỉ cần một tên tượng trưng.",
+    "perTier": "Ghi đè theo từng bậc",
+    "perTierHint": "Để trống một ô là dùng model ở trên.",
+    "tier": {
+      "opus": "Opus",
+      "sonnet": "Sonnet",
+      "haiku": "Haiku",
+      "smallFast": "Nhỏ / nhanh",
+      "subagent": "Subagent"
+    },
+    "save": "Lưu",
+    "cancel": "Huỷ",
+    "removeConfirm": "Xoá profile \"{{label}}\"? Mọi lane đang dùng nó sẽ được đưa về API gốc của hãng ngay lập tức — cả trên đĩa lẫn trong dashboard.",
+    "loading": "Đang tải danh sách profile…",
+    "lanesFailed": "Đã lưu, nhưng {{count}} lane không cập nhật được và vẫn đang giữ endpoint cũ: {{lanes}}"
   }
 }

client/src/lib/api.ts

@@ -1868,6 +1868,40 @@ export const api = {
       }),
   },
 
+  // ──────────────────────────────── AI Router API ─────────────────────────────
+  /** Named AI Router endpoints (9Router, OpenRouter, a self-hosted gateway) a
+   *  lane can be pointed at instead of the vendor's own API. Managed in the
+   *  **AI Router** tab of Settings; attached to a lane when the lane is created.
+   *
+   *  No response here ever carries an API key — a saved profile reports only
+   *  `hasKey`. */
+  aiRouters: {
+    /** GET /api/ai-routers - every profile, the built-in `native` one first. */
+    list: () => request<{ items: AiRouter[] }>("/ai-routers"),
+    /** POST /api/ai-routers - save a new profile. */
+    create: (body: AiRouterInput) =>
+      request<AiRouter>("/ai-routers", { method: "POST", body: JSON.stringify(body) }),
+    /**
+     * PATCH /api/ai-routers/:name - change a saved profile. Omitting `apiKey`
+     * keeps the stored one, which is what the edit form always does: it cannot
+     * display a key, so it has none to send back.
+     */
+    update: (name: string, body: Partial<AiRouterInput>) =>
+      request<AiRouter & { lanes: AiRouterLaneSync }>(`/ai-routers/${encodeURIComponent(name)}`, {
+        method: "PATCH",
+        body: JSON.stringify(body),
+      }),
+    /**
+     * DELETE /api/ai-routers/:name - also resets every lane using it back to
+     * native, on disk as well as in the DB.
+     */
+    remove: (name: string) =>
+      request<{ removed: string; lanes: AiRouterLaneSync }>(
+        `/ai-routers/${encodeURIComponent(name)}`,
+        { method: "DELETE" }
+      ),
+  },
+
   // ────────────────────────────────── Run API ─────────────────────────────────
   /** Spawn/manage headless or conversational `claude` CLI child processes
    *  launched from the dashboard's Run page, and stream their output. */
@@ -2434,6 +2468,16 @@ export const api = {
         method: "POST",
         body: "{}",
       }),
+    /**
+     * POST /lanes/:id/router/apply - point this lane at an AI Router profile,
+     * or back at `native`. Writes the lane's own config on disk; only the
+     * profile NAME comes from here.
+     */
+    routerApply: (id: number, profile: string) =>
+      request<{ tool: string; file: string | null; profile: string }>(`/lanes/${id}/router/apply`, {
+        method: "POST",
+        body: JSON.stringify({ profile }),
+      }),
     mcpSync: (id: number) =>
       request<{ servers: string[]; profilesSeeded: string[] }>(`/lanes/${id}/mcp/sync`, {
         method: "POST",
@@ -2609,6 +2653,53 @@ export interface CcProfile extends CcAccountIdentity {
  *  user + project scope in one response. */
 export type CcScope = "user" | "project" | "all";
 
+/** The per-tier model names an AI Router profile carries. Each maps to one env
+ *  var Claude Code reads; a router that names its models once fills them all
+ *  from the profile's `model`. */
+export interface AiRouterModels {
+  opus: string;
+  sonnet: string;
+  haiku: string;
+  smallFast: string;
+  subagent: string;
+}
+
+/** One saved AI Router profile, as the API returns it — **never** with a key. */
+export interface AiRouter {
+  /** Identifier, derived from the label. Stable: a lane stores this. */
+  name: string;
+  label: string;
+  /** True only for the read-only `native` profile (the vendor's own API). */
+  builtin: boolean;
+  /** Empty string for `native`, an http(s) URL otherwise. */
+  baseUrl: string;
+  /** Whether a key is stored. The key itself never leaves the server. */
+  hasKey: boolean;
+  model: string;
+  models: AiRouterModels;
+  savedAt?: string;
+}
+
+/** How an edit or a delete landed on the lanes already using that profile.
+ *  Attaching copies a profile, so the store alone is not the whole truth: a
+ *  lane listed in `failed` still carries the OLD key and endpoint. */
+export interface AiRouterLaneSync {
+  updated: number;
+  /** One `"<id> (<title>): <code>"` line per lane that could not be rewritten. */
+  failed: string[];
+}
+
+/** Body accepted when creating or updating a profile. */
+export interface AiRouterInput {
+  label: string;
+  baseUrl: string;
+  /** Omit on update to keep the stored key. */
+  apiKey?: string;
+  model: string;
+  /** Any tier left out is filled from `model`. */
+  models?: Partial<AiRouterModels>;
+}
+
 /** One markdown-based config artifact (skill/agent/command/output-style),
  *  as summarized by the `ccConfig` list endpoints. The list endpoints return
  *  a lightweight summary (frontmatter + a preview) rather than full contents;

client/src/pages/AiRouterConfig.tsx

@@ -0,0 +1,393 @@
+/**
+ * @file AiRouterConfig.tsx
+ * @description The **AI Router** tab of Settings — CRUD for the named router
+ * endpoints (9Router, OpenRouter, a self-hosted gateway) a lane can be pointed
+ * at instead of the vendor's own API.
+ *
+ * A lane CHOOSES its router in the Add-lane modal, not here. But choosing one
+ * copies it into that lane's own config, so editing or deleting a profile here
+ * does reach every lane already using it — the server re-applies it, or resets
+ * those lanes to native, and reports any lane it could not touch. That report
+ * is surfaced: a rotated key that silently missed two lanes would leave the
+ * user believing a revoked key is out of use when it is not.
+ *
+ * The built-in `native` row is rendered read-only: it is the vendor's own API,
+ * and it exists so that "go back to native" is the same operation as "use a
+ * router" rather than a special case.
+ *
+ * An API key is write-only here by design — the server never returns one, so
+ * the form shows whether a key is saved, never the key.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Plus, Pencil, Trash2, Router as RouterIcon, Lock } from "lucide-react";
+import { api, type AiRouter, type AiRouterInput, type AiRouterModels } from "../lib/api";
+
+const TIERS: (keyof AiRouterModels)[] = ["opus", "sonnet", "haiku", "smallFast", "subagent"];
+
+type FormState = Omit<AiRouterInput, "apiKey" | "models"> & {
+  apiKey: string;
+  models: Partial<AiRouterModels>;
+};
+
+const emptyForm = (): FormState => ({
+  label: "",
+  baseUrl: "",
+  apiKey: "",
+  model: "",
+  models: {},
+});
+
+export function AiRouterConfig() {
+  const { t } = useTranslation("settings");
+  const [items, setItems] = useState<AiRouter[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  // Not an error — the profile itself saved. It is the lanes that did not all
+  // follow, which the user must be told about rather than left to assume.
+  const [laneWarning, setLaneWarning] = useState<string | null>(null);
+  const [editing, setEditing] = useState<AiRouter | null>(null);
+  const [form, setForm] = useState(emptyForm());
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  // Distinct from "no profiles": an empty table rendered before the first fetch
+  // resolves tells the user their profiles are gone. CodexConfig draws the same
+  // distinction for the same reason.
+  const [loading, setLoading] = useState(true);
+
+  // No dependencies, deliberately. `t` is NOT one: react-i18next returns a
+  // stable `t`, but nothing in this component's contract guarantees that, and
+  // the moment it changes identity per render this callback does too — which
+  // re-fires the effect below, which calls load(), which renders again. That
+  // loop also clears `error` on every pass, so a failed save would flash and
+  // vanish. Keeping the message untranslated is the cheaper half of the trade.
+  const load = useCallback(async () => {
+    try {
+      setItems((await api.aiRouters.list()).items);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const startAdd = () => {
+    setEditing(null);
+    setForm(emptyForm());
+    setOpen(true);
+  };
+
+  const startEdit = (item: AiRouter) => {
+    setEditing(item);
+    // No apiKey: the server never sent one. Blank means "keep what is stored".
+    setForm({
+      label: item.label,
+      baseUrl: item.baseUrl,
+      apiKey: "",
+      model: item.model,
+      models: { ...item.models },
+    });
+    setOpen(true);
+  };
+
+  /** Report any lane the server could not re-point, or clear a stale report. */
+  const reportLanes = (lanes?: { updated: number; failed: string[] }) => {
+    setLaneWarning(
+      lanes && lanes.failed.length
+        ? t("aiRouter.lanesFailed", { count: lanes.failed.length, lanes: lanes.failed.join(", ") })
+        : null
+    );
+  };
+
+  const submit = async () => {
+    setBusy(true);
+    setError(null);
+    setLaneWarning(null);
+    try {
+      // Send only the tiers that differ from the headline model, so the server
+      // keeps filling the rest from it — that is what makes one symbolic name
+      // enough for a router that wants the same value everywhere.
+      const models: Partial<AiRouterModels> = {};
+      for (const tier of TIERS) {
+        const value = (form.models[tier] || "").trim();
+        if (value && value !== form.model.trim()) models[tier] = value;
+      }
+      const body: AiRouterInput = {
+        label: form.label.trim(),
+        baseUrl: form.baseUrl.trim(),
+        model: form.model.trim(),
+        models,
+      };
+      if (form.apiKey.trim()) body.apiKey = form.apiKey.trim();
+
+      if (editing) reportLanes((await api.aiRouters.update(editing.name, body)).lanes);
+      else await api.aiRouters.create(body);
+
+      setOpen(false);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async (item: AiRouter) => {
+    if (!window.confirm(t("aiRouter.removeConfirm", { label: item.label }))) return;
+    setError(null);
+    setLaneWarning(null);
+    try {
+      reportLanes((await api.aiRouters.remove(item.name)).lanes);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h2 className="flex items-center gap-2 text-sm font-semibold text-fg-primary">
+            <RouterIcon className="h-4 w-4 text-fg-muted" />
+            {t("aiRouter.title")}
+          </h2>
+          <p className="mt-1 max-w-2xl text-xs text-fg-muted">{t("aiRouter.description")}</p>
+        </div>
+        <button
+          type="button"
+          onClick={startAdd}
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-accent/40 bg-accent/15 px-3 py-1.5 text-xs font-medium text-accent transition-colors hover:bg-accent/25"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {t("aiRouter.add")}
+        </button>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+
+      {laneWarning && (
+        <p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-3 py-2 text-xs text-status-warning">
+          {laneWarning}
+        </p>
+      )}
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        <table className="w-full text-left text-xs">
+          <thead className="bg-surface-2 text-[10px] uppercase tracking-wider text-fg-muted">
+            <tr>
+              <th className="px-3 py-2 font-medium">{t("aiRouter.colLabel")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiRouter.colBaseUrl")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiRouter.colModel")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiRouter.colKey")}</th>
+              <th className="px-3 py-2" />
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item) => (
+              <tr key={item.name} className="border-t border-border">
+                <td className="px-3 py-2">
+                  <span className="flex items-center gap-1.5 font-medium text-fg-primary">
+                    {item.builtin && <Lock className="h-3 w-3 text-fg-muted" />}
+                    {item.label}
+                  </span>
+                  {item.builtin && (
+                    <span className="mt-0.5 block text-[10px] text-fg-muted">
+                      {t("aiRouter.builtinHint")}
+                    </span>
+                  )}
+                </td>
+                <td className="px-3 py-2 font-mono text-[11px] text-fg-secondary">
+                  {item.baseUrl || "—"}
+                </td>
+                <td className="px-3 py-2 font-mono text-[11px] text-fg-secondary">{item.model}</td>
+                <td className="px-3 py-2 text-fg-secondary">
+                  {item.builtin
+                    ? "—"
+                    : item.hasKey
+                      ? t("aiRouter.keySet")
+                      : t("aiRouter.keyMissing")}
+                </td>
+                <td className="px-3 py-2 text-right">
+                  {!item.builtin && (
+                    <span className="inline-flex gap-1">
+                      <button
+                        type="button"
+                        aria-label={`${t("aiRouter.edit")} ${item.label}`}
+                        onClick={() => startEdit(item)}
+                        className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary"
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        aria-label={`${t("aiRouter.remove")} ${item.label}`}
+                        onClick={() => remove(item)}
+                        className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-status-danger"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {(loading || items.length <= 1) && (
+              <tr className="border-t border-border">
+                <td colSpan={5} className="px-3 py-4 text-center text-fg-muted">
+                  {loading ? t("aiRouter.loading") : t("aiRouter.empty")}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+          role="presentation"
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-label={editing ? t("aiRouter.edit") : t("aiRouter.add")}
+            className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
+          >
+            <h3 className="mb-3 text-sm font-semibold text-fg-primary">
+              {editing ? t("aiRouter.edit") : t("aiRouter.add")}
+            </h3>
+
+            <div className="space-y-3">
+              <Field
+                id="router-label"
+                label={t("aiRouter.fieldLabel")}
+                hint={t("aiRouter.fieldLabelHint")}
+                value={form.label}
+                onChange={(v) => setForm((f) => ({ ...f, label: v }))}
+              />
+              <Field
+                id="router-base-url"
+                label={t("aiRouter.fieldBaseUrl")}
+                hint={t("aiRouter.fieldBaseUrlHint")}
+                value={form.baseUrl}
+                mono
+                onChange={(v) => setForm((f) => ({ ...f, baseUrl: v }))}
+              />
+              <Field
+                id="router-api-key"
+                label={t("aiRouter.fieldApiKey")}
+                hint={
+                  editing && editing.hasKey
+                    ? t("aiRouter.fieldApiKeyKeep")
+                    : t("aiRouter.fieldApiKeyHint")
+                }
+                value={form.apiKey}
+                type="password"
+                mono
+                onChange={(v) => setForm((f) => ({ ...f, apiKey: v }))}
+              />
+              <Field
+                id="router-model"
+                label={t("aiRouter.fieldModel")}
+                hint={t("aiRouter.fieldModelHint")}
+                value={form.model}
+                mono
+                onChange={(v) => setForm((f) => ({ ...f, model: v }))}
+              />
+
+              <details className="rounded-lg border border-border bg-surface-2 p-2">
+                <summary className="cursor-pointer text-xs text-fg-secondary">
+                  {t("aiRouter.perTier")}
+                </summary>
+                <p className="mt-1 text-[10px] text-fg-muted">{t("aiRouter.perTierHint")}</p>
+                <div className="mt-2 space-y-2">
+                  {TIERS.map((tier) => (
+                    <Field
+                      key={tier}
+                      id={`router-model-${tier}`}
+                      label={t(`aiRouter.tier.${tier}`)}
+                      value={form.models[tier] || ""}
+                      mono
+                      placeholder={form.model}
+                      onChange={(v) =>
+                        setForm((f) => ({ ...f, models: { ...f.models, [tier]: v } }))
+                      }
+                    />
+                  ))}
+                </div>
+              </details>
+            </div>
+
+            <div className="mt-4 flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded-md px-3 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-3"
+              >
+                {t("aiRouter.cancel")}
+              </button>
+              <button
+                type="button"
+                onClick={submit}
+                disabled={busy || !form.label.trim() || !form.baseUrl.trim() || !form.model.trim()}
+                className="rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent/90 disabled:opacity-50"
+              >
+                {t("aiRouter.save")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Field({
+  id,
+  label,
+  hint,
+  value,
+  onChange,
+  mono,
+  type = "text",
+  placeholder,
+}: {
+  id: string;
+  label: string;
+  hint?: string;
+  value: string;
+  onChange: (value: string) => void;
+  mono?: boolean;
+  type?: string;
+  placeholder?: string;
+}) {
+  return (
+    <div>
+      <label className="mb-1 block text-xs text-fg-secondary" htmlFor={id}>
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        className={`w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary placeholder:text-fg-muted focus:border-blue-500 focus:outline-none ${
+          mono ? "font-mono" : ""
+        }`}
+      />
+      {hint && <p className="mt-1 text-[10px] text-fg-muted">{hint}</p>}
+    </div>
+  );
+}

client/src/pages/SettingsHub.tsx

@@ -1,16 +1,17 @@
 /**
  * @file SettingsHub.tsx
- * @description Tabbed shell for /settings that hosts the dashboard's own settings plus one configuration panel per AI tool (Claude Code and Codex), with the active tab kept in the `?tool=` query param.
+ * @description Tabbed shell for /settings that hosts the dashboard's own settings plus one configuration panel per AI tool (Claude Code and Codex) plus the AI Router profiles they can be pointed at, with the active tab kept in the `?tool=` query param.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import type { ComponentType } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Boxes, Settings as SettingsIcon, SquareTerminal } from "lucide-react";
+import { Boxes, Router, Settings as SettingsIcon, SquareTerminal } from "lucide-react";
 import { PageTabs } from "../components/PageTabs";
 import { Settings } from "./Settings";
 import { CcConfig } from "./CcConfig";
 import { CodexConfig } from "./CodexConfig";
+import { AiRouterConfig } from "./AiRouterConfig";
 
 interface ToolTab {
   id: string;
@@ -31,6 +32,7 @@ const TOOL_TABS: ToolTab[] = [
   DASHBOARD_TAB,
   { id: "claude-code", labelKey: "tools.claudeCode", Icon: Boxes, Panel: CcConfig },
   { id: "codex", labelKey: "tools.codex", Icon: SquareTerminal, Panel: CodexConfig },
+  { id: "ai-router", labelKey: "tools.aiRouter", Icon: Router, Panel: AiRouterConfig },
 ];
 
 /**

client/src/pages/__tests__/AiRouterConfig.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * @file Tests for the AI Router settings tab — listing profiles, creating one,
+ * and the two rules that keep a key safe: the form never shows one, and an
+ * edit that leaves the field blank must not send an empty key that would wipe
+ * the stored one.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AiRouterConfig } from "../AiRouterConfig";
+import { api } from "../../lib/api";
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    aiRouters: { list: vi.fn(), create: vi.fn(), update: vi.fn(), remove: vi.fn() },
+  },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: Record<string, unknown>) =>
+      opts && typeof opts.label === "string" ? `${key}:${opts.label}` : key,
+  }),
+}));
+
+const native = {
+  name: "native",
+  label: "Native (Claude / Codex)",
+  builtin: true,
+  baseUrl: "",
+  hasKey: false,
+  model: "claude-sonnet-5",
+  models: {
+    opus: "claude-opus-5",
+    sonnet: "claude-sonnet-5",
+    haiku: "claude-haiku-4-5-20251001",
+    smallFast: "claude-haiku-4-5-20251001",
+    subagent: "claude-haiku-4-5-20251001",
+  },
+};
+
+const nineRouter = {
+  ...native,
+  name: "9router",
+  label: "9Router",
+  builtin: false,
+  baseUrl: "http://localhost:20128/v1",
+  hasKey: true,
+  model: "Highest",
+  models: {
+    opus: "Highest",
+    sonnet: "Highest",
+    haiku: "Highest",
+    smallFast: "Highest",
+    subagent: "Highest",
+  },
+};
+
+beforeEach(() => {
+  vi.mocked(api.aiRouters.list)
+    .mockReset()
+    .mockResolvedValue({ items: [native] });
+  vi.mocked(api.aiRouters.create).mockReset().mockResolvedValue(nineRouter);
+  vi.mocked(api.aiRouters.update)
+    .mockReset()
+    .mockResolvedValue({ ...nineRouter, lanes: { updated: 0, failed: [] } });
+  vi.mocked(api.aiRouters.remove)
+    .mockReset()
+    .mockResolvedValue({ removed: "9router", lanes: { updated: 0, failed: [] } });
+});
+
+describe("AiRouterConfig", () => {
+  it("lists the built-in native profile with no edit or delete control", async () => {
+    render(<AiRouterConfig />);
+    expect(await screen.findByText("Native (Claude / Codex)")).toBeInTheDocument();
+    expect(screen.queryByLabelText(/aiRouter\.edit Native/)).toBeNull();
+    expect(screen.queryByLabelText(/aiRouter\.remove Native/)).toBeNull();
+  });
+
+  it("saves a new profile with the typed endpoint, key and model", async () => {
+    render(<AiRouterConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
+    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router");
+    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiRouter.fieldApiKey"), "sk-typed");
+    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
+    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
+
+    await waitFor(() =>
+      expect(api.aiRouters.create).toHaveBeenCalledWith({
+        label: "9Router",
+        baseUrl: "http://localhost:20128/v1",
+        model: "Highest",
+        // Every tier equals the headline model, so none is sent: the server
+        // fills them, which is what makes one field enough.
+        models: {},
+        apiKey: "sk-typed",
+      })
+    );
+  });
+
+  it("sends only the tiers that differ from the headline model", async () => {
+    render(<AiRouterConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
+    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router");
+    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
+    await user.type(screen.getByLabelText("aiRouter.tier.opus"), "PremiumCombo");
+    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
+
+    await waitFor(() =>
+      expect(api.aiRouters.create).toHaveBeenCalledWith(
+        expect.objectContaining({ models: { opus: "PremiumCombo" } })
+      )
+    );
+  });
+
+  it("never puts a stored key in the edit form, and omits it when left blank", async () => {
+    // The API cannot return a key, so an edit that sends `apiKey: ""` would
+    // silently erase the one on disk.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<AiRouterConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByLabelText("aiRouter.edit 9Router"));
+    expect(screen.getByLabelText("aiRouter.fieldApiKey")).toHaveValue("");
+
+    await user.clear(screen.getByLabelText("aiRouter.fieldLabel"));
+    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router nhà");
+    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
+
+    await waitFor(() => expect(api.aiRouters.update).toHaveBeenCalled());
+    const call = vi.mocked(api.aiRouters.update).mock.calls[0];
+    expect(call?.[1]).not.toHaveProperty("apiKey");
+  });
+
+  it("warns when a rotated key did not reach every lane using the profile", async () => {
+    // The whole point of pushing an edit out to the lanes is that a revoked key
+    // stops being used. A lane that silently kept the old one must be named,
+    // or the user believes a rotation is complete when it is not.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.aiRouters.update).mockResolvedValue({
+      ...nineRouter,
+      lanes: { updated: 1, failed: ["7 (checkout): EBADJSON"] },
+    });
+    render(<AiRouterConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByLabelText("aiRouter.edit 9Router"));
+    await user.type(screen.getByLabelText("aiRouter.fieldApiKey"), "sk-rotated");
+    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
+
+    expect(await screen.findByText("aiRouter.lanesFailed")).toBeInTheDocument();
+  });
+
+  it("surfaces a server error instead of closing the form", async () => {
+    vi.mocked(api.aiRouters.create).mockRejectedValue(
+      new Error("baseUrl must be http:// or https://")
+    );
+    render(<AiRouterConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
+    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "Bad");
+    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "file:///etc/passwd");
+    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "x");
+    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
+
+    expect(await screen.findByText(/must be http/)).toBeInTheDocument();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+});