zevairouter 1.0.0

package/src/app/(dashboard)/dashboard/media-providers/combo/[id]/page.js

@@ -0,0 +1,410 @@
+"use client";
+
+import { useParams, notFound, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Card, Button, Input, Toggle, ModelSelectModal } from "@/shared/components";
+import ProviderIcon from "@/shared/components/ProviderIcon";
+import { AI_PROVIDERS, MEDIA_PROVIDER_KINDS } from "@/shared/constants/providers";
+
+// Parse "providerId/model" or just "providerId" → { providerId, model }
+function parseModelEntry(entry) {
+  if (typeof entry !== "string") return { providerId: "", model: "" };
+  const idx = entry.indexOf("/");
+  if (idx < 0) return { providerId: entry, model: "" };
+  return { providerId: entry.slice(0, idx), model: entry.slice(idx + 1) };
+}
+
+const VALID_NAME_REGEX = /^[a-zA-Z0-9_.\-]+$/;
+
+const KIND_LABELS = {
+  webSearch: "Web Search",
+  webFetch: "Web Fetch",
+  image: "Text to Image",
+  tts: "Text To Speech",
+};
+
+const EXAMPLE_PATHS = {
+  webSearch: "/v1/search",
+  webFetch: "/v1/web/fetch",
+  image: "/v1/images/generations",
+  tts: "/v1/audio/speech",
+};
+
+const EXAMPLE_BODIES = {
+  webSearch: (n) => ({ model: n, query: "What is the latest news about AI?", search_type: "web", max_results: 5 }),
+  webFetch: (n) => ({ model: n, url: "https://example.com", format: "markdown" }),
+  image: (n) => ({ model: n, prompt: "A cute cat playing piano", n: 1, size: "1024x1024" }),
+  tts: (n) => ({ model: n, input: "Hello, this is a test.", voice: "alloy" }),
+};
+
+// Map combo.kind → listing route to go back to
+function getListingHref(kind) {
+  if (kind === "webSearch" || kind === "webFetch") return "/dashboard/media-providers/web";
+  return `/dashboard/media-providers/${kind}`;
+}
+
+export default function ComboDetailPage() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [combo, setCombo] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState("");
+  const [nameError, setNameError] = useState("");
+  const [providers, setProviders] = useState([]);
+  const [roundRobin, setRoundRobin] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [testError, setTestError] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [connections, setConnections] = useState([]);
+  const [modelAliases, setModelAliases] = useState({});
+
+  const fetchAll = async () => {
+    try {
+      const [comboRes, settingsRes, logsRes, keysRes, connsRes, aliasesRes] = await Promise.all([
+        fetch(`/api/combos/${id}`, { cache: "no-store" }),
+        fetch("/api/settings", { cache: "no-store" }),
+        fetch("/api/usage/logs", { cache: "no-store" }),
+        fetch("/api/keys", { cache: "no-store" }),
+        fetch("/api/providers", { cache: "no-store" }),
+        fetch("/api/models/alias", { cache: "no-store" }),
+      ]);
+      if (aliasesRes.ok) setModelAliases((await aliasesRes.json()).aliases || {});
+      if (keysRes.ok) {
+        const k = await keysRes.json();
+        setApiKey((k.keys || []).find((x) => x.isActive !== false)?.key || "");
+      }
+      if (connsRes.ok) setConnections((await connsRes.json()).connections || []);
+      if (!comboRes.ok) { setCombo(null); setLoading(false); return; }
+      const c = await comboRes.json();
+      setCombo(c);
+      setName(c.name);
+      setProviders(c.models || []);
+      const s = settingsRes.ok ? await settingsRes.json() : {};
+      setRoundRobin(s.comboStrategies?.[c.name]?.fallbackStrategy === "round-robin");
+      const allLogs = logsRes.ok ? await logsRes.json() : [];
+      setLogs(allLogs.filter((l) => typeof l === "string" && l.includes(c.name)).slice(0, 50));
+    } catch { /* noop */ }
+    setLoading(false);
+  };
+
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { fetchAll(); }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const validateName = (v) => {
+    if (!v.trim()) { setNameError("Name is required"); return false; }
+    if (!VALID_NAME_REGEX.test(v)) { setNameError("Only letters, numbers, -, _ and ."); return false; }
+    setNameError("");
+    return true;
+  };
+
+  const saveCombo = async (patch) => {
+    const res = await fetch(`/api/combos/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(patch),
+    });
+    if (!res.ok) { const err = await res.json(); alert(err.error || "Failed to save"); return false; }
+    return true;
+  };
+
+  const handleSaveName = async () => {
+    if (!validateName(name)) return;
+    if (name === combo.name) return;
+    const ok = await saveCombo({ name });
+    if (ok) await fetchAll();
+  };
+
+  const handleAddModel = async (model) => {
+    const value = model?.value || model;
+    if (!value || providers.includes(value)) return;
+    const next = [...providers, value];
+    setProviders(next);
+    await saveCombo({ models: next });
+  };
+
+  const handleDeselectModel = async (model) => {
+    const value = model?.value || model;
+    if (!value || !providers.includes(value)) return;
+    const next = providers.filter((p) => p !== value);
+    setProviders(next);
+    await saveCombo({ models: next });
+  };
+
+  const handleRemoveProvider = async (idx) => {
+    const next = providers.filter((_, i) => i !== idx);
+    setProviders(next);
+    await saveCombo({ models: next });
+  };
+
+  const handleMove = async (idx, dir) => {
+    const next = [...providers];
+    const swap = idx + dir;
+    if (swap < 0 || swap >= next.length) return;
+    [next[idx], next[swap]] = [next[swap], next[idx]];
+    setProviders(next);
+    await saveCombo({ models: next });
+  };
+
+  const handleToggleRoundRobin = async (enabled) => {
+    setRoundRobin(enabled);
+    const settingsRes = await fetch("/api/settings", { cache: "no-store" });
+    const s = settingsRes.ok ? await settingsRes.json() : {};
+    const updated = { ...(s.comboStrategies || {}) };
+    if (enabled) updated[combo.name] = { fallbackStrategy: "round-robin" };
+    else delete updated[combo.name];
+    await fetch("/api/settings", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ comboStrategies: updated }),
+    });
+  };
+
+  const handleDelete = async () => {
+    if (!confirm(`Delete combo "${combo.name}"?`)) return;
+    const res = await fetch(`/api/combos/${id}`, { method: "DELETE" });
+    if (res.ok) router.push(getListingHref(combo.kind));
+  };
+
+  const handleTest = async () => {
+    setTesting(true);
+    setTestResult(null);
+    setTestError("");
+    if (testResult?.audioUrl) { try { URL.revokeObjectURL(testResult.audioUrl); } catch {} }
+    if (testResult?.imageUrl?.startsWith("blob:")) { try { URL.revokeObjectURL(testResult.imageUrl); } catch {} }
+    const start = Date.now();
+    try {
+      const path = EXAMPLE_PATHS[combo.kind];
+      const body = EXAMPLE_BODIES[combo.kind](combo.name);
+      const headers = { "Content-Type": "application/json" };
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+      const res = await fetch(`/api${path}`, { method: "POST", headers, body: JSON.stringify(body) });
+      const latencyMs = Date.now() - start;
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        setTestError(d?.error?.message || d?.error || `HTTP ${res.status}`);
+        setTestResult({ json: JSON.stringify(d, null, 2), latencyMs });
+        return;
+      }
+      const ctype = res.headers.get("content-type") || "";
+      // Binary image
+      if (ctype.startsWith("image/")) {
+        const blob = await res.blob();
+        setTestResult({ imageUrl: URL.createObjectURL(blob), latencyMs });
+        return;
+      }
+      // Binary audio
+      if (ctype.startsWith("audio/") || ctype === "application/octet-stream") {
+        const blob = await res.blob();
+        setTestResult({ audioUrl: URL.createObjectURL(blob), latencyMs });
+        return;
+      }
+      // JSON — could be image (data[0].b64_json/url) or generic
+      const data = await res.json();
+      const first = data?.data?.[0];
+      const imageUrl = first?.b64_json
+        ? `data:image/png;base64,${first.b64_json}`
+        : (first?.url || "");
+      setTestResult({ json: JSON.stringify(maskB64(data), null, 2), imageUrl, latencyMs });
+    } catch (e) {
+      setTestError(e.message || "Network error");
+    }
+    setTesting(false);
+  };
+
+  // Mask large b64_json strings to keep JSON view readable
+  function maskB64(obj) {
+    if (!obj || typeof obj !== "object") return obj;
+    if (Array.isArray(obj)) return obj.map(maskB64);
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+      out[k] = (k === "b64_json" && typeof v === "string" && v.length > 100)
+        ? `<${v.length} chars base64>`
+        : maskB64(v);
+    }
+    return out;
+  }
+
+  if (loading) return <div className="text-text-muted text-sm">Loading...</div>;
+  if (!combo) return notFound();
+
+  const kindLabel = KIND_LABELS[combo.kind] || MEDIA_PROVIDER_KINDS.find((k) => k.id === combo.kind)?.label || "Combo";
+  const examplePath = EXAMPLE_PATHS[combo.kind];
+  const exampleBody = combo.kind && EXAMPLE_BODIES[combo.kind] ? EXAMPLE_BODIES[combo.kind](combo.name) : null;
+  const curlExample = examplePath
+    ? `curl -X POST http://localhost:20128${examplePath} \\\n  -H "Content-Type: application/json" \\\n  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}" \\\n  -d '${JSON.stringify(exampleBody)}'`
+    : "";
+  const backHref = getListingHref(combo.kind);
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-3 min-w-0">
+          <Link href={backHref} className="text-text-muted hover:text-primary">
+            <span className="material-symbols-outlined">arrow_back</span>
+          </Link>
+          <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <span className="material-symbols-outlined text-primary">layers</span>
+          </div>
+          <div className="min-w-0">
+            <p className="text-xs text-text-muted">{kindLabel} Combo</p>
+            <code className="text-lg font-semibold font-mono">{combo.name}</code>
+          </div>
+        </div>
+        <Button variant="outline" icon="delete" onClick={handleDelete} className="text-red-500 border-red-200 hover:bg-red-50">
+          Delete
+        </Button>
+      </div>
+
+      {/* Settings Card */}
+      <Card>
+        <h2 className="text-lg font-semibold mb-3">Settings</h2>
+        <div className="flex flex-col gap-4">
+          <div>
+            <Input label="Combo Name" value={name} onChange={(e) => { setName(e.target.value); validateName(e.target.value); }} onBlur={handleSaveName} error={nameError} />
+            <p className="text-[10px] text-text-muted mt-0.5">Only letters, numbers, -, _ and .</p>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Round Robin</p>
+              <p className="text-xs text-text-muted">Rotate providers across requests instead of strict fallback order.</p>
+            </div>
+            <Toggle checked={roundRobin} onChange={handleToggleRoundRobin} />
+          </div>
+        </div>
+      </Card>
+
+      {/* Providers Card */}
+      <Card>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-3">
+          <div>
+            <h2 className="text-lg font-semibold">Providers</h2>
+            <p className="text-xs text-text-muted">Tried in order (top-down) or rotated when round-robin is on.</p>
+          </div>
+          <Button size="sm" icon="add" onClick={() => setShowPicker(true)}>Add Provider</Button>
+        </div>
+        {providers.length === 0 ? (
+          <div className="text-center py-6 border border-dashed border-border rounded-lg text-text-muted text-sm">
+            No providers yet.
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {providers.map((entry, idx) => {
+              const { providerId, model } = parseModelEntry(entry);
+              const p = AI_PROVIDERS[providerId];
+              return (
+                <div key={`${entry}-${idx}`} className="flex items-center gap-3 p-2 rounded-lg bg-black/[0.02] dark:bg-white/[0.02]">
+                  <span className="text-xs text-text-muted w-5 text-center">{idx + 1}</span>
+                  <ProviderIcon
+                    src={`/providers/${providerId}.png`}
+                    alt={p?.name || providerId}
+                    size={24}
+                    className="object-contain rounded shrink-0"
+                    fallbackText={p?.textIcon || providerId.slice(0, 2).toUpperCase()}
+                    fallbackColor={p?.color}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium truncate">{p?.name || providerId}</div>
+                    {model && <code className="text-[10px] text-text-muted font-mono truncate block">{model}</code>}
+                  </div>
+                  <div className="flex items-center gap-0.5">
+                    <button onClick={() => handleMove(idx, -1)} disabled={idx === 0} className={`p-1 rounded ${idx === 0 ? "text-text-muted/20" : "text-text-muted hover:text-primary hover:bg-black/5"}`} title="Move up">
+                      <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
+                    </button>
+                    <button onClick={() => handleMove(idx, 1)} disabled={idx === providers.length - 1} className={`p-1 rounded ${idx === providers.length - 1 ? "text-text-muted/20" : "text-text-muted hover:text-primary hover:bg-black/5"}`} title="Move down">
+                      <span className="material-symbols-outlined text-[16px]">arrow_downward</span>
+                    </button>
+                    <button onClick={() => handleRemoveProvider(idx)} className="p-1 rounded text-text-muted hover:text-red-500 hover:bg-red-500/10" title="Remove">
+                      <span className="material-symbols-outlined text-[16px]">close</span>
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </Card>
+
+      {/* Test Example Card */}
+      {combo.kind && examplePath && (
+        <Card>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-3">
+            <h2 className="text-lg font-semibold">Test Example</h2>
+            <Button size="sm" icon="play_arrow" onClick={handleTest} disabled={testing || providers.length === 0}>
+              {testing ? "Running..." : "Run"}
+            </Button>
+          </div>
+          <pre className="text-xs font-mono bg-black/[0.03] dark:bg-white/[0.03] p-3 rounded-lg overflow-x-auto whitespace-pre-wrap break-all">
+            {curlExample}
+          </pre>
+          {testError && (
+            <p className="mt-3 text-xs text-red-500 break-words">{testError}</p>
+          )}
+          {testResult && (
+            <div className="mt-3 flex flex-col gap-3">
+              {testResult.latencyMs != null && (
+                <span className="text-[11px] text-text-muted">⚡ {testResult.latencyMs}ms</span>
+              )}
+              {testResult.imageUrl && (
+                <div>
+                  <div className="flex items-center justify-end mb-1.5">
+                    <a href={testResult.imageUrl} download="image.png" className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors">
+                      <span className="material-symbols-outlined text-[14px]">download</span>
+                      Download
+                    </a>
+                  </div>
+                  <img src={testResult.imageUrl} alt="Generated" className="max-w-full rounded-lg border border-border" />
+                </div>
+              )}
+              {testResult.audioUrl && (
+                <div>
+                  <div className="flex items-center justify-end mb-1.5">
+                    <a href={testResult.audioUrl} download="speech.mp3" className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors">
+                      <span className="material-symbols-outlined text-[14px]">download</span>
+                      Download
+                    </a>
+                  </div>
+                  <audio controls src={testResult.audioUrl} className="w-full" />
+                </div>
+              )}
+              {testResult.json && (
+                <pre className="text-xs font-mono bg-black/[0.03] dark:bg-white/[0.03] p-3 rounded-lg overflow-auto max-h-[300px] whitespace-pre-wrap break-all">
+                  {testResult.json}
+                </pre>
+              )}
+            </div>
+          )}
+        </Card>
+      )}
+
+      {/* Usage Logs Card */}
+      <Card>
+        <h2 className="text-lg font-semibold mb-3">Usage Logs</h2>
+        {logs.length === 0 ? (
+          <p className="text-xs text-text-muted italic">No usage yet.</p>
+        ) : (
+          <pre className="text-[11px] font-mono bg-black/[0.03] dark:bg-white/[0.03] p-3 rounded-lg overflow-auto max-h-[400px] whitespace-pre-wrap">
+            {logs.join("\n")}
+          </pre>
+        )}
+      </Card>
+
+      <ModelSelectModal
+        isOpen={showPicker}
+        onClose={() => setShowPicker(false)}
+        onSelect={handleAddModel}
+        onDeselect={handleDeselectModel}
+        activeProviders={connections}
+        modelAliases={modelAliases}
+        title={`Add ${kindLabel} Model`}
+        kindFilter={combo.kind}
+        addedModelValues={providers}
+        closeOnSelect={false}
+      />
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/media-providers/web/page.js

@@ -0,0 +1,209 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, Badge, Button } from "@/shared/components";
+import ProviderIcon from "@/shared/components/ProviderIcon";
+import { AI_PROVIDERS, getProvidersByKind } from "@/shared/constants/providers";
+
+function getEffectiveStatus(conn) {
+  const isCooldown = Object.entries(conn).some(
+    ([k, v]) => k.startsWith("modelLock_") && v && new Date(v).getTime() > Date.now()
+  );
+  return conn.testStatus === "unavailable" && !isCooldown ? "active" : conn.testStatus;
+}
+
+function ProviderCard({ provider, kind, connections }) {
+  const providerInfo = AI_PROVIDERS[provider.id];
+  const isNoAuth = !!providerInfo?.noAuth;
+  const providerConns = connections.filter((c) => c.provider === provider.id);
+  const connected = providerConns.filter((c) => { const s = getEffectiveStatus(c); return s === "active" || s === "success"; }).length;
+  const error = providerConns.filter((c) => { const s = getEffectiveStatus(c); return s === "error" || s === "expired" || s === "unavailable"; }).length;
+  const total = providerConns.length;
+  const allDisabled = total > 0 && providerConns.every((c) => c.isActive === false);
+
+  const renderStatus = () => {
+    if (isNoAuth) return <Badge variant="success" size="sm">Ready</Badge>;
+    if (allDisabled) return <Badge variant="default" size="sm">Disabled</Badge>;
+    if (total === 0) return <span className="text-xs text-text-muted">No connections</span>;
+    return (
+      <>
+        {connected > 0 && <Badge variant="success" size="sm" dot>{connected} Connected</Badge>}
+        {error > 0 && <Badge variant="error" size="sm" dot>{error} Error</Badge>}
+        {connected === 0 && error === 0 && <Badge variant="default" size="sm">{total} Added</Badge>}
+      </>
+    );
+  };
+
+  return (
+    <Link href={`/dashboard/media-providers/${kind}/${provider.id}`} className="group">
+      <Card padding="xs" className={`h-full hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""}`}>
+        <div className="flex min-w-0 items-center gap-3">
+          <div
+            className="size-8 rounded-lg flex items-center justify-center shrink-0"
+            style={{ backgroundColor: `${provider.color?.length > 7 ? provider.color : (provider.color ?? "#888") + "15"}` }}
+          >
+            <ProviderIcon
+              src={`/providers/${provider.id}.png`}
+              alt={provider.name}
+              size={30}
+              className="object-contain rounded-lg max-w-[30px] max-h-[30px]"
+              fallbackText={provider.textIcon || provider.id.slice(0, 2).toUpperCase()}
+              fallbackColor={provider.color}
+            />
+          </div>
+          <div>
+            <h3 className="font-semibold text-sm">{provider.name}</h3>
+            <div className="flex items-center gap-2 mt-0.5 flex-wrap">{renderStatus()}</div>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
+
+function ComboList({ combos }) {
+  if (combos.length === 0) {
+    return <p className="text-xs text-text-muted italic">No combos yet.</p>;
+  }
+  return (
+    <div className="flex flex-col gap-2">
+      {combos.map((combo) => (
+        <Link key={combo.id} href={`/dashboard/media-providers/combo/${combo.id}`}>
+          <Card padding="xs" className="hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors cursor-pointer">
+            <div className="flex min-w-0 items-center gap-3">
+              <span className="material-symbols-outlined text-primary text-[18px]">layers</span>
+              <code className="text-sm font-mono font-medium flex-1 truncate">{combo.name}</code>
+              {/* Provider icons preview */}
+              <div className="flex flex-wrap items-center gap-1 sm:shrink-0">
+                {combo.models.slice(0, 6).map((entry, i) => {
+                  const pid = typeof entry === "string" ? entry.split("/")[0] : "";
+                  const p = AI_PROVIDERS[pid];
+                  return (
+                    <div key={`${entry}-${i}`} title={p?.name || entry} className="size-5 rounded flex items-center justify-center" style={{ backgroundColor: `${(p?.color ?? "#888")}15` }}>
+                      <ProviderIcon
+                        src={`/providers/${pid}.png`}
+                        alt={p?.name || pid}
+                        size={18}
+                        className="object-contain rounded max-w-[18px] max-h-[18px]"
+                        fallbackText={p?.textIcon || pid.slice(0, 2).toUpperCase()}
+                        fallbackColor={p?.color}
+                      />
+                    </div>
+                  );
+                })}
+                {combo.models.length > 6 && (
+                  <span className="text-[10px] text-text-muted ml-1">+{combo.models.length - 6}</span>
+                )}
+              </div>
+              <span className="text-[11px] text-text-muted shrink-0">{combo.models.length}</span>
+              <span className="material-symbols-outlined text-text-muted text-[16px]">chevron_right</span>
+            </div>
+          </Card>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+function Section({ title, icon, kind, providers, connections, combos, onCreateCombo }) {
+  return (
+    <div>
+      {/* Header — title left, Create Combo right */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="material-symbols-outlined text-primary">{icon}</span>
+          <h2 className="text-base font-semibold">{title}</h2>
+          <span className="text-xs text-text-muted">({providers.length} providers · {combos.length} combos)</span>
+        </div>
+        <Button size="sm" icon="add" onClick={onCreateCombo}>Create Combo</Button>
+      </div>
+
+      {/* Combos — top */}
+      {combos.length > 0 && (
+        <div className="mb-4">
+          <ComboList combos={combos} />
+        </div>
+      )}
+
+      {/* Providers grid — bottom */}
+      {providers.length === 0 ? (
+        <div className="text-center py-8 border border-dashed border-border rounded-xl text-text-muted text-sm">
+          No providers.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {providers.map((p) => (
+            <ProviderCard key={p.id} provider={p} kind={kind} connections={connections} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function WebProvidersPage() {
+  const router = useRouter();
+  const [connections, setConnections] = useState([]);
+  const [combos, setCombos] = useState([]);
+
+  const fetchAll = async () => {
+    try {
+      const [connsRes, combosRes] = await Promise.all([
+        fetch("/api/providers", { cache: "no-store" }),
+        fetch("/api/combos", { cache: "no-store" }),
+      ]);
+      if (connsRes.ok) setConnections((await connsRes.json()).connections || []);
+      if (combosRes.ok) setCombos((await combosRes.json()).combos || []);
+    } catch { /* noop */ }
+  };
+
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => { fetchAll(); }, []);
+
+  const searchProviders = getProvidersByKind("webSearch");
+  const fetchProviders = getProvidersByKind("webFetch");
+  const searchCombos = combos.filter((c) => c.kind === "webSearch");
+  const fetchCombos = combos.filter((c) => c.kind === "webFetch");
+
+  const handleCreateCombo = async (kind) => {
+    // Generate unique default name
+    const base = kind === "webSearch" ? "search-combo" : "fetch-combo";
+    let name = base;
+    let i = 1;
+    const existing = new Set(combos.map((c) => c.name));
+    while (existing.has(name)) { name = `${base}-${i++}`; }
+    const res = await fetch("/api/combos", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, models: [], kind }),
+    });
+    if (res.ok) {
+      const created = await res.json();
+      router.push(`/dashboard/media-providers/combo/${created.id}`);
+    } else {
+      const err = await res.json();
+      alert(err.error || "Failed to create combo");
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Section
+        title="Web Search" icon="search" kind="webSearch"
+        providers={searchProviders} connections={connections} combos={searchCombos}
+        onCreateCombo={() => handleCreateCombo("webSearch")}
+      />
+
+      {/* Divider between sections */}
+      <div className="border-t border-border" />
+
+      <Section
+        title="Web Fetch" icon="travel_explore" kind="webFetch"
+        providers={fetchProviders} connections={connections} combos={fetchCombos}
+        onCreateCombo={() => handleCreateCombo("webFetch")}
+      />
+    </div>
+  );
+}