a2acalling 0.5.1 → 0.5.4

package/README.md

@@ -7,7 +7,7 @@
 
 ---
 
-Your AI agent can now call other AI agents — across instances, with scoped permissions, strategic summaries, and owner notifications. Think of it as a phone system for agents.
+Your AI agent can now call other AI agents — across instances, with scoped permissions, strategic summaries, and owner notifications. Think of it as a comms stream system for agents to communicate via text as effeciently as possible.
 
 ## ✨ Features
 
@@ -21,6 +21,7 @@ Your AI agent can now call other AI agents — across instances, with scoped per
 - 🧭 **Adaptive collaboration mode** — dynamic phase changes based on overlap and depth
 - 🗂️ **Minimal dashboard** — contacts, calls, tier settings, and invite generation
 - 💾 **Conversation history** — SQLite storage with context retrieval
+- 🧾 **Traceable logs** — DB-backed structured logs with `trace_id`, `error_code`, and hints
 
 ## 🚀 Quick Start
 
@@ -195,6 +196,50 @@ Dashboard paths:
 - Standalone A2A server: `http://<host>:<port>/dashboard`
 - OpenClaw gateway mode: `http://<gateway>/a2a`
 
+### Traceability and Logs
+
+All runtime logs are persisted in SQLite and also emitted to stdout:
+
+- Log DB: `~/.config/openclaw/a2a-logs.db` (or `$A2A_CONFIG_DIR/a2a-logs.db`)
+- Trace fields: `trace_id`, `conversation_id`, `token_id`, `error_code`, `status_code`, `hint`
+
+Dashboard/API log routes:
+
+- `GET /api/a2a/dashboard/logs`
+- `GET /api/a2a/dashboard/logs/trace/:traceId`
+- `GET /api/a2a/dashboard/logs/stats`
+- `GET /api/a2a/dashboard/debug/call?trace_id=<id>` (or `conversation_id=<id>`)
+
+Useful filters for `/api/a2a/dashboard/logs`:
+
+- `trace_id`, `conversation_id`, `token_id`
+- `error_code`, `status_code`
+- `component`, `event`, `level`, `search`, `from`, `to`, `limit`
+
+Example:
+
+```bash
+curl "http://localhost:3001/api/a2a/dashboard/logs?trace_id=trace_abc123&error_code=TOKEN_INVALID_OR_EXPIRED"
+```
+
+### Incoming Call Debug
+
+Every `/api/a2a/invoke` and `/api/a2a/end` response now returns:
+- `trace_id` (generated when caller does not send one)
+- `request_id` (generated when caller does not send one)
+
+To inspect one call, use the dashboard debug endpoint:
+
+```bash
+curl -H "x-admin-token: $A2A_ADMIN_TOKEN" \
+  "http://localhost:3001/api/a2a/dashboard/debug/call?trace_id=<trace_id>"
+```
+
+For each call you get:
+- `summary` (event count, first/last seen, duration, and IDs involved)
+- `errors` and `error_codes` for fast triage
+- `logs` (ordered timeline events from that trace)
+
 ## 📡 Protocol
 
 Tokens use the `a2a://` URI scheme:
@@ -338,6 +383,8 @@ app.listen(3001);
 | `A2A_OWNER_NAME` | Override owner display name |
 | `A2A_COLLAB_MODE` | Conversation style: `adaptive` (default) or `deep_dive` |
 | `A2A_ADMIN_TOKEN` | Protect dashboard/conversation admin routes for non-local access |
+| `A2A_LOG_LEVEL` | Minimum persisted/stdout log level: `trace`, `debug`, `info`, `warn`, `error` (default: `info`) |
+| `A2A_LOG_STACKS` | Include stack traces in log DB error payloads (`true` by default outside production) |
 
 ## 🤝 Philosophy
 

package/SKILL.md

@@ -106,6 +106,24 @@ done                         — Save manifest and finish
 
 4. Manifest saved to `~/.config/openclaw/a2a-disclosure.json`
 
+### Open GUI (Dashboard)
+
+User says: `/a2a gui`, `/a2a dashboard`, "open the GUI", "open the dashboard", "show me A2A logs"
+
+This opens the local dashboard UI in the default browser (or prints the URL if auto-open is not possible).
+
+Notes:
+- This command is safe and **does not require onboarding**.
+- Optional: open a specific tab via `--tab`.
+
+Examples:
+
+```bash
+a2a gui
+a2a gui --tab logs
+a2a dashboard --tab calls
+```
+
 ### Invite (Create & Share Token)
 
 User says: `/a2a invite`, `/a2a invite public`, `/a2a invite friends`, `/a2a invite family`, "create an invite", "generate an A2A invite"

