@nomix-ai/nomix-harness 0.2.5 → 0.2.6

package/dist/kernel/client-ui-conversation/lib/types/client/skeleton/ConversationRoot.js

@@ -125,7 +125,7 @@ export function ConversationRoot({ sessionId, useSession, useSessions, useWorksp
         // share one constraint (composer.dock = stats-line family).
         footer: !hero && zone !== undefined ? renderSlot('conversation.composer.dock', zone) : null,
     });
-    const composerBar = (_jsxs("div", { className: clsx(css.composerStack, hero && css.composerHero), children: [hero && _jsx(HeroGlow, { className: css.heroGlow }), hero && _jsx(HeroShell, { t: t }), hero && heroWorkspaceRow, zone !== undefined && renderSlot('conversation.input.dock', zone), inputBar] }));
+    const composerBar = (_jsxs("div", { className: clsx(css.composerStack, hero && css.composerHero), children: [hero && _jsx(HeroGlow, { className: css.heroGlow }), hero && _jsx(HeroShell, { t: t, renderSlot: renderSlot }), hero && heroWorkspaceRow, zone !== undefined && renderSlot('conversation.input.dock', zone), inputBar] }));
     const phase = settling ? 'settling' : hero ? 'hero' : 'active';
     const composer = renderSlotChain('conversation.composer', { interactions: pending, session }, { fallback: composerBar, overlay: true });
     // Sticky wraps the whole chain output (fallback + elected overlay), not

package/dist/kernel/client-ui-conversation/lib/types/client/skeleton/ConversationSession.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /** Strict per-session header/body content inserted into the resident conversation layout. */
 import { useEffect, useSyncExternalStore } from 'react';
 import clsx from 'clsx';
@@ -21,7 +21,11 @@ function deriveAncestry(list, id) {
         const summary = list.byId[cursor];
         if (summary === undefined)
             break;
-        chain.unshift({ id: summary.id, displayTitle: summary.displayTitle });
+        chain.unshift({
+            id: summary.id,
+            displayTitle: summary.displayTitle,
+            subagent: summary.origin === 'subagent',
+        });
         if (summary.origin !== 'subagent')
             break;
         cursor = summary.parentId;
@@ -51,7 +55,18 @@ export function ConversationSessionHeader({ sessionId, useSession, useSessions,
     const hideChrome = blank && composerPhase === 'blank';
     return (_jsx("header", { className: clsx(css.header, hideChrome && css.headerHidden), "aria-hidden": hideChrome || undefined, children: !hideChrome && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.titleRow, children: [_jsxs("div", { className: css.titleCluster, children: [_jsxs("nav", { className: css.crumbs, "aria-label": t('session.hierarchy'), children: [ancestry.map((summary, index) => {
                                             const last = index === ancestry.length - 1;
-                                            return (_jsxs("span", { className: css.crumbSeg, children: [index > 0 && _jsx("span", { className: css.crumbSep, children: "/" }), _jsx("button", { type: "button", className: clsx(css.crumb, last && css.crumbCurrent), disabled: last, onClick: () => { open(summary.id); }, children: summary.displayTitle })] }, summary.id));
+                                            const title = (_jsx("button", { type: "button", className: clsx(css.crumb, summary.subagent && css.crumbSubagent, last && css.crumbCurrent), disabled: last, onClick: () => { open(summary.id); }, children: summary.displayTitle }));
+                                            const lineage = last || summary.subagent;
+                                            const lineageOwner = {
+                                                lineageSessionId: summary.id,
+                                                displayTitle: summary.displayTitle,
+                                                ...last ? {} : { openTitle: () => { open(summary.id); } },
+                                            };
+                                            return (_jsxs("span", { className: css.crumbSeg, children: [index > 0 && _jsx("span", { className: css.crumbSep, children: "/" }), lineage
+                                                        ? summary.subagent
+                                                            ? renderSlot('conversation.session.header.lineage', lineageOwner, { fallback: title })
+                                                            : (_jsxs(_Fragment, { children: [title, renderSlot('conversation.session.header.lineage', lineageOwner, { fallback: null })] }))
+                                                        : title] }, summary.id));
                                         }), ancestry.length === 0 && _jsx("span", { className: css.crumbCurrent, children: sessionId })] }), _jsx("div", { className: css.headerActions, children: renderSlot('conversation.session.header.actions', {}) })] }), _jsx("div", { className: css.headerUtilities, children: renderSlot('conversation.session.header.utilities', {}) })] }), tabs.length > 1 && (_jsx("div", { className: css.tabs, role: "tablist", children: tabs.map(viewTab => (_jsx("button", { type: "button", role: "tab", "aria-selected": viewTab.id === active?.id, className: clsx(css.tab, viewTab.id === active?.id && css.tabActive), onClick: () => { actions.setView(viewTab.id); }, children: viewTab.label }, viewTab.id))) }))] })) }));
 }
 /**

package/dist/kernel/client-ui-conversation/lib/types/client/skeleton/EmptyHero.d.ts

@@ -41,6 +41,8 @@ export declare function HeroGlow({ className }: {
 export interface HeroShellProps {
     /** The owner's locale seat, passed down as a plain prop. */
     t: HeroTranslate;
