4bnode 4.0.3 → 4.0.5

package/README.md

@@ -155,6 +155,24 @@ Access at `http://localhost:3000/_dev` when running `npm run dev`.
 
 **SerialPort** - Serial port setup with path and baud rate config
 
+**Reports** - Export MongoDB data as Excel (.xlsx) reports:
+- Select models and fields to include
+- Include system fields (_id, createdAt, updatedAt)
+- Populate referenced ObjectId fields with sub-field selection
+- Custom column headers and field prefixes
+- Drag-and-drop column reordering
+- Configurable date format and timezone
+- Set row limit for large collections
+- Preview data before downloading
+- Download as `.xlsx` file
+
+**Logs** - Real-time server log monitoring:
+- Live log streaming via SSE (Server-Sent Events)
+- Filter by log type (LOG, INFO, WARN, ERROR)
+- Search through log entries
+- Auto-scroll with toggle
+- Keeps last 500 log entries
+
 **Environment** - View and edit `.env.development` and `.env.production`
 
 ## Generated Project Structure
@@ -162,22 +180,16 @@ Access at `http://localhost:3000/_dev` when running `npm run dev`.
 ```
 my-app/
 ├── index.js                    # Express app entry point
-├── dev-api.js                  # Dev dashboard API (auto-included)
 ├── package.json
 ├── .env.development            # Dev environment variables
 ├── .env.production             # Production environment variables
-├── .4bnode/                    # Dashboard data (tester, shared collections)
+├── .4bnode/                    # Dashboard engine & data (managed by 4bnode)
 ├── public/                     # Static files
-│   ├── index.html              # Dashboard UI
-│   ├── fonts/
-│   └── images/
-├── uploads/                    # File uploads (when using multer)
+│   └── index.html              # App status landing page
 └── src/
     ├── db.js                   # MongoDB connection (after `add mongo`)
     ├── models/                 # Mongoose schemas
-    ├── routes/                 # API route files
-    └── middleware/
-        └── auth.js             # JWT auth middleware (after `add login`)
+    └── routes/                 # API route files
 ```
 
 ## Real-time Communication

package/add-crud.js

@@ -97,7 +97,7 @@ ${assignments}
   };
 ${passwordLogic}
   try {
-    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { new: true });
+    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { returnDocument: 'after' });
     if (!updatedDocument) {
       return res.status(404).json({ message: 'Document not found' });
     }

package/add-mongo-update.js

@@ -84,7 +84,7 @@ ${fieldAssignments}
   };
 ${passwordLogic}
   try {
-    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { new: true });
+    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { returnDocument: 'after' });
     if (!updatedDocument) {
       return res.status(404).json({ message: 'Document not found' });
     }

package/index.js

@@ -3,7 +3,7 @@
 import fs from "fs";
 import path from "path";
 import crypto from "crypto";
-import { execFileSync } from "child_process";
+import { execSync, execFileSync } from "child_process";
 import { fileURLToPath } from "url";
 import chalk from "chalk";
 import { input, select, password } from "@inquirer/prompts";