package/bin/cli.js

@@ -10,6 +10,7 @@
  *   a2a remotes              List remote agents
  *   a2a call <url> <msg>     Call a remote agent
  *   a2a ping <url>           Ping a remote agent
+ *   a2a gui                  Open the local dashboard GUI in a browser
  *   a2a setup                Auto setup (gateway-aware dashboard install)
  */
 
@@ -69,6 +70,77 @@ function formatTimeAgo(date) {
   return date.toLocaleDateString();
 }
 
+function openInBrowser(url) {
+  const { spawn } = require('child_process');
+
+  const platform = process.platform;
+  let cmd = null;
+  let args = [];
+
+  if (platform === 'darwin') {
+    cmd = 'open';
+    args = [url];
+  } else if (platform === 'win32') {
+    cmd = 'cmd';
+    args = ['/c', 'start', '', url];
+  } else {
+    cmd = 'xdg-open';
+    args = [url];
+  }
+
+  try {
+    const child = spawn(cmd, args, { stdio: 'ignore', detached: true });
+    child.unref();
+    return { attempted: true, command: [cmd, ...args].join(' ') };
+  } catch (err) {
+    return { attempted: false, error: err.message };
+  }
+}
+
+async function findLocalServerPort(preferredPorts = []) {
+  const http = require('http');
+
+  const candidates = [];
+  const seen = new Set();
+  for (const port of preferredPorts) {
+    const n = Number.parseInt(String(port), 10);
+    if (!Number.isFinite(n) || n <= 0 || n > 65535) continue;
+    if (seen.has(n)) continue;
+    seen.add(n);
+    candidates.push(n);
+  }
+
+  const defaultPorts = [3001, 80, 8080, 8443, 9001];
+  for (const port of defaultPorts) {
+    if (seen.has(port)) continue;
+    seen.add(port);
+    candidates.push(port);
+  }
+
+  const probe = (port) => new Promise(resolve => {
+    const req = http.request({
+      hostname: '127.0.0.1',
+      port,
+      path: '/api/a2a/ping',
+      method: 'GET',
+      timeout: 800
+    }, (res) => {
+      res.resume();
+      resolve(res.statusCode === 200);
+    });
+    req.on('error', () => resolve(false));
+    req.on('timeout', () => { req.destroy(); resolve(false); });
+    req.end();
+  });
+
+  for (const port of candidates) {
+    // eslint-disable-next-line no-await-in-loop
+    const ok = await probe(port);
+    if (ok) return port;
+  }
+  return null;
+}
+
 // Parse arguments
 function parseArgs(argv) {
   const args = { _: [], flags: {} };
@@ -747,6 +819,55 @@ https://github.com/onthegonow/a2a_calling`;
     }
   },
 