+    /** Authorized renderer for the hero brand-mark slot. */
+    renderSlot: ConversationSlotProps['renderSlot'];
     /** Overlay content after the stack (modals). */
     children?: ReactNode;
 }
@@ -50,6 +52,6 @@ export interface HeroShellProps {
  * @param props - see {@link HeroShellProps}.
  * @returns the centered hero element tree.
  */
-export declare function HeroShell({ t, children }: HeroShellProps): import("react").JSX.Element;
+export declare function HeroShell({ t, renderSlot, children }: HeroShellProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=EmptyHero.d.ts.map

package/dist/kernel/client-ui-conversation/lib/types/client/skeleton/EmptyHero.js

@@ -52,7 +52,9 @@ export function HeroGlow({ className }) {
  * @param props - see {@link HeroShellProps}.
  * @returns the centered hero element tree.
  */
-export function HeroShell({ t, children }) {
-    return (_jsxs("div", { className: css.root, children: [_jsxs("div", { className: css.stack, children: [_jsxs("div", { className: css.headline, children: [_jsx("span", { className: css.logoHitbox, children: _jsx(NomixLogo, { size: 34, className: css.logo }) }), _jsx("span", { className: css.headlineText, children: t('hero.headline') }), _jsx("span", { className: css.previewBadge, children: t('hero.preview') })] }), _jsx("div", { className: css.body })] }), children] }));
+export function HeroShell({ t, renderSlot, children }) {
+    return (_jsxs("div", { className: css.root, children: [_jsxs("div", { className: css.stack, children: [_jsxs("div", { className: css.headline, children: [_jsx("span", { className: css.fishHitbox, children: renderSlot('conversation.hero.brand.mark', { size: 34, className: css.fish }, {
+                                    fallback: _jsx(NomixLogo, { size: 34, className: css.fish }),
+                                }) }), _jsx("span", { className: css.headlineText, children: t('hero.headline') }), _jsx("span", { className: css.previewBadge, children: t('hero.preview') })] }), _jsx("div", { className: css.body })] }), children] }));
 }
 //# sourceMappingURL=EmptyHero.js.map

package/dist/kernel/client-ui-conversation/lib/types/client/skeleton/InputBar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /** The default composer body: the 'conversation.composer.bar' slot entry.
  * Machine state arrives through the standard provide channel
  * (useInput + inputActions); the keyboard/DOM command face and stop arrive
@@ -9,15 +9,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { IconPlusOutline16, IconWarningOutline16, Toast, Tooltip, } from '../../../../../client-ui-primitives/lib/index.js';
-import { AttachmentRail, DropOverlay, ImageLightbox } from '../../../../../client-ui-attachment/lib/index.js';
 import { deriveDecorations } from "../input/decorations.js";
-import { attachmentErrorText, attachmentRailLabels, dropOverlayLabels, imageSizeText, lightboxLabels, } from "../image-labels.js";
+import { attachmentErrorText, imageSizeText } from "../image-labels.js";
+import { ReferenceIcon } from "../reference/ReferenceIcon.js";
 import { ContextMeter } from "./ContextMeter.js";
 import { PermissionSelect } from "./PermissionSelect.js";
 import { isSafariBrowser, repairSafariTextareaLayout } from "./safari.js";
 import css from './InputBar.module.css';
 /** Decoration product of the no-session state (no machine, empty draft). */
 const INERT_DECORATIONS = { token: null, chips: [], textRefs: [], hint: null };
+/**
+ * Resolve one edit's range from the record taken before it applied.
+ * A selection the edit replaces is the range outright. A caret delete replaces
+ * nothing and reports the bare caret, so the removed span is whatever the draft
+ * lost, on the side `inputType` names — measured, because one caret gesture can
+ * remove a multi-unit grapheme, a word, or a line.
+ * @param pending - record taken at `beforeinput`, null when none was seen.
+ * @param prevLength - length of the draft the edit applied to.
+ * @param nextLength - length of the resulting draft.
+ * @returns the exact range, or undefined when the record cannot describe this
+ * edit and the machine's diff scan has to recover it.
+ */
+function editRangeOf(pending, prevLength, nextLength) {
+    if (pending === null || pending.draftLength !== prevLength)
+        return undefined;
+    const { start, end, inputType } = pending;
+    // A DOM selection cannot invert; the check keeps that a precondition of the
+    // math below rather than an assumption about the element.
+    if (start > end || end > prevLength)
+        return undefined;
+    const insertedLength = nextLength - prevLength + (end - start);
+    if (insertedLength >= 0)
+        return { start, end, insertedLength };
+    if (start !== end)
+        return undefined;
+    const removed = prevLength - nextLength;
+    if (inputType.endsWith('Backward')) {
+        return removed <= start ? { start: start - removed, end: start, insertedLength: 0 } : undefined;
+    }
+    if (inputType.endsWith('Forward')) {
+        return start + removed <= prevLength ? { start, end: start + removed, insertedLength: 0 } : undefined;
+    }
+    return undefined;
+}
 export function InputBar({ useSession, useInput, inputActions, keyboard, addImages, removeImage, draftImages, resolveSubmitMode, toggleCommandMenu, stop, command, t, renderSlot, useNotices, useLexicon, useMenuLauncher, useProjection, sessionId, variant, disabled: inert = false, blocked, workspacePickerOpen = false, onRequestWorkspace, placeholder, accessory, overlay, leftItems, rightItems, footer, }) {
     const input = useInput(s => s);
     const notice = useNotices(s => s);
@@ -38,11 +72,9 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
     const draft = input?.draft ?? '';
     const attachments = useMemo(() => input === undefined || draftImages === undefined ? [] : draftImages(input.imageIds), [draftImages, input?.imageIds]);
     const empty = draft.trim() === '' && attachments.length === 0;
-    const [preview, setPreview] = useState(null);
-    const [dragActive, setDragActive] = useState(false);
-    // Transient error banner (image-intake rejections and prompt failures): the
-    // seq keys the Toast so an identical repeated message restarts the
-    // hold-then-fade cycle instead of silently reusing the faded one.
+    // Transient error banner (machine notices, image-intake rejections, and
+    // prompt failures): the seq keys the Toast so an identical repeated message
+    // restarts the hold-then-fade cycle instead of reusing the faded one.
     const [toast, setToast] = useState(null);
     const toastSeq = useRef(0);
     const showToast = useCallback((text) => {
@@ -67,9 +99,12 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
             ? attachmentErrorText(t, promptError.error.details.reason, imageLimits)
             : `${promptError.error.message} (${promptError.error.code})`);
     }, [promptError, showToast, t, imageLimits]);
+    useEffect(() => {
+        if (notice?.level === 'error')
+            showToast(notice.text);
+    }, [notice, showToast]);
     const inputRef = useRef(null);
     const cardRef = useRef(null);
-    const dragDepthRef = useRef(0);
     const scrollRef = useRef(null);
     const mirrorRef = useRef(null);
     const safari = useMemo(() => isSafariBrowser(navigator), []);
@@ -131,10 +166,6 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         if (safari && nativeShrink)
             repairSafariTextareaLayout(inputRef.current);
     }, [draft, safari]);
-    useEffect(() => {
-        if (preview !== null && !attachments.some(attachment => attachment.id === preview.id))
-            setPreview(null);
-    }, [attachments, preview]);
     // Scroll the draft scrollport the minimum that brings `caret` into view — the
     // browser's own behavior for typing, performed for the paths where it does
     // not act.
@@ -249,6 +280,41 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         el.addEventListener('wheel', onWheel, { passive: false });
         return () => { el.removeEventListener('wheel', onWheel); };
     }, []);
