anentrypoint-design 0.0.330 → 0.0.332

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.330",
+  "version": "0.0.332",
   "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.js

@@ -14,6 +14,7 @@ import { register as registerDebug, unregister as unregisterDebug } from '../deb
 import { queueMessage, watchReconnect, isOnline } from '../idb-outbox.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 import { fmtTime, fmtAgo } from './sessions.js';
+import { createVirtualizer, measureRef } from '../virtual-scroll.js';
 
 const h = webjsx.createElement;
 
@@ -107,8 +108,21 @@ export const home = makePage((ctx) => {
 
 // ---- chat ------------------------------------------------------------------
 
+// Below this thread length, mount every message directly -- virtualization's
+// scroll-listener + spacer-div overhead only pays for itself once the DOM
+// node count it would otherwise mount is large enough to matter.
+const VIRTUALIZE_THRESHOLD = 60;
+
 export const chat = makePage((ctx) => {
     Object.assign(ctx.state, { loading: false, messages: [], draft: '', sending: false });
+    const virtualizer = createVirtualizer();
+    let threadEl = null;
+    let range = { startIndex: 0, endIndex: 0, topSpacerPx: 0, bottomSpacerPx: 0 };
+    function recomputeRange() {
+        if (!threadEl) return;
+        virtualizer.setCount(ctx.state.messages.length);
+        range = virtualizer.computeRange(threadEl.scrollTop, threadEl.clientHeight);
+    }
     // Offline outbox: a prompt sent while genuinely offline queues to
     // IndexedDB and auto-flushes on the real 'online' event, rather than
     // surfacing a hard error the user can't act on. True offline LLM
@@ -138,15 +152,47 @@ export const chat = makePage((ctx) => {
         }
         ctx.set({ sending: false });
     }
+    // Combines the existing bottom-pin auto-scroll ref (stickyScroll) with the
+    // virtualizer's range recompute on every scroll tick. Both run off the
+    // SAME element -- one ref callback wiring both keeps a single listener
+    // registration instead of two refs fighting over the same node.
+    function threadRef(el) {
+        if (!el) { threadEl = null; return; }
+        threadEl = el;
+        stickyScroll(el);
+        if (!el.__vsScrollWired) {
+            el.__vsScrollWired = true;
+            el.addEventListener('scroll', () => { recomputeRange(); ctx.rerender(); }, { passive: true });
+        }
+        recomputeRange();
+    }
+
     return () => {
         const s = ctx.state;
+        const virtualized = s.messages.length > VIRTUALIZE_THRESHOLD;
+        let threadChildren;
+        if (!s.messages.length) {
+            threadChildren = [emptyState('send a prompt to start', Icon('forum'))];
+        } else if (!virtualized) {
+            threadChildren = s.messages.map((m, i) => ChatMessage({ ...m, key: i }));
+        } else {
+            recomputeRange();
+            const { startIndex, endIndex, topSpacerPx, bottomSpacerPx } = range;
+            threadChildren = [
+                h('div', { key: '_top_spacer', style: `height:${topSpacerPx}px` }),
+                ...s.messages.slice(startIndex, endIndex).map((m, i) => {
+                    const realIndex = startIndex + i;
+                    return h('div', { key: 'vm' + realIndex, ref: measureRef(virtualizer, realIndex) }, ChatMessage({ ...m, key: realIndex }));
+                }),
+                h('div', { key: '_bottom_spacer', style: `height:${bottomSpacerPx}px` }),
+            ];
+        }
         return h('div', { class: 'fd-chat' },
             PageHeader({ eyebrow: 'freddie', title: 'chat', lede: 'one-shot agent turns · POST /api/chat' }),
             liveRegion(s.sending ? 'waiting for assistant reply' : ''),
             h('div', { class: 'chat-thread fd-chat-thread', role: 'log', 'aria-label': 'chat messages',
-                ref: stickyScroll },
-                s.messages.length ? s.messages.map((m, i) => ChatMessage({ ...m, key: i }))
-                    : emptyState('send a prompt to start', Icon('forum')),
+                ref: threadRef },
+                ...threadChildren,
                 s.sending ? ChatMessage({ role: 'assistant', typing: true, key: '_typing' }) : null),
             ChatComposer({
                 value: s.draft,

package/src/index.js

@@ -23,6 +23,7 @@ import { registerChatElement, DsChat } from './web-components/ds-chat.js';
 import { registerFreddieChatElement, FreddieChat } from './web-components/freddie-chat.js';
 import { formatTime, formatDateTime, formatNumber, formatRelativeTime } from './locale.js';
 import { queueMessage, listQueued, flushQueue, watchReconnect, isOnline } from './idb-outbox.js';
+import { createVirtualizer, measureRef } from './virtual-scroll.js';
 
 let _installed = false;
 export async function installStyles(target) {
@@ -91,7 +92,8 @@ export {
     theme, ThemeToggle,
     t, registerLocale, getLocale, setLocale, availableLocales,
     formatTime, formatDateTime, formatNumber, formatRelativeTime,
-    queueMessage, listQueued, flushQueue, watchReconnect, isOnline
+    queueMessage, listQueued, flushQueue, watchReconnect, isOnline,
+    createVirtualizer, measureRef
 };
 export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme,
          applyAccent, getAccent, applyDensity, getDensity } from './theme.js';

package/src/virtual-scroll.js

@@ -0,0 +1,117 @@
+// Windowed list virtualization for long message threads. Framework-agnostic:
+// consumes a live scroll-container element + an items array, returns which
+// index range to actually mount plus spacer heights for the rest, so a host
+// component (chat.js's thread, freddie.js's chat page) only ever creates DOM
+// nodes for items near the visible viewport instead of the whole history.
+//
+// Height-measurement strategy: real message bubbles vary in height (markdown,
+// code blocks, images), so a fixed-row-height virtualizer would under/over-
+// estimate scroll extent. This tracks a per-index height cache, seeded with
+// an estimate and corrected once each item's real DOM node is measured after
+// mount -- the same "measure on mount, estimate until then" approach used by
+// react-window/react-virtualized, implemented directly over ResizeObserver
+// with no new dependency.
+
+import { register as registerDebug } from './debug.js';
+
+const DEFAULT_ESTIMATE_PX = 72;
+const DEFAULT_OVERSCAN = 6;
+let _instanceCounter = 0;
+
+export function createVirtualizer({ estimateHeight = DEFAULT_ESTIMATE_PX, overscan = DEFAULT_OVERSCAN } = {}) {
+    const heights = new Map(); // index -> measured px height
+    let itemCount = 0;
+
+    function heightOf(i) {
+        return heights.has(i) ? heights.get(i) : estimateHeight;
+    }
+
+    function offsetOf(i) {
+        let sum = 0;
+        for (let k = 0; k < i; k++) sum += heightOf(k);
+        return sum;
+    }
+
+    function totalHeight() {
+        return offsetOf(itemCount);
+    }
+
+    // setCount MUST be called before computeRange on every render pass -- the
+    // item array can grow/shrink (new messages, session switch) and stale
+    // itemCount would compute a range against the wrong list length.
+    function setCount(n) {
+        itemCount = n;
+        // Drop cached heights for indices beyond the new count so a shrunk
+        // list (e.g. switching to a shorter session) doesn't leak stale
+        // measurements back in if the count grows again later.
+        for (const k of heights.keys()) if (k >= n) heights.delete(k);
+    }
+
+    // Report a real measured height for index i (called from a ref callback
+    // once the actual DOM node exists). Returns true if the height changed
+    // enough to require a re-layout (avoids a re-render storm from sub-pixel
+    // ResizeObserver noise).
+    function reportHeight(i, px) {
+        const prev = heights.get(i);
+        if (prev != null && Math.abs(prev - px) < 1) return false;
+        heights.set(i, px);
+        return true;
+    }
+
+    // computeRange(scrollTop, viewportHeight) -> {startIndex, endIndex, topSpacerPx, bottomSpacerPx}
+    // endIndex is exclusive. startIndex/endIndex already include `overscan`
+    // items on each side so fast scrolling doesn't flash blank rows before
+    // the next range recomputes.
+    function computeRange(scrollTop, viewportHeight) {
+        if (itemCount === 0) return { startIndex: 0, endIndex: 0, topSpacerPx: 0, bottomSpacerPx: 0 };
+        let acc = 0;
+        let startIndex = 0;
+        for (; startIndex < itemCount; startIndex++) {
+            const h = heightOf(startIndex);
+            if (acc + h > scrollTop) break;
+            acc += h;
+        }
+        const topSpacerPx = acc;
+        let endIndex = startIndex;
+        let visibleAcc = 0;
+        for (; endIndex < itemCount; endIndex++) {
+            if (visibleAcc > viewportHeight) break;
+            visibleAcc += heightOf(endIndex);
+        }
+        startIndex = Math.max(0, startIndex - overscan);
+        endIndex = Math.min(itemCount, endIndex + overscan);
+        const topSpacer = offsetOf(startIndex);
+        const bottomSpacer = totalHeight() - offsetOf(endIndex);
+        return { startIndex, endIndex, topSpacerPx: topSpacer, bottomSpacerPx: Math.max(0, bottomSpacer) };
+    }
+
+    // Scroll-position-preserving resize: when content is prepended (e.g. the
+    // user scrolls up and older history is revealed) the browser's native
+    // scroll-anchoring is unreliable across a full DOM replace via applyDiff.
+    // Callers capture {scrollTop, scrollHeight} before the mutation and pass
+    // both here with the NEW scrollHeight after, to compute the delta to
+    // re-apply so the visually-anchored content doesn't jump.
+    function preserveScrollOnPrepend(prevScrollTop, prevScrollHeight, newScrollHeight) {
+        return prevScrollTop + (newScrollHeight - prevScrollHeight);
+    }
+
+    const instanceId = 'virtualizer-' + (_instanceCounter++);
+    registerDebug(instanceId, () => ({ itemCount, measuredCount: heights.size, totalHeightPx: totalHeight() }));
+
+    return { setCount, reportHeight, computeRange, totalHeight, heightOf, preserveScrollOnPrepend };
+}
+
+// A ref-callback factory: wraps a per-item render so its real rendered height
+// is measured via ResizeObserver and reported back into the virtualizer.
+// Usage: h('div', {ref: measureRef(virtualizer, index)}, ...itemContent)
+export function measureRef(virtualizer, index) {
+    return (el) => {
+        if (!el || typeof ResizeObserver === 'undefined') return;
+        const ro = new ResizeObserver((entries) => {
+            const h = entries[0]?.contentRect?.height;
+            if (h != null) virtualizer.reportHeight(index, h);
+        });
+        ro.observe(el);
+        el.__vsResizeObserver = ro;
+    };
+}