@raingor/pi-web-switch 0.3.2 → 0.3.3

package/src/components/subagents/SubagentsPage.tsx

@@ -0,0 +1,502 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Badge } from "@/components/ui/Badge";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { formatTokens } from "@/lib/utils";
+import type { AgentDef, ChainDef, ChainStep, RunRecord, SubagentsData } from "@/types";
+import {
+  Brain,
+  GitBranch,
+  History,
+  Box,
+  Users,
+  FileCode,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Search,
+  ExternalLink,
+} from "lucide-react";
+
+const API_BASE = "/api/pi";
+
+type Tab = "agents" | "chains" | "history";
+
+export function SubagentsPage() {
+  const { t } = useTranslation();
+  const [data, setData] = useState<SubagentsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tab, setTab] = useState<Tab>("agents");
+  const [search, setSearch] = useState("");
+
+  const loadData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${API_BASE}/subagents`);
+      if (!res.ok) throw new Error(`API /subagents: ${res.status}`);
+      const json = await res.json();
+      setData(json);
+    } catch (e: any) {
+      setError(e.message || "Failed to load subagents data");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const q = search.trim().toLowerCase();
+
+  const filteredAgents = data?.agents.filter(
+    (a) => !q || a.name.toLowerCase().includes(q) || a.description.toLowerCase().includes(q)
+  );
+
+  const filteredChains = data?.chains.filter(
+    (c) => !q || c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q)
+  );
+
+  const filteredHistory = data?.runHistory.filter(
+    (r) => !q || r.agent.toLowerCase().includes(q) || r.status.toLowerCase().includes(q)
+  );
+
+  if (loading && !data) {
+    return (
+      <div className="flex h-60 items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="flex h-60 flex-col items-center justify-center gap-3">
+        <p className="text-sm text-red-400">{error}</p>
+        <button
+          onClick={loadData}
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-500"
+        >
+          {t("loading.retry")}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>
+            {t("nav.subagents")}
+          </h1>
+          <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
+            {data && t("subagents.summary", String(data.agents.length), String(data.chains.length))}
+          </p>
+        </div>
+        <button
+          onClick={loadData}
+          className="flex items-center gap-2 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-300 hover:bg-gray-800"
+        >
+          <Loader2 className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          {t("dashboard.refresh_now")}
+        </button>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 rounded-lg bg-gray-900 p-1">
+        {(["agents", "chains", "history"] as Tab[]).map((tKey) => (
+          <button
+            key={tKey}
+            onClick={() => setTab(tKey)}
+            className={`flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+              tab === tKey
+                ? "bg-blue-600/10 text-blue-400"
+                : "text-gray-400 hover:text-gray-200"
+            }`}
+          >
+            {tKey === "agents" && <Brain className="h-4 w-4" />}
+            {tKey === "chains" && <GitBranch className="h-4 w-4" />}
+            {tKey === "history" && <History className="h-4 w-4" />}
+            {t(`subagents.tab_${tKey}`)}
+            {data && tKey === "agents" && (
+              <span className={`rounded-full px-2 py-0.5 text-xs ${tab === "agents" ? "bg-blue-600/20 text-blue-300" : "bg-blue-600/10 text-blue-400"}`}>{data.agents.length}</span>
+            )}
+            {data && tKey === "chains" && (
+              <span className={`rounded-full px-2 py-0.5 text-xs ${tab === "chains" ? "bg-blue-600/20 text-blue-300" : "bg-blue-600/10 text-blue-400"}`}>{data.chains.length}</span>
+            )}
+            {data && tKey === "history" && (
+              <span className={`rounded-full px-2 py-0.5 text-xs ${tab === "history" ? "bg-blue-600/20 text-blue-300" : "bg-blue-600/10 text-blue-400"}`}>{data.runHistory.length}</span>
+            )}
+          </button>
+        ))}
+        {data && (data.agents.length > 5 || data.chains.length > 5) && (
+          <div className="relative ml-auto">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("models.search_placeholder")}
+              className="w-48 rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Tab Content */}
+      <div>
+        {tab === "agents" && (
+          <AgentList
+            agents={filteredAgents ?? []}
+            onRefresh={loadData}
+            searchActive={!!q}
+          />
+        )}
+        {tab === "chains" && (
+          <ChainList
+            chains={filteredChains ?? []}
+            searchActive={!!q}
+          />
+        )}
+        {tab === "history" && (
+          <RunHistoryList
+            records={filteredHistory ?? []}
+            searchActive={!!q}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Agent List ────────────────────────────────────────────
+
+function AgentList({
+  agents,
+  onRefresh,
+  searchActive,
+}: {
+  agents: AgentDef[];
+  onRefresh: () => void;
+  searchActive: boolean;
+}) {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<AgentDef | null>(null);
+
+  if (agents.length === 0) {
+    return (
+      <EmptyState
+        icon={<Brain className="h-8 w-8" />}
+        title={t("subagents.no_agents")}
+        description={t("subagents.no_agents_desc")}
+      />
+    );
+  }
+
+  return (
+    <div className="flex overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50">
+      {/* Left: Agent cards */}
+      <div className="w-72 shrink-0 border-r border-gray-800 p-3 space-y-2 overflow-y-auto max-h-[70vh]">
+        {agents.map((agent) => (
+          <button
+            key={agent.fileName}
+            onClick={() => setSelected(agent)}
+            className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${
+              selected?.fileName === agent.fileName
+                ? "border-blue-500/30 bg-gray-800 text-white"
+                : "border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Brain className="h-4 w-4 shrink-0 text-blue-400" />
+              <span className="truncate text-sm font-medium">{agent.name}</span>
+              <Badge variant={agent.package === "custom" ? "default" : "info"}>
+                {agent.package}
+              </Badge>
+            </div>
+            <p className="mt-1 line-clamp-2 text-xs text-gray-500">{agent.description}</p>
+          </button>
+        ))}
+      </div>
+
+      {/* Right: Agent detail */}
+      <div className="min-w-0 flex-1 p-6">
+        {selected ? (
+          <AgentDetail agent={selected} />
+        ) : (
+          <div className="flex h-40 items-center justify-center text-sm text-gray-500">
+            {t("providers_models.select_hint")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AgentDetail({ agent }: { agent: AgentDef }) {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <h2 className="text-lg font-semibold text-white">{agent.name}</h2>
+        <Badge variant={agent.package === "custom" ? "default" : "info"}>
+          {agent.package}
+        </Badge>
+      </div>
+
+      <p className="text-sm text-gray-400">{agent.description}</p>
+
+      <div className="grid grid-cols-2 gap-4 rounded-lg border border-gray-800 bg-gray-900/70 p-4">
+        {agent.model && (
+          <div>
+            <span className="text-xs text-gray-500">{t("subagents.model")}</span>
+            <p className="mt-0.5 text-sm text-gray-200 font-mono">{agent.model}</p>
+          </div>
+        )}
+        {agent.thinking && (
+          <div>
+            <span className="text-xs text-gray-500">{t("subagents.thinking")}</span>
+            <p className="mt-0.5 text-sm text-gray-200">{agent.thinking}</p>
+          </div>
+        )}
+        {agent.tools && (
+          <div className="col-span-2">
+            <span className="text-xs text-gray-500">{t("subagents.tools")}</span>
+            <div className="mt-1 flex flex-wrap gap-1.5">
+              {agent.tools.map((tool) => (
+                <span
+                  key={tool}
+                  className="rounded-md border border-gray-700 bg-gray-800 px-2 py-0.5 font-mono text-xs text-gray-300"
+                >
+                  {tool}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+        <div>
+          <span className="text-xs text-gray-500">{t("subagents.system_prompt_mode")}</span>
+          <p className="mt-0.5 text-sm text-gray-200">{agent.systemPromptMode || "replace"}</p>
+        </div>
+        <div>
+          <span className="text-xs text-gray-500">{t("subagents.input")}</span>
+          <p className="mt-0.5 text-sm text-gray-200">{(agent.input ?? ["text"]).join(", ")}</p>
+        </div>
+      </div>
+
+      {/* Body (system prompt preview) */}
+      <div>
+        <span className="text-xs text-gray-500">{t("subagents.system_prompt")}</span>
+        <pre className="mt-1.5 max-h-48 overflow-y-auto rounded-lg border border-gray-800 bg-gray-950 p-3 text-xs text-gray-400 whitespace-pre-wrap font-mono">
+          {agent.body || t("subagents.empty_prompt")}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+// ─── Chain List ────────────────────────────────────────────
+
+function ChainList({
+  chains,
+  searchActive,
+}: {
+  chains: ChainDef[];
+  searchActive: boolean;
+}) {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<ChainDef | null>(null);
+
+  if (chains.length === 0) {
+    return (
+      <EmptyState
+        icon={<GitBranch className="h-8 w-8" />}
+        title={t("subagents.no_chains")}
+        description={t("subagents.no_chains_desc")}
+      />
+    );
+  }
+
+  return (
+    <div className="flex overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50">
+      <div className="w-72 shrink-0 border-r border-gray-800 p-3 space-y-2 overflow-y-auto max-h-[70vh]">
+        {chains.map((chain) => (
+          <button
+            key={chain.fileName}
+            onClick={() => setSelected(chain)}
+            className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${
+              selected?.fileName === chain.fileName
+                ? "border-blue-500/30 bg-gray-800 text-white"
+                : "border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <GitBranch className="h-4 w-4 shrink-0 text-emerald-400" />
+              <span className="truncate text-sm font-medium">{chain.name}</span>
+            </div>
+            <p className="mt-1 line-clamp-2 text-xs text-gray-500">{chain.description}</p>
+            <p className="mt-1 text-xs text-gray-600">
+              {chain.steps.length} {t("subagents.steps_count").toLowerCase()}
+            </p>
+          </button>
+        ))}
+      </div>
+
+      <div className="min-w-0 flex-1 p-6">
+        {selected ? (
+          <ChainDetail chain={selected} />
+        ) : (
+          <div className="flex h-40 items-center justify-center text-sm text-gray-500">
+            {t("providers_models.select_hint")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StepIcon({ agent }: { agent: string }) {
+  const isParallel = agent.includes("|");
+  if (isParallel) return <Users className="h-4 w-4 text-purple-400" />;
+  return <Box className="h-4 w-4 text-blue-400" />;
+}
+
+function ChainDetail({ chain }: { chain: ChainDef }) {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold text-white">{chain.name}</h2>
+      <p className="text-sm text-gray-400">{chain.description}</p>
+
+      <div className="space-y-3">
+        <span className="text-xs font-medium text-gray-500">{t("subagents.pipeline")}</span>
+        <div className="relative">
+          {/* Vertical line connector */}
+          <div className="absolute left-4 top-2 bottom-2 w-0.5 bg-gray-700" />
+
+          {chain.steps.map((step, i) => (
+            <div key={i} className="relative flex items-start gap-4 pb-4 last:pb-0">
+              <div className="z-10 flex h-8 w-8 items-center justify-center rounded-full border border-gray-600 bg-gray-800">
+                <StepIcon agent={step.agent} />
+              </div>
+              <div className="min-w-0 flex-1 pt-1">
+                <p className="text-sm text-gray-200">
+                  {step.agent.split("|").map((a, j) => (
+                    <span key={j}>
+                      {j > 0 && <span className="text-gray-500 mx-1">|</span>}
+                      <code className="text-blue-300">{a.trim()}</code>
+                    </span>
+                  ))}
+                </p>
+                <div className="mt-1 flex flex-wrap gap-2 text-xs text-gray-500">
+                  {step.phase && <span>{t("subagents.phase")}: {step.phase}</span>}
+                  {step.label && <span>{t("subagents.label")}: {step.label}</span>}
+                  {step.output && <span>{t("subagents.output")}: {step.output}</span>}
+                </div>
+              </div>
+              <span className="shrink-0 text-xs text-gray-600">#{i + 1}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Run History ───────────────────────────────────────────
+
+function RunHistoryList({
+  records,
+  searchActive,
+}: {
+  records: RunRecord[];
+  searchActive: boolean;
+}) {
+  const { t } = useTranslation();
+
+  if (records.length === 0) {
+    return (
+      <EmptyState
+        icon={<History className="h-8 w-8" />}
+        title={t("subagents.no_history")}
+        description={t("subagents.no_history_desc")}
+      />
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-gray-800">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-gray-800 bg-gray-900/70">
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500">{t("subagents.agent")}</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500">{t("subagents.time")}</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500">{t("subagents.status")}</th>
+            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500">{t("subagents.duration")}</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-800">
+          {records.map((r, i) => (
+            <tr key={`${r.taskHash}-${i}`} className="hover:bg-gray-800/40">
+              <td className="px-4 py-3">
+                <code className="text-sm text-blue-300">{r.agent}</code>
+              </td>
+              <td className="px-4 py-3 text-gray-400">
+                {formatTimestamp(r.ts)}
+              </td>
+              <td className="px-4 py-3">
+                {r.status === "ok" ? (
+                  <span className="flex items-center gap-1 text-emerald-400">
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                    {t("subagents.status_ok")}
+                  </span>
+                ) : (
+                  <span className="flex items-center gap-1 text-red-400">
+                    <XCircle className="h-3.5 w-3.5" />
+                    {t("subagents.status_error")}
+                    {r.exit != null && <span className="text-xs text-gray-500">(exit {r.exit})</span>}
+                  </span>
+                )}
+              </td>
+              <td className="px-4 py-3 text-right text-gray-400">
+                {r.duration != null ? formatDuration(r.duration) : "—"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {records.length >= 100 && (
+        <p className="border-t border-gray-800 px-4 py-2 text-xs text-gray-500">
+          {t("subagents.showing_recent")}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── Helpers ───────────────────────────────────────────────
+
+function formatTimestamp(ts: number): string {
+  const d = new Date(ts * 1000);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  return d.toLocaleDateString();
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  const rem = sec % 60;
+  return `${min}m ${rem}s`;
+}

package/src/data/builtin-providers.ts

@@ -10,6 +10,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Anthropic",
     type: "builtin",
     api: "anthropic-messages",
+    baseUrl: "https://api.anthropic.com/v1",
     hasAuth: true,
     authMethod: "env",
     models: [
@@ -24,6 +25,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "OpenAI",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://api.openai.com/v1",
     hasAuth: true,
     authMethod: "env",
     models: [
@@ -38,6 +40,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "DeepSeek",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://api.deepseek.com/v1",
     hasAuth: true,
     authMethod: "env",
     models: [
@@ -77,6 +80,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Google Gemini",
     type: "builtin",
     api: "google-generative-ai",
+    baseUrl: "https://generativelanguage.googleapis.com/v1beta",
     hasAuth: true,
     authMethod: "env",
     models: [
@@ -89,6 +93,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "OpenRouter",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://openrouter.ai/api/v1",
     hasAuth: false,
     authMethod: "none",
     models: [
@@ -101,6 +106,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Mistral",
     type: "builtin",
     api: "mistral-conversations",
+    baseUrl: "https://api.mistral.ai/v1",
     hasAuth: false,
     authMethod: "none",
     models: [
@@ -112,6 +118,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "GitHub Copilot",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://api.githubcopilot.com",
     hasAuth: false,
     authMethod: "none",
     models: [
@@ -123,6 +130,7 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Groq",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://api.groq.com/openai/v1",
     hasAuth: false,
     authMethod: "none",
     models: [

package/src/lib/translations/en.ts

@@ -7,6 +7,7 @@ const en: Record<string, string> = {
   "nav.models": "Models",
   "nav.providers": "Providers",
   "nav.providers_models": "Providers & Models",
+  "nav.subagents": "Subagents",
   "providers_models.subtitle": "Manage model providers and models. Changes are written to ~/.pi/agent/.",
   "providers_models.custom_providers": "Custom Providers",
   "providers_models.model_list": "Model List",
@@ -33,13 +34,61 @@ const en: Record<string, string> = {
     "providers_models.import_placeholder": "tokenrouter baseurl: https://api.example.com/v1 key: sk-xxxx\nmodelid: vendor/model-name",
     "providers_models.import_empty": "No valid content detected in the text",
     "providers_models.import_merge": "Provider “{0}” already exists — models will be merged into it",
-    "providers_models.import_builtin_conflict": "Conflicts with builtin provider “{0}” — please change the name",
+      "providers_models.import_builtin_conflict": "Conflicts with builtin provider “{0}” — please change the name",
+  "providers_models.fetch_models": "Fetch Models",
+  "providers_models.fetch_no_endpoint": "This provider has no usable /models endpoint",
+  "providers_models.fetching": "Fetching...",
+  "providers_models.fetch_error": "Failed: {0}",
+  "providers_models.fetch_empty": "No models returned by this provider",
+  "providers_models.modality_vision": "Vision",
+  "providers_models.modality_text": "Text",
+  "providers_models.id_invalid": "Cannot derive a valid ID from the name or URL — fill in the base URL or use an ASCII name",
+  "providers_models.fetch_title": "Import Models",
+  "providers_models.fetch_desc": "Fetch available models from {0}'s /models endpoint and select models to import.",
+  "providers_models.select_all": "Select All",
+  "providers_models.deselect_all": "Deselect All",
+  "providers_models.selected_count": "{0}/{1} models selected",
+  "providers_models.confirm_import": "Import Selected",
+
+  "providers_models.import_done": "Imported {0} models",
+
   "nav.sessions": "Sessions",
   "nav.memory": "Memory",
   "nav.settings": "Settings",
   "app.subtitle": "Configuration Manager",
   "app.version": "pi-switch v0.1.0",
 
+  // Subagents
+  "subagents.summary": "{0} agents · {1} chains",
+  "subagents.tab_agents": "Agents",
+  "subagents.tab_chains": "Chains",
+  "subagents.tab_history": "Run History",
+  "subagents.no_agents": "No agents found",
+  "subagents.no_agents_desc": "Create agent .md files in ~/.pi/agent/agents/ to get started.",
+  "subagents.no_chains": "No chains found",
+  "subagents.no_chains_desc": "Create chain .chain.md files in ~/.pi/agent/chains/ to get started.",
+  "subagents.no_history": "No run history",
+  "subagents.no_history_desc": "Subagent run history will appear here after agents are executed.",
+  "subagents.model": "Model",
+  "subagents.thinking": "Thinking Level",
+  "subagents.tools": "Tools",
+  "subagents.system_prompt_mode": "System Prompt Mode",
+  "subagents.input": "Input Types",
+  "subagents.system_prompt": "System Prompt",
+  "subagents.empty_prompt": "(empty)",
+  "subagents.steps_count": "steps",
+  "subagents.pipeline": "Pipeline",
+  "subagents.phase": "Phase",
+  "subagents.label": "Label",
+  "subagents.output": "Output",
+  "subagents.agent": "Agent",
+  "subagents.time": "Time",
+  "subagents.status": "Status",
+  "subagents.duration": "Duration",
+  "subagents.status_ok": "OK",
+  "subagents.status_error": "Error",
+  "subagents.showing_recent": "Showing 100 most recent records",
+
   // Dashboard
   "dashboard.title": "Usage Statistics",
   "dashboard.requests_count": "{0} requests · {1} total cost",
@@ -90,6 +139,8 @@ const en: Record<string, string> = {
   // Models
   "models.search_placeholder": "Search models...",
   "models.add_model": "Add Model",
+
+  "models.test_model": "Test Model",
   "models.edit_model": "Edit Model",
   "models.delete_model": "Delete Model",
   "models.no_models": "No models found",
@@ -110,9 +161,18 @@ const en: Record<string, string> = {
   "models.cancel": "Cancel",
   "models.delete_confirm": "Are you sure you want to delete this model?",
 
+  // Compat
+  "compat.title": "API Compatibility",
+  "compat.desc": "Override default behavior for OpenAI-compatible providers that don't support certain features.",
+  "compat.supports_developer_role": "Supports developer role",
+  "compat.supports_developer_role_desc": "Send system prompt as 'developer' role (for reasoning models). Disable if the API only accepts 'system' role.",
+  "compat.supports_reasoning_effort": "Supports reasoning_effort",
+  "compat.supports_reasoning_effort_desc": "Send reasoning_effort parameter. Disable if the API does not support it.",
+
   // Providers
   "providers.add_provider": "Add Provider",
   "providers.delete_provider": "Delete Provider",
+  "providers.duplicate_provider": "Duplicate Provider",
   "providers.custom": "Custom",
   "providers.builtin": "Built-in",
   "providers.configured": "Configured",