Feat : console log

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"],