zevairouter 1.0.119 → 1.0.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zevairouter",
-  "version": "1.0.119",
+  "version": "1.0.121",
   "description": "Self-hosted AI router: many providers, one OpenAI-compatible /v1 endpoint and dashboard",
   "bin": {
     "zevai": "./cli/cli.js"

package/public/favicon.svg

@@ -1,12 +1,16 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="zg" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FF8A3D"/>
-      <stop offset="1" stop-color="#E0531F"/>
+    <linearGradient id="zg" x1="5" y1="3" x2="27" y2="29" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF9A52"/>
+      <stop offset="0.48" stop-color="#F56A2A"/>
+      <stop offset="1" stop-color="#D94716"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="8" y1="6" x2="23" y2="25" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF" stop-opacity="0.22"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
     </linearGradient>
   </defs>
-  <rect width="32" height="32" rx="7" fill="url(#zg)"/>
-  <path d="M9.5 11H22.5L9.5 21H22.5" fill="none" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="9.5" cy="11" r="2.5" fill="#ffffff"/>
-  <circle cx="22.5" cy="21" r="2.5" fill="#ffffff"/>
+  <rect x="1" y="1" width="30" height="30" rx="8" fill="url(#zg)"/>
+  <rect x="1.5" y="1.5" width="29" height="29" rx="7.5" stroke="url(#shine)"/>
+  <path d="M9 10H23L9 22H23" stroke="white" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/public/icons/icon-192.svg

@@ -1,12 +1,16 @@
 <svg width="192" height="192" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="zg" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FF8A3D"/>
-      <stop offset="1" stop-color="#E0531F"/>
+    <linearGradient id="zg" x1="5" y1="3" x2="27" y2="29" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF9A52"/>
+      <stop offset="0.48" stop-color="#F56A2A"/>
+      <stop offset="1" stop-color="#D94716"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="8" y1="6" x2="23" y2="25" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF" stop-opacity="0.22"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
     </linearGradient>
   </defs>
-  <rect width="32" height="32" rx="7" fill="url(#zg)"/>
-  <path d="M9.5 11H22.5L9.5 21H22.5" fill="none" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="9.5" cy="11" r="2.5" fill="#ffffff"/>
-  <circle cx="22.5" cy="21" r="2.5" fill="#ffffff"/>
+  <rect x="1" y="1" width="30" height="30" rx="8" fill="url(#zg)"/>
+  <rect x="1.5" y="1.5" width="29" height="29" rx="7.5" stroke="url(#shine)"/>
+  <path d="M9 10H23L9 22H23" stroke="white" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/public/icons/icon-512.svg

@@ -1,12 +1,16 @@
 <svg width="512" height="512" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="zg" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FF8A3D"/>
-      <stop offset="1" stop-color="#E0531F"/>
+    <linearGradient id="zg" x1="5" y1="3" x2="27" y2="29" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF9A52"/>
+      <stop offset="0.48" stop-color="#F56A2A"/>
+      <stop offset="1" stop-color="#D94716"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="8" y1="6" x2="23" y2="25" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF" stop-opacity="0.22"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
     </linearGradient>
   </defs>
-  <rect width="32" height="32" rx="7" fill="url(#zg)"/>
-  <path d="M9.5 11H22.5L9.5 21H22.5" fill="none" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="9.5" cy="11" r="2.5" fill="#ffffff"/>
-  <circle cx="22.5" cy="21" r="2.5" fill="#ffffff"/>
+  <rect x="1" y="1" width="30" height="30" rx="8" fill="url(#zg)"/>
+  <rect x="1.5" y="1.5" width="29" height="29" rx="7.5" stroke="url(#shine)"/>
+  <path d="M9 10H23L9 22H23" stroke="white" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/app/(dashboard)/dashboard/basic-chat/BasicChatPageClient.js

@@ -3,6 +3,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { marked } from "marked";
+import DOMPurify from "dompurify";
 import { Badge } from "@/shared/components";
 import { getModelsByProviderId } from "@/shared/constants/models";
 import {
@@ -69,7 +70,7 @@ function renderMarkdown(text) {
   const raw = textValue(text);
   if (!raw) return "";
   try {
-    return marked.parse(raw);
+    return DOMPurify.sanitize(marked.parse(raw));
   } catch {
     return raw.replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
@@ -439,9 +440,20 @@ export default function BasicChatPageClient() {
         setSettingsOpen(false);
       }
     };
+    const handleEscape = (event) => {
+      if (event.key !== "Escape") return;
+      setModelMenuOpen(false);
+      setModelQuery("");
+      setSettingsOpen(false);
+      setHistoryOpen(false);
+    };
 
     document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
   }, []);
 
   useEffect(() => {
@@ -893,14 +905,24 @@ export default function BasicChatPageClient() {
       }));
       finalizeSessionTitle(sessionId, userText);
     } catch (error) {
-      if (error.name !== "AbortError") {
+      if (error.name === "AbortError") {
+        updateSession(sessionId, (currentSession) => ({
+          ...currentSession,
+          messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? {
+            ...message,
+            content: message.content || "Stopped",
+            status: "stopped",
+          } : message)),
+          updatedAt: new Date().toISOString(),
+        }));
+        finalizeSessionTitle(sessionId, userText);
+      } else {
         const errorText = textValue(error?.message || error);
         updateSession(sessionId, (currentSession) => ({
           ...currentSession,
           messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? { ...message, content: message.content || `Error: ${errorText}`, status: "error" } : message)),
           updatedAt: new Date().toISOString(),
         }));
