feat: AI Router per session; Settings at the sidebar's foot; shipped tool icons

AI Router is a session's choice, not a workspace's: - an AI Router select beside the model picker in the workspace home and a pane's run form (RouterPicker.tsx; hidden off Claude/Codex or with only Native; last pick remembered in agenthub.session.router) - `router` on POST /api/lanes/:id/start and POST /api/run; Claude gets --settings=<data dir>/router-settings/<name>.json (0600, outranks project and user settings, key never in argv), Codex -p <name> + key via tmux -e - dashboard_runs.router; a resume naming none goes back to it - profile PATCH rewrites the session files, DELETE removes them - gone: POST /api/lanes/:id/router/apply, LaneRouterRow, the Add-workspace router radio, the claude-/codex-home `routers` answers; clearLaneRouters takes the old keys out of each workspace's settings.local.json at start Sidebar: Settings pinned to the foot, the collapse toggle beside it (stacked on the rail) instead of in the brand's corner. Icons: shipped SVG marks for claude, codex, openclaw and hermes (a black/white pair swapped by theme) in client/public/ai-tools/, used by AiToolIcon before the server's favicon.
2026-10-02 14:19:02 +07:00
parent 5084334d81
commit c507d37baf
55 changed files with 851 additions and 1992 deletions
@@ -0,0 +1,91 @@
+/**
+ * @file RouterPicker.tsx
+ * @description The AI Router a NEW session starts on — a session's choice, not
+ * its workspace's (`router` on `POST /api/lanes/:id/start`, `server/lib/router-apply.js`).
+ * Shown only for a tool that can use one (Claude, Codex) and only when a
+ * profile beyond Native exists. The last pick is remembered for the next
+ * session (`agenthub.session.router`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AiRouter } from "../../lib/api";
+import { useAiTools } from "../../hooks/useAiTools";
+import { Select } from "../Select";
+
+const KEY = "agenthub.session.router";
+
+/** The remembered pick, `"native"` by default. */
+export function useSessionRouter(): [string, (v: string) => void] {
+  const [value, setValue] = useState(() => {
+    try {
+      return localStorage.getItem(KEY) || "native";
+    } catch {
+      return "native";
+    }
+  });
+  const set = (v: string) => {
+    setValue(v);
+    try {
+      localStorage.setItem(KEY, v);
+    } catch {
+      /* storage off — the pick still holds for this page */
+    }
+  };
+  return [value, set];
+}
+
+/** What to send as `router` for `tool`: nothing for native or a tool that has none. */
+export function routerArg(routerCapable: boolean | undefined, router: string): { router?: string } {
+  return routerCapable && router && router !== "native" ? { router } : {};
+}
+
+export function RouterPicker({
+  tool,
+  value,
+  onChange,
+  wrap = (el) => el,
+}: {
+  tool: string;
+  value: string;
+  onChange: (v: string) => void;
+  /** Puts the select in the caller's labelled field; not called while hidden. */
+  wrap?: (select: ReactNode) => ReactNode;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const aiTools = useAiTools();
+  const capable = aiTools.byId(tool)?.routerCapable ?? (tool === "claude" || tool === "codex");
+  const [routers, setRouters] = useState<AiRouter[] | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    api.aiRouters
+      .list()
+      .then((r) => alive && setRouters(r.items))
+      .catch(() => alive && setRouters([]));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // A remembered profile that has since been deleted falls back to native,
+  // or the start would be refused for a router the user cannot see.
+  useEffect(() => {
+    if (routers && value !== "native" && !routers.some((r) => r.name === value)) onChange("native");
+  }, [routers, value, onChange]);
+
+  if (!capable || !routers || routers.length <= 1) return null;
+  return wrap(
+    <div className="w-44" data-testid="router-picker" title={t("router.label")}>
+      <Select<string>
+        value={value}
+        onChange={onChange}
+        options={routers.map((r) => ({
+          value: r.name,
+          label: r.builtin ? t("router.native", { tool: aiTools.label(tool) }) : r.label,
+        }))}
+      />
+    </div>
+  );
+}