zevairouter 1.0.154 → 1.0.155

package/src/app/(dashboard)/dashboard/cli-tools/components/AntigravityToolCard.js

@@ -1,487 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Card, Button, Badge, Modal, Input, ModelSelectModal } from "@/shared/components";
-import Image from "next/image";
-
-export default function AntigravityToolCard({
-  tool,
-  isExpanded,
-  onToggle,
-  baseUrl,
-  apiKeys,
-  activeProviders,
-  hasActiveProviders,
-  cloudEnabled,
-  initialStatus,
-}) {
-  const [status, setStatus] = useState(initialStatus || null);
-  const [loading, setLoading] = useState(false);
-  const [startingStep, setStartingStep] = useState(null); // "cert" | "server" | "dns" | null
-  const [showPasswordModal, setShowPasswordModal] = useState(false);
-  const [sudoPassword, setSudoPassword] = useState("");
-  const [selectedApiKey, setSelectedApiKey] = useState("");
-  const [message, setMessage] = useState(null);
-  const [modelMappings, setModelMappings] = useState({});
-  const [modalOpen, setModalOpen] = useState(false);
-  const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
-  const [modelAliases, setModelAliases] = useState({});
-
-  useEffect(() => {
-    if (apiKeys?.length > 0 && !selectedApiKey) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- controlled/uncontrolled hybrid: default selection from apiKeys prop, user can change it independently
-      setSelectedApiKey(apiKeys[0].key);
-    }
-  }, [apiKeys, selectedApiKey]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync-from-props hybrid: mirrors initialStatus prop, but status is also updated independently by fetch/user actions
-    if (initialStatus) setStatus(initialStatus);
-  }, [initialStatus]);
-
-  useEffect(() => {
-    if (isExpanded && !status) {
-      // eslint-disable-next-line react-hooks/immutability -- false positive: these are local fetch+setState helpers invoked once on effect fire (not during render); defined with const below because all invocations are deferred (effects/events), so no TDZ issue at runtime
-      fetchStatus();
-      // eslint-disable-next-line react-hooks/immutability -- false positive: these are local fetch+setState helpers invoked once on effect fire (not during render); defined with const below because all invocations are deferred (effects/events), so no TDZ issue at runtime
-      loadSavedMappings();
-      // eslint-disable-next-line react-hooks/immutability -- false positive: these are local fetch+setState helpers invoked once on effect fire (not during render); defined with const below because all invocations are deferred (effects/events), so no TDZ issue at runtime
-      fetchModelAliases();
-    }
-    if (isExpanded) {
-      loadSavedMappings();
-      fetchModelAliases();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: react only to [isExpanded]; read latest status (adding it would re-trigger on every change)
-  }, [isExpanded]);
-
-  const loadSavedMappings = async () => {
-    try {
-      const res = await fetch("/api/cli-tools/antigravity-mitm/alias?tool=antigravity");
-      if (res.ok) {
-        const data = await res.json();
-        const aliases = data.aliases || {};
-
-        if (Object.keys(aliases).length > 0) {
-          setModelMappings(aliases);
-        }
-      }
-    } catch (error) {
-      console.log("Error loading saved mappings:", error);
-    }
-  };
-
-  const fetchModelAliases = async () => {
-    try {
-      const res = await fetch("/api/models/alias");
-      const data = await res.json();
-      if (res.ok) setModelAliases(data.aliases || {});
-    } catch (error) {
-      console.log("Error fetching model aliases:", error);
-    }
-  };
-
-  const fetchStatus = async () => {
-    try {
-      const res = await fetch("/api/cli-tools/antigravity-mitm");
-      if (res.ok) {
-        const data = await res.json();
-        setStatus(data);
-      }
-    } catch (error) {
-      console.log("Error fetching status:", error);
-      setStatus({ running: false });
-    }
-  };
-
-  // MITM elevation is decided by the server OS, not by this browser's OS.
-  const serverIsWindows = status?.isWin === true;
-  const canRunWithoutPassword = serverIsWindows || status?.hasCachedPassword || status?.needsSudoPassword === false;
-
-  const handleStart = () => {
-    if (canRunWithoutPassword) {
-      doStart("");
-    } else {
-      setShowPasswordModal(true);
-      setMessage(null);
-    }
-  };
-
-  const handleStop = () => {
-    if (canRunWithoutPassword) {
-      doStop("");
-    } else {
-      setShowPasswordModal(true);
-      setMessage(null);
-    }
-  };
-
-  const doStart = async (password) => {
-    setLoading(true);
-    setMessage(null);
-    // Show steps progressing in order
-    setStartingStep("cert");
-    try {
-      const keyToUse = selectedApiKey?.trim()
-        || (apiKeys?.length > 0 ? apiKeys[0].key : null)
-        || (!cloudEnabled ? "sk_zevai" : null);
-
-      const res = await fetch("/api/cli-tools/antigravity-mitm", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ apiKey: keyToUse, sudoPassword: password }),
-      });
-
-      const data = await res.json();
-      if (res.ok) {
-        setStartingStep(null);
-        setMessage({ type: "success", text: "MITM started" });
-        setShowPasswordModal(false);
-        setSudoPassword("");
-        fetchStatus();
-      } else {
-        setStartingStep(null);
-        setMessage({ type: "error", text: data.error || "Failed to start" });
-      }
-    } catch (error) {
-      setStartingStep(null);
-      setMessage({ type: "error", text: error.message });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const doStop = async (password) => {
-    setLoading(true);
-    setMessage(null);
-    try {
-      const res = await fetch("/api/cli-tools/antigravity-mitm", {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sudoPassword: password }),
-      });
-
-      const data = await res.json();
-      if (res.ok) {
-        setMessage({ type: "success", text: "MITM stopped" });
-        setShowPasswordModal(false);
-        setSudoPassword("");
-        fetchStatus();
-      } else {
-        setMessage({ type: "error", text: data.error || "Failed to stop" });
-      }
-    } catch (error) {
-      setMessage({ type: "error", text: error.message });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleConfirmPassword = () => {
-    if (!sudoPassword.trim()) {
-      setMessage({ type: "error", text: "Sudo password is required" });
-      return;
-    }
-    if (status?.running) {
-      doStop(sudoPassword);
-    } else {
-      doStart(sudoPassword);
-    }
-  };
-
-  const openModelSelector = (alias) => {
-    setCurrentEditingAlias(alias);
-    setModalOpen(true);
-  };
-
-  const handleModelSelect = (model) => {
-    if (currentEditingAlias) {
-      setModelMappings(prev => ({
-        ...prev,
-        [currentEditingAlias]: model.value,
-      }));
-    }
-  };
-
-  const handleModelMappingChange = (alias, value) => {
-    setModelMappings(prev => ({
-      ...prev,
-      [alias]: value,
-    }));
-  };
-
-  const handleSaveMappings = async () => {
-    setLoading(true);
-    setMessage(null);
-
-    try {
-      const res = await fetch("/api/cli-tools/antigravity-mitm/alias", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ tool: "antigravity", mappings: modelMappings }),
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.error || "Failed to save mappings");
-      }
-
-      setMessage({ type: "success", text: "Mappings saved!" });
-    } catch (error) {
-      setMessage({ type: "error", text: error.message });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const isRunning = status?.running;
-
-  return (
-    <Card padding="xs" className="overflow-hidden">
-      <div className="flex items-start justify-between gap-3 hover:cursor-pointer sm:items-center" onClick={onToggle}>
-        <div className="flex min-w-0 items-center gap-3">
-          <div className="size-8 flex items-center justify-center shrink-0">
-            <Image
-              src="/providers/antigravity.png"
-              alt={tool.name}
-              width={32}
-              height={32}
-              className="size-8 object-contain rounded-lg"
-              sizes="32px"
-              onError={(e) => { e.target.style.display = "none"; }}
-            />
-          </div>
-          <div className="min-w-0">
-            <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="font-medium text-sm">{tool.name}</h3>
-              {isRunning ? (
-                <Badge variant="success" size="sm">Active</Badge>
-              ) : (
-                <Badge variant="default" size="sm">Inactive</Badge>
-              )}
-            </div>
-            <p className="text-xs text-text-muted truncate">{tool.description}</p>
-          </div>
-        </div>
-        <span className={`material-symbols-outlined text-text-muted text-[20px] transition-transform ${isExpanded ? "rotate-180" : ""}`}>expand_more</span>
-      </div>
-
-      {isExpanded && (
-        <div className="mt-4 pt-4 border-t border-border flex flex-col gap-4">
-          {/* Status indicators — ordered: Cert → Server → DNS */}
-          <div className="flex items-center gap-1">
-            {[
-              { key: "cert", label: "Cert", ok: status?.certExists },
-              { key: "server", label: "Server", ok: status?.running },
-              { key: "dns", label: "DNS", ok: status?.dnsConfigured },
-            ].map(({ key, label, ok }, i) => {
-              const isLoading = startingStep === key;
-              return (
-                <div key={key} className="flex items-center">
-                  <div className="flex items-center gap-1 px-2 py-1 rounded-md">
-                    {isLoading ? (
-                      <span className="material-symbols-outlined text-[14px] text-primary animate-spin">progress_activity</span>
-                    ) : (
-                      <span className={`material-symbols-outlined text-[14px] ${ok ? "text-green-500" : "text-text-muted"}`}>
-                        {ok ? "check_circle" : "radio_button_unchecked"}
-                      </span>
-                    )}
-                    <span className={`text-xs font-medium ${isLoading ? "text-primary" : ok ? "text-green-500" : "text-text-muted"}`}>
-                      {label}
-                    </span>
-                  </div>
-                  {i < 2 && <span className="material-symbols-outlined text-[12px] text-text-muted">arrow_forward</span>}
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Start/Stop Button */}
-          <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
-            {isRunning ? (
-              <button
-                onClick={handleStop}
-                disabled={loading}
-                className="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-sm flex items-center gap-2 hover:bg-red-500/20 transition-colors disabled:opacity-50"
-              >
-                <span className="material-symbols-outlined text-[18px]">stop_circle</span>
-                Stop MITM
-              </button>
-            ) : (
-              <button
-                onClick={handleStart}
-                disabled={loading || !hasActiveProviders}
-                className="px-4 py-2 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-sm flex items-center gap-2 hover:bg-primary/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <span className="material-symbols-outlined text-[18px]">play_circle</span>
-                Start MITM
-              </button>
-            )}
-          </div>
-
-          {message?.type === "error" && (
-            <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-red-500/10 text-red-600">
-              <span className="material-symbols-outlined text-[14px]">error</span>
-              <span>{message.text}</span>
-            </div>
-          )}
-
-          {/* When running: API Key + Model Mappings */}
-          {isRunning && (
-            <>
-              <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
-                <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">API Key</span>
-                <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                {apiKeys.length > 0 ? (
-                  <select
-                    value={selectedApiKey}
-                    onChange={(e) => setSelectedApiKey(e.target.value)}
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
-                  >
-                    {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
-                  </select>
-                ) : (
-                  <span className="min-w-0 rounded bg-surface/40 px-2 py-2 text-xs text-text-muted sm:py-1.5">
-                    {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_zevai (default)"}
-                  </span>
-                )}
-              </div>
-
-              {tool.defaultModels.map((model) => (
-                <div key={model.alias} className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
-                  <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">{model.name}</span>
-                  <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <div className="relative w-full min-w-0">
-                    <input
-                      type="text"
-                      value={modelMappings[model.alias] || ""}
-                      onChange={(e) => handleModelMappingChange(model.alias, e.target.value)}
-                      placeholder="provider/model-id"
-                      className="w-full min-w-0 pl-2 pr-7 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
-                    />
-                    {modelMappings[model.alias] && (
-                      <button
-                        onClick={() => handleModelMappingChange(model.alias, "")}
-                        className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-text-muted hover:text-red-500 rounded transition-colors"
-                        title="Clear"
-                      >
-                        <span className="material-symbols-outlined text-[14px]">close</span>
-                      </button>
-                    )}
-                  </div>
-                  <button
-                    onClick={() => openModelSelector(model.alias)}
-                    disabled={!hasActiveProviders}
-                    className={`w-full sm:w-auto rounded border px-2 py-2 text-xs transition-colors sm:py-1.5 whitespace-nowrap sm:shrink-0 ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}
-                  >
-                    Select
-                  </button>
-                </div>
-              ))}
-
-              <div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={handleSaveMappings}
-                  disabled={loading || Object.keys(modelMappings).length === 0}
-                >
-                  <span className="material-symbols-outlined text-[14px] mr-1">save</span>
-                  Save Mappings
-                </Button>
-              </div>
-            </>
-          )}
-
-          {/* Windows admin warning */}
-          {!isRunning && serverIsWindows && (
-            <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-yellow-500/10 text-yellow-600 border border-yellow-500/20">
-              <span className="material-symbols-outlined text-[14px]">warning</span>
-              <span>Windows: Run terminal (ZevaiRouter) as Administrator to enable MITM</span>
-            </div>
-          )}
-
-          {/* When stopped: how it works */}
-          {!isRunning && (
-            <div className="flex flex-col gap-1.5 px-1">
-              <p className="text-xs text-text-muted">
-                <span className="font-medium text-text-main">How it works:</span> Intercepts Antigravity traffic via DNS redirect, letting you reroute models through ZevaiRouter.
-              </p>
-              <div className="flex flex-col gap-0.5 text-[11px] text-text-muted">
-                <span>1. Generates SSL cert & adds to system keychain</span>
-                <span>2. Redirects <code className="text-[10px] bg-surface px-1 rounded">daily-cloudcode-pa.googleapis.com</code> → localhost</span>
-                <span>3. Maps Antigravity models to any provider via ZevaiRouter</span>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Password Modal */}
-      <Modal
-        isOpen={showPasswordModal}
-        onClose={() => {
-          setShowPasswordModal(false);
-          setSudoPassword("");
-          setMessage(null);
-        }}
-        title="Sudo Password Required"
-        size="sm"
-      >
-        <div className="flex flex-col gap-4">
-          <div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
-            <span className="material-symbols-outlined text-yellow-500 text-[20px]">warning</span>
-            <p className="text-xs text-text-muted">Required for SSL certificate and DNS configuration</p>
-          </div>
-
-          <Input
-            type="password"
-            placeholder="Enter sudo password"
-            value={sudoPassword}
-            onChange={(e) => setSudoPassword(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !loading) handleConfirmPassword();
-            }}
-          />
-
-          {message && (
-            <div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
-              <span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
-              <span>{message.text}</span>
-            </div>
-          )}
-
-          <div className="flex items-center justify-end gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }}
-              disabled={loading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={handleConfirmPassword}
-              loading={loading}
-            >
-              Confirm
-            </Button>
-          </div>
-        </div>
-      </Modal>
-
-      {/* Model Select Modal */}
-      <ModelSelectModal
-        isOpen={modalOpen}
-        onClose={() => setModalOpen(false)}
-        onSelect={handleModelSelect}
-        selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
-        activeProviders={activeProviders}
-        modelAliases={modelAliases}
-        title={`Select model for ${currentEditingAlias}`}
-      />
-    </Card>
-  );
-}

package/src/app/(dashboard)/dashboard/cli-tools/components/ApiKeySelect.js

@@ -1,14 +0,0 @@
-"use client";
-
-export default function ApiKeySelect({ value, onChange, cloudEnabled = false, className = "" }) {
-  return (
-    <input
-      type="password"
-      value={value || ""}
-      onChange={(event) => onChange(event.target.value)}
-      placeholder={cloudEnabled ? "Enter API key" : "sk_zevai (default)"}
-      autoComplete="off"
-      className={`w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5 ${className}`}
-    />
-  );
-}

package/src/app/(dashboard)/dashboard/cli-tools/components/BaseUrlSelect.js

@@ -1,176 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { UPDATER_CONFIG } from "@/shared/constants/config";
-
-const STORAGE_KEY = "zevai.cliToolEndpointPresets";
-const CUSTOM_VALUE = "__custom__";
-const SAVE_VALUE = "__save__";
-
-const ensureV1 = (url) => {
-  const trimmed = (url || "").replace(/\/+$/, "");
-  if (!trimmed) return "";
-  return /\/v1$/.test(trimmed) ? trimmed : `${trimmed}/v1`;
-};
-
-const readSavedPresets = () => {
-  if (typeof window === "undefined") return [];
-  try {
-    const raw = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || "[]");
-    if (!Array.isArray(raw)) return [];
-    return raw.filter((p) => p?.name && p?.baseUrl);
-  } catch {
-    return [];
-  }
-};
-
-const writeSavedPresets = (presets) => {
-  if (typeof window === "undefined") return;
-  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(presets));
-};
-
-const buildOptions = ({ requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, cloudEnabled, cloudUrl, savedPresets, withV1 }) => {
-  const opts = [];
-  const wrap = (url) => (withV1 ? ensureV1(url) : (url || "").replace(/\/+$/, ""));
-  if (!requiresExternalUrl) {
-    const localUrl = wrap(`http://127.0.0.1:${UPDATER_CONFIG.appPort}`);
-    opts.push({ value: "local", label: localUrl, url: localUrl });
-  }
-  if (tunnelEnabled && tunnelPublicUrl) {
-    const u = wrap(tunnelPublicUrl);
-    opts.push({ value: "tunnel", label: u, url: u });
-  }
-  if (tailscaleEnabled && tailscaleUrl) {
-    const u = wrap(tailscaleUrl);
-    opts.push({ value: "tailscale", label: u, url: u });
-  }
-  if (cloudEnabled && cloudUrl) {
-    const u = wrap(cloudUrl);
-    opts.push({ value: "cloud", label: u, url: u });
-  }
-  savedPresets.forEach((p) => {
-    opts.push({ value: `saved:${p.name}`, label: p.baseUrl, url: p.baseUrl, saved: true });
-  });
-  opts.push({ value: CUSTOM_VALUE, label: "Custom URL...", url: "" });
-  return opts;
-};
-
-export default function BaseUrlSelect({
-  value,
-  onChange,
-  requiresExternalUrl = false,
-  tunnelEnabled = false,
-  tunnelPublicUrl = "",
-  tailscaleEnabled = false,
-  tailscaleUrl = "",
-  cloudEnabled = false,
-  cloudUrl = "",
-  withV1 = true,
-}) {
-  const [savedPresets, setSavedPresets] = useState([]);
-  const [mode, setMode] = useState("");
-  const [customInput, setCustomInput] = useState("");
-  const initializedRef = useRef(false);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time mount initialization from localStorage (external store), intentionally client-only
-    setSavedPresets(readSavedPresets());
-  }, []);
-
-  const options = useMemo(
-    () => buildOptions({ requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, cloudEnabled, cloudUrl, savedPresets, withV1 }),
-    [requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, cloudEnabled, cloudUrl, savedPresets, withV1]
-  );
-
-  // Always default to first option (127.0.0.1) on mount, ignore persisted value
-  useEffect(() => {
-    if (initializedRef.current) return;
-    if (options.length === 0) return;
-    initializedRef.current = true;
-    const first = options.find((o) => o.value !== CUSTOM_VALUE);
-    if (first) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time default selection guarded by initializedRef; options depend on async localStorage presets so it cannot be derived during initial render
-      setMode(first.value);
-      onChange(first.url);
-    } else {
-      setMode(CUSTOM_VALUE);
-    }
-  }, [options, onChange]);
-
-  const handleSelect = (e) => {
-    const next = e.target.value;
-    if (next === SAVE_VALUE) {
-      const trimmed = (value || "").trim();
-      if (!trimmed) return;
-      let defaultName = trimmed;
-      try { defaultName = new URL(trimmed).host; } catch {}
-      const name = window.prompt("Save endpoint as:", defaultName);
-      if (!name?.trim()) return;
-      const updated = [...savedPresets.filter((p) => p.name !== name.trim()), { name: name.trim(), baseUrl: trimmed }]
-        .sort((a, b) => a.name.localeCompare(b.name));
-      setSavedPresets(updated);
-      writeSavedPresets(updated);
-      return;
-    }
-    setMode(next);
-    if (next === CUSTOM_VALUE) {
-      setCustomInput("");
-      onChange("");
-      return;
-    }
-    const opt = options.find((o) => o.value === next);
-    if (opt) onChange(opt.url);
-  };
-
-  const handleCustomInput = (e) => {
-    const v = e.target.value;
-    setCustomInput(v);
-    onChange(v);
-  };
-
-  const handleDeleteSaved = () => {
-    if (!mode.startsWith("saved:")) return;
-    const name = mode.slice(6);
-    const updated = savedPresets.filter((p) => p.name !== name);
-    setSavedPresets(updated);
-    writeSavedPresets(updated);
-    setMode(CUSTOM_VALUE);
-    setCustomInput("");
-    onChange("");
-  };
-
-  const isSaved = mode.startsWith("saved:");
-  const isCustom = mode === CUSTOM_VALUE;
-  const canSave = isCustom && (customInput || "").trim().length > 0;
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      <div className="flex items-center gap-2">
-        <select
-          value={mode}
-          onChange={handleSelect}
-          className="flex-1 min-w-0 px-2 py-2 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
-        >
-          {options.map((o) => (
-            <option key={o.value} value={o.value}>{o.label}</option>
-          ))}
-          {canSave && <option value={SAVE_VALUE}>+ Save current as...</option>}
-        </select>
-        {isSaved && (
-          <button type="button" onClick={handleDeleteSaved} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors shrink-0" title="Delete saved endpoint">
-            <span className="material-symbols-outlined text-[14px]">delete</span>
-          </button>
-        )}
-      </div>
-      {isCustom && (
-        <input
-          type="text"
-          value={customInput}
-          onChange={handleCustomInput}
-          placeholder={withV1 ? "https://example.com/v1" : "https://example.com"}
-          className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
-        />
-      )}
-    </div>
-  );
-}