+  gui: async (args) => {
+    // GUI is always safe to open even before onboarding.
+    const tab = (args.flags.tab || args.flags.t || '').trim().toLowerCase();
+    const allowedTabs = new Set(['contacts', 'calls', 'logs', 'settings', 'invites']);
+    const hash = allowedTabs.has(tab) ? `#${tab}` : '';
+
+    const urlFlag = args.flags.url;
+    if (urlFlag) {
+      const url = String(urlFlag);
+      console.log(`Dashboard URL: ${url}`);
+      const opened = openInBrowser(url);
+      if (opened.attempted) {
+        console.log(`Opening browser via: ${opened.command}`);
+      } else {
+        console.log('Could not auto-open browser.');
+      }
+      return;
+    }
+
+    const preferred = [];
+    if (args.flags.port || args.flags.p) preferred.push(args.flags.port || args.flags.p);
+    if (process.env.A2A_PORT) preferred.push(process.env.A2A_PORT);
+    if (process.env.PORT) preferred.push(process.env.PORT);
+
+    const port = await findLocalServerPort(preferred);
+    if (!port) {
+      console.log('Dashboard is not reachable on common ports.');
+      console.log('Start the server (example):');
+      console.log('  A2A_HOSTNAME="localhost:3001" a2a server --port 3001');
+      console.log('Then open:');
+      console.log('  http://127.0.0.1:3001/dashboard/');
+      return;
+    }
+
+    const url = `http://127.0.0.1:${port}/dashboard/${hash}`;
+    console.log(`Dashboard URL: ${url}`);
+    const opened = openInBrowser(url);
+    if (opened.attempted) {
+      console.log(`Opening browser via: ${opened.command}`);
+    } else {
+      console.log('Could not auto-open browser; open the URL above manually.');
+    }
+  },
+
+  dashboard: (args) => {
+    // Alias for gui
+    return commands.gui(args);
+  },
+
   status: async (args) => {
     const url = args._[1];
     if (!url) {
@@ -1099,6 +1220,8 @@ Calling:
   call <contact|url> <msg>  Call a remote agent
   ping <url>          Check if agent is reachable
   status <url>        Get A2A status
+  gui                 Open the local dashboard GUI in a browser
+    --tab, -t         Optional: contacts|calls|logs|settings|invites
 
 Server:
   server              Start the A2A server

package/docs/protocol.md

@@ -56,6 +56,8 @@ Headers:
 ```
 Authorization: Bearer fed_abc123xyz
 Content-Type: application/json
+x-trace-id: trace_... (optional)
+x-request-id: req_... (optional)
 ```
 
 Request body:
@@ -76,6 +78,8 @@ Success response:
 ```json
 {
   "success": true,
+  "trace_id": "trace_...",
+  "request_id": "req_...",
   "conversation_id": "conv_123456",
   "response": "The agent's response text",
   "can_continue": true,
@@ -114,6 +118,8 @@ Success response:
 ```json
 {
   "success": true,
+  "trace_id": "trace_...",
+  "request_id": "req_...",
   "conversation_id": "conv_123456",
   "status": "concluded",
   "summary": "Optional summary text"
@@ -127,6 +133,26 @@ Error responses:
 {"success": false, "error": "internal_error", "message": "..."}
 ```
 
+## Traceability and Log APIs
+
+A2A persists structured runtime logs to `~/.config/openclaw/a2a-logs.db` (or `$A2A_CONFIG_DIR/a2a-logs.db`).
+
+Primary log fields:
+- `trace_id`
+- `conversation_id`
+- `token_id`
+- `error_code`
+- `status_code`
+- `hint`
+
+Dashboard API endpoints:
+- `GET /api/a2a/dashboard/logs`
+- `GET /api/a2a/dashboard/logs/trace/:traceId`
+- `GET /api/a2a/dashboard/logs/stats`
+- `GET /api/a2a/dashboard/debug/call?trace_id=<id>`
+
+Example filters for `/logs`: `trace_id`, `conversation_id`, `token_id`, `error_code`, `status_code`, `component`, `event`, `level`, `search`, `from`, `to`.
+
 ## Permission Scopes
 
 | Scope | Tools | Files | Memory | Actions |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "a2acalling",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "description": "Agent-to-agent calling for OpenClaw - A2A agent communication",
   "main": "src/index.js",
   "bin": {

package/scripts/install-openclaw.js

@@ -77,6 +77,53 @@ function loadOpenClawConfig() {
   }
 }
 
+function normalizeDashboardPluginEntry(rawEntry, backendUrl) {
+  const issues = [];
+  const normalized = {
+    enabled: true,
+    config: {}
+  };
+  const entry = (rawEntry && typeof rawEntry === 'object') ? rawEntry : {};
+
+  const legacyBackendUrl = (typeof entry.backendUrl === 'string' && entry.backendUrl.trim())
+    ? entry.backendUrl.trim()
+    : null;
+  const rawConfig = (entry.config && typeof entry.config === 'object') ? entry.config : null;
+
+  if (!entry || typeof entry !== 'object') {
+    issues.push('plugin entry is missing or invalid');
+  }
+
+  if (entry && typeof entry.enabled === 'boolean') {
+    normalized.enabled = entry.enabled;
+  }
+
+  if (rawConfig) {
+    normalized.config = { ...rawConfig };
+  } else if (entry.config !== undefined) {
+    issues.push('plugin entry has non-object config; replacing with empty object');
+  }
+
+  if (legacyBackendUrl) {
+    issues.push(`legacy key detected: plugins.entries.${DASHBOARD_PLUGIN_ID}.backendUrl (using backendUrl migration)`);
+    normalized.config.backendUrl = backendUrl || legacyBackendUrl;
+  } else if (typeof normalized.config.backendUrl === 'string' && normalized.config.backendUrl.trim()) {
+    normalized.config.backendUrl = normalized.config.backendUrl.trim();
+  } else if (typeof backendUrl === 'string' && backendUrl.trim()) {
+    normalized.config.backendUrl = backendUrl.trim();
+  } else {
+    issues.push('backendUrl could not be determined; plugin may fail to route dashboard traffic');
+  }
+
+  return {
+    normalized,
+    issues,
+    changed: issues.length > 0,
+    legacyBackendUrl,
+    summary: `a2a-dashboard-proxy config => ${normalized.enabled ? 'enabled' : 'disabled'}, backendUrl=${normalized.config.backendUrl || 'missing'}`
+  };
+}
+
 function writeOpenClawConfig(config) {
   const backupPath = `${OPENCLAW_CONFIG}.backup.${Date.now()}`;
   fs.copyFileSync(OPENCLAW_CONFIG, backupPath);
@@ -278,12 +325,25 @@ function sendHtml(res: ServerResponse, status: number, html: string) {
 
 function resolveBackendUrl(api: OpenClawPluginApi): URL {
   const fallback = process.env.A2A_DASHBOARD_BACKEND_URL || "http://127.0.0.1:3001";
+  const pluginConfigRaw = (api as OpenClawPluginApi & { pluginConfig?: unknown }).pluginConfig;
+  const pluginConfig = (pluginConfigRaw && typeof pluginConfigRaw === "object")
+    ? (pluginConfigRaw as Record<string, unknown>)
+    : {};
+  const configuredUrl = typeof pluginConfig.backendUrl === "string" && pluginConfig.backendUrl
+    ? pluginConfig.backendUrl
+    : "";
+  if (configuredUrl) {
+    return new URL(configuredUrl);
+  }
   try {
     const cfg = api.runtime.config.loadConfig() as Record<string, unknown>;
     const plugins = (cfg.plugins || {}) as Record<string, unknown>;
     const entries = (plugins.entries || {}) as Record<string, unknown>;
     const pluginEntry = (entries[PLUGIN_ID] || {}) as Record<string, unknown>;
-    const candidate = typeof pluginEntry.backendUrl === "string" && pluginEntry.backendUrl
+    const entryConfig = (pluginEntry.config || {}) as Record<string, unknown>;
+    const candidate = typeof entryConfig.backendUrl === "string" && entryConfig.backendUrl
+      ? entryConfig.backendUrl
+      : typeof pluginEntry.backendUrl === "string" && pluginEntry.backendUrl
       ? pluginEntry.backendUrl
       : fallback;
     return new URL(candidate);
@@ -559,12 +619,18 @@ async function install() {
 
       config.plugins = config.plugins || {};
       config.plugins.entries = config.plugins.entries || {};
-      const existingEntry = config.plugins.entries[DASHBOARD_PLUGIN_ID] || {};
-      config.plugins.entries[DASHBOARD_PLUGIN_ID] = {
-        ...existingEntry,
-        enabled: true,
-        backendUrl
-      };
+      const rawEntry = config.plugins.entries[DASHBOARD_PLUGIN_ID];
+      const audit = normalizeDashboardPluginEntry(rawEntry, backendUrl);
+      for (const issue of audit.issues) {
+        warn(`a2a-dashboard-proxy config issue: ${issue}`);
+      }
+      if (audit.legacyBackendUrl) {
+        warn(`Auto-fixing legacy key: plugins.entries.${DASHBOARD_PLUGIN_ID}.backendUrl`);
+      }
+      if (audit.changed) {
+        log(`Migrated dashboard plugin config: ${audit.summary}`);
+      }
+      config.plugins.entries[DASHBOARD_PLUGIN_ID] = audit.normalized;
       configUpdated = true;
       log(`Configured gateway plugin entry: ${DASHBOARD_PLUGIN_ID}`);
     }

package/src/dashboard/public/app.js

@@ -2,7 +2,10 @@ const state = {
   settings: null,
   contacts: [],
   calls: [],
-  invites: []
+  invites: [],
+  logs: [],
+  logStats: null,
+  trace: null
 };
 
 function showNotice(message) {
@@ -46,16 +49,46 @@ function fmtDate(value) {
   }
 }
 
+function esc(text) {
+  return String(text ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+}
+
 function bindTabs() {
+  const activateTab = (tab, options = {}) => {
+    const target = String(tab || '').replace(/^#/, '').trim();
+    if (!target) return false;
+    const btn = Array.from(document.querySelectorAll('.tab')).find(b => b.dataset.tab === target);
+    const panel = document.getElementById(`tab-${target}`);
+    if (!btn || !panel) return false;
+
+    document.querySelectorAll('.tab').forEach(b => b.classList.remove('is-active'));
+    document.querySelectorAll('.panel').forEach(p => p.classList.remove('is-active'));
+    btn.classList.add('is-active');
+    panel.classList.add('is-active');
+
+    if (options.updateHash) {
+      try { window.location.hash = target; } catch (err) {}
+    }
+    return true;
+  };
+
   document.querySelectorAll('.tab').forEach(btn => {
     btn.addEventListener('click', () => {
-      const tab = btn.dataset.tab;
-      document.querySelectorAll('.tab').forEach(b => b.classList.remove('is-active'));
-      document.querySelectorAll('.panel').forEach(p => p.classList.remove('is-active'));
-      btn.classList.add('is-active');
-      document.getElementById(`tab-${tab}`).classList.add('is-active');
+      activateTab(btn.dataset.tab, { updateHash: true });
     });
   });
+
+  window.addEventListener('hashchange', () => {
+    activateTab(window.location.hash);
+  });
+
+  // Deep-link into a tab with /dashboard/#logs, etc.
+  activateTab(window.location.hash);
 }
 
 function renderContacts() {
@@ -144,6 +177,137 @@ async function loadCallsForContact(contactId, contactName) {
   `;
 }
 
+function readLogFilters() {
+  const level = document.getElementById('logs-level').value.trim();
+  const component = document.getElementById('logs-component').value.trim();
+  const event = document.getElementById('logs-event').value.trim();
+  const traceId = document.getElementById('logs-trace').value.trim();
+  const conversationId = document.getElementById('logs-conversation').value.trim();
+  const tokenId = document.getElementById('logs-token').value.trim();
+  const search = document.getElementById('logs-search').value.trim();
+  const limit = Number.parseInt(document.getElementById('logs-limit').value, 10) || 200;
+
+  const params = new URLSearchParams();
+  params.set('limit', String(Math.min(1000, Math.max(1, limit))));
+  if (level) params.set('level', level);
+  if (component) params.set('component', component);
+  if (event) params.set('event', event);
+  if (traceId) params.set('trace_id', traceId);
+  if (conversationId) params.set('conversation_id', conversationId);
+  if (tokenId) params.set('token_id', tokenId);
+  if (search) params.set('search', search);
+
+  return params;
+}
+
+function renderLogStats() {
+  const el = document.getElementById('log-stats');
+  if (!state.logStats) {
+    el.textContent = '';
+    el.style.display = 'none';
+    return;
+  }
+  const stats = state.logStats;
+  const levels = Object.entries(stats.by_level || {}).sort((a, b) => a[0].localeCompare(b[0]));
+  const components = Object.entries(stats.by_component || {})
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 12);
+
+  el.style.display = 'block';
+  el.innerHTML = `
+    <div class="row">
+      <strong>Total:</strong> ${stats.total || 0}
+    </div>
+    <div class="row">
+      <strong>By level:</strong> ${levels.map(([k, v]) => `${esc(k)}=${v}`).join(' · ') || '(none)'}
+    </div>
+    <div class="row">
+      <strong>Top components:</strong> ${components.map(([k, v]) => `${esc(k)}=${v}`).join(' · ') || '(none)'}
+    </div>
+  `;
+}
+
+function renderTraceDetail() {
+  const el = document.getElementById('trace-detail');
+  if (!state.trace || !Array.isArray(state.trace.logs)) {
+    el.textContent = '';
+    el.style.display = 'none';
+    return;
+  }
+  el.style.display = 'block';
+  const logs = state.trace.logs || [];
+  const lines = logs.map(row => {
+    const msg = row.message || '';
+    const meta = [
+      row.component ? row.component : null,
+      row.event ? row.event : null,
+      row.error_code ? `code=${row.error_code}` : null,
+      row.status_code ? `status=${row.status_code}` : null
+    ].filter(Boolean).join(' ');
+    return `[${fmtDate(row.timestamp)}] ${row.level?.toUpperCase() || ''} ${meta}\n${msg}${row.hint ? `\nHint: ${row.hint}` : ''}`;
+  }).join('\n\n');
+
+  el.innerHTML = `
+    <div class="row">
+      <h3 style="margin:0;">Trace: <span class="mono">${esc(state.trace.trace_id || '')}</span></h3>
+      <button id="clear-trace">Clear</button>
+    </div>
+    <pre class="summary mono">${esc(lines || 'No trace logs.')}</pre>
+  `;
+  const clearBtn = document.getElementById('clear-trace');
+  if (clearBtn) {
+    clearBtn.addEventListener('click', () => {
+      state.trace = null;
+      renderTraceDetail();
+    });
+  }
+}
+
+function renderLogs() {
+  const tbody = document.querySelector('#logs-table tbody');
+  tbody.innerHTML = '';
+
+  state.logs.forEach(row => {
+    const tr = document.createElement('tr');
+    const trace = row.trace_id || '';
+    tr.innerHTML = `
+      <td>${esc(fmtDate(row.timestamp))}</td>
+      <td>${esc(row.level || '-')}</td>
+      <td>${esc(row.component || '-')}</td>
+      <td>${esc(row.event || '-')}</td>
+      <td title="${esc(row.message || '')}">${esc(String(row.message || '').slice(0, 120) || '-')}</td>
+      <td class="mono">${esc(trace ? trace.slice(0, 14) + '…' : '-')}</td>
+      <td class="mono">${esc(row.conversation_id ? row.conversation_id.slice(0, 14) + '…' : '-')}</td>
+      <td class="mono">${esc(row.token_id || '-')}</td>
+      <td>${esc(row.error_code || '-')}</td>
+      <td>${esc(row.status_code ?? '-')}</td>
+    `;
+    if (trace) {
+      tr.addEventListener('click', () => loadTrace(trace).catch(err => showNotice(err.message)));
+    }
+    tbody.appendChild(tr);
+  });
+}
+
+async function loadLogs() {
+  const qs = readLogFilters().toString();
+  const payload = await request(`/logs?${qs}`);
+  state.logs = payload.logs || [];
+  renderLogs();
+}
+
+async function loadLogStats() {
+  const payload = await request('/logs/stats');
+  state.logStats = payload.stats || null;
+  renderLogStats();
+}
+
+async function loadTrace(traceId) {
+  const payload = await request(`/logs/trace/${encodeURIComponent(traceId)}?limit=500`);
+  state.trace = payload;
+  renderTraceDetail();
+}
+
 function fillTierSelects() {
   const tiers = (state.settings?.tiers || []).slice().sort((a, b) => a.id.localeCompare(b.id));
   const tierSelect = document.getElementById('tier-select');
@@ -326,6 +490,30 @@ function bindRefreshButtons() {
   document.getElementById('refresh-contacts').addEventListener('click', () => loadContacts().catch(err => showNotice(err.message)));
   document.getElementById('refresh-calls').addEventListener('click', () => loadCalls().catch(err => showNotice(err.message)));
   document.getElementById('refresh-invites').addEventListener('click', () => loadInvites().catch(err => showNotice(err.message)));
+  document.getElementById('refresh-logs').addEventListener('click', () => loadLogs().catch(err => showNotice(err.message)));
+  document.getElementById('refresh-log-stats').addEventListener('click', () => loadLogStats().catch(err => showNotice(err.message)));
+
+  // Auto-refresh logs as filters change (debounced).
+  let debounce = null;
+  const schedule = () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => loadLogs().catch(err => showNotice(err.message)), 250);
+  };
+  [
+    'logs-level',
+    'logs-component',
+    'logs-event',
+    'logs-trace',
+    'logs-conversation',
+    'logs-token',
+    'logs-search',
+    'logs-limit'
+  ].forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('input', schedule);
+    el.addEventListener('change', schedule);
+  });
 }
 
 async function bootstrap() {
@@ -335,7 +523,7 @@ async function bootstrap() {
   bindRefreshButtons();
 
   try {
-    await Promise.all([loadSettings(), loadContacts(), loadCalls(), loadInvites()]);
+    await Promise.all([loadSettings(), loadContacts(), loadCalls(), loadInvites(), loadLogStats(), loadLogs()]);
     showNotice('Dashboard loaded');
   } catch (err) {
     showNotice(err.message);