instar 0.28.76 → 0.28.78

package/dashboard/index.html

@@ -2418,6 +2418,8 @@
           <button class="tab" data-tab="pr-pipeline" onclick="switchTab('pr-pipeline')">PR Pipeline</button>
           <button class="tab" data-tab="initiatives" onclick="switchTab('initiatives')">Initiatives <span class="tab-count" id="tabInitiativeCount">0</span></button>
           <button class="tab" data-tab="commitments" onclick="switchTab('commitments')">Commitments <span class="tab-count" id="tabCommitmentCount">0</span></button>
+          <button class="tab" data-tab="tokens" onclick="switchTab('tokens')">Tokens</button>
+          <button class="tab" data-tab="threadline" onclick="switchTab('threadline')">Threadline</button>
         </nav>
       </div>
       <div class="vital-signs" id="vitalSigns">
@@ -2846,6 +2848,135 @@
       <div id="commitmentsList" style="display:flex;flex-direction:column;gap:12px"></div>
     </div>
 
+    <!-- Tokens Tab — read-only token-usage observability -->
+    <div id="tokensPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <h2 style="margin:0">Tokens</h2>
+        <button onclick="loadTokens()" style="padding:6px 12px">Refresh</button>
+      </div>
+      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+        Token usage rolled up from Claude Code session transcripts. Last 24 hours unless noted.
+      </div>
+
+      <!-- Summary card -->
+      <div id="tokensSummaryCard" style="border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px">
+        <div style="font-weight:600">Last 24h</div>
+        <div id="tokensSummaryBody" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;font-size:13px">
+          <div style="color:var(--text-dim)">Loading...</div>
+        </div>
+      </div>
+
+      <!-- Top sessions -->
+      <div style="border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px">
+        <div style="font-weight:600">Top Sessions</div>
+        <div id="tokensSessionsBody" style="font-size:13px">
+          <div style="color:var(--text-dim)">Loading...</div>
+        </div>
+      </div>
+
+      <!-- Orphans -->
+      <div style="border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px">
+        <div style="font-weight:600">Idle Sessions (&gt; 30 min)</div>
+        <div id="tokensOrphansBody" style="font-size:13px">
+          <div style="color:var(--text-dim)">Loading...</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Threadline Tab — agent-to-agent conversations + Telegram bridge settings -->
+    <div id="threadlineTab" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <h2 style="margin:0">Threadline</h2>
+        <button onclick="loadThreadlineBridgeConfig()" style="padding:6px 12px">Refresh</button>
+      </div>
+      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+        Threadline is your agent's secure channel to other AI agents. The Telegram bridge mirrors those conversations into per-thread Telegram topics so you can watch every exchange. Quiet by default — flip the master switch below to opt in.
+      </div>
+
+      <!-- Bridge settings card -->
+      <div id="tlBridgeCard" style="border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:14px">
+        <div style="font-weight:600">Telegram bridge settings</div>
+        <div id="tlBridgeStatus" style="font-size:12px;color:var(--text-dim)">Loading…</div>
+
+        <label style="display:flex;align-items:flex-start;gap:10px;font-size:13px">
+          <input type="checkbox" id="tlBridgeEnabled" style="margin-top:3px" />
+          <span>
+            <strong>Bridge enabled (master switch)</strong>
+            <div style="color:var(--text-dim);font-size:12px;margin-top:2px">When off, no threadline traffic reaches Telegram, regardless of the toggles below.</div>
+          </span>
+        </label>
+
+        <label style="display:flex;align-items:flex-start;gap:10px;font-size:13px">
+          <input type="checkbox" id="tlBridgeAutoCreate" style="margin-top:3px" />
+          <span>
+            <strong>Auto-create Telegram topics for new threads</strong>
+            <div style="color:var(--text-dim);font-size:12px;margin-top:2px">Default off. When off, a brand-new agent reaching out won't spawn a Telegram topic unless you've allow-listed them below.</div>
+          </span>
+        </label>
+
+        <label style="display:flex;align-items:flex-start;gap:10px;font-size:13px">
+          <input type="checkbox" id="tlBridgeMirrorExisting" style="margin-top:3px" />
+          <span>
+            <strong>Mirror messages into existing topics</strong>
+            <div style="color:var(--text-dim);font-size:12px;margin-top:2px">Default on. Once a Telegram topic exists for a thread, both inbound and outbound messages on that thread show up there.</div>
+          </span>
+        </label>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+          <div>
+            <div style="font-weight:600;font-size:13px;margin-bottom:6px">Allow-list</div>
+            <div style="font-size:11px;color:var(--text-dim);margin-bottom:6px">Always auto-create topics for these remote agents (overrides "auto-create off").</div>
+            <ul id="tlBridgeAllowList" style="list-style:none;padding:0;margin:0;font-size:13px;display:flex;flex-direction:column;gap:4px"></ul>
+            <div style="display:flex;gap:6px;margin-top:8px">
+              <input type="text" id="tlBridgeAllowInput" placeholder="agent fingerprint or name" style="flex:1;padding:6px 8px;font-size:12px" />
+              <button onclick="tlBridgeAddListEntry('allowList', 'tlBridgeAllowInput')" style="padding:6px 10px;font-size:12px">Add</button>
+            </div>
+          </div>
+          <div>
+            <div style="font-weight:600;font-size:13px;margin-bottom:6px">Deny-list</div>
+            <div style="font-size:11px;color:var(--text-dim);margin-bottom:6px">Never auto-create topics for these remote agents (overrides "auto-create on").</div>
+            <ul id="tlBridgeDenyList" style="list-style:none;padding:0;margin:0;font-size:13px;display:flex;flex-direction:column;gap:4px"></ul>
+            <div style="display:flex;gap:6px;margin-top:8px">
+              <input type="text" id="tlBridgeDenyInput" placeholder="agent fingerprint or name" style="flex:1;padding:6px 8px;font-size:12px" />
+              <button onclick="tlBridgeAddListEntry('denyList', 'tlBridgeDenyInput')" style="padding:6px 10px;font-size:12px">Add</button>
+            </div>
+          </div>
+        </div>
+
+        <div id="tlBridgeError" style="color:var(--err, #c44);font-size:12px;display:none"></div>
+      </div>
+
+      <!-- Conversation observability — threads list + message stream + search -->
+      <div style="border:1px solid var(--border);border-radius:8px;padding:0;display:flex;flex-direction:column;min-height:480px">
+        <!-- Toolbar -->
+        <div style="display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)">
+          <div style="font-weight:600">Conversations</div>
+          <div style="flex:1"></div>
+          <input type="search" id="tlObsSearchInput" placeholder="search messages…" style="padding:6px 8px;font-size:12px;width:220px" oninput="tlObsSearchDebounced(this.value)" />
+          <select id="tlObsHasTopicFilter" onchange="tlObsLoadThreads()" style="padding:6px 8px;font-size:12px">
+            <option value="">all threads</option>
+            <option value="yes">with Telegram topic</option>
+            <option value="no">without Telegram topic</option>
+          </select>
+          <input type="text" id="tlObsRemoteFilter" placeholder="agent filter" style="padding:6px 8px;font-size:12px;width:140px" oninput="tlObsLoadThreadsDebounced()" />
+          <button onclick="tlObsLoadThreads()" style="padding:6px 10px;font-size:12px">Refresh</button>
+        </div>
+
+        <!-- Two-pane: threads list + active thread -->
+        <div style="display:grid;grid-template-columns:280px 1fr;flex:1;min-height:420px">
+          <ul id="tlObsThreadsList" style="list-style:none;padding:0;margin:0;border-right:1px solid var(--border);overflow-y:auto;max-height:520px">
+            <li style="padding:16px;color:var(--text-dim);font-size:12px">Loading…</li>
+          </ul>
+          <div id="tlObsConversation" style="padding:16px;overflow-y:auto;max-height:520px;display:flex;flex-direction:column;gap:10px">
+            <div style="color:var(--text-dim);font-size:12px;font-style:italic">Select a thread on the left to view the conversation.</div>
+          </div>
+        </div>
+
+        <!-- Search results -->
+        <div id="tlObsSearchResults" style="display:none;border-top:1px solid var(--border);padding:12px 16px;max-height:280px;overflow-y:auto"></div>
+      </div>
+    </div>
+
     <!-- Health Tab (was Systems) -->
     <div class="systems-container" id="systemsTab" style="display:none">
       <div class="systems-main">
