@webda/debug 4.0.0-beta.3

package/webui/components/operations.js

@@ -0,0 +1,315 @@
+import { h } from "preact";
+import { useState, useMemo } from "preact/hooks";
+import htm from "htm";
+import { SchemaForm } from "./schema-form.js";
+
+const html = htm.bind(h);
+
+/**
+ * Generate a random example value from a JSON Schema property.
+ */
+function randomValue(schema, name) {
+  if (!schema) return null;
+  if (schema.enum) return schema.enum[Math.floor(Math.random() * schema.enum.length)];
+  if (schema.const) return schema.const;
+  switch (schema.type) {
+    case "string":
+      if (schema.format === "email") return "user@example.com";
+      if (schema.format === "uri" || schema.format === "url") return "https://example.com";
+      if (schema.format === "date-time") return new Date().toISOString();
+      if (schema.format === "date") return new Date().toISOString().split("T")[0];
+      if (schema.format === "uuid") return crypto.randomUUID();
+      if (schema.pattern) return `match-${name || "value"}`;
+      if (schema.minLength) return (name || "text").padEnd(schema.minLength, "x");
+      return name || "string-value";
+    case "number":
+    case "integer":
+      const min = schema.minimum ?? 0;
+      const max = schema.maximum ?? 100;
+      return schema.type === "integer" ? Math.floor(Math.random() * (max - min) + min) : +(Math.random() * (max - min) + min).toFixed(2);
+    case "boolean":
+      return Math.random() > 0.5;
+    case "array":
+      const item = schema.items ? randomValue(schema.items, name) : "item";
+      return [item, randomValue(schema.items, name)].filter(Boolean);
+    case "object":
+      if (!schema.properties) return {};
+      const obj = {};
+      for (const [k, v] of Object.entries(schema.properties)) {
+        obj[k] = randomValue(v, k);
+      }
+      return obj;
+    default:
+      return null;
+  }
+}
+
+export function OperationsPanel({ data }) {
+  const [filter, setFilter] = useState("");
+  const [selected, setSelected] = useState(null);
+  const [activeTab, setActiveTab] = useState("form");
+  const [formValues, setFormValues] = useState({});
+  const operations = data || [];
+
+  const filtered = operations.filter(
+    (o) => (o.id || "").toLowerCase().includes(filter.toLowerCase())
+  );
+
+  const detail = selected ? operations.find(o => o.id === selected) : null;
+
+  const exampleOutput = useMemo(() => {
+    if (!detail?.outputSchema) return null;
+    return randomValue(detail.outputSchema, "result");
+  }, [detail?.id, detail?.outputSchema]);
+
+  return html`
+    <div class="split-panel">
+      <div class="split-left">
+        <input
+          class="search-input"
+          placeholder="Filter operations..."
+          value=${filter}
+          onInput=${(e) => setFilter(e.target.value)}
+        />
+        ${filtered.map(o => html`
+          <div
+            key=${o.id}
+            class="list-item ${selected === o.id ? "active" : ""}"
+            onClick=${() => { setSelected(o.id); setFormValues({}); setActiveTab("form"); }}
+          >
+            <div>${o.id}</div>
+            <div style="font-size:0.6875rem;color:var(--text-muted)">
+              ${o.input && o.input !== "void" ? o.input.split("/").pop().split(".").pop() : "void"}
+              ${" → "}
+              ${o.output && o.output !== "void" ? o.output.split("/").pop().split(".").pop() : "void"}
+            </div>
+            ${o.rest?.method && html`
+              <div style="font-size:0.625rem;margin-top:0.125rem;display:flex;align-items:center;gap:0.25rem;min-width:0">
+                <span class="badge method-${o.rest.method.toLowerCase()}" style="font-size:0.5625rem;padding:0.0625rem 0.25rem;flex-shrink:0">${o.rest.method.toUpperCase()}</span>
+                <span class="mono" style="color:var(--text-muted);opacity:0.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${o.rest.url || o.rest.path || "/"}</span>
+              </div>
+            `}
+          </div>
+        `)}
+        ${filtered.length === 0 && html`<div style="color:var(--text-muted);padding:0.5rem">No operations found</div>`}
+      </div>
+      <div class="split-right">
+        ${detail ? html`<${OperationDetail}
+          op=${detail}
+          activeTab=${activeTab}
+          setActiveTab=${setActiveTab}
+          formValues=${formValues}
+          setFormValues=${setFormValues}
+          exampleOutput=${exampleOutput}
+        />` : html`
+          <div style="color:var(--text-muted);padding:2rem;text-align:center">
+            Select an operation to view details
+          </div>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Lightweight JS syntax highlighter — no external dependencies.
+ * Tokenizes into comments, strings, keywords, numbers, and punctuation.
+ */
+function highlightJS(code) {
+  const keywords = new Set([
+    "async","await","break","case","catch","class","const","continue","debugger","default",
+    "delete","do","else","export","extends","finally","for","function","if","import","in",
+    "instanceof","let","new","of","return","static","super","switch","this","throw","try",
+    "typeof","var","void","while","with","yield","from","true","false","null","undefined"
+  ]);
+  const tokens = [];
+  let i = 0;
+  while (i < code.length) {
+    // Line comments
+    if (code[i] === "/" && code[i + 1] === "/") {
+      const end = code.indexOf("\n", i);
+      tokens.push({ type: "comment", value: code.slice(i, end === -1 ? undefined : end) });
+      i = end === -1 ? code.length : end;
+      continue;
+    }
+    // Block comments
+    if (code[i] === "/" && code[i + 1] === "*") {
+      const end = code.indexOf("*/", i + 2);
+      tokens.push({ type: "comment", value: code.slice(i, end === -1 ? undefined : end + 2) });
+      i = end === -1 ? code.length : end + 2;
+      continue;
+    }
+    // Strings
+    if (code[i] === '"' || code[i] === "'" || code[i] === "`") {
+      const q = code[i];
+      let j = i + 1;
+      while (j < code.length && code[j] !== q) { if (code[j] === "\\") j++; j++; }
+      tokens.push({ type: "string", value: code.slice(i, j + 1) });
+      i = j + 1;
+      continue;
+    }
+    // Numbers
+    if (/[0-9]/.test(code[i]) && (i === 0 || /[^a-zA-Z_$]/.test(code[i - 1]))) {
+      let j = i;
+      while (j < code.length && /[0-9a-fA-FxXoObBeE._n]/.test(code[j])) j++;
+      tokens.push({ type: "number", value: code.slice(i, j) });
+      i = j;
+      continue;
+    }
+    // Words (identifiers / keywords)
+    if (/[a-zA-Z_$]/.test(code[i])) {
+      let j = i;
+      while (j < code.length && /[a-zA-Z0-9_$]/.test(code[j])) j++;
+      const word = code.slice(i, j);
+      tokens.push({ type: keywords.has(word) ? "keyword" : "ident", value: word });
+      i = j;
+      continue;
+    }
+    // Punctuation / operators
+    tokens.push({ type: "punct", value: code[i] });
+    i++;
+  }
+  return tokens;
+}
+
+function CodeBlock({ code }) {
+  const tokens = useMemo(() => highlightJS(code), [code]);
+  return html`<pre class="code-block"><code>${tokens.map((t, i) =>
+    t.type === "comment" ? html`<span key=${i} class="hl-comment">${t.value}</span>`
+    : t.type === "string" ? html`<span key=${i} class="hl-string">${t.value}</span>`
+    : t.type === "keyword" ? html`<span key=${i} class="hl-keyword">${t.value}</span>`
+    : t.type === "number" ? html`<span key=${i} class="hl-number">${t.value}</span>`
+    : t.value
+  )}</code></pre>`;
+}
+
+function OperationDetail({ op, activeTab, setActiveTab, formValues, setFormValues, exampleOutput }) {
+  const tabs = [];
+  if (op.inputSchema) tabs.push("form");
+  tabs.push("input-schema", "output-schema");
+  if (exampleOutput !== null) tabs.push("example");
+  if (op.implementor?.code) tabs.push("code");
+
+  const currentTab = tabs.includes(activeTab) ? activeTab : tabs[0];
+
+  const hasInput = op.input && op.input !== "void";
+  const hasOutput = op.output && op.output !== "void";
+
+  return html`
+    <div>
+      <h2 style="margin-bottom:0.5rem;color:var(--accent)">${op.id}</h2>
+
+      <div style="display:flex;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap">
+        ${op.summary && html`<div style="color:var(--text-muted);font-size:0.875rem">${op.summary}</div>`}
+      </div>
+
+      <div style="display:flex;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;align-items:center">
+        <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
+          <span style="color:var(--text-muted)">Input: </span>
+          <span class="mono">${hasInput ? op.input : "void"}</span>
+        </div>
+        <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
+          <span style="color:var(--text-muted)">Output: </span>
+          <span class="mono">${hasOutput ? op.output : "void"}</span>
+        </div>
+        ${op.implementor && html`
+          <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
+            <span style="color:var(--text-muted)">${op.implementor.type === "model" ? "Model" : "Service"}: </span>
+            <span class="mono">${op.implementor.name}</span>
+            ${op.implementor.method && html`<span class="mono" style="color:var(--text-muted)">.${op.implementor.method}()</span>`}
+          </div>
+        `}
+        ${op.tags?.length > 0 && op.tags.map(t => html`
+          <span key=${t} class="badge badge-purple">${t}</span>
+        `)}
+        ${op.rest && typeof op.rest === "object" && op.rest.method && html`
+          <span class="badge method-${op.rest.method.toLowerCase()}" style="padding:0.125rem 0.5rem;line-height:1.2">${op.rest.method.toUpperCase()}</span>
+          <span class="mono" style="font-size:0.8125rem;color:var(--text-muted)">${op.rest.url || op.rest.path || "/"}</span>
+        `}
+      </div>
+
+      <!-- Tabs -->
+      <div style="display:flex;gap:0;margin-bottom:0.75rem;border-bottom:1px solid var(--border)">
+        ${tabs.map(tab => {
+          const label = tab === "form" ? "Try It" : tab === "input-schema" ? "Input Schema" : tab === "output-schema" ? "Output Schema" : tab === "code" ? "Code" : "Example Output";
+          return html`
+            <button key=${tab} onClick=${() => setActiveTab(tab)} style="
+              padding:6px 16px;
+              background:${currentTab === tab ? "var(--bg-tertiary)" : "transparent"};
+              color:${currentTab === tab ? "var(--accent)" : "var(--text-muted)"};
+              border:none;
+              border-bottom:2px solid ${currentTab === tab ? "var(--accent)" : "transparent"};
+              cursor:pointer;font-size:0.875rem;
+              font-weight:${currentTab === tab ? "600" : "400"};
+            ">${label}</button>
+          `;
+        })}
+      </div>
+
+      <!-- Tab Content -->
+      ${currentTab === "form" && op.inputSchema && html`
+        <div>
+          <${SchemaForm} schema=${op.inputSchema} values=${formValues} onChange=${setFormValues} />
+          <div style="margin-top:1rem">
+            <button class="btn btn-primary" disabled>Execute (coming soon)</button>
+          </div>
+          ${Object.keys(formValues).length > 0 && html`
+            <div style="margin-top:0.75rem">
+              <strong style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase">Request Body</strong>
+              <pre class="mono" style="
+                background:var(--bg-secondary);padding:0.75rem;border-radius:4px;
+                margin-top:0.25rem;font-size:0.8125rem;overflow:auto;max-height:200px;
+              ">${JSON.stringify(formValues, null, 2)}</pre>
+            </div>
+          `}
+        </div>
+      `}
+
+      ${currentTab === "input-schema" && html`
+        <div>
+          ${hasInput && op.inputSchema
+            ? html`<pre class="mono" style="
+                background:var(--bg-secondary);padding:1rem;border-radius:4px;
+                overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
+              ">${JSON.stringify(op.inputSchema, null, 2)}</pre>`
+            : html`<div style="color:var(--text-muted);padding:0.5rem">${hasInput ? `Schema ref: ${op.input} (not resolved)` : "No input (void)"}</div>`
+          }
+        </div>
+      `}
+
+      ${currentTab === "output-schema" && html`
+        <div>
+          ${hasOutput && op.outputSchema
+            ? html`<pre class="mono" style="
+                background:var(--bg-secondary);padding:1rem;border-radius:4px;
+                overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
+              ">${JSON.stringify(op.outputSchema, null, 2)}</pre>`
+            : html`<div style="color:var(--text-muted);padding:0.5rem">${hasOutput ? `Schema ref: ${op.output} (not resolved)` : "No output (void)"}</div>`
+          }
+        </div>
+      `}
+
+      ${currentTab === "example" && html`
+        <div>
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+            <strong style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase">Random Example</strong>
+            <button class="btn btn-ghost btn-sm" onClick=${() => { /* force re-render */ setActiveTab("input-schema"); setTimeout(() => setActiveTab("example"), 0); }}>Regenerate</button>
+          </div>
+          <pre class="mono" style="
+            background:var(--bg-secondary);padding:1rem;border-radius:4px;
+            overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
+          ">${JSON.stringify(exampleOutput, null, 2)}</pre>
+        </div>
+      `}
+
+      ${currentTab === "code" && op.implementor?.code && html`
+        <div>
+          <div style="margin-bottom:0.5rem;font-size:0.8125rem;color:var(--text-muted)">
+            <span class="mono">${op.implementor.name}.${op.implementor.method}()</span>
+          </div>
+          <${CodeBlock} code=${op.implementor.code} />
+        </div>
+      `}
+    </div>
+  `;
+}

package/webui/components/requests.js

@@ -0,0 +1,264 @@
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
+
+const html = htm.bind(h);
+
+function statusClass(code) {
+  if (!code) return "status-pending";
+  if (code < 300) return "status-2xx";
+  if (code < 400) return "status-3xx";
+  if (code < 500) return "status-4xx";
+  return "status-5xx";
+}
+
+function methodBadge(method) {
+  if (!method) return "";
+  const m = method.toUpperCase();
+  return html`<span class="badge method-${m.toLowerCase()}">${m}</span>`;
+}
+
+function formatTime(ts) {
+  if (!ts) return "-";
+  const d = new Date(ts);
+  return d.toLocaleTimeString();
+}
+
+function formatBytes(n) {
+  if (n == null) return "-";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+/**
+ * Render a request/response body in the most useful format we can:
+ * - empty -> grey placeholder
+ * - text -> preformatted block (pretty-printed JSON when possible)
+ * - text-truncated -> same plus a [truncated] notice
+ * - binary -> "Binary, N bytes (preview: 0xHEX)"
+ */
+function BodyView({ body }) {
+  if (!body) return html`<div style="color:var(--text-muted);font-style:italic">(not captured)</div>`;
+  if (body.kind === "empty") {
+    return html`<div style="color:var(--text-muted);font-style:italic">(empty)</div>`;
+  }
+  if (body.kind === "binary") {
+    return html`
+      <div style="color:var(--text-muted);font-family:monospace;font-size:13px">
+        Binary, ${formatBytes(body.size)} (preview: 0x${body.preview || ""})
+      </div>
+    `;
+  }
+  // text or text-truncated
+  let display = body.content || "";
+  // Try to pretty-print JSON
+  try {
+    const parsed = JSON.parse(display);
+    display = JSON.stringify(parsed, null, 2);
+  } catch {
+    // not JSON — leave as-is
+  }
+  return html`
+    <pre class="mono" style="background:var(--bg-secondary);padding:0.75rem;border-radius:4px;overflow:auto;max-height:400px;font-size:12px;white-space:pre-wrap;word-break:break-all">${display}</pre>
+    ${body.kind === "text-truncated"
+      ? html`<div style="color:var(--text-muted);font-size:12px;margin-top:0.25rem">[truncated — total ${formatBytes(body.size)}]</div>`
+      : ""}
+  `;
+}
+
+/**
+ * Render a flat list of headers as a small two-column table.
+ */
+function HeadersView({ headers }) {
+  const keys = headers ? Object.keys(headers) : [];
+  if (keys.length === 0) {
+    return html`<div style="color:var(--text-muted);font-style:italic">(none)</div>`;
+  }
+  return html`
+    <table style="width:100%;font-size:12px">
+      <tbody>
+        ${keys.sort().map(
+          k => html`
+            <tr key=${k}>
+              <td class="mono" style="color:var(--text-muted);padding:2px 8px 2px 0;vertical-align:top;white-space:nowrap">${k}</td>
+              <td class="mono" style="word-break:break-all">${headers[k]}</td>
+            </tr>
+          `
+        )}
+      </tbody>
+    </table>
+  `;
+}
+
+/**
+ * Detail panel for a single request: status line, headers, bodies, error.
+ * Loads the full entry from /api/requests/:id when `id` changes.
+ */
+function RequestDetail({ id, onClose }) {
+  const [entry, setEntry] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!id) {
+      setEntry(null);
+      return;
+    }
+    let cancelled = false;
+    setError(null);
+    fetch(`/api/requests/${encodeURIComponent(id)}`)
+      .then(r => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(data => {
+        if (!cancelled) setEntry(data);
+      })
+      .catch(err => {
+        if (!cancelled) setError(err.message);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  if (!id) return null;
+  if (error) {
+    return html`
+      <div style="padding:1rem;border:1px solid var(--border);border-radius:4px;margin-top:1rem;background:var(--bg-secondary)">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+          <strong>Failed to load request detail</strong>
+          <button onClick=${onClose} style="background:transparent;border:1px solid var(--border);color:var(--text-primary);padding:2px 8px;border-radius:4px;cursor:pointer">Close</button>
+        </div>
+        <div style="color:var(--text-muted)">${error}</div>
+      </div>
+    `;
+  }
+  if (!entry) {
+    return html`
+      <div style="padding:1rem;color:var(--text-muted)">Loading request detail...</div>
+    `;
+  }
+  return html`
+    <div style="padding:1rem;border:1px solid var(--border);border-radius:4px;margin-top:1rem;background:var(--bg-secondary)">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem">
+        <div>
+          ${methodBadge(entry.method)}
+          <span class="mono" style="margin-left:0.5rem">${entry.url}</span>
+        </div>
+        <button onClick=${onClose} style="background:transparent;border:1px solid var(--border);color:var(--text-primary);padding:2px 8px;border-radius:4px;cursor:pointer">Close</button>
+      </div>
+      <div style="display:flex;gap:1.5rem;font-size:12px;color:var(--text-muted);margin-bottom:1rem">
+        <div>Time: ${formatTime(entry.timestamp)}</div>
+        <div>Status: <span class="mono ${statusClass(entry.statusCode)}" style="font-weight:600">${entry.statusCode != null ? entry.statusCode : "pending"}</span></div>
+        <div>Duration: ${entry.duration != null ? `${entry.duration}ms` : "-"}</div>
+      </div>
+
+      ${entry.error
+        ? html`
+          <div style="margin-bottom:1rem;padding:0.5rem 0.75rem;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:4px">
+            <div style="color:#ef4444;font-weight:600;margin-bottom:0.25rem">Error</div>
+            <div class="mono" style="font-size:12px">${entry.error.message}</div>
+            ${entry.error.stack
+              ? html`<pre class="mono" style="font-size:11px;color:var(--text-muted);margin-top:0.5rem;white-space:pre-wrap">${entry.error.stack}</pre>`
+              : ""}
+          </div>
+        `
+        : ""}
+
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
+        <div>
+          <h4 style="margin:0 0 0.5rem 0;font-size:13px">Request Headers</h4>
+          <${HeadersView} headers=${entry.requestHeaders} />
+          <h4 style="margin:1rem 0 0.5rem 0;font-size:13px">Request Body</h4>
+          <${BodyView} body=${entry.requestBody} />
+        </div>
+        <div>
+          <h4 style="margin:0 0 0.5rem 0;font-size:13px">Response Headers</h4>
+          <${HeadersView} headers=${entry.responseHeaders} />
+          <h4 style="margin:1rem 0 0.5rem 0;font-size:13px">Response Body</h4>
+          <${BodyView} body=${entry.responseBody} />
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function RequestsPanel({ data, wsEvents }) {
+  const historical = data || [];
+  const [selectedId, setSelectedId] = useState(null);
+
+  // Merge websocket events with historical data
+  // wsEvents are newest-first; historical may be oldest-first or newest-first
+  const entries = useMemo(() => {
+    // Build a map of all requests by ID
+    const map = new Map();
+
+    // Add historical entries
+    for (const entry of historical) {
+      if (entry.id) map.set(entry.id, { ...entry });
+    }
+
+    // Apply websocket events (they update existing or add new)
+    for (const evt of [...wsEvents].reverse()) {
+      if (!evt.id) continue;
+      const existing = map.get(evt.id) || {};
+
+      if (evt.type === "request") {
+        map.set(evt.id, { ...existing, id: evt.id, method: evt.method, url: evt.url, timestamp: evt.timestamp });
+      } else if (evt.type === "result") {
+        map.set(evt.id, { ...existing, id: evt.id, statusCode: evt.statusCode, duration: evt.duration });
+      } else if (evt.type === "404") {
+        map.set(evt.id, { ...existing, id: evt.id, method: evt.method, url: evt.url, statusCode: 404 });
+      }
+    }
+
+    // Sort by timestamp, newest first
+    return Array.from(map.values()).sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+  }, [historical, wsEvents]);
+
+  return html`
+    <div>
+      <div style="margin-bottom: 0.75rem; color: var(--text-muted); font-size: 0.8125rem;">
+        ${entries.length} request${entries.length !== 1 ? "s" : ""} recorded${selectedId ? " — click a row to inspect" : ""}
+      </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Method</th>
+              <th>URL</th>
+              <th>Status</th>
+              <th>Duration</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${entries.map(
+              (r) => html`
+                <tr
+                  key=${r.id}
+                  onClick=${() => setSelectedId(r.id === selectedId ? null : r.id)}
+                  style="cursor:pointer;${r.id === selectedId ? "background:var(--bg-tertiary)" : ""}"
+                >
+                  <td style="white-space: nowrap;">${formatTime(r.timestamp)}</td>
+                  <td>${methodBadge(r.method)}</td>
+                  <td class="mono" style="max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${r.url || "-"}</td>
+                  <td>
+                    ${r.statusCode != null
+                      ? html`<span class="mono ${statusClass(r.statusCode)}" style="font-weight: 600;">${r.statusCode}</span>`
+                      : html`<span class="status-pending">pending...</span>`}
+                  </td>
+                  <td class="mono" style="color: var(--text-muted);">
+                    ${r.duration != null ? `${r.duration}ms` : "-"}
+                  </td>
+                </tr>
+              `
+            )}
+            ${entries.length === 0 && html`
+              <tr><td colspan="5" style="color: var(--text-muted); text-align: center; padding: 2rem;">No requests yet. Requests will appear here in real-time.</td></tr>
+            `}
+          </tbody>
+        </table>
+      </div>
+      ${selectedId ? html`<${RequestDetail} id=${selectedId} onClose=${() => setSelectedId(null)} />` : ""}
+    </div>
+  `;
+}