+    // selectionStart/End are number|null in lib.dom; the type-aware lint program narrows them.
+    /* oxlint-disable typescript/no-unnecessary-condition */
+    const selectionOf = (el) => ({
+        start: el.selectionStart ?? 0,
+        end: el.selectionEnd ?? el.selectionStart ?? 0,
+    });
+    /* oxlint-enable typescript/no-unnecessary-condition */
+    // The machine's occurrence math needs the edit's real range, and a controlled
+    // textarea's change event carries only the resulting string. `beforeinput`
+    // fires while the element still holds the pre-edit selection, which is
+    // exactly the range about to be replaced; a textarea exposes it no other way
+    // (`getTargetRanges()` is empty for form controls). Recovering the range by
+    // diffing the two drafts instead is ambiguous whenever the typed text repeats
+    // what it lands against — typing the trigger char before a reference reads as
+    // landing inside that reference, which drops it. One lifetime, like the wheel
+    // listener above: the textarea is never unmounted.
+    const pendingEditRef = useRef(null);
+    useEffect(() => {
+        const el = inputRef.current;
+        if (el === null)
+            return;
+        const onBeforeInput = (e) => {
+            // Only the families whose reported selection describes the edit. A
+            // history replay reports wherever the caret happens to sit, which would
+            // survive every check in editRangeOf while naming the wrong span.
+            if (!e.inputType.startsWith('insert') && !e.inputType.startsWith('delete')) {
+                pendingEditRef.current = null;
+                return;
+            }
+            const { start, end } = selectionOf(el);
+            pendingEditRef.current = { start, end, draftLength: el.value.length, inputType: e.inputType };
+        };
+        el.addEventListener('beforeinput', onBeforeInput);
+        return () => { el.removeEventListener('beforeinput', onBeforeInput); };
+    }, []);
     const onKeyDown = (e) => {
         if (workspaceTrigger) {
             if (e.key === 'Enter' || e.key === ' ') {
@@ -259,7 +325,7 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         }
         // Absent machine without a Workspace recovery action stays disabled; the
         // guard narrows the faces for the paths below.
-        if (keyboard === undefined || inputActions === undefined)
+        if (input === undefined || keyboard === undefined || inputActions === undefined)
             return;
         // Shift+Enter is the native newline UNCONDITIONALLY — decided before the
         // IME guard so a composition-closing Shift+Enter still breaks the line.
@@ -268,6 +334,24 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         // keyCode 229 is the legacy IME-composition signal engines emit without isComposing.
         // oxlint-disable-next-line typescript/no-deprecated
         const composing = composingRef.current || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+        if (!composing && !machineBusy && !locked
+            && (e.key === 'Backspace' || e.key === 'Delete')) {
+            const selection = selectionOf(e.currentTarget);
+            if (selection.start === selection.end) {
+                const occurrence = input.occurrences.find(o => e.key === 'Backspace'
+                    ? o.offset + o.length === selection.start
+                    : o.offset === selection.start);
+                if (occurrence !== undefined) {
+                    e.preventDefault();
+                    const start = occurrence.offset;
+                    const end = occurrence.offset + occurrence.length;
+                    keyboard.setDraft(draft.slice(0, start) + draft.slice(end), { start, end, insertedLength: 0 });
+                    restoreCaret(e.currentTarget, start);
+                    keyboard.track(keyboard.snapshot.draft, start);
+                    return;
+                }
+            }
+        }
         if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
             if (keyboard.arbitrate(e.key === 'ArrowUp' ? 'up' : 'down', composing) === 'consumed')
                 e.preventDefault();
@@ -335,27 +419,14 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         if (machineBusy)
             return; // submitting is the read-only span; adjudicating holds the pending lock
         const next = e.target.value;
+        const pending = pendingEditRef.current;
+        pendingEditRef.current = null;
         safariNativeShrinkRef.current = safari && next.length < draft.length;
-        keyboard.setDraft(next);
+        keyboard.setDraft(next, editRangeOf(pending, draft.length, next.length));
         // selectionStart is number|null in lib.dom; the type-aware lint program narrows it.
         // oxlint-disable-next-line typescript/no-unnecessary-condition
         keyboard.track(next, e.target.selectionStart ?? next.length);
     };
-    // ---- chip atomicity (DOM layer; the machine sees only transactions) ----
-    // Placeholders occupy exactly one char, so caret positions are always
-    // BETWEEN them — what needs normalizing is deletion (whole chip per
-    // Backspace/Delete via native single-char semantics, which U+FFFC already
-    // gives us) and selection endpoints: Shift-extension snapping is native
-    // too (one char = one step). Mouse selection of a chip is handled in the
-    // backdrop click handler below. Undo/redo must NOT reach the browser: the
-    // machine owns the transaction log.
-    // selectionStart/End are number|null in lib.dom; the type-aware lint program narrows them.
-    /* oxlint-disable typescript/no-unnecessary-condition */
-    const selectionOf = (el) => ({
-        start: el.selectionStart ?? 0,
-        end: el.selectionEnd ?? el.selectionStart ?? 0,
-    });
-    /* oxlint-enable typescript/no-unnecessary-condition */
     const onCopyOrCut = (e, cut) => {
         if (input === undefined || keyboard === undefined)
             return; // absent machine: no draft can be copied or cut
@@ -363,25 +434,25 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         const { start, end } = selectionOf(el);
         if (start === end)
             return;
-        const slice = draft.slice(start, end);
-        const touched = input.occurrences.filter(o => o.offset >= start && o.offset < end);
+        const touched = input.occurrences.filter(o => o.offset < end && o.offset + o.length > start);
         if (touched.length === 0 && !cut)
             return; // plain copy of plain text: native path is fine
         e.preventDefault();
-        // Expand placeholders to their owner clipboard projections.
+        const copyStart = touched.reduce((value, o) => Math.min(value, o.offset), start);
+        const copyEnd = touched.reduce((value, o) => Math.max(value, o.offset + o.length), end);
+        // Expand structured ranges to their owner clipboard projections.
         let text = '';
-        let cursor = start;
+        let cursor = copyStart;
         for (const o of touched) {
             text += draft.slice(cursor, o.offset) + o.clipboardText;
-            cursor = o.offset + 1;
+            cursor = o.offset + o.length;
         }
-        text += draft.slice(cursor, end);
+        text += draft.slice(cursor, copyEnd);
         e.clipboardData.setData('text/plain', text);
         if (cut && !machineBusy && !locked) {
-            keyboard.setDraft(draft.slice(0, start) + draft.slice(end), { start, end, insertedLength: 0 });
-            restoreCaret(el, start);
+            keyboard.setDraft(draft.slice(0, copyStart) + draft.slice(copyEnd), { start: copyStart, end: copyEnd, insertedLength: 0 });
+            restoreCaret(el, copyStart);
         }
-        void slice;
     };
     const onPaste = (e) => {
         if (keyboard === undefined)
@@ -445,78 +516,7 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         if (rejected !== null)
             showToast(rejected);
     }, [addImages, attachments, imageLimits, showToast, t]);
