feat: model lists and prices that follow each AI tool, a Settings tab per tool, live lane status (#40)

Pricing: the LiteLLM sync now adds every current Claude / GPT (>= 5) /
Gemini (>= 3) chat model before it is used and keeps its own rows
(model_pricing.source = 'sync', the Auto badge) at the published rate. A
user's row (any PUT) and a deleted pattern (model_pricing_dismissed) are
never touched; a deleted built-in row is not re-seeded at the next start; a
reset re-applies the list at once; retired Claude models are priced only
once used.

Models: GET /api/ai-tools/:id/models reads each tool's own list (Codex's
models_cache.json, Claude's aliases named after the newest version plus
priced versions, a catalog tool's vendor rows plus the models its sessions
used). A catalog `model: {flag, vendor?}` field passes `<flag> <id>`
(validated: never a flag or shell text); a per-tool default model starts
each run, and a resume keeps the session's own model.

Settings: every installed, enabled catalog tool without its own tab gets
one (AiToolConfig.tsx): path, homepage, Update, sessions/cost/lanes,
default model, vendor pricing, and the config files its release catalog
lists, edited over the opened sha, syntax-checked, backed up, written
atomically; credential-looking names refused. Antigravity keeps its hooks
card there.

Lanes: a just-started run no longer reads "dead" (age counts the run's
start while the old session is still bound); a second dashboard on the
same database re-broadcasts the lanes the other changed (PRAGMA
data_version, every 2 s); a lane start with a bad model answers 400.

DB: every migration runs under a cross-process lock (<db>-migrate.lock), so
two dashboards started at once on a fresh database both come up.

client/src/pages/AiToolConfig.tsx

