Feat : console log

open-sse/handlers/chatCore/requestDetail.js

@@ -80,7 +80,7 @@ export function saveUsageStats({ provider, model, tokens, connectionId, apiKey,
 
   if (inTokens === 0 && outTokens === 0) return;
 
-  const time = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" });
+  const time = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
   const accountSuffix = connectionId ? ` | account=${connectionId.slice(0, 8)}...` : "";
   console.log(`${COLORS.green}[${time}] 📊 [${label}] ${provider.toUpperCase()} | in=${inTokens} | out=${outTokens}${accountSuffix}${COLORS.reset}`);
 

open-sse/utils/streamHelpers.js

@@ -57,6 +57,33 @@ export function fixInvalidId(parsed) {
   return false;
 }
 
+function cleanUsagePayload(payload) {
+  if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
+    return payload;
+  }
+
+  let cleaned = payload;
+
+  if ("usage" in cleaned) {
+    if (cleaned.usage === null) {
+      const { usage, ...payloadWithoutUsage } = cleaned;
+      cleaned = payloadWithoutUsage;
+    } else if (typeof cleaned.usage === "object" && cleaned.usage.perf_metrics === null) {
+      const { perf_metrics, ...usageWithoutPerf } = cleaned.usage;
+      cleaned = { ...cleaned, usage: usageWithoutPerf };
+    }
+  }
+
+  if (cleaned.response && typeof cleaned.response === "object" && !Array.isArray(cleaned.response)) {
+    const cleanedResponse = cleanUsagePayload(cleaned.response);
+    if (cleanedResponse !== cleaned.response) {
+      cleaned = { ...cleaned, response: cleanedResponse };
+    }
+  }
+
+  return cleaned;
+}
+
 // Format output as SSE
 export function formatSSE(data, sourceFormat) {
   if (data === null || data === undefined) return "data: null\n\n";
@@ -64,23 +91,16 @@ export function formatSSE(data, sourceFormat) {
 
   // OpenAI Responses API format
   if (data && data.event && data.data) {
-    return `event: ${data.event}\ndata: ${JSON.stringify(data.data)}\n\n`;
+    const cleanedEventData = cleanUsagePayload(data.data);
+    return `event: ${data.event}\ndata: ${JSON.stringify(cleanedEventData)}\n\n`;
   }
 
+  data = cleanUsagePayload(data);
+
   // Claude format
   if (sourceFormat === FORMATS.CLAUDE && data && data.type) {
-    if (data.usage && typeof data.usage === 'object' && data.usage.perf_metrics === null) {
-      const { perf_metrics, ...usageWithoutPerf } = data.usage;
-      data = { ...data, usage: usageWithoutPerf };
-    }
     return `event: ${data.type}\ndata: ${JSON.stringify(data)}\n\n`;
   }
 
-  // Remove null perf_metrics
-  if (data?.usage && typeof data.usage === 'object' && data.usage.perf_metrics === null) {
-    const { perf_metrics, ...usageWithoutPerf } = data.usage;
-    data = { ...data, usage: usageWithoutPerf };
-  }
-
   return `data: ${JSON.stringify(data)}\n\n`;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "9router-app",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "description": "9Router web dashboard",
   "private": true,
   "scripts": {

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+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",
+};
+
+function colorLine(line) {
+  const match = line.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>;
+}
+
+export default function ConsoleLogClient() {
+  const [logs, setLogs] = useState([]);
+  const [connected, setConnected] = useState(false);
+  const logRef = useRef(null);
+
+  const handleClear = async () => {
+    try {
+      await fetch("/api/translator/console-logs", { method: "DELETE" });
+      // UI cleared via SSE "clear" event
+    } catch (err) {
+      console.error("Failed to clear console logs:", err);
+    }
+  };
+
+  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.onerror = () => setConnected(false);
+
+    return () => es.close();
+  }, []);
+
+  // 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}>
+            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>
+  );
+}

src/app/(dashboard)/dashboard/console-log/page.js

@@ -0,0 +1,8 @@
+import ConsoleLogClient from "./ConsoleLogClient";
+
+// Force dynamic so Next.js standalone build includes the server-side JS file
+export const dynamic = "force-dynamic";
+
+export default function ConsoleLogPage() {
+  return <ConsoleLogClient />;
+}