-    // Whole-page file-drop intake (DeepSeek Chat behavior): the listeners live
-    // on the document so a drop anywhere over the window adds images, not only
-    // over the composer card. Safe as document-level state: the composer-bar
-    // slot is `kind: 'single'`, so at most one bar is mounted to bind these.
-    // Text drags carry no 'Files' type and pass through untouched, keeping the
-    // native drop-text-into-textarea path. The overlay layer itself is
-    // pointer-inert, so it never disturbs the enter/leave count.
     const canAcceptDrop = !locked && !machineBusy && addImages !== undefined;
-    useEffect(() => {
-        const hasFiles = (event) => event.dataTransfer?.types.includes('Files') ?? false;
-        const reset = () => {
-            dragDepthRef.current = 0;
-            setDragActive(false);
-        };
-        const onDragEnter = (event) => {
-            if (!hasFiles(event))
-                return;
-            event.preventDefault();
-            dragDepthRef.current += 1;
-            setDragActive(true);
-        };
-        const onDragOver = (event) => {
-            if (!hasFiles(event) || event.dataTransfer === null)
-                return;
-            event.preventDefault();
-            event.dataTransfer.dropEffect = canAcceptDrop ? 'copy' : 'none';
-        };
-        const onDragLeave = (event) => {
-            if (!hasFiles(event))
-                return;
-            dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
-            if (dragDepthRef.current === 0)
-                setDragActive(false);
-            // Leaving through the viewport edge does not balance the count on every
-            // engine; a page-root leave at the border means the drag left the window.
-            const leavingViewport = event.clientX <= 0 || event.clientY <= 0
-                || event.clientX >= window.innerWidth || event.clientY >= window.innerHeight;
-            if ((event.target === document.documentElement || event.target === document.body) && leavingViewport)
-                reset();
-        };
-        const onDrop = (event) => {
-            if (!hasFiles(event))
-                return;
-            event.preventDefault();
-            reset();
-            if (!canAcceptDrop)
-                return;
-            intakeImages([...(event.dataTransfer?.files ?? [])]);
-        };
-        document.addEventListener('dragenter', onDragEnter);
-        document.addEventListener('dragover', onDragOver);
-        document.addEventListener('dragleave', onDragLeave);
-        document.addEventListener('drop', onDrop);
-        window.addEventListener('dragend', reset);
-        return () => {
-            document.removeEventListener('dragenter', onDragEnter);
-            document.removeEventListener('dragover', onDragOver);
-            document.removeEventListener('dragleave', onDragLeave);
-            document.removeEventListener('drop', onDrop);
-            window.removeEventListener('dragend', reset);
-        };
-    }, [canAcceptDrop, intakeImages]);
-    const closePreview = useCallback(() => { setPreview(null); }, []);
-    // Rail thumbnails with their strings resolved here: the attachment atoms are
-    // zero-cordis and read no locale.
-    const railItems = useMemo(() => attachments.map(attachment => ({
-        id: attachment.id,
-        previewUrl: attachment.previewUrl,
-        alt: attachment.file.name || t('image.pending'),
-        removeLabel: t('image.remove', { name: attachment.file.name }),
-        attachment,
-    })), [attachments, t]);
     const onSelect = (e) => {
         // Any caret/selection gesture ends a live paste attempt (the machine
         // cannot observe DOM selection). Cheap no-op when none is live.
@@ -560,16 +560,15 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
     const accessSelect = command === undefined
         ? null
         : _jsx(PermissionSelect, { value: permissions, locked: locked, command: command, t: t }, sessionId);
-    // Mirror-layer decorations: a visible backdrop with transparent text. The
-    // claim token highlights through behind the textarea glyphs; each U+FFFC
-    // placeholder renders as a chip (the textarea's own glyph is invisible, the
-    // backdrop chip supplies the visual); the claim hint is ghost text.
+    // Mirror-layer decorations: a visible backdrop with transparent textarea
+    // text. Claim tokens and references retain the draft's own glyph metrics,
+    // so their decoration cannot drift from wrapping, selection, or the caret.
     const deco = input === undefined ? INERT_DECORATIONS : deriveDecorations(input, lexicon);
     const backdrop = [];
     {
-        // Segment boundaries: the token range end, every chip offset, and every
-        // text-ref range — merged in draft order (the sources never
-        // overlap: chips sit on placeholders, text-refs on plain tokens, the
+        // Segment boundaries: the token range end, every structured-reference
+        // offset, and every text-ref range — merged in draft order (the sources never
+        // overlap: structured references own their ranges, text-refs own plain tokens, the
         // claim token only leads).
         let cursor = 0;
         const pushPlain = (upTo) => {
@@ -583,7 +582,7 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
         }
         const boundaries = [
             ...deco.chips.map(chip => ({ at: chip.offset, kind: 'chip', chip })),
-            ...deco.textRefs.map(ref => ({ at: ref.start, kind: 'text-ref', ref })),
+            ...deco.textRefs.map((ref, ordinal) => ({ at: ref.start, kind: 'text-ref', ref, ordinal })),
         ].sort((a, b) => a.at - b.at);
         for (const b of boundaries) {
             if (b.at < cursor)
@@ -591,13 +590,23 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
             pushPlain(b.at);
             if (b.kind === 'chip') {
                 const chip = b.chip;
-                backdrop.push(_jsx("span", { className: clsx(css.chip, chip.invalid && css.chipInvalid), "data-decoration": "chip", "data-occurrence": chip.occurrenceId, "data-invalid": chip.invalid || undefined, title: chip.label, children: _jsx("span", { className: css.chipLabel, children: chip.label }) }, `chip-${chip.occurrenceId}`));
-                cursor = chip.offset + 1; // the placeholder char the chip stands for
+                backdrop.push(_jsxs("span", { className: clsx(css.chip, chip.invalid && css.chipInvalid), "data-decoration": "chip", "data-reference-appearance": chip.appearance, "data-occurrence": chip.occurrenceId, "data-invalid": chip.invalid || undefined, title: chip.label, children: [chip.appearance === undefined
+                            ? chip.text[0]
+                            : (_jsxs("span", { className: css.chipTrigger, children: [_jsx("span", { className: css.chipTriggerGlyph, children: chip.text[0] }), _jsx(ReferenceIcon, { kind: chip.appearance, size: 16, className: css.chipIcon })] })), _jsx("span", { children: chip.text.slice(1) })] }, `chip-${chip.occurrenceId}`));
+                cursor = chip.offset + chip.length;
             }
             else {
                 // Plain-range highlight: the glyphs stay the
                 // textarea's (advance untouched); the mark paints the chip look.
-                backdrop.push(_jsx("mark", { className: css.textRef, "data-decoration": "text-ref", children: draft.slice(b.ref.start, b.ref.end) }, `ref-${b.ref.start}`));
+                // The key is the draft-order ordinal: a fresh scan derives these
+                // ranges every render, so none of them carries identity past its
+                // position, and a draft-offset key would unmount the mark and its
+                // icon for every character typed ahead of it. Structured references
+                // key by occurrenceId, the identity their occurrence table owns.
+                const text = draft.slice(b.ref.start, b.ref.end);
+                backdrop.push(_jsx("mark", { className: css.textRef, "data-decoration": "text-ref", children: b.ref.appearance === 'folder'
+                        ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: css.textRefTrigger, children: [_jsx("span", { className: css.textRefTriggerGlyph, children: text[0] }), _jsx(ReferenceIcon, { kind: "folder", size: 16, className: css.textRefIcon })] }), text.slice(1)] }))
+                        : text }, `ref-${b.ordinal}`));
                 cursor = b.ref.end;
             }
         }
