zevairouter 1.0.48 → 1.0.50

package/src/app/(dashboard)/dashboard/playground/page.js

@@ -0,0 +1,5 @@
+import BasicChatPageClient from "../basic-chat/BasicChatPageClient";
+
+export default function PlaygroundPage() {
+  return <BasicChatPageClient />;
+}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
@@ -118,6 +118,7 @@ export default function ProviderDetailPage() {
   const [connectionsPage, setConnectionsPage] = useState(1);
   const [connectionsPageSize, setConnectionsPageSize] = useState(CONNECTIONS_DEFAULT_PAGE_SIZE);
   const [connectionStatusFilter, setConnectionStatusFilter] = useState("all");
+  const [connectionQuery, setConnectionQuery] = useState("");
   const [modelsPage, setModelsPage] = useState(1);
   const [modelsPageSize, setModelsPageSize] = useState(MODELS_DEFAULT_PAGE_SIZE);
   const { copied, copy } = useCopyToClipboard();
@@ -456,11 +457,12 @@ export default function ProviderDetailPage() {
     setConnectionsPage(1);
     setModelsPage(1);
     setConnectionStatusFilter("all");
+    setConnectionQuery("");
   }, [providerId]);
 
   useEffect(() => {
     setConnectionsPage(1);
-  }, [connectionStatusFilter, connectionsPageSize]);
+  }, [connectionStatusFilter, connectionsPageSize, connectionQuery]);
 
   useEffect(() => {
     setModelsPage(1);
@@ -884,13 +886,37 @@ export default function ProviderDetailPage() {
     }
   };
 
-  const filteredConnections = connections.filter((conn) => filterConnectionByStatus(conn, connectionStatusFilter));
-  const connectionStatusCounts = CONNECTION_STATUS_FILTERS.reduce((acc, filter) => {
-    acc[filter.id] = filter.id === "all"
-      ? connections.length
-      : connections.filter((conn) => filterConnectionByStatus(conn, filter.id)).length;
-    return acc;
-  }, {});
+  const filteredConnections = useMemo(() => {
+    const q = connectionQuery.trim().toLowerCase();
+    return connections.filter((conn) => {
+      if (!filterConnectionByStatus(conn, connectionStatusFilter)) return false;
+      if (!q) return true;
+      const hay = [
+        conn.name,
+        conn.email,
+        conn.id,
+        conn.account,
+        conn.username,
+        conn.label,
+        conn.authType,
+        conn.notes,
+        conn.proxyPoolId,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(q);
+    });
+  }, [connections, connectionStatusFilter, connectionQuery]);
+
+  const connectionStatusCounts = useMemo(() => (
+    CONNECTION_STATUS_FILTERS.reduce((acc, filter) => {
+      acc[filter.id] = filter.id === "all"
+        ? connections.length
+        : connections.filter((conn) => filterConnectionByStatus(conn, filter.id)).length;
+      return acc;
+    }, {})
+  ), [connections]);
   const effectiveSelectedConnectionIds = selectedConnectionIds.filter((id) => connections.some((conn) => conn.id === id));
   const selectedConnections = connections.filter((conn) => effectiveSelectedConnectionIds.includes(conn.id));
   const codeBuddyQuotaCookieConnectionIds = providerId === "codebuddy"
@@ -1688,6 +1714,20 @@ export default function ProviderDetailPage() {
                   </button>
                 ))}
               </div>
+              {connections.length >= 20 && (
+                <div className="relative">
+                  <span className="material-symbols-outlined pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[16px] text-text-subtle">
+                    search
+                  </span>
+                  <input
+                    type="search"
+                    value={connectionQuery}
+                    onChange={(e) => setConnectionQuery(e.target.value)}
+                    placeholder={`Search ${connections.length} connections (email, name, id)…`}
+                    className="w-full rounded-lg border border-border bg-background py-2 pl-8 pr-3 text-xs text-text-main outline-none placeholder:text-text-subtle focus:border-primary/40"
+                  />
+                </div>
+              )}
             </div>
           )}
 