src/app/api/translator/console-logs/route.js

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { clearConsoleLogs, getConsoleLogs, initConsoleLogCapture } from "@/lib/consoleLogBuffer";
+
+initConsoleLogCapture();
+
+export async function GET() {
+  try {
+    const logs = getConsoleLogs();
+    return NextResponse.json({ success: true, logs });
+  } catch (error) {
+    console.error("Error getting console logs:", error);
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}
+
+export async function DELETE() {
+  try {
+    clearConsoleLogs();
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error clearing console logs:", error);
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

src/app/api/translator/console-logs/stream/route.js

@@ -0,0 +1,70 @@
+import { getConsoleLogs, getConsoleEmitter, initConsoleLogCapture } from "@/lib/consoleLogBuffer";
+
+export const dynamic = "force-dynamic";
+
+initConsoleLogCapture();
+
+export async function GET() {
+  const encoder = new TextEncoder();
+  const emitter = getConsoleEmitter();
+  const state = { closed: false, send: null, keepalive: null };
+
+  const stream = new ReadableStream({
+    start(controller) {
+      // Send all buffered logs immediately on connect
+      const buffered = getConsoleLogs();
+      if (buffered.length > 0) {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: "init", logs: buffered })}\n\n`));
+      }
+
+      // Push new lines as they arrive
+      state.send = (line) => {
+        if (state.closed) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: "line", line })}\n\n`));
+        } catch {
+          state.closed = true;
+        }
+      };
+
+      // Notify client when cleared
+      state.sendClear = () => {
+        if (state.closed) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: "clear" })}\n\n`));
+        } catch {
+          state.closed = true;
+        }
+      };
+
+      emitter.on("line", state.send);
+      emitter.on("clear", state.sendClear);
+
+      // Keepalive ping every 25s
+      state.keepalive = setInterval(() => {
+        if (state.closed) { clearInterval(state.keepalive); return; }
+        try {
+          controller.enqueue(encoder.encode(": ping\n\n"));
+        } catch {
+          state.closed = true;
+          clearInterval(state.keepalive);
+        }
+      }, 25000);
+    },
+
+    cancel() {
+      state.closed = true;
+      emitter.off("line", state.send);
+      emitter.off("clear", state.sendClear);
+      clearInterval(state.keepalive);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive",
+    },
+  });
+}

src/app/api/version/route.js

@@ -38,7 +38,6 @@ function compareVersions(a, b) {
 
 export async function GET() {
   const latestVersion = await fetchLatestVersion();
-  console.log("🚀 ~ GET ~ latestVersion:", latestVersion)
   const currentVersion = pkg.version;
   const hasUpdate = latestVersion ? compareVersions(latestVersion, currentVersion) > 0 : false;
 

src/app/layout.js

@@ -3,6 +3,10 @@ import "./globals.css";
 import { ThemeProvider } from "@/shared/components/ThemeProvider";
 import "@/lib/initCloudSync"; // Auto-initialize cloud sync
 import "@/lib/network/initOutboundProxy"; // Auto-initialize outbound proxy env
+import { initConsoleLogCapture } from "@/lib/consoleLogBuffer";
+
+// Hook console immediately at module load time (server-side only, runs once)
+initConsoleLogCapture();
 
 const inter = Inter({
   subsets: ["latin"],

src/lib/consoleLogBuffer.js

@@ -0,0 +1,79 @@
+import { EventEmitter } from "events";
+import { CONSOLE_LOG_CONFIG } from "@/shared/constants/config.js";
+
+const consoleLevels = ["log", "info", "warn", "error", "debug"];
+
+if (!global._consoleLogBufferState) {
+  global._consoleLogBufferState = {
+    logs: [],
+    patched: false,
+    originals: {},
+    emitter: new EventEmitter(),
+  };
+  global._consoleLogBufferState.emitter.setMaxListeners(50);
+}
+
+const state = global._consoleLogBufferState;
+
+// Ensure emitter exists (handles hot reload with stale global)
+if (!state.emitter) {
+  state.emitter = new EventEmitter();
+  state.emitter.setMaxListeners(50);
+}
+
+function toLogLine(level, args) {
+  return args.map(formatArg).join(" ");
+}
+
+// Strip ANSI escape codes so terminal colors don't bleed into UI
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+
+function stripAnsi(str) {
+  return str.replace(ANSI_RE, "");
+}
+
+function formatArg(arg) {
+  if (typeof arg === "string") return stripAnsi(arg);
+  if (arg instanceof Error) return stripAnsi(arg.stack || arg.message || String(arg));
+  try {
+    return stripAnsi(JSON.stringify(arg));
+  } catch {
+    return stripAnsi(String(arg));
+  }
+}
+
+function appendLine(line) {
+  state.logs.push(line);
+  const maxLines = CONSOLE_LOG_CONFIG.maxLines;
+  if (state.logs.length > maxLines) {
+    state.logs = state.logs.slice(-maxLines);
+  }
+  state.emitter.emit("line", line);
+}
+
+export function initConsoleLogCapture() {
+  if (state.patched) return;
+
+  for (const level of consoleLevels) {
+    state.originals[level] = console[level];
+    console[level] = (...args) => {
+      appendLine(toLogLine(level, args));
+      state.originals[level](...args);
+    };
+  }
+
+  state.patched = true;
+}
+
+export function getConsoleLogs() {
+  return state.logs;
+}
+
+export function clearConsoleLogs() {
+  state.logs = [];
+  state.emitter.emit("clear");
+}
+
+export function getConsoleEmitter() {
+  return state.emitter;
+}

src/lib/usageDb.js

@@ -120,7 +120,8 @@ export function trackPendingRequest(model, provider, connectionId, started, erro
     lastErrorProvider.ts = Date.now();
   }
 
-  console.log(`[PENDING] ${started ? "START" : "END"}${error ? " (ERROR)" : ""} | provider=${provider} | model=${model} | emitter listeners=${statsEmitter.listenerCount("pending")}`);
+  const t = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  console.log(`[${t}] [PENDING] ${started ? "START" : "END"}${error ? " (ERROR)" : ""} | provider=${provider} | model=${model}`);
   statsEmitter.emit("pending");
 }
 

src/shared/components/Header.js

@@ -33,6 +33,8 @@ const getPageInfo = (pathname) => {
   if (pathname.includes("/cli-tools")) return { title: "CLI Tools", description: "Configure CLI tools", breadcrumbs: [] };
   if (pathname.includes("/endpoint")) return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
   if (pathname.includes("/profile")) return { title: "Settings", description: "Manage your preferences", breadcrumbs: [] };
+  if (pathname.includes("/translator")) return { title: "Translator", description: "Debug translation flow between formats", breadcrumbs: [] };
+  if (pathname.includes("/console-log")) return { title: "Console Log", description: "Live server console output", breadcrumbs: [] };
   if (pathname === "/dashboard") return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
   return { title: "", description: "", breadcrumbs: [] };
 };

src/shared/components/Sidebar.js

@@ -19,7 +19,8 @@ const navItems = [
 
 // Debug items (only show when ENABLE_REQUEST_LOGS=true)
 const debugItems = [
-  { href: "/dashboard/translator", label: "Translator", icon: "translate" },
+  // { href: "/dashboard/translator", label: "Translator", icon: "translate" },
+  { href: "/dashboard/console-log", label: "Console Log", icon: "terminal" },
 ];
 
 const systemItems = [
@@ -31,17 +32,8 @@ export default function Sidebar({ onClose }) {
   const [showShutdownModal, setShowShutdownModal] = useState(false);
   const [isShuttingDown, setIsShuttingDown] = useState(false);
   const [isDisconnected, setIsDisconnected] = useState(false);
-  const [showDebug, setShowDebug] = useState(false);
   const [updateInfo, setUpdateInfo] = useState(null);
 
-  // Check if debug mode is enabled
-  useEffect(() => {
-    fetch("/api/settings")
-      .then(res => res.json())
-      .then(data => setShowDebug(data?.enableRequestLogs === true))
-      .catch(() => {});
-  }, []);
-
   // Lazy check for new npm version on mount
   useEffect(() => {
     fetch("/api/version")
@@ -130,9 +122,8 @@ export default function Sidebar({ onClose }) {
             </Link>
           ))}
 
-          {/* Debug section (only show when ENABLE_REQUEST_LOGS=true) */}
-          {showDebug && (
-            <div className="pt-4 mt-2">
+          {/* Debug section */}
+          <div className="pt-4 mt-2">
               <p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-2">
                 Debug
               </p>
@@ -160,7 +151,6 @@ export default function Sidebar({ onClose }) {
                 </Link>
               ))}
             </div>
-          )}
 
           {/* System section */}
           <div className="pt-4 mt-2">

src/shared/constants/config.js

@@ -29,6 +29,11 @@ export const API_ENDPOINTS = {
   auth: "/api/auth",
 };
 
+export const CONSOLE_LOG_CONFIG = {
+  maxLines: 200,
+  pollIntervalMs: 1000,
+};
+
 // Provider API endpoints (for display only)
 export const PROVIDER_ENDPOINTS = {
   openrouter: "https://openrouter.ai/api/v1/chat/completions",

src/shared/constants/providers.js

@@ -26,7 +26,7 @@ export const APIKEY_PROVIDERS = {
   kimi: { id: "kimi", alias: "kimi", name: "Kimi", icon: "psychology", color: "#1E3A8A", textIcon: "KM", website: "https://kimi.moonshot.cn" },
   minimax: { id: "minimax", alias: "minimax", name: "Minimax Coding", icon: "memory", color: "#7C3AED", textIcon: "MM", website: "https://www.minimaxi.com" },
   "minimax-cn": { id: "minimax-cn", alias: "minimax-cn", name: "Minimax (China)", icon: "memory", color: "#DC2626", textIcon: "MC", website: "https://www.minimaxi.com" },
-  alicode: { id: "alicode", alias: "alicode", name: "Aliyun Bailian", icon: "cloud", color: "#FF6A00", textIcon: "ALi" },
+  alicode: { id: "alicode", alias: "alicode", name: "Alibaba", icon: "cloud", color: "#FF6A00", textIcon: "ALi" },
   openai: { id: "openai", alias: "openai", name: "OpenAI", icon: "auto_awesome", color: "#10A37F", textIcon: "OA", website: "https://platform.openai.com" },
   anthropic: { id: "anthropic", alias: "anthropic", name: "Anthropic", icon: "smart_toy", color: "#D97757", textIcon: "AN", website: "https://console.anthropic.com" },
   gemini: { id: "gemini", alias: "gemini", name: "Gemini", icon: "diamond", color: "#4285F4", textIcon: "GE", website: "https://ai.google.dev" },