wyxrouter 0.4.71

package/src/shared/components/ChangelogModal.js

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { marked } from "marked";
+import { GITHUB_CONFIG } from "@/shared/constants/config";
+
+marked.setOptions({ gfm: true, breaks: true });
+
+export default function ChangelogModal({ isOpen, onClose }) {
+  const [html, setHtml] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen || html) return;
+    setLoading(true);
+    setError("");
+    fetch(GITHUB_CONFIG.changelogUrl)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.text();
+      })
+      .then((md) => setHtml(marked.parse(md)))
+      .catch((err) => setError(err.message || "Failed to load"))
+      .finally(() => setLoading(false));
+  }, [isOpen, html]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/30 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal content */}
+      <div
+        ref={modalRef}
+        className="relative w-full bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200 max-w-3xl flex flex-col max-h-[85vh]"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-3 border-b border-black/5 dark:border-white/5">
+          <h2 className="text-lg font-semibold text-text-main">Change Log</h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+            aria-label="Close"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-6 overflow-y-auto flex-1">
+          {loading && (
+            <div className="flex items-center justify-center py-10 text-text-muted">
+              <span className="material-symbols-outlined animate-spin mr-2">progress_activity</span>
+              Loading...
+            </div>
+          )}
+          {error && (
+            <div className="text-red-500 py-4">Failed to load changelog: {error}</div>
+          )}
+          {!loading && !error && html && (
+            <div
+              className="changelog-body text-text-main"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+ChangelogModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/CodeBuddyQuotaCookieModal.js

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Modal, Button } from "@/shared/components";
+
+export default function CodeBuddyQuotaCookieModal({ isOpen, connectionIds, onSuccess, onClose }) {
+  const [cookie, setCookie] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!cookie.trim()) {
+      setError("Paste your CodeBuddy web cookie first.");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      const response = await fetch("/api/oauth/codebuddy/quota-cookie", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          cookie: cookie.trim(),
+          connectionIds,
+        }),
+      });
+      const data = await response.json().catch(() => ({}));
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save CodeBuddy quota cookie.");
+      }
+
+      setSuccess(true);
+      setTimeout(() => {
+        onSuccess?.();
+        handleClose();
+      }, 900);
+    } catch (err) {
+      setError(err.message || "Failed to save CodeBuddy quota cookie.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setCookie("");
+    setError("");
+    setSuccess(false);
+    onClose?.();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="CodeBuddy Quota Cookie">
+      <div className="space-y-4">
+        {success ? (
+          <div className="py-6 text-center">
+            <p className="text-lg font-medium text-text-primary">Quota cookie saved.</p>
+            <p className="mt-2 text-sm text-text-muted">Quota Tracker can now read CodeBuddy credits for the selected connection.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2 text-sm text-text-muted">
+              <p>
+                Paste the cookie string from a logged-in CodeBuddy web session. This is only used for the quota endpoint; your existing OAuth token still handles chat.
+              </p>
+              <div className="rounded-lg bg-surface-secondary p-3 text-xs">
+                Open codebuddy.ai, sign in, then copy the request cookie from DevTools Network for a request to codebuddy.ai.
+              </div>
+            </div>
+
+            <textarea
+              value={cookie}
+              onChange={(event) => setCookie(event.target.value)}
+              placeholder="session=...; AUTH_SESSION_ID=...; ..."
+              className="h-28 w-full resize-none rounded-lg border border-border bg-surface-secondary px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary"
+              disabled={loading}
+            />
+
+            {error && (
+              <div className="rounded-lg border border-error/20 bg-error/10 p-3">
+                <p className="text-sm text-error">{error}</p>
+              </div>
+            )}
+
+            <div className="flex gap-3 pt-2">
+              <Button variant="secondary" onClick={handleClose} disabled={loading} fullWidth>
+                Cancel
+              </Button>
+              <Button onClick={handleSubmit} loading={loading} fullWidth>
+                Save Cookie
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+CodeBuddyQuotaCookieModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  connectionIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onSuccess: PropTypes.func,
+  onClose: PropTypes.func,
+};

package/src/shared/components/ComboFormModal.js

@@ -0,0 +1,176 @@
+"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

@@ -0,0 +1,212 @@
+"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;
+    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,
+};