AgentHub/client/src/components/run/ProxyPicker.tsx

/**
 * @file ProxyPicker.tsx
 * @description The AI Proxy a NEW session starts on — a session's choice, not
 * its workspace's (`proxy` on `POST /api/lanes/:id/start`, `server/lib/proxy-apply.js`):
 * Native or one of the saved profiles (`useAiProxies`, which the caller also
 * reads to list the proxy's models). A tool that cannot use a proxy (only
 * Claude and Codex can) shows Native, disabled. The last pick is remembered
 * for the next session (`agenthub.session.proxy`; the pre-rename
 * `agenthub.session.router` is still read when that is unset). On a local
 * machine enrolled with the company hub (`/api/remote-client`) the list ends
 * with the Company account (`agenthub.company`): a Claude session there runs through
 * the hub's gateway, and only such sessions are reported to the hub.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { api, type AiProxy } from "../../lib/api";
import { useAiTools } from "../../hooks/useAiTools";
import { Select } from "../Select";

const KEY = "agenthub.session.proxy";
const LEGACY_KEY = "agenthub.session.router";

/** The remembered pick, `"native"` by default. */
export function useSessionProxy(): [string, (v: string) => void] {
  const [value, setValue] = useState(() => {
    try {
      return localStorage.getItem(KEY) || localStorage.getItem(LEGACY_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];
}

/** The remote client's Company account, as the list shows it. */
const COMPANY: AiProxy = {
  name: "agenthub.company",
  label: "Company account",
  builtin: false,
  company: true,
  baseUrl: "",
  hasKey: false,
  model: "",
  models: {},
};

/** The saved profiles (Native included, the Company account last when enrolled), null until they arrive. */
export function useAiProxies(): AiProxy[] | null {
  const [proxies, setProxies] = useState<AiProxy[] | null>(null);
  useEffect(() => {
    let alive = true;
    // A hub (server mode) answers 404 here, and a failure only hides the entry.
    const enrolled = Promise.resolve()
      .then(() => api.remoteClient.status())
      .then((r) => r.enrolled)
      .catch(() => false);
    Promise.all([api.aiProxies.list().then((r) => r.items), enrolled])
      .then(([items, company]) => alive && setProxies(company ? [...items, COMPANY] : items))
      .catch(() => alive && setProxies([]));
    return () => {
      alive = false;
    };
  }, []);
  return proxies;
}

/** What to send as `proxy` for `tool`: nothing for native or a tool that has none. */
export function proxyArg(proxyCapable: boolean | undefined, proxy: string): { proxy?: string } {
  return proxyCapable && proxy && proxy !== "native" ? { proxy } : {};
}

export function ProxyPicker({
  tool,
  proxies,
  value,
  onChange,
  variant,
}: {
  variant?: "field" | "ghost";
  tool: string;
  /** From `useAiProxies`. */
  proxies: AiProxy[] | null;
  value: string;
  onChange: (v: string) => void;
}) {
  const { t } = useTranslation(["lanes"]);
  const aiTools = useAiTools();
  const capable = aiTools.byId(tool)?.proxyCapable ?? (tool === "claude" || tool === "codex");
  const native = t("proxy.native", { tool: aiTools.label(tool) });

  // A remembered profile that has since been deleted falls back to native,
  // or the start would be refused for a proxy the user cannot see.
  useEffect(() => {
    if (!proxies || value === "native") return;
    const pick = proxies.find((r) => r.name === value);
    if (!pick || (pick.company && tool !== "claude")) onChange("native");
  }, [proxies, value, onChange, tool]);

  const options =
    capable && proxies?.length
      ? proxies
          .filter((r) => !r.company || tool === "claude")
          .map((r) => ({
            value: r.name,
            label: r.builtin ? native : r.company ? t("proxy.company") : r.label,
          }))
      : [{ value: "native", label: native }];
  return (
    <div data-testid="proxy-picker">
      <Select<string>
        value={capable ? value : "native"}
        onChange={onChange}
        options={options}
        disabled={!capable}
        variant={variant}
        label={t("proxy.label")}
      />
    </div>
  );
}