@raingor/pi-web-switch 0.3.2 → 0.4.0

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,12 +10,13 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Anthropic",
     type: "builtin",
     api: "anthropic-messages",
+    baseUrl: "https://api.anthropic.com/v1",
     hasAuth: true,
     authMethod: "env",
     models: [
-      { id: "claude-sonnet-4", name: "Claude 4 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: true },
-      { id: "claude-sonnet-4-5", name: "Claude 4.5 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: true },
-      { id: "claude-opus-4", name: "Claude 4 Opus", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 15, output: 75, cacheRead: 1.5, cacheWrite: 18.75 }, enabled: false },
+      { id: "claude-sonnet-4", name: "Claude 4 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 16384, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: true },
+      { id: "claude-sonnet-4-5", name: "Claude 4.5 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 16384, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: false },
+      { id: "claude-opus-4", name: "Claude 4 Opus", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 32000, cost: { input: 15, output: 75, cacheRead: 1.5, cacheWrite: 18.75 }, enabled: false },
       { id: "claude-haiku-3-5", name: "Claude 3.5 Haiku", reasoning: false, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 0.8, output: 4, cacheRead: 0.08, cacheWrite: 1 }, enabled: true },
     ],
   },
@@ -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,11 +80,12 @@ 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: [
-      { id: "gemini-2.5-flash", name: "Gemini 2.5 Flash", reasoning: false, input: ["text", "image"], contextWindow: 1048576, maxTokens: 8192, cost: { input: 0.15, output: 0.6, cacheRead: 0.075, cacheWrite: 0.15 }, enabled: true },
-      { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", reasoning: true, input: ["text", "image"], contextWindow: 1048576, maxTokens: 8192, cost: { input: 1.25, output: 10, cacheRead: 0.625, cacheWrite: 1.25 }, enabled: false },
+      { id: "gemini-2.5-flash", name: "Gemini 2.5 Flash", reasoning: false, input: ["text", "image"], contextWindow: 1048576, maxTokens: 65536, cost: { input: 0.15, output: 0.6, cacheRead: 0.075, cacheWrite: 0.15 }, enabled: true },
+      { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", reasoning: true, input: ["text", "image"], contextWindow: 1048576, maxTokens: 65536, cost: { input: 1.25, output: 10, cacheRead: 0.625, cacheWrite: 1.25 }, enabled: false },
     ],
   },
   {
@@ -89,10 +93,11 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "OpenRouter",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://openrouter.ai/api/v1",
     hasAuth: false,
     authMethod: "none",
     models: [
-      { id: "openrouter/anthropic/claude-sonnet-4", name: "Claude 4 Sonnet (OpenRouter)", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: false },
+      { id: "openrouter/anthropic/claude-sonnet-4", name: "Claude 4 Sonnet (OpenRouter)", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 16384, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: false },
       { id: "openrouter/deepseek/deepseek-r1", name: "DeepSeek R1 (OpenRouter)", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.55, output: 2.19, cacheRead: 0.14, cacheWrite: 0.55 }, enabled: false },
     ],
   },
@@ -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,10 +130,11 @@ export const BUILTIN_PROVIDERS: Provider[] = [
     name: "Groq",
     type: "builtin",
     api: "openai-completions",
+    baseUrl: "https://api.groq.com/openai/v1",
     hasAuth: false,
     authMethod: "none",
     models: [
-      { id: "llama-3.3-70b", name: "Llama 3.3 70B", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.59, output: 0.79, cacheRead: 0, cacheWrite: 0 }, enabled: false },
+      { id: "llama-3.3-70b", name: "Llama 3.3 70B", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 4096, cost: { input: 0.59, output: 0.79, cacheRead: 0, cacheWrite: 0 }, enabled: false },
     ],
   },
 ];