@oimdb/mcp 1.0.2 → 1.1.0

package/README.md

@@ -108,6 +108,49 @@ Call oimdb_inspect to see what's in the store.
 | `oimdb_collection` | Details of one collection by name |
 | `oimdb_computed` | Status + deps of one computed by name |
 
+## Offline / static mode (no browser)
+
+By default the tools read a **live browser tab**. You can instead point the
+server at an **in-process model** so it answers offline — ideal for "what's the
+data model?" questions without running the app.
+
+**CLI — a model module.** Set `OIMDB_MODEL_MODULE` to a module that builds the
+model in Node and exports a `registry` (or a default export, or a zero-arg
+factory returning one):
+
+```ts
+// oimdb-model.js  (built JS, or run the server under a TS loader)
+import { OIMEventQueue, OIMReactiveCollection } from '@oimdb/core';
+import { OIMDevRegistry } from '@oimdb/devtools';
+
+const queue = new OIMEventQueue();
+const users = new OIMReactiveCollection(queue, { selectPk: u => u.id });
+
+export const registry = new OIMDevRegistry();
+registry.collection('users', users, { indexes: { /* ... */ } });
+```
+
+```bash
+OIMDB_MODEL_MODULE=./oimdb-model.js npx @oimdb/mcp
+```
+
+No WebSocket port is opened in this mode — no browser required.
+
+**Embedded — inject a registry.** When running the server from your own Node
+process, pass the registry directly:
+
+```ts
+import { createOIMDevMcpServer } from '@oimdb/mcp';
+import { registry } from './oimdb-model';
+
+await createOIMDevMcpServer({ registry }).start();
+```
+
+> **Fields offline:** structure (collections, indexes, relations) is available
+> as soon as the model is constructed. Entity **field names** appear only when
+> the model holds at least one sample entity (TypeScript types are erased at
+> runtime) — seed a representative row in the model module if you want them.
+
 ## CDP Inspector (no browser-side code needed)
 
 Launch Chrome with `--remote-debugging-port=9222`, then:

package/bin/server.cjs

@@ -2,7 +2,9 @@
 const { OIMDevMcpServer } = require('../dist/index.cjs');
 
 const wsPort = process.env.OIMDB_WS_PORT ? Number(process.env.OIMDB_WS_PORT) : 7432;