@@ -107,7 +107,7 @@ async function createSkeletonApp(projectName) {
 
   const installSpinner = createSpinner("Installing dependencies...");
   installSpinner.start();
-  execFileSync("npm", ["install"], { stdio: "pipe", cwd: targetPath, shell: true });
+  execSync("npm install", { stdio: "pipe", cwd: targetPath });
   installSpinner.succeed(chalk.hex("#00f260").bold("Dependencies installed"));
 
   showSuccess([
@@ -123,9 +123,8 @@ async function createSkeletonApp(projectName) {
 }
 
 function runCommand(script, args = []) {
-  execFileSync("node", [path.join(__dirname, script), ...args], {
+  execFileSync(process.execPath, [path.join(__dirname, script), ...args], {
     stdio: "inherit",
-    shell: true,
   });
 }
 
@@ -369,10 +368,9 @@ async function main() {
       process.exit(1);
     }
     console.log(chalk.hex("#00f260").bold("\n  Starting dev server...\n"));
-    execFileSync("npm", ["run", "dev"], {
+    execSync("npm run dev", {
       stdio: "inherit",
       cwd: projectRoot,
-      shell: true,
     });
   }
   // Legacy commands → route through handleAdd

package/lib/ui.js

@@ -140,7 +140,6 @@ export async function installDeps(packages, opts = {}) {
     execSync(`npm install ${names.join(" ")}`, {
       stdio: "pipe",
       ...opts,
-      shell: true,
     });
     spinner.succeed(success(`Installed ${label}`));
   } catch (e) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "4bnode",
-  "version": "4.0.3",
-  "description": "A professional tool to generate a Node.js app by 4Brains Technologies",
+  "version": "4.0.5",
+  "description": "4bnode is a CLI-powered backend development platform with a built-in visual dashboard to generate, manage, and test Node.js/Express APIs faster.",
   "main": "index.js",
   "type": "module",
   "bin": {

package/skeleton/.4bnode/assets/js/App.js

@@ -12,6 +12,8 @@ import { RoutesPage } from "./pages/RoutesPage.js";
 import { ApiTesterPage } from "./pages/ApiTesterPage.js";
 import { RealtimePage } from "./pages/RealtimePage.js";
 import { SerialPortPage } from "./pages/SerialPortPage.js";
+import { LogsPage } from "./pages/LogsPage.js";
+import { ReportsPage } from "./pages/ReportsPage.js";
 import { EnvironmentPage } from "./pages/EnvironmentPage.js";
 
 function getHashPage() {
@@ -79,6 +81,8 @@ export function App() {
     "api-tester": html`<${ApiTesterPage} />`,
     realtime: html`<${RealtimePage} />`,
     serialport: html`<${SerialPortPage} />`,
+    reports: html`<${ReportsPage} />`,
+    logs: html`<${LogsPage} />`,
     env: html`<${EnvironmentPage} />`,
   };
 

package/skeleton/.4bnode/assets/js/components/Sidebar.js

@@ -35,7 +35,9 @@ export function Sidebar() {
       section: "Features",
     },
     { id: "serialport", label: "SerialPort", icon: Icons.serial },
-    { id: "env", label: "Environment", icon: Icons.env, section: "Settings" },
+    { id: "reports", label: "Reports", icon: Icons.reports, locked: !dbOk, lockMsg: "Requires database" },
+    { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
+    { id: "env", label: "Environment", icon: Icons.env },
   ];
 
   let currentSection = null;

package/skeleton/.4bnode/assets/js/lib.js

@@ -19,6 +19,8 @@ import {
   LuFlaskConical,
   LuSend,
   LuSettings,
+  LuScrollText,
+  LuFileSpreadsheet,
 } from "react-icons/lu";
 
 export const html = htm.bind(React.createElement);
@@ -28,6 +30,20 @@ export function getStoredPasskey() {
   return sessionStorage.getItem("_dev_passkey") || "";
 }
 
+export function copyToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.cssText = "position:fixed;opacity:0";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+  return Promise.resolve();
+}
+
 export async function api(path, options = {}) {
   const passkey = getStoredPasskey();
   const headers = { "Content-Type": "application/json" };
@@ -69,6 +85,8 @@ export const Icons = {
   box: html`<${LuBox} size=${16} />`,
   apiTester: html`<${LuFlaskConical} size=${16} />`,
   send: html`<${LuSend} size=${16} />`,
+  logs: html`<${LuScrollText} size=${16} />`,
+  reports: html`<${LuFileSpreadsheet} size=${16} />`,
 };
 
 export const PAGE_TITLES = {
@@ -79,5 +97,7 @@ export const PAGE_TITLES = {
   "api-tester": "API Tester",
   realtime: "Real-time",
   serialport: "SerialPort",
+  logs: "Logs",
+  reports: "Reports",
   env: "Environment",
 };

package/skeleton/.4bnode/assets/js/pages/ApiTesterPage.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { io as socketIoConnect } from "socket.io-client";
 import { LuChevronLeft, LuCircleDot, LuCopy, LuImport, LuLoader, LuPencil, LuPlugZap, LuPlus, LuRadio, LuSave, LuSend, LuShare2, LuTrash2, LuWifi, LuWifiOff } from "react-icons/lu";
-import { html, api, Icons } from "../lib.js";
+import { html, api, Icons, copyToClipboard } from "../lib.js";
 import { useApp } from "../context.js";
 import { Modal } from "../components/Modal.js";
 
@@ -66,7 +66,6 @@ function SocketIOTester({ selectedSaved, isSaved, loadedTest, onSaveTest, onSave
     try { parsed = JSON.parse(parsed); } catch {}
     sioSocket.emit(sioEvent, parsed);
     addLog('sent', sioEvent + ': ' + (typeof parsed === 'object' ? JSON.stringify(parsed) : parsed));
-    setSioData('');
   }
 
   function addListener() {
@@ -672,7 +671,7 @@ export function ApiTesterPage() {
         body: { tests: savedTests, responses: savedResponses },
       });
       const shareUrl = window.location.origin + '/_dev/shared/' + result.id;
-      navigator.clipboard.writeText(shareUrl);
+      copyToClipboard(shareUrl);
       const now = Date.now();
       setLastSharedAt(now);
       const snap = JSON.stringify({ t: savedTests.length, r: Object.keys(savedResponses).length, ids: savedTests.map(t => t.id).join(',') });
@@ -1496,7 +1495,7 @@ export function ApiTesterPage() {
               </span>
               <div style=${{ marginLeft: 'auto', display: 'flex', gap: '6px' }}>
                 <button className="btn btn-ghost btn-sm" style=${{ fontSize: '11px' }}
-                  onClick=${() => { navigator.clipboard.writeText(response.body || ''); toast('Copied', 'success'); }}>
+                  onClick=${() => { copyToClipboard(response.body || ''); toast('Copied', 'success'); }}>
                   <${LuCopy} size=${12} /> Copy
                 </button>
                 <button className="btn btn-ghost btn-sm" style=${{ fontSize: '11px' }}
@@ -1557,38 +1556,58 @@ export function ApiTesterPage() {
       </div>
     </div>
 
-    <!-- Import Route Modal -->
-    ${showImport && html`<div style=${{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}
-      onClick=${(e) => { if (e.target === e.currentTarget) setShowImport(false); }}>
-      <${motion.div}
-        initial=${{ opacity: 0, scale: 0.95 }}
-        animate=${{ opacity: 1, scale: 1 }}
-        transition=${{ duration: 0.15 }}
-        style=${{ background: 'var(--bg-card)', borderRadius: '12px', border: '1px solid var(--border)', width: '500px', maxHeight: '70vh', overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
-        <div style=${{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <div style=${{ fontWeight: 600, fontSize: '15px' }}>Import from Routes</div>
-          <button className="btn btn-ghost btn-sm" onClick=${() => setShowImport(false)}>✕</button>
-        </div>
-        <div style=${{ maxHeight: '55vh', overflowY: 'auto', padding: '8px 0' }}>
-          ${importLoading && html`<div style=${{ padding: '40px', textAlign: 'center' }}><span className="spinner" /></div>`}
-          ${!importLoading && importRoutes.length === 0 && html`<div style=${{ padding: '30px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>No routes found</div>`}
-          ${!importLoading && importRoutes.map(route => html`<div key=${route.name}>
-            <div style=${{ padding: '8px 20px', fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-              ${route.name} <span style=${{ fontWeight: 400, textTransform: 'none' }}>(${route.prefix})</span>
-            </div>
-            ${route.endpoints.map((ep, i) => html`<div key=${i}
-              style=${{ padding: '8px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px', transition: 'background 0.1s' }}
-              onClick=${() => importEndpoint(route, ep)}
-              onMouseOver=${(e) => e.currentTarget.style.background = 'var(--bg-input)'}
-              onMouseOut=${(e) => e.currentTarget.style.background = 'transparent'}>
-              <span className=${`route-method ${ep.method.toLowerCase()}`} style=${{ fontSize: '10px', padding: '1px 6px' }}>${ep.method}</span>
-              <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px', color: 'var(--text-primary)' }}>${ep.fullPath}</span>
-              ${ep.bodyFields?.length > 0 && html`<span style=${{ fontSize: '10px', color: 'var(--text-muted)', marginLeft: 'auto' }}>${ep.bodyFields.length} fields</span>`}
+    <!-- Import Route Panel -->
+    <${AnimatePresence}>
+      ${showImport && html`<${React.Fragment}>
+        <${motion.div}
+          key="import-overlay"
+          initial=${{ opacity: 0 }}
+          animate=${{ opacity: 1 }}
+          exit=${{ opacity: 0 }}
+          transition=${{ duration: 0.2 }}
+          onClick=${() => setShowImport(false)}
+          style=${{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }}
+        />
+        <${motion.div}
+          key="import-panel"
+          initial=${{ x: '100%' }}
+          animate=${{ x: 0 }}
+          exit=${{ x: '100%' }}
+          transition=${{ type: 'tween', duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+          style=${{
+            position: 'fixed', top: 0, right: 0, bottom: 0, width: '25%', minWidth: '300px',
+            background: 'var(--bg-card)', borderLeft: '1px solid var(--border)',
+            boxShadow: '-8px 0 30px rgba(0,0,0,0.3)', zIndex: 1001,
+            display: 'flex', flexDirection: 'column',
+          }}>
+          <div style=${{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+            <div style=${{ fontWeight: 600, fontSize: '15px' }}>Import from Routes</div>
+            <button onClick=${() => setShowImport(false)}
+              style=${{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: '18px', cursor: 'pointer', padding: '4px 8px', borderRadius: '6px', lineHeight: 1 }}
+              onMouseOver=${(e) => e.currentTarget.style.color = 'var(--text)'}
+              onMouseOut=${(e) => e.currentTarget.style.color = 'var(--text-muted)'}>✕</button>
+          </div>
+          <div style=${{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
+            ${importLoading && html`<div style=${{ padding: '40px', textAlign: 'center' }}><span className="spinner" /></div>`}
+            ${!importLoading && importRoutes.length === 0 && html`<div style=${{ padding: '30px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>No routes found</div>`}
+            ${!importLoading && importRoutes.map(route => html`<div key=${route.name}>
+              <div style=${{ padding: '10px 20px 6px', fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', position: 'sticky', top: 0, background: 'var(--bg-card)', zIndex: 1 }}>
+                ${route.name} <span style=${{ fontWeight: 400, textTransform: 'none' }}>(${route.prefix})</span>
+              </div>
+              ${route.endpoints.map((ep, i) => html`<div key=${i}
+                style=${{ padding: '9px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px', transition: 'background 0.1s', borderBottom: '1px solid rgba(255,255,255,0.02)' }}
+                onClick=${() => importEndpoint(route, ep)}
+                onMouseOver=${(e) => e.currentTarget.style.background = 'var(--bg-input)'}
+                onMouseOut=${(e) => e.currentTarget.style.background = 'transparent'}>
+                <span className=${`route-method ${ep.method.toLowerCase()}`} style=${{ fontSize: '10px', padding: '2px 7px' }}>${ep.method}</span>
+                <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px', color: 'var(--text-primary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${ep.fullPath}</span>
+                ${ep.bodyFields?.length > 0 && html`<span style=${{ fontSize: '10px', color: 'var(--text-muted)', flexShrink: 0 }}>${ep.bodyFields.length} fields</span>`}
+              </div>`)}
             </div>`)}
-          </div>`)}
-        </div>
-      <//>
-    </div>`}
+          </div>
+        <//>
+      <//>`}
+    <//>
   </div>`;
 }
 

package/skeleton/.4bnode/assets/js/pages/LogsPage.js

@@ -0,0 +1,205 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { html, api, API, getStoredPasskey } from "../lib.js";
+import { useApp } from "../context.js";
+
+const TYPE_COLORS = {
+  log: "var(--text)",
+  info: "var(--info)",
+  warn: "var(--warning)",
+  error: "var(--error)",
+};
+
+const TYPE_BADGES = {
+  log: "LOG",
+  info: "INFO",
+  warn: "WARN",
+  error: "ERR",
+};
+
+export function LogsPage() {
+  const { toast } = useApp();
+  const [logs, setLogs] = useState([]);
+  const [filter, setFilter] = useState("all");
+  const [search, setSearch] = useState("");
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [connected, setConnected] = useState(false);
+  const bottomRef = useRef(null);
+  const containerRef = useRef(null);
+  const eventSourceRef = useRef(null);
+
+  // Load existing logs
+  useEffect(() => {
+    api("/logs").then(setLogs).catch(() => {});
+  }, []);
+
+  // SSE stream for real-time logs
+  useEffect(() => {
+    const passkey = getStoredPasskey();
+    const url = API + "/logs/stream" + (passkey ? "?passkey=" + encodeURIComponent(passkey) : "");
+    const es = new EventSource(url);
+    eventSourceRef.current = es;
+
+    es.onopen = () => setConnected(true);
+    es.onmessage = (e) => {
+      try {
+        const entry = JSON.parse(e.data);
+        setLogs((prev) => {
+          const next = [...prev, entry];
+          return next.length > 500 ? next.slice(-500) : next;
+        });
+      } catch {}
+    };
+    es.onerror = () => setConnected(false);
+
+    return () => es.close();
+  }, []);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logs, autoScroll]);
+
+  // Detect manual scroll
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    setAutoScroll(scrollHeight - scrollTop - clientHeight < 60);
+  }, []);
+
+  const handleClear = async () => {
+    try {
+      await api("/logs", { method: "DELETE" });
+      setLogs([]);
+      toast("Logs cleared", "success");
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  };
+
+  const filtered = logs.filter((l) => {
+    if (filter !== "all" && l.type !== filter) return false;
+    if (search && !l.message.toLowerCase().includes(search.toLowerCase())) return false;
+    return true;
+  });
+
+  const counts = {
+    all: logs.length,
+    log: logs.filter((l) => l.type === "log").length,
+    error: logs.filter((l) => l.type === "error").length,
+    warn: logs.filter((l) => l.type === "warn").length,
+    info: logs.filter((l) => l.type === "info").length,
+  };
+
+  const formatTime = (ts) => {
+    try {
+      const d = new Date(ts);
+      return d.toLocaleTimeString([], { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })
+        + "." + String(d.getMilliseconds()).padStart(3, "0");
+    } catch { return ""; }
+  };
+
+  return html`<div style=${{ display: "flex", flexDirection: "column", height: "100%", gap: "12px" }}>
+
+    <!-- Toolbar -->
+    <div style=${{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
+      <div style=${{ display: "flex", gap: "4px", background: "var(--bg-surface)", borderRadius: "8px", padding: "3px" }}>
+        ${["all", "log", "error", "warn", "info"].map(
+          (f) => html`<button key=${f} onClick=${() => setFilter(f)}
+            style=${{
+              padding: "4px 10px", fontSize: "11px", borderRadius: "6px", border: "none", cursor: "pointer",
+              background: filter === f ? "var(--accent)" : "transparent",
+              color: filter === f ? "#fff" : "var(--text-muted)",
+              fontWeight: filter === f ? 600 : 400,
+            }}>
+            ${f.toUpperCase()}${counts[f] > 0 ? ` (${counts[f]})` : ""}
+          </button>`
+        )}
+      </div>
+
+      <input
+        type="text"
+        placeholder="Search logs..."
+        value=${search}
+        onInput=${(e) => setSearch(e.target.value)}
+        style=${{
+          flex: 1, minWidth: "160px", padding: "6px 10px", fontSize: "12px",
+          background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: "6px",
+          color: "var(--text)", outline: "none",
+        }}
+      />
+
+      <div style=${{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <span style=${{
+          width: "8px", height: "8px", borderRadius: "50%",
+          background: connected ? "var(--success)" : "var(--error)",
+          display: "inline-block",
+        }} />
+        <span style=${{ fontSize: "11px", color: "var(--text-muted)" }}>
+          ${connected ? "Live" : "Disconnected"}
+        </span>
+      </div>
+
+      <button onClick=${() => setAutoScroll(!autoScroll)}
+        style=${{
+          padding: "4px 10px", fontSize: "11px", borderRadius: "6px", border: "1px solid var(--border)",
+          cursor: "pointer",
+          background: autoScroll ? "var(--accent)" : "var(--bg-surface)",
+          color: autoScroll ? "#fff" : "var(--text-muted)",
+        }}>
+        Auto-scroll ${autoScroll ? "ON" : "OFF"}
+      </button>
+
+      <button onClick=${handleClear}
+        style=${{
+          padding: "4px 10px", fontSize: "11px", borderRadius: "6px",
+          border: "1px solid var(--border)", cursor: "pointer",
+          background: "var(--bg-surface)", color: "var(--error)",
+        }}>
+        Clear
+      </button>
+    </div>
+
+    <!-- Log Output -->
+    <div ref=${containerRef} onScroll=${handleScroll}
+      style=${{
+        flex: 1, overflow: "auto", background: "#0a0a0f", borderRadius: "8px",
+        border: "1px solid var(--border)", fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+        fontSize: "12px", lineHeight: "1.7", padding: "12px 0",
+      }}>
+      ${filtered.length === 0 && html`
+        <div style=${{ padding: "40px", textAlign: "center", color: "var(--text-muted)", fontSize: "12px" }}>
+          ${logs.length === 0 ? "No logs yet. Console output from your app will appear here." : "No logs match the current filter."}
+        </div>
+      `}
+      ${filtered.map(
+        (entry) => html`<div key=${entry.id}
+          style=${{
+            padding: "1px 14px", display: "flex", gap: "10px", alignItems: "flex-start",
+            borderLeft: entry.type === "error" ? "2px solid var(--error)" : entry.type === "warn" ? "2px solid var(--warning)" : "2px solid transparent",
+            background: entry.type === "error" ? "rgba(239,68,68,0.04)" : entry.type === "warn" ? "rgba(245,158,11,0.04)" : "transparent",
+          }}>
+          <span style=${{ color: "var(--text-muted)", fontSize: "10px", minWidth: "80px", paddingTop: "2px", userSelect: "none" }}>
+            ${formatTime(entry.timestamp)}
+          </span>
+          <span style=${{
+            fontSize: "9px", fontWeight: 700, minWidth: "32px", textAlign: "center",
+            padding: "1px 4px", borderRadius: "3px", letterSpacing: "0.5px", paddingTop: "3px",
+            background: entry.type === "error" ? "rgba(239,68,68,0.15)" : entry.type === "warn" ? "rgba(245,158,11,0.15)" : entry.type === "info" ? "rgba(59,130,246,0.15)" : "rgba(255,255,255,0.06)",
+            color: TYPE_COLORS[entry.type] || "var(--text)",
+          }}>
+            ${TYPE_BADGES[entry.type] || "LOG"}
+          </span>
+          <span style=${{
+            color: TYPE_COLORS[entry.type] || "var(--text)",
+            whiteSpace: "pre-wrap", wordBreak: "break-all", flex: 1,
+          }}>
+            ${entry.message}
+          </span>
+        </div>`
+      )}
+      <div ref=${bottomRef} />
+    </div>
+  </div>`;
+}