@khorsheed/dsh-client-message-tools 0.3.3 → 0.3.5

package/lib/types/client/UserMessageView.js

@@ -4,20 +4,25 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * the plugin's own 'message-tools-edited' and 'message-tools-restored' rows):
  * a visual clone of the official bubble chrome — ui-conversation ships no
  * public components, so the structure is replicated against ui-primitives
- * platform modules, with historical images rendered through the owner-prop
- * `renderMessageImages` attachment slot (rc8 contract) — plus the
- * copy/edit/withdraw action row and the「已编辑」/「已恢复」labels. User
- * messages inside a withdrawn span render nothing; the withdrawal divider
- * marks the spot.
+ * platform modules — plus the copy/edit/withdraw action row and the
+ * 「已编辑」/「已恢复」labels. Attached images render through the host's
+ * gallery surface (see message-images.ts): the pre-0.2.1 `renderMessageImages`
+ * owner prop when the host still passes it, otherwise the root-scoped
+ * `conversation.images.content` factory. User messages inside a withdrawn
+ * span render nothing; the withdrawal divider marks the spot. A long message
+ * folds behind a fade; a small chevron seated in the bubble's bottom-right
+ * corner expands / collapses it (see fold.ts).
  */
-import { memo, useEffect, useRef, useState } from 'react';
+import { Fragment, memo, useEffect, useRef, useState } from 'react';
 import { shallowEqual } from '@deepseek-ai/dsh-client-store';
 import { Button, JsonBlock, RiskConfirmation, Tooltip, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives';
-import { IconCheckOutlineMedium, IconCopyOutlineMedium, IconEditOutlineMedium } from './icons.js';
+import { IconCheckOutlineMedium, IconChevronDownOutlineMedium, IconCopyOutlineMedium, IconEditOutlineMedium } from './icons.js';
 import { IconUndoOutlineMedium } from './icons-local.js';
 import { foldHiddenRanges, isSeqHidden } from './withdrawn-node.js';
 import { chatHookOf } from './chat-hook.js';
+import { renderImageGallery } from './message-images.js';
 import { withdrawAndBackfill } from './withdraw-backfill.js';
+import { foldable, foldChoices, selectNewestUserSeq } from './fold.js';
 import { ModelChip } from './ModelChip.js';
 import css from './UserMessageView.module.css';
 /** Selector identity kept module-level so uSES memoization holds. */
@@ -41,8 +46,30 @@ function contentParts(content) {
     }
     return { text: texts.join(''), images, rest };
 }
-/** Plaintext `/name` and `@name` word-boundary tokens decorate as chips; the logged text stays the truth. */
+/** The host's canonical session mention, `@[title](dsh-session:…)` (the @ menu's session chip, sent as text). */
+const SESSION_MENTION = /@\[((?:\\.|[^\\\]\n])+)\]\(dsh-session:[^)\s]+\)/gu;
+/**
+ * A session mention shows as a chip with its title (the host's own user-text
+ * rule does the same); the rest of the text keeps the token projection.
+ */
 function projectUserText(text) {
+    const parts = [];
+    let cursor = 0;
+    for (const match of text.matchAll(SESSION_MENTION)) {
+        if (match.index > cursor)
+            parts.push(_jsx(Fragment, { children: projectTokens(text.slice(cursor, match.index)) }, `t${cursor}`));
+        const label = match[1].replace(/\\(.)/gu, '$1');
+        parts.push(_jsxs("span", { className: css.refChip, "data-ref-chip": "session", title: label, children: ["@", label] }, `s${match.index}`));
+        cursor = match.index + match[0].length;
+    }
+    if (parts.length === 0)
+        return projectTokens(text);
+    if (cursor < text.length)
+        parts.push(_jsx(Fragment, { children: projectTokens(text.slice(cursor)) }, `t${cursor}`));
+    return _jsx(_Fragment, { children: parts });
+}
+/** Plaintext `/name` and `@name` word-boundary tokens decorate as chips; the logged text stays the truth. */
+function projectTokens(text) {
     const re = /(^|\s)([/@][\w-]+)(?=\s|$)/g;
     const parts = [];
     let cursor = 0;
@@ -134,10 +161,14 @@ function InlineEditor({ initial, busy, t, onSave, onCancel, models }) {
                 } }), _jsxs("div", { className: css.editorActions, children: [_jsx("div", { className: css.editorTrailing, children: models !== undefined && _jsx(ModelChip, { ...models }) }), _jsx(Button, { variant: "outline", disabled: busy, onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: "primary", disabled: busy || draft.trim() === '', onClick: save, children: t('editor.save') })] })] }));
 }
 /** The shadowed user-message view: bubble plus copy/edit/withdraw actions. */
