@webda/debug 4.0.0-beta.3

package/lib/tui/tui.js

@@ -0,0 +1,236 @@
+import termkit from "terminal-kit";
+import { DebugClient } from "./client.js";
+import { ModelsPanel } from "./panels/models.js";
+import { ServicesPanel } from "./panels/services.js";
+import { OperationsPanel } from "./panels/operations.js";
+import { RequestsPanel } from "./panels/requests.js";
+import { LogsPanel } from "./panels/logs.js";
+const { terminal: term } = termkit;
+/**
+ * Terminal UI dashboard for the Webda debug server.
+ *
+ * Provides a tab-based interface with seven panels (Logs, Models, Services,
+ * Operations, Routes, Config, Requests) and live WebSocket updates.
+ * Connect to an already-running debug server started with `webda debug`.
+ */
+export class DebugTui {
+    /**
+     * Create a new TUI instance.
+     *
+     * @param port - Port of the debug server to connect to
+     */
+    constructor(port = 18181) {
+        this.panels = [];
+        this.activeTab = 0;
+        this.running = false;
+        this.lastRefresh = "";
+        this.appInfo = null;
+        this.client = new DebugClient(`http://localhost:${port}`);
+        this.logsPanel = new LogsPanel(this.client);
+        this.panels = [
+            this.logsPanel,
+            new ModelsPanel(this.client),
+            new ServicesPanel(this.client),
+            new OperationsPanel(this.client),
+            new RequestsPanel(this.client)
+        ];
+    }
+    /**
+     * Start the TUI: initialize terminal, load data, and begin rendering.
+     */
+    async start() {
+        this.running = true;
+        // Set up terminal
+        term.fullscreen(true);
+        term.hideCursor();
+        term.grabInput(true);
+        // Handle input
+        term.on("key", (key) => this.handleKey(key));
+        // Connect WebSocket for live events
+        this.client.connectWebSocket();
+        // Listen for WebSocket events: restart triggers refetch, log events go to LogsPanel
+        this.wsUnsubscribe = this.client.onEvent(event => {
+            if (event.type === "restart") {
+                this.refreshAll();
+            }
+            else if (event.type === "log") {
+                this.logsPanel.onWsEvent(event);
+            }
+        });
+        // Initial data load
+        await this.refreshAll();
+        // Periodic render (for live updates like requests panel)
+        this.renderTimer = setInterval(() => {
+            if (this.running)
+                this.render();
+        }, 500);
+        // Initial render
+        this.render();
+    }
+    /**
+     * Refresh data for all panels.
+     */
+    async refreshAll() {
+        const now = new Date();
+        this.lastRefresh =
+            String(now.getHours()).padStart(2, "0") +
+                ":" +
+                String(now.getMinutes()).padStart(2, "0") +
+                ":" +
+                String(now.getSeconds()).padStart(2, "0");
+        const refreshPromises = this.panels.map(p => (p.refresh ? p.refresh() : Promise.resolve()));
+        refreshPromises.push(this.client.getAppInfo().then(info => { this.appInfo = info; }));
+        await Promise.allSettled(refreshPromises);
+        if (this.running)
+            this.render();
+    }
+    /**
+     * Handle keyboard input.
+     * @param key - key name from terminal-kit
+     */
+    handleKey(key) {
+        // Quit
+        if (key === "q" || key === "CTRL_C") {
+            this.stop();
+            return;
+        }
+        // Tab switching with number keys
+        const tabKeys = ["1", "2", "3", "4", "5", "6", "7"];
+        const tabIdx = tabKeys.indexOf(key);
+        if (tabIdx >= 0 && tabIdx < this.panels.length) {
+            this.activeTab = tabIdx;
+            this.render();
+            return;
+        }
+        // Tab switching with left/right arrows (shift+arrow or tab/shift+tab)
+        if (key === "TAB" || key === "RIGHT") {
+            this.activeTab = (this.activeTab + 1) % this.panels.length;
+            this.render();
+            return;
+        }
+        if (key === "SHIFT_TAB" || key === "LEFT") {
+            this.activeTab = (this.activeTab - 1 + this.panels.length) % this.panels.length;
+            this.render();
+            return;
+        }
+        // Refresh
+        if (key === "r" || key === "R") {
+            this.refreshAll();
+            return;
+        }
+        // Forward to active panel
+        const panel = this.panels[this.activeTab];
+        if (panel.onKey) {
+            panel.onKey(key);
+            this.render();
+        }
+    }
+    /**
+     * Full render: header, panel content, status bar.
+     */
+    render() {
+        if (!this.running)
+            return;
+        const width = term.width;
+        const height = term.height;
+        // Header bar (row 1)
+        this.renderHeader(width);
+        // Content area (row 3 to height - 1)
+        const panel = this.panels[this.activeTab];
+        for (let row = 3; row < height; row++) {
+            term.moveTo(1, row);
+            term.eraseLine();
+        }
+        panel.render(term, 3, height - 1, width);
+        // Status bar (last row)
+        this.renderStatusBar(width, height);
+    }
+    /**
+     * Render the header/tab bar.
+     * @param width - terminal width in columns
+     */
+    renderHeader(width) {
+        term.moveTo(1, 1);
+        term.eraseLine();
+        term.white("web");
+        term.yellow("da");
+        term.white(" debug");
+        if (this.appInfo) {
+            const name = this.appInfo.package?.name || "";
+            const cwd = (this.appInfo.workingDirectory || "").replace(/^\/(Users|home)\/[^/]+\//, "~/");
+            term.dim(` | ${name} ${cwd}`);
+        }
+        term("  ");
+        for (let i = 0; i < this.panels.length; i++) {
+            const label = ` ${i + 1}:${this.panels[i].name} `;
+            if (i === this.activeTab) {
+                term.bgCyan.black.bold(label);
+            }
+            else {
+                term.dim(label);
+            }
+        }
+        // Separator line
+        term.moveTo(1, 2);
+        term.eraseLine();
+        term.dim("-".repeat(width));
+    }
+    /**
+     * Render the status bar at the bottom.
+     * @param width - terminal width in columns
+     * @param height - terminal height in rows
+     */
+    renderStatusBar(width, height) {
+        term.moveTo(1, height);
+        term.eraseLine();
+        // Connection status
+        if (this.client.connected) {
+            term.bgGreen.black(" CONNECTED ");
+        }
+        else {
+            term.bgRed.white(" DISCONNECTED ");
+        }
+        term("  ");
+        term.dim(`Last refresh: ${this.lastRefresh || "never"}`);
+        // Right-aligned help
+        const help = " q:Quit  r:Refresh  1-7:Tabs  Arrows:Navigate ";
+        const pos = Math.max(1, width - help.length);
+        term.moveTo(pos, height);
+        term.dim(help);
+    }
+    /**
+     * Stop the TUI and clean up.
+     */
+    stop() {
+        if (!this.running)
+            return;
+        this.running = false;
+        if (this.renderTimer) {
+            clearInterval(this.renderTimer);
+            this.renderTimer = undefined;
+        }
+        if (this.wsUnsubscribe) {
+            this.wsUnsubscribe();
+            this.wsUnsubscribe = undefined;
+        }
+        // Destroy all panels
+        for (const panel of this.panels) {
+            panel.destroy();
+        }
+        // Disconnect from server
+        this.client.disconnect();
+        // Restore terminal
+        term.hideCursor(false);
+        term.grabInput(false);
+        term.fullscreen(false);
+        term.clear();
+        if (this.onStop) {
+            // The command owning the TUI stops the application, then exits
+            this.onStop();
+        }
+        else {
+            term.processExit(0);
+        }
+    }
+}
+//# sourceMappingURL=tui.js.map

package/lib/tui/tui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tui.js","sourceRoot":"","sources":["../../src/tui/tui.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@webda/debug",
+  "version": "4.0.0-beta.3",
+  "description": "Development debug server for Webda applications",
+  "keywords": [
+    "webda",
+    "debug"
+  ],
+  "author": "Remi Cattiau <remi@cattiau.com>",
+  "repository": "git://github.com/loopingz/webda.io.git",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "dependencies": {
+    "terminal-kit": "^3.1.2",
+    "ws": "^8.18.0",
+    "@webda/utils": "4.0.0-beta.3",
+    "@webda/workout": "4.0.0-beta.3"
+  },
+  "peerDependencies": {
+    "@webda/core": "^4.0.0-beta.1"
+  },
+  "devDependencies": {
+    "@types/node": "25.5.0",
+    "@types/ws": "^8.5.13",
+    "@vitest/coverage-v8": "^4.1.2",
+    "jscodeshift": "^17.3.0",
+    "typescript": "7.1.0-dev.20260929.1",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.2",
+    "@webda/compiler": "^4.0.0-beta.3",
+    "@webda/core": "^4.0.0-beta.3",
+    "@webda/test": "4.0.0-beta.3"
+  },
+  "files": [
+    "lib",
+    "webui"
+  ],
+  "homepage": "https://webda.io",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "license": "LGPL-3.0-only",
+  "scripts": {
+    "build": "webdac build",
+    "build:watch": "webdac build --watch",
+    "pretest": "npm run build",
+    "format": "prettier --check src/**/*",
+    "format:fix": "prettier --write src/**/*",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:debug": "vitest debug",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/webui/app.js

@@ -0,0 +1,177 @@
+import { h, render } from "preact";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import htm from "htm";
+
+import { ModelsPanel } from "./components/models.js";
+import { ServicesPanel } from "./components/services.js";
+import { OperationsPanel } from "./components/operations.js";
+import { RequestsPanel } from "./components/requests.js";
+import { LogsPanel } from "./components/logs.js";
+
+const html = htm.bind(h);
+
+const TABS = [
+  { id: "logs", label: "Logs", color: "#f7992c" },
+  { id: "models", label: "Models", color: "#81bf6b" },
+  { id: "services", label: "Services", color: "#6b8fd4" },
+  { id: "operations", label: "Operations", color: "#f4f4f4" },
+  { id: "requests", label: "Requests", color: "#6b8fd4" }
+];
+
+/**
+ * Fetch JSON from the debug API.
+ * @param {string} path
+ * @returns {Promise<any>}
+ */
+async function fetchApi(path) {
+  const res = await fetch(path);
+  return res.json();
+}
+
+function App() {
+  const [tab, setTab] = useState("logs");
+  const [wsConnected, setWsConnected] = useState(false);
+  const [wsEvents, setWsEvents] = useState([]);
+  const [dataVersion, setDataVersion] = useState(0);
+  const [cache, setCache] = useState({});
+  const wsRef = useRef(null);
+  const reconnectTimer = useRef(null);
+
+  // Load all data upfront and on rebuild (restart event)
+  useEffect(() => {
+    Promise.all([
+      fetchApi("/api/info").catch(() => null),
+      fetchApi("/api/models").catch(() => []),
+      fetchApi("/api/services").catch(() => []),
+      fetchApi("/api/operations").catch(() => []),
+      fetchApi("/api/config").catch(() => {}),
+      fetchApi("/api/requests").catch(() => []),
+      fetchApi("/api/logs").catch(() => [])
+    ]).then(([info, models, services, operations, config, requests, logs]) => {
+      setCache({ info, models, services, operations, config, requests, logs });
+    });
+  }, [dataVersion]);
+
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.tagName === "SELECT") return;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        setTab((prev) => {
+          const idx = TABS.findIndex((t) => t.id === prev);
+          return TABS[(idx - 1 + TABS.length) % TABS.length].id;
+        });
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        setTab((prev) => {
+          const idx = TABS.findIndex((t) => t.id === prev);
+          return TABS[(idx + 1) % TABS.length].id;
+        });
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const connectWs = useCallback(() => {
+    if (wsRef.current && wsRef.current.readyState <= 1) return;
+
+    const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(`${protocol}//${location.host}/ws`);
+    wsRef.current = ws;
+
+    ws.addEventListener("open", () => {
+      setWsConnected(true);
+      if (reconnectTimer.current) {
+        clearTimeout(reconnectTimer.current);
+        reconnectTimer.current = null;
+      }
+    });
+
+    ws.addEventListener("message", (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        if (data.type === "restart") {
+          // Trigger data refetch across all panels
+          setDataVersion((v) => v + 1);
+          return;
+        }
+        // Dispatch custom event so individual panels can listen
+        window.dispatchEvent(new CustomEvent("debug-ws-event", { detail: data }));
+        setWsEvents((prev) => [data, ...prev].slice(0, 500));
+      } catch {
+        // ignore parse errors
+      }
+    });
+
+    ws.addEventListener("close", () => {
+      setWsConnected(false);
+      wsRef.current = null;
+      // Auto-reconnect after 2 seconds
+      reconnectTimer.current = setTimeout(connectWs, 2000);
+    });
+
+    ws.addEventListener("error", () => {
+      ws.close();
+    });
+  }, []);
+
+  useEffect(() => {
+    connectWs();
+    return () => {
+      if (wsRef.current) wsRef.current.close();
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+  }, [connectWs]);
+
+  const renderPanel = () => {
+    switch (tab) {
+      case "models":
+        return html`<${ModelsPanel} data=${cache.models} fetchApi=${fetchApi} dataVersion=${dataVersion} />`;
+      case "services":
+        return html`<${ServicesPanel} data=${cache.services} config=${cache.config} fetchApi=${fetchApi} dataVersion=${dataVersion} />`;
+      case "operations":
+        return html`<${OperationsPanel} data=${cache.operations} fetchApi=${fetchApi} dataVersion=${dataVersion} />`;
+      case "requests":
+        return html`<${RequestsPanel} data=${cache.requests} fetchApi=${fetchApi} dataVersion=${dataVersion} wsEvents=${wsEvents} />`;
+      case "logs":
+        return html`<${LogsPanel} data=${cache.logs} fetchApi=${fetchApi} dataVersion=${dataVersion} />`;
+      default:
+        return null;
+    }
+  };
+
+  return html`
+    <div class="header ${wsConnected ? "" : "disconnected"}">
+      <div class="header-logo">
+        <img src="/logo.svg" alt="Webda" />
+        <div class="header-title">web<span>da</span> debug</div>
+        ${cache.info && html`<div class="header-app-info">
+          <div class="header-app-name">${cache.info.package?.name || "unknown"}</div>
+          <div class="header-cwd">${(cache.info.workingDirectory || "").replace(/^\/(Users|home)\/[^/]+\//, "~/")}</div>
+        </div>`}
+      </div>
+      <nav class="nav-tabs">
+        ${TABS.map(
+          (t) => html`
+            <button
+              key=${t.id}
+              class="nav-tab ${tab === t.id ? "active" : ""}"
+              style="${tab === t.id ? `color:${t.color};border-bottom-color:${t.color}` : ""}"
+              onClick=${() => setTab(t.id)}
+            >
+              ${t.label}
+            </button>
+          `
+        )}
+      </nav>
+      <div class="ws-indicator">
+        <span class="ws-dot ${wsConnected ? "" : "disconnected"}"></span>
+        <span>${wsConnected ? "Connected" : "Reconnecting..."}</span>
+      </div>
+    </div>
+    <div class="content">${renderPanel()}</div>
+  `;
+}
+
+render(html`<${App} />`, document.getElementById("app"));

package/webui/components/logs.js

@@ -0,0 +1,128 @@
+import { h } from "preact";
+import { useState, useEffect, useRef, useMemo } from "preact/hooks";
+import htm from "htm";
+
+const html = htm.bind(h);
+
+const LEVEL_COLORS = {
+  ERROR: "#ef4444",
+  WARN: "#eab308",
+  INFO: "#22c55e",
+  DEBUG: "#6b7280",
+  TRACE: "#4b5563"
+};
+
+const LEVEL_ORDER = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
+
+function formatTime(ts) {
+  if (!ts) return "-";
+  return new Date(ts).toISOString().substring(11, 23);
+}
+
+export function LogsPanel({ data }) {
+  const [liveEntries, setLiveEntries] = useState([]);
+  const [search, setSearch] = useState("");
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [levelFilter, setLevelFilter] = useState(() => localStorage.getItem("webda-log-level") || "INFO");
+  const listRef = useRef(null);
+
+
+  // Merge cached + live, deduplicate by id
+  const allEntries = useMemo(() => {
+    const seen = new Set();
+    const merged = [];
+    for (const e of liveEntries) {
+      if (!seen.has(e.id)) { seen.add(e.id); merged.push(e); }
+    }
+    for (const e of (data || [])) {
+      if (!seen.has(e.id)) { seen.add(e.id); merged.push(e); }
+    }
+    return merged;
+  }, [data, liveEntries]);
+
+  const entries = search
+    ? allEntries.filter(e => e.message?.toLowerCase().includes(search.toLowerCase()) || e.level?.toLowerCase().includes(search.toLowerCase()))
+    : allEntries;
+
+  // Listen for live log events via custom event dispatched from WebSocket handler
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.detail?.type === "log") {
+        setLiveEntries((prev) => [event.detail, ...prev].slice(0, 2000));
+      }
+    };
+    window.addEventListener("debug-ws-event", handler);
+    return () => window.removeEventListener("debug-ws-event", handler);
+  }, []);
+
+  useEffect(() => {
+    if (autoScroll && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [entries, autoScroll]);
+
+  const minLevel = LEVEL_ORDER.indexOf(levelFilter);
+  const filtered = minLevel <= 0 ? entries : entries.filter((e) => LEVEL_ORDER.indexOf(e.level) >= minLevel);
+
+  return html`
+    <div>
+      <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
+        <input
+          type="text"
+          placeholder="Search logs..."
+          value=${search}
+          onInput=${(e) => setSearch(e.target.value)}
+          style="flex:1;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;font-family:monospace"
+        />
+        <select
+          value=${levelFilter}
+          onChange=${(e) => { setLevelFilter(e.target.value); localStorage.setItem("webda-log-level", e.target.value); }}
+          style="padding:6px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:4px"
+        >
+          <option value="ERROR">ERROR</option>
+          <option value="WARN">WARN+</option>
+          <option value="INFO">INFO+</option>
+          <option value="DEBUG">DEBUG+</option>
+          <option value="TRACE">TRACE+</option>
+        </select>
+        <label style="display:flex;align-items:center;gap:4px;color:var(--text-muted);font-size:12px">
+          <input type="checkbox" checked=${autoScroll} onChange=${(e) => setAutoScroll(e.target.checked)} />
+          Auto-scroll
+        </label>
+      </div>
+      <div style="margin-bottom:0.75rem;color:var(--text-muted);font-size:0.8125rem">
+        ${filtered.length} log${filtered.length !== 1 ? "s" : ""}
+      </div>
+      <div ref=${listRef} class="table-container" style="overflow-y:auto;max-height:calc(100vh - 200px)">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:120px">Time</th>
+              <th style="width:70px">Level</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${filtered.map(
+              (entry) => html`
+                <tr key=${entry.id}>
+                  <td class="mono" style="white-space:nowrap;color:var(--text-muted);font-size:12px">${formatTime(entry.timestamp)}</td>
+                  <td><span class="badge" style="background:${LEVEL_COLORS[entry.level] || "#666"}">${entry.level}</span></td>
+                  <td class="mono" style="font-size:13px;white-space:pre-wrap;word-break:break-all">${entry.message}</td>
+                </tr>
+              `
+            )}
+            ${filtered.length === 0 &&
+            html`
+              <tr>
+                <td colspan="3" style="color:var(--text-muted);text-align:center;padding:2rem">
+                  No logs${search ? " matching search" : " yet"}. Logs will appear here in real-time.
+                </td>
+              </tr>
+            `}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `;
+}