@@ -613,10 +622,16 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
             backdrop.push(_jsx("span", { className: css.hint, "data-decoration": "hint", children: displayHint }, "hint"));
         }
     }
-    return (_jsxs("div", { className: clsx(css.root, variant === 'hero' && css.hero), children: [dragActive && (_jsx(DropOverlay, { disabled: !canAcceptDrop, labels: dropOverlayLabels(t, canAcceptDrop, imageLimits === undefined ? undefined : {
-                    count: imageLimits.maxImagesPerMessage,
-                    size: imageSizeText(imageLimits.maxImageBytes),
-                }) })), toast !== null && (_jsx(Toast, { text: toast.text, icon: _jsx(IconWarningOutline16, {}), anchor: cardRef.current, onDone: dismissToast }, toast.seq)), notice !== null && (_jsx("div", { className: clsx(css.notice, notice.level === 'error' && css.noticeError), role: "status", children: notice.text })), _jsxs("div", { ref: cardRef, className: clsx(css.card, workspaceTrigger && css.cardWorkspaceTrigger), "data-composer-card": true, onClick: workspaceTrigger ? onRequestWorkspace : undefined, onPointerDown: workspaceTrigger ? (e) => { e.stopPropagation(); } : undefined, children: [overlay !== undefined && _jsx("div", { className: css.overlayAnchor, children: overlay }), accessory !== undefined && _jsx("div", { className: css.accessory, children: accessory }), railItems.length > 0 && (_jsx("div", { className: css.attachments, children: _jsx(AttachmentRail, { items: railItems, labels: attachmentRailLabels(t), onOpen: (item) => { setPreview(item.attachment); }, onRemove: (item) => { removeImage?.(item.attachment.id); } }) })), _jsx("div", { ref: scrollRef, className: css.scroll, "data-input-scroll": true, children: _jsxs("div", { className: css.grow, children: [_jsx("div", { "aria-hidden": true, className: css.backdrop, "data-input-backdrop": true, children: backdrop }), _jsx("textarea", { ref: inputRef, className: css.input, value: draft, disabled: textareaDisabled, readOnly: machineBusy || workspaceTrigger, "aria-label": workspaceTrigger ? t('hero.chooseWorkspace') : undefined, "aria-haspopup": workspaceTrigger ? 'menu' : undefined, "aria-expanded": workspaceTrigger ? workspacePickerOpen : undefined, "data-phase": input?.phase ?? 'inert', placeholder: placeholder ?? (parentOffline
+    return (_jsxs("div", { className: clsx(css.root, variant === 'hero' && css.hero), children: [toast !== null && (_jsx(Toast, { text: toast.text, icon: _jsx(IconWarningOutline16, {}), anchor: cardRef.current, onDone: dismissToast }, toast.seq)), notice?.level === 'info' && (_jsx("div", { className: css.notice, role: "status", children: notice.text })), _jsxs("div", { ref: cardRef, className: clsx(css.card, workspaceTrigger && css.cardWorkspaceTrigger), "data-composer-card": true, onClick: workspaceTrigger ? onRequestWorkspace : undefined, onPointerDown: workspaceTrigger ? (e) => { e.stopPropagation(); } : undefined, children: [overlay !== undefined && _jsx("div", { className: css.overlayAnchor, children: overlay }), accessory !== undefined && _jsx("div", { className: css.accessory, children: accessory }), renderSlot('conversation.input.attachments', {
+                        attachments,
+                        canAcceptDrop,
+                        onAddImages: intakeImages,
+                        onRemoveImage: (id) => { removeImage?.(id); },
+                        dropLimits: imageLimits === undefined ? undefined : {
+                            count: imageLimits.maxImagesPerMessage,
+                            size: imageSizeText(imageLimits.maxImageBytes),
+                        },
+                    }), _jsx("div", { ref: scrollRef, className: css.scroll, "data-input-scroll": true, children: _jsxs("div", { className: css.grow, children: [_jsx("div", { "aria-hidden": true, className: clsx(css.backdrop, textareaDisabled && css.backdropDisabled), "data-input-backdrop": true, "data-disabled": textareaDisabled || undefined, children: backdrop }), _jsx("textarea", { ref: inputRef, className: css.input, value: draft, disabled: textareaDisabled, readOnly: machineBusy || workspaceTrigger, "aria-label": workspaceTrigger ? t('hero.chooseWorkspace') : undefined, "aria-haspopup": workspaceTrigger ? 'menu' : undefined, "aria-expanded": workspaceTrigger ? workspacePickerOpen : undefined, "data-phase": input?.phase ?? 'inert', placeholder: placeholder ?? (parentOffline
                                         ? t('placeholder.parentOffline')
                                         : disabled
                                             ? t('placeholder.unavailable')
@@ -625,6 +640,6 @@ export function InputBar({ useSession, useInput, inputActions, keyboard, addImag
                                             // (the gate never consults plan mode), so the actionable hint wins.
                                             : canSteerQueue
                                                 ? t('placeholder.steerQueue')
-                                                : planActive ? t('placeholder.plan') : t('placeholder.default')), rows: 2, onChange: onChange, onKeyDown: onKeyDown, onSelect: onSelect, onCopy: (e) => { onCopyOrCut(e, false); }, onCut: (e) => { onCopyOrCut(e, true); }, onPaste: onPaste, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd }), _jsx("div", { ref: mirrorRef, "aria-hidden": true, className: css.mirror, "data-input-mirror": true, children: `${draft}\n` })] }) }), _jsxs("div", { className: css.row, children: [_jsxs("div", { className: css.tools, children: [_jsx(Tooltip, { label: t('input.commands'), side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.add, "aria-label": t('input.commands'), "aria-haspopup": "listbox", "aria-expanded": commandMenuOpen, disabled: locked || toggleCommandMenu === undefined, onMouseDown: keepFocus, onClick: onToggleCommandMenu, children: _jsx(IconPlusOutline16, { size: 14 }) }) }), _jsxs("div", { className: css.modes, children: [accessSelect, renderSlot('conversation.input.plan', { locked })] }), leftItems] }), _jsxs("div", { className: css.trailing, children: [rightItems, renderSlot('conversation.input.model', { locked: modelSeatLocked }), _jsx(ContextMeter, { useProjection: useProjection, t: t }), interruptible && (_jsx(Tooltip, { label: t('input.stop'), side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.primary, "aria-label": t('input.stop'), disabled: stop === undefined, onMouseDown: keepFocus, onClick: stop, children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "3", fill: "currentColor" }) }) }) })), _jsx(Tooltip, { label: primaryLabel, side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.primary, "aria-label": primaryLabel, disabled: primaryStops ? stop === undefined : empty || disabled || machineBusy, onMouseDown: keepFocus, onClick: onPrimary, children: primaryStops ? (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "3", fill: "currentColor" }) })) : (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("path", { d: "M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z", fill: "currentColor" }) })) }) })] })] })] }), preview !== null && (_jsx(ImageLightbox, { src: preview.previewUrl, alt: preview.file.name || t('image.original'), labels: lightboxLabels(t), onClose: closePreview })), footer] }));
+                                                : planActive ? t('placeholder.plan') : t('placeholder.default')), rows: 2, onChange: onChange, onKeyDown: onKeyDown, onSelect: onSelect, onCopy: (e) => { onCopyOrCut(e, false); }, onCut: (e) => { onCopyOrCut(e, true); }, onPaste: onPaste, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd }), _jsx("div", { ref: mirrorRef, "aria-hidden": true, className: css.mirror, "data-input-mirror": true, children: `${draft}\n` })] }) }), _jsxs("div", { className: css.row, children: [_jsxs("div", { className: css.tools, children: [_jsx(Tooltip, { label: t('input.commands'), side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.add, "aria-label": t('input.commands'), "aria-haspopup": "listbox", "aria-expanded": commandMenuOpen, disabled: locked || toggleCommandMenu === undefined, onMouseDown: keepFocus, onClick: onToggleCommandMenu, children: _jsx(IconPlusOutline16, { size: 14 }) }) }), _jsxs("div", { className: css.modes, children: [accessSelect, renderSlot('conversation.input.plan', { locked })] }), leftItems] }), _jsxs("div", { className: css.trailing, children: [rightItems, renderSlot('conversation.input.model', { locked: modelSeatLocked }), _jsx(ContextMeter, { useProjection: useProjection, t: t }), interruptible && (_jsx(Tooltip, { label: t('input.stop'), side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.primary, "aria-label": t('input.stop'), disabled: stop === undefined, onMouseDown: keepFocus, onClick: stop, children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "3", fill: "currentColor" }) }) }) })), _jsx(Tooltip, { label: primaryLabel, side: "top", delayMs: 500, children: _jsx("button", { type: "button", className: css.primary, "aria-label": primaryLabel, disabled: primaryStops ? stop === undefined : empty || disabled || machineBusy, onMouseDown: keepFocus, onClick: onPrimary, children: primaryStops ? (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "3", fill: "currentColor" }) })) : (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("path", { d: "M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z", fill: "currentColor" }) })) }) })] })] })] }), footer] }));
 }
 //# sourceMappingURL=InputBar.js.map