-export const UserMessageView = memo(function UserMessageView({ node, renderMessageImages, t, editMessage, withdrawMessage, backfillDraft, useModelDirectory, modelsAvailable, loadModels, selectModel, ...standard }) {
+export const UserMessageView = memo(function UserMessageView({ node, renderMessageImages, loadImage, renderFactorySlot, t, editMessage, withdrawMessage, backfillDraft, foldScope, useModelDirectory, modelsAvailable, loadModels, selectModel, ...standard }) {
     // Chat data lives in the `useChat` session standard prop on host 0.1.2
     // (the helper degrades to the frozen empty snapshot without it).
-    const ranges = chatHookOf(standard)(selectHiddenRanges, shallowEqual);
+    const useChat = chatHookOf(standard);
+    const ranges = useChat(selectHiddenRanges, shallowEqual);
+    const newestUserSeq = useChat(selectNewestUserSeq);
+    // The human's own choice for this message (remembered), else the default.
+    const [chosen, setChosen] = useState(() => foldChoices.read(foldScope)[String(node.data.seq)]);
     const [editing, setEditing] = useState(false);
     const [confirming, setConfirming] = useState(false);
     const [acknowledged, setAcknowledged] = useState(false);
@@ -149,6 +180,14 @@ export const UserMessageView = memo(function UserMessageView({ node, renderMessa
     const { text, images, rest } = contentParts(data.content);
     const truncated = (total) => t('json.truncated', { total });
     const showBubble = text !== '' || rest.length > 0;
+    const collapsible = foldable(text);
+    // The newest user message reads unfolded until the next one arrives.
+    const expanded = chosen ?? data.seq >= newestUserSeq;
+    const clamped = collapsible && !expanded;
+    const toggle = (next) => {
+        setChosen(next);
+        foldChoices.write(foldScope, data.seq, next);
+    };
     const saveEdit = (newText) => {
         setBusy(true);
         setFailed(null);
@@ -175,5 +214,5 @@ export const UserMessageView = memo(function UserMessageView({ node, renderMessa
                             ? { useModelDirectory, loadModels, selectModel, t }
                             : undefined }), failed === 'edit' && _jsx("div", { className: css.actionError, role: "status", children: t('error.edit') })] }) }));
     }
-    return (_jsxs("div", { className: css.userRow, "data-time-hover-root": true, children: [_jsxs("div", { className: css.userStack, children: [node.kind === 'message-tools-edited' && (_jsx("div", { className: css.editedLabel, children: t('edited.badge') })), node.kind === 'message-tools-restored' && (_jsx("div", { className: css.editedLabel, children: t('withdrawn.restored') })), images.length > 0 ? renderMessageImages({ images, align: 'end' }) : null, showBubble && (_jsxs("div", { className: css.bubble, children: [projectUserText(text), rest.map((block, index) => (_jsx(JsonBlock, { label: t('message.extraBlock'), payload: block, truncatedLabel: truncated }, index)))] }))] }), _jsxs("div", { className: css.actions, children: [_jsx(CopyButton, { text: text, t: t }), _jsx(Tooltip, { label: t('edit'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('edit'), onClick: () => { setFailed(null); setEditing(true); }, children: _jsx(IconEditOutlineMedium, {}) }) }), _jsx(Tooltip, { label: t('action.withdraw'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('action.withdraw'), onClick: () => { setFailed(null); setAcknowledged(false); setConfirming(true); }, children: _jsx(IconUndoOutlineMedium, {}) }) })] }), failed === 'withdraw' && _jsx("div", { className: css.actionError, role: "status", children: t('error.withdraw') }), confirming && (_jsx(RiskConfirmation, { open: true, title: t('withdraw.title'), description: t('withdraw.description'), acknowledgeLabel: t('withdraw.acknowledge'), cancelLabel: t('cancel'), closeLabel: t('close'), confirmLabel: t('withdraw.confirm'), acknowledged: acknowledged, disabled: busy, onAcknowledgedChange: setAcknowledged, onCancel: () => { setConfirming(false); setAcknowledged(false); }, onConfirm: confirmWithdraw }))] }));
+    return (_jsxs("div", { className: css.userRow, "data-time-hover-root": true, children: [_jsxs("div", { className: css.userStack, children: [node.kind === 'message-tools-edited' && (_jsx("div", { className: css.editedLabel, children: t('edited.badge') })), node.kind === 'message-tools-restored' && (_jsx("div", { className: css.editedLabel, children: t('withdrawn.restored') })), images.length > 0 ? renderImageGallery(renderMessageImages, renderFactorySlot, loadImage, { images, align: 'end' }) : null, showBubble && (_jsxs("div", { className: clamped ? `${css.bubble} ${css.clamped}` : css.bubble, children: [projectUserText(text), rest.map((block, index) => (_jsx(JsonBlock, { label: t('message.extraBlock'), payload: block, truncatedLabel: truncated }, index))), clamped && _jsx("div", { className: css.fade, "aria-hidden": true, onClick: () => { toggle(true); } }), collapsible && (_jsx("div", { className: css.foldBar, children: _jsx(Tooltip, { label: expanded ? t('fold.collapse') : t('fold.expand'), side: "bottom", children: _jsx("button", { type: "button", className: css.foldToggle, "aria-label": expanded ? t('fold.collapse') : t('fold.expand'), "aria-expanded": expanded, onClick: () => { toggle(!expanded); }, children: _jsx(IconChevronDownOutlineMedium, {}) }) }) }))] }))] }), _jsxs("div", { className: css.actions, children: [_jsx(CopyButton, { text: text, t: t }), _jsx(Tooltip, { label: t('edit'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('edit'), onClick: () => { setFailed(null); setEditing(true); }, children: _jsx(IconEditOutlineMedium, {}) }) }), _jsx(Tooltip, { label: t('action.withdraw'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('action.withdraw'), onClick: () => { setFailed(null); setAcknowledged(false); setConfirming(true); }, children: _jsx(IconUndoOutlineMedium, {}) }) })] }), failed === 'withdraw' && _jsx("div", { className: css.actionError, role: "status", children: t('error.withdraw') }), confirming && (_jsx(RiskConfirmation, { open: true, title: t('withdraw.title'), description: t('withdraw.description'), acknowledgeLabel: t('withdraw.acknowledge'), cancelLabel: t('cancel'), closeLabel: t('close'), confirmLabel: t('withdraw.confirm'), acknowledged: acknowledged, disabled: busy, onAcknowledgedChange: setAcknowledged, onCancel: () => { setConfirming(false); setAcknowledged(false); }, onConfirm: confirmWithdraw }))] }));
 });

