zevairouter 1.0.154 → 1.0.155

package/src/shared/components/ComboFormModal.js

@@ -1,176 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Modal from "./Modal";
-import Input from "./Input";
-import Button from "./Button";
-import ModelSelectModal from "./ModelSelectModal";
-
-const VALID_NAME_REGEX = /^[a-zA-Z0-9_.\-]+$/;
-
-// Inline editable model item
-function ModelItem({ index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown, onRemove }) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(model);
-  const commit = () => {
-    const trimmed = draft.trim();
-    if (trimmed && trimmed !== model) onEdit(trimmed);
-    else setDraft(model);
-    setEditing(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") commit();
-    if (e.key === "Escape") { setDraft(model); setEditing(false); }
-  };
-  return (
-    <div className="group flex min-w-0 items-center gap-1.5 rounded-md bg-black/[0.02] px-2 py-1 transition-colors hover:bg-black/[0.04] dark:bg-white/[0.02] dark:hover:bg-white/[0.04]">
-      <span className="text-[10px] font-medium text-text-muted w-3 text-center shrink-0">{index + 1}</span>
-      {editing ? (
-        <input autoFocus value={draft} onChange={(e) => setDraft(e.target.value)} onBlur={commit} onKeyDown={handleKeyDown}
-          className="min-w-0 flex-1 rounded border border-primary/40 bg-white px-1.5 py-0.5 font-mono text-xs text-text-main outline-none dark:bg-black/20" />
-      ) : (
-        <div className="min-w-0 flex-1 cursor-text truncate rounded px-1.5 py-0.5 font-mono text-xs text-text-main hover:bg-black/5 dark:hover:bg-white/5"
-          onClick={() => setEditing(true)} title="Click to edit">{model}</div>
-      )}
-      <div className="flex shrink-0 items-center gap-0.5">
-        <button onClick={onMoveUp} disabled={isFirst}
-          className={`p-0.5 rounded ${isFirst ? "text-text-muted/20 cursor-not-allowed" : "text-text-muted hover:text-primary hover:bg-black/5 dark:hover:bg-white/5"}`} title="Move up">
-          <span className="material-symbols-outlined text-[12px]">arrow_upward</span>
-        </button>
-        <button onClick={onMoveDown} disabled={isLast}
-          className={`p-0.5 rounded ${isLast ? "text-text-muted/20 cursor-not-allowed" : "text-text-muted hover:text-primary hover:bg-black/5 dark:hover:bg-white/5"}`} title="Move down">
-          <span className="material-symbols-outlined text-[12px]">arrow_downward</span>
-        </button>
-      </div>
-      <button onClick={onRemove} className="p-0.5 hover:bg-red-500/10 rounded text-text-muted hover:text-red-500 transition-all" title="Remove">
-        <span className="material-symbols-outlined text-[12px]">close</span>
-      </button>
-    </div>
-  );
-}
-
-// Reusable Combo create/edit modal. forcePrefix auto-prepends to name.
-export default function ComboFormModal({ isOpen, combo, onClose, onSave, activeProviders, kindFilter = null, forcePrefix = "", title }) {
-  // Strip prefix when editing existing combo so user only edits suffix
-  const initialName = combo?.name
-    ? (forcePrefix && combo.name.startsWith(forcePrefix) ? combo.name.slice(forcePrefix.length) : combo.name)
-    : "";
-  const [name, setName] = useState(initialName);
-  const [models, setModels] = useState(combo?.models || []);
-  const [showModelSelect, setShowModelSelect] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [nameError, setNameError] = useState("");
-  const [modelAliases, setModelAliases] = useState({});
-
-  useEffect(() => {
-    if (!isOpen) return;
-    fetch("/api/models/alias").then((r) => r.ok ? r.json() : null).then((d) => d && setModelAliases(d.aliases || {})).catch(() => {});
-  }, [isOpen]);
-
-  const validateName = (value) => {
-    if (!value.trim()) { setNameError("Name is required"); return false; }
-    const full = forcePrefix + value;
-    if (!VALID_NAME_REGEX.test(full)) { setNameError("Only letters, numbers, -, _ and . allowed"); return false; }
-    setNameError("");
-    return true;
-  };
-
-  const handleNameChange = (e) => {
-    let value = e.target.value;
-    // If user types prefix manually, strip it (we always prepend)
-    if (forcePrefix && value.startsWith(forcePrefix)) value = value.slice(forcePrefix.length);
-    setName(value);
-    if (value) validateName(value); else setNameError("");
-  };
-
-  const handleAddModel = (model) => {
-    if (!models.includes(model.value)) setModels([...models, model.value]);
-  };
-  const handleDeselectModel = (model) => {
-    setModels(models.filter((m) => m !== model.value));
-  };
-  const handleRemoveModel = (i) => setModels(models.filter((_, idx) => idx !== i));
-  const handleMoveUp = (i) => {
-    if (i === 0) return;
-    const a = [...models]; [a[i - 1], a[i]] = [a[i], a[i - 1]]; setModels(a);
-  };
-  const handleMoveDown = (i) => {
-    if (i === models.length - 1) return;
-    const a = [...models]; [a[i], a[i + 1]] = [a[i + 1], a[i]]; setModels(a);
-  };
-
-  const handleSave = async () => {
-    if (!validateName(name)) return;
-    setSaving(true);
-    await onSave({ name: forcePrefix + name.trim(), models });
-    setSaving(false);
-  };
-
-  const isEdit = !!combo;
-
-  return (
-    <>
-      <Modal isOpen={isOpen} onClose={onClose} title={title || (isEdit ? "Edit Combo" : "Create Combo")}>
-        <div className="flex flex-col gap-3">
-          <div>
-            {forcePrefix ? (
-              <>
-                <label className="text-sm font-medium mb-1 block">Combo Name</label>
-                <div className="flex items-stretch">
-                  <span className="inline-flex items-center px-2 rounded-l border border-r-0 border-black/10 dark:border-white/10 bg-black/[0.04] dark:bg-white/[0.04] text-text-muted font-mono text-sm">{forcePrefix}</span>
-                  <input value={name} onChange={handleNameChange} placeholder="my-combo"
-                    className="flex-1 min-w-0 rounded-r border border-black/10 dark:border-white/10 bg-white dark:bg-black/20 px-2 py-1.5 font-mono text-sm outline-none focus:border-primary" />
-                </div>
-                {nameError && <p className="text-[11px] text-red-500 mt-0.5">{nameError}</p>}
-              </>
-            ) : (
-              <Input label="Combo Name" value={name} onChange={handleNameChange} placeholder="my-combo" error={nameError} />
-            )}
-            <p className="text-[10px] text-text-muted mt-0.5">
-              {forcePrefix ? `Auto-prefixed with "${forcePrefix}". ` : ""}Only letters, numbers, -, _ and . allowed
-            </p>
-          </div>
-
-          <div>
-            <label className="text-sm font-medium mb-1.5 block">Models</label>
-            {models.length === 0 ? (
-              <div className="text-center py-4 border border-dashed border-black/10 dark:border-white/10 rounded-lg bg-black/[0.01] dark:bg-white/[0.01]">
-                <span className="material-symbols-outlined text-text-muted text-xl mb-1">layers</span>
-                <p className="text-xs text-text-muted">No models added yet</p>
-              </div>
-            ) : (
-              <div className="flex max-h-[55vh] min-w-0 flex-col gap-1 overflow-y-auto sm:max-h-[350px]">
-                {models.map((model, index) => (
-                  <ModelItem key={index} index={index} model={model}
-                    isFirst={index === 0} isLast={index === models.length - 1}
-                    onEdit={(v) => { const a = [...models]; a[index] = v; setModels(a); }}
-                    onMoveUp={() => handleMoveUp(index)}
-                    onMoveDown={() => handleMoveDown(index)}
-                    onRemove={() => handleRemoveModel(index)} />
-                ))}
-              </div>
-            )}
-            <button onClick={() => setShowModelSelect(true)}
-              className="w-full mt-2 py-2 border border-dashed border-black/10 dark:border-white/10 rounded-lg text-xs text-primary font-medium hover:text-primary hover:border-primary/50 transition-colors flex items-center justify-center gap-1">
-              <span className="material-symbols-outlined text-[16px]">add</span>
-              Add Model
-            </button>
-          </div>
-
-          <div className="flex flex-col gap-2 pt-1 sm:flex-row">
-            <Button onClick={onClose} variant="ghost" fullWidth size="sm">Cancel</Button>
-            <Button onClick={handleSave} fullWidth size="sm" disabled={!name.trim() || !!nameError || saving}>
-              {saving ? "Saving..." : isEdit ? "Save" : "Create"}
-            </Button>
-          </div>
-        </div>
-      </Modal>
-
-      <ModelSelectModal isOpen={showModelSelect} onClose={() => setShowModelSelect(false)}
-        onSelect={handleAddModel} onDeselect={handleDeselectModel}
-        activeProviders={activeProviders} modelAliases={modelAliases}
-        title="Add Model to Combo" kindFilter={kindFilter}
-        addedModelValues={models} closeOnSelect={false} />
-    </>
-  );
-}

