AgentHub/client/src/pages/AiToolConfig.tsx

/**
 * @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 — a refusal because the file changed
 * (ESTALE) offers a reload and keeps the user's text to copy, and an edited
 * file asks before another file or Close drops it. 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 { useSettingsHref } from "../lib/settingsLink";
import { useTranslation } from "react-i18next";
import { Cpu, ExternalLink, FileCog, RefreshCw } from "lucide-react";
import { api, type AiToolConfigFile } from "../lib/api";
import { toast } from "../lib/toast";
import { confirmDiscard } from "../lib/confirm";
import { copyText } from "../lib/clipboard";
import { useUnsavedGuard } from "../hooks/useUnsavedGuard";
import type { Lane } from "../lib/types";
import { useAiTools } from "../hooks/useAiTools";
import { AiToolIcon } from "../components/AiToolIcon";
import { ModelPicker } from "../components/run/RunSetup";
import { PricingLink } 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 });
      toast.success(t("toolTab.defaultModelSaved"));
    } 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="w-72 max-w-full">
          <ModelPicker value={value} onChange={setValue} tool={toolId} />
        </div>
        <button
          type="button"
          onClick={save}
          disabled={value === saved}
          className="btn-primary 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("");
  // The text as opened/saved: an edit differs from it.
  const [base, setBase] = useState("");
  const [busy, setBusy] = useState(false);
  const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null);
  // Set when a save was refused because the file changed on disk.
  const [stale, setStale] = useState(false);
  const dirty = open !== null && text !== base;
  useUnsavedGuard(dirty);

  useEffect(() => {
    api.aiTools
      .config(toolId)
      .then((r) => setFiles(r.files))
      .catch((err) => setNote({ ok: false, text: message(err) }));
  }, [toolId]);

  const load = async (index: number) => {
    setNote(null);
    setStale(false);
    try {
      const r = await api.aiTools.readConfig(toolId, index);
      setOpen({ index, path: r.path, sha: r.sha });
      setText(r.text);
      setBase(r.text);
    } catch (err) {
      setNote({ ok: false, text: message(err) });
    }
  };

  const openFile = async (f: AiToolConfigFile) => {
    if (dirty && !(await confirmDiscard())) return;
    await load(f.index);
  };

  const close = async () => {
    if (dirty && !(await confirmDiscard())) return;
    setOpen(null);
    setStale(false);
  };

  const save = async () => {
    if (!open) return;
    setBusy(true);
    setNote(null);
    setStale(false);
    try {
      const r = await api.aiTools.saveConfig(toolId, open.index, text, open.sha);
      setOpen({ ...open, sha: r.sha });
      setBase(text);
      setNote({ ok: true, text: t("toolTab.saved", { backup: r.backup }) });
    } catch (err) {
      setStale((err as { code?: string }).code === "ESTALE");
      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 || !dirty}
              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={() => void close()} className="btn-ghost text-xs">
              {t("toolTab.close")}
            </button>
          </div>
          {stale && (
            <div
              role="alert"
              className="flex flex-wrap items-center gap-2 rounded-md border border-status-warning/40 bg-status-warning/10 px-3 py-2 text-xs text-fg-primary"
            >
              <span className="flex-1">{t("toolTab.staleBody")}</span>
              <button
                type="button"
                onClick={() => void copyText(text)}
                className="btn-ghost text-xs"
              >
                {t("toolTab.copyMine")}
              </button>
              <button
                type="button"
                onClick={() => void load(open.index)}
                className="btn-ghost text-xs"
              >
                {t("toolTab.reloadDiscard")}
              </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 href = useSettingsHref();
  const aiTools = useAiTools();
  const tool = aiTools.byId(toolId);
  const [usage, setUsage] = useState<{ sessions: number; cost: number } | null>(null);
  const [lanes, setLanes] = useState<Lane[]>([]);

  useEffect(() => {
    // Switching tabs quickly must not show the previous tool's numbers.
    let cancelled = false;
    api.aiTools
      .usage(toolId)
      .then((u) => !cancelled && setUsage(u))
      .catch(() => !cancelled && setUsage(null));
    api.lanes
      .list()
      .then((r) => !cancelled && setLanes(r.lanes.filter((l) => l.tool === toolId)))
      .catch(() => !cancelled && setLanes([]));
    return () => {
      cancelled = true;
    };
  }, [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={href("agents")} 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 && <PricingLink vendor={tool.modelVendor} />}
      {tool.configFiles > 0 && (
        <Card title={t("toolTab.config")} Icon={FileCog}>
          <ConfigFiles toolId={toolId} />
        </Card>
      )}
      {Extra && <Extra />}
    </div>
  );
}