package/lib/types/client/WithdrawnDividerView.d.ts

@@ -9,10 +9,13 @@
  * restoration is impossible — and the divider carries a「已恢复」badge while
  * a live restore row cites the span (withdrawing the restored rows clears
  * the badge and re-enables the action). The「重新编辑」action was removed
- * once withdrawals backfill the draft automatically.
+ * once withdrawals backfill the draft automatically. Replayed images render
+ * through the host's gallery surface (see message-images.ts): the pre-0.2.1
+ * `renderMessageImages` owner prop when the host still passes it, otherwise
+ * the root-scoped `conversation.images.content` factory.
  */
 import { type ReactNode } from 'react';
 import type { WithdrawnDividerViewProps } from './slots.ts';
 /** The withdrawal divider: collapsed marker row plus the expandable replay. */
-export declare function WithdrawnDividerView({ node, t, restoreMessage, renderMessageImages, ...standard }: WithdrawnDividerViewProps): ReactNode;
+export declare function WithdrawnDividerView({ node, t, restoreMessage, renderMessageImages, loadImage, renderFactorySlot, ...standard }: WithdrawnDividerViewProps): ReactNode;
 //# sourceMappingURL=WithdrawnDividerView.d.ts.map

package/lib/types/client/WithdrawnDividerView.js

@@ -10,7 +10,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * restoration is impossible — and the divider carries a「已恢复」badge while
  * a live restore row cites the span (withdrawing the restored rows clears
  * the badge and re-enables the action). The「重新编辑」action was removed
- * once withdrawals backfill the draft automatically.
+ * once withdrawals backfill the draft automatically. Replayed images render
+ * through the host's gallery surface (see message-images.ts): the pre-0.2.1
+ * `renderMessageImages` owner prop when the host still passes it, otherwise
+ * the root-scoped `conversation.images.content` factory.
  */
 import { useState } from 'react';
 import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
@@ -18,14 +21,11 @@ import { IconChevronDownOutlineMedium, IconChevronRightOutlineMedium } from './i
 import { IconUndoOutlineMedium } from './icons-local.js';
 import { collectWithdrawnEntries, countHiddenInSpan, foldHiddenRanges, hasRestoreForSpan, isRestoreSuperseded, } from './withdrawn-node.js';
 import { chatHookOf } from './chat-hook.js';
+import { renderImageGallery } from './message-images.js';
 import css from './WithdrawnDividerView.module.css';
 /** The withdrawal divider: collapsed marker row plus the expandable replay. */
