sygnal 6.4.0 → 6.6.0

package/dist/devtools.cjs.js

@@ -873,6 +873,25 @@ class SygnalDevTools {
             case 'GET_STATE':
                 this._sendComponentState(msg.payload.componentId);
                 break;
+            case 'GET_GRAPH':
+                this._post('GRAPH', this._graph(msg.payload));
+                break;
+        }
+    }
+    /**
+     * PLAN-10 P-1: the runtime app graph for the panel's App graph view: inspect() with the recent
+     * actions, JSON-safe. inspect() is on this object only when 'sygnal/diagnostics' is loaded
+     * (sygnal/vite loads it in dev); without it the panel shows why.
+     */
+    _graph(opts) {
+        const inspect = this.inspect;
+        if (typeof inspect !== 'function')
+            return { graph: null, reason: 'no-diagnostics' };
+        try {
+            return { graph: JSON.parse(JSON.stringify(inspect({ actions: opts?.actions ?? 200 }))) };
+        }
+        catch (e) {
+            return { graph: null, reason: 'error', message: String(e?.message ?? e) };
         }
     }
     onComponentCreated(componentNumber, name, instance) {
@@ -1748,15 +1767,15 @@ function pageTools(o, notifyWaiting = () => { }) {
     };
     return tools;
 }
-let installed = null;
+let installed$1 = null;
 /**
  * Connect this page to the dev server's MCP endpoint (sygnal/vite with `mcp: true` calls it from
  * 'virtual:sygnal/mcp'). Once per page; no-op without a hot channel.
  */
 function installMcpBridge(hot, options = {}) {
-    if (!hot || installed === hot)
+    if (!hot || installed$1 === hot)
         return;
-    installed = hot;
+    installed$1 = hot;
     if (!options.app)
         trackApps();
     const tools = pageTools(options, (id) => hot.send(MCP_RESPONSE, { id, waiting: true }));
@@ -1802,6 +1821,124 @@ function installMcpBridge(hot, options = {}) {
     }
 }
 
+/**
+ * PLAN-10 P-2 (D544): the app side of the graph page's "Live data" (sygnal/vite serves the page at
+ * `/__sygnal/graph` in dev, W-2 / D543). Dev only: it is part of the 'sygnal/devtools' entry, and
+ * sygnal/vite's 'virtual:sygnal/graph' module (served by the dev server, never in a build) calls
+ * installGraphBridge().
+ *
+ * The page is served by the dev server on the app's own origin, so the two talk over a
+ * BroadcastChannel ('sygnal:graph'): no server round trip, no HMR traffic, nothing a page on
+ * another origin can join. Every message carries `v: 1`.
+ *
+ *   page → apps  { type: 'who', watch? }          every 2 s while the page is open; `watch` names
+ *                                                 the tab the page follows (it keeps that tab
+ *                                                 sending for 6 s)
+ *   app  → page  { type: 'here', tab, url, title, at, ok }   the answer, and on load / focus
+ *                                                 (`at`: when the tab was last loaded or focused;
+ *                                                 `ok`: inspect() is there, i.e. diagnostics on)
+ *   app  → page  { type: 'graph', tab, graph }    inspect({ actions: 200 }) of the page's apps, JSON
+ *                                                 safe: when it starts being watched, then 150 ms
+ *                                                 after the last action or component change
+ *   app  → page  { type: 'action', tab, record }  { type, instance, component } at once (a flash)
+ *   page → app   { type: 'get-state', tab, req, id }   an instance's state
+ *   app  → page  { type: 'state', tab, req, id, value?, error? }
+ *   app  → page  { type: 'bye', tab }             the tab is going away (pagehide)
+ *
+ * State values go through the DevTools preview (JSON safe, as the MCP tools send them). The static
+ * keys the page joins on are on the component functions (sygnal/vite's dev transform) and come out
+ * of inspect() as `key`.
+ */
+const GRAPH_CHANNEL = 'sygnal:graph';
+const WATCH_MS = 6000;
+const SETTLE_MS = 150;
+let installed = false;
+/** Connect this page to the graph page's "Live data" (sygnal/vite calls it in dev). Once per page. */
+function installGraphBridge(options = {}) {
+    const g = globalThis;
+    if (installed || typeof g.BroadcastChannel != 'function' || !g.window)
+        return;
+    installed = true;
+    trackApps();
+    const bc = new g.BroadcastChannel(options.channel || GRAPH_CHANNEL);
+    const tab = Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+    const tools = pageTools({});
+    let at = Date.now();
+    let watchedUntil = 0;
+    let timer = 0;
+    const inspect = () => {
+        const f = g.__SYGNAL_DIAGNOSTICS__?.inspect || getDevTools()?.inspect;
+        return typeof f == 'function' ? f : null;
+    };
+    const post = (m) => { try {
+        bc.postMessage({ v: 1, tab, ...m });
+    }
+    catch (_) { /* closed */ } };
+    const here = () => post({ type: 'here', url: String(g.location?.href || ''), title: String(g.document?.title || ''), at, ok: !!inspect() });
+    const watched = () => Date.now() < watchedUntil;
+    const sendGraph = () => {
+        clearTimeout(timer);
+        timer = 0;
+        const f = inspect();
+        if (!watched() || !f)
+            return;
+        let graph;
+        try {
+            graph = JSON.parse(JSON.stringify(f({ actions: 200 })));
+        }
+        catch (_) {
+            return;
+        }
+        post({ type: 'graph', graph });
+    };
+    const settle = () => {
+        if (!watched())
+            return;
+        clearTimeout(timer);
+        timer = setTimeout(sendGraph, SETTLE_MS);
+    };
+    const watch = () => {
+        const was = watched();
+        watchedUntil = Date.now() + WATCH_MS;
+        if (!was)
+            sendGraph();
+    };
+    bc.onmessage = (e) => {
+        const m = e && e.data;
+        if (!m || m.v !== 1 || typeof m.type != 'string')
+            return;
+        if (m.type == 'who') {
+            if (m.watch === tab)
+                watch();
+            here();
+        }
+        else if (m.type == 'get-state' && m.tab === tab) {
+            let value, error;
+            try {
+                value = tools.get_state({ component: String(m.id) }, m.req).state;
+            }
+            catch (err) {
+                error = String(err?.message || err);
+            }
+            post({ type: 'state', req: m.req, id: m.id, ...(error ? { error } : { value }) });
+        }
+    };
+    onAction((a, kind) => {
+        if (!watched())
+            return;
+        if (kind == 'add' && a)
+            post({ type: 'action', record: { type: a.type, instance: String(a.instance), component: a.component } });
+        settle();
+    });
+    addLayer(() => ({ onCreate: settle, onDispose: settle }));
+    const seen = () => { at = Date.now(); here(); };
+    g.addEventListener?.('focus', seen);
+    g.document?.addEventListener?.('visibilitychange', () => { if (g.document.visibilityState == 'visible')
+        seen(); });
+    g.addEventListener?.('pagehide', () => post({ type: 'bye' }));
+    here();
+}
+
 // 'sygnal/devtools' (D77): the DevTools bridge for the browser extension, a dev-only
 // entry. Importing it installs window.__SYGNAL_DEVTOOLS__ (run() did this before 6.0),
 // so import it before run(): components created earlier are not in the tree.
@@ -1833,6 +1970,7 @@ exports.getActions = getActions;
 exports.getDevTools = getDevTools;
 exports.getSession = getSession;
 exports.installDevTools = installDevTools;
+exports.installGraphBridge = installGraphBridge;
 exports.installMcpBridge = installMcpBridge;
 exports.isRecording = isRecording;
 exports.onAction = onAction;