@oimdb/mcp 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oimdb/mcp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "MCP server and CDP inspector for OIMDB — connects AI assistants to live browser state",
   "type": "module",
   "main": "./dist/index.cjs",

package/ui/app.css

@@ -13,6 +13,7 @@
   --accent:    #4fc3f7;
   --green:     #4caf50;
   --yellow:    #ffb74d;
+  --red:       #ef5350;
   --gray:      #616161;
   --tag-bg:    #2d3f4a;
   --tag-warn:  #4a2d2d;
@@ -58,9 +59,7 @@ html, body {
 
 #conn-label { font-size: 12px; color: var(--text-dim); }
 
-.toolbar-actions {
-  display: flex; align-items: center; gap: 10px; margin-left: auto;
-}
+.toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
 #last-updated { font-size: 11px; color: var(--text-dim); }
 
 #btn-refresh {
@@ -89,9 +88,7 @@ html, body {
   background: var(--bg-panel); border: 1px solid var(--border);
   border-radius: 8px; text-align: center;
 }
-.waiting-title {
-  font-size: 18px; font-weight: 600; color: var(--accent); margin-bottom: 14px;
-}
+.waiting-title { font-size: 18px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
 .waiting-card p { color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }
 .waiting-card code {
   font-family: var(--mono); background: var(--bg-input);
@@ -119,6 +116,20 @@ html, body {
 }
 .col:last-child { border-right: none; }
 
+/* Right column split into computeds + history */
+#col-right { flex-direction: column; }
+
+.col-section {
+  display: flex; flex-direction: column;
+  flex: 1; min-height: 0; overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+.col-section:last-child { border-bottom: none; }
+
+.col-section-history { flex: 0 0 220px; }
+
+.col-body-flex { flex: 1; min-height: 0; overflow-y: auto; }
+
 .col-header {
   display: flex; align-items: center; gap: 7px;
   height: 32px; padding: 0 14px; flex-shrink: 0;
@@ -160,7 +171,7 @@ html, body {
 .c-count { font-size: 11px; color: var(--text-dim); }
 
 .c-detail {
-  display: none; padding: 8px 14px 10px 32px;
+  display: none; padding: 8px 14px 0 32px;
   background: var(--bg); border-top: 1px solid var(--border);
   font-size: 11px; font-family: var(--mono);
 }
@@ -180,6 +191,56 @@ html, body {
 .tag-warn { background: var(--tag-warn); color: #ffaa80; }
 .tag-rel-arrow { color: var(--accent); margin: 0 3px; }
 
+/* ── Entity table ─────────────────────────────── */
+
+.entity-wrap {
+  margin: 8px 0 0 -18px;
+  border-top: 1px solid var(--border);
+  padding: 8px 0 10px 0;
+}
+
+.entity-table-wrap {
+  overflow-x: auto;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.entity-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+  font-family: var(--mono);
+}
+
+.entity-table th {
+  position: sticky; top: 0;
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  font-weight: 600;
+  text-align: left;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.entity-table td {
+  padding: 3px 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  color: var(--text);
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entity-table tbody tr:hover td { background: var(--bg-hover); }
+
+.entity-note {
+  padding: 4px 10px;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
 /* ── Computed rows ────────────────────────────── */
 
 .comp-row {
@@ -190,9 +251,7 @@ html, body {
 
 .comp-top { display: flex; align-items: center; gap: 8px; }
 
-.status-dot {
-  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
-}
+.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
 .status-dot.fresh   { background: var(--green); }
 .status-dot.stale   { background: var(--yellow); }
 .status-dot.pending { background: var(--gray); }
@@ -223,9 +282,31 @@ html, body {
 }
 .comp-deps-label { font-size: 11px; color: var(--text-dim); margin-right: 4px; }
 
+/* ── Flush history ────────────────────────────── */
+
+.flush-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
+  font-size: 11px; font-family: var(--mono);
+}
+.flush-row:hover { background: var(--bg-hover); }
+
+.flush-time { color: var(--text-dim); flex-shrink: 0; }
+
+.flush-tags { display: flex; flex-wrap: wrap; gap: 4px; }
+
+.flush-tag {
+  padding: 1px 6px; border-radius: 3px;
+  background: var(--bg-input); color: var(--text-dim);
+  font-size: 10px;
+}
+.flush-add      { background: #1a3a1c; color: #81c784; }
+.flush-del      { background: #3a1a1a; color: #ef9a9a; }
+.flush-no-change { color: var(--text-dim); background: none; }
+
 /* ── Scrollbar ────────────────────────────────── */
 
-::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: var(--bg); }
 ::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #555; }
@@ -234,5 +315,9 @@ html, body {
 
 .empty {
   padding: 20px 16px; color: var(--text-dim);
-  font-size: 12px; text-align: center;
+  font-size: 12px; text-align: center; line-height: 1.7;
+}
+.empty code {
+  font-family: var(--mono); background: var(--bg-input);
+  padding: 1px 5px; border-radius: 3px; color: var(--accent);
 }

package/ui/app.js

@@ -2,8 +2,8 @@
 
 // ── State ──────────────────────────────────────────────────────
 
-let autoTimer   = null;
-let expanded    = new Set();
+let autoTimer = null;
+let expanded  = new Set();
 
 // ── Elements ───────────────────────────────────────────────────
 
@@ -16,6 +16,7 @@ const badgeCollections = document.getElementById('badge-collections');
 const badgeComputeds   = document.getElementById('badge-computeds');
 const listCollections  = document.getElementById('list-collections');
 const listComputeds    = document.getElementById('list-computeds');
+const listHistory      = document.getElementById('list-history');
 const btnRefresh       = document.getElementById('btn-refresh');
 const chkAuto          = document.getElementById('chk-auto');
 
@@ -23,7 +24,8 @@ const chkAuto          = document.getElementById('chk-auto');
 
 async function poll() {
     try {
-        const res  = await fetch('/api/inspect');
+        const base = location.origin !== 'null' ? location.origin : '';
+        const res  = await fetch(base + '/api/inspect');
         const json = await res.json();
 
         if (!json.connected || !json.data) {
@@ -43,7 +45,7 @@ async function poll() {
 // ── Layout ──────────────────────────────────────────────────────
 
 function showWaiting() {
-    connDot.className   = 'conn-dot disconnected';
+    connDot.className     = 'conn-dot disconnected';
     connLabel.textContent = 'Waiting for browser…';
     screenWaiting.classList.remove('hidden');
     screenMain.classList.add('hidden');
@@ -56,7 +58,7 @@ function showMain() {
 
 function setConnected(tab) {
     connDot.className     = 'conn-dot connected';
-    connLabel.textContent = tab ? `${tab.title}` : 'Connected';
+    connLabel.textContent = tab ? tab.title : 'Connected';
 }
 
 // ── Render ──────────────────────────────────────────────────────
@@ -64,12 +66,14 @@ function setConnected(tab) {
 function render(state) {
     const collections = state.collections || {};
     const computeds   = state.computeds   || {};
+    const history     = state.history     || [];
 
     badgeCollections.textContent = Object.keys(collections).length;
     badgeComputeds.textContent   = Object.keys(computeds).length;
 
     renderCollections(collections);
     renderComputeds(computeds);
+    renderHistory(history);
 }
 
 // ── Collections ─────────────────────────────────────────────────
@@ -109,7 +113,11 @@ function buildCollRow(name, info) {
 
     const detail = document.createElement('div');
     detail.className = 'c-detail' + (isOpen ? ' open' : '');
-    detail.innerHTML = buildCollDetail(info);
+    detail.innerHTML = buildCollMeta(info);
+
+    // Entity table
+    const table = buildEntityTable(info);
+    if (table) detail.appendChild(table);
 
     summary.addEventListener('click', () => {
         const opening = detail.classList.toggle('open');
@@ -122,7 +130,7 @@ function buildCollRow(name, info) {
     return row;
 }
 
-function buildCollDetail(info) {
+function buildCollMeta(info) {
     const parts = [];
 
     if (info.sampleEntity && typeof info.sampleEntity === 'object') {
@@ -152,7 +160,79 @@ function buildCollDetail(info) {
         parts.push(drow('desc', `<span style="color:var(--text-dim)">${esc(info.description)}</span>`));
     }
 
-    return parts.join('') || '<div class="d-row"><span style="color:var(--text-dim);font-size:11px">No details</span></div>';
+    return parts.join('') || '';
+}
+
+// ── Entity table ────────────────────────────────────────────────
+
+const MAX_ENTITY_ROWS = 200;
+
+function buildEntityTable(info) {
+    const entities = info.entities;
+    if (!Array.isArray(entities) || entities.length === 0) return null;
+
+    const first = entities[0];
+    if (!first || typeof first !== 'object') return null;
+    const cols = Object.keys(first);
+    if (cols.length === 0) return null;
+
+    const shown = entities.slice(0, MAX_ENTITY_ROWS);
+
+    const wrap = document.createElement('div');
+    wrap.className = 'entity-wrap';
+
+    const tableWrap = document.createElement('div');
+    tableWrap.className = 'entity-table-wrap';
+
+    const table = document.createElement('table');
+    table.className = 'entity-table';
+
+    // Head
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    cols.forEach(col => {
+        const th = document.createElement('th');
+        th.textContent = col;
+        headRow.appendChild(th);
+    });
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement('tbody');
+    shown.forEach(entity => {
+        const tr = document.createElement('tr');
+        cols.forEach(col => {
+            const td = document.createElement('td');
+            const val = (entity)[col];
+            td.textContent = fmtCell(val);
+            td.title = JSON.stringify(val);
+            tr.appendChild(td);
+        });
+        tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+    tableWrap.appendChild(table);
+    wrap.appendChild(tableWrap);
+
+    if (entities.length > MAX_ENTITY_ROWS) {
+        const note = document.createElement('div');
+        note.className = 'entity-note';
+        note.textContent = `showing ${MAX_ENTITY_ROWS} of ${entities.length}`;
+        wrap.appendChild(note);
+    }
+
+    return wrap;
+}
+
+function fmtCell(v) {
+    if (v === null || v === undefined) return '—';
+    if (typeof v === 'object') {
+        const s = JSON.stringify(v);
+        return s.length > 40 ? s.slice(0, 40) + '…' : s;
+    }
+    const s = String(v);
+    return s.length > 60 ? s.slice(0, 60) + '…' : s;
 }
 
 function drow(label, content) {
@@ -240,6 +320,62 @@ function buildCompRow(name, info) {
     return row;
 }
 
+// ── Flush History ───────────────────────────────────────────────
+
+function renderHistory(history) {
+    if (!history.length) {
+        listHistory.innerHTML = '<div class="empty">No flushes recorded yet.<br>Call <code>registry.trackFlushes(...)</code> in debug.ts.</div>';
+        return;
+    }
+    listHistory.innerHTML = '';
+    history.forEach((record, i) => {
+        const prev = history[i + 1];
+        listHistory.appendChild(buildFlushRow(record, prev));
+    });
+}
+
+function buildFlushRow(record, prev) {
+    const row = document.createElement('div');
+    row.className = 'flush-row';
+
+    const time = document.createElement('span');
+    time.className = 'flush-time';
+    time.textContent = new Date(record.time).toLocaleTimeString('en', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        fractionalSecondDigits: 3,
+    });
+    row.appendChild(time);
+
+    const tags = document.createElement('span');
+    tags.className = 'flush-tags';
+
+    for (const [name, count] of Object.entries(record.counts)) {
+        const prevCount = prev ? (prev.counts[name] ?? 0) : 0;
+        const diff = count - prevCount;
+        const tag = document.createElement('span');
+        tag.className = 'flush-tag';
+
+        if (diff === 0 && i !== 0) continue; // skip unchanged (unless first flush)
+        const sign = diff > 0 ? '+' : '';
+        tag.textContent = diff !== 0 ? `${name} ${sign}${diff}` : `${name} ${count}`;
+        tag.className = 'flush-tag' + (diff > 0 ? ' flush-add' : diff < 0 ? ' flush-del' : '');
+        tags.appendChild(tag);
+    }
+
+    if (!tags.children.length) {
+        const tag = document.createElement('span');
+        tag.className = 'flush-tag flush-no-change';
+        tag.textContent = 'no changes';
+        tags.appendChild(tag);
+    }
+
+    row.appendChild(tags);
+    return row;
+}
+
 // ── Helpers ─────────────────────────────────────────────────────
 
 function esc(s) {
@@ -261,8 +397,8 @@ function fmt(v) {
 
 // ── Auto-refresh ─────────────────────────────────────────────────
 
-function startAuto()  { stopAuto(); autoTimer = setInterval(poll, 1000); }
-function stopAuto()   { if (autoTimer !== null) { clearInterval(autoTimer); autoTimer = null; } }
+function startAuto() { stopAuto(); autoTimer = setInterval(poll, 1000); }
+function stopAuto()  { if (autoTimer !== null) { clearInterval(autoTimer); autoTimer = null; } }
 
 // ── Boot ────────────────────────────────────────────────────────
 

package/ui/index.html

@@ -44,11 +44,17 @@
       <div id="list-collections" class="col-body"></div>
     </div>
     <div id="col-right" class="col">
-      <div class="col-header">
-        Computeds
-        <span class="badge" id="badge-computeds">0</span>
+      <div class="col-section">
+        <div class="col-header">
+          Computeds
+          <span class="badge" id="badge-computeds">0</span>
+        </div>
+        <div id="list-computeds" class="col-body col-body-flex"></div>
+      </div>
+      <div class="col-section col-section-history">
+        <div class="col-header">Flushes</div>
+        <div id="list-history" class="col-body col-body-flex"></div>
       </div>
-      <div id="list-computeds" class="col-body"></div>
     </div>
   </div>