-export function WithdrawnDividerView({ node, t, restoreMessage, renderMessageImages, ...standard }) {
+export function WithdrawnDividerView({ node, t, restoreMessage, renderMessageImages, loadImage, renderFactorySlot, ...standard }) {
     const data = node.data;
-    // The gallery closure is a required owner prop of every `conversation.chat.node`
-    // renderer; widening it to `| undefined` keeps the degrade path explicit — a
-    // composition without the attachment UI replays text only instead of throwing.
-    const renderImages = renderMessageImages;
     const [expanded, setExpanded] = useState(false);
     const [entries, setEntries] = useState(null);
     const [busy, setBusy] = useState(false);
@@ -65,5 +65,5 @@ export function WithdrawnDividerView({ node, t, restoreMessage, renderMessageIma
             .catch(() => { setFailed(true); })
             .finally(() => { setBusy(false); });
     };
-    return (_jsxs("div", { className: css.row, children: [_jsxs("button", { type: "button", className: css.marker, "aria-expanded": expanded, "aria-label": t('withdrawn.expand'), onClick: toggle, children: [_jsx("span", { className: css.leading, "aria-hidden": true, children: expanded ? _jsx(IconChevronDownOutlineMedium, {}) : _jsx(IconChevronRightOutlineMedium, {}) }), _jsx("span", { className: css.title, children: t('withdrawn.divider', { count }) }), restored && (_jsxs("span", { className: css.badge, children: [_jsx(IconUndoOutlineMedium, {}), t('withdrawn.restored')] }))] }), expanded && (_jsxs("div", { className: css.body, children: [entries === null || entries.length === 0 ? (_jsx("div", { className: css.empty, children: t('withdrawn.empty') })) : (entries.map((entry, index) => (_jsxs("div", { className: entry.kind === 'user' ? css.entryUser : css.entryAssistant, children: [_jsx("div", { className: css.entryKind, children: entry.kind === 'user' ? t('withdrawn.entryUser') : t('withdrawn.entryAssistant') }), entry.text !== '' && _jsx("div", { className: css.textRun, children: entry.text }), renderImages !== undefined && entry.images.length > 0 && (_jsx("div", { className: css.entryImages, children: renderImages({ images: entry.images, align: 'end' }) }))] }, index)))), _jsxs("div", { className: css.restoreRow, children: [_jsx(Button, { variant: "outline", disabled: busy || restored || superseded, onClick: restore, children: t('withdrawn.restore') }), failed && _jsx("span", { className: css.restoreFailed, role: "status", children: t('withdrawn.restoreFailed') })] })] }))] }));
+    return (_jsxs("div", { className: css.row, children: [_jsxs("button", { type: "button", className: css.marker, "aria-expanded": expanded, "aria-label": t('withdrawn.expand'), onClick: toggle, children: [_jsx("span", { className: css.leading, "aria-hidden": true, children: expanded ? _jsx(IconChevronDownOutlineMedium, {}) : _jsx(IconChevronRightOutlineMedium, {}) }), _jsx("span", { className: css.title, children: t('withdrawn.divider', { count }) }), restored && (_jsxs("span", { className: css.badge, children: [_jsx(IconUndoOutlineMedium, {}), t('withdrawn.restored')] }))] }), expanded && (_jsxs("div", { className: css.body, children: [entries === null || entries.length === 0 ? (_jsx("div", { className: css.empty, children: t('withdrawn.empty') })) : (entries.map((entry, index) => (_jsxs("div", { className: entry.kind === 'user' ? css.entryUser : css.entryAssistant, children: [_jsx("div", { className: css.entryKind, children: entry.kind === 'user' ? t('withdrawn.entryUser') : t('withdrawn.entryAssistant') }), entry.text !== '' && _jsx("div", { className: css.textRun, children: entry.text }), entry.images.length > 0 && (_jsx("div", { className: css.entryImages, children: renderImageGallery(renderMessageImages, renderFactorySlot, loadImage, { images: entry.images, align: 'end' }) }))] }, index)))), _jsxs("div", { className: css.restoreRow, children: [_jsx(Button, { variant: "outline", disabled: busy || restored || superseded, onClick: restore, children: t('withdrawn.restore') }), failed && _jsx("span", { className: css.restoreFailed, role: "status", children: t('withdrawn.restoreFailed') })] })] }))] }));
 }

package/lib/types/client/chat-hook.js

@@ -9,6 +9,9 @@ const EMPTY_CHAT = {
     nodes: {
         get: () => undefined,
         source: () => ({ getSnapshot: () => undefined, subscribe: () => () => { } }),
+        // Host 0.2.1 added this required store face; the frozen empty snapshot
+        // reports every node as not belonging to the latest exchange.
+        bottomSource: () => ({ getSnapshot: () => false, subscribe: () => () => { } }),
         turnDataSource: () => ({ getSnapshot: () => [], subscribe: () => () => { } }),
         processSource: () => ({ getSnapshot: () => undefined, subscribe: () => () => { } }),
         values: () => [],

package/lib/types/client/dom-hider.d.ts

@@ -2,10 +2,16 @@
  * DOM hider: hide EVERY chat row whose node anchor falls inside a withdrawn
  * span — all node kinds, not just user messages — through a dynamic
  * stylesheet keyed on the row's `data-chat-flow-key` attribute
- * (ChatNodeSeat.tsx). The projection itself offers no suppression seam (see
- * README), so this works at the DOM layer. The attribute is an undocumented
- * surface: the first time a non-empty rule set is computed, the hider probes
- * for it (after a frame, so React has committed). A page restored onto a tab
+ * (ChatNodeSeat.tsx). Host 0.1.7-alpha.1's conversation groups wrap a turn's
+ * process rows in a Group seat whose CONTAINER carries the group key as its
+ * flow key (ChatGroupSeat.tsx): member rules hide the rows inside, but the
+ * container itself (the「已调用工具」fold header) would show through, so the
+ * rule set also covers fully-hidden groups' container keys plus the composite
+ * `["<nodeKey>","<groupPart>"]` row keys the plain node-key rules never
+ * reach. The projection itself offers no suppression seam (see README), so
+ * this works at the DOM layer. The attribute is an undocumented surface: the
+ * first time a non-empty rule set is computed, the hider probes for it (after
+ * a frame, so React has committed). A page restored onto a tab
  * where the chat rows are not mounted yet (the trace tab, or the chat area
  * still mounting) makes that first probe miss, so a miss does NOT disable
  * the hider outright: it enters a bounded retry — a MutationObserver waits
@@ -20,6 +26,7 @@
  */
 import type { Context } from '@deepseek-ai/cordis';
 import type { ChatConversationViewNode } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type { ConversationGroupedView } from '@deepseek-ai/dsh-client-ui-conversation/client';
 /**
  * Flow keys of every chat node inside a hidden span. The withdrawal divider
  * itself (`message-tools-withdrawn`, anchored at the span's exclusive end) is
@@ -34,6 +41,21 @@ import type { ChatConversationViewNode } from '@deepseek-ai/dsh-client-ui-chat/c
  * @returns the flow keys to hide, in node order.
  */
 export declare function hiddenFlowKeys(nodes: readonly ChatConversationViewNode[], ranges?: readonly number[]): string[];
+/**
+ * Flow keys the grouped rendering (host 0.1.7-alpha.1's conversation groups)
+ * adds on top of {@link hiddenFlowKeys}. A Group seat's container row carries
+ * the GROUP key as its `data-chat-flow-key`, so member rules leave the fold
+ * header visible: hide the container when every member's node key is hidden
+ * (a group straddling a span boundary keeps its header for the visible
+ * members). A member's composite groupPart row (`["<nodeKey>","<part>"]`,
+ * ChatNodeSeat — e.g. the reasoning pane) is never reached by the plain
+ * node-key rule either, so hidden members contribute those keys on top,
+ * whether or not their group hides as a whole.
+ * @param view - the chat target's grouped reader (undefined on pre-group hosts).
+ * @param hiddenNodeKeys - node keys the plain rules already hide.
+ * @returns additional flow keys to hide, in root-entry order.
+ */
+export declare function hiddenGroupFlowKeys(view: ConversationGroupedView<unknown> | undefined, hiddenNodeKeys: ReadonlySet<string>): string[];
 /**
  * Render the display rules for one rule set.
  * @param keys - flow keys to hide.
@@ -53,7 +75,8 @@ export interface DomHiderOptions {
 }
 /**
  * Install the hider: one shared style element, rebound whenever the selected
- * session changes, rewritten only when the span set or the node count moves.
+ * session changes, rewritten only when the span set, the node count, or the
+ * hidden group keys move.
  * @param ctx - client root context (reads the sessions service).
  * @param options - probe retry tuning.
  * @returns disposer removing the stylesheet and every subscription.

package/lib/types/client/dom-hider.js

@@ -49,6 +49,64 @@ export function hiddenFlowKeys(nodes, ranges) {
     }
     return keys;
 }
+/**
+ * Flow keys the grouped rendering (host 0.1.7-alpha.1's conversation groups)
+ * adds on top of {@link hiddenFlowKeys}. A Group seat's container row carries
+ * the GROUP key as its `data-chat-flow-key`, so member rules leave the fold
+ * header visible: hide the container when every member's node key is hidden
+ * (a group straddling a span boundary keeps its header for the visible
+ * members). A member's composite groupPart row (`["<nodeKey>","<part>"]`,
+ * ChatNodeSeat — e.g. the reasoning pane) is never reached by the plain
+ * node-key rule either, so hidden members contribute those keys on top,
+ * whether or not their group hides as a whole.
+ * @param view - the chat target's grouped reader (undefined on pre-group hosts).
+ * @param hiddenNodeKeys - node keys the plain rules already hide.
+ * @returns additional flow keys to hide, in root-entry order.
+ */
+export function hiddenGroupFlowKeys(view, hiddenNodeKeys) {
+    if (view === undefined || hiddenNodeKeys.size === 0)
+        return [];
+    const keys = [];
+    for (const entry of view.entries) {
+        if (entry.kind !== 'group')
+            continue;
+        const members = view.groupSource(entry.key).getSnapshot()?.members ?? [];
+        if (members.length === 0)
+            continue;
+        let hidden = 0;
+        for (const member of members) {
+            if (!hiddenNodeKeys.has(member.key))
+                continue;
+            hidden += 1;
+            if (member.groupPart !== undefined && member.groupPart !== 'response') {
+                keys.push(JSON.stringify([member.key, member.groupPart]));
+            }
+        }
+        if (hidden === members.length)
+            keys.push(entry.key);
+    }
+    return keys;
+}
+/**
+ * The chat target's grouped reader on hosts with conversation groups
+ * (0.1.7-alpha.1); earlier hosts carry no `views.grouped` and degrade to
+ * undefined — their ungrouped rows are covered by the plain node-key rules.
+ * @param ctx - client root context.
+ * @param sessionId - owning session.
+ * @returns the grouped reader, or undefined when the host or session lacks it.
+ */
+function groupedChatViewOf(ctx, sessionId) {
+    const uiConversation = ctx.get('uiConversation');
+    if (uiConversation === undefined)
+        return undefined;
+    try {
+        const views = uiConversation.binding(sessionId).snapshot.getSnapshot().views;
+        return typeof views.grouped === 'function' ? views.grouped('chat') : undefined;
+    }
+    catch {
+        return undefined; // unknown session — the caller's undefined branch
+    }
+}
 /**
  * Render the display rules for one rule set.
  * @param keys - flow keys to hide.
@@ -61,7 +119,8 @@ export function renderHiderRules(keys) {
 }
 /**
  * Install the hider: one shared style element, rebound whenever the selected
- * session changes, rewritten only when the span set or the node count moves.
+ * session changes, rewritten only when the span set, the node count, or the
+ * hidden group keys move.
  * @param ctx - client root context (reads the sessions service).
  * @param options - probe retry tuning.
  * @returns disposer removing the stylesheet and every subscription.
@@ -89,11 +148,19 @@ export function installDomHider(ctx, options = {}) {
         latest = chat;
         const nodes = chat.nodes.values();
         const ranges = foldHiddenRanges(nodes);
-        const nextSignature = `${ranges.join(',')}:${nodes.length}`;
+        const nodeKeys = hiddenFlowKeys(nodes, ranges);
+        // Group membership only moves with node changes, and the assembler runs
+        // group definitions inside the same publish this snapshot reports, so the
+        // grouped reader is current here; its keys join the signature so a
+        // grouping-only delta still rewrites the rules.
+        const groupKeys = activeSession === undefined
+            ? []
+            : hiddenGroupFlowKeys(groupedChatViewOf(ctx, activeSession), new Set(nodeKeys));
+        const nextSignature = `${ranges.join(',')}:${nodes.length}:${groupKeys.join(',')}`;
         if (nextSignature === signature)
             return;
         signature = nextSignature;
-        style.textContent = renderHiderRules(hiddenFlowKeys(nodes, ranges));
+        style.textContent = renderHiderRules([...nodeKeys, ...groupKeys]);
     };
     const probeFound = () => document.querySelector('[data-chat-flow-key]') !== null;
     const stopRetry = () => {

package/lib/types/client/fold.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Long user messages fold: a message past {@link FOLD_CHARS} characters or
+ * {@link FOLD_LINES} lines starts clamped, except the session's newest user
+ * message (what the human just sent stays readable while it is answered; it
+ * folds once the next one arrives). The human's own expand/collapse wins and
+ * is remembered per message in browser storage — a per-viewer convenience:
+ * unreadable storage only means the default applies.
+ */
+import type { ChatSlice } from './chat-hook.ts';
+/** Characters past which a message folds (roughly ten rendered lines). */
+export declare const FOLD_CHARS = 600;
+/** Lines past which a message folds even when short in characters. */
+export declare const FOLD_LINES = 12;
+/** Whether a message's text is long enough to fold. */
+export declare function foldable(text: string): boolean;
+/** Selector: the newest user message's seq (-1 when none). Module-level so uSES memoization holds. */
+export declare function selectNewestUserSeq(chat: ChatSlice): number;
+/** The human's remembered expand/collapse choices, by message seq. */
+export declare const foldChoices: {
+    read(sessionId: string): Record<string, boolean>;
+    write(sessionId: string, seq: number, expanded: boolean): void;
+};
+//# sourceMappingURL=fold.d.ts.map

package/lib/types/client/fold.js

@@ -0,0 +1,44 @@
+/** Characters past which a message folds (roughly ten rendered lines). */
+export const FOLD_CHARS = 600;
+/** Lines past which a message folds even when short in characters. */
+export const FOLD_LINES = 12;
+/** The kinds that render as the human's own message bubble. */
+const USER_KINDS = new Set(['user', 'steering', 'message-tools-edited', 'message-tools-restored']);
+/** Whether a message's text is long enough to fold. */
+export function foldable(text) {
+    return text.length > FOLD_CHARS || text.split('\n').length > FOLD_LINES;
+}
+/** Selector: the newest user message's seq (-1 when none). Module-level so uSES memoization holds. */
+export function selectNewestUserSeq(chat) {
+    let newest = -1;
+    for (const node of chat.nodes.values()) {
+        const seq = node.data?.seq;
+        if (USER_KINDS.has(node.kind) && typeof seq === 'number' && seq > newest)
+            newest = seq;
+    }
+    return newest;
+}
+const KEY_PREFIX = 'dsh-message-tools:fold:';
+/** Choices kept per session (newest messages win): bounds the stored map. */
+const KEEP = 200;
+/** The human's remembered expand/collapse choices, by message seq. */
+export const foldChoices = {
+    read(sessionId) {
+        try {
+            const raw = globalThis.localStorage?.getItem(KEY_PREFIX + sessionId);
+            const parsed = raw == null ? undefined : JSON.parse(raw);
+            return typeof parsed === 'object' && parsed !== null ? parsed : {};
+        }
+        catch {
+            return {};
+        }
+    },
+    write(sessionId, seq, expanded) {
+        try {
+            const choices = { ...foldChoices.read(sessionId), [String(seq)]: expanded };
+            const kept = Object.keys(choices).map(Number).sort((a, b) => b - a).slice(0, KEEP);
+            globalThis.localStorage?.setItem(KEY_PREFIX + sessionId, JSON.stringify(Object.fromEntries(kept.map(key => [key, choices[key]]))));
+        }
+        catch { /* a convenience: never fail the view */ }
+    },
+};

package/lib/types/client/icons.d.ts

@@ -1,6 +1,6 @@
 /**
  * Generated by scripts/sync-icon-artwork.mts from @deepseek-ai/dsh-client-ui-primitives
- * (v0.1.7-rc.1, harness 46a7f68b09) — do not edit by hand. The 0.1.5 and rc.1 host lines
+ * (v0.2.1-rc.1, harness 1600d8a1e1) — do not edit by hand. The 0.1.5 and rc.1 host lines
  * share no icon export name, so the rc.1 artwork is inlined here: pure SVG,
  * no host runtime identity, identical on every line. Re-run the generator
  * after adding an icon import or bumping the harness checkout.

package/lib/types/client/index.js

@@ -176,6 +176,7 @@ export async function apply(ctx) {
                 withdraw: () => withdraw(targetSeq),
             }, ctx.sessions.binding(sessionId)?.session.getSnapshot().running === true),
             backfillDraft: (text) => { backfill(sessionId, text); },
+            foldScope: sessionId,
             modelsAvailable: directory !== undefined,
             loadModels: () => {
                 // Load failures surface on the directory store itself.

package/lib/types/client/locales.d.ts

@@ -21,6 +21,8 @@ export declare const zh: {
     'withdrawn.restoreFailed': string;
     'error.edit': string;
     'edited.badge': string;
+    'fold.expand': string;
+    'fold.collapse': string;
     'error.withdraw': string;
     'model.aria': string;
     'model.menuAria': string;
@@ -65,6 +67,8 @@ export declare const en: {
     'withdrawn.restoreFailed': string;
     'error.edit': string;
     'edited.badge': string;
+    'fold.expand': string;
+    'fold.collapse': string;
     'error.withdraw': string;
     'model.aria': string;
     'model.menuAria': string;

package/lib/types/client/locales.js

@@ -21,6 +21,8 @@ export const zh = {
     'withdrawn.restoreFailed': '恢复失败，请重试',
     'error.edit': '编辑失败，请重试',
     'edited.badge': '已编辑',
+    'fold.expand': '展开全部',
+    'fold.collapse': '收起',
     'error.withdraw': '撤回失败，请重试',
     'model.aria': '切换模型，当前 {model}',
     'model.menuAria': '模型与推理等级',
@@ -57,6 +59,8 @@ export const en = {
     'withdrawn.restoreFailed': 'Could not restore; please retry',
     'error.edit': 'Could not apply the edit; please retry',
     'edited.badge': 'Edited',
+    'fold.expand': 'Show all',
+    'fold.collapse': 'Collapse',
     'error.withdraw': 'Could not withdraw the message; please retry',
     'model.aria': 'Switch model, current {model}',
     'model.menuAria': 'Model and reasoning effort',

package/lib/types/client/message-images.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Cross-host message-image gallery dispatch shared by the two chat-node views.
+ * Hosts before 0.2.1-alpha.3 pass a `renderMessageImages` owner prop with the
+ * session-authorized loader bound inside; 0.2.1-alpha.3 removed that prop when
+ * the images slot split into `conversation.chat.user.images` /
+ * `conversation.chat.message.images`, with the official gallery now behind the
+ * root-scoped `conversation.images.content` factory (ui-attachment) reached
+ * through the framework `renderFactorySlot` seat. The factory outlet renders
+ * nothing while the factory is unregistered, which matches the official
+ * omit-on-absence behavior of the unfilled images slots.
+ */
+import type { ReactNode } from 'react';
+import type { MessageImageLoader, MessageImagesOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { RenderFactorySlot } from '@deepseek-ai/dsh-client-ui-slots';
+/** The gallery input one view owns: the owner props minus the loader. */
+export type MessageImagesInput = Omit<MessageImagesOwnerProps, 'loadImage'>;
+/**
+ * Render one image group through the host's gallery surface. The legacy owner
+ * prop wins when present: on hosts that still pass it (before 0.2.1-alpha.3)
+ * the factory either has no seat (0.1.5) or is never registered, while the
+ * prop always carries a working gallery. On 0.2.1-alpha.3+ the prop is absent
+ * and the factory renders the official gallery.
+ * @param legacy - the pre-0.2.1 owner-prop closure, when the host passes it.
+ * @param renderFactorySlot - the framework factory seat.
+ * @param loadImage - the session-authorized loader from `ChatNodeOwnerProps`.
+ * @param input - image sources and layout hints.
+ * @returns the gallery occurrence, or null when the composition has none.
+ */
+export declare function renderImageGallery(legacy: ((owner: MessageImagesInput) => ReactNode) | undefined, renderFactorySlot: RenderFactorySlot, loadImage: MessageImageLoader, input: MessageImagesInput): ReactNode;
+//# sourceMappingURL=message-images.d.ts.map

package/lib/types/client/message-images.js

@@ -0,0 +1,17 @@
+/**
+ * Render one image group through the host's gallery surface. The legacy owner
+ * prop wins when present: on hosts that still pass it (before 0.2.1-alpha.3)
+ * the factory either has no seat (0.1.5) or is never registered, while the
+ * prop always carries a working gallery. On 0.2.1-alpha.3+ the prop is absent
+ * and the factory renders the official gallery.
+ * @param legacy - the pre-0.2.1 owner-prop closure, when the host passes it.
+ * @param renderFactorySlot - the framework factory seat.
+ * @param loadImage - the session-authorized loader from `ChatNodeOwnerProps`.
+ * @param input - image sources and layout hints.
+ * @returns the gallery occurrence, or null when the composition has none.
+ */
+export function renderImageGallery(legacy, renderFactorySlot, loadImage, input) {
+    if (legacy !== undefined)
+        return legacy(input);
+    return renderFactorySlot('conversation.images.content', { ...input, loadImage });
+}

package/lib/types/client/slots.d.ts

@@ -2,9 +2,24 @@
  * Slot-facing types of the message-tools client half: the injected action
  * face and the composed props of its two `conversation.chat.node` entries.
  */
+import type { ReactNode } from 'react';
 import type { ModelSelection } from '@deepseek-ai/dsh-api-remotes/client';
 import type { ModelDirectoryState } from '@deepseek-ai/dsh-client-ui-model-selection/client';
-import type { HostObservable, InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MessageImagesOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { HostObservable, InjectFace, PropsLocale, PropsRenderFactories, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+/**
+ * The pre-0.2.1 image-gallery owner prop. Hosts before 0.2.1-alpha.3 pass a
+ * `renderMessageImages` closure in `ChatNodeOwnerProps` (the session-authorized
+ * loader is bound inside it); 0.2.1-alpha.3 removed the prop when the images
+ * slot split into `conversation.chat.user.images` /
+ * `conversation.chat.message.images` plus the root-scoped
+ * `conversation.images.content` factory. The views prefer this prop when the
+ * host still passes it and otherwise render through the factory seat
+ * (`PropsRenderFactories`), so one build serves both host lines.
+ */
+export interface LegacyMessageImagesProp {
+    readonly renderMessageImages?: ((owner: Omit<MessageImagesOwnerProps, 'loadImage'>) => ReactNode) | undefined;
+}
 /** Injected action face of the shadowed user-message entry. */
 export interface MessageToolsInjected {
     hooks: {
@@ -31,14 +46,16 @@ export interface MessageToolsInjected {
      * the same path.
      */
     backfillDraft: (text: string) => void;
+    /** The session id the fold choices are remembered under. */
+    foldScope: string;
 }
 /** Full props of the shadowed 'user'/'steering'/'message-tools-edited'/'message-tools-restored' renderer (all keys share it). */
-export type UserMessageViewProps = PropsRuntime<'conversation.chat.node', 'user' | 'steering' | 'message-tools-edited' | 'message-tools-restored'> & InjectFace<MessageToolsInjected> & PropsLocale<'message-tools'>;
+export type UserMessageViewProps = PropsRuntime<'conversation.chat.node', 'user' | 'steering' | 'message-tools-edited' | 'message-tools-restored'> & PropsRenderFactories & InjectFace<MessageToolsInjected> & PropsLocale<'message-tools'> & LegacyMessageImagesProp;
 /** Injected action face of the withdrawal divider entry. */
 export interface WithdrawnDividerInjected {
     /** Restore the span's withdrawn user message as a fresh tail message. */
     restoreMessage: (targetSeq: number) => Promise<void>;
 }
 /** Full props of the withdrawal divider renderer. */
-export type WithdrawnDividerViewProps = PropsRuntime<'conversation.chat.node', 'message-tools-withdrawn'> & InjectFace<WithdrawnDividerInjected> & PropsLocale<'message-tools'>;
+export type WithdrawnDividerViewProps = PropsRuntime<'conversation.chat.node', 'message-tools-withdrawn'> & PropsRenderFactories & InjectFace<WithdrawnDividerInjected> & PropsLocale<'message-tools'> & LegacyMessageImagesProp;
 //# sourceMappingURL=slots.d.ts.map

package/package.json

@@ -7,7 +7,7 @@
     "cordis",
     "messages"
   ],
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -16,10 +16,6 @@
       "types": "./lib/types/index.d.ts",
       "default": "./lib/index.js"
     },
-    "./invariant": {
-      "types": "./lib/types/invariant.d.ts",
-      "default": "./lib/invariant.js"
-    },
     "./client": {
       "types": "./lib/types/client/index.d.ts",
       "default": "./lib/client.js"
@@ -55,7 +51,7 @@
     },
     "compat": {
       "minHost": "0.1.5-rc.1",
-      "verifiedHost": "0.1.7-rc.2"
+      "verifiedHost": "0.2.1-rc.1"
     }
   },
   "license": "MIT",
@@ -64,16 +60,15 @@
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-model-selection": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.6 || ^0.2.0-rc.1",
-    "@deepseek-ai/dsh-typert-protocol": "^0.1.0-rc.6 || ^0.2.0-rc.1",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-model-selection": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-llm": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-session": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
+    "@deepseek-ai/dsh-typert-protocol": "^0.1.0-rc.6 || ^0.2.0-rc.1 || ^0.2.1-rc.1",
     "react": "^18.2.0"
   },
   "files": [
@@ -86,5 +81,8 @@
     "LICENSE",
     "locale/*.json",
     "CHANGELOG.md"
-  ]
+  ],
+  "engines": {
+    "dsh": ">=0.1.5-rc.1 <0.3.0-0"
+  }
 }