instar 0.24.18 → 0.24.21

package/dashboard/index.html

@@ -1921,345 +1921,101 @@
     .spark.s-skipped { background: #333; }
 
     /* ── Discovery Tab ──────────────────────────────────────── */
-    /* Systems Tab */
-    .systems-container {
-      grid-column: 1 / -1;
-      overflow-y: auto;
-      background: var(--bg);
-      padding: 20px;
-    }
-
-    .systems-main {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-
-    .systems-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 20px;
-    }
-
-    .systems-header h2 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-    }
-
-    .systems-refresh {
-      font-size: 11px;
-      padding: 4px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text-dim);
-      cursor: pointer;
-    }
-
-    .systems-refresh:hover {
-      border-color: var(--text-dim);
-      color: var(--text);
-    }
+    /* ── Systems Tab ──────────────────────────────────────────── */
+    .systems-container { grid-column: 1 / -1; overflow-y: auto; background: var(--bg); padding: 20px; }
+    .systems-main { max-width: 960px; margin: 0 auto; }
+    .systems-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+    .systems-header h2 { font-size: 16px; font-weight: 600; color: var(--text-bright); }
+    .systems-refresh { font-size: 11px; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
+    .systems-refresh:hover { border-color: var(--text-dim); color: var(--text); }
 
     /* Health Banner */
-    .health-banner {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px 24px;
-      border-radius: 10px;
-      margin-bottom: 24px;
-      border: 1px solid var(--border);
-    }
-
-    .health-banner.healthy {
-      background: rgba(76, 175, 80, 0.08);
-      border-color: rgba(76, 175, 80, 0.25);
-    }
-
-    .health-banner.error {
-      background: rgba(244, 67, 54, 0.08);
-      border-color: rgba(244, 67, 54, 0.25);
-    }
-
-    .health-banner.degraded {
-      background: rgba(255, 152, 0, 0.08);
-      border-color: rgba(255, 152, 0, 0.25);
-    }
-
-    .health-icon {
-      font-size: 28px;
-      line-height: 1;
-      flex-shrink: 0;
-    }
-
+    .health-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 10px; margin-bottom: 24px; border: 1px solid var(--border); }
+    .health-banner.healthy { background: rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.25); }
+    .health-banner.error { background: rgba(244,67,54,0.08); border-color: rgba(244,67,54,0.25); }
+    .health-banner.degraded { background: rgba(255,152,0,0.08); border-color: rgba(255,152,0,0.25); }
+    .health-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
     .health-banner.healthy .health-icon { color: var(--accent); }
     .health-banner.error .health-icon { color: var(--red); }
     .health-banner.degraded .health-icon { color: var(--orange); }
-
-    .health-text {
-      flex: 1;
-    }
-
-    .health-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-      margin-bottom: 4px;
-    }
-
-    .health-meta {
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-
-    /* Issues Panel */
-    .issues-panel {
-      margin-bottom: 24px;
-    }
-
-    .issue-card {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 12px 16px;
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-left: 3px solid var(--red);
-      border-radius: 6px;
-      margin-bottom: 8px;
-    }
-
-    .issue-card.warning {
-      border-left-color: var(--orange);
-    }
-
-    .issue-card-icon {
-      font-size: 14px;
-      margin-top: 1px;
-      flex-shrink: 0;
-    }
-
-    .issue-card-content {
-      flex: 1;
-    }
-
-    .issue-card-label {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-bright);
-      margin-bottom: 2px;
-    }
-
-    .issue-card-desc {
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-
-    /* Capabilities Grid */
-    .capabilities-section {
-      margin-bottom: 24px;
-    }
-
-    .capabilities-section-title {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 12px;
-    }
-
-    /* Capability Cards */
-    .capability-card {
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      margin-bottom: 6px;
-      overflow: hidden;
-      transition: border-color 0.15s;
-    }
-
-    .capability-card:hover {
-      border-color: rgba(255,255,255,0.12);
-    }
-
-    .capability-card.expanded {
-      border-color: var(--accent);
-    }
-
-    .capability-card-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 14px 16px;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .cap-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-
+    .health-text { flex: 1; }
+    .health-title { font-size: 15px; font-weight: 600; color: var(--text-bright); margin-bottom: 3px; }
+    .health-meta { font-size: 12px; color: var(--text-dim); }
+
+    /* Issues */
+    .issues-panel { margin-bottom: 24px; }
+    .issue-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 6px; margin-bottom: 8px; }
+    .issue-card.warning { border-left-color: var(--orange); }
+    .issue-card-icon { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
+    .issue-card-content { flex: 1; }
+    .issue-card-label { font-size: 13px; font-weight: 500; color: var(--text-bright); margin-bottom: 2px; }
+    .issue-card-desc { font-size: 12px; color: var(--text-dim); }
+
+    /* Card Grid */
+    .cap-section-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
+    .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 24px; }
+    .cap-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; display: flex; flex-direction: column; gap: 8px; }
+    .cap-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
+    .cap-card-top { display: flex; align-items: center; gap: 10px; }
+    .cap-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
     .cap-dot.active { background: var(--accent); }
     .cap-dot.error { background: var(--red); }
