@khorsheed/dsh-client-message-tools 0.1.0

package/lib/types/client/UserMessageView.js

@@ -0,0 +1,172 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shadow user-message renderer (keys 'user' and 'steering', priority -1; also
+ * 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.
+ */
+import { memo, useEffect, useRef, useState } from 'react';
+import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client';
+import { Button, IconCheckOutline16, IconCopyOutline16, IconEditOutline16, JsonBlock, MessageText, RiskConfirmation, Tooltip, writeClipboard, } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconUndoOutline16 } from './icons.js';
+import { foldHiddenRanges, isSeqHidden } from './withdrawn-node.js';
+import { withdrawAndBackfill } from './withdraw-backfill.js';
+import { ModelChip } from './ModelChip.js';
+import css from './UserMessageView.module.css';
+/** Selector identity kept module-level so uSES memoization holds. */
+function selectHiddenRanges(snapshot) {
+    return foldHiddenRanges(snapshot.chat.nodes.values());
+}
+/** Split user content into joined text, images, and leftover blocks. */
+function contentParts(content) {
+    const texts = [];
+    const images = [];
+    const rest = [];
+    for (const block of content) {
+        const b = block;
+        if (b.type === 'text' && typeof b.text === 'string')
+            texts.push(b.text);
+        else if (b.type === 'image' && b.attachment !== undefined) {
+            images.push({ attachment: b.attachment });
+        }
+        else
+            rest.push(block);
+    }
+    return { text: texts.join(''), images, rest };
+}
+/** Plaintext `/name` and `@name` word-boundary tokens decorate as chips; the logged text stays the truth. */
+function projectUserText(text) {
+    const re = /(^|\s)([/@][\w-]+)(?=\s|$)/g;
+    const parts = [];
+    let cursor = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+        /* v8 ignore next -- the `(^|\s)` group always participates in a match, so m[1] is never undefined. */
+        const tokenStart = m.index + (m[1]?.length ?? 0);
+        /* v8 ignore next -- the token group always participates in a match, so m[2] is never undefined. */
+        const label = m[2] ?? '';
+        if (tokenStart > cursor)
+            parts.push(_jsx(MessageText, { text: text.slice(cursor, tokenStart) }, cursor));
+        parts.push(_jsx("span", { className: css.refChip, "data-ref-chip": label.startsWith('@') ? 'subagent' : 'skill', children: label }, tokenStart));
+        cursor = tokenStart + label.length;
+    }
+    if (parts.length === 0)
+        return _jsx(MessageText, { text: text });
+    if (cursor < text.length)
+        parts.push(_jsx(MessageText, { text: text.slice(cursor) }, cursor));
+    return _jsx(_Fragment, { children: parts });
+}
+/** Copy action: the copy icon swaps to a short-lived check after a successful write. */
+function CopyButton({ text, t }) {
+    const [copied, setCopied] = useState(false);
+    const pending = useRef(false);
+    const timer = useRef(null);
+    const epoch = useRef(0);
+    useEffect(() => () => {
+        epoch.current += 1;
+        pending.current = false;
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, []);
+    const onCopy = () => {
+        if (copied || pending.current)
+            return;
+        const current = ++epoch.current;
+        pending.current = true;
+        void writeClipboard(text).then((ok) => {
+            if (current !== epoch.current)
+                return;
+            pending.current = false;
+            if (!ok)
+                return;
+            setCopied(true);
+            timer.current = setTimeout(() => {
+                timer.current = null;
+                setCopied(false);
+            }, 1000);
+        });
+    };
+    return (_jsx(Tooltip, { label: copied ? t('copied') : t('copy'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": copied ? t('copied') : t('copy'), onClick: onCopy, children: copied ? _jsx(IconCheckOutline16, {}) : _jsx(IconCopyOutline16, {}) }) }));
+}
+/** Cap for the auto-grown edit box height; longer text scrolls inside it. */
+const EDITOR_MAX_HEIGHT = 240;
+/**
+ * Inline editor (MessageEditBox structure): the textarea is backfilled with
+ * the true original text and auto-grows to its content, capped so a long
+ * message scrolls inside instead of pushing the row's anchor. The trailing
+ * seat renders the real model chip when the session's model directory is
+ * available; its margin-right: auto container keeps the buttons
+ * right-aligned either way.
+ */
+function InlineEditor({ initial, busy, t, onSave, onCancel, models }) {
+    const [draft, setDraft] = useState(initial);
+    const inputRef = useRef(null);
+    const autoGrow = () => {
+        const el = inputRef.current;
+        /* v8 ignore next -- the textarea ref is attached before the mount/change effects run. */
+        if (el === null)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, EDITOR_MAX_HEIGHT)}px`;
+    };
+    // Grow once on mount (the backfilled text may exceed the default height)
+    // and on every edit; the cap keeps the box bounded.
+    useEffect(autoGrow, []);
+    const save = () => {
+        /* v8 ignore next -- the save button is disabled while the draft is blank, and jsdom drops clicks on disabled controls. */
+        if (draft.trim() === '')
+            return;
+        onSave(draft);
+    };
+    return (_jsxs("div", { className: css.editor, "data-message-tools-edit-box": true, children: [_jsx("textarea", { ref: inputRef, className: css.editorInput, value: draft, "aria-label": t('editor.aria'), placeholder: t('editor.placeholder'), disabled: busy, rows: 1, onChange: (event) => {
+                    setDraft(event.currentTarget.value);
+                    autoGrow();
+                } }), _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, useSession, editMessage, withdrawMessage, backfillDraft, useModelDirectory, modelsAvailable, loadModels, selectModel, }) {
+    const ranges = useSession(selectHiddenRanges, shallowEqual);
+    const [editing, setEditing] = useState(false);
+    const [confirming, setConfirming] = useState(false);
+    const [acknowledged, setAcknowledged] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(null);
+    const data = node.data;
+    if (isSeqHidden(ranges, data.seq))
+        return null;
+    const { text, images, rest } = contentParts(data.content);
+    const truncated = (total) => t('json.truncated', { total });
+    const showBubble = text !== '' || rest.length > 0;
+    const saveEdit = (newText) => {
+        setBusy(true);
+        setFailed(null);
+        void editMessage(data.seq, newText)
+            .then(() => { setEditing(false); })
+            .catch(() => { setFailed('edit'); })
+            .finally(() => { setBusy(false); });
+    };
+    const confirmWithdraw = () => {
+        setBusy(true);
+        setFailed(null);
+        // A landed withdrawal auto-backfills the target's original text into the
+        // composer draft (never sends); a failed one backfills nothing.
+        void withdrawAndBackfill({ withdraw: () => withdrawMessage(data.seq), backfill: backfillDraft }, text)
+            .catch(() => { setFailed('withdraw'); })
+            .finally(() => {
+            setBusy(false);
+            setConfirming(false);
+            setAcknowledged(false);
+        });
+    };
+    if (editing) {
+        return (_jsx("div", { className: css.userRow, children: _jsxs("div", { className: css.userStack, children: [_jsx(InlineEditor, { initial: text, busy: busy, t: t, onSave: saveEdit, onCancel: () => { setEditing(false); }, models: modelsAvailable
+                            ? { 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(IconEditOutline16, {}) }) }), _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(IconUndoOutline16, {}) }) })] }), 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'), confirmLabel: t('withdraw.confirm'), acknowledged: acknowledged, disabled: busy, onAcknowledgedChange: setAcknowledged, onCancel: () => { setConfirming(false); setAcknowledged(false); }, onConfirm: confirmWithdraw }))] }));
+});

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

@@ -0,0 +1,17 @@
+/**
+ * Withdrawal divider row ('message-tools-withdrawn' keyed renderer), redone
+ * in the official compaction-marker visual language: one dim clickable row
+ * (chevron +「已撤回 N 条消息」), expanding in place to a read-only replay of
+ * the withdrawn span (user originals + assistant text) with a「恢复到对话
+ * 末尾」action. The restore tail-replays the span's replayable entries (user
+ * messages + assistant text) — the surface fold is positional, so in-place
+ * 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.
+ */
+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, useSession, restoreMessage, }: WithdrawnDividerViewProps): ReactNode;
+//# sourceMappingURL=WithdrawnDividerView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithdrawnDividerView.d.ts","sourceRoot":"","sources":["../../../src/client/WithdrawnDividerView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAG3D,+EAA+E;AAC/E,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,GACpC,EAAE,yBAAyB,GAAG,SAAS,CA0FvC"}

package/lib/types/client/WithdrawnDividerView.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Withdrawal divider row ('message-tools-withdrawn' keyed renderer), redone
+ * in the official compaction-marker visual language: one dim clickable row
+ * (chevron +「已撤回 N 条消息」), expanding in place to a read-only replay of
+ * the withdrawn span (user originals + assistant text) with a「恢复到对话
+ * 末尾」action. The restore tail-replays the span's replayable entries (user
+ * messages + assistant text) — the surface fold is positional, so in-place
+ * 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.
+ */
+import { useState } from 'react';
+import { Button, IconChevronDownOutline14, IconChevronRightOutline14, MessageText } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconUndoOutline16 } from './icons.js';
+import { collectWithdrawnEntries, countHiddenInSpan, foldHiddenRanges, hasRestoreForSpan, isRestoreSuperseded, } from './withdrawn-node.js';
+import css from './WithdrawnDividerView.module.css';
+/** The withdrawal divider: collapsed marker row plus the expandable replay. */
+export function WithdrawnDividerView({ node, t, useSession, restoreMessage, }) {
+    const data = node.data;
+    const [expanded, setExpanded] = useState(false);
+    const [entries, setEntries] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // The node store is a stable live reader: the count/badge selectors read
+    // through it, and the expand click folds the replay from the live snapshot
+    // (event handlers may read live snapshots; render code subscribes).
+    const nodesStore = useSession(snapshot => snapshot.chat.nodes);
+    const count = useSession(snapshot => countHiddenInSpan(snapshot.chat.nodes.values(), data.hiddenStartSeq, data.seq));
+    // The badge tracks a LIVE restore row: withdrawing the restored rows again
+    // clears it. A superseded divider still shows its historical marker, but its
+    // restore action is disabled because the later re-withdrawal divider is now
+    // the active restore point for the same logical content.
+    const restored = useSession((snapshot) => {
+        const nodes = snapshot.chat.nodes.values();
+        return hasRestoreForSpan(nodes, data.hiddenStartSeq, foldHiddenRanges(nodes));
+    });
+    const superseded = useSession((snapshot) => {
+        const nodes = snapshot.chat.nodes.values();
+        return isRestoreSuperseded(nodes, data.hiddenStartSeq, foldHiddenRanges(nodes));
+    });
+    const toggle = () => {
+        if (expanded) {
+            setExpanded(false);
+            return;
+        }
+        setEntries(collectWithdrawnEntries(nodesStore.values(), data.hiddenStartSeq, data.seq));
+        setExpanded(true);
+    };
+    const restore = () => {
+        setBusy(true);
+        setFailed(false);
+        void restoreMessage(data.hiddenStartSeq)
+            .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(IconChevronDownOutline14, {}) : _jsx(IconChevronRightOutline14, {}) }), _jsx("span", { className: css.title, children: t('withdrawn.divider', { count }) }), restored && (_jsxs("span", { className: css.badge, children: [_jsx(IconUndoOutline16, {}), 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') }), _jsx(MessageText, { text: entry.text })] }, 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/backfill.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Composer-draft backfill for the withdrawal divider's「重新编辑」action: the
+ * withdrawn span's first user message text is written into the session's
+ * composer draft (never auto-sent — the user edits and sends through the
+ * official pipeline as a fresh ordinary message, decoupled from the
+ * withdrawal history). Kept free of services so the unit tests drive it
+ * directly.
+ * @module
+ */
+/**
+ * Merge the backfill text into the current draft: an empty (or blank) draft
+ * is filled directly; a non-empty draft gets the text appended on a new line
+ * — the user's in-progress input is never silently overwritten.
+ * @param current - the current composer draft.
+ * @param text - the withdrawn message's original text.
+ * @returns the next draft.
+ */
+export declare function mergedDraft(current: string, text: string): string;
+//# sourceMappingURL=backfill.d.ts.map

package/lib/types/client/backfill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backfill.d.ts","sourceRoot":"","sources":["../../../src/client/backfill.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjE"}

package/lib/types/client/backfill.js

@@ -0,0 +1,20 @@
+/**
+ * Composer-draft backfill for the withdrawal divider's「重新编辑」action: the
+ * withdrawn span's first user message text is written into the session's
+ * composer draft (never auto-sent — the user edits and sends through the
+ * official pipeline as a fresh ordinary message, decoupled from the
+ * withdrawal history). Kept free of services so the unit tests drive it
+ * directly.
+ * @module
+ */
+/**
+ * Merge the backfill text into the current draft: an empty (or blank) draft
+ * is filled directly; a non-empty draft gets the text appended on a new line
+ * — the user's in-progress input is never silently overwritten.
+ * @param current - the current composer draft.
+ * @param text - the withdrawn message's original text.
+ * @returns the next draft.
+ */
+export function mergedDraft(current, text) {
+    return current.trim() === '' ? text : `${current}\n${text}`;
+}

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

@@ -0,0 +1,61 @@
+/**
+ * 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
+ * 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
+ * for the first row to appear, with a deadline — and only a window that
+ * expires with rows still absent disables the hider, with one console.warn,
+ * degrading to renderer-only hiding (the shadowed user renderer keeps hiding
+ * user messages). Even then the observer stays: a row appearing after the
+ * disable (the page sat on a non-chat tab past the window) proves the
+ * attribute exists after all, and hiding reactivates. It never throws. Rules track the currently selected
+ * session only: flow keys are session-scoped (seq-like ids collide across
+ * sessions), and only one chat view is mounted at a time.
+ */
+import type { ChatConversationViewNode, ClientContext } from '@deepseek-ai/dsh-client-runtime/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
+ * never included — it is the marker that must stay visible. Restore events
+ * (user-message and assistant-text replays) are additionally matched by the
+ * built-in message Definition into context-injection rows (every
+ * append-surface user/message qualifies), so the context row sharing a
+ * restored row's seq is hidden as a duplicate — the plugin's restored rows
+ * are the presentation.
+ * @param nodes - every materialized chat node of the session.
+ * @param ranges - precomputed hidden spans (folded from `nodes` when omitted).
+ * @returns the flow keys to hide, in node order.
+ */
+export declare function hiddenFlowKeys(nodes: readonly ChatConversationViewNode[], ranges?: readonly number[]): string[];
+/**
+ * Render the display rules for one rule set.
+ * @param keys - flow keys to hide.
+ * @returns the stylesheet text (empty string hides nothing).
+ */
+export declare function renderHiderRules(keys: readonly string[]): string;
+/**
+ * Tuning of {@link installDomHider}; the defaults match production.
+ */
+export interface DomHiderOptions {
+    /**
+     * Bound on the probe retry window: how long the hider waits for the first
+     * `data-chat-flow-key` row to appear before concluding the attribute is
+     * gone and disabling itself (default 10s; tests shrink it).
+     */
+    probeRetryWindowMs?: number;
+}
+/**
+ * Install the hider: one shared style element, rebound whenever the selected
+ * session changes, rewritten only when the span set or the node count moves.
+ * @param ctx - client root context (reads the sessions service).
+ * @param options - probe retry tuning.
+ * @returns disposer removing the stylesheet and every subscription.
+ */
+export declare function installDomHider(ctx: ClientContext, options?: DomHiderOptions): () => void;
+//# sourceMappingURL=dom-hider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dom-hider.d.ts","sourceRoot":"","sources":["../../../src/client/dom-hider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EAAE,wBAAwB,EAAE,aAAa,EAAmC,MAAM,wCAAwC,CAAA;AAItI;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,wBAAwB,EAAE,EAAE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CA2B/G;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAIhE;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM,IAAI,CAsI7F"}

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

@@ -0,0 +1,195 @@
+import { MESSAGE_TOOLS_PLUGIN, messageToolsOp } from '../marker.js';
+import { foldHiddenRanges, isSeqHidden } from './withdrawn-node.js';
+/**
+ * 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
+ * never included — it is the marker that must stay visible. Restore events
+ * (user-message and assistant-text replays) are additionally matched by the
+ * built-in message Definition into context-injection rows (every
+ * append-surface user/message qualifies), so the context row sharing a
+ * restored row's seq is hidden as a duplicate — the plugin's restored rows
+ * are the presentation.
+ * @param nodes - every materialized chat node of the session.
+ * @param ranges - precomputed hidden spans (folded from `nodes` when omitted).
+ * @returns the flow keys to hide, in node order.
+ */
+export function hiddenFlowKeys(nodes, ranges) {
+    const restoredSeqs = new Set(nodes
+        .filter(node => node.kind === 'message-tools-restored' || node.kind === 'message-tools-restored-assistant')
+        .map(node => node.data.seq));
+    const effective = ranges ?? foldHiddenRanges(nodes);
+    const keys = [];
+    for (const node of nodes) {
+        if (node.kind === 'message-tools-withdrawn')
+            continue;
+        if (node.kind === 'context') {
+            const data = node.data;
+            const source = data.source;
+            // Every message-tools context row is a presentation duplicate or a
+            // wake-only trigger: restore replays are rendered by the plugin's own
+            // rows, edit triggers are never transcript content, and withdrawal /
+            // edit replacements are not append-surface context rows at all.
+            if (source?.kind === 'plugin' && source.plugin === MESSAGE_TOOLS_PLUGIN
+                || restoredSeqs.has(data.seq ?? -1)
+                || messageToolsOp(data.source) === 'edit-trigger') {
+                keys.push(node.key);
+                continue;
+            }
+        }
+        if (isSeqHidden(effective, node.anchorSeq))
+            keys.push(node.key);
+    }
+    return keys;
+}
+/**
+ * Render the display rules for one rule set.
+ * @param keys - flow keys to hide.
+ * @returns the stylesheet text (empty string hides nothing).
+ */
+export function renderHiderRules(keys) {
+    return keys
+        .map(key => `[data-chat-flow-key=${JSON.stringify(key)}]{display:none!important}`)
+        .join('\n');
+}
+/**
+ * Install the hider: one shared style element, rebound whenever the selected
+ * session changes, rewritten only when the span set or the node count moves.
+ * @param ctx - client root context (reads the sessions service).
+ * @param options - probe retry tuning.
+ * @returns disposer removing the stylesheet and every subscription.
+ */
+export function installDomHider(ctx, options = {}) {
+    const probeRetryWindowMs = options.probeRetryWindowMs ?? 10_000;
+    // rAF so the probe runs after React committed; setTimeout covers jsdom.
+    const nextFrame = typeof requestAnimationFrame === 'function'
+        ? requestAnimationFrame
+        : (callback) => { setTimeout(callback, 16); };
+    const style = document.createElement('style');
+    style.setAttribute('data-message-tools-hider', '');
+    document.head.appendChild(style);
+    let activeSession;
+    let stopSession;
+    let signature = '';
+    let probed = false;
+    let probeScheduled = false;
+    let disabled = false;
+    let retrying = false;
+    let retryObserver;
+    let retryTimer;
+    let latest;
+    const applyRules = (snapshot) => {
+        latest = snapshot;
+        const nodes = snapshot.chat.nodes.values();
+        const ranges = foldHiddenRanges(nodes);
+        const nextSignature = `${ranges.join(',')}:${nodes.length}`;
+        if (nextSignature === signature)
+            return;
+        signature = nextSignature;
+        style.textContent = renderHiderRules(hiddenFlowKeys(nodes, ranges));
+    };
+    const probeFound = () => document.querySelector('[data-chat-flow-key]') !== null;
+    const stopRetry = () => {
+        retrying = false;
+        retryObserver?.disconnect();
+        retryObserver = undefined;
+        if (retryTimer !== undefined) {
+            clearTimeout(retryTimer);
+            retryTimer = undefined;
+        }
+    };
+    const passProbe = () => {
+        stopRetry();
+        probed = true;
+        disabled = false;
+        /* v8 ignore next -- the probe is only scheduled from onSnapshot, which sets latest first */
+        if (latest !== undefined)
+            applyRules(latest);
+    };
+    const failProbe = () => {
+        // Window expired with rows still absent: degrade (one warn, no rules) —
+        // but KEEP the observer: a row appearing later proves the miss was
+        // mounting timing (e.g. the page sat on the trace tab past the window),
+        // and hiding reactivates instead of leaking the spans forever.
+        if (retryTimer !== undefined) {
+            clearTimeout(retryTimer);
+            retryTimer = undefined;
+        }
+        retrying = false;
+        disabled = true;
+        style.textContent = '';
+        console.warn('message-tools: data-chat-flow-key rows not found; full-span chat hiding disabled '
+            + '(user messages stay hidden by the shadowed renderer; hiding reactivates if chat rows appear)');
+    };
+    /**
+     * A missed probe is not proof the attribute is gone — the chat rows may
+     * simply not be mounted yet (page restored onto the trace tab, chat area
+     * still mounting). Watch for the first row within a bounded window; only
+     * an expired window with rows still absent disables the hider, and the
+     * observer outlives even that (see failProbe).
+     */
+    const startRetry = () => {
+        retrying = true;
+        if (typeof MutationObserver === 'function') {
+            retryObserver = new MutationObserver(() => { if (probeFound())
+                passProbe(); });
+            retryObserver.observe(document.body, {
+                childList: true, subtree: true, attributes: true, attributeFilter: ['data-chat-flow-key'],
+            });
+        }
+        retryTimer = setTimeout(() => { if (probeFound())
+            passProbe();
+        else
+            failProbe(); }, probeRetryWindowMs);
+    };
+    const onSnapshot = (snapshot) => {
+        latest = snapshot;
+        if (disabled)
+            return;
+        if (probed) {
+            applyRules(snapshot);
+            return;
+        }
+        // Probe on the first non-empty rule set, one frame out so React has
+        // committed the rows the rules target.
+        if (hiddenFlowKeys(snapshot.chat.nodes.values()).length === 0)
+            return;
+        if (probeScheduled || retrying)
+            return;
+        probeScheduled = true;
+        nextFrame(() => {
+            probeScheduled = false;
+            if (probeFound()) {
+                passProbe();
+                return;
+            }
+            startRetry();
+        });
+    };
+    const bindCurrent = () => {
+        const current = ctx.sessions.list.getSnapshot().current;
+        if (current === activeSession && stopSession !== undefined)
+            return;
+        stopSession?.();
+        stopSession = undefined;
+        activeSession = current;
+        signature = '';
+        style.textContent = '';
+        if (current === undefined)
+            return;
+        const binding = ctx.sessions.binding(current);
+        if (binding === undefined)
+            return;
+        onSnapshot(binding.session.getSnapshot());
+        stopSession = binding.session.subscribe(() => { onSnapshot(binding.session.getSnapshot()); });
+    };
+    const stopList = ctx.sessions.list.subscribe(bindCurrent);
+    const stopProvide = ctx.sessions.currentProvideInfo.subscribe(bindCurrent);
+    bindCurrent();
+    return () => {
+        stopList();
+        stopProvide();
+        stopSession?.();
+        stopRetry();
+        style.remove();
+    };
+}