-        setLoadError(errorText || "Failed to send message.");
       }
     } finally {
       setIsSending(false);
@@ -944,7 +966,8 @@ export default function BasicChatPageClient() {
     <div className="relative flex h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-bg text-text-main">
       {/* ── Session sidebar (Open WebUI / ChatGPT style) ── */}
       <aside
-        className={`${historyOpen ? "flex" : "hidden"} lg:flex w-[260px] shrink-0 flex-col border-r border-border-subtle bg-surface/60 backdrop-blur-xl`}
+        id="playground-history"
+        className={`${historyOpen ? "flex" : "hidden"} fixed inset-y-0 left-0 z-30 w-[min(85vw,260px)] shrink-0 flex-col border-r border-border-subtle bg-surface/95 backdrop-blur-xl lg:static lg:z-auto lg:flex lg:w-[260px] lg:bg-surface/60`}
       >
         <div className="flex items-center gap-2 border-b border-border-subtle p-3">
           <button
@@ -1038,6 +1061,8 @@ export default function BasicChatPageClient() {
             onClick={() => setHistoryOpen(true)}
             className="flex size-9 items-center justify-center rounded-[10px] border border-border text-text-muted hover:bg-surface-2"
             aria-label="Open chats"
+            aria-expanded={historyOpen}
+            aria-controls="playground-history"
           >
             <span className="material-symbols-outlined text-[20px]">menu</span>
           </button>
@@ -1057,7 +1082,7 @@ export default function BasicChatPageClient() {
         </div>
 
         {loadError ? (
-          <div className="mx-4 mt-3 rounded-[10px] border border-danger/25 bg-danger/10 px-3 py-2.5 text-sm text-danger">
+          <div role="alert" className="mx-4 mt-3 rounded-[10px] border border-danger/25 bg-danger/10 px-3 py-2.5 text-sm text-danger">
             <div className="flex items-start gap-2">
               <span className="material-symbols-outlined text-[18px]">error</span>
               <p>{loadError}</p>
@@ -1110,6 +1135,7 @@ export default function BasicChatPageClient() {
                 const content =
                   textValue(message.content) || (isAssistant ? streamingText : "");
                 const isError = message.status === "error";
+                const isStopped = message.status === "stopped";
                 const isLastAssistant =
                   isAssistant &&
                   index === currentMessages.length - 1 &&
@@ -1173,8 +1199,11 @@ export default function BasicChatPageClient() {
                           <span className="ml-0.5 inline-block animate-pulse text-primary">▋</span>
                         ) : null}
 
+                        {isStopped ? (
+                          <p className="mt-2 text-xs text-text-muted">Generation stopped</p>
+                        ) : null}
                         {isAssistant && content && !isStreaming ? (
-                          <div className="mt-2 flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+                          <div className="mt-2 flex items-center gap-1 opacity-100 transition sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
                             <button
                               type="button"
                               onClick={() => copyMessage(message.id, content)}
@@ -1235,9 +1264,10 @@ export default function BasicChatPageClient() {
               </div>
             ) : null}
 
-            <div className="rounded-2xl border border-border-subtle bg-surface-2/80 shadow-[0_8px_30px_rgba(0,0,0,0.25)] ring-1 ring-white/5 focus-within:border-primary/50 focus-within:ring-primary/20 transition">
+            <div className="rounded-2xl border border-border-subtle bg-surface-2/80 shadow-soft ring-1 ring-border-subtle focus-within:border-primary/50 focus-within:ring-primary/20 transition">
               <textarea
                 ref={textareaRef}
+                aria-label="Message"
                 value={draft}
                 onChange={(event) => setDraft(event.target.value)}
                 onKeyDown={handleKeyDown}
@@ -1284,12 +1314,15 @@ export default function BasicChatPageClient() {
                           : "border-border bg-surface text-text-main hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
                       }`}
                       title="Chat settings"
+                      aria-label="Chat settings"
+                      aria-expanded={settingsOpen}
+                      aria-controls="playground-chat-settings"
                     >
                       <span className="material-symbols-outlined text-[18px]">tune</span>
                       <span className="hidden sm:inline tabular-nums">{temperature.toFixed(1)}</span>
                     </button>
                     {settingsOpen ? (
-                      <div className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(320px,calc(100vw-2rem))] space-y-3 rounded-xl border border-border bg-surface p-3 shadow-elevated">
+                      <div id="playground-chat-settings" className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(320px,calc(100vw-2rem))] space-y-3 rounded-xl border border-border bg-surface p-3 shadow-elevated">
                         <div>
                           <div className="mb-1.5 flex items-center justify-between gap-2">
                             <p className="text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
@@ -1351,6 +1384,10 @@ export default function BasicChatPageClient() {
                         });
                       }}
                       disabled={loadingData || providerGroups.length === 0}
+                      aria-label={`Choose model, currently ${modelLabel}`}
+                      aria-haspopup="listbox"
+                      aria-expanded={modelMenuOpen}
+                      aria-controls="playground-model-menu"
                       className="inline-flex h-9 max-w-[min(100vw-12rem,260px)] items-center gap-1.5 rounded-full border border-border bg-surface px-3 text-left transition hover:border-primary/40 hover:bg-surface-2 disabled:opacity-50"
                     >
                       <span className="material-symbols-outlined text-[18px] text-primary shrink-0">
@@ -1365,7 +1402,7 @@ export default function BasicChatPageClient() {
                     </button>
 
                     {modelMenuOpen ? (
-                      <div className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-surface shadow-elevated">
+                      <div id="playground-model-menu" role="listbox" aria-label="Models" className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-surface shadow-elevated">
                         <div className="border-b border-border-subtle px-3 py-2.5 space-y-2">
                           <div>
                             <p className="text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
@@ -1412,6 +1449,8 @@ export default function BasicChatPageClient() {
                                       <button
                                         key={model.id}
                                         type="button"
+                                        role="option"
+                                        aria-selected={isActive}
                                         onClick={() => {
                                           handleSelectModel(model.id);
                                           setModelQuery("");

package/src/app/(dashboard)/dashboard/console-log/ConsoleLogClient.js

@@ -5,87 +5,114 @@ import { Card, Button } from "@/shared/components";
 import { CONSOLE_LOG_CONFIG } from "@/shared/constants/config";
 
 const LOG_LEVEL_COLORS = {
-  LOG: "text-green-400",
-  INFO: "text-blue-400",
-  WARN: "text-yellow-400",
-  ERROR: "text-red-400",
-  DEBUG: "text-purple-400",
+  LOG: "text-green-700 dark:text-green-400",
+  INFO: "text-blue-700 dark:text-blue-400",
+  WARN: "text-amber-700 dark:text-yellow-400",
+  ERROR: "text-red-700 dark:text-red-400",
+  DEBUG: "text-purple-700 dark:text-purple-400",
 };
 
 function colorLine(line) {
-  const match = line.match(/\[(\w+)\]/g);
+  const text = typeof line === "string" ? line : String(line);
+  const match = text.match(/\[(\w+)\]/g);
   const levelTag = match ? match[1]?.replace(/\[|\]/g, "") : null;
-  const color = LOG_LEVEL_COLORS[levelTag] || "text-green-400";
-  return <span className={color}>{line}</span>;
+  const color = LOG_LEVEL_COLORS[levelTag] || "text-green-700 dark:text-green-400";
+  return <span className={color}>{text}</span>;
 }
 
 export default function ConsoleLogClient() {
   const [logs, setLogs] = useState([]);
-  const [connected, setConnected] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState("connecting");
+  const [reconnectKey, setReconnectKey] = useState(0);
+  const [clearPending, setClearPending] = useState(false);
+  const [error, setError] = useState(null);
   const logRef = useRef(null);
 
   const handleClear = async () => {
+    if (clearPending) return;
+    setClearPending(true);
+    setError(null);
+    const previousLogs = logs;
+    setLogs([]);
     try {
-      await fetch("/api/translator/console-logs", { method: "DELETE" });
-      // UI cleared via SSE "clear" event
+      const response = await fetch("/api/translator/console-logs", { method: "DELETE" });
+      if (!response.ok) throw new Error(`Failed to clear logs (${response.status})`);
     } catch (err) {
-      console.error("Failed to clear console logs:", err);
+      setLogs(previousLogs);
+      setError(err.message || "Failed to clear console logs");
+    } finally {
+      setClearPending(false);
     }
   };
 
   useEffect(() => {
     const es = new EventSource("/api/translator/console-logs/stream");
 
-    es.onopen = () => setConnected(true);
-
-    es.onmessage = (e) => {
-      const msg = JSON.parse(e.data);
-      if (msg.type === "init") {
-        setLogs(msg.logs.slice(-CONSOLE_LOG_CONFIG.maxLines));
-      } else if (msg.type === "line") {
-        setLogs((prev) => {
-          const next = [...prev, msg.line];
-          return next.length > CONSOLE_LOG_CONFIG.maxLines ? next.slice(-CONSOLE_LOG_CONFIG.maxLines) : next;
-        });
-      } else if (msg.type === "clear") {
-        setLogs([]);
+    es.onopen = () => setConnectionStatus("connected");
+    es.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "init" && Array.isArray(msg.logs)) {
+          setLogs(msg.logs.slice(-CONSOLE_LOG_CONFIG.maxLines));
+        } else if (msg.type === "line" && msg.line != null) {
+          setLogs((prev) => [...prev, String(msg.line)].slice(-CONSOLE_LOG_CONFIG.maxLines));
+        } else if (msg.type === "clear") {
+          setLogs([]);
+        }
+      } catch {
+        setError("Received an invalid console log event");
       }
     };
-
-    es.onerror = () => setConnected(false);
+    es.onerror = () => setConnectionStatus("disconnected");
 
     return () => es.close();
-  }, []);
+  }, [reconnectKey]);
 
-  // Auto-scroll to bottom on new logs
   useEffect(() => {
     if (!logRef.current) return;
     logRef.current.scrollTop = logRef.current.scrollHeight;
   }, [logs]);
 
   return (
-    <div className="">
-      <Card>
-        <div className="flex items-center justify-end px-4 pt-3 pb-2">
-          <Button size="sm" variant="outline" icon="delete" onClick={handleClear}>
+    <Card className="p-0 overflow-hidden">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border bg-surface-2 px-4 py-3">
+        <div role="status" aria-live="polite" className="flex items-center gap-2">
+          <span aria-hidden="true" className={`size-2 rounded-full ${connectionStatus === "connected" ? "bg-green-500" : connectionStatus === "connecting" ? "animate-pulse bg-yellow-500" : "bg-red-500"}`} />
+          <span className="text-sm capitalize text-text-muted">{connectionStatus}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          {connectionStatus === "disconnected" ? (
+            <Button size="sm" variant="outline" onClick={() => {
+              setConnectionStatus("connecting");
+              setError(null);
+              setReconnectKey((key) => key + 1);
+            }}>
+              Reconnect
+            </Button>
+          ) : null}
+          <Button size="sm" variant="outline" icon="delete" onClick={handleClear} loading={clearPending} disabled={logs.length === 0}>
             Clear
           </Button>
         </div>
-        <div
-          ref={logRef}
-          className="bg-black rounded-b-lg p-4 text-xs font-mono h-[calc(100vh-220px)] overflow-y-auto"
-        >
-          {logs.length === 0 ? (
-            <span className="text-text-muted">No console logs yet.</span>
-          ) : (
-            <div className="space-y-0.5">
-              {logs.map((line, i) => (
-                <div key={i}>{colorLine(line)}</div>
-              ))}
-            </div>
-          )}
-        </div>
-      </Card>
-    </div>
+      </div>
+      {error ? <div role="alert" className="border-b border-border px-4 py-2 text-sm text-danger">{error}</div> : null}
+      <div
+        ref={logRef}
+        role="log"
+        aria-live="polite"
+        aria-relevant="additions text"
+        className="h-[calc(100vh-220px)] overflow-y-auto bg-bg-alt p-4 font-mono text-xs text-text-main dark:bg-black"
+      >
+        {logs.length === 0 ? (
+          <span className="text-text-muted">
+            {connectionStatus === "connecting" ? "Connecting to console logs…" : connectionStatus === "disconnected" ? "Console log stream disconnected." : "No console logs yet. Logs appear after routed requests."}
+          </span>
+        ) : (
+          <div className="space-y-0.5">
+            {logs.map((line, index) => <div key={`${index}-${line}`}>{colorLine(line)}</div>)}
+          </div>
+        )}
+      </div>
+    </Card>
   );
 }