package/dist/kernel/client-ui-conversation/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomix-ai/nomix-client-ui-conversation",
   "description": "Conversation domain: skeleton, ordered chat flow, composer with the Host-backed busy-Enter preference, and details host",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "publishConfig": {
     "access": "public"
   },
@@ -48,7 +48,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@nomix-ai/nomix-settings": "workspace:^",
     "clsx": "^2.0.0",
     "@nomix-ai/schemastery": "workspace:^"
   },
@@ -61,11 +60,8 @@
     "@nomix-ai/nomix-client-connection": "workspace:^",
     "@nomix-ai/nomix-client-locale": "workspace:^",
     "@nomix-ai/nomix-client-runtime": "workspace:^",
-    "@nomix-ai/nomix-client-ui-attachment": "workspace:^",
-    "@nomix-ai/nomix-client-ui-primitives": "workspace:^",
     "@nomix-ai/nomix-client-ui-settings": "workspace:^",
     "@nomix-ai/nomix-client-ui-input-trigger": "workspace:^",
-    "@nomix-ai/nomix-client-ui-slots": "workspace:^",
     "@nomix-ai/nomix-commands": "workspace:^",
     "@nomix-ai/nomix-compaction": "workspace:^",
     "@nomix-ai/nomix-invariants": "workspace:^",
