anentrypoint-design 0.0.329 → 0.0.331

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.329",
+  "version": "0.0.331",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/chat-message-parts.js

@@ -130,6 +130,15 @@ export function injectCodeCopy(container) {
 const MD_STREAM_THROTTLE_MS = 120;
 const MD_STREAM_MIN_DELTA_CHARS = 40;
 
+// requestIdleCallback with a setTimeout fallback (Safari/non-browser test
+// contexts lack the real API). A settled historical message's parse is not
+// latency-critical the way a streaming turn's is — deferring it off the
+// critical path keeps a session-load burst of N historical bubbles from
+// racing N synchronous parses on the same tick.
+const scheduleIdle = typeof requestIdleCallback === 'function'
+    ? (fn) => requestIdleCallback(fn, { timeout: 500 })
+    : (fn) => setTimeout(fn, 0);
+
 function MdNode(p) {
     const refSink = (el) => {
         if (!el) return;
@@ -164,19 +173,34 @@ function MdNode(p) {
         // arrive (an empty bubble until the CDN import resolves reads as a
         // hang); the resolved render swaps in sanitized markdown in place.
         if (isMarkdownDegraded()) el.textContent = p.text || '';
-        renderMarkdownCached(p.text || '').then((html) => {
-            const swap = () => { el.innerHTML = html; injectCodeCopy(el); };
-            // Don't blow away an active text selection inside this bubble mid-swap
-            // (e.g. the user is mid-copy while a stream tick settles). Defer the
-            // swap once, until the selection changes (cleared or moved elsewhere).
-            const sel = typeof window !== 'undefined' ? window.getSelection() : null;
-            if (sel && sel.anchorNode && el.contains(sel.anchorNode)) {
-                const onSelChange = () => { document.removeEventListener('selectionchange', onSelChange); swap(); };
-                document.addEventListener('selectionchange', onSelChange, { once: true });
-                return;
-            }
-            swap();
-        });
+        function doParse() {
+            renderMarkdownCached(p.text || '').then((html) => {
+                // The element may have been recycled (webjsx applyDiff reused this
+                // DOM node for a different message) or detached by the time an
+                // idle-deferred parse resolves -- re-check the source key still
+                // matches before swapping innerHTML into what could now be a
+                // completely different message's bubble.
+                if (el.dataset.mdSrc !== srcKey) return;
+                const swap = () => { el.innerHTML = html; injectCodeCopy(el); };
+                // Don't blow away an active text selection inside this bubble mid-swap
+                // (e.g. the user is mid-copy while a stream tick settles). Defer the
+                // swap once, until the selection changes (cleared or moved elsewhere).
+                const sel = typeof window !== 'undefined' ? window.getSelection() : null;
+                if (sel && sel.anchorNode && el.contains(sel.anchorNode)) {
+                    const onSelChange = () => { document.removeEventListener('selectionchange', onSelChange); swap(); };
+                    document.addEventListener('selectionchange', onSelChange, { once: true });
+                    return;
+                }
+                swap();
+            });
+        }
+        // Streaming turns parse immediately (latency-critical: the user is
+        // watching this bubble grow). A settled historical message (no
+        // streamingCaret) is deferred to an idle slot -- not on the critical
+        // render path, so a page mounting many historical bubbles at once
+        // (session load) doesn't burst-parse them all synchronously.
+        if (p.streamingCaret) doParse();
+        else scheduleIdle(doParse);
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
 }

package/src/components/freddie/runtime.js

@@ -44,6 +44,7 @@ export function makePage(setup, { initial = {} } = {}) {
     return function pageRenderer(host) {
         const state = { loading: true, error: null, ...initial };
         const timers = [];
+        const cleanupFns = [];
         let elRef = null;
         let render = () => h('div', {});
         const ctx = {
@@ -51,7 +52,16 @@ export function makePage(setup, { initial = {} } = {}) {
             set(patch) { Object.assign(state, patch); ctx.rerender(); },
             rerender() { if (elRef) { try { applyDiff(elRef, wrap()); } catch (e) { console.warn('[freddie page rerender]', e); } } },
             interval(fn, ms) { const id = setInterval(fn, ms); timers.push(id); return id; },
-            cleanup() { for (const id of timers) clearInterval(id); timers.length = 0; },
+            // Register arbitrary teardown (WebSocket close, event listener removal,
+            // etc) alongside the existing interval-only cleanup() -- same
+            // unmount trigger (elRef going null in ref()), just not limited to
+            // setInterval ids.
+            onCleanup(fn) { cleanupFns.push(fn); },
+            cleanup() {
+                for (const id of timers) clearInterval(id); timers.length = 0;
+                for (const fn of cleanupFns) { try { fn(); } catch (e) { console.warn('[freddie page cleanup]', e); } }
+                cleanupFns.length = 0;
+            },
         };
         function wrap() {
             let body;

package/src/components/freddie.js

@@ -10,6 +10,7 @@ import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from '
 import { Panel, Row, Table, Kpi, PageHeader, SearchInput, TextField, Select } from './content.js';
 import { Chip, Btn, Icon } from './shell.js';
 import { formatTime } from '../locale.js';
+import { register as registerDebug, unregister as unregisterDebug } from '../debug.js';
 import { queueMessage, watchReconnect, isOnline } from '../idb-outbox.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 import { fmtTime, fmtAgo } from './sessions.js';
@@ -704,6 +705,98 @@ export const health = makePage((ctx) => {
 
 // ---- debug -----------------------------------------------------------------
 
+// ---- logs --------------------------------------------------------------
+
+const LOG_SEVERITY_TONE = { error: 'error', warning: 'warning', info: 'accent', debug: 'muted' };
+
+export const logs = makePage((ctx) => {
+    Object.assign(ctx.state, { lines: [], subsystems: [], activeSubsystem: '', activeSeverity: '', q: '', connected: false, wsError: null });
+    const MAX_LINES = 500;
+
+    async function loadSubsystems() {
+        try { ctx.set({ subsystems: await api('/api/logs') }); }
+        catch (e) { /* non-fatal: subsystem list is a filter convenience, not required for the stream */ }
+    }
+
+    let unmounted = false;
+    let reconnectTimer = null;
+    function connect() {
+        if (unmounted) return;
+        if (typeof WebSocket === 'undefined') { ctx.set({ wsError: new Error('WebSocket not available in this environment') }); return }
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const ws = new WebSocket(proto + '//' + location.host + '/api/logs/stream');
+        ws.onopen = () => ctx.set({ connected: true, wsError: null });
+        ws.onerror = () => ctx.set({ connected: false, wsError: new Error('log stream connection error') });
+        ws.onclose = () => { ctx.set({ connected: false }); if (!unmounted) reconnectTimer = setTimeout(connect, 3000); };
+        ws.onmessage = (ev) => {
+            let rec; try { rec = JSON.parse(ev.data); } catch { return; }
+            const next = [rec, ...ctx.state.lines].slice(0, MAX_LINES);
+            ctx.set({ lines: next });
+        };
+        currentWs = ws;
+    }
+    let currentWs = null;
+
+    loadSubsystems();
+    connect();
+    registerDebug('logs', () => ({ connected: ctx.state.connected, lineCount: ctx.state.lines.length, activeSubsystem: ctx.state.activeSubsystem, activeSeverity: ctx.state.activeSeverity }));
+    ctx.onCleanup(() => {
+        unmounted = true;
+        if (reconnectTimer) clearTimeout(reconnectTimer);
+        try { currentWs?.close(); } catch {}
+        unregisterDebug('logs');
+    });
+
+    function filtered() {
+        const s = ctx.state;
+        return s.lines.filter((l) => {
+            if (s.activeSubsystem && l.subsystem !== s.activeSubsystem) return false;
+            if (s.activeSeverity && l.severity !== s.activeSeverity) return false;
+            if (s.q && !String(l.msg || '').toLowerCase().includes(s.q.toLowerCase())) return false;
+            return true;
+        });
+    }
+
+    return () => {
+        const s = ctx.state;
+        const rows = filtered();
+        const severities = ['error', 'warning', 'info', 'debug'];
+        return [
+            PageHeader({
+                eyebrow: 'freddie', title: 'logs', lede: 'live JSONL log tail — /api/logs/stream',
+                right: s.connected ? Chip({ tone: 'ok', children: 'live' }) : Chip({ tone: 'miss', children: 'reconnecting…' }),
+            }),
+            s.wsError ? refreshError(s.wsError) : null,
+            h('div', { class: 'ds-toolbar' },
+                SearchInput({ value: s.q, placeholder: 'filter by message…', onInput: (v) => ctx.set({ q: v }), resultCount: rows.length }),
+                Select({
+                    label: 'subsystem', value: s.activeSubsystem, placeholder: 'all subsystems',
+                    options: (s.subsystems || []).map((name) => ({ value: name, label: name })),
+                    onChange: (v) => ctx.set({ activeSubsystem: v }),
+                }),
+                Select({
+                    label: 'severity', value: s.activeSeverity, placeholder: 'all severities',
+                    options: severities.map((sv) => ({ value: sv, label: sv })),
+                    onChange: (v) => ctx.set({ activeSeverity: v }),
+                }),
+            ),
+            rows.length ? section('lines · ' + rows.length,
+                Table({
+                    headers: ['time', 'subsystem', 'severity', 'message'],
+                    rows: rows.map((l) => [
+                        formatTime(l.ts ? Date.parse(l.ts) : Date.now()),
+                        l.subsystem || '—',
+                        Chip({ tone: LOG_SEVERITY_TONE[l.severity] || 'dim', children: l.severity || 'info' }),
+                        truncSpan(l.msg, TRUNC_DESC),
+                    ]),
+                }),
+            ) : emptyState(s.connected ? 'no log lines yet — waiting for activity' : 'connecting to log stream…'),
+        ].filter(Boolean);
+    };
+});
+
+// ---- debug -----------------------------------------------------------------
+
 export const debug = makePage((ctx) => {
     Object.assign(ctx.state, { sub: null, logs: null });
     async function load() { try { ctx.set({ loading: false, data: await api('/api/debug'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
@@ -734,7 +827,7 @@ export const debug = makePage((ctx) => {
 export const FREDDIE_PAGES = {
     home, chat, voice, sessions, projects, agents, analytics,
     models, cron, skills, config, env, tools, batch, gateway, chains,
-    machines, health, debug,
+    machines, health, debug, logs,
 };
 
 export { skillLabel, getRecentPaths, saveRecentPath, renderChatMessages };