package/src/app/(dashboard)/dashboard/providers/page.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   Card,
@@ -201,10 +201,27 @@ export default function ProvidersPage() {
     fetchData();
   }, []);
 
+  // Index connections once — 800+ rows would re-filter on every card render otherwise
+  const connectionsByProvider = useMemo(() => {
+    const map = new Map();
+    for (const connection of connections) {
+      const key = connection.provider || connection.id;
+      if (!map.has(key)) map.set(key, []);
+      map.get(key).push(connection);
+    }
+    return map;
+  }, [connections]);
+
+  const totalConnections = connections.length;
+  const activeConnections = useMemo(
+    () => connections.filter((c) => c.isActive !== false).length,
+    [connections],
+  );
+
   const getProviderStats = (providerId, authType) => {
     const authTypes = Array.isArray(authType) ? authType : [authType];
-    const providerConnections = connections.filter(
-      (c) => c.provider === providerId && authTypes.includes(c.authType),
+    const providerConnections = (connectionsByProvider.get(providerId) || []).filter(
+      (c) => authTypes.includes(c.authType),
     );
 
     const getEffectiveStatus = (conn) => {
@@ -358,6 +375,21 @@ export default function ProvidersPage() {
 
   return (
     <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
+      {totalConnections > 0 && (
+        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border-subtle bg-surface/60 px-4 py-2.5 text-xs text-text-muted">
+          <span className="material-symbols-outlined text-[16px] text-primary">dns</span>
+          <span>
+            <strong className="text-text-main">{totalConnections}</strong> connections loaded
+            {" · "}
+            <strong className="text-text-main">{activeConnections}</strong> active
+          </span>
+          {totalConnections >= 100 && (
+            <span className="text-text-subtle">
+              Tip: open a provider → search/filter connections (paginated)
+            </span>
+          )}
+        </div>
+      )}
       {loadError && (
         <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-300">
           {loadError}

package/src/app/(dashboard)/dashboard/terminal/TerminalPageClient.js

@@ -0,0 +1,474 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import "@xterm/xterm/css/xterm.css";
+
+const BRAND = "#E56A4A";
+
+export default function TerminalPageClient() {
+  const hostRef = useRef(null);
+  const termRef = useRef(null);
+  const fitRef = useRef(null);
+  const sessionIdRef = useRef("");
+  const modeRef = useRef(""); // pty | pty-python | pipe
+  const esRef = useRef(null);
+  const writeQueueRef = useRef([]);
+  const flushTimerRef = useRef(null);
+  const disposedRef = useRef(false);
+  const lineBufRef = useRef(""); // local line buffer for pipe mode
+
+  const [status, setStatus] = useState("connecting");
+  const [statusText, setStatusText] = useState("Starting shell…");
+  const [meta, setMeta] = useState({ shell: "", mode: "" });
+
+  const flushInput = useCallback(async () => {
+    const sessionId = sessionIdRef.current;
+    if (!sessionId || writeQueueRef.current.length === 0) return;
+
+    const data = writeQueueRef.current.join("");
+    writeQueueRef.current = [];
+    try {
+      const res = await fetch(`/api/terminal/session/${sessionId}/input`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data }),
+        cache: "no-store",
+        credentials: "same-origin",
+      });
+      if (!res.ok && termRef.current) {
+        // Surface auth/local-only failures so typing doesn't feel "dead"
+        if (res.status === 403 || res.status === 401) {
+          termRef.current.write(`\r\n\x1b[31m[input blocked: ${res.status}]\x1b[0m\r\n`);
+        }
+      }
+    } catch {
+      /* network blip */
+    }
+  }, []);
+
+  const queueInput = useCallback(
+    (data) => {
+      if (!data || !sessionIdRef.current) return;
+      writeQueueRef.current.push(data);
+      if (flushTimerRef.current) return;
+      flushTimerRef.current = setTimeout(() => {
+        flushTimerRef.current = null;
+        flushInput();
+      }, 8);
+    },
+    [flushInput]
+  );
+
+  /**
+   * Pipe mode has no remote echo — edit a local line and only send on Enter.
+   * PTY modes stream every keystroke and rely on shell echo.
+   */
+  const handleTermData = useCallback(
+    (data) => {
+      const term = termRef.current;
+      if (!term) return;
+      const mode = modeRef.current;
+      const isPipe = mode === "pipe" || !mode;
+
+      if (!isPipe) {
+        queueInput(data);
+        return;
+      }
+
+      // Ctrl+C
+      if (data === "\u0003") {
+        lineBufRef.current = "";
+        term.write("^C\r\n");
+        queueInput("\u0003\n");
+        return;
+      }
+
+      // Enter
+      if (data === "\r" || data === "\n" || data === "\r\n") {
+        const line = lineBufRef.current;
+        lineBufRef.current = "";
+        term.write("\r\n");
+        queueInput(`${line}\n`);
+        return;
+      }
+
+      // Backspace / DEL
+      if (data === "\u007f" || data === "\b") {
+        if (lineBufRef.current.length > 0) {
+          lineBufRef.current = lineBufRef.current.slice(0, -1);
+          term.write("\b \b");
+        }
+        return;
+      }
+
+      // Ignore other control / escape sequences in line mode
+      if (data.charCodeAt(0) < 32 || data.startsWith("\x1b")) {
+        return;
+      }
+
+      lineBufRef.current += data;
+      term.write(data); // local echo
+    },
+    [queueInput]
+  );
+
+  const sendResize = useCallback(async () => {
+    const sessionId = sessionIdRef.current;
+    const term = termRef.current;
+    if (!sessionId || !term) return;
+    try {
+      await fetch(`/api/terminal/session/${sessionId}/resize`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cols: term.cols, rows: term.rows }),
+        cache: "no-store",
+        credentials: "same-origin",
+      });
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const focusTerm = useCallback(() => {
+    try {
+      termRef.current?.focus();
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const connectStream = useCallback((sessionId, term) => {
+    if (esRef.current) {
+      try {
+        esRef.current.close();
+      } catch {
+        /* ignore */
+      }
+    }
+
+    const es = new EventSource(`/api/terminal/session/${sessionId}/stream`, {
+      withCredentials: true,
+    });
+    esRef.current = es;
+
+    es.onopen = () => {
+      if (disposedRef.current) return;
+      setStatus("ready");
+      setStatusText("Connected — click terminal & type");
+      focusTerm();
+    };
+
+    es.onmessage = (event) => {
+      if (disposedRef.current) return;
+      let msg;
+      try {
+        msg = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+
+      if (msg.type === "data" && typeof msg.data === "string") {
+        term.write(msg.data);
+      } else if (msg.type === "ready") {
+        modeRef.current = msg.mode || modeRef.current;
+        setMeta({ shell: msg.shell || "", mode: msg.mode || "" });
+        setStatus(msg.alive === false ? "closed" : "ready");
+        setStatusText(msg.alive === false ? "Shell exited" : "Connected — click terminal & type");
+        focusTerm();
+      } else if (msg.type === "exit") {
+        setStatus("closed");
+        setStatusText("Shell exited");
+        term.write("\r\n\x1b[90m[session ended]\x1b[0m\r\n");
+      }
+    };
+
+    es.onerror = () => {
+      if (disposedRef.current) return;
+      setStatus((prev) => (prev === "ready" ? "connecting" : prev));
+      setStatusText("Reconnecting…");
+    };
+  }, [focusTerm]);
+
+  const startSession = useCallback(
+    async (term, fit) => {
+      setStatus("connecting");
+      setStatusText("Starting shell…");
+      lineBufRef.current = "";
+
+      try {
+        fit.fit();
+      } catch {
+        /* ignore */
+      }
+
+      const cols = term.cols || 120;
+      const rows = term.rows || 40;
+
+      let res;
+      try {
+        res = await fetch("/api/terminal/session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ cols, rows }),
+          cache: "no-store",
+          credentials: "same-origin",
+        });
+      } catch (error) {
+        setStatus("error");
+        setStatusText(error?.message || "Failed to reach server");
+        term.writeln(`\x1b[31mFailed to create session: ${error?.message || "network error"}\x1b[0m`);
+        return;
+      }
+
+      if (res.status === 403) {
+        setStatus("forbidden");
+        setStatusText("Localhost only");
+        term.writeln("\x1b[33mTerminal is restricted to localhost (security).\x1b[0m");
+        term.writeln("Open the dashboard on this machine (http://127.0.0.1:1997) to use the shell.");
+        return;
+      }
+
+      if (res.status === 401) {
+        setStatus("error");
+        setStatusText("Unauthorized");
+        term.writeln("\x1b[31mUnauthorized — log in to the dashboard first.\x1b[0m");
+        return;
+      }
+
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok || !data?.session?.id) {
+        setStatus("error");
+        setStatusText(data?.error || "Create failed");
+        term.writeln(`\x1b[31m${data?.error || "Failed to create terminal session"}\x1b[0m`);
+        return;
+      }
+
+      sessionIdRef.current = data.session.id;
+      modeRef.current = data.session.mode || "pipe";
+      setMeta({ shell: data.session.shell || "", mode: data.session.mode || "" });
+      connectStream(data.session.id, term);
+      focusTerm();
+    },
+    [connectStream, focusTerm]
+  );
+
+  const handleRestart = useCallback(async () => {
+    const oldId = sessionIdRef.current;
+    sessionIdRef.current = "";
+    modeRef.current = "";
+    lineBufRef.current = "";
+    writeQueueRef.current = [];
+    if (esRef.current) {
+      try {
+        esRef.current.close();
+      } catch {
+        /* ignore */
+      }
+      esRef.current = null;
+    }
+    if (oldId) {
+      fetch(`/api/terminal/session/${oldId}`, { method: "DELETE", credentials: "same-origin" }).catch(() => {});
+    }
+    const term = termRef.current;
+    const fit = fitRef.current;
+    if (!term || !fit) return;
+    term.reset();
+    term.clear();
+    await startSession(term, fit);
+  }, [startSession]);
+
+  useEffect(() => {
+    disposedRef.current = false;
+    const host = hostRef.current;
+    if (!host) return undefined;
+
+    const term = new Terminal({
+      cursorBlink: true,
+      cursorStyle: "bar",
+      fontSize: 13,
+      fontFamily:
+        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      lineHeight: 1.25,
+      scrollback: 5000,
+      allowProposedApi: true,
+      disableStdin: false,
+      theme: {
+        background: "#0d0d0d",
+        foreground: "#e8e8e8",
+        cursor: BRAND,
+        cursorAccent: "#0d0d0d",
+        selectionBackground: "rgba(229, 106, 74, 0.35)",
+        black: "#1a1a1a",
+        red: "#f87171",
+        green: "#4ade80",
+        yellow: "#fbbf24",
+        blue: "#60a5fa",
+        magenta: "#c084fc",
+        cyan: "#22d3ee",
+        white: "#e5e5e5",
+        brightBlack: "#737373",
+        brightRed: "#fca5a5",
+        brightGreen: "#86efac",
+        brightYellow: "#fde68a",
+        brightBlue: "#93c5fd",
+        brightMagenta: "#d8b4fe",
+        brightCyan: "#67e8f9",
+        brightWhite: "#fafafa",
+      },
+    });
+
+    const fit = new FitAddon();
+    const links = new WebLinksAddon();
+    term.loadAddon(fit);
+    term.loadAddon(links);
+    term.open(host);
+    // Make the terminal surface focusable / clickable
+    try {
+      host.tabIndex = 0;
+      const ta = host.querySelector("textarea");
+      if (ta) {
+        ta.tabIndex = 0;
+        ta.setAttribute("autocomplete", "off");
+        ta.setAttribute("autocorrect", "off");
+        ta.setAttribute("autocapitalize", "off");
+        ta.setAttribute("spellcheck", "false");
+      }
+    } catch {
+      /* ignore */
+    }
+
+    termRef.current = term;
+    fitRef.current = fit;
+
+    try {
+      fit.fit();
+    } catch {
+      /* ignore */
+    }
+
+    const dataDisp = term.onData((data) => handleTermData(data));
+
+    const onResize = () => {
+      try {
+        fit.fit();
+        sendResize();
+      } catch {
+        /* ignore */
+      }
+    };
+
+    const onHostClick = () => focusTerm();
+    host.addEventListener("mousedown", onHostClick);
+    host.addEventListener("click", onHostClick);
+    host.addEventListener("focus", focusTerm);
+
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(onResize) : null;
+    ro?.observe(host);
+    window.addEventListener("resize", onResize);
+
+    // Defer focus — layout may still be settling
+    requestAnimationFrame(() => {
+      try {
+        fit.fit();
+      } catch {
+        /* ignore */
+      }
+      focusTerm();
+    });
+
+    startSession(term, fit);
+
+    return () => {
+      disposedRef.current = true;
+      ro?.disconnect();
+      window.removeEventListener("resize", onResize);
+      host.removeEventListener("mousedown", onHostClick);
+      host.removeEventListener("click", onHostClick);
+      host.removeEventListener("focus", focusTerm);
+      try {
+        dataDisp.dispose();
+      } catch {
+        /* ignore */
+      }
+      if (flushTimerRef.current) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+      if (esRef.current) {
+        try {
+          esRef.current.close();
+        } catch {
+          /* ignore */
+        }
+        esRef.current = null;
+      }
+      const sid = sessionIdRef.current;
+      sessionIdRef.current = "";
+      if (sid) {
+        fetch(`/api/terminal/session/${sid}`, {
+          method: "DELETE",
+          keepalive: true,
+          credentials: "same-origin",
+        }).catch(() => {});
+      }
+      try {
+        term.dispose();
+      } catch {
+        /* ignore */
+      }
+      termRef.current = null;
+      fitRef.current = null;
+    };
+  }, [handleTermData, sendResize, startSession, focusTerm]);
+
+  const statusColor =
+    status === "ready"
+      ? "bg-emerald-500"
+      : status === "connecting"
+        ? "bg-amber-400 animate-pulse"
+        : status === "forbidden"
+          ? "bg-amber-500"
+          : "bg-red-500";
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-[#0d0d0d]">
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-white/10 px-4 py-2.5">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className={`inline-block size-2 rounded-full ${statusColor}`} />
+            <span className="text-sm font-semibold text-white/90">Terminal</span>
+          </div>
+          <span className="truncate text-xs text-white/45">
+            {statusText}
+            {meta.shell ? ` · ${meta.shell}` : ""}
+            {meta.mode ? ` · ${meta.mode}` : ""}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleRestart}
+            className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 transition hover:border-[color:var(--brand,#E56A4A)]/50 hover:bg-white/10 hover:text-white"
+          >
+            New session
+          </button>
+        </div>
+      </div>
+
+      <div className="relative min-h-0 flex-1" onMouseDown={focusTerm}>
+        <div
+          ref={hostRef}
+          className="absolute inset-0 px-2 py-2 outline-none"
+          // Click to focus the xterm textarea so keystrokes reach onData
+        />
+      </div>
+
+      <div className="shrink-0 border-t border-white/10 px-4 py-1.5 text-[11px] text-white/35">
+        Localhost only · click the black area then type · idle sessions close after 30m
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/terminal/page.js

@@ -0,0 +1,7 @@
+import TerminalPageClient from "./TerminalPageClient";
+
+export const dynamic = "force-dynamic";
+
+export default function TerminalPage() {
+  return <TerminalPageClient />;
+}