@@ -0,0 +1,267 @@
+/**
+ * @file AiToolConfig.tsx
+ * @description Settings → <tool>: the one tab every installed, enabled
+ * catalog tool without a hand-written tab gets (Claude Code and Codex keep
+ * theirs). Shows where the CLI lives, its homepage and an Update link into the
+ * AI Tools modal; how many sessions it ran, their cost, and its lanes; a
+ * default model (`PUT /api/ai-tools/:id {defaultModel}`) for a tool with a
+ * model flag; its vendor's pricing table; and the config files its catalog
+ * file lists, each opened over a sha and saved by the server only if it is
+ * still that sha, valid, and backed up. Antigravity adds its hooks card.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState, type ComponentType } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Cpu, ExternalLink, FileCog, RefreshCw } from "lucide-react";
+import { api, type AiToolConfigFile } from "../lib/api";
+import type { Lane } from "../lib/types";
+import { useAiTools } from "../hooks/useAiTools";
+import { AiToolIcon } from "../components/AiToolIcon";
+import { ModelPicker } from "../components/run/RunSetup";
+import { PricingSettings } from "../components/settings/PricingSettings";
+import { AntigravityHooksSettings } from "../components/settings/AntigravityHooksSettings";
+
+/** Cards one tool adds below the generic ones. */
+const EXTRAS: Record<string, ComponentType> = { antigravity: AntigravityHooksSettings };
+
+const message = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+/** The default-model card: the picker, saved on an explicit click. */
+function DefaultModel({ toolId, saved }: { toolId: string; saved: string }) {
+  const { t } = useTranslation("settings");
+  const aiTools = useAiTools();
+  const [value, setValue] = useState(saved);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => setValue(saved), [saved]);
+  const save = async () => {
+    setError(null);
+    try {
+      await aiTools.update(toolId, { defaultModel: value || null });
+    } catch (err) {
+      setError(message(err));
+    }
+  };
+  return (
+    <div className="space-y-2">
+      <p className="text-xs text-fg-muted">{t("toolTab.defaultModelHint")}</p>
+      <div className="flex flex-wrap items-start gap-2">
+        <div className="min-w-[16rem] flex-1">
+          <ModelPicker value={value} onChange={setValue} tool={toolId} />
+        </div>
+        <button
+          type="button"
+          onClick={save}
+          disabled={value === saved}
+          className="btn-ghost text-xs disabled:opacity-50"
+        >
+          {t("toolTab.saveDefaultModel")}
+        </button>
+      </div>
+      {error && <p className="text-xs text-status-danger">{error}</p>}
+    </div>
+  );
+}
+
+/** The config-files card: pick a declared file, edit it, save over its sha. */
+function ConfigFiles({ toolId }: { toolId: string }) {
+  const { t } = useTranslation("settings");
+  const [files, setFiles] = useState<AiToolConfigFile[] | null>(null);
+  const [open, setOpen] = useState<{ index: number; path: string; sha: string } | null>(null);
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null);
+
+  useEffect(() => {
+    api.aiTools
+      .config(toolId)
+      .then((r) => setFiles(r.files))
+      .catch((err) => setNote({ ok: false, text: message(err) }));
+  }, [toolId]);
+
+  const openFile = async (f: AiToolConfigFile) => {
+    setNote(null);
+    try {
+      const r = await api.aiTools.readConfig(toolId, f.index);
+      setOpen({ index: f.index, path: r.path, sha: r.sha });
+      setText(r.text);
+    } catch (err) {
+      setNote({ ok: false, text: message(err) });
+    }
+  };
+
+  const save = async () => {
+    if (!open) return;
+    setBusy(true);
+    setNote(null);
+    try {
+      const r = await api.aiTools.saveConfig(toolId, open.index, text, open.sha);
+      setOpen({ ...open, sha: r.sha });
+      setNote({ ok: true, text: t("toolTab.saved", { backup: r.backup }) });
+    } catch (err) {
+      setNote({ ok: false, text: message(err) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-fg-muted">{t("toolTab.configHint")}</p>
+      <div className="flex flex-wrap gap-2">
+        {(files ?? []).map((f) => (
+          <button
+            key={f.index}
+            type="button"
+            onClick={() => openFile(f)}
+            disabled={!f.exists}
+            title={f.exists ? undefined : t("toolTab.missing")}
+            className={`rounded-md border px-2.5 py-1 font-mono text-[11px] disabled:opacity-50 ${
+              open?.index === f.index
+                ? "border-accent/50 text-fg-primary"
+                : "border-border text-fg-secondary hover:bg-surface-3"
+            }`}
+          >
+            {f.path}
+          </button>
+        ))}
+      </div>
+      {open && (
+        <div className="space-y-2">
+          <textarea
+            aria-label={open.path}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            spellCheck={false}
+            rows={16}
+            className="w-full rounded-md border border-border bg-surface-2 p-3 font-mono text-[11px] text-fg-primary focus:border-accent/50 focus:outline-none"
+          />
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={save}
+              disabled={busy}
+              className="btn-ghost text-xs disabled:opacity-50"
+            >
+              {busy && <RefreshCw className="h-3.5 w-3.5 animate-spin" />}
+              {t("toolTab.save")}
+            </button>
+            <button type="button" onClick={() => setOpen(null)} className="btn-ghost text-xs">
+              {t("toolTab.close")}
+            </button>
+          </div>
+        </div>
+      )}
+      {note && (
+        <p className={`text-xs ${note.ok ? "text-fg-muted" : "text-status-danger"}`}>{note.text}</p>
+      )}
+    </div>
+  );
+}
+
+function Card({
+  title,
+  Icon,
+  children,
+}: {
+  title: string;
+  Icon: ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+}) {
+  return (
+    <section>
+      <h3 className="mb-3 flex items-center gap-2 text-sm font-medium text-fg-secondary">
+        <Icon className="h-4 w-4 text-fg-muted" />
+        {title}
+      </h3>
+      <div className="card p-5">{children}</div>
+    </section>
+  );
+}
+
+/** The tab for one catalog tool. */
+export function AiToolConfig({ toolId }: { toolId: string }) {
+  const { t } = useTranslation("settings");
+  const aiTools = useAiTools();
+  const tool = aiTools.byId(toolId);
+  const [usage, setUsage] = useState<{ sessions: number; cost: number } | null>(null);
+  const [lanes, setLanes] = useState<Lane[]>([]);
+
+  useEffect(() => {
+    api.aiTools
+      .usage(toolId)
+      .then(setUsage)
+      .catch(() => setUsage(null));
+    api.lanes
+      .list()
+      .then((r) => setLanes(r.lanes.filter((l) => l.tool === toolId)))
+      .catch(() => setLanes([]));
+  }, [toolId]);
+
+  if (!tool) return null;
+  const Extra = EXTRAS[toolId];
+
+  return (
+    <div className="space-y-8">
+      <div className="card flex flex-wrap items-start gap-4 p-5">
+        <AiToolIcon tool={tool} className="h-10 w-10" />
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex flex-wrap items-center gap-3">
+            <h2 className="text-base font-semibold text-fg-primary">{tool.label}</h2>
+            {tool.homepageUrl && (
+              <a
+                href={tool.homepageUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1 text-xs text-accent hover:underline"
+              >
+                <ExternalLink className="h-3 w-3" />
+                {t("aiTools.homepage")}
+              </a>
+            )}
+            {tool.update && (
+              <Link to={`/settings?tool=${toolId}#ai-tools`} className="btn-ghost text-xs">
+                <RefreshCw className="h-3.5 w-3.5" />
+                {t("toolTab.update")}
+              </Link>
+            )}
+          </div>
+          <p className="break-all font-mono text-[11px] text-fg-muted">{tool.path}</p>
+          {usage && (
+            <p className="text-xs text-fg-secondary">
+              {t("toolTab.usage", { count: usage.sessions, cost: usage.cost.toFixed(2) })}
+            </p>
+          )}
+          {lanes.length > 0 && (
+            <p className="flex flex-wrap items-center gap-2 text-xs text-fg-secondary">
+              {t("toolTab.lanes")}
+              {lanes.map((l) => (
+                <Link
+                  key={l.id}
+                  to={`/workspace?lane=${l.id}`}
+                  className="text-accent hover:underline"
+                >
+                  {l.title || l.cwd}
+                </Link>
+              ))}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {tool.modelFlag && (
+        <Card title={t("toolTab.defaultModel")} Icon={Cpu}>
+          <DefaultModel toolId={toolId} saved={tool.defaultModel ?? ""} />
+        </Card>
+      )}
+      {tool.modelVendor && <PricingSettings vendor={tool.modelVendor} id={`${toolId}-pricing`} />}
+      {tool.configFiles > 0 && (
+        <Card title={t("toolTab.config")} Icon={FileCog}>
+          <ConfigFiles toolId={toolId} />
+        </Card>
+      )}
+      {Extra && <Extra />}
+    </div>
+  );
+}

client/src/pages/AntigravityConfig.tsx

@@ -1,22 +0,0 @@
-/**
- * @file AntigravityConfig.tsx
- * @description Settings → Antigravity: AgentHub's own settings for the
- * Antigravity CLI (`agy`) — Model Pricing for Gemini models (the shared
- * `PricingSettings` table) and AgentHub's Antigravity hooks
- * (`AntigravityHooksSettings`). agy has no config surface AgentHub edits, so
- * there is no explorer and no sub-tab bar, only these cards (#40 part D).
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { PricingSettings } from "../components/settings/PricingSettings";
-import { AntigravityHooksSettings } from "../components/settings/AntigravityHooksSettings";
-
-/** The Antigravity settings tab. */
-export function AntigravityConfig() {
-  return (
-    <div className="space-y-8">
-      <PricingSettings vendor="google" id="antigravity-pricing" />
-      <AntigravityHooksSettings />
-    </div>
-  );
-}

client/src/pages/SettingsHub.tsx

@@ -1,6 +1,6 @@
 /**
  * @file SettingsHub.tsx
- * @description Tabbed shell for /settings that hosts the dashboard's own settings plus one configuration panel per AI tool (Claude Code, Codex and Antigravity) plus the AI Router profiles they can be pointed at and the git logins dashboard fetch/pull/push use, with the active tab kept in the `?tool=` query param. The **AI Tools** button at the bar's right edge opens `AiToolsModal` (also opened by `/settings#ai-tools`, the Add-lane modal's link); a tool's tab is hidden while that tool is disabled there.
+ * @description Tabbed shell for /settings that hosts the dashboard's own settings plus one configuration panel per AI tool (Claude Code and Codex have their own; every other installed, enabled catalog tool gets the generic `AiToolConfig` tab, Antigravity's with its hooks card) plus the AI Router profiles they can be pointed at and the git logins dashboard fetch/pull/push use, with the active tab kept in the `?tool=` query param. The **AI Tools** button at the bar's right edge opens `AiToolsModal` (also opened by `/settings#ai-tools`, the Add-lane modal's link); a tool's tab is hidden while that tool is disabled there.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { useCallback, useEffect, useState, type ComponentType } from "react";
@@ -11,6 +11,7 @@ import {
   Boxes,
   KeyRound,
   Orbit,
+  Puzzle,
   Router,
   Settings as SettingsIcon,
   SquareTerminal,
@@ -19,7 +20,7 @@ import { PageTabs } from "../components/PageTabs";
 import { Settings } from "./Settings";
 import { CcConfig } from "./CcConfig";
 import { CodexConfig } from "./CodexConfig";
-import { AntigravityConfig } from "./AntigravityConfig";
+import { AiToolConfig } from "./AiToolConfig";
 import { AiRouterConfig } from "./AiRouterConfig";
 import { GitCredentialsConfig } from "./GitCredentialsConfig";
 import { useAiTools } from "../hooks/useAiTools";
@@ -27,9 +28,13 @@ import { AiToolsModal } from "../components/settings/AiToolsModal";
 
 interface ToolTab {
   id: string;
-  labelKey: string;
+  labelKey?: string;
+  /** A catalog tool's own label, used instead of `labelKey`. */
+  label?: string;
   Icon: ComponentType<{ className?: string }>;
-  Panel: ComponentType;
+  Panel?: ComponentType;
+  /** Set on a generic catalog-tool tab: rendered as `<AiToolConfig toolId>`. */
+  toolId?: string;
   /** The AI Tools catalog id this tab configures; hidden while it is disabled. */
   aiTool?: string;
 }
@@ -58,13 +63,6 @@ const TOOL_TABS: ToolTab[] = [
     Panel: CodexConfig,
     aiTool: "codex",
   },
-  {
-    id: "antigravity",
-    labelKey: "tools.antigravity",
-    Icon: Orbit,
-    Panel: AntigravityConfig,
-    aiTool: "antigravity",
-  },
   { id: "ai-router", labelKey: "tools.aiRouter", Icon: Router, Panel: AiRouterConfig },
   {
     id: "git-credentials",
@@ -83,9 +81,20 @@ export function SettingsHub() {
   const [params, setParams] = useSearchParams();
   const requested = params.get("tool");
   const aiTools = useAiTools();
-  const tabs = TOOL_TABS.filter(
+  const fixed = TOOL_TABS.filter(
     (tab) => !tab.aiTool || aiTools.byId(tab.aiTool)?.enabled !== false
   );
+  // Every other installed, enabled tool, after Codex; a fixed tab's id wins.
+  const catalogTabs: ToolTab[] = aiTools.tools
+    .filter((x) => x.installed && x.enabled && !x.launcher && !fixed.some((f) => f.id === x.id))
+    .map((x) => ({
+      id: x.id,
+      label: x.label,
+      Icon: x.id === "antigravity" ? Orbit : Puzzle,
+      toolId: x.id,
+    }));
+  const at = fixed.findIndex((tab) => tab.id === "ai-router");
+  const tabs = [...fixed.slice(0, at), ...catalogTabs, ...fixed.slice(at)];
   const active = tabs.find((tab) => tab.id === requested) ?? DASHBOARD_TAB;
   const location = useLocation();
   const navigate = useNavigate();
@@ -107,10 +116,10 @@ export function SettingsHub() {
         ariaLabel={t("tools.label", "Tools")}
         activeId={active.id}
         onSelect={(id) => setParams(id === DASHBOARD_TAB.id ? {} : { tool: id }, { replace: true })}
-        tabs={tabs.map(({ id, labelKey, Icon }) => ({
+        tabs={tabs.map(({ id, labelKey, label, Icon }) => ({
           id,
           Icon,
-          label: t(labelKey),
+          label: label ?? t(labelKey ?? id),
         }))}
         actions={
           <button
@@ -125,7 +134,11 @@ export function SettingsHub() {
         }
       />
 
-      <active.Panel />
+      {active.toolId ? (
+        <AiToolConfig key={active.toolId} toolId={active.toolId} />
+      ) : (
+        active.Panel && <active.Panel />
+      )}
       {aiToolsOpen && <AiToolsModal onClose={closeAiTools} />}
     </div>
   );

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

@@ -0,0 +1,141 @@
+/**
+ * @file AiToolConfig.test.tsx
+ * @description The generic per-tool Settings tab: the tool's path, homepage
+ * and an Update link into the AI Tools modal; its session count, cost and
+ * lanes; a default-model picker saved through PUT /api/ai-tools/:id; and its
+ * catalog-declared config files, edited over the sha they were opened at with
+ * the server's refusal shown.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { api, type AiTool } from "../../lib/api";
+import { __resetAiTools } from "../../hooks/useAiTools";
+import { AiToolConfig } from "../AiToolConfig";
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    aiTools: {
+      list: vi.fn(),
+      update: vi.fn(),
+      models: vi.fn(),
+      usage: vi.fn(),
+      config: vi.fn(),
+      readConfig: vi.fn(),
+      saveConfig: vi.fn(),
+      iconUrl: (id: string) => `/api/ai-tools/${id}/icon`,
+    },
+    lanes: { list: vi.fn() },
+  },
+  RUN_MODEL_CHOICES: [],
+}));
+vi.mock("../../components/settings/PricingSettings", () => ({
+  PricingSettings: ({ vendor }: { vendor: string }) => <div>pricing:{vendor}</div>,
+}));
+
+const GEMINI: AiTool = {
+  id: "gemini",
+  label: "Gemini",
+  command: "gemini",
+  homepageUrl: "https://github.com/google-gemini/gemini-cli",
+  installed: true,
+  path: "/usr/bin/gemini",
+  enabled: true,
+  source: "builtin",
+  launcher: null,
+  prompt: { mode: "flag" },
+  resume: false,
+  bypass: true,
+  routerCapable: false,
+  install: { kind: "npm", package: "@google/gemini-cli" },
+  update: { kind: "npm" },
+  modelFlag: true,
+  defaultModel: null,
+  modelVendor: "google",
+  configFiles: 2,
+};
+
+beforeEach(() => {
+  __resetAiTools();
+  const view = { default: "claude", tools: [GEMINI] };
+  vi.mocked(api.aiTools.list)
+    .mockReset()
+    .mockResolvedValue(view as never);
+  vi.mocked(api.aiTools.update)
+    .mockReset()
+    .mockResolvedValue(view as never);
+  vi.mocked(api.aiTools.models)
+    .mockReset()
+    .mockResolvedValue({
+      flag: true,
+      models: [{ id: "gemini-3.1-pro", label: "gemini-3.1-pro" }],
+      defaultModel: null,
+    });
+  vi.mocked(api.aiTools.usage).mockReset().mockResolvedValue({ sessions: 3, cost: 1.5 });
+  vi.mocked(api.aiTools.config)
+    .mockReset()
+    .mockResolvedValue({
+      files: [
+        { index: 0, path: "/h/.gemini/settings.json", format: "json", exists: true, size: 2 },
+        { index: 1, path: "/h/.gemini/GEMINI.md", format: "text", exists: false, size: null },
+      ],
+    });
+  vi.mocked(api.aiTools.readConfig)
+    .mockReset()
+    .mockResolvedValue({ path: "/h/.gemini/settings.json", format: "json", text: "{}", sha: "s1" });
+  vi.mocked(api.aiTools.saveConfig).mockReset();
+  vi.mocked(api.lanes.list)
+    .mockReset()
+    .mockResolvedValue({
+      lanes: [
+        { id: 7, tool: "gemini", title: "web", cwd: "/w" },
+        { id: 8, tool: "claude", title: "other", cwd: "/o" },
+      ],
+    } as never);
+});
+
+const renderTab = () =>
+  render(
+    <MemoryRouter>
+      <AiToolConfig toolId="gemini" />
+    </MemoryRouter>
+  );
+
+describe("AiToolConfig", () => {
+  it("shows the tool, its usage, its lanes and its vendor's pricing", async () => {
+    renderTab();
+    expect(await screen.findByText("/usr/bin/gemini")).toBeInTheDocument();
+    expect(await screen.findByText(/3 sessions/)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "web" })).toHaveAttribute("href", "/workspace?lane=7");
+    expect(screen.queryByRole("link", { name: "other" })).toBeNull();
+    expect(screen.getByRole("link", { name: /update/i })).toHaveAttribute(
+      "href",
+      "/settings?tool=gemini#ai-tools"
+    );
+    expect(screen.getByText("pricing:google")).toBeInTheDocument();
+  });
+
+  it("saves the default model", async () => {
+    renderTab();
+    fireEvent.click(await screen.findByText("Inherit from settings"));
+    fireEvent.click(await screen.findByText("gemini-3.1-pro"));
+    fireEvent.click(screen.getByRole("button", { name: /save default model/i }));
+    await waitFor(() =>
+      expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { defaultModel: "gemini-3.1-pro" })
+    );
+  });
+
+  it("edits a config file over the sha it opened, and shows a refusal", async () => {
+    vi.mocked(api.aiTools.saveConfig).mockRejectedValueOnce(new Error("not valid JSON"));
+    renderTab();
+    fireEvent.click(await screen.findByRole("button", { name: "/h/.gemini/settings.json" }));
+    expect(screen.getByRole("button", { name: "/h/.gemini/GEMINI.md" })).toBeDisabled();
+    const box = await screen.findByRole("textbox", { name: "/h/.gemini/settings.json" });
+    fireEvent.change(box, { target: { value: "{nope" } });
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+    expect(await screen.findByText(/not valid JSON/)).toBeInTheDocument();
+    expect(api.aiTools.saveConfig).toHaveBeenCalledWith("gemini", 0, "{nope", "s1");
+  });
+});