anentrypoint-design 0.0.369 → 0.0.370

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.369",
+  "version": "0.0.370",
   "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

@@ -18,9 +18,12 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { renderMarkdownCached, highlightCodeBlockCached } from '../markdown-cache.js';
 import { isDegraded as isMarkdownDegraded } from '../markdown.js';
+import { renderMermaidBlocksUnder } from '../mermaid.js';
+import { renderMathBlocksUnder } from '../math.js';
 import { Icon } from './shell.js';
 import { fmtFileSize } from './files.js';
 import { t } from '../i18n.js';
+import { GitDiffView } from './git-status.js';
 
 const h = webjsx.createElement;
 
@@ -181,7 +184,17 @@ function MdNode(p) {
                 // 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); };
+                const swap = () => {
+                    el.innerHTML = html;
+                    delete el.dataset.mathWired;
+                    injectCodeCopy(el);
+                    // Diagram/math enrichment runs AFTER sanitized HTML is in the DOM
+                    // (never on raw markdown source) and is best-effort: a failed or
+                    // still-loading mermaid/katex CDN leaves the fenced/literal source
+                    // visible rather than blocking or blanking the bubble.
+                    renderMermaidBlocksUnder(el).catch(() => {});
+                    renderMathBlocksUnder(el).catch(() => {});
+                };
                 // 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).
@@ -238,6 +251,22 @@ function CodeNode(p) {
     );
 }
 
+// A tool result reads as a unified diff when it has at least one `@@ ... @@`
+// hunk header and a +/- line — cheap enough to check on every render (no
+// caching) since it only runs once per settled tool card, not per rAF tick.
+function looksLikeUnifiedDiff(text) {
+    if (!text || text.indexOf('@@') === -1) return false;
+    return /^@@ .* @@/m.test(text) && /^[+-]/m.test(text);
+}
+
+// Pull a filename out of a unified diff's `+++ b/path` (or `--- a/path`)
+// header line, for the GitDiffView head label — best-effort, no filename is
+// fine (GitDiffView renders headerless).
+function filenameFromDiff(text) {
+    const m = /^\+\+\+ b?\/?(.+)$/m.exec(text) || /^--- a?\/?(.+)$/m.exec(text);
+    return m ? m[1].trim() : undefined;
+}
+
 // Freddie-flavored agent parts: collapsible tool-call card, tool-result, and
 // transient thinking indicator. Each renders as a `chat-bubble` variant so the
 // surrounding ChatMessage chrome (avatar/meta/reactions) stays consistent.