package/src/shared/components/CursorAuthModal.js

@@ -1,213 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { Modal, Button, Input } from "@/shared/components";
-
-/**
- * Cursor Auth Modal
- * Auto-detect and import token from Cursor IDE's local SQLite database
- */
-export default function CursorAuthModal({ isOpen, onSuccess, onClose }) {
-  const [accessToken, setAccessToken] = useState("");
-  const [machineId, setMachineId] = useState("");
-  const [error, setError] = useState(null);
-  const [importing, setImporting] = useState(false);
-  const [autoDetecting, setAutoDetecting] = useState(false);
-  const [autoDetected, setAutoDetected] = useState(false);
-  const [windowsManual, setWindowsManual] = useState(false);
-
-  const runAutoDetect = async () => {
-    setAutoDetecting(true);
-    setError(null);
-    setAutoDetected(false);
-    setWindowsManual(false);
-
-    try {
-      const res = await fetch("/api/oauth/cursor/auto-import");
-      const data = await res.json();
-
-      if (data.found) {
-        setAccessToken(data.accessToken);
-        setMachineId(data.machineId);
-        setAutoDetected(true);
-      } else if (data.windowsManual) {
-        setWindowsManual(true);
-      } else {
-        setError(data.error || "Could not auto-detect tokens");
-      }
-    } catch (err) {
-      setError("Failed to auto-detect tokens");
-    } finally {
-      setAutoDetecting(false);
-    }
-  };
-
-  // Auto-detect tokens when modal opens
-  useEffect(() => {
-    if (!isOpen) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch-on-open: runAutoDetect sets state only after await, which the rule flags conservatively
-    runAutoDetect();
-  }, [isOpen]);
-
-  const handleImportToken = async () => {
-    if (!accessToken.trim()) {
-      setError("Please enter an access token");
-      return;
-    }
-
-    if (!machineId.trim()) {
-      setError("Please enter a machine ID");
-      return;
-    }
-
-    setImporting(true);
-    setError(null);
-
-    try {
-      const res = await fetch("/api/oauth/cursor/import", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          accessToken: accessToken.trim(),
-          machineId: machineId.trim(),
-        }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        throw new Error(data.error || "Import failed");
-      }
-
-      onSuccess?.();
-      onClose();
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} title="Connect Cursor IDE" onClose={onClose}>
-      <div className="flex flex-col gap-4">
-        {/* Auto-detecting state */}
-        {autoDetecting && (
-          <div className="text-center py-6">
-            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-primary animate-spin">
-                progress_activity
-              </span>
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Auto-detecting tokens...</h3>
-            <p className="text-sm text-text-muted">
-              Reading from Cursor IDE database
-            </p>
-          </div>
-        )}
-
-        {/* Form (shown after auto-detect completes) */}
-        {!autoDetecting && (
-          <>
-            {/* Success message if auto-detected */}
-            {autoDetected && (
-              <div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
-                <div className="flex gap-2">
-                  <span className="material-symbols-outlined text-green-600 dark:text-green-400">check_circle</span>
-                  <p className="text-sm text-green-800 dark:text-green-200">
-                    Tokens auto-detected from Cursor IDE successfully!
-                  </p>
-                </div>
-              </div>
-            )}
-
-            {/* Windows manual instructions */}
-            {windowsManual && (
-              <div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg border border-amber-200 dark:border-amber-800 flex flex-col gap-2">
-                <div className="flex gap-2 items-center">
-                  <span className="material-symbols-outlined text-amber-600 dark:text-amber-400">info</span>
-                  <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                    Could not read Cursor database automatically.
-                  </p>
-                </div>
-                <p className="text-xs text-amber-700 dark:text-amber-300">
-                  Make sure Cursor IDE has been opened at least once, then click <strong>Retry</strong>. If the problem persists, paste your tokens manually below.
-                </p>
-                <Button onClick={runAutoDetect} variant="outline" fullWidth>
-                  Retry
-                </Button>
-              </div>
-            )}
-
-            {/* Info message if not auto-detected */}
-            {!autoDetected && !windowsManual && !error && (
-              <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
-                <div className="flex gap-2">
-                  <span className="material-symbols-outlined text-blue-600 dark:text-blue-400">info</span>
-                  <p className="text-sm text-blue-800 dark:text-blue-200">
-                    Cursor IDE not detected. Please paste your tokens manually.
-                  </p>
-                </div>
-              </div>
-            )}
-
-            {/* Access Token Input */}
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Access Token <span className="text-red-500">*</span>
-              </label>
-              <textarea
-                value={accessToken}
-                onChange={(e) => setAccessToken(e.target.value)}
-                placeholder="Access token will be auto-filled..."
-                rows={3}
-                className="w-full px-3 py-2 text-sm font-mono border border-border rounded-lg bg-background focus:outline-none focus:border-primary resize-none"
-              />
-            </div>
-
-            {/* Machine ID Input */}
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Machine ID <span className="text-red-500">*</span>
-              </label>
-              <Input
-                value={machineId}
-                onChange={(e) => setMachineId(e.target.value)}
-                placeholder="Machine ID will be auto-filled..."
-                className="font-mono text-sm"
-              />
-            </div>
-
-            {/* Error Display */}
-            {error && (
-              <div className="bg-red-50 dark:bg-red-900/20 p-3 rounded-lg border border-red-200 dark:border-red-800">
-                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
-              </div>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex gap-2">
-              <Button
-                onClick={handleImportToken}
-                fullWidth
-                disabled={importing || !accessToken.trim() || !machineId.trim()}
-              >
-                {importing ? "Importing..." : "Import Token"}
-              </Button>
-              <Button onClick={onClose} variant="ghost" fullWidth>
-                Cancel
-              </Button>
-            </div>
-          </>
-        )}
-      </div>
-    </Modal>
-  );
-}
-
-CursorAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/Drawer.js

@@ -1,82 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { cn } from "@/shared/utils/cn";
-
-export default function Drawer({
-  isOpen,
-  onClose,
-  title,
-  children,
-  width = "md",
-  className
-}) {
-  const widths = {
-    sm: "w-[400px]",
-    md: "w-[500px]",
-    lg: "w-[600px]",
-    xl: "w-[800px]",
-    full: "w-full",
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => { document.body.style.overflow = ""; };
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape" && isOpen) onClose();
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50">
-      {/* Overlay */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-[2px] fade-in cursor-pointer"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-
-      {/* Drawer panel */}
-      <div className={cn(
-        "absolute right-0 top-0 h-full bg-surface flex flex-col",
-        "shadow-[var(--shadow-elev)]",
-        "slide-in-right",
-        "border-l border-border-subtle",
-        widths[width] || widths.md,
-        className
-      )}>
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border-subtle flex-shrink-0">
-          <div className="flex items-center gap-3">
-            {title && (
-              <h2 className="text-lg font-semibold text-text-main">{title}</h2>
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors"
-          >
-            <span className="material-symbols-outlined text-[20px]">close</span>
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}