feat(console): improve observer monitor formatting and readability

- Parse ASCII table output into proper HTML tables with headers and rows
- Add component health indicators with visual status dots (ok/error)
- Create auto-refresh toggle for observer monitoring (10s interval)
- Render system status as key-value grid instead of raw JSON
- Organize components as cards: Queue, VectorDB, VLM, Retrieval, Locks
- Add styling for monitor dashboard (cards, tables, health dots)

Contributed by the engineering team at Homesage.ai

Author: Zouuabi

openviking/console/static/app.js

@@ -111,6 +111,8 @@ const elements = {
   systemBtn: document.getElementById("systemBtn"),
   observerBtn: document.getElementById("observerBtn"),
   monitorResults: document.getElementById("monitorResults"),
+  monitorDashboard: document.getElementById("monitorDashboard"),
+  monitorRefreshBtn: document.getElementById("monitorRefreshBtn"),
   navToggleBtn: document.getElementById("navToggleBtn"),
   resultToggleBtn: document.getElementById("resultToggleBtn"),
   clearOutputBtn: document.getElementById("clearOutputBtn"),
@@ -2431,31 +2433,139 @@ function bindTenants() {
   });
 }
 
+function parseAsciiTable(text) {
+  if (!text || typeof text !== "string") return null;
+  const lines = text.split("\n").filter(l => l.trim());
+  const dataLines = lines.filter(l => !l.match(/^[+\-]+$/));
+  if (dataLines.length < 2) return null;
+  const splitRow = row =>
+    row.split("|").slice(1, -1).map(c => c.trim());
+  const headers = splitRow(dataLines[0]);
+  const rows = dataLines.slice(1).map(splitRow);
+  return { headers, rows };
+}
+
+function renderMonitorTable(parsed) {
+  if (!parsed) return "";
+  let html = "<table><thead><tr>";
+  for (const h of parsed.headers) html += `<th>${h}</th>`;
+  html += "</tr></thead><tbody>";
+  for (const row of parsed.rows) {
+    const isTotal = row.some(c => /^TOTAL$/i.test(c));
+    html += `<tr${isTotal ? ' class="total-row"' : ""}>`;
+    for (const cell of row) html += `<td>${cell}</td>`;
+    html += "</tr>";
+  }
+  html += "</tbody></table>";
+  return html;
+}
+
+function renderComponentCard(name, comp) {
+  const healthy = comp.is_healthy !== false;
+  const dotClass = healthy ? "ok" : "error";
+  const friendlyNames = {
+    queue: "Processing Queue",
+    vikingdb: "Vector Database",
+    vlm: "Language Model",
+    lock: "Active Locks",
+    retrieval: "Retrieval Stats",
+  };
+  const title = friendlyNames[name] || name;
+  let bodyHtml = "";
+  const statusText = comp.status || "";
+  const tables = statusText.split("\n\n").filter(Boolean);
+  for (const tableText of tables) {
+    const parsed = parseAsciiTable(tableText);
+    if (parsed) {
+      bodyHtml += renderMonitorTable(parsed);
+    } else {
+      bodyHtml += `<div class="plain-text">${tableText}</div>`;
+    }
+  }
+  return `<div class="monitor-card">
+    <div class="monitor-card-header">
+      <span class="health-dot ${dotClass}"></span>
+      <h3>${title}</h3>
+    </div>
+    ${bodyHtml}
+  </div>`;
+}
+
+function renderSystemStatus(result) {
+  const dashboard = elements.monitorDashboard;
+  if (!result) { dashboard.innerHTML = ""; return; }
+  let html = `<div class="monitor-card">
+    <div class="monitor-card-header">
+      <span class="health-dot ${result.initialized ? "ok" : "error"}"></span>
+      <h3>System</h3>
+    </div>
+    <div class="kv-grid">`;
+  for (const [k, v] of Object.entries(result)) {
+    const display = typeof v === "string" ? v : JSON.stringify(v);
+    html += `<span class="kv-label">${k}</span><span class="kv-value">${display}</span>`;
+  }
+  html += "</div></div>";
+  dashboard.innerHTML = html;
+}
+
+function renderObserverDashboard(result) {
+  const dashboard = elements.monitorDashboard;
+  if (!result?.components) { dashboard.innerHTML = ""; return; }
+  const healthSummary = Object.entries(result.components).map(([name, comp]) => {
+    const healthy = comp.is_healthy !== false;
+    return `<span class="health-dot ${healthy ? "ok" : "error"}"></span> ${name}`;
+  }).join("&nbsp;&nbsp;&nbsp;");
+  let html = `<div style="margin-bottom:12px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)">${healthSummary}</div>`;
+  const order = ["queue", "vikingdb", "vlm", "retrieval", "lock"];
+  const sorted = order.filter(n => result.components[n]);
+  for (const miss of Object.keys(result.components)) {
+    if (!sorted.includes(miss)) sorted.push(miss);
+  }
+  for (const name of sorted) {
+    html += renderComponentCard(name, result.components[name]);
+  }
+  dashboard.innerHTML = html;
+}
+
+let monitorRefreshInterval = null;
+
 function bindMonitor() {
   elements.systemBtn.addEventListener("click", async () => {
     try {
       const payload = await callConsole("/ov/system/status", { method: "GET" });
-      const rows = Object.entries(payload.result || {}).map(([key, value]) => ({
-        label: `${key}: ${typeof value === "string" ? value : JSON.stringify(value)}`,
-      }));
-      renderList(elements.monitorResults, rows);
+      elements.monitorResults.innerHTML = "";
+      renderSystemStatus(payload.result);
       setOutput(payload);
     } catch (error) {
       setOutput(error.message);
     }
   });
 
-  elements.observerBtn.addEventListener("click", async () => {
+  async function loadObserver() {
     try {
       const payload = await callConsole("/ov/observer/system", { method: "GET" });
-      const rows = Object.entries(payload.result?.components || {}).map(([name, value]) => ({
-        label: `${name}: ${value?.status || JSON.stringify(value)}`,
-      }));
-      renderList(elements.monitorResults, rows);
+      elements.monitorResults.innerHTML = "";
+      renderObserverDashboard(payload.result);
       setOutput(payload);
     } catch (error) {
       setOutput(error.message);
     }
+  }
+
+  elements.observerBtn.addEventListener("click", loadObserver);
+
+  elements.monitorRefreshBtn.addEventListener("click", () => {
+    if (monitorRefreshInterval) {
+      clearInterval(monitorRefreshInterval);
+      monitorRefreshInterval = null;
+      elements.monitorRefreshBtn.textContent = "Auto-refresh: OFF";
+      elements.monitorRefreshBtn.classList.remove("active");
+    } else {
+      loadObserver();
+      monitorRefreshInterval = setInterval(loadObserver, 10000);
+      elements.monitorRefreshBtn.textContent = "Auto-refresh: ON";
+      elements.monitorRefreshBtn.classList.add("active");
+    }
   });
 }
 

openviking/console/static/index.html

@@ -312,7 +312,9 @@ <h2>Monitor</h2>
                 <div class="row">
                   <button id="systemBtn">System Status</button>
                   <button id="observerBtn">Observer(System)</button>
+                  <button id="monitorRefreshBtn" title="Auto-refresh every 10s">Auto-refresh: OFF</button>
                 </div>
+                <div id="monitorDashboard" class="monitor-dashboard"></div>
                 <ul id="monitorResults" class="list"></ul>
               </section>
 

openviking/console/static/styles.css

@@ -1479,6 +1479,109 @@ body.dragging-output * {
   }
 }
 
+/* Monitor Dashboard */
+.monitor-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.monitor-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+.monitor-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.monitor-card-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text);
+}
+
+.health-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.health-dot.ok { background: var(--ok, #30c482); }
+.health-dot.error { background: var(--danger, #ff5c5c); }
+
+.monitor-card table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+}
+
+.monitor-card th {
+  text-align: left;
+  padding: 6px 12px;
+  color: var(--muted);
+  font-weight: 500;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.monitor-card td {
+  padding: 6px 12px;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.monitor-card tr:last-child td {
+  border-bottom: none;
+}
+
+.monitor-card tr.total-row td {
+  font-weight: 600;
+  color: var(--text-strong);
+  border-top: 1px solid var(--border-strong);
+}
+
+.monitor-card .plain-text {
+  color: var(--muted);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+}
+
+.monitor-card .kv-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 16px;
+}
+
+.monitor-card .kv-label {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.monitor-card .kv-value {
+  color: var(--text);
+  font-size: 12px;
+  font-family: "JetBrains Mono", monospace;
+}
+
+#monitorRefreshBtn.active {
+  background: var(--ok, #30c482);
+  color: #fff;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,