-const server = new OIMDevMcpServer({ wsPort });
+// Offline/static mode: point at a module that builds the model in-process.
+const modelModulePath = process.env.OIMDB_MODEL_MODULE || undefined;
+const server = new OIMDevMcpServer({ wsPort, modelModulePath });
 server.start().catch((err) => {
     process.stderr.write('[OIMDB MCP] Fatal: ' + err.message + '\n');
     process.exit(1);

package/dist/index.cjs

@@ -31,36 +31,86 @@ module.exports = __toCommonJS(index_exports);
 var import_mcp = require("@modelcontextprotocol/sdk/server/mcp.js");
 var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
 var import_ws = require("ws");
+var import_node_url = require("url");
+var import_node_path = require("path");
 var import_zod = require("zod");
+async function loadRegistryFromModule(path) {
+  const url = (0, import_node_url.pathToFileURL)((0, import_node_path.resolve)(path)).href;
+  const mod = await import(url);
+  let candidate = mod.registry ?? mod.default ?? mod;
+  if (typeof candidate === "function") {
+    candidate = await candidate();
+  }
+  if (!candidate || typeof candidate.inspect !== "function" || typeof candidate.dumpString !== "function") {
+    throw new Error(
+      `[OIMDB MCP] Module "${path}" must export a registry exposing inspect() and dumpString() (as a "registry" or default export, or a zero-arg factory returning one).`
+    );
+  }
+  return candidate;
+}
 var OIMDevMcpServer = class {
   constructor(options = {}) {
     this.wss = null;
     this.latestBrowser = null;
     this.pending = /* @__PURE__ */ new Map();
+    this.modelModuleLoaded = false;
     this.wsPort = options.wsPort ?? 7432;
-    this.mcpServer = new import_mcp.McpServer({ name: "oimdb", version: "1.0.0" });
+    this.inProcessRegistry = options.registry ?? null;
+    this.modelModulePath = options.modelModulePath;
+    this.mcpServer = new import_mcp.McpServer(
+      { name: "oimdb", version: "1.0.0" },
+      {
+        instructions: "Before using these tools, read the OIMDB API reference so you know how to write correct code: node_modules/@oimdb/core/llms.txt. Then use oimdb_inspect to see the data model (collections, indexes, computeds). The source is either a live browser tab (WebSocket bridge) or an in-process model (when a registry / model module is provided) for offline/static introspection."
+      }
+    );
     this.registerTools();
   }
+  /**
+   * Resolves the in-process registry, loading the model module on first use.
+   * Returns null when no in-process source is configured (browser-bridge mode).
+   */
+  async getInProcessRegistry() {
+    if (this.inProcessRegistry) return this.inProcessRegistry;
+    if (this.modelModulePath && !this.modelModuleLoaded) {
+      this.modelModuleLoaded = true;
+      this.inProcessRegistry = await loadRegistryFromModule(
+        this.modelModulePath
+      );
+    }
+    return this.inProcessRegistry;
+  }
+  /** Reads the inspect snapshot from the in-process model or the browser. */
+  async readInspect() {
+    const registry = await this.getInProcessRegistry();
+    if (registry) return registry.inspect();
+    return this.queryBrowser("inspect");
+  }
+  /** Reads the human-readable dump from the in-process model or the browser. */
+  async readDump() {
+    const registry = await this.getInProcessRegistry();
+    if (registry) return registry.dumpString();
+    return await this.queryBrowser("dump");
+  }
   registerTools() {
     const server = this.mcpServer;
     const nameSchema = { name: import_zod.z.string().describe("Registered name") };
     server.registerTool("oimdb_inspect", {
-      description: "Get full state of all registered OIMDB collections and computeds from the connected browser tab. Returns structured JSON with entity counts, field names, index keys, relations, and computed statuses."
+      description: "Get full state of all registered OIMDB collections and computeds. Returns structured JSON with entity counts, field names, index keys, relations, and computed statuses. Source is the connected browser tab, or an in-process model when one is configured (offline/static \u2014 field names appear only if the model holds sample entities)."
     }, async () => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] };
     });
     server.registerTool("oimdb_dump", {
-      description: "Get a human-readable text summary of OIMDB state. Same output as registry.dump() in the browser."
+      description: "Get a human-readable text summary of OIMDB state. Same output as registry.dump(). Reads the connected browser tab or an in-process model when configured."
     }, async () => {
-      const text = await this.queryBrowser("dump");
+      const text = await this.readDump();
       return { content: [{ type: "text", text }] };
     });
     server.registerTool("oimdb_collection", {
       description: "Get details of a specific registered collection: entity count, field names, index keys, and relations.",
       inputSchema: nameSchema
     }, async ({ name }) => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       const info = data.collections[name];
       if (!info) {
         const available = Object.keys(data.collections).join(", ") || "(none registered)";
@@ -72,7 +122,7 @@ var OIMDevMcpServer = class {
       description: "Get status and resolved dependency names of a specific registered computed value. Shows fresh/stale/pending status, current value, and which registered sources it depends on.",
       inputSchema: nameSchema
     }, async ({ name }) => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       const info = data.computeds[name];
       if (!info) {
         const available = Object.keys(data.computeds).join(", ") || "(none registered)";
@@ -86,11 +136,14 @@ var OIMDevMcpServer = class {
       throw new Error(
         `No browser tab connected to the OIMDB MCP bridge.
 
-Add to your debug entry point:
+Live mode \u2014 add to your debug entry point:
   import { registry } from '@oimdb/devtools';
   registry.connect(); // connects to ws://localhost:${this.wsPort}
+Then reload the page.
 
-Then reload the page.`
+Offline mode \u2014 point the server at a model module instead:
+  OIMDB_MODEL_MODULE=./path/to/model.js npx @oimdb/mcp
+(the module exports a "registry" with inspect()/dumpString()).`
       );
     }
     return new Promise((resolve, reject) => {
@@ -150,7 +203,14 @@ Set a different port: OIMDB_WS_PORT=7433 npx @oimdb/mcp
 `);
   }
   async start() {
-    this.setupWebSocketServer();
+    const registry = await this.getInProcessRegistry();
+    if (registry) {
+      process.stderr.write(
+        "[OIMDB MCP] In-process model loaded \u2014 serving offline (no browser bridge).\n"
+      );
+    } else {
+      this.setupWebSocketServer();
+    }
     const transport = new import_stdio.StdioServerTransport();
     await this.mcpServer.connect(transport);
   }

package/dist/index.d.cts

@@ -1,6 +1,29 @@
+/**
+ * The readable shape the MCP tools need from a registry — `OIMDevRegistry` from
+ * `@oimdb/devtools` already satisfies it. Declared structurally (following the
+ * existing `IOIMDev*Like` convention) so `@oimdb/mcp` need not depend on
+ * `@oimdb/devtools`; it is not a separate registry implementation.
+ */
+interface IOIMDevRegistryLike {
+    inspect(): unknown;
+    dumpString(): string;
+}
 type TOIMDevMcpOptions = {
     /** Port for the WebSocket bridge that browser tabs connect to. Default: 7432 */
     wsPort?: number;
+    /**
+     * An in-process registry to read directly (your `OIMDevRegistry`). When
+     * provided, the tools answer from it without a browser/WebSocket bridge
+     * (no `wsPort` server started).
+     */
+    registry?: IOIMDevRegistryLike;
+    /**
+     * Path to a module that builds the model in this process for offline
+     * introspection. The module must export a `registry` (or a default export,
+     * or a zero-arg factory) exposing `inspect()` and `dumpString()`.
+     * Also settable via the `OIMDB_MODEL_MODULE` env var for the CLI.
+     */
+    modelModulePath?: string;
 };
 
 declare class OIMDevMcpServer {
@@ -9,7 +32,19 @@ declare class OIMDevMcpServer {
     private wss;
     private latestBrowser;
     private readonly pending;
+    private inProcessRegistry;
+    private readonly modelModulePath?;
+    private modelModuleLoaded;
     constructor(options?: TOIMDevMcpOptions);
+    /**
+     * Resolves the in-process registry, loading the model module on first use.
+     * Returns null when no in-process source is configured (browser-bridge mode).
+     */
+    private getInProcessRegistry;
+    /** Reads the inspect snapshot from the in-process model or the browser. */
+    private readInspect;
+    /** Reads the human-readable dump from the in-process model or the browser. */
+    private readDump;
     private registerTools;
     private queryBrowser;
     private setupWebSocketServer;
@@ -41,4 +76,4 @@ declare class OIMDevUIServer {
 declare function createOIMDevMcpServer(options?: TOIMDevMcpOptions): OIMDevMcpServer;
 declare function createOIMDevUIServer(options: TOIMDevUIServerOptions): OIMDevUIServer;
 
-export { OIMDevMcpServer, OIMDevUIServer, type TOIMDevMcpOptions, type TOIMDevUIServerOptions, createOIMDevMcpServer, createOIMDevUIServer };
+export { type IOIMDevRegistryLike, OIMDevMcpServer, OIMDevUIServer, type TOIMDevMcpOptions, type TOIMDevUIServerOptions, createOIMDevMcpServer, createOIMDevUIServer };

package/dist/index.d.ts

@@ -1,6 +1,29 @@
+/**
+ * The readable shape the MCP tools need from a registry — `OIMDevRegistry` from
+ * `@oimdb/devtools` already satisfies it. Declared structurally (following the
+ * existing `IOIMDev*Like` convention) so `@oimdb/mcp` need not depend on
+ * `@oimdb/devtools`; it is not a separate registry implementation.
+ */
+interface IOIMDevRegistryLike {
+    inspect(): unknown;
+    dumpString(): string;
+}
 type TOIMDevMcpOptions = {
     /** Port for the WebSocket bridge that browser tabs connect to. Default: 7432 */
     wsPort?: number;
+    /**
+     * An in-process registry to read directly (your `OIMDevRegistry`). When
+     * provided, the tools answer from it without a browser/WebSocket bridge
+     * (no `wsPort` server started).
+     */
+    registry?: IOIMDevRegistryLike;
+    /**
+     * Path to a module that builds the model in this process for offline
+     * introspection. The module must export a `registry` (or a default export,
+     * or a zero-arg factory) exposing `inspect()` and `dumpString()`.
+     * Also settable via the `OIMDB_MODEL_MODULE` env var for the CLI.
+     */
+    modelModulePath?: string;
 };
 
 declare class OIMDevMcpServer {
@@ -9,7 +32,19 @@ declare class OIMDevMcpServer {
     private wss;
     private latestBrowser;
     private readonly pending;
+    private inProcessRegistry;
+    private readonly modelModulePath?;
+    private modelModuleLoaded;
     constructor(options?: TOIMDevMcpOptions);
+    /**
+     * Resolves the in-process registry, loading the model module on first use.
+     * Returns null when no in-process source is configured (browser-bridge mode).
+     */
+    private getInProcessRegistry;
+    /** Reads the inspect snapshot from the in-process model or the browser. */
+    private readInspect;
+    /** Reads the human-readable dump from the in-process model or the browser. */
+    private readDump;
     private registerTools;
     private queryBrowser;
     private setupWebSocketServer;
@@ -41,4 +76,4 @@ declare class OIMDevUIServer {
 declare function createOIMDevMcpServer(options?: TOIMDevMcpOptions): OIMDevMcpServer;
 declare function createOIMDevUIServer(options: TOIMDevUIServerOptions): OIMDevUIServer;
 
-export { OIMDevMcpServer, OIMDevUIServer, type TOIMDevMcpOptions, type TOIMDevUIServerOptions, createOIMDevMcpServer, createOIMDevUIServer };
+export { type IOIMDevRegistryLike, OIMDevMcpServer, OIMDevUIServer, type TOIMDevMcpOptions, type TOIMDevUIServerOptions, createOIMDevMcpServer, createOIMDevUIServer };

package/dist/index.js

@@ -2,36 +2,86 @@
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { WebSocketServer } from "ws";
+import { pathToFileURL } from "url";
+import { resolve as resolvePath } from "path";
 import { z } from "zod";
+async function loadRegistryFromModule(path) {
+  const url = pathToFileURL(resolvePath(path)).href;
+  const mod = await import(url);
+  let candidate = mod.registry ?? mod.default ?? mod;
+  if (typeof candidate === "function") {
+    candidate = await candidate();
+  }
+  if (!candidate || typeof candidate.inspect !== "function" || typeof candidate.dumpString !== "function") {
+    throw new Error(
+      `[OIMDB MCP] Module "${path}" must export a registry exposing inspect() and dumpString() (as a "registry" or default export, or a zero-arg factory returning one).`
+    );
+  }
+  return candidate;
+}
 var OIMDevMcpServer = class {
   constructor(options = {}) {
     this.wss = null;
     this.latestBrowser = null;
     this.pending = /* @__PURE__ */ new Map();
+    this.modelModuleLoaded = false;
     this.wsPort = options.wsPort ?? 7432;
-    this.mcpServer = new McpServer({ name: "oimdb", version: "1.0.0" });
+    this.inProcessRegistry = options.registry ?? null;
+    this.modelModulePath = options.modelModulePath;
+    this.mcpServer = new McpServer(
+      { name: "oimdb", version: "1.0.0" },
+      {
+        instructions: "Before using these tools, read the OIMDB API reference so you know how to write correct code: node_modules/@oimdb/core/llms.txt. Then use oimdb_inspect to see the data model (collections, indexes, computeds). The source is either a live browser tab (WebSocket bridge) or an in-process model (when a registry / model module is provided) for offline/static introspection."
+      }
+    );
     this.registerTools();
   }
+  /**
+   * Resolves the in-process registry, loading the model module on first use.
+   * Returns null when no in-process source is configured (browser-bridge mode).
+   */
+  async getInProcessRegistry() {
+    if (this.inProcessRegistry) return this.inProcessRegistry;
+    if (this.modelModulePath && !this.modelModuleLoaded) {
+      this.modelModuleLoaded = true;
+      this.inProcessRegistry = await loadRegistryFromModule(
+        this.modelModulePath
+      );
+    }
+    return this.inProcessRegistry;
+  }
+  /** Reads the inspect snapshot from the in-process model or the browser. */
+  async readInspect() {
+    const registry = await this.getInProcessRegistry();
+    if (registry) return registry.inspect();
+    return this.queryBrowser("inspect");
+  }
+  /** Reads the human-readable dump from the in-process model or the browser. */
+  async readDump() {
+    const registry = await this.getInProcessRegistry();
+    if (registry) return registry.dumpString();
+    return await this.queryBrowser("dump");
+  }
   registerTools() {
     const server = this.mcpServer;
     const nameSchema = { name: z.string().describe("Registered name") };
     server.registerTool("oimdb_inspect", {
-      description: "Get full state of all registered OIMDB collections and computeds from the connected browser tab. Returns structured JSON with entity counts, field names, index keys, relations, and computed statuses."
+      description: "Get full state of all registered OIMDB collections and computeds. Returns structured JSON with entity counts, field names, index keys, relations, and computed statuses. Source is the connected browser tab, or an in-process model when one is configured (offline/static \u2014 field names appear only if the model holds sample entities)."
     }, async () => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] };
     });
     server.registerTool("oimdb_dump", {
-      description: "Get a human-readable text summary of OIMDB state. Same output as registry.dump() in the browser."
+      description: "Get a human-readable text summary of OIMDB state. Same output as registry.dump(). Reads the connected browser tab or an in-process model when configured."
     }, async () => {
-      const text = await this.queryBrowser("dump");
+      const text = await this.readDump();
       return { content: [{ type: "text", text }] };
     });
     server.registerTool("oimdb_collection", {
       description: "Get details of a specific registered collection: entity count, field names, index keys, and relations.",
       inputSchema: nameSchema
     }, async ({ name }) => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       const info = data.collections[name];
       if (!info) {
         const available = Object.keys(data.collections).join(", ") || "(none registered)";
@@ -43,7 +93,7 @@ var OIMDevMcpServer = class {
       description: "Get status and resolved dependency names of a specific registered computed value. Shows fresh/stale/pending status, current value, and which registered sources it depends on.",
       inputSchema: nameSchema
     }, async ({ name }) => {
-      const data = await this.queryBrowser("inspect");
+      const data = await this.readInspect();
       const info = data.computeds[name];
       if (!info) {
         const available = Object.keys(data.computeds).join(", ") || "(none registered)";
@@ -57,11 +107,14 @@ var OIMDevMcpServer = class {
       throw new Error(
         `No browser tab connected to the OIMDB MCP bridge.
 
-Add to your debug entry point:
+Live mode \u2014 add to your debug entry point:
   import { registry } from '@oimdb/devtools';
   registry.connect(); // connects to ws://localhost:${this.wsPort}
+Then reload the page.
 
-Then reload the page.`
+Offline mode \u2014 point the server at a model module instead:
+  OIMDB_MODEL_MODULE=./path/to/model.js npx @oimdb/mcp
+(the module exports a "registry" with inspect()/dumpString()).`
       );
     }
     return new Promise((resolve, reject) => {
@@ -121,7 +174,14 @@ Set a different port: OIMDB_WS_PORT=7433 npx @oimdb/mcp
 `);
   }
   async start() {
-    this.setupWebSocketServer();
+    const registry = await this.getInProcessRegistry();
+    if (registry) {
+      process.stderr.write(
+        "[OIMDB MCP] In-process model loaded \u2014 serving offline (no browser bridge).\n"
+      );
+    } else {
+      this.setupWebSocketServer();
+    }
     const transport = new StdioServerTransport();
     await this.mcpServer.connect(transport);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oimdb/mcp",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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>