feat(ai-tools): Settings → AI Tools, Default/Other lane picker, per-run bypass switch (#40 A1)

Settings → Dashboard gains an AI Tools section (installed tools with Enabled/Disabled and Set default, available ones with a homepage link, Refresh). useAiTools shares one catalog copy across the app and replaces LANE_TOOL_LABEL. The Add-lane modal picks Default (<tool>) or Other…; the router row reads Native (<tool>) and disables AI Router profiles for tools that cannot use one. The run form gives catalog tools resume and a red per-run Bypass permissions switch (Codex too). Claude Code / Codex settings tabs hide while that tool is disabled. The Workspace probes each lane tool's CLI fresh. Docs: CLAUDE.md tool/bypass rule, AGENTS.md, LANES.md, API.md, CLI.md, server/README.md, OpenAPI fragment + regenerated openapi.yaml.
2026-09-28 11:19:30 +07:00
parent 77917203fd
commit fcfebe44f1
33 changed files with 1306 additions and 153 deletions
@@ -25,7 +25,8 @@ import { CwdAutocomplete } from "../run/RunSetup";
 import { FolderBrowseModal } from "./FolderBrowseModal";
 import { api } from "../../lib/api";
 import type { AiRouter, CwdSuggestion } from "../../lib/api";
-import type { Lane, LaneTool, LaneWorktree } from "../../lib/types";
+import type { Lane, LaneWorktree } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";

 /** Polls the lane until the background `git worktree add` finishes (status
 *  leaves "provisioning"), or gives up after `timeoutMs`. Returns the final
@@ -109,7 +110,15 @@ export function AddLaneModal({
  const [routers, setRouters] = useState<AiRouter[]>([]);
  const [routersLoaded, setRoutersLoaded] = useState(false);
  const [branchesError, setBranchesError] = useState<string | null>(null);
-  const [tool, setTool] = useState<LaneTool>("claude");
+  // null = the default AI tool (Settings → AI Tools), resolved at submit time.
+  const [pickedTool, setPickedTool] = useState<string | null>(null);
+  const aiTools = useAiTools();
+  const defaultTool = aiTools.defaultId ?? "claude";
+  const tool = pickedTool ?? defaultTool;
+  const otherTools = aiTools.tools.filter((x) => x.installed && x.enabled && x.id !== defaultTool);
+  const noTools = aiTools.loaded && aiTools.defaultId === null;
+  const toolRouterCapable =
+    aiTools.byId(tool)?.routerCapable ?? (tool === "claude" || tool === "codex");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [browseOpen, setBrowseOpen] = useState(false);
@@ -130,7 +139,7 @@ export function AddLaneModal({
    setBase("");
    setRouter("native");
    setRoutersLoaded(false);
-    setTool("claude");
+    setPickedTool(null);
    setBranchesError(null);
    setError(null);
    setBusy(false);
@@ -414,27 +423,49 @@ export function AddLaneModal({

        <div>
          <label className="mb-1 block text-xs text-fg-secondary">{t("addLaneToolHint")}</label>
-          <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
-            <Seg
-              active={tool === "claude"}
-              label={t("addLaneToolClaude")}
-              onClick={() => setTool("claude")}
-            />
-            <Seg
-              active={tool === "codex"}
-              label={t("addLaneToolCodex")}
-              onClick={() => setTool("codex")}
-            />
-            <Seg
-              active={tool === "antigravity"}
-              label={t("addLaneToolAntigravity")}
-              onClick={() => {
-                setTool("antigravity");
-                // `agy` cannot run behind an AI Router (see router-apply.js).
-                setRouter("native");
-              }}
-            />
-          </div>
+          {noTools ? (
+            <p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-xs text-status-warning">
+              {t("addLaneNoTools")}{" "}
+              <a href="/settings#ai-tools" className="underline">
+                {t("addLaneNoToolsLink")}
+              </a>
+            </p>
+          ) : (
+            <div className="flex items-center gap-1.5">
+              <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
+                <Seg
+                  active={tool === defaultTool}
+                  label={t("addLaneToolDefault", { tool: aiTools.label(defaultTool) })}
+                  onClick={() => setPickedTool(null)}
+                />
+              </div>
+              {otherTools.length > 0 && (
+                <select
+                  aria-label={t("addLaneToolOther")}
+                  value={tool === defaultTool ? "" : tool}
+                  onChange={(e) => {
+                    const next = e.target.value || null;
+                    setPickedTool(next);
+                    // A tool with no endpoint to rewrite runs native only
+                    // (see router-apply.js).
+                    if (next && !aiTools.byId(next)?.routerCapable) setRouter("native");
+                  }}
+                  className={`rounded-md border bg-surface-2 px-2 py-1 text-xs ${
+                    tool !== defaultTool
+                      ? "border-accent text-accent"
+                      : "border-border text-fg-secondary"
+                  }`}
+                >
+                  <option value="">{t("addLaneToolOther")}</option>
+                  {otherTools.map((x) => (
+                    <option key={x.id} value={x.id}>
+                      {x.label}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+          )}
        </div>

        <div>
@@ -640,17 +671,17 @@ export function AddLaneModal({
            hid it. The pipeline picker is gone entirely: every lane is created
            on `default` (the server's own default) and the template is changed
            from the lane's own header afterwards. */}
-        <div
-          className="rounded-md border border-border-light bg-surface-0 p-2"
-          hidden={tool === "antigravity"}
-        >
+        <div className="rounded-md border border-border-light bg-surface-0 p-2">
          <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: "native",