-
-    .cap-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .cap-label {
-      font-size: 13px;
-      color: var(--text-bright);
-      font-weight: 500;
-      margin-bottom: 2px;
-    }
-
-    .cap-metric {
-      font-size: 11px;
-      color: var(--text-dim);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .cap-arrow {
-      font-size: 10px;
-      color: var(--text-dim);
-      transition: transform 0.2s;
-      flex-shrink: 0;
-    }
-
-    .capability-card.expanded .cap-arrow {
-      transform: rotate(90deg);
-    }
-
-    /* Capability Detail (expandable) */
-    .cap-detail {
-      display: none;
-      padding: 0 16px 14px;
-      border-top: 1px solid var(--border);
-    }
-
-    .capability-card.expanded .cap-detail {
-      display: block;
-    }
-
-    .cap-detail-desc {
-      font-size: 12px;
-      color: var(--text-dim);
-      margin: 12px 0 10px;
-      line-height: 1.5;
-    }
-
-    .cap-detail-label {
-      font-size: 10px;
-      font-weight: 600;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 6px;
-    }
-
-    .cap-detail-processes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-
-    .cap-detail-proc {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      font-size: 11px;
-      color: var(--text);
-    }
-
-    .cap-detail-proc-dot {
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-    }
-
-    /* Events Disclosure */
-    .events-disclosure {
-      margin-top: 8px;
-    }
-
-    .events-disclosure-toggle {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 0;
-      cursor: pointer;
-      user-select: none;
-      font-size: 12px;
-      color: var(--text-dim);
-      border: none;
-      background: none;
-      width: 100%;
-      text-align: left;
-    }
-
-    .events-disclosure-toggle:hover {
-      color: var(--text);
-    }
-
-    .events-disclosure-arrow {
-      font-size: 10px;
-      transition: transform 0.2s;
-    }
-
-    .events-disclosure.expanded .events-disclosure-arrow {
-      transform: rotate(90deg);
-    }
-
-    .events-disclosure-body {
-      display: none;
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-
-    .events-disclosure.expanded .events-disclosure-body {
-      display: block;
-    }
-
-    .systems-event-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 14px;
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-    }
-
-    .systems-event-row:last-child {
-      border-bottom: none;
-    }
-
-    .systems-event-time {
-      color: var(--text-dim);
-      white-space: nowrap;
-      font-size: 11px;
-      min-width: 60px;
-    }
-
-    .systems-event-text {
-      color: var(--text);
-      flex: 1;
-    }
+    .cap-card-name { font-size: 14px; font-weight: 600; color: var(--text-bright); flex: 1; }
+    .cap-card-arrow { font-size: 11px; color: var(--text-dim); }
+    .cap-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .cap-card-metric { font-size: 12px; color: var(--accent); font-weight: 500; padding-top: 4px; border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cap-card.error .cap-card-metric { color: var(--red); }
+    .cap-card-stats { display: flex; gap: 12px; flex-wrap: wrap; }
+    .cap-stat { font-size: 11px; color: var(--text-dim); }
+    .cap-stat-value { font-weight: 600; color: var(--text); margin-right: 3px; }
+
+    /* Detail View */
+    .cap-detail-view { display: none; }
+    .cap-detail-view.active { display: block; }
+    .cap-detail-back { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; border: none; background: none; padding: 0; margin-bottom: 16px; }
+    .cap-detail-back:hover { color: var(--text); }
+    .cap-detail-header { margin-bottom: 20px; }
+    .cap-detail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+    .cap-detail-title h3 { font-size: 18px; font-weight: 600; color: var(--text-bright); margin: 0; }
+    .cap-detail-description { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 700px; }
+    .cap-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; }
+    .cap-stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; text-align: center; }
+    .cap-stat-card-value { font-size: 20px; font-weight: 700; color: var(--text-bright); }
+    .cap-stat-card-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px; }
+    .cap-detail-section { margin-bottom: 20px; }
+    .cap-detail-section-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+    .cap-process-list { display: flex; flex-direction: column; gap: 6px; }
+    .cap-process-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; }
+    .cap-process-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+    .cap-process-name { font-size: 13px; color: var(--text-bright); font-weight: 500; flex: 1; }
+    .cap-process-status { font-size: 11px; color: var(--text-dim); }
+    .cap-last-activity { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+
+    /* Events */
+    .events-disclosure { margin-top: 8px; }
+    .events-disclosure-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; user-select: none; font-size: 12px; color: var(--text-dim); border: none; background: none; width: 100%; text-align: left; }
+    .events-disclosure-toggle:hover { color: var(--text); }
+    .events-disclosure-arrow { font-size: 10px; transition: transform 0.2s; }
+    .events-disclosure.expanded .events-disclosure-arrow { transform: rotate(90deg); }
+    .events-disclosure-body { display: none; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; }
+    .events-disclosure.expanded .events-disclosure-body { display: block; }
+    .systems-event-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
+    .systems-event-row:last-child { border-bottom: none; }
+    .systems-event-time { color: var(--text-dim); white-space: nowrap; font-size: 11px; min-width: 60px; }
+    .systems-event-text { color: var(--text); flex: 1; }
+
+    /* Content Browser (browsable stats) */
+    .cap-content-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; overflow: hidden; }
+    .cap-content-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-bright); }
+    .cap-content-body { max-height: 400px; overflow-y: auto; padding: 8px; }
+    .cap-content-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--bg-panel); }
+    .cap-content-item-title { font-size: 13px; font-weight: 500; color: var(--text-bright); margin-bottom: 4px; }
+    .cap-content-item-body { font-size: 12px; color: var(--text-dim); line-height: 1.5; word-break: break-word; }
+    .cap-content-item-time { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+    .cap-content-tag { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 3px; background: rgba(255,255,255,0.06); color: var(--text-dim); margin-right: 4px; margin-top: 4px; }
+    .cap-content-tag.applied { background: rgba(76,175,80,0.15); color: var(--accent); }
+    .cap-content-empty { padding: 16px; text-align: center; color: var(--text-dim); font-size: 12px; }
+    .cap-stat-card:hover { border-color: var(--accent); transition: border-color 0.15s; }
 
     .discovery-container {
       grid-column: 1 / -1;
@@ -5741,7 +5497,7 @@
       document.getElementById('systemsDetailView').classList.add('active');
       const content = document.getElementById('systemsDetailContent');
 
-      const statCards = buildStatCards(cap.stats || {});
+      const statCards = buildStatCards(cap.stats || {}, capId);
       const processRows = (cap.processes || []).map(p => {
         const dotColor = p.status === 'running' ? 'var(--accent)' : 'var(--red)';
         return `<div class="cap-process-row">
@@ -5763,7 +5519,7 @@
           <div class="cap-detail-description">${esc(cap.description)}</div>
           ${lastAct}
         </div>
-        ${statCards ? '<div class="cap-detail-section"><div class="cap-detail-section-title">Metrics</div><div class="cap-stats-grid">' + statCards + '</div></div>' : ''}
+        ${statCards ? '<div class="cap-detail-section"><div class="cap-detail-section-title">Metrics</div><div class="cap-stats-grid">' + statCards + '</div><div id="capContentBrowser"></div></div>' : ''}
         <div class="cap-detail-section">
           <div class="cap-detail-section-title">Components (${(cap.processes || []).length})</div>
           <div class="cap-process-list">${processRows}</div>
@@ -5774,7 +5530,31 @@
         </div>`;
     }
 
-    function buildStatCards(stats) {
+    // Map stat keys to browsable content endpoints
+    const BROWSABLE_STATS = {
+      // Evolution
+      learnings: { endpoint: '/evolution/learnings', label: 'Learnings', renderer: 'renderLearnings' },
+      proposals: { endpoint: '/evolution/proposals', label: 'Proposals', renderer: 'renderProposals' },
+      gaps: { endpoint: '/evolution/gaps', label: 'Capability Gaps', renderer: 'renderGaps' },
+      actions: { endpoint: '/evolution/actions', label: 'Actions', renderer: 'renderActions' },
+      overdueActions: { endpoint: '/evolution/actions/overdue', label: 'Overdue Actions', renderer: 'renderActions' },
+      // Health
+      coherenceChecks: { endpoint: '/health/coherence', label: 'Coherence Report', renderer: 'renderCoherence' },
+      coherencePassed: { endpoint: '/health/coherence', label: 'Coherence Report', renderer: 'renderCoherence' },
+      coherenceFailed: { endpoint: '/health/coherence', label: 'Coherence Report', renderer: 'renderCoherence' },
+      // Recovery
+      totalTriages: { endpoint: '/triage/history?limit=20', label: 'Triage History', renderer: 'renderTriageHistory' },
+      interventions: { endpoint: '/watchdog/status', label: 'Watchdog Status', renderer: 'renderWatchdog' },
+      recoveries: { endpoint: '/watchdog/status', label: 'Watchdog Status', renderer: 'renderWatchdog' },
+      // Jobs
+      totalJobs: { endpoint: '/jobs', label: 'Jobs', renderer: 'renderJobs' },
+      enabledJobs: { endpoint: '/jobs', label: 'Jobs', renderer: 'renderJobs' },
+      // Telegram
+      totalMessages: { endpoint: '/telegram/log-stats', label: 'Message Stats', renderer: 'renderTelegramStats' },
+      topicMappings: { endpoint: '/telegram/log-stats', label: 'Message Stats', renderer: 'renderTelegramStats' },
+    };
+
+    function buildStatCards(stats, capId) {
       if (!stats || typeof stats !== 'object') return '';
       const map = {
         interventions: 'Interventions', recoveries: 'Recoveries', sessionDeaths: 'Deaths',
@@ -5792,12 +5572,117 @@
       const cards = [];
       for (const [key, label] of Object.entries(map)) {
         if (stats[key] != null && typeof stats[key] === 'number') {
-          cards.push(`<div class="cap-stat-card"><div class="cap-stat-card-value">${stats[key]}</div><div class="cap-stat-card-label">${esc(label)}</div></div>`);
+          const browsable = BROWSABLE_STATS[key];
+          const clickAttr = browsable ? ` onclick="browseStatContent('${key}')" style="cursor:pointer"` : '';
+          const browseHint = browsable ? '<div style="font-size:9px;color:var(--accent);margin-top:2px">click to view</div>' : '';
+          cards.push(`<div class="cap-stat-card"${clickAttr}><div class="cap-stat-card-value">${stats[key]}</div><div class="cap-stat-card-label">${esc(label)}</div>${browseHint}</div>`);
         }
       }
       return cards.join('');
     }
 
+    async function browseStatContent(statKey) {
+      const info = BROWSABLE_STATS[statKey];
+      if (!info) return;
+      const panel = document.getElementById('capContentBrowser');
+      if (!panel) return;
+      panel.innerHTML = '<div style="padding:12px;color:var(--text-dim);font-size:12px">Loading ' + esc(info.label) + '...</div>';
+      try {
+        const data = await apiFetch(info.endpoint);
+        panel.innerHTML = '<div class="cap-content-panel">' +
+          '<div class="cap-content-header"><span>' + esc(info.label) + '</span><button onclick="document.getElementById(\'capContentBrowser\').innerHTML=\'\'" style="border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px">&times;</button></div>' +
+          '<div class="cap-content-body">' + renderBrowsableContent(info.renderer, data) + '</div></div>';
+      } catch (e) {
+        panel.innerHTML = '<div style="padding:12px;color:var(--red);font-size:12px">Failed to load: ' + esc(e.message) + '</div>';
+      }
+    }
+
+    function renderBrowsableContent(renderer, data) {
+      switch (renderer) {
+        case 'renderLearnings': {
+          const items = data.learnings || data || [];
+          if (!Array.isArray(items) || items.length === 0) return '<div class="cap-content-empty">No learnings recorded</div>';
+          return items.map(l => `<div class="cap-content-item">
+            <div class="cap-content-item-title">${esc(l.title || l.insight || l.id || 'Untitled')}</div>
+            ${l.description || l.context ? '<div class="cap-content-item-body">' + esc(l.description || l.context || '') + '</div>' : ''}
+            ${l.category ? '<span class="cap-content-tag">' + esc(l.category) + '</span>' : ''}
+            ${l.applied ? '<span class="cap-content-tag applied">Applied</span>' : ''}
+            ${l.createdAt ? '<div class="cap-content-item-time">' + esc(timeAgo(l.createdAt)) + '</div>' : ''}
+          </div>`).join('');
+        }
+        case 'renderProposals': {
+          const items = data.proposals || data || [];
+          if (!Array.isArray(items) || items.length === 0) return '<div class="cap-content-empty">No proposals</div>';
+          return items.map(p => `<div class="cap-content-item">
+            <div class="cap-content-item-title">${esc(p.title || p.id || 'Untitled')}</div>
+            ${p.description ? '<div class="cap-content-item-body">' + esc(p.description) + '</div>' : ''}
+            ${p.status ? '<span class="cap-content-tag">' + esc(p.status) + '</span>' : ''}
+            ${p.type ? '<span class="cap-content-tag">' + esc(p.type) + '</span>' : ''}
+          </div>`).join('');
+        }
+        case 'renderGaps': {
+          const items = data.gaps || data || [];
+          if (!Array.isArray(items) || items.length === 0) return '<div class="cap-content-empty">No gaps detected</div>';
+          return items.map(g => `<div class="cap-content-item">
+            <div class="cap-content-item-title">${esc(g.title || g.capability || g.id || 'Untitled')}</div>
+            ${g.description ? '<div class="cap-content-item-body">' + esc(g.description) + '</div>' : ''}
+            ${g.severity ? '<span class="cap-content-tag">' + esc(g.severity) + '</span>' : ''}
+          </div>`).join('');
+        }
+        case 'renderActions': {
+          const items = data.actions || data || [];
+          if (!Array.isArray(items) || items.length === 0) return '<div class="cap-content-empty">No actions</div>';
+          return items.map(a => `<div class="cap-content-item">
+            <div class="cap-content-item-title">${esc(a.title || a.action || a.id || 'Untitled')}</div>
+            ${a.status ? '<span class="cap-content-tag">' + esc(a.status) + '</span>' : ''}
+            ${a.dueAt ? '<div class="cap-content-item-time">Due: ' + esc(timeAgo(a.dueAt)) + '</div>' : ''}
+          </div>`).join('');
+        }
+        case 'renderCoherence': {
+          const report = data.lastReport || data;
+          if (!report || !report.checks) return '<div class="cap-content-empty">No coherence data</div>';
+          return report.checks.map(c => `<div class="cap-content-item" style="border-left:3px solid ${c.passed ? 'var(--accent)' : 'var(--red)'}">
+            <div class="cap-content-item-title">${c.passed ? '&check;' : '&cross;'} ${esc(c.name)}</div>
+            <div class="cap-content-item-body">${esc(c.message)}</div>
+          </div>`).join('');
+        }
+        case 'renderTriageHistory': {
+          const items = data.history || data || [];
+          if (!Array.isArray(items) || items.length === 0) return '<div class="cap-content-empty">No triage history</div>';
+          return items.map(t => `<div class="cap-content-item">
+            <div class="cap-content-item-title">Topic ${t.topicId} — ${esc(t.sessionName || 'unknown')}</div>
+            <div class="cap-content-item-body">${t.result ? esc(JSON.stringify(t.result.actionsTaken || t.result, null, 0).substring(0, 200)) : ''}</div>
+            ${t.timestamp ? '<div class="cap-content-item-time">' + esc(timeAgo(t.timestamp)) + '</div>' : ''}
+          </div>`).join('');
+        }
+        case 'renderWatchdog': {
+          const hist = data.interventionHistory || [];
+          if (hist.length === 0) return '<div class="cap-content-empty">No interventions recorded</div>';
+          return hist.map(h => `<div class="cap-content-item">
+            <div class="cap-content-item-title">PID ${h.stuckPid || '?'} — ${esc(h.level || h.outcome || 'intervention')}</div>
+            ${h.outcome ? '<span class="cap-content-tag">' + esc(h.outcome) + '</span>' : ''}
+            ${h.timestamp ? '<div class="cap-content-item-time">' + esc(timeAgo(h.timestamp)) + '</div>' : ''}
+          </div>`).join('');
+        }
+        case 'renderJobs': {
+          const jobs = data.jobs || data || [];
+          if (!Array.isArray(jobs) || jobs.length === 0) return '<div class="cap-content-empty">No jobs</div>';
+          return jobs.slice(0, 20).map(j => `<div class="cap-content-item">
+            <div class="cap-content-item-title">${esc(j.slug || j.name || 'unnamed')}</div>
+            <div class="cap-content-item-body">${esc(j.cron || '')} ${j.enabled === false ? '(disabled)' : ''}</div>
+          </div>`).join('');
+        }
+        case 'renderTelegramStats': {
+          return `<div class="cap-content-item">
+            <div class="cap-content-item-title">Message Log</div>
+            <div class="cap-content-item-body">Total messages: ${data.totalMessages || '?'}<br>Log size: ${data.logSizeBytes ? Math.round(data.logSizeBytes / 1024) + ' KB' : '?'}</div>
+          </div>`;
+        }
+        default:
+          return '<div class="cap-content-empty">No viewer for this content</div>';
+      }
+    }
+
     function showSystemsOverview() {
       document.getElementById('systemsOverview').style.display = '';
       document.getElementById('systemsDetailView').classList.remove('active');

package/dist/commands/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AA6BH,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAqBrE;AAgzFD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAiBlF"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AA+CH,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAqBrE;AAgzFD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAiBlF"}