@@ -73,7 +69,12 @@
     "@nomix-ai/nomix-session-stats": "workspace:^",
     "@nomix-ai/nomix-token-meter": "workspace:^",
     "@nomix-ai/nomix-tools": "workspace:^",
-    "react": "^18.2.0"
+    "@nomix-ai/nomix-settings": "workspace:^",
+    "@nomix-ai/nomix-client-ui-layout": "workspace:^",
+    "@nomix-ai/nomix-goal": "workspace:^",
+    "@nomix-ai/nomix-permission-presets": "workspace:^",
+    "@nomix-ai/nomix-plan-mode": "workspace:^",
+    "@nomix-ai/nomix-tool-todo": "workspace:^"
   },
   "devDependencies": {
     "@nomix-ai/cordis": "workspace:^",
@@ -86,7 +87,6 @@
     "@nomix-ai/nomix-client-runtime": "workspace:^",
     "@nomix-ai/nomix-client-test-runtime": "workspace:^",
     "@nomix-ai/nomix-client-ui-layout": "workspace:^",
-    "@nomix-ai/nomix-client-ui-attachment": "workspace:^",
     "@nomix-ai/nomix-client-ui-primitives": "workspace:^",
     "@nomix-ai/nomix-client-ui-settings": "workspace:^",
     "@nomix-ai/nomix-client-ui-input-trigger": "workspace:^",
@@ -104,7 +104,8 @@
     "@nomix-ai/nomix-tool-todo": "workspace:^",
     "@nomix-ai/nomix-tools": "workspace:^",
     "@types/react": "~18.3.1",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@nomix-ai/nomix-settings": "workspace:^"
   },
   "files": [
     "lib/index.js",