@@ -278,9 +307,18 @@ function ToolCallNode(p) {
                 hasArgs ? h('div', { class: 'chat-tool-section' },
                     sectionLabel('args', argsText),
                     h('pre', { class: 'chat-tool-pre' }, h('code', {}, argsText))) : null,
-                resultText ? h('div', { class: 'chat-tool-section' },
-                    sectionLabel(p.error ? 'error' : 'result', resultText),
-                    h('pre', { class: 'chat-tool-pre' + (p.error ? ' is-error' : '') }, h('code', {}, resultText)))
+                resultText
+                    ? (!p.error && looksLikeUnifiedDiff(resultText)
+                        // A patch-shaped tool result (edit/write/diff tools) renders
+                        // through the same split unified-diff view git-status.js's
+                        // GitDiffView already owns, instead of a raw JSON/text dump —
+                        // colored +/- hunks read far better than escaped plaintext.
+                        ? h('div', { class: 'chat-tool-section' },
+                            sectionLabel('result', resultText),
+                            GitDiffView({ diff: resultText, filename: filenameFromDiff(resultText) }))
+                        : h('div', { class: 'chat-tool-section' },
+                            sectionLabel(p.error ? 'error' : 'result', resultText),
+                            h('pre', { class: 'chat-tool-pre' + (p.error ? ' is-error' : '') }, h('code', {}, resultText))))
                     // A finished tool with no output would otherwise render no result
                     // section, reading identically to a still-running tool. Show an
                     // explicit placeholder so "done, empty" is distinguishable.

package/src/components/chat-minimap.js

@@ -0,0 +1,309 @@
+// ChatMinimap — a compact scroll-position overview for a long chat thread.
+//
+// Ported from pi-web's ChatMinimap.tsx (github.com/agegr/pi-web) behavior,
+// reimplemented as a pure webjsx factory over this kit's own DOM-ref pattern
+// (no React refs/hooks — a single `ref` callback owns measurement + listeners,
+// matching makeThreadAutoScroll's shape in chat.js).
+//
+// What it does:
+//   - Renders one dot per message that has visible text, positioned/spaced
+//     proportionally to that message's real position within the thread's
+//     scrollHeight (a message-density map, not a fixed-step list).
+//   - Color-codes dots by role: user vs assistant (two tones, tokens only).
+//   - Draws a viewport-position box (drag to scroll) reflecting scrollTop/
+//     scrollHeight ratios, updated on the thread's own scroll events.
+//   - Click (or drag) anywhere in the strip scrolls the thread so that point
+//     maps to the equivalent scroll ratio.
+//   - Hover reveals collision-resolved preview tooltips (message text, first
+//     ~200 chars) to the left of the strip; the nearest dot to the cursor is
+//     highlighted (scaled) while hovering.
+//   - Re-measures on ResizeObserver (thread container + content) and on
+//     message-count change (debounced), never synchronously in the scroll
+//     handler — scroll only updates the (cheap) viewport ratio.
+//
+// Usage: mount inside the same flex row as the scrollable thread, e.g.
+//   h('div', { class: 'chat-minimap-row' },
+//     h('div', { class: 'chat-thread', ref: threadRef, ... }, ...),
+//     ChatMinimap({ getThreadEl: () => threadEl, messages }))
+//
+// Props:
+//   messages     : [{ role: 'user'|'assistant'|..., text?, content?, parts? }]
+//                  — same shape chat.js/agent-chat.js already carry. Only
+//                  'user'/'assistant' roles get a node; others are skipped
+//                  (matches upstream, which only maps user/assistant).
+//   getThreadEl  : () => HTMLElement | null — returns the live scroll
+//                  container to observe/scroll. A getter (not the element
+//                  itself) so the minimap can be built before the thread ref
+//                  fires and still resolve the container lazily on measure.
+//   getMessageEl : optional (index) => HTMLElement | null — returns the DOM
+//                  node for message `index` (its top/height inside the
+//                  thread drive the dot's position). Falls back to querying
+//                  '[data-msg-index]' children of the thread element when
+//                  omitted, so a host that tags its message rows with
+//                  data-msg-index="N" needs no extra wiring.
+//   width        : minimap strip width in px (default 36, matches upstream).
+export const CHAT_MINIMAP_WIDTH = 36;
+const MEASURE_THROTTLE_MS = 150;
+const TOOLTIP_HEIGHT = 22;
+const TOOLTIP_GAP = 2;
+const TOOLTIP_WIDTH = 200;
+const PREVIEW_CHARS = 200;
+const MIN_SCROLLABLE_PX = 20;
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+// Extract a short preview string the same way upstream's getMessagePreview
+// does: prefer flat `text`, then `content` (string or array-of-parts), then
+// `parts` (this kit's structured shape) joined and trimmed.
+function messagePreview(m) {
+    if (!m) return '';
+    if (typeof m.text === 'string' && m.text) return m.text.slice(0, PREVIEW_CHARS);
+    if (typeof m.content === 'string' && m.content) return m.content.slice(0, PREVIEW_CHARS);
+    const partsSrc = Array.isArray(m.content) ? m.content : (Array.isArray(m.parts) ? m.parts : null);
+    if (partsSrc) {
+        const joined = partsSrc
+            .map((p) => (typeof p === 'string' ? p : (p && (p.text || (p.type === 'text' && p.text)) || '')))
+            .filter(Boolean)
+            .join(' ');
+        if (joined) return joined.slice(0, PREVIEW_CHARS);
+    }
+    return '';
+}
+
+// True when a message carries any renderable text (dots skip empty/tool-only
+// turns the way upstream's hasTextContent does).
+function hasTextContent(m) {
+    return !!messagePreview(m);
+}
+
+function isMappedRole(role) {
+    return role === 'user' || role === 'assistant';
+}
+
+// Resolve the DOM node for message index `i`, via the host's getter or the
+// data-msg-index fallback.
+function resolveMessageEl(threadEl, getMessageEl, i) {
+    if (typeof getMessageEl === 'function') return getMessageEl(i) || null;
+    return threadEl.querySelector('[data-msg-index="' + i + '"]') || null;
+}
+
+export function ChatMinimap({ messages = [], getThreadEl, getMessageEl, width = CHAT_MINIMAP_WIDTH } = {}) {
+    // All mutable state lives on the container element itself (webjsx factories
+    // are pure-render; the ref callback owns the imperative lifecycle, same
+    // pattern as makeThreadAutoScroll in chat.js).
+    const state = {
+        scrollRatio: 0,
+        viewportRatio: 1,
+        visible: false,
+        nodes: /** @type {Array<{topRatio:number, heightRatio:number, msg:any, index:number}>} */ ([]),
+        hovered: false,
+        mouseYRatio: null,
+    };
+
+    const containerRef = (el) => {
+        if (!el) return;
+        if (el._dsMinimapCleanup) return; // already wired for this DOM node
+        let measureTimer = null;
+        let ro = null;
+        let threadEl = null;
+        let scrollListenerEl = null;
+
+        const render = () => paintMinimap(el, state, messages, width);
+
+        const updateScroll = () => {
+            const t = typeof getThreadEl === 'function' ? getThreadEl() : null;
+            if (!t) return;
+            const totalH = t.scrollHeight;
+            const clientH = t.clientHeight;
+            const scrollable = totalH - clientH;
+            state.visible = scrollable > MIN_SCROLLABLE_PX;
+            if (scrollable <= 0) {
+                state.scrollRatio = 0;
+                state.viewportRatio = 1;
+            } else {
+                state.scrollRatio = t.scrollTop / scrollable;
+                state.viewportRatio = clientH / totalH;
+            }
+            render();
+        };
+
+        const measureNodes = () => {
+            if (measureTimer) return; // throttled — one pending pass at a time
+            measureTimer = setTimeout(() => {
+                measureTimer = null;
+                const t = typeof getThreadEl === 'function' ? getThreadEl() : null;
+                if (!t) return;
+                const totalH = t.scrollHeight;
+                if (totalH <= 0) return;
+                const containerRect = t.getBoundingClientRect();
+                const newNodes = [];
+                for (let i = 0; i < messages.length; i++) {
+                    const msg = messages[i];
+                    if (!isMappedRole(msg && msg.role)) continue;
+                    if (!hasTextContent(msg)) continue;
+                    const msgEl = resolveMessageEl(t, getMessageEl, i);
+                    if (!msgEl) continue;
+                    const elRect = msgEl.getBoundingClientRect();
+                    const top = elRect.top - containerRect.top + t.scrollTop;
+                    newNodes.push({
+                        topRatio: top / totalH,
+                        heightRatio: elRect.height / totalH,
+                        msg,
+                        index: newNodes.length,
+                    });
+                }
+                state.nodes = newNodes;
+                render();
+            }, MEASURE_THROTTLE_MS);
+        };
+
+        const syncLayout = () => { updateScroll(); measureNodes(); };
+
+        // Rebinds scroll listener + ResizeObserver to whichever thread element
+        // getThreadEl currently resolves to (it may be null on first paint and
+        // become available once the thread's own ref fires).
+        const rebind = () => {
+            const t = typeof getThreadEl === 'function' ? getThreadEl() : null;
+            if (t === threadEl) return;
+            if (scrollListenerEl) scrollListenerEl.removeEventListener('scroll', updateScroll);
+            if (ro) { ro.disconnect(); ro = null; }
+            threadEl = t;
+            scrollListenerEl = t;
+            if (!t) return;
+            t.addEventListener('scroll', updateScroll, { passive: true });
+            ro = new ResizeObserver(syncLayout);
+            ro.observe(t);
+            if (t.firstElementChild) ro.observe(t.firstElementChild);
+            syncLayout();
+        };
+        rebind();
+        // Thread element may not exist yet on first mount; poll briefly (mirrors
+        // upstream's 50ms post-message-change settle) until it appears, then the
+        // ResizeObserver takes over for everything after.
+        const rebindPoll = setInterval(rebind, 200);
+
+        // Drag-to-scroll + click-to-jump on the strip itself.
+        let dragging = false;
+        const scrollToRatio = (viewportTopRatio) => {
+            const t = typeof getThreadEl === 'function' ? getThreadEl() : null;
+            if (!t) return;
+            const scrollable = t.scrollHeight - t.clientHeight;
+            if (scrollable <= 0) return;
+            const clamped = Math.max(0, Math.min(1 - state.viewportRatio, viewportTopRatio));
+            t.scrollTop = (clamped / (1 - state.viewportRatio)) * scrollable;
+        };
+        const ratioFromEvent = (ev) => {
+            const rect = el.getBoundingClientRect();
+            return (ev.clientY - rect.top) / rect.height;
+        };
+        const onMouseDown = (ev) => {
+            if (!state.visible) return;
+            dragging = true;
+            const clickRatio = ratioFromEvent(ev);
+            const grabOffset = clickRatio - state.scrollRatio * (1 - state.viewportRatio);
+            const insideBox = grabOffset >= 0 && grabOffset <= state.viewportRatio;
+            const offset = insideBox ? grabOffset : state.viewportRatio / 2;
+            scrollToRatio(clickRatio - offset);
+            const onMove = (mv) => { if (dragging) scrollToRatio(ratioFromEvent(mv) - offset); };
+            const onUp = () => { dragging = false; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+        };
+        const onMouseEnter = () => { state.hovered = true; render(); };
+        const onMouseLeave = () => { state.hovered = false; state.mouseYRatio = null; render(); };
+        const onMouseMove = (ev) => { state.mouseYRatio = ratioFromEvent(ev); render(); };
+        el.addEventListener('mousedown', onMouseDown);
+        el.addEventListener('mouseenter', onMouseEnter);
+        el.addEventListener('mouseleave', onMouseLeave);
+        el.addEventListener('mousemove', onMouseMove);
+
+        el._dsMinimapCleanup = () => {
+            clearInterval(rebindPoll);
+            if (measureTimer) clearTimeout(measureTimer);
+            if (scrollListenerEl) scrollListenerEl.removeEventListener('scroll', updateScroll);
+            if (ro) ro.disconnect();
+            el.removeEventListener('mousedown', onMouseDown);
+            el.removeEventListener('mouseenter', onMouseEnter);
+            el.removeEventListener('mouseleave', onMouseLeave);
+            el.removeEventListener('mousemove', onMouseMove);
+        };
+
+        render();
+    };
+
+    return h('div', {
+        class: 'chat-minimap',
+        ref: containerRef,
+        role: 'navigation',
+        'aria-label': 'conversation scroll overview',
+        style: 'width:' + width + 'px',
+    });
+}
+
+// Pure DOM paint: rebuilds the minimap's children from current `state`. Kept
+// outside webjsx's own vdom diff (this subtree is imperative, like a canvas)
+// because dot count/positions and hover/tooltip visibility change far more
+// often than a full component re-render is warranted for.
+function paintMinimap(el, state, messages, width) {
+    el.style.display = state.visible ? '' : 'none';
+    el.innerHTML = '';
+    if (!state.visible) return;
+
+    const viewportBox = document.createElement('div');
+    viewportBox.className = 'chat-minimap-viewport';
+    viewportBox.style.top = (state.scrollRatio * (1 - state.viewportRatio) * 100) + '%';
+    viewportBox.style.height = (state.viewportRatio * 100) + '%';
+    el.appendChild(viewportBox);
+
+    const centerLine = document.createElement('div');
+    centerLine.className = 'chat-minimap-centerline';
+    el.appendChild(centerLine);
+
+    const nodes = state.nodes;
+    let nearestIndex = null;
+    if (state.mouseYRatio != null && nodes.length) {
+        let best = 0;
+        for (let i = 1; i < nodes.length; i++) {
+            if (Math.abs(nodes[i].topRatio - state.mouseYRatio) < Math.abs(nodes[best].topRatio - state.mouseYRatio)) best = i;
+        }
+        nearestIndex = nodes[best].index;
+    }
+
+    for (const node of nodes) {
+        const dot = document.createElement('div');
+        const isUser = node.msg && node.msg.role === 'user';
+        dot.className = 'chat-minimap-dot ' + (isUser ? 'is-user' : 'is-assistant') + (state.hovered && nearestIndex === node.index ? ' is-nearest' : '');
+        dot.style.top = (node.topRatio * 100) + '%';
+        el.appendChild(dot);
+    }
+
+    if (state.hovered && nodes.length) {
+        const minimapHeightPx = el.clientHeight || 600;
+        const positions = nodes.map((n) => Math.round(n.topRatio * minimapHeightPx - TOOLTIP_HEIGHT / 2));
+        for (let pass = 0; pass < 10; pass++) {
+            for (let i = 1; i < positions.length; i++) {
+                const minTop = positions[i - 1] + TOOLTIP_HEIGHT + TOOLTIP_GAP;
+                if (positions[i] < minTop) positions[i] = minTop;
+            }
+            for (let i = positions.length - 2; i >= 0; i--) {
+                const maxTop = positions[i + 1] - TOOLTIP_HEIGHT - TOOLTIP_GAP;
+                if (positions[i] > maxTop) positions[i] = maxTop;
+            }
+        }
+        for (let i = 0; i < positions.length; i++) {
+            positions[i] = Math.max(0, Math.min(minimapHeightPx - TOOLTIP_HEIGHT, positions[i]));
+        }
+        nodes.forEach((node, i) => {
+            const preview = messagePreview(node.msg);
+            if (!preview) return;
+            const isNearest = nearestIndex === node.index;
+            const tip = document.createElement('div');
+            tip.className = 'chat-minimap-tooltip' + (isNearest ? ' is-nearest' : '') + (node.msg.role === 'user' ? ' is-user' : ' is-assistant');
+            tip.style.top = positions[i] + 'px';
+            tip.style.width = TOOLTIP_WIDTH + 'px';
+            tip.textContent = preview;
+            el.appendChild(tip);
+        });
+    }
+}

package/src/components/chat.js

@@ -7,10 +7,11 @@ import { initializeCachesEagerly, getCacheStats } from '../markdown-cache.js';
 import { register } from '../debug.js';
 import { Icon } from './shell.js';
 import { fmtFileSize } from './files.js';
-import { EmojiPicker } from './overlay-primitives.js';
+import { EmojiPicker, CommandPalette } from './overlay-primitives.js';
 import { t } from '../i18n.js';
 import { renderMessagePart as sharedRenderMessagePart, safeUrl as sharedSafeUrl, renderInline as sharedRenderInline, injectCodeCopy as sharedInjectCodeCopy } from './chat-message-parts.js';
 import { avatarInitial } from './content.js';
+import { extractAtQuery, filterFileEntries, buildAtInsertText } from '../file-mention.js';
 
 // Matches a trailing `:keyword` at the end of the composer draft (optionally
 // preceded by whitespace/start-of-string) so typing `:smile` opens an inline

package/src/components/editor-primitives.js

@@ -32,7 +32,7 @@ export function ToolbarRow(...actions) {
     return h('div', { class: 'ds-ep-toolbar-row', role: 'toolbar' }, ...kids(flat));
 }
 
-export function Tabs({ items = [], active, onChange, children, 'aria-label': ariaLabel } = {}) {
+export function Tabs({ items = [], active, onChange, children, 'aria-label': ariaLabel, onClose, scroll = false } = {}) {
     // Roving tabindex + arrow nav per WAI-ARIA tabs pattern.
     // Only the active tab is in the tab order; arrows move focus + activate.
     const activeIdx = Math.max(0, items.findIndex(it => it.id === active));
@@ -76,21 +76,48 @@ export function Tabs({ items = [], active, onChange, children, 'aria-label': ari
         ind.style.top = (head.offsetTop + head.offsetHeight - 2) + 'px';
         head.classList.add('has-slider');
     };
+    // scroll=true: tabs size to content (min/max-width) instead of stretching
+    // equally (flex:1) — the shape pi-web's TabBar uses for an open-file strip
+    // where tab count is unbounded and overflow-x scroll (already on
+    // .ds-ep-tabs-head) needs real per-tab widths to have something to scroll.
+    // onClose: per-item close affordance — a close button plus middle-click
+    // (auxclick button 1) to close, matching pi-web's TabBar. Opt-in: passing
+    // onClose without scroll still renders close buttons on the flex:1 tabs.
+    const closable = typeof onClose === 'function';
     return h('div', { class: 'ds-ep-tabs', ref: positionSlider },
-        h('div', { class: 'ds-ep-tabs-head', role: 'tablist', 'aria-label': ariaLabel || 'tabs' },
-            ...items.map((it, idx) => h('button', {
+        h('div', { class: 'ds-ep-tabs-head' + (scroll ? ' scroll' : ''), role: 'tablist', 'aria-label': ariaLabel || 'tabs' },
+            ...items.map((it, idx) => h('span', {
                 key: it.id,
-                type: 'button',
-                class: 'ds-ep-tab' + (it.id === active ? ' active' : ''),
-                role: 'tab',
-                id: 'tab-' + it.id,
-                'aria-selected': it.id === active ? 'true' : 'false',
-                'aria-controls': 'tabpanel-' + it.id,
-                'aria-label': typeof it.label === 'string' ? it.label : ('tab ' + (idx + 1)),
-                tabindex: idx === activeIdx ? '0' : '-1',
-                onclick: () => onChange && onChange(it.id),
-                onkeydown: (e) => onTabKeyDown(e, idx)
-            }, it.label))
+                class: 'ds-ep-tab-wrap' + (it.id === active ? ' active' : ''),
+                onmousedown: closable ? (e) => { if (e.button === 1) e.preventDefault(); } : null,
+                onauxclick: closable ? (e) => {
+                    if (e.button !== 1) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onClose(it.id);
+                } : null
+            },
+                h('button', {
+                    type: 'button',
+                    class: 'ds-ep-tab' + (it.id === active ? ' active' : ''),
+                    role: 'tab',
+                    id: 'tab-' + it.id,
+                    title: typeof it.label === 'string' ? it.label : undefined,
+                    'aria-selected': it.id === active ? 'true' : 'false',
+                    'aria-controls': 'tabpanel-' + it.id,
+                    'aria-label': typeof it.label === 'string' ? it.label : ('tab ' + (idx + 1)),
+                    tabindex: idx === activeIdx ? '0' : '-1',
+                    onclick: () => onChange && onChange(it.id),
+                    onkeydown: (e) => onTabKeyDown(e, idx)
+                }, it.label),
+                closable ? h('button', {
+                    type: 'button',
+                    class: 'ds-ep-tab-close',
+                    title: 'Close',
+                    'aria-label': 'Close ' + (typeof it.label === 'string' ? it.label : 'tab'),
+                    onclick: (e) => { e.stopPropagation(); onClose(it.id); }
+                }, Icon('x', { size: 14 })) : null
+            ))
         ),
         // The sliding underline — child of the outer column (see positionSlider).
         // Keyed + decorative. Renders at 0-width until positioned (no-JS: hidden).

package/src/components/files-modals.js

@@ -303,7 +303,20 @@ export function FilePreviewMedia({ src, type = 'other', name } = {}) {
     );
 }
 
-export function FilePreviewCode({ content = '', lang, filename } = {}) {
+// FilePreviewCode — the code/source pane. Two additive, opt-in affordances
+// ported from pi-web's FileViewer (behavior only, not its React/SSE plumbing):
+//   wrap        : host-controlled wrap-lines toggle. Pass `wrap` (current
+//                 state) + `onWrapToggle` to show the control; omitted host
+//                 keeps the old always-'pre' behavior (no regression).
+//   previewHtml : when the host has already rendered markdown/HTML to a safe
+//                 HTML string (e.g. via markdown-cache.js's
+//                 renderMarkdownCached, or a sanitized srcDoc for raw HTML
+//                 files) it passes it here + `previewLabel` (defaults
+//                 'preview') to get a source/preview mode switcher, mirroring
+//                 pi-web's DisplayMode tabs. This component never renders
+//                 unsanitized markdown itself — that stays the host's job
+//                 (chat.js already owns the sanitize+render pipeline).
+export function FilePreviewCode({ content = '', lang, filename, wrap, onWrapToggle, previewHtml, previewLabel = 'preview', mode, onModeChange } = {}) {
     // A filename/lang header matching the chat CodeNode's .chat-code-head, plus
     // the same copy control (chat A1/A2 ship this run, so preview matches for
     // full cross-surface consistency).
@@ -313,13 +326,37 @@ export function FilePreviewCode({ content = '', lang, filename } = {}) {
         if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done).catch(() => {});
         else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: legacy execCommand copy fallback unsupported, nothing more to try */ } }
     };
+    const hasPreview = previewHtml != null && onModeChange;
+    const activeMode = hasPreview ? (mode || 'source') : 'source';
+    const modeSwitch = hasPreview ? h('div', { class: 'ds-preview-mode-switch', role: 'group', 'aria-label': 'file view mode' },
+        h('button', { type: 'button', class: 'ds-preview-mode-btn' + (activeMode === 'source' ? ' active' : ''),
+            'aria-pressed': activeMode === 'source' ? 'true' : 'false', onclick: () => onModeChange('source') }, 'source'),
+        h('button', { type: 'button', class: 'ds-preview-mode-btn' + (activeMode === 'preview' ? ' active' : ''),
+            'aria-pressed': activeMode === 'preview' ? 'true' : 'false', onclick: () => onModeChange('preview') }, previewLabel)
+    ) : null;
+    const wrapCtl = (onWrapToggle && activeMode === 'source') ? h('button', {
+        type: 'button', class: 'chat-code-copy ds-preview-wrap-toggle' + (wrap ? ' active' : ''),
+        title: wrap ? 'disable word wrap' : 'enable word wrap',
+        'aria-label': wrap ? 'disable word wrap' : 'enable word wrap',
+        'aria-pressed': wrap ? 'true' : 'false',
+        onclick: () => onWrapToggle(!wrap),
+    }, 'wrap') : null;
     return h('div', { class: 'ds-preview-code-wrap' },
         h('div', { class: 'chat-code-head ds-preview-code-head' },
             h('span', { class: 'lang' }, lang || 'text'),
             filename ? h('span', { class: 'name' }, filename) : null,
             h('span', { class: 'spread' }),
+            modeSwitch,
+            wrapCtl,
             h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')),
-        codeBody({ content, lang })
+        activeMode === 'preview'
+            // webjsx has no innerHTML prop — set it imperatively via ref, same
+            // pattern as chat-message-parts.js/community.js. `previewHtml` is
+            // the HOST's already-sanitized HTML (e.g. via markdown-cache.js's
+            // renderMarkdownCached, which owns its own sanitize step); this
+            // component never sanitizes or fetches on its own.
+            ? h('div', { class: 'ds-preview-html', ref: (el) => { if (el) el.innerHTML = previewHtml; } })
+            : codeBody({ content, lang, wrap })
     );
 }
 
@@ -327,7 +364,7 @@ export function FilePreviewCode({ content = '', lang, filename } = {}) {
 // A ref triggers Prism over the <code> after mount (the bundle only auto-runs
 // Prism in the chat path), so the file preview is token-colored like Claude
 // Code's file pane. lineNumbers defaults on for code, off for plaintext.
-function codeBody({ content = '', lang } = {}) {
+function codeBody({ content = '', lang, wrap = false } = {}) {
     const wantGutter = !!lang;
     const lineCount = content ? content.split('\n').length : 1;
     const gutter = wantGutter
@@ -338,7 +375,10 @@ function codeBody({ content = '', lang } = {}) {
         if (!el) return;
         try { highlightAllUnder(el); } catch { /* swallow: syntax highlighting is a progressive enhancement, plain code still renders */ }
     };
-    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') + (wantGutter ? ' has-gutter' : ''), ref: highlightRef },
+    // wrap: ported from pi-web's wrapLines toggle — pre-wrap + anywhere-break
+    // instead of the default horizontal-scroll 'pre', for long unbroken lines
+    // (minified JS, long log lines) that are easier to read wrapped.
+    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') + (wantGutter ? ' has-gutter' : '') + (wrap ? ' is-wrapped' : ''), ref: highlightRef },
         gutter,
         h('code', { class: lang ? 'language-' + lang : '' }, content));
 }

package/src/components/git-status.js

@@ -33,16 +33,32 @@ function statusMeta(status) {
 const EXT_TYPE = {
     js: 'code', mjs: 'code', cjs: 'code', ts: 'code', tsx: 'code', jsx: 'code',
     py: 'code', rs: 'code', go: 'code', java: 'code', c: 'code', cpp: 'code', h: 'code',
-    css: 'code', scss: 'code', html: 'code', json: 'code', yml: 'code', yaml: 'code', toml: 'code', sh: 'code',
-    md: 'document', mdx: 'document', txt: 'text',
-    png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', svg: 'image', webp: 'image',
-    mp4: 'video', mov: 'video', webm: 'video',
-    mp3: 'audio', wav: 'audio',
-    zip: 'archive', tar: 'archive', gz: 'archive',
+    css: 'code', less: 'code', scss: 'code', html: 'code', htm: 'code', json: 'code', jsonl: 'code',
+    yml: 'code', yaml: 'code', toml: 'code', sh: 'code', bash: 'code', zsh: 'code', fish: 'code',
+    sql: 'code', graphql: 'code', gql: 'code', tf: 'code', hcl: 'code',
+    md: 'document', mdx: 'document', txt: 'text', pdf: 'document', docx: 'document', doc: 'document',
+    png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', svg: 'image', webp: 'image', bmp: 'image', ico: 'image', avif: 'image',
+    mp4: 'video', mov: 'video', webm: 'video', avi: 'video', mkv: 'video',
+    mp3: 'audio', wav: 'audio', flac: 'audio', ogg: 'audio', m4a: 'audio',
+    zip: 'archive', tar: 'archive', gz: 'archive', '7z': 'archive', rar: 'archive', bz2: 'archive',
+};
+
+// Filenames (not extensions) that need a specific bucket regardless of any
+// trailing dot-segment — lockfiles have no meaningful "extension" split and
+// dotfiles like .gitignore/.env would otherwise fall through to 'other'.
+const NAME_TYPE = {
+    'package-lock.json': 'code', 'yarn.lock': 'code', 'bun.lock': 'code',
+    'pnpm-lock.yaml': 'code', 'cargo.lock': 'code', 'composer.lock': 'code',
+    '.gitignore': 'text', '.gitattributes': 'text', '.gitmodules': 'text',
+    '.env': 'text', '.editorconfig': 'text', '.npmrc': 'text',
 };
 
 function fileTypeFromPath(pathname = '') {
     const base = pathname.split('/').pop() || pathname;
+    const lower = base.toLowerCase();
+    if (NAME_TYPE[lower]) return NAME_TYPE[lower];
+    if (lower.startsWith('.env.')) return 'text';
+    if (lower === 'dockerfile' || lower.startsWith('dockerfile.')) return 'code';
     const dot = base.lastIndexOf('.');
     if (dot <= 0) return 'other';
     return EXT_TYPE[base.slice(dot + 1).toLowerCase()] || 'other';

package/src/components/interaction-primitives.js

@@ -318,6 +318,33 @@ export function ShortcutList({ shortcuts = [] } = {}) {
             h('span', { class: 'ds-kbd-label' }, s.desc || s.description || s.label || ''))));
 }
 
+// ---------------------------------------------------------------------------
+// Mobile-breakpoint detection — subscribe-style (webjsx has no hooks/
+// useSyncExternalStore equivalent; consumers re-render on the callback).
+// Builds on editor-primitives.js's BP_SM (480px) rather than pi-web's
+// hardcoded 640px so it stays one source of truth with the Grid/GridItem
+// breakpoint tiers already in this design system.
+// ---------------------------------------------------------------------------
+const MOBILE_QUERY = '(max-width: 480px)';
+
+export function isMobileNow() {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia(MOBILE_QUERY).matches;
+}
+
+// Returns an unsubscribe function, mirroring theme.js's onThemeChange shape.
+export function onMobileChange(cb) {
+    if (typeof window === 'undefined' || !window.matchMedia) return () => {};
+    const mql = window.matchMedia(MOBILE_QUERY);
+    const handler = () => cb(mql.matches);
+    if (mql.addEventListener) mql.addEventListener('change', handler);
+    else mql.addListener(handler);
+    return () => {
+        if (mql.removeEventListener) mql.removeEventListener('change', handler);
+        else mql.removeListener(handler);
+    };
+}
+
 export function useKeyboardShortcutHelp() { return { registry: Array.from(SHORTCUT_REGISTRY) }; }
 export function ShortcutHelpDialog({ open = false, onClose, registry } = {}) {
     if (!open) return null;