npm - lensmcp - Versions diffs - 1.10.0 → 1.12.0 - Mend

lensmcp 1.10.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/bundled/dashboard.js +122 -41
package/package.json +1 -1
package/plugin/.claude-plugin/plugin.json +1 -1

package/bundled/dashboard.js CHANGED Viewed

@@ -20541,11 +20541,7 @@ var PAGE = `<!doctype html>
   .sum { margin-left: auto; font-size: 11px; color: #6f84a3; white-space: nowrap; }
   .val { margin: 8px 0 0; max-height: 200px; overflow: auto; font-size: 12px; color: #9fb3cd; white-space: pre-wrap; word-break: break-word; }
   /* ---- flow trace view ---- */
-  .flow-chips { display: flex; gap: 8px; flex-wrap: wrap; }
-  .chip { background: #131a25; border: 1px solid #233045; color: #aebfd6; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; }
-  .chip:hover { border-color: #3a5b85; }
-  .chip.active { background: #16263c; border-color: #3fb950; color: #d9e6f5; }
-  .chart-wrap { margin-top: 10px; background: #0d121b; border: 1px solid #1c2430; border-radius: 10px; overflow: hidden; display: flex; align-items: stretch; }
+  .chart-wrap { background: #0d121b; border: 1px solid #1c2430; border-radius: 10px; overflow: hidden; display: flex; align-items: stretch; }
   .chart-left { flex: 1 1 auto; min-width: 0; }
   .chart-meta { display: flex; gap: 14px; padding: 8px 12px 0; color: #8aa0bd; font-size: 12px; flex-wrap: wrap; }
   .chart-scroll { overflow: auto; max-height: 76vh; }
@@ -20573,6 +20569,18 @@ var PAGE = `<!doctype html>
   .edge { fill: none; stroke: #3a4d6b; stroke-width: 1.4; }
   .edge.cross { stroke: #5b9dd9; stroke-dasharray: 5 4; }
   .detail { padding: 10px 12px; border-top: 1px solid #1c2430; color: #9fb3cd; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; display: none; }
+  /* ---- flows view: scrollable list on the left, trace on the right ---- */
+  .flows-layout { display: flex; gap: 12px; align-items: flex-start; }
+  .flow-list-pane { width: 264px; flex: none; position: sticky; top: 64px; }
+  .flow-list-pane .group-title { margin: 4px 0 8px; }
+  .flow-list { max-height: calc(100vh - 150px); overflow-y: auto; border: 1px solid #1c2430; border-radius: 8px; background: #0a0f16; }
+  .flow-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #0f1620; border-left: 2px solid transparent; color: #aebfd6; padding: 7px 11px; cursor: pointer; font: inherit; }
+  .flow-item:hover { background: #0e1622; }
+  .flow-item.active { background: #16263c; border-left-color: #3fb950; }
+  .flow-item .fi-title { color: #dbe6f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .flow-item .fi-meta { color: #61708a; font-size: 11px; margin-top: 2px; }
+  .flow-main { flex: 1; min-width: 0; }
+  .flow-empty { padding: 28px 6px; }
   /* ---- navigation + cluster view ---- */
   .tabs { display: flex; gap: 2px; margin-left: 14px; }
   .tabs a { color: #8aa0bd; text-decoration: none; padding: 5px 12px; border-radius: 7px; border: 1px solid transparent; }
@@ -20596,14 +20604,21 @@ var PAGE = `<!doctype html>
   .logs-bar button { background: #131a25; border: 1px solid #233045; color: #aebfd6; border-radius: 7px; padding: 5px 12px; cursor: pointer; font: inherit; }
   .logs-bar button:hover { border-color: #3a5b85; }
   .logs-tail { color: #8aa0bd; font-size: 12px; display: flex; gap: 4px; align-items: center; }
+  .logs-trace { display: inline-flex; align-items: center; gap: 7px; background: #16263c; border: 1px solid #3fb95066; color: #9fe0b5; border-radius: 999px; padding: 4px 11px; cursor: pointer; font: 11px ui-monospace, Menlo, monospace; white-space: nowrap; }
+  .logs-trace:hover { border-color: #3fb950; }
+  .logs-trace b { color: #d9e6f5; font-weight: 600; }
   .logs-list { height: calc(100vh - 150px); overflow-y: auto; border: 1px solid #1c2430; border-radius: 8px; background: #0a0f16; font: 11.5px/1.55 ui-monospace, Menlo, monospace; }
   .log-row { display: flex; gap: 10px; padding: 2px 10px; border-bottom: 1px solid #0f1620; white-space: nowrap; }
   .log-row:hover { background: #0e1622; }
   .log-row.jump { cursor: pointer; }
   .log-row .l-time { color: #5f7593; flex: 0 0 92px; }
   .log-row .l-src { color: #7fa3cf; flex: 0 0 104px; overflow: hidden; text-overflow: ellipsis; }
+  .log-row .l-cat { color: #6f84a3; flex: 0 0 66px; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; align-self: center; }
   .log-row .l-sev { flex: 0 0 56px; text-transform: uppercase; font-size: 10px; align-self: center; }
   .log-row .l-msg { flex: 1; overflow: hidden; text-overflow: ellipsis; color: #c6d4e6; }
+  .log-row .l-count { flex: none; align-self: center; color: #d29922; background: rgba(210,153,34,.12); border: 1px solid #d2992233; border-radius: 999px; padding: 0 7px; font-size: 10px; }
+  .log-row .l-flow { flex: none; align-self: center; color: #79b8ff; cursor: pointer; font-size: 10.5px; opacity: .75; }
+  .log-row .l-flow:hover { opacity: 1; text-decoration: underline; }
   .log-row.sev-debug .l-sev { color: #5f7593; }
   .log-row.sev-info .l-sev { color: #4f9d6b; }
   .log-row.sev-warning { background: rgba(217,162,60,.07); } .log-row.sev-warning .l-sev { color: #d9a23c; }
@@ -20736,26 +20751,31 @@ var PAGE = `<!doctype html>
 </header>
 <main>
   <section class="view" id="view-flows">
-    <section class="group">
-      <h2 class="group-title">Flows \u2014 pick one to see its trace</h2>
-      <div class="flow-chips" id="flow-chips"><span class="muted">No flows yet \u2014 interact with the app under agent-dev.</span></div>
-      <div class="chart-wrap" id="chart-wrap" style="display:none">
-        <div class="chart-left">
-          <div class="chart-meta" id="chart-meta"></div>
-          <div id="flow-root" style="height:76vh;display:none"></div>
-          <div class="chart-scroll" id="chart-scroll"></div>
-          <div class="detail" id="detail"></div>
-        </div>
-        <aside class="step-panel" id="step-panel">
-          <div class="step-nav">
-            <button id="step-prev" title="previous step (\u2190)">\u25C0</button>
-            <button id="step-next" title="next step (\u2192)">\u25B6</button>
-            <span class="step-count" id="step-count"></span>
+    <div class="flows-layout">
+      <aside class="flow-list-pane">
+        <h2 class="group-title">Flows \xB7 latest first</h2>
+        <div class="flow-list" id="flow-list"><span class="muted">No flows yet \u2014 interact with the app under agent-dev.</span></div>
+      </aside>
+      <div class="flow-main">
+        <div class="flow-empty muted" id="flow-empty">Pick a flow on the left to see its trace.</div>
+        <div class="chart-wrap" id="chart-wrap" style="display:none">
+          <div class="chart-left">
+            <div class="chart-meta" id="chart-meta"></div>
+            <div id="flow-root" style="height:76vh;display:none"></div>
+            <div class="chart-scroll" id="chart-scroll"></div>
+            <div class="detail" id="detail"></div>
           </div>
-          <div id="step-body"></div>
-        </aside>
+          <aside class="step-panel" id="step-panel">
+            <div class="step-nav">
+              <button id="step-prev" title="previous step (\u2190)">\u25C0</button>
+              <button id="step-next" title="next step (\u2192)">\u25B6</button>
+              <span class="step-count" id="step-count"></span>
+            </div>
+            <div id="step-body"></div>
+          </aside>
+        </div>
       </div>
-    </section>
+    </div>
   </section>
   <section class="view" id="view-cluster" style="display:none">
     <div id="cluster-root" class="cluster-root"></div>
@@ -20763,7 +20783,9 @@ var PAGE = `<!doctype html>
   <section class="view" id="view-logs" style="display:none">
     <div class="logs-bar">
       <select id="logs-source"><option value="">all services</option></select>
-      <input id="logs-filter" type="text" placeholder="filter \u2014 text, or /regex/i \u2026" autocomplete="off" spellcheck="false" />
+      <input id="logs-filter" type="text" placeholder="filter \u2014 text, trace id, or /regex/i \u2026" autocomplete="off" spellcheck="false" />
+      <span id="logs-trace" class="logs-trace" title="" style="display:none"></span>
+      <label class="logs-tail" title="hide repeated visual-frame capture ticks"><input type="checkbox" id="logs-noise-cb" checked /> hide frames</label>
       <label class="logs-tail"><input type="checkbox" id="logs-tail-cb" checked /> tail</label>
       <button id="logs-clear" type="button">clear</button>
       <span id="logs-count" class="muted"></span>
@@ -20821,6 +20843,8 @@ var PAGE = `<!doctype html>
     var scroll = document.getElementById('chart-scroll');
     var meta = document.getElementById('chart-meta');
     var detailBox = document.getElementById('detail');
+    var emptyBox = document.getElementById('flow-empty');
+    if (emptyBox) emptyBox.style.display = 'none'; // a flow is selected \u2014 drop the placeholder
     wrap.style.display = 'flex'; // the wrap is a flex row: chart + step inspector panel
     var evs = detail.events || [];
     // identical flow \u2192 keep the DOM (and any open detail box) untouched
@@ -21079,24 +21103,36 @@ var PAGE = `<!doctype html>
       .catch(function () { /* next poll retries */ });
   }
+  function relTime(ms) {
+    var s = Math.max(0, Math.round((Date.now() - ms) / 1000));
+    if (s < 60) return s + 's ago';
+    var m = Math.round(s / 60); if (m < 60) return m + 'm ago';
+    var h = Math.round(m / 60); if (h < 24) return h + 'h ago';
+    return Math.round(h / 24) + 'd ago';
+  }
   var lastChipsSig = '';
-  function renderFlowChips(snap) {
-    var holder = document.getElementById('flow-chips');
+  // Vertical, scrollable, newest-first list on the left of the Flows view.
+  // flow://recent is already most-recent-first (index 0 = newest), so index order = "latest up".
+  function renderFlowList(snap) {
+    var holder = document.getElementById('flow-list');
     var flowsRes = snap.resources['flow://recent'];
     var flows = (flowsRes && flowsRes.flows) || [];
     if (flows.length === 0) return;
     // Stable DOM: only rebuild when the flow list (or selection) actually changed,
-    // so chips keep identity across polls (clickable mid-poll, stable for a11y).
+    // so rows keep identity across polls (clickable mid-poll, stable for a11y).
     var sig = flows.map(function (f) { return f.flowId + ':' + f.eventCount; }).join('|') + '|' + selectedFlow;
     if (sig === lastChipsSig) return;
     lastChipsSig = sig;
     var frag = document.createDocumentFragment();
-    flows.slice(0, 12).forEach(function (f) {
-      var label = (f.originNodeId ? f.originNodeId.split('/').pop() : (f.originType || f.flowId)) + ' (' + f.eventCount + ')';
-      var chip = el('button', 'chip' + (selectedFlow === f.flowId ? ' active' : ''), label);
-      chip.title = f.flowId;
-      chip.addEventListener('click', function () { selectFlow(f.flowId); });
-      frag.appendChild(chip);
+    flows.forEach(function (f) {
+      var name = f.originNodeId ? f.originNodeId.split('/').pop() : (f.headline || f.originType || f.flowId);
+      var item = el('button', 'flow-item' + (selectedFlow === f.flowId ? ' active' : ''));
+      item.title = f.flowId;
+      item.appendChild(el('div', 'fi-title', name));
+      item.appendChild(el('div', 'fi-meta', f.eventCount + ' event' + (f.eventCount === 1 ? '' : 's') +
+        (f.lastSeenAt ? ' \xB7 ' + relTime(f.lastSeenAt) : '')));
+      item.addEventListener('click', function () { selectFlow(f.flowId); });
+      frag.appendChild(item);
     });
     holder.replaceChildren(frag);
   }
@@ -21143,23 +21179,57 @@ var PAGE = `<!doctype html>
   var logSeqSeen = 0;
   var logSrcSeen = {};
   var logRe = null, logText = '';
-  function logHay(r) { return r.source + ' ' + r.severity + ' ' + r.title + ' ' + (r.message || ''); }
+  var traceFilter = '';        // when set, show only rows on this flow/trace id
+  // flowId (the trace) is part of the haystack so text/regex search can target a trace.
+  function logHay(r) { return r.source + ' ' + r.category + ' ' + r.severity + ' ' + r.title + ' ' + (r.message || '') + ' ' + (r.flowId || ''); }
   function logMatches(r) {
+    if (traceFilter && r.flowId !== traceFilter) return false;
+    // "hide frames": mute the high-frequency visual-frame capture ticks (the noise).
+    // The events still flow to the visual lens \u2014 we only drop them from THIS view.
+    var noiseCb = document.getElementById('logs-noise-cb');
+    if (noiseCb && noiseCb.checked && r.title === 'visual-frame') return false;
     var srcSel = document.getElementById('logs-source').value;
     if (srcSel && r.source !== srcSel) return false;
     if (logRe) return logRe.test(logHay(r));
     if (logText) return logHay(r).toLowerCase().indexOf(logText) >= 0;
     return true;
   }
+  function setTraceFilter(id) {
+    traceFilter = id;
+    var p = document.getElementById('logs-trace');
+    p.style.display = 'inline-flex';
+    p.replaceChildren(document.createTextNode('trace '), el('b', null, id.slice(-8)), document.createTextNode(' \u2715'));
+    p.title = 'showing only trace ' + id + ' \u2014 click to clear';
+    renderLogs();
+  }
+  function clearTraceFilter() {
+    traceFilter = '';
+    document.getElementById('logs-trace').style.display = 'none';
+    renderLogs();
+  }
   function p2(n, w) { return String(n).padStart(w || 2, '0'); }
   function fmtLogTime(ms) { var d = new Date(ms); return p2(d.getHours()) + ':' + p2(d.getMinutes()) + ':' + p2(d.getSeconds()) + '.' + p2(d.getMilliseconds(), 3); }
-  function logRowEl(r) {
+  // Identity for collapsing a run of repeated lines (service \xB7 category \xB7 severity \xB7 title).
+  // The message/frame-id is intentionally excluded so a burst of visual-frame ticks (or any
+  // repeated log) folds into ONE row with a \xD7N repeat badge.
+  function logKey(r) { return r.source + '|' + r.category + '|' + r.severity + '|' + r.title; }
+  function logRowEl(r, count) {
     var row = el('div', 'log-row sev-' + r.severity);
-    if (r.flowId) { row.className += ' jump'; row.title = 'open flow ' + r.flowId; row.addEventListener('click', function () { selectedFlow = r.flowId; navTo('flows'); }); }
     row.appendChild(el('span', 'l-time', fmtLogTime(r.at)));
-    row.appendChild(el('span', 'l-src', r.source));
+    row.appendChild(el('span', 'l-src', r.source));     // WHICH service emitted it (raw.project, else source)
+    row.appendChild(el('span', 'l-cat', r.category));   // what KIND of log (visual / network / cluster / \u2026)
     row.appendChild(el('span', 'l-sev', r.severity));
     row.appendChild(el('span', 'l-msg', r.title + (r.message ? ' \u2014 ' + r.message : '')));
+    if (count && count > 1) { var c = el('span', 'l-count', '\xD7' + count); c.title = count + ' repeated lines'; row.appendChild(c); }
+    if (r.flowId) {
+      var tr = el('span', 'l-flow', '\u26D3 ' + r.flowId.slice(-6));
+      tr.title = 'filter logs to trace ' + r.flowId;
+      tr.addEventListener('click', function (e) { e.stopPropagation(); setTraceFilter(r.flowId); });
+      row.appendChild(tr);
+      row.className += ' jump';
+      row.title = 'open flow ' + r.flowId;
+      row.addEventListener('click', function () { selectedFlow = r.flowId; navTo('flows'); });
+    }
     return row;
   }
   function renderLogs() {
@@ -21168,11 +21238,20 @@ var PAGE = `<!doctype html>
     var stick = document.getElementById('logs-tail-cb').checked && (list.scrollHeight - list.scrollTop - list.clientHeight < 60);
     var matched = [];
     for (var i = 0; i < logRows.length; i++) if (logMatches(logRows[i])) matched.push(logRows[i]);
-    var shown = matched.slice(-1200); // cap the DOM; newest are kept
+    // collapse consecutive identical lines into one group, carrying the latest row + a repeat count
+    var groups = [];
+    for (var k = 0; k < matched.length; k++) {
+      var r = matched[k];
+      var last = groups.length ? groups[groups.length - 1] : null;
+      if (last && logKey(last.row) === logKey(r)) { last.count++; last.row = r; }
+      else groups.push({ row: r, count: 1 });
+    }
+    var shown = groups.slice(-1200); // cap the DOM; newest are kept
     var frag = document.createDocumentFragment();
-    for (var j = 0; j < shown.length; j++) frag.appendChild(logRowEl(shown[j]));
+    for (var j = 0; j < shown.length; j++) frag.appendChild(logRowEl(shown[j].row, shown[j].count));
     list.replaceChildren(frag);
-    document.getElementById('logs-count').textContent = matched.length + ' shown / ' + logRows.length + ' lines';
+    document.getElementById('logs-count').textContent =
+      groups.length + ' row' + (groups.length === 1 ? '' : 's') + ' \xB7 ' + matched.length + ' lines / ' + logRows.length + ' total';
     if (stick) list.scrollTop = list.scrollHeight;
   }
   function refreshLogSources(sources) {
@@ -21209,6 +21288,8 @@ var PAGE = `<!doctype html>
       renderLogs();
     });
     document.getElementById('logs-source').addEventListener('change', renderLogs);
+    document.getElementById('logs-noise-cb').addEventListener('change', renderLogs);
+    document.getElementById('logs-trace').addEventListener('click', clearTraceFilter);
     document.getElementById('logs-clear').addEventListener('click', function () { logRows = []; renderLogs(); });
   })();
@@ -21255,7 +21336,7 @@ var PAGE = `<!doctype html>
     }
     fetch(U('/api/snapshot')).then(function (r) { return r.json(); })
       .then(function (snap) {
-        renderFlowChips(snap);
+        renderFlowList(snap);
         if (v === 'resources') renderPanels(snap);
         setStatus(true, snap);
         if (v === 'flows' && selectedFlow) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "lensmcp",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/plugin/.claude-plugin/plugin.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "lensmcp",
   "displayName": "LensMCP",
   "description": "The observability lens for coding agents. One command brings up the dev cluster gateway (every project.json `cluster` decl → its host on :443), the per-project lens dashboard at https://lensmcp.local/<project>/, and the MCP server your agent connects to — scoped automatically to whatever project you opened Claude Code in.",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "author": {
     "name": "David Antoon",
     "email": "davidmantoon@gmail.com"