+                      label: t("addLaneRouterNativeTool", { tool: aiTools.label(tool) }),
+                    },
                    { value: "router", label: t("addLaneRouterCustom") },
                  ] as const
                ).map((option) => {
@@ -658,10 +689,16 @@ export function AddLaneModal({
                    option.value === "native" ? router === "native" : router !== "native";
                  // Clicking "AI Router" before the list lands would resolve back to
                  // Native and read as a dead control.
-                  const disabled = option.value === "router" && !routersLoaded;
+                  const disabled =
+                    option.value === "router" && (!routersLoaded || !toolRouterCapable);
                  return (
                    <label
                      key={option.value}
+                      title={
+                        option.value === "router" && !toolRouterCapable
+                          ? t("router.nativeOnly", { tool: aiTools.label(tool) })
+                          : undefined
+                      }
                      // No radio dot: the card itself lights up when selected. That
                      // leaves the DISABLED state with nothing to show it, since the
                      // greyed-out dot was carrying it — hence the explicit branch.
@@ -30,6 +30,7 @@ import { eventBus } from "../../lib/eventBus";
 import { keepIfSame } from "../../lib/keepIfSame";
 import type { AiRouter } from "../../lib/api";
 import type { Lane, LaneRuntime, NamedLock } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";

 /** How often a mounted card re-probes its stack. Faster than the Changes panel's
 *  git refresh because a stack dying is exactly what the user needs to see, and slower than
@@ -120,6 +121,13 @@ function useLaneLocks(laneSlot: number | null): NamedLock[] {
 */
 export function LaneRouterRow({ lane }: { lane: Lane }) {
  const { t } = useTranslation(["lanes"]);
+  const aiTools = useAiTools();
+  const toolLabel = aiTools.label(lane.tool || "claude");
+  // Only Claude and Codex have an endpoint/model override to write; every
+  // other tool is offered native alone (the server refuses the rest anyway).
+  const routerCapable =
+    aiTools.byId(lane.tool || "claude")?.routerCapable ??
+    (lane.tool === "claude" || lane.tool === "codex" || !lane.tool);
  const [routers, setRouters] = useState<AiRouter[] | null>(null);
  const [current, setCurrent] = useState(lane.router_profile || "native");
  const [busy, setBusy] = useState(false);
@@ -225,8 +233,15 @@ export function LaneRouterRow({ lane }: { lane: Lane }) {
        className="max-w-40 truncate rounded border border-border bg-surface-1 px-2 py-0.5 text-fg-secondary disabled:opacity-50"
      >
        {routers.map((r) => (
-          <option key={r.name} value={r.name}>
-            {r.label}
+          <option
+            key={r.name}
+            value={r.name}
+            disabled={!r.builtin && !routerCapable}
+            title={
+              !r.builtin && !routerCapable ? t("router.nativeOnly", { tool: toolLabel }) : undefined
+            }
+          >
+            {r.builtin ? t("router.native", { tool: toolLabel }) : r.label}
          </option>
        ))}
      </select>
@@ -18,7 +18,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { Lane } from "../../lib/types";
-import { LANE_TOOL_LABEL } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";

 const LIVENESS_DOT: Record<Lane["liveness"], string> = {
  active: "bg-status-success",
@@ -65,6 +65,7 @@ export default function LaneStripCard({
  onReorder: (from: number, to: number) => void;
 }) {
  const { t } = useTranslation(["lanes"]);
+  const { label: toolLabel } = useAiTools();
  const [dropTarget, setDropTarget] = useState(false);

  return (
@@ -120,7 +121,7 @@ export default function LaneStripCard({
            installed; the others show their CLI's tag in place of the stage chip. */}
        {lane.tool !== "claude" || lane.pipeline_nodes.length === 0 ? (
          <span className="shrink-0 rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[10px] text-fg-muted">
-            {LANE_TOOL_LABEL[lane.tool]}
+            {toolLabel(lane.tool)}
          </span>
        ) : (
          <span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
@@ -14,7 +14,8 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { AddLaneModal } from "../AddLaneModal";
 import { api } from "../../../lib/api";
-import type { CwdSuggestion } from "../../../lib/api";
+import type { AiTool, AiToolsView, CwdSuggestion } from "../../../lib/api";
+import { __resetAiTools } from "../../../hooks/useAiTools";
 import type { Lane } from "../../../lib/types";

 vi.mock("../../../lib/api", () => ({
@@ -31,10 +32,38 @@ vi.mock("../../../lib/api", () => ({
      routerApply: vi.fn(),
    },
    aiRouters: { list: vi.fn() },
+    aiTools: { list: vi.fn() },
    run: { start: vi.fn() },
  },
 }));

+const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool => ({
+  id,
+  label,
+  command: id,
+  homepageUrl: null,
+  installed: true,
+  path: `/usr/bin/${id}`,
+  enabled: true,
+  source: "builtin",
+  launcher: null,
+  prompt: { mode: "argv" },
+  resume: false,
+  bypass: false,
+  routerCapable: false,
+  ...over,
+});
+const TOOLS: AiToolsView = {
+  default: "claude",
+  tools: [
+    tool("claude", "Claude Code", { launcher: "claude", routerCapable: true, prompt: null }),
+    tool("codex", "Codex", { launcher: "codex", routerCapable: true, prompt: null }),
+    tool("gemini", "Gemini"),
+    tool("aider", "Aider", { installed: false, path: null }),
+    tool("grok", "Grok", { enabled: false }),
+  ],
+};
+
 function laneFixture(over: Partial<Lane> = {}): Lane {
  // `as Lane`: spreading a Partial<Lane> widens every field it may carry to
  // `T | undefined`, which no longer satisfies Lane's required fields. The
@@ -107,6 +136,8 @@ async function fillWorktreeForm(
 }

 beforeEach(() => {
+  __resetAiTools();
+  vi.mocked(api.aiTools.list).mockReset().mockResolvedValue(TOOLS);
  vi.mocked(api.lanes.branches).mockReset();
  vi.mocked(api.lanes.worktree).mockReset();
  vi.mocked(api.lanes.ensure).mockReset();
@@ -138,7 +169,7 @@ beforeEach(() => {
 function nativeRouter() {
  return {
    name: "native",
-    label: "Native (Claude / Codex)",
+    label: "Native",
    builtin: true,
    baseUrl: "",
    hasKey: false,
@@ -649,7 +680,7 @@ describe("AddLaneModal — AI Router", () => {
    const user = userEvent.setup();
    await user.click(await screen.findByRole("radio", { name: "AI Router" }));

-    expect(screen.getByRole("radio", { name: "Native" })).toBeChecked();
+    expect(screen.getByRole("radio", { name: /^Native/ })).toBeChecked();
    expect(screen.getByText(/No router profile saved yet/)).toBeInTheDocument();
  });

@@ -716,7 +747,7 @@ describe("AddLaneModal — a router profile that disappeared", () => {
    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());
+    await waitFor(() => expect(screen.getByRole("radio", { name: /^Native/ })).toBeChecked());
  });

  it("does not offer AI Router until the profile list has arrived", async () => {
@@ -751,7 +782,14 @@ describe("AddLaneModal — tool selection", () => {
    const dirField = screen.getByLabelText("Directory");
    await focusField(user, dirField);
    await user.type(dirField, "/tmp/demo");
-    await user.click(screen.getByRole("button", { name: /codex/i }));
+    const other = await screen.findByRole("combobox", { name: "Other…" });
+    // Installed + enabled only, and never the default itself.
+    expect(Array.from((other as HTMLSelectElement).options).map((o) => o.value)).toEqual([
+      "",
+      "codex",
+      "gemini",
+    ]);
+    await user.selectOptions(other, "codex");
    await user.click(screen.getByRole("button", { name: /add lane|create/i }));

    await waitFor(() =>
@@ -759,6 +797,24 @@ describe("AddLaneModal — tool selection", () => {
    );
  });

+  it("offers only Native for a tool that cannot use an AI Router", async () => {
+    renderModal({});
+    const user = userEvent.setup();
+    await user.selectOptions(await screen.findByRole("combobox", { name: "Other…" }), "gemini");
+    expect(screen.getByRole("radio", { name: "Native (Gemini)" })).toBeChecked();
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeDisabled();
+  });
+
+  it("says so, with a link to Settings, when no tool is installed and enabled", async () => {
+    vi.mocked(api.aiTools.list).mockResolvedValue({ default: null, tools: [] });
+    renderModal({});
+    expect(await screen.findByText(/No AI tool is installed and enabled/)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /AI Tools/ })).toHaveAttribute(
+      "href",
+      "/settings#ai-tools"
+    );
+  });
+
  it("defaults to claude code", async () => {
    vi.mocked(api.lanes.ensure).mockResolvedValue({
      lane: laneFixture({ id: 24, kind: "adopted", status: "idle" }),
@@ -378,7 +378,7 @@ describe("LaneToolsMenu", () => {
 describe("LaneRouterRow — the Model picker", () => {
  const native = {
    name: "native",
-    label: "Native (Claude / Codex)",
+    label: "Native",
    builtin: true,
    baseUrl: "",
    hasKey: false,
@@ -406,6 +406,16 @@ describe("LaneRouterRow — the Model picker", () => {
    expect(await screen.findByDisplayValue("9Router")).toBeInTheDocument();
  });

+  it("offers only native to a tool that cannot use an AI Router", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<LaneRouterRow lane={makeLane({ tool: "gemini" })} />);
+    const select = await screen.findByDisplayValue("Native (gemini)");
+    const router = Array.from((select as HTMLSelectElement).options).find(
+      (o) => o.value === "9router"
+    );
+    expect(router?.disabled).toBe(true);
+  });
+
  it("applies a switch through the router route, not a lane PATCH", async () => {
    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
    vi.mocked(api.lanes.routerApply).mockResolvedValue({
@@ -417,9 +427,7 @@ describe("LaneRouterRow — the Model picker", () => {
    });
    render(<LaneRouterRow lane={makeLane()} />);

-    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude / Codex)"), [
-      "9router",
-    ]);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(1, "9router"));
    expect(await screen.findByDisplayValue("9Router")).toBeInTheDocument();
  });
@@ -440,9 +448,7 @@ describe("LaneRouterRow — the Model picker", () => {
    vi.mocked(api.run.start).mockResolvedValue({} as never);
    render(<LaneRouterRow lane={makeLane()} />);

-    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude / Codex)"), [
-      "9router",
-    ]);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);

    const restart = await screen.findByRole("button", { name: "Restart" });
    await userEvent.click(restart);
@@ -464,9 +470,7 @@ describe("LaneRouterRow — the Model picker", () => {
    });
    render(<LaneRouterRow lane={makeLane()} />);

-    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude / Codex)"), [
-      "9router",
-    ]);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalled());
    expect(screen.queryByRole("button", { name: "Restart" })).toBeNull();
  });
@@ -487,14 +491,14 @@ describe("LaneRouterRow — the Model picker", () => {
    const laneA = makeLane({ id: 1, router_profile: null });
    const laneB = makeLane({ id: 2, router_profile: null });
    const { rerender } = render(<LaneRouterRow lane={laneA} />);
-    await screen.findByDisplayValue("Native (Claude / Codex)");
+    await screen.findByDisplayValue("Native (Claude)");

    rerender(<LaneRouterRow lane={laneB} />);
-    await userEvent.selectOptions(screen.getByDisplayValue("Native (Claude / Codex)"), ["9router"]);
+    await userEvent.selectOptions(screen.getByDisplayValue("Native (Claude)"), ["9router"]);
    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(2, "9router"));

    rerender(<LaneRouterRow lane={laneA} />);
-    expect(screen.getByDisplayValue("Native (Claude / Codex)")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
  });

  it("does not roll a failed apply back onto a DIFFERENT lane the user has since switched to", async () => {
@@ -510,9 +514,7 @@ describe("LaneRouterRow — the Model picker", () => {
    const laneB = makeLane({ id: 2, router_profile: null });

    const { rerender } = render(<LaneRouterRow lane={laneB} />);
-    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude / Codex)"), [
-      "9router",
-    ]);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(2, "9router"));

    rerender(<LaneRouterRow lane={laneA} />);
@@ -521,7 +523,7 @@ describe("LaneRouterRow — the Model picker", () => {
      await Promise.resolve();
    });

-    expect(screen.getByDisplayValue("Native (Claude / Codex)")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
    expect(screen.queryByTitle("EBADJSON")).toBeNull();
    // And the picker must not be left locked by a request for another lane.
    expect(screen.getByRole("combobox")).not.toBeDisabled();
@@ -532,10 +534,8 @@ describe("LaneRouterRow — the Model picker", () => {
    vi.mocked(api.lanes.routerApply).mockRejectedValue(new Error("EBADJSON"));
    render(<LaneRouterRow lane={makeLane()} />);

-    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude / Codex)"), [
-      "9router",
-    ]);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
    await waitFor(() => expect(screen.getByTitle("EBADJSON")).toBeInTheDocument());
-    expect(screen.getByDisplayValue("Native (Claude / Codex)")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
  });
 });
@@ -43,8 +43,8 @@ import type {
  CodexSandbox,
  CodexApproval,
 } from "../../lib/api";
-import type { Session, Lane, LaneTool } from "../../lib/types";
-import { LANE_TOOL_LABEL } from "../../lib/types";
+import type { Session, Lane } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 import { TerminalView } from "./TerminalView";
 import { RunSetup } from "./RunSetup";
 import { ActiveRunsSwitcher } from "./RunHistory";
@@ -69,7 +69,7 @@ export interface LaneConsolePaneProps {
  showLaneSelector: boolean;
  onLaneIdChange: (id: number) => void;
  onLaneCreated: (lane: Lane) => void;
-  binaryStatus: Record<LaneTool, { found: boolean; path: string | null }> | null;
+  binaryStatus: Record<string, { found: boolean; path: string | null }> | null;
  cwdSuggestions: CwdSuggestion[];
  activeRuns: RunListResponse | null;
  /** Active Claude Code sessions started outside the dashboard, listed in the
@@ -150,7 +150,8 @@ export function LaneConsolePane({
        : (externalSessions ?? []).filter((s) => s.cwd && owningLaneId(s.cwd, lanes) === laneId),
    [externalSessions, laneId, lanes]
  );
-  const toolLabel = LANE_TOOL_LABEL[laneTool];
+  const aiTools = useAiTools();
+  const toolLabel = aiTools.label(laneTool);

  useEffect(() => {
    onHasActiveRunChange?.(handle !== null);
@@ -313,6 +314,7 @@ export function LaneConsolePane({
            sandbox: args.sandbox,
            approval: args.approval,
            resumeLast: args.resumeLast,
+            bypass: args.bypass,
          });
        } catch (laneErr: unknown) {
          // A code-only check: the server's message is human prose ("lane
@@ -566,12 +568,13 @@ export function LaneConsolePane({
        />
      </header>

-      {binaryStatus && !binaryStatus[laneTool]?.found && (
+      {/* Not probed yet (a lane on a tool the page has not probed) is not "missing". */}
+      {binaryStatus?.[laneTool] && !binaryStatus[laneTool].found && (
        <div className="rounded-lg border border-status-danger/40 bg-status-danger/10 px-4 py-3 text-sm text-status-danger flex items-center gap-2">
          <AlertCircle className="w-4 h-4 flex-shrink-0" />
          <span>
            {t("binary.missing", {
-              cli: laneTool === "antigravity" ? "agy" : laneTool,
+              cli: aiTools.byId(laneTool)?.command ?? laneTool,
              tool: toolLabel,
            })}
          </span>
@@ -613,7 +616,9 @@ export function LaneConsolePane({
          onSandboxChange={setSandbox}
          approval={approval}
          onApprovalChange={setApproval}
-          onResumeLast={() => onStartFromSetup({ laneId: laneId ?? 0, cwd, resumeLast: true })}
+          onResumeLast={(bypass) =>
+            onStartFromSetup({ laneId: laneId ?? 0, cwd, resumeLast: true, bypass })
+          }
        />
      ) : (
        <div className="flex-1 min-h-0 flex flex-col">
@@ -56,7 +56,7 @@ import type {
  CcMdItem,
 } from "../../lib/api";
 import type { Session, LaneTool } from "../../lib/types";
-import { LANE_TOOL_LABEL } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 import { Select } from "../Select";

 export interface SlashCommand {
@@ -389,9 +389,10 @@ interface RunSetupProps {
  onSandboxChange: (s: CodexSandbox) => void;
  approval: CodexApproval;
  onApprovalChange: (a: CodexApproval) => void;
-  /** Codex lanes resume with `--last`: the sessions table holds Claude
+  /** Every non-Claude lane resumes its tool's LAST session (`codex resume
+   *  --last`, a catalog tool's `resume` args): the sessions table holds Claude
   *  sessions only, so there is nothing for the picker to list. */
-  onResumeLast: () => void;
+  onResumeLast: (bypass?: boolean) => void;
 }

 export function RunSetup(props: RunSetupProps) {
@@ -399,6 +400,15 @@ export function RunSetup(props: RunSetupProps) {
  const atCap = false; // TODO: re-add when concurrency info is available
  const isResume = !!props.resumeSession;
  const [resumePicked, setResumePicked] = useState(isResume);
+  const aiTools = useAiTools();
+  const entry = aiTools.byId(props.tool);
+  // Claude and Codex keep their hand-written fields; every other catalog tool
+  // gets the plain form — cwd, prompt, resume and bypass when it has them.
+  const catalogTool = props.tool !== "claude" && props.tool !== "codex";
+  const canResume = !catalogTool || !!entry?.resume;
+  // Per run, never remembered: the form starts unticked every time it mounts.
+  const [bypass, setBypass] = useState(false);
+  const canBypass = props.tool !== "claude" && !!entry?.bypass;
  // Keep "resume picked" in sync with the parent. Parent set a resume session
  // (e.g. user clicked Resume in the runs modal) - flip the radio so the picker
  // is shown and the selection is visible.
@@ -431,13 +441,13 @@ export function RunSetup(props: RunSetupProps) {
              </div>
            )}
          </Field>
-          {/* `agy` takes no model, permission or effort flag. */}
-          {props.tool !== "antigravity" && (
+          {/* A catalog tool takes no model, permission or effort flag. */}
+          {!catalogTool && (
            <Field label={t("fields.model")}>
              <ModelPicker value={props.model} onChange={props.onModelChange} tool={props.tool} />
            </Field>
          )}
-          {props.tool === "antigravity" ? null : props.tool === "codex" ? (
+          {catalogTool ? null : props.tool === "codex" ? (
            <>
              <Field label={t("fields.sandbox")}>
                <Select<CodexSandbox>
@@ -476,7 +486,7 @@ export function RunSetup(props: RunSetupProps) {
              />
            </Field>
          )}
-          {props.tool !== "antigravity" && (
+          {!catalogTool && (
            <Field label={t("fields.effort")}>
              <Select<EffortLevel>
                value={props.effort}
@@ -490,23 +500,25 @@ export function RunSetup(props: RunSetupProps) {
            </Field>
          )}
        </div>
-        <div className="flex shrink-0 items-center rounded-md border border-border bg-surface-2 p-0.5 text-[11.5px]">
-          <Seg
-            active={!resumePicked}
-            label={t("resume.freshOption")}
-            title={t("resume.freshHint")}
-            onClick={() => {
-              setResumePicked(false);
-              props.onResumeSessionChange(null);
-            }}
-          />
-          <Seg
-            active={resumePicked}
-            label={t("resume.resumeOption")}
-            title={t("resume.resumeHint")}
-            onClick={() => setResumePicked(true)}
-          />
-        </div>
+        {canResume && (
+          <div className="flex shrink-0 items-center rounded-md border border-border bg-surface-2 p-0.5 text-[11.5px]">
+            <Seg
+              active={!resumePicked}
+              label={t("resume.freshOption")}
+              title={t("resume.freshHint")}
+              onClick={() => {
+                setResumePicked(false);
+                props.onResumeSessionChange(null);
+              }}
+            />
+            <Seg
+              active={resumePicked}
+              label={t("resume.resumeOption")}
+              title={t("resume.resumeHint")}
+              onClick={() => setResumePicked(true)}
+            />
+          </div>
+        )}
      </div>

      {resumePicked && (
@@ -520,7 +532,7 @@ export function RunSetup(props: RunSetupProps) {
                  // Pass the picked session explicitly: the parent's state
                  // update has not landed yet on this tick, so reading
                  // props.resumeSession here would resume nothing.
-                  if (s && !props.busy) handleStart(props, s);
+                  if (s && !props.busy) handleStart(props, s, bypass);
                }}
                // Fall back to the typed cwd when no lane is selected — otherwise
                // an unfiltered picker lists every session from every repo.
@@ -528,7 +540,7 @@ export function RunSetup(props: RunSetupProps) {
              />
            ) : (
              <button
-                onClick={() => props.onResumeLast()}
+                onClick={() => props.onResumeLast(canBypass && bypass ? true : undefined)}
                disabled={props.busy}
                className="px-3 py-1.5 text-[11px] rounded-md bg-surface-2 border border-border hover:border-accent/50 text-fg-primary hover:text-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
@@ -547,8 +559,8 @@ export function RunSetup(props: RunSetupProps) {
        <PromptEditor
          value={props.prompt}
          onChange={props.onPromptChange}
-          onSubmit={() => handleStart(props)}
-          placeholder={t("fields.promptPlaceholderTerminal", { tool: LANE_TOOL_LABEL[props.tool] })}
+          onSubmit={() => handleStart(props, undefined, canBypass && bypass)}
+          placeholder={t("fields.promptPlaceholderTerminal", { tool: aiTools.label(props.tool) })}
          rows={5}
          slash={props.tool === "claude"}
          fileCwd={props.resumeSession?.cwd || props.cwd}
@@ -558,7 +570,27 @@ export function RunSetup(props: RunSetupProps) {
        </div>
      </div>

-      {props.tool === "codex" && props.sandbox === "danger-full-access" && (
+      {canBypass && (
+        <div className="px-4 pb-3">
+          <label className="inline-flex items-center gap-2 text-[11.5px] text-status-danger cursor-pointer">
+            <input
+              type="checkbox"
+              checked={bypass}
+              onChange={(e) => setBypass(e.target.checked)}
+              className="accent-[rgb(var(--status-danger))]"
+            />
+            {t("fields.bypass")}
+          </label>
+          {bypass && (
+            <div className="mt-2 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
+              <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+              <span>{t("hint.bypassWarning", { tool: aiTools.label(props.tool) })}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {props.tool === "codex" && !bypass && props.sandbox === "danger-full-access" && (
        <div className="mx-4 mb-3 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
          <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
          <span>{t("hint.sandboxWarning")}</span>
@@ -583,7 +615,7 @@ export function RunSetup(props: RunSetupProps) {
          ) : null}
        </div>
        <button
-          onClick={() => handleStart(props)}
+          onClick={() => handleStart(props, undefined, canBypass && bypass)}
          disabled={
            !props.binaryFound ||
            // A resume needs no prompt — the session it continues is the input.
@@ -612,25 +644,27 @@ export function RunSetup(props: RunSetupProps) {

 /** `session` overrides `props.resumeSession` for the auto-start fired straight
 *  out of the picker, before the parent's state has caught up. */
-function handleStart(props: RunSetupProps, session?: Session) {
+function handleStart(props: RunSetupProps, session?: Session, bypass?: boolean) {
  const resume = session ?? props.resumeSession;
  const codex = props.tool === "codex";
-  const agy = props.tool === "antigravity";
+  // Any catalog tool: none of Claude's or Codex's own flags apply.
+  const other = props.tool !== "claude" && !codex;
  props.onStart({
    laneId: props.laneId,
    // A resume is pinned to its own session's folder — that's what the locked
    // cwd field shows, so it's what gets sent.
    cwd: resume?.cwd || props.cwd || undefined,
-    model: agy ? undefined : props.model || undefined,
-    permissionMode: codex || agy ? undefined : props.permissionMode || undefined,
+    model: other ? undefined : props.model || undefined,
+    permissionMode: codex || other ? undefined : props.permissionMode || undefined,
    sandbox: codex ? props.sandbox : undefined,
    approval: codex ? props.approval : undefined,
-    effort: agy ? undefined : props.effort || undefined,
-    resumeSessionId: codex || agy ? undefined : resume?.id || undefined,
+    effort: other ? undefined : props.effort || undefined,
+    resumeSessionId: codex || other ? undefined : resume?.id || undefined,
    // A resume continues a session that already has its own history — sending
    // whatever is sitting in the prompt box would fire an extra turn nobody
    // asked for, so a resume carries no prompt at all.
    initialPrompt: resume ? undefined : props.prompt || undefined,
+    bypass: bypass || undefined,
  });
 }

@@ -25,6 +25,17 @@ vi.mock("../../../lib/api", async (importOriginal) => {
  return {
    ...actual,
    api: {
+      aiTools: {
+        list: r({
+          default: "claude",
+          tools: [
+            { id: "claude", label: "Claude Code", resume: false, bypass: false },
+            { id: "codex", label: "Codex", resume: false, bypass: true },
+            { id: "antigravity", label: "Antigravity", resume: true, bypass: true },
+            { id: "gemini", label: "Gemini", resume: false, bypass: false },
+          ].map((x) => ({ ...x, installed: true, enabled: true, command: x.id })),
+        }),
+      },
      run: { files: r({ items: [] }) },
      sessions: { list: r({ sessions: [], total: 0, limit: 100, offset: 0 }) },
      ccConfig: {
@@ -443,6 +454,41 @@ describe("RunSetup — codex lanes", () => {
    const { spies } = renderSetup({ tool: "codex" });
    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
    expect(spies.onStart).toHaveBeenCalledOnce();
-    expect(spies.onStart.mock.calls[0][0].resumeLast).toBeUndefined();
+    expect(spies.onStart.mock.calls[0]?.[0].resumeLast).toBeUndefined();
+  });
+});
+
+describe("RunSetup — catalog tools", () => {
+  it("offers a per-run bypass switch with a warning, and sends it", async () => {
+    const { spies } = renderSetup({ tool: "antigravity", prompt: "go" });
+    const box = await screen.findByRole("checkbox", { name: i18n.t("run:fields.bypass") });
+    expect(box).not.toBeChecked();
+    expect(screen.queryByText(/without asking/)).toBeNull();
+    fireEvent.click(box);
+    expect(screen.getByText(/Antigravity will run every command/)).toBeTruthy();
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart.mock.calls[0]?.[0].bypass).toBe(true);
+    // Resume is offered because the catalog gives the tool a resume flag.
+    expect(screen.getByText(i18n.t("run:resume.resumeOption"))).toBeTruthy();
+  });
+
+  it("leaves out resume and bypass for a tool with neither", async () => {
+    const { spies } = renderSetup({ tool: "gemini", prompt: "go" });
+    expect(await screen.findByPlaceholderText("Ask Gemini anything…")).toBeTruthy();
+    expect(screen.queryByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeNull();
+    expect(screen.queryByText(i18n.t("run:resume.resumeOption"))).toBeNull();
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart.mock.calls[0]?.[0].bypass).toBeUndefined();
+  });
+
+  it("gives Codex the switch but not Claude", async () => {
+    renderSetup({ tool: "codex" });
+    expect(await screen.findByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeTruthy();
+  });
+
+  it("gives Claude no bypass switch (it has the bypassPermissions mode)", async () => {
+    renderSetup({ tool: "claude" });
+    await screen.findByPlaceholderText("Ask Claude Code anything…");
+    expect(screen.queryByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeNull();
  });
 });
@@ -0,0 +1,184 @@
+/**
+ * @file AiToolsSettings.tsx
+ * @description Settings → AI Tools: every AI coding CLI in the server's catalog
+ * (GET /api/ai-tools), split into the ones found on PATH — each with
+ * Enabled/Disabled and Set default — and the ones available to install, which
+ * only link to their homepage. Refresh re-reads the login shell's PATH and
+ * re-detects. A disabled tool is hidden from Add lane and the server refuses a
+ * new lane for it; existing lanes keep working.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Bot, ExternalLink, RefreshCw } from "lucide-react";
+import { useAiTools } from "../../hooks/useAiTools";
+import type { AiTool } from "../../lib/api";
+
+function Avatar({ label }: { label: string }) {
+  return (
+    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-surface-4 text-xs font-semibold text-fg-secondary">
+      {label.charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+function Homepage({ tool }: { tool: AiTool }) {
+  const { t } = useTranslation("settings");
+  if (!tool.homepageUrl) return null;
+  return (
+    <a
+      href={tool.homepageUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      title={t("aiTools.homepage")}
+      aria-label={t("aiTools.homepageOf", { tool: tool.label })}
+      className="text-fg-muted hover:text-accent"
+    >
+      <ExternalLink className="w-3.5 h-3.5" />
+    </a>
+  );
+}
+
+export function AiToolsSettings() {
+  const { t } = useTranslation("settings");
+  const { tools, loaded, defaultId, refresh, update } = useAiTools();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
+
+  // The Add-lane modal links here as /settings#ai-tools; the section renders
+  // after the browser's own hash jump, so it has to scroll itself into view.
+  useEffect(() => {
+    if (window.location.hash === "#ai-tools") sectionRef.current?.scrollIntoView?.();
+  }, []);
+
+  const run = async (key: string, fn: () => Promise<void>) => {
+    setBusy(key);
+    setError(null);
+    try {
+      await fn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const installed = tools.filter((x) => x.installed);
+  const available = tools.filter((x) => !x.installed);
+
+  return (
+    <section id="ai-tools" ref={sectionRef} className="scroll-mt-24">
+      <h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1">
+        <Bot className="w-4 h-4 text-fg-muted" />
+        {t("aiTools.title")}
+      </h3>
+      <p className="text-xs text-fg-muted mb-4">{t("aiTools.description")}</p>
+
+      <div className="card p-5 space-y-5">
+        <div>
+          <div className="flex items-center justify-between gap-3 mb-2">
+            <p className="text-xs font-medium text-fg-secondary">
+              {t("aiTools.installed", { count: installed.length })}
+            </p>
+            <button
+              type="button"
+              onClick={() => void run("refresh", refresh)}
+              disabled={busy !== null}
+              className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-fg-secondary hover:bg-surface-3 disabled:opacity-50"
+            >
+              <RefreshCw className={`w-3.5 h-3.5 ${busy === "refresh" ? "animate-spin" : ""}`} />
+              {t("aiTools.refresh")}
+            </button>
+          </div>
+          {error && <p className="mb-2 text-xs text-status-danger">{error}</p>}
+          {loaded && installed.length === 0 && (
+            <p className="text-xs text-fg-muted">{t("aiTools.noneInstalled")}</p>
+          )}
+          <ul className="divide-y divide-border rounded-md border border-border">
+            {installed.map((tool) => {
+              const isDefault = tool.id === defaultId;
+              return (
+                <li
+                  key={tool.id}
+                  data-testid={`ai-tool-${tool.id}`}
+                  className={`flex items-center gap-3 px-3 py-2 ${tool.enabled ? "" : "opacity-60"}`}
+                >
+                  <Avatar label={tool.label} />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5 text-sm text-fg-primary">
+                      {tool.label}
+                      <Homepage tool={tool} />
+                    </div>
+                    <div
+                      className="truncate font-mono text-[11px] text-fg-muted"
+                      title={tool.path ?? ""}
+                    >
+                      {tool.command}
+                    </div>
+                  </div>
+                  {isDefault ? (
+                    <span className="text-xs text-accent">✓ {t("aiTools.default")}</span>
+                  ) : (
+                    <button
+                      type="button"
+                      disabled={!tool.enabled || busy !== null}
+                      onClick={() => void run(tool.id, () => update(tool.id, { default: true }))}
+                      className="rounded-md border border-border px-2 py-1 text-xs text-fg-secondary hover:bg-surface-3 disabled:opacity-50"
+                    >
+                      {t("aiTools.setDefault")}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={tool.enabled}
+                    aria-label={t("aiTools.enabledOf", { tool: tool.label })}
+                    disabled={busy !== null}
+                    onClick={() =>
+                      void run(tool.id, () => update(tool.id, { enabled: !tool.enabled }))
+                    }
+                    className={`w-24 rounded-md border px-2 py-1 text-xs disabled:opacity-50 ${
+                      tool.enabled
+                        ? "border-status-success/40 bg-status-success/10 text-status-success"
+                        : "border-border bg-surface-2 text-fg-muted"
+                    }`}
+                  >
+                    {tool.enabled ? t("aiTools.enabled") : t("aiTools.disabled")}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        {available.length > 0 && (
+          <div>
+            <p className="text-xs font-medium text-fg-secondary mb-2">
+              {t("aiTools.available", { count: available.length })}
+            </p>
+            <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              {available.map((tool) => (
+                <li
+                  key={tool.id}
+                  data-testid={`ai-tool-${tool.id}`}
+                  className="flex items-center gap-2 rounded-md border border-border px-2.5 py-1.5"
+                >
+                  <Avatar label={tool.label} />
+                  <span className="min-w-0 flex-1 truncate text-xs text-fg-secondary">
+                    {tool.label}
+                    <span className="ml-1.5 font-mono text-[10px] text-fg-muted">
+                      {tool.command}
+                    </span>
+                  </span>
+                  <Homepage tool={tool} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,111 @@
+/**
+ * @file AiToolsSettings.test.tsx
+ * @description Settings → AI Tools: installed rows carry Enabled/Disabled and
+ * Set default, available rows only a homepage link, Refresh re-detects, and a
+ * disabled tool's Settings tab disappears from the hub.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { MemoryRouter } from "react-router-dom";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import i18n from "i18next";
+import { AiToolsSettings } from "../AiToolsSettings";
+import { api, type AiTool, type AiToolsView } from "../../../lib/api";
+import { __resetAiTools } from "../../../hooks/useAiTools";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: { aiTools: { list: vi.fn(), refresh: vi.fn(), update: vi.fn() } },
+  };
+});
+
+const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool => ({
+  id,
+  label,
+  command: id,
+  homepageUrl: `https://${id}.example/`,
+  installed: true,
+  path: `/usr/bin/${id}`,
+  enabled: true,
+  source: "builtin",
+  launcher: null,
+  prompt: { mode: "argv" },
+  resume: false,
+  bypass: false,
+  routerCapable: false,
+  ...over,
+});
+const VIEW: AiToolsView = {
+  default: "claude",
+  tools: [
+    tool("claude", "Claude Code"),
+    tool("gemini", "Gemini"),
+    tool("grok", "Grok", { enabled: false }),
+    tool("aider", "Aider", { installed: false, path: null }),
+  ],
+};
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  __resetAiTools();
+  vi.mocked(api.aiTools.list).mockReset().mockResolvedValue(VIEW);
+  vi.mocked(api.aiTools.update).mockReset().mockResolvedValue(VIEW);
+  vi.mocked(api.aiTools.refresh).mockReset().mockResolvedValue(VIEW);
+});
+
+describe("AiToolsSettings", () => {
+  it("splits installed tools from the ones available to install", async () => {
+    render(<AiToolsSettings />);
+    expect(await screen.findByText("Installed (3 detected)")).toBeInTheDocument();
+    expect(screen.getByText("Available to install (1)")).toBeInTheDocument();
+    const claude = screen.getByTestId("ai-tool-claude");
+    expect(within(claude).getByText(/Default/)).toBeInTheDocument();
+    const aider = screen.getByTestId("ai-tool-aider");
+    expect(within(aider).queryByRole("switch")).toBeNull();
+    expect(within(aider).queryByText("Set default")).toBeNull();
+    expect(within(aider).getByRole("link")).toHaveAttribute("href", "https://aider.example/");
+  });
+
+  it("toggles a tool and sets the default through the API", async () => {
+    const user = userEvent.setup();
+    render(<AiToolsSettings />);
+    const gemini = await screen.findByTestId("ai-tool-gemini");
+    await user.click(within(gemini).getByRole("switch", { name: "Gemini enabled" }));
+    expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { enabled: false });
+    await user.click(within(gemini).getByText("Set default"));
+    expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { default: true });
+    // A disabled tool cannot become the default.
+    const grok = screen.getByTestId("ai-tool-grok");
+    expect(within(grok).getByText("Set default")).toBeDisabled();
+    expect(within(grok).getByRole("switch")).toHaveTextContent("Disabled");
+  });
+
+  it("refreshes detection", async () => {
+    const user = userEvent.setup();
+    render(<AiToolsSettings />);
+    await user.click(await screen.findByRole("button", { name: "Refresh" }));
+    expect(api.aiTools.refresh).toHaveBeenCalledOnce();
+  });
+});
+
+describe("SettingsHub — AI tool tabs", () => {
+  it("hides the Codex tab while Codex is disabled", async () => {
+    vi.mocked(api.aiTools.list).mockResolvedValue({
+      default: "claude",
+      tools: [tool("claude", "Claude Code"), tool("codex", "Codex", { enabled: false })],
+    });
+    vi.doMock("../../../pages/Settings", () => ({ Settings: () => null }));
+    const { SettingsHub } = await import("../../../pages/SettingsHub");
+    render(
+      <MemoryRouter>
+        <SettingsHub />
+      </MemoryRouter>
+    );
+    expect(await screen.findByRole("tab", { name: /Claude Code/ })).toBeInTheDocument();
+    expect(screen.queryByRole("tab", { name: /^Codex/ })).toBeNull();
+  });
+});