@@ -3892,6 +4023,21 @@
         display: ['flex'],
         onActivate: () => { if (typeof loadCommitments === 'function') loadCommitments(); },
       },
+      {
+        id: 'tokens',
+        panels: ['tokensPanel'],
+        display: ['flex'],
+        onActivate: () => { if (typeof loadTokens === 'function') loadTokens(); },
+      },
+      {
+        id: 'threadline',
+        panels: ['threadlineTab'],
+        display: ['flex'],
+        onActivate: () => {
+          if (typeof loadThreadlineBridgeConfig === 'function') loadThreadlineBridgeConfig();
+          if (typeof tlObsLoadThreads === 'function') tlObsLoadThreads();
+        },
+      },
       {
         id: 'secrets',
         panels: ['secretsPanel'],
@@ -3997,6 +4143,346 @@
       return resp.json();
     }
 
+    // ── Tokens Tab ──────────────────────────────────────────────────
+    function fmtTokens(n) {
+      if (n == null) return '0';
+      if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+      if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
+      if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+      return String(n);
+    }
+    function fmtRelTime(ts) {
+      if (!ts) return '—';
+      const diff = Date.now() - ts;
+      const min = Math.floor(diff / 60000);
+      if (min < 1) return 'just now';
+      if (min < 60) return min + 'm ago';
+      const hr = Math.floor(min / 60);
+      if (hr < 24) return hr + 'h ago';
+      return Math.floor(hr / 24) + 'd ago';
+    }
+    function escapeHtml(s) {
+      return String(s ?? '').replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
+    }
+    async function loadTokens() {
+      const summaryEl = document.getElementById('tokensSummaryBody');
+      const sessionsEl = document.getElementById('tokensSessionsBody');
+      const orphansEl = document.getElementById('tokensOrphansBody');
+      try {
+        const [summaryResp, sessionsResp, orphansResp] = await Promise.all([
+          apiFetch('/tokens/summary'),
+          apiFetch('/tokens/sessions?limit=10'),
+          apiFetch('/tokens/orphans?idleMs=' + (30 * 60 * 1000)),
+        ]);
+        const s = summaryResp.summary || {};
+        summaryEl.innerHTML = `
+          <div><div style="color:var(--text-dim)">Total tokens</div><div style="font-size:18px;font-weight:600">${fmtTokens(s.totalTokens)}</div></div>
+          <div><div style="color:var(--text-dim)">Input</div><div>${fmtTokens(s.totalInput)}</div></div>
+          <div><div style="color:var(--text-dim)">Output</div><div>${fmtTokens(s.totalOutput)}</div></div>
+          <div><div style="color:var(--text-dim)">Cache read</div><div>${fmtTokens(s.totalCacheRead)}</div></div>
+          <div><div style="color:var(--text-dim)">Cache create</div><div>${fmtTokens(s.totalCacheCreate)}</div></div>
+          <div><div style="color:var(--text-dim)">Events</div><div>${fmtTokens(s.eventCount)}</div></div>
+          <div><div style="color:var(--text-dim)">Sessions</div><div>${fmtTokens(s.sessionsActive)}</div></div>
+        `;
+
+        const sessions = sessionsResp.sessions || [];
+        if (sessions.length === 0) {
+          sessionsEl.innerHTML = '<div style="color:var(--text-dim)">No sessions in window.</div>';
+        } else {
+          sessionsEl.innerHTML = `
+            <table style="width:100%;border-collapse:collapse;font-size:13px">
+              <thead><tr style="text-align:left;color:var(--text-dim)">
+                <th style="padding:6px 8px">Session</th>
+                <th style="padding:6px 8px">Project</th>
+                <th style="padding:6px 8px;text-align:right">Tokens</th>
+                <th style="padding:6px 8px;text-align:right">Events</th>
+                <th style="padding:6px 8px">Last activity</th>
+              </tr></thead>
+              <tbody>
+                ${sessions.map(r => `
+                  <tr style="border-top:1px solid var(--border)">
+                    <td style="padding:6px 8px;font-family:monospace">${escapeHtml((r.sessionId || '').slice(0, 8))}</td>
+                    <td style="padding:6px 8px">${escapeHtml(r.projectPath || '—')}</td>
+                    <td style="padding:6px 8px;text-align:right">${fmtTokens(r.totalTokens)}</td>
+                    <td style="padding:6px 8px;text-align:right">${fmtTokens(r.eventCount)}</td>
+                    <td style="padding:6px 8px">${fmtRelTime(r.lastTs)}</td>
+                  </tr>
+                `).join('')}
+              </tbody>
+            </table>
+          `;
+        }
+
+        const orphans = orphansResp.orphans || [];
+        if (orphans.length === 0) {
+          orphansEl.innerHTML = '<div style="color:var(--text-dim)">No idle sessions.</div>';
+        } else {
+          orphansEl.innerHTML = orphans.map(o => `
+            <div style="padding:6px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-family:monospace;font-size:12px">
+              <span>${escapeHtml((o.sessionId || '').slice(0, 12))}</span>
+              <span style="color:var(--text-dim)">${escapeHtml(o.projectPath || '—')}</span>
+              <span>${fmtRelTime(o.lastTs)}</span>
+            </div>
+          `).join('');
+        }
+      } catch (err) {
+        const msg = `<div style="color:var(--red)">Error: ${escapeHtml(err.message || String(err))}</div>`;
+        summaryEl.innerHTML = msg;
+        sessionsEl.innerHTML = '';
+        orphansEl.innerHTML = '';
+      }
+    }
+
+    // ── Threadline → Telegram bridge settings ──────────────────
+    let tlBridgeSettings = null;
+    let tlBridgeWiring = false;
+
+    async function loadThreadlineBridgeConfig() {
+      const statusEl = document.getElementById('tlBridgeStatus');
+      const errEl = document.getElementById('tlBridgeError');
+      if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+      try {
+        const resp = await apiFetch('/threadline/telegram-bridge/config');
+        tlBridgeSettings = resp;
+        renderThreadlineBridgeConfig();
+        if (statusEl) statusEl.textContent = `Bridge is ${resp.enabled ? 'ENABLED' : 'OFF'} · auto-create ${resp.autoCreateTopics ? 'on' : 'off'} · mirror existing ${resp.mirrorExisting ? 'on' : 'off'}.`;
+      } catch (err) {
+        if (statusEl) statusEl.textContent = '';
+        if (errEl) { errEl.style.display = 'block'; errEl.textContent = `Could not load bridge config: ${err.message || String(err)}`; }
+      }
+    }
+
+    function renderThreadlineBridgeConfig() {
+      if (!tlBridgeSettings) return;
+      tlBridgeWiring = true;
+      try {
+        document.getElementById('tlBridgeEnabled').checked = !!tlBridgeSettings.enabled;
+        document.getElementById('tlBridgeAutoCreate').checked = !!tlBridgeSettings.autoCreateTopics;
+        document.getElementById('tlBridgeMirrorExisting').checked = !!tlBridgeSettings.mirrorExisting;
+        renderTlBridgeListEntries('allowList', 'tlBridgeAllowList', tlBridgeSettings.allowList || []);
+        renderTlBridgeListEntries('denyList', 'tlBridgeDenyList', tlBridgeSettings.denyList || []);
+      } finally {
+        tlBridgeWiring = false;
+      }
+    }
+
+    function renderTlBridgeListEntries(field, listElId, entries) {
+      const ul = document.getElementById(listElId);
+      if (!ul) return;
+      if (entries.length === 0) {
+        ul.innerHTML = '<li style="color:var(--text-dim);font-size:12px;font-style:italic">(empty)</li>';
+        return;
+      }
+      ul.innerHTML = entries.map(e => `
+        <li style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border:1px solid var(--border);border-radius:4px;font-family:monospace;font-size:12px">
+          <span>${escapeHtml(e)}</span>
+          <button onclick="tlBridgeRemoveListEntry('${field}', ${JSON.stringify(e).replace(/'/g, "\\'")})" style="padding:2px 8px;font-size:11px">remove</button>
+        </li>
+      `).join('');
+    }
+
+    async function tlBridgePatchConfig(patch) {
+      const errEl = document.getElementById('tlBridgeError');
+      if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
+      try {
+        const resp = await apiFetch('/threadline/telegram-bridge/config', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(patch),
+        });
+        tlBridgeSettings = resp;
+        renderThreadlineBridgeConfig();
+        const statusEl = document.getElementById('tlBridgeStatus');
+        if (statusEl) statusEl.textContent = `Saved · bridge is ${resp.enabled ? 'ENABLED' : 'OFF'}.`;
+      } catch (err) {
+        if (errEl) { errEl.style.display = 'block'; errEl.textContent = `Update failed: ${err.message || String(err)}`; }
+        // Reload to roll back the optimistic UI
+        loadThreadlineBridgeConfig();
+      }
+    }
+
+    function tlBridgeAddListEntry(field, inputId) {
+      const input = document.getElementById(inputId);
+      const val = (input?.value || '').trim();
+      if (!val) return;
+      const current = (tlBridgeSettings?.[field] || []).slice();
+      if (!current.includes(val)) current.push(val);
+      tlBridgePatchConfig({ [field]: current });
+      if (input) input.value = '';
+    }
+
+    function tlBridgeRemoveListEntry(field, entry) {
+      const current = (tlBridgeSettings?.[field] || []).filter(x => x !== entry);
+      tlBridgePatchConfig({ [field]: current });
+    }
+
+    // Wire up toggle change-handlers once the panel exists
+    document.addEventListener('DOMContentLoaded', () => {
+      const wire = (id, field) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.addEventListener('change', () => {
+          if (tlBridgeWiring) return;
+          tlBridgePatchConfig({ [field]: el.checked });
+        });
+      };
+      wire('tlBridgeEnabled', 'enabled');
+      wire('tlBridgeAutoCreate', 'autoCreateTopics');
+      wire('tlBridgeMirrorExisting', 'mirrorExisting');
+    });
+
+    // ── Threadline observability — threads list + conversation view ──
+    let tlObsActiveThreadId = null;
+    let tlObsLoadThreadsTimer = null;
+    let tlObsSearchTimer = null;
+
+    function tlObsLoadThreadsDebounced() {
+      if (tlObsLoadThreadsTimer) clearTimeout(tlObsLoadThreadsTimer);
+      tlObsLoadThreadsTimer = setTimeout(tlObsLoadThreads, 300);
+    }
+
+    function tlObsSearchDebounced(value) {
+      if (tlObsSearchTimer) clearTimeout(tlObsSearchTimer);
+      tlObsSearchTimer = setTimeout(() => tlObsRunSearch(value), 300);
+    }
+
+    async function tlObsLoadThreads() {
+      const list = document.getElementById('tlObsThreadsList');
+      if (!list) return;
+      const remoteAgent = document.getElementById('tlObsRemoteFilter')?.value?.trim() || '';
+      const hasTopic = document.getElementById('tlObsHasTopicFilter')?.value || '';
+      const params = new URLSearchParams();
+      if (remoteAgent) params.set('remoteAgent', remoteAgent);
+      if (hasTopic) params.set('hasTopic', hasTopic);
+      try {
+        const resp = await apiFetch('/threadline/observability/threads?' + params.toString());
+        const threads = resp.threads || [];
+        if (threads.length === 0) {
+          list.innerHTML = '<li style="padding:16px;color:var(--text-dim);font-size:12px;font-style:italic">No threads yet.</li>';
+          return;
+        }
+        list.innerHTML = threads.map(t => tlObsRenderThreadRow(t)).join('');
+      } catch (err) {
+        list.innerHTML = `<li style="padding:16px;color:var(--red)">Error: ${escapeHtml(err.message || String(err))}</li>`;
+      }
+    }
+
+    function tlObsRenderThreadRow(t) {
+      const lastSeen = t.lastSeen ? fmtRelTime(t.lastSeen) : '—';
+      const bridgeBadge = t.bridge
+        ? '<span style="display:inline-block;padding:1px 6px;border-radius:8px;background:#3b82f6;color:#fff;font-size:10px;margin-left:6px">TG</span>'
+        : '';
+      const spawnBadge = t.hasSpawnedSession
+        ? '<span style="display:inline-block;padding:1px 6px;border-radius:8px;background:#16a34a;color:#fff;font-size:10px;margin-left:4px">S</span>'
+        : '';
+      const isActive = tlObsActiveThreadId === t.threadId ? 'background:rgba(59,130,246,0.08);' : '';
+      return `
+        <li onclick="tlObsLoadThread('${t.threadId.replace(/'/g, "\\'")}')"
+            style="padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;${isActive}">
+          <div style="display:flex;justify-content:space-between;align-items:center">
+            <div style="font-weight:600;font-size:13px">${escapeHtml(t.remoteAgentName)}${bridgeBadge}${spawnBadge}</div>
+            <div style="font-size:11px;color:var(--text-dim)">${escapeHtml(lastSeen)}</div>
+          </div>
+          <div style="font-size:11px;color:var(--text-dim);margin-top:2px;font-family:monospace">
+            ${escapeHtml(t.threadId.slice(0, 16))}…
+          </div>
+          <div style="font-size:11px;color:var(--text-dim);margin-top:2px">
+            ${t.messageCount} msgs · ${t.inboundCount} in / ${t.outboundCount} out
+            ${typeof t.avgResponseLatencyMs === 'number' ? ' · ~' + Math.round(t.avgResponseLatencyMs / 1000) + 's reply' : ''}
+          </div>
+        </li>
+      `;
+    }
+
+    async function tlObsLoadThread(threadId) {
+      tlObsActiveThreadId = threadId;
+      tlObsLoadThreads(); // Re-render threads list to highlight active row
+      const conv = document.getElementById('tlObsConversation');
+      if (!conv) return;
+      conv.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Loading…</div>';
+      try {
+        const detail = await apiFetch(`/threadline/observability/threads/${encodeURIComponent(threadId)}`);
+        conv.innerHTML = tlObsRenderConversation(detail);
+      } catch (err) {
+        conv.innerHTML = `<div style="color:var(--red);font-size:12px">Error: ${escapeHtml(err.message || String(err))}</div>`;
+      }
+    }
+
+    function tlObsRenderConversation(detail) {
+      const header = `
+        <div style="border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:10px">
+          <div style="font-weight:600;font-size:14px">${escapeHtml(detail.remoteAgentName)}</div>
+          <div style="font-family:monospace;font-size:11px;color:var(--text-dim)">${escapeHtml(detail.threadId)}</div>
+          <div style="display:flex;gap:14px;font-size:11px;color:var(--text-dim);margin-top:6px;flex-wrap:wrap">
+            <span>${detail.messageCount} messages</span>
+            <span>${detail.inboundCount} in / ${detail.outboundCount} out</span>
+            <span>first: ${escapeHtml(fmtRelTime(detail.firstSeen))}</span>
+            <span>last: ${escapeHtml(fmtRelTime(detail.lastSeen))}</span>
+            ${typeof detail.avgResponseLatencyMs === 'number' ? '<span>avg reply: ' + Math.round(detail.avgResponseLatencyMs/1000) + 's</span>' : ''}
+            ${detail.bridge ? '<span>📨 topic ' + detail.bridge.topicId + '</span>' : '<span style="color:var(--text-dim);font-style:italic">no Telegram topic</span>'}
+            ${detail.hasSpawnedSession ? '<span>🧵 spawn-session</span>' : ''}
+          </div>
+        </div>
+      `;
+      const messages = (detail.messages || []).map(m => tlObsRenderMessage(m)).join('');
+      return header + messages;
+    }
+
+    function tlObsRenderMessage(m) {
+      const isIn = m.direction === 'in';
+      const bg = isIn ? 'rgba(99,102,241,0.10)' : 'rgba(34,197,94,0.10)';
+      const border = isIn ? '#6366f1' : '#22c55e';
+      const arrow = isIn ? '←' : '→';
+      const meta = `${escapeHtml(m.timestamp)} · ${escapeHtml(m.id.slice(0, 8))}${m.outcome ? ' · ' + escapeHtml(m.outcome) : ''} · trust:${escapeHtml(m.trustLevel)}`;
+      return `
+        <div style="border-left:3px solid ${border};background:${bg};padding:8px 10px;border-radius:4px">
+          <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px">
+            <div style="font-weight:600;font-size:12px">
+              ${arrow} ${escapeHtml(m.remoteAgentName)}
+            </div>
+            <div style="font-size:11px;color:var(--text-dim)">${escapeHtml(fmtRelTime(m.timestamp))}</div>
+          </div>
+          <div style="font-size:13px;white-space:pre-wrap;word-break:break-word;line-height:1.4">${escapeHtml(m.text)}</div>
+          <div style="font-family:monospace;font-size:10px;color:var(--text-dim);margin-top:4px">${meta}</div>
+        </div>
+      `;
+    }
+
+    async function tlObsRunSearch(query) {
+      const panel = document.getElementById('tlObsSearchResults');
+      if (!panel) return;
+      const q = (query || '').trim();
+      if (!q) { panel.style.display = 'none'; return; }
+      panel.style.display = 'block';
+      panel.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Searching…</div>';
+      try {
+        const resp = await apiFetch('/threadline/observability/search?q=' + encodeURIComponent(q) + '&limit=30');
+        const hits = resp.hits || [];
+        if (hits.length === 0) {
+          panel.innerHTML = '<div style="color:var(--text-dim);font-size:12px">No matches.</div>';
+          return;
+        }
+        panel.innerHTML = `<div style="font-size:12px;color:var(--text-dim);margin-bottom:8px">${hits.length} match${hits.length === 1 ? '' : 'es'} (click to open thread)</div>` +
+          hits.map(h => `
+            <div onclick="tlObsLoadThread('${h.message.threadId.replace(/'/g, "\\'")}')"
+                 style="padding:6px 8px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px">
+              <div style="display:flex;justify-content:space-between">
+                <span style="font-weight:600">${h.message.direction === 'in' ? '←' : '→'} ${escapeHtml(h.message.remoteAgentName)}</span>
+                <span style="font-size:11px;color:var(--text-dim)">${escapeHtml(fmtRelTime(h.message.timestamp))}</span>
+              </div>
+              <div style="margin-top:2px;line-height:1.4">${tlObsRenderSnippet(h.snippet)}</div>
+            </div>
+          `).join('');
+      } catch (err) {
+        panel.innerHTML = `<div style="color:var(--red);font-size:12px">Error: ${escapeHtml(err.message || String(err))}</div>`;
+      }
+    }
+
+    function tlObsRenderSnippet(s) {
+      // Server returns matches wrapped in «...» — render as <mark>
+      return escapeHtml(s).replace(/«/g, '<mark style="background:#fef08a;color:#000">').replace(/»/g, '</mark>');
+    }
+
     async function loadFileTree() {
       fileTreeLoaded = true;
       const list = document.getElementById('fileTreeList');

package/dist/cli.js

@@ -21,6 +21,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { Command } from 'commander';
 import { initProject } from './commands/init.js';
+import { SafeFsExecutor } from './core/SafeFsExecutor.js';
 // setup.ts is imported dynamically — it depends on @inquirer/prompts which requires Node 20.12+
 import { startServer, stopServer, restartServer } from './commands/server.js';
 import { showStatus } from './commands/status.js';
@@ -82,9 +83,8 @@ async function addTelegram(opts) {
         fs.renameSync(tmpPath, configPath);
     }
     catch (err) {
-        // safe-git-allow: incremental-migration
         try {
-            fs.unlinkSync(tmpPath);
+            SafeFsExecutor.safeUnlinkSync(tmpPath, { operation: 'src/cli.ts:93' });
         }
         catch { /* ignore */ }
         throw err;
@@ -135,9 +135,8 @@ async function addSentry(opts) {
         fs.renameSync(tmpPath, configPath);
     }
     catch (err) {
-        // safe-git-allow: incremental-migration
         try {
-            fs.unlinkSync(tmpPath);
+            SafeFsExecutor.safeUnlinkSync(tmpPath, { operation: 'src/cli.ts:148' });
         }
         catch { /* ignore */ }
         throw err;
@@ -196,9 +195,8 @@ async function addEmail(opts) {
         fs.renameSync(tmpPath, configPath);
     }
     catch (err) {
-        // safe-git-allow: incremental-migration
         try {
-            fs.unlinkSync(tmpPath);
+            SafeFsExecutor.safeUnlinkSync(tmpPath, { operation: 'src/cli.ts:211' });
         }
         catch { /* ignore */ }
         throw err;
@@ -240,9 +238,8 @@ async function addQuota(opts) {
         fs.renameSync(tmpPath, configPath);
     }
     catch (err) {
-        // safe-git-allow: incremental-migration
         try {
-            fs.unlinkSync(tmpPath);
+            SafeFsExecutor.safeUnlinkSync(tmpPath, { operation: 'src/cli.ts:257' });
         }
         catch { /* ignore */ }
         throw err;