@jini-ai/chat 0.6.5 → 0.6.7

package/dist/react/components/Composer.js

@@ -65,7 +65,7 @@ function runComposerHostEffect(effectName, effect, onSettled, onResolved) {
  * @complexity Time/space: O(n) in rendered attachments and supplied menu items.
  * @overallScore 100/100
  */
-export function Composer({ composer, onSend, disabled = false, sendDisabled = false, placeholder, slots, attachmentPicker, running = false, onCancel, onInterrupt, workingDirectory, onChangeWorkingDirectory, onPickWorkingDirectory, }) {
+export function Composer({ composer, onSend, disabled = false, sendDisabled = false, sendDisabledReason, sendDisabledReasonId, placeholder, slots, attachmentPicker, running = false, onCancel, onInterrupt, workingDirectory, onChangeWorkingDirectory, onPickWorkingDirectory, }) {
     const t = useT();
     const attachmentInputRef = useRef(null);
     const textareaRef = useRef(null);
@@ -88,24 +88,14 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
     const [workdirOpen, setWorkdirOpen] = useState(false);
     const [workdirDraft, setWorkdirDraft] = useState('');
     const [workdirPosition, setWorkdirPosition] = useState();
-    const resolvedPlaceholder = placeholder ?? t('Send a message…');
-    const discoveryGroups = slots?.discoveryGroups ?? [];
+    const { discoveryGroups = [], leadingAccessories, footerLeadingAccessory, footerAccessories, plusMenuItems } = slots ?? {};
     const hasDiscoveryItems = discoveryGroups.some((group) => group.items.length > 0);
-    const slashQuery = parseComposerSlashQuery({ draft: composer.draft });
-    const slashMatches = slashQuery === null ? [] : filterComposerDiscovery({ groups: discoveryGroups, query: slashQuery });
-    const slashOpen = slashMatches.length > 0 && dismissedSlashDraft !== composer.draft;
-    /**
-     * A bare "/" intentionally matches every item (`matchesFuzzyCommand`'s own doc) so the palette
-     * doubles as a browse-everything view — but with nothing typed yet, nothing on screen tells a
-     * first-time user that continuing to type narrows it, and a fuzzy substring match against full
-     * descriptions stays broad for the first character or two regardless (owner-reported "it doesn't
-     * narrow" — narrowing DOES fire on every keystroke, this is the one state where there's no visual
-     * cue that it will). Shown only here, not once the user has started typing a real query — at that
-     * point the shrinking list is its own feedback.
-     */
-    const showSlashFilterHint = slashQuery !== null && slashQuery.command === '' && slashQuery.argument === null;
+    const slash = slashPalette({ draft: composer.draft, groups: discoveryGroups, dismissedSlashDraft });
+    const slashOpen = slash.open;
+    const slashActiveOption = Math.min(slashActiveIndex, slash.matches.length - 1);
+    const popovers = { discoveryMenuOpen, slashOpen, workdirOpen };
     const handleHistoryKey = useComposerHistoryKeys({ composer, textareaRef }, {
-        popupOpen: slashOpen || discoveryMenuOpen || workdirOpen || composer.mention.open,
+        popupOpen: anyPopoverOpen(popovers) || composer.mention.open,
     });
     function restoreComposerFocus() {
         textareaRef.current?.focus();
@@ -123,31 +113,22 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
      * component doesn't otherwise need direct handles to.
      */
     useEffect(() => {
-        if (!discoveryMenuOpen && !slashOpen && !workdirOpen)
+        if (!anyPopoverOpen(popovers))
             return;
-        const composerRoot = textareaRef.current?.closest('.jini-composer');
+        const textarea = textareaRef.current;
+        const composerRoot = textarea?.closest('.jini-composer');
         if (!composerRoot)
             return;
         function handleOutsideMouseDown(event) {
             const target = event.target;
             if (!target)
                 return;
-            if (discoveryMenuOpen) {
-                const trigger = composerRoot.querySelector('.jini-composer-discovery');
-                if (!trigger?.contains(target))
-                    setDiscoveryMenuOpen(false);
-            }
-            if (slashOpen) {
-                const menu = composerRoot.querySelector('#jini-composer-slash-menu');
-                const insideTextarea = textareaRef.current?.contains(target) ?? false;
-                if (!insideTextarea && !menu?.contains(target))
-                    setDismissedSlashDraft(composer.draft);
-            }
-            if (workdirOpen) {
-                const trigger = composerRoot.querySelector('.jini-composer-workdir');
-                if (!trigger?.contains(target))
-                    setWorkdirOpen(false);
-            }
+            if (discoveryMenuOpen && isOutside(composerRoot, '.jini-composer-discovery', target))
+                setDiscoveryMenuOpen(false);
+            if (slashOpen && !textarea.contains(target) && isOutside(composerRoot, '#jini-composer-slash-menu', target))
+                setDismissedSlashDraft(composer.draft);
+            if (workdirOpen && isOutside(composerRoot, '.jini-composer-workdir', target))
+                setWorkdirOpen(false);
         }
         document.addEventListener('mousedown', handleOutsideMouseDown);
         return () => document.removeEventListener('mousedown', handleOutsideMouseDown);
@@ -163,7 +144,7 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
      * composer's on-screen position can change under an open popover without it ever unmounting.
      */
     useLayoutEffect(() => {
-        if (!discoveryMenuOpen && !slashOpen && !workdirOpen)
+        if (!anyPopoverOpen(popovers))
             return undefined;
         const composerRoot = textareaRef.current?.closest('.jini-composer');
         if (!composerRoot)
@@ -222,11 +203,8 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
             composer.setDraft(draft);
         });
     }
-    function selectSlashItem(index) {
-        const match = slashMatches[index];
-        if (!match)
-            return;
-        const resolution = resolveComposerSlashInvocation({ draft: composer.draft, item: match.item });
+    function selectSlashItem(item) {
+        const resolution = resolveComposerSlashInvocation({ draft: composer.draft, item });
         if (!resolution)
             return;
         if (resolution.type === 'complete') {
@@ -238,12 +216,12 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
             return;
         }
         let expectedDraft = composer.draft;
-        if (!match.item.command) {
-            expectedDraft = replaceComposerSlashTrigger({ draft: composer.draft, insertText: match.item.insertText ?? match.item.label });
+        if (!item.command) {
+            expectedDraft = replaceComposerSlashTrigger({ draft: composer.draft, insertText: item.insertText ?? item.label });
             composer.setDraft(expectedDraft);
         }
         setDismissedSlashDraft(null);
-        notifyDiscovery(match.item, 'slash', expectedDraft, resolution.argument);
+        notifyDiscovery(item, 'slash', expectedDraft, resolution.argument);
         restoreComposerFocus();
     }
     function selectPlusItem(item) {
@@ -271,30 +249,26 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
             onChangeWorkingDirectory?.(trimmed);
         setWorkdirOpen(false);
     }
-    function handleKeyDown(event) {
-        if (event.nativeEvent.isComposing)
-            return;
-        if (slashOpen) {
-            const action = resolveComposerSlashKeyAction({ key: event.key, shiftKey: event.shiftKey });
-            if (action.type !== 'none') {
-                event.preventDefault();
-                if (action.type === 'move') {
-                    setSlashActiveIndex((current) => (current + action.offset + slashMatches.length) % slashMatches.length);
-                }
-                else if (action.type === 'select') {
-                    selectSlashItem(Math.min(slashActiveIndex, slashMatches.length - 1));
-                }
-                else {
-                    setDismissedSlashDraft(composer.draft);
-                }
-                return;
-            }
-        }
-        if (handleHistoryKey(event))
-            return;
-        if (event.key !== 'Enter' || event.shiftKey)
-            return;
+    /** Palette navigation wins over history and Enter while the slash palette is open; true when it consumed the key. */
+    function handleSlashKey(event) {
+        if (!slashOpen)
+            return false;
+        const action = resolveComposerSlashKeyAction({ key: event.key, shiftKey: event.shiftKey });
+        if (action.type === 'none')
+            return false;
         event.preventDefault();
+        if (action.type === 'move') {
+            setSlashActiveIndex((current) => (current + action.offset + slash.matches.length) % slash.matches.length);
+        }
+        else if (action.type === 'select') {
+            selectSlashItem(slash.matches[slashActiveOption].item);
+        }
+        else {
+            setDismissedSlashDraft(composer.draft);
+        }
+        return true;
+    }
+    function submitFromEnter(event) {
         if (disabled || !composer.canSubmit)
             return;
         // Cmd/Ctrl+Enter ends the current run and sends this next; plain Enter queues behind it.
@@ -307,6 +281,18 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
         if (!sendDisabled)
             onSend();
     }
+    function handleKeyDown(event) {
+        if (event.nativeEvent.isComposing)
+            return;
+        if (handleSlashKey(event))
+            return;
+        if (handleHistoryKey(event))
+            return;
+        if (event.key !== 'Enter' || event.shiftKey)
+            return;
+        event.preventDefault();
+        submitFromEnter(event);
+    }
     function handleAttachmentChange(event) {
         const files = Array.from(event.target.files ?? []);
         event.target.value = '';
@@ -334,26 +320,84 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
         event.preventDefault();
         runComposerHostEffect('attachmentPicker.onFiles', () => attachmentPicker.onFiles(files));
     }
-    return (_jsxs("div", { className: "jini-composer", children: [slots?.leadingAccessories ? _jsx("div", { className: "jini-composer-leading", children: slots.leadingAccessories }) : null, _jsx(AttachmentTray, { attachments: composer.attachments, onRemove: composer.removeAttachment }), _jsx("textarea", { ref: textareaRef, className: "jini-composer-input", value: composer.draft, placeholder: resolvedPlaceholder, disabled: disabled, onChange: (e) => {
+    return (_jsxs("div", { className: "jini-composer", children: [_jsx(AccessorySlot, { className: "jini-composer-leading", children: leadingAccessories }), _jsx(AttachmentTray, { attachments: composer.attachments, onRemove: composer.removeAttachment }), _jsx("textarea", { ref: textareaRef, className: "jini-composer-input", value: composer.draft, placeholder: placeholder ?? t('Send a message…'), disabled: disabled, onChange: (e) => {
                     composer.setDraft(e.target.value);
                     setSlashActiveIndex(0);
                     setDismissedSlashDraft(null);
                 }, onKeyDown: handleKeyDown, 
                 // Draft persistence is debounced (see `DRAFT_PERSIST_DEBOUNCE_MS`); leaving the field is a
                 // natural point to make it durable now.
-                onBlur: () => composer.flushDraft?.(), onPaste: handleAttachmentPaste, "aria-controls": slashOpen ? 'jini-composer-slash-menu' : undefined, "aria-expanded": slashOpen, "aria-activedescendant": slashOpen
-                    ? `jini-composer-slash-option-${Math.min(slashActiveIndex, slashMatches.length - 1)}`
-                    : undefined, rows: 3 }), slashOpen ? (_jsx(ComposerSlashMenu, { matches: slashMatches, activeIndex: Math.min(slashActiveIndex, slashMatches.length - 1), onSelect: (item) => selectSlashItem(slashMatches.findIndex((match) => match.item === item)), showFilterHint: showSlashFilterHint, style: slashMenuPosition, t: t })) : null, _jsxs("div", { className: "jini-composer-footer", children: [attachmentPicker && !hasDiscoveryItems ? (_jsxs("div", { className: "jini-composer-attachment-picker", children: [_jsx("input", { ref: attachmentInputRef, className: "jini-composer-file-input", "data-testid": "composer-attachment-input", type: "file", multiple: true, "aria-label": t('Attach files'), accept: attachmentPicker.accept, disabled: disabled || attachmentPicker.uploading, onChange: handleAttachmentChange }), _jsx("button", { type: "button", className: "jini-composer-attach", disabled: disabled || attachmentPicker.uploading, onClick: () => attachmentInputRef.current?.click(), title: t(attachmentPicker.uploading ? 'Attaching files…' : 'Attach files'), "aria-label": t(attachmentPicker.uploading ? 'Attaching files…' : 'Attach files'), children: _jsx(RemixIcon, { name: attachmentPicker.uploading ? 'refresh-line' : 'add-line', size: 20, ...(attachmentPicker.uploading ? { className: 'jini-composer-spinner' } : {}) }) })] })) : null, hasDiscoveryItems ? (_jsx(ComposerDiscoveryMenu, { groups: discoveryGroups, open: discoveryMenuOpen, disabled: disabled, ...(attachmentPicker ? { attachmentPicker } : {}), attachmentInputRef: attachmentInputRef, onToggle: () => setDiscoveryMenuOpen((open) => !open), onClose: () => setDiscoveryMenuOpen(false), onSelect: selectPlusItem, onAttachmentChange: handleAttachmentChange, style: discoveryMenuPosition, t: t })) : null, slots?.footerLeadingAccessory ? (_jsx("div", { className: "jini-composer-footer-leading", children: slots.footerLeadingAccessory })) : null, onChangeWorkingDirectory || onPickWorkingDirectory ? (_jsxs("div", { className: "jini-composer-workdir", "data-testid": "composer-workdir", children: [_jsx("button", { type: "button", className: "jini-composer-attach", "data-testid": "composer-workdir-trigger", disabled: disabled, onClick: onPickWorkingDirectory ? () => onPickWorkingDirectory() : toggleWorkdir, ...(onPickWorkingDirectory ? {} : { 'aria-haspopup': 'dialog', 'aria-expanded': workdirOpen }), title: workingDirectory ?? t('Set working directory'), "aria-label": workingDirectory
-                                    ? t('Working directory: {dir}', { dir: workingDirectory })
-                                    : t('Set working directory'), children: _jsx(RemixIcon, { name: "folder-line", size: 20 }) }), !onPickWorkingDirectory && workdirOpen ? (_jsxs("div", { className: "jini-composer-workdir-panel", "data-testid": "composer-workdir-panel", role: "dialog", "aria-label": t('Working directory'), style: workdirPosition, children: [_jsx("input", { type: "text", className: "jini-composer-workdir-input", "data-testid": "composer-workdir-input", value: workdirDraft, onChange: (e) => setWorkdirDraft(e.target.value), onKeyDown: (e) => {
-                                            if (e.key === 'Enter') {
-                                                e.preventDefault();
-                                                confirmWorkdir();
-                                            }
-                                            else if (e.key === 'Escape') {
-                                                e.preventDefault();
-                                                setWorkdirOpen(false);
-                                            }
-                                        }, placeholder: t('Working directory path'), "aria-label": t('Working directory path'), autoFocus: true }), _jsx("button", { type: "button", className: "jini-composer-workdir-confirm", "data-testid": "composer-workdir-confirm", onClick: confirmWorkdir, children: t('Set') })] })) : null] })) : null, slots?.footerAccessories ? (_jsx("div", { className: "jini-composer-footer-accessories", children: slots.footerAccessories })) : null, slots?.plusMenuItems && slots.plusMenuItems.length > 0 ? (_jsx("div", { className: "jini-composer-plus-menu", children: slots.plusMenuItems.map((item) => (_jsxs("button", { type: "button", className: "jini-composer-plus-item", onClick: () => runComposerHostEffect('plusMenuItems.onSelect', () => item.onSelect()), title: t(item.label), children: [item.icon ?? null, _jsx("span", { children: t(item.label) })] }, item.id))) })) : null, _jsxs("span", { className: "jini-composer-send-group", children: [!running || (!disabled && !sendDisabled && composer.canSubmit) ? (_jsx("button", { type: "button", className: "jini-composer-send", disabled: disabled || sendDisabled || !composer.canSubmit, onClick: onSend, title: t('Send'), "aria-label": t('Send'), children: _jsx(RemixIcon, { name: "send-plane-2-line", size: 16 }) })) : null, running ? (_jsx("button", { type: "button", className: "jini-composer-send jini-composer-send--stop", onClick: onCancel, title: t('Stop run'), "aria-label": t('Stop run'), children: _jsx(RemixIcon, { name: "stop-fill", size: 14 }) })) : null] })] })] }));
+                onBlur: () => composer.flushDraft?.(), onPaste: handleAttachmentPaste, ...slashTextareaAria(slashOpen, slashActiveOption), rows: 3 }), slashOpen ? (_jsx(ComposerSlashMenu, { matches: slash.matches, activeIndex: slashActiveOption, onSelect: selectSlashItem, showFilterHint: slash.showFilterHint, style: slashMenuPosition, t: t })) : null, _jsxs("div", { className: "jini-composer-footer", children: [_jsx(ComposerAttachButton, { attachmentPicker: attachmentPicker, hidden: hasDiscoveryItems, disabled: disabled, inputRef: attachmentInputRef, onChange: handleAttachmentChange, t: t }), _jsx(ComposerDiscoveryMenu, { groups: discoveryGroups, open: discoveryMenuOpen, disabled: disabled, ...(attachmentPicker ? { attachmentPicker } : {}), attachmentInputRef: attachmentInputRef, onToggle: () => setDiscoveryMenuOpen((open) => !open), onClose: () => setDiscoveryMenuOpen(false), onSelect: selectPlusItem, onAttachmentChange: handleAttachmentChange, style: discoveryMenuPosition, t: t }), _jsx(AccessorySlot, { className: "jini-composer-footer-leading", children: footerLeadingAccessory }), _jsx(ComposerWorkdirControl, { workingDirectory: workingDirectory, onChangeWorkingDirectory: onChangeWorkingDirectory, onPickWorkingDirectory: onPickWorkingDirectory, disabled: disabled, open: workdirOpen, draft: workdirDraft, position: workdirPosition, onToggle: toggleWorkdir, onDraftChange: setWorkdirDraft, onConfirm: confirmWorkdir, onClose: () => setWorkdirOpen(false), t: t }), _jsx(AccessorySlot, { className: "jini-composer-footer-accessories", children: footerAccessories }), _jsx(ComposerPlusMenu, { items: plusMenuItems, t: t }), _jsx(ComposerSendGroup, { running: running, disabled: disabled, sendDisabled: sendDisabled, canSubmit: composer.canSubmit, onSend: onSend, onCancel: onCancel, sendDisabledReason: sendDisabledReason, sendDisabledReasonId: sendDisabledReasonId, t: t })] })] }));
+}
+function anyPopoverOpen({ discoveryMenuOpen, slashOpen, workdirOpen }) {
+    return discoveryMenuOpen || slashOpen || workdirOpen;
+}
+/** A missing popover element counts as outside, so a stale open flag still closes. */
+function isOutside(composerRoot, selector, target) {
+    return !composerRoot.querySelector(selector)?.contains(target);
+}
+/** Slash palette state derived from the live draft. */
+function slashPalette({ draft, groups, dismissedSlashDraft }) {
+    const query = parseComposerSlashQuery({ draft });
+    const matches = query === null ? [] : filterComposerDiscovery({ groups, query });
+    return {
+        matches,
+        open: matches.length > 0 && dismissedSlashDraft !== draft,
+        /**
+         * A bare "/" intentionally matches every item (`matchesFuzzyCommand`'s own doc) so the palette
+         * doubles as a browse-everything view — but with nothing typed yet, nothing on screen tells a
+         * first-time user that continuing to type narrows it, and a fuzzy substring match against full
+         * descriptions stays broad for the first character or two regardless (owner-reported "it doesn't
+         * narrow" — narrowing DOES fire on every keystroke, this is the one state where there's no visual
+         * cue that it will). Shown only here, not once the user has started typing a real query — at that
+         * point the shrinking list is its own feedback.
+         */
+        showFilterHint: query !== null && query.command === '' && query.argument === null,
+    };
+}
+function slashTextareaAria(slashOpen, activeOption) {
+    if (!slashOpen)
+        return { 'aria-controls': undefined, 'aria-expanded': false, 'aria-activedescendant': undefined };
+    return { 'aria-controls': 'jini-composer-slash-menu', 'aria-expanded': true, 'aria-activedescendant': `jini-composer-slash-option-${activeOption}` };
+}
+function AccessorySlot({ className, children }) {
+    return children ? _jsx("div", { className: className, children: children }) : null;
+}
+/** The plain paperclip, shown only when there is no "+" discovery menu to carry attaching instead. */
+function ComposerAttachButton({ attachmentPicker, hidden, disabled, inputRef, onChange, t }) {
+    if (!attachmentPicker || hidden)
+        return null;
+    const uploading = attachmentPicker.uploading;
+    const label = t(uploading ? 'Attaching files…' : 'Attach files');
+    return (_jsxs("div", { className: "jini-composer-attachment-picker", children: [_jsx("input", { ref: inputRef, className: "jini-composer-file-input", "data-testid": "composer-attachment-input", type: "file", multiple: true, "aria-label": t('Attach files'), accept: attachmentPicker.accept, disabled: disabled || uploading, onChange: onChange }), _jsx("button", { type: "button", className: "jini-composer-attach", disabled: disabled || uploading, onClick: () => inputRef.current?.click(), title: label, "aria-label": label, children: _jsx(RemixIcon, { name: uploading ? 'refresh-line' : 'add-line', size: 20, ...(uploading ? { className: 'jini-composer-spinner' } : {}) }) })] }));
+}
+function ComposerWorkdirControl({ workingDirectory, onChangeWorkingDirectory, onPickWorkingDirectory, disabled, open, draft, position, onToggle, onDraftChange, onConfirm, onClose, t }) {
+    if (!onChangeWorkingDirectory && !onPickWorkingDirectory)
+        return null;
+    return (_jsxs("div", { className: "jini-composer-workdir", "data-testid": "composer-workdir", children: [_jsx("button", { type: "button", className: "jini-composer-attach", "data-testid": "composer-workdir-trigger", disabled: disabled, onClick: onPickWorkingDirectory ? () => onPickWorkingDirectory() : onToggle, ...(onPickWorkingDirectory ? {} : { 'aria-haspopup': 'dialog', 'aria-expanded': open }), title: workingDirectory ?? t('Set working directory'), "aria-label": workingDirectory
+                    ? t('Working directory: {dir}', { dir: workingDirectory })
+                    : t('Set working directory'), children: _jsx(RemixIcon, { name: "folder-line", size: 20 }) }), !onPickWorkingDirectory && open ? (_jsxs("div", { className: "jini-composer-workdir-panel", "data-testid": "composer-workdir-panel", role: "dialog", "aria-label": t('Working directory'), style: position, children: [_jsx("input", { type: "text", className: "jini-composer-workdir-input", "data-testid": "composer-workdir-input", value: draft, onChange: (e) => onDraftChange(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                onConfirm();
+                            }
+                            else if (e.key === 'Escape') {
+                                e.preventDefault();
+                                onClose();
+                            }
+                        }, placeholder: t('Working directory path'), "aria-label": t('Working directory path'), autoFocus: true }), _jsx("button", { type: "button", className: "jini-composer-workdir-confirm", "data-testid": "composer-workdir-confirm", onClick: onConfirm, children: t('Set') })] })) : null] }));
+}
+function ComposerPlusMenu({ items, t }) {
+    if (!items || items.length === 0)
+        return null;
+    return (_jsx("div", { className: "jini-composer-plus-menu", children: items.map((item) => (_jsxs("button", { type: "button", className: "jini-composer-plus-item", onClick: () => runComposerHostEffect('plusMenuItems.onSelect', () => item.onSelect()), title: t(item.label), children: [item.icon ?? null, _jsx("span", { children: t(item.label) })] }, item.id))) }));
+}
+function ComposerSendGroup({ running, disabled, sendDisabled, canSubmit, onSend, onCancel, sendDisabledReason, sendDisabledReasonId, t }) {
+    const canSend = !disabled && !sendDisabled && canSubmit;
+    return (
+    // While a run streams, Send sits beside Stop once there is something to send: a message
+    // sent mid-run goes to the running agent (or next, if it cannot take it now). One group so
+    // the footer's space-between keeps the two together at the trailing edge.
+    _jsxs("span", { className: "jini-composer-send-group", children: [!running || canSend ? (_jsx("button", { type: "button", className: "jini-composer-send", disabled: !canSend, onClick: onSend, title: sendDisabledReason ?? t('Send'), "aria-label": t('Send'), "aria-describedby": sendDisabledReasonId, children: _jsx(RemixIcon, { name: "send-plane-2-line", size: 16 }) })) : null, running ? (_jsx("button", { type: "button", className: "jini-composer-send jini-composer-send--stop", onClick: onCancel, title: t('Stop run'), "aria-label": t('Stop run'), children: _jsx(RemixIcon, { name: "stop-fill", size: 14 }) })) : null] }));
 }
 //# sourceMappingURL=Composer.js.map

package/dist/react/components/ConversationList.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @module ConversationList
  *
- * The conversation switcher: new / select / delete / search / rename-on-double-click. Drop it
+ * The conversation switcher: new / select / delete / search / inline rename. Drop it
  * into `ChatPane`'s `leadingAccessory` slot — it needs no changes to `ChatPane` itself.
  *
  * Storage-agnostic by construction. It takes data and callbacks and owns nothing durable, so a
@@ -15,8 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * when to swap is concrete — a client filter over a *paginated* list silently searches only the
  * loaded page, so the moment a host paginates, it must provide `onSearch`.
  *
- * Rename is double-click, restoring parity with Open Design's original `ConversationsMenu`; its
- * own newer in-pane menu dropped the affordance, which is a regression rather than a decision.
+ * Rename has an explicit keyboard-accessible action as well as the legacy double-click shortcut.
  *
  * Unstyled semantic markup with `jini-conv-*` class names, matching every other component in this
  * package — a host supplies the CSS.
@@ -26,14 +25,13 @@ import { useT } from '../hooks/context.js';
 import { Icon } from './Icon.js';
 import { useConversationListTitles } from './ConversationList.hooks.js';
 import { conversationTriggerAttributes } from './ConversationList.rules.js';
+import { ConversationTitleEditor } from './ConversationTitleEditor.js';
 /**
  * How long a click waits to see whether it is really the first half of a double-click.
  *
- * Chosen below the ~500ms OS double-click threshold on purpose: this only has to disambiguate
- * two clicks a user made deliberately in quick succession, and a longer wait would make ordinary
- * conversation switching feel sticky.
+ * Covers the common OS double-click window, including deliberate clicks 300ms apart.
  */
-const DOUBLE_CLICK_GRACE_MS = 220;
+const DOUBLE_CLICK_GRACE_MS = 500;
 function reportConversationListHostEffectFailure(effectName, error) {
     console.error(`[@jini-ai/chat] ConversationList ${effectName} host effect failed:`, error);
 }
@@ -72,8 +70,6 @@ export function ConversationList({ conversations: savedConversations, activeConv
     const [savedServerResults, setServerResults] = useState(null);
     const { conversations, serverResults, rawTitles } = useConversationListTitles({ conversations: savedConversations, serverResults: savedServerResults });
     const [editingId, setEditingId] = useState(null);
-    const [draft, setDraft] = useState('');
-    const originalDraftRef = useRef('');
     const rootRef = useRef(null);
     const deferredQuery = useDeferredValue(query);
     /**
@@ -97,7 +93,7 @@ export function ConversationList({ conversations: savedConversations, activeConv
      * Closing the switcher also abandons a click that has not yet resolved into a selection.
      *
      * The grace window exists so a double-click can become a rename rather than a selection, which
-     * means a single click stays pending for 220ms. Press Escape (or click outside) inside that window
+     * means a single click stays pending for the grace window. Press Escape (or click outside) inside it
      * and the menu closes while the timer survives, so the row is selected anyway — and if the pending
      * click was on Delete, it selects an id that no longer exists.
      */
@@ -110,8 +106,12 @@ export function ConversationList({ conversations: savedConversations, activeConv
     useEffect(() => {
         if (!open)
             return;
+        // The root div is committed before any effect runs, so it is never null here. Capturing it
+        // (rather than reading the ref per event) keeps a late event during unmount, after React has
+        // detached the ref but before this cleanup runs, measured against the real node.
+        const root = rootRef.current;
         function onPointerDown(event) {
-            if (!rootRef.current?.contains(event.target))
+            if (!root.contains(event.target))
                 setOpen(false);
         }
         function onKeyDown(event) {
@@ -164,24 +164,21 @@ export function ConversationList({ conversations: savedConversations, activeConv
     // One timestamp for the whole render so every row's "5m ago" is computed against the same
     // instant — otherwise rows drawn either side of a second boundary disagree.
     const now = Date.now();
-    const commitRename = useCallback((id) => {
-        const next = draft.trim();
+    const commitRename = useCallback((id, next) => {
         setEditingId(null);
-        // An empty rename is a cancel, not a request to erase the title — a user who selects all
-        // and hits Enter has almost certainly changed their mind.
-        //
         // No optimistic title update happens here — the row keeps rendering `item.title` from
         // props until the host's own state updates, so a rejection cannot leave the UI showing a
         // title the server didn't accept. Reporting the failure is what closes the remaining gap.
-        // Merely opening and leaving the editor must not normalize a deliberately saved title.
-        if (next && draft !== originalDraftRef.current)
-            runConversationListHostEffect('onRename', () => onRename(id, next));
-    }, [draft, onRename]);
+        runConversationListHostEffect('onRename', () => onRename(id, next));
+    }, [onRename]);
+    const startRename = (id) => {
+        cancelPendingSelect();
+        setEditingId(id);
+    };
     const requestDelete = useCallback((item) => {
         const confirmer = confirmDelete ??
-            ((c) => typeof window === 'undefined'
-                ? true
-                : window.confirm(t('Delete "{title}"? This cannot be undone.').replace('{title}', c.title ?? t('Untitled'))));
+            // Only ever called from a click handler, so a browser `window` always exists here.
+            ((c) => window.confirm(t('Delete "{title}"? This cannot be undone.').replace('{title}', c.title ?? t('Untitled'))));
         // No optimistic removal — the row stays in `conversations` until the host's own state
         // drops it — so a rejected confirmer or `onDelete` cannot leave a deleted-looking row
         // behind; it only means the item silently never disappears. `onDelete` is the effect name
@@ -193,34 +190,23 @@ export function ConversationList({ conversations: savedConversations, activeConv
         });
     }, [confirmDelete, onDelete, t]);
     const active = conversations.find((c) => c.id === activeConversationId) ?? null;
-    return (_jsxs("div", { className: "jini-conv", ref: rootRef, children: [_jsx("button", { type: "button", className: `jini-conv-trigger${open ? ' jini-conv-trigger-open' : ''}`, "aria-haspopup": "menu", "aria-expanded": open, ...conversationTriggerAttributes({ activeTitle: active?.title, t }, { label: triggerLabel, nativeTitle }), "data-testid": "conversation-trigger", onClick: () => setOpen((v) => !v), children: _jsx(Icon, { name: "comment", size: 16 }) }), open ? (_jsxs("div", { className: "jini-conv-menu", role: "menu", "data-testid": "conversation-menu", children: [_jsxs("div", { className: "jini-conv-head", children: [_jsxs("span", { className: "jini-conv-heading", children: [t('Conversations'), _jsx("span", { className: "jini-conv-count", "data-testid": "conversation-count", children: conversations.length })] }), _jsxs("button", { type: "button", className: "jini-conv-new", disabled: createDisabled, "data-testid": "conversation-new", onClick: () => {
-                                    if (createDisabled)
-                                        return;
+    return (_jsxs("div", { className: "jini-conv", ref: rootRef, children: [_jsx("button", { type: "button", className: `jini-conv-trigger${open ? ' jini-conv-trigger-open' : ''}`, "aria-haspopup": "menu", "aria-expanded": open, ...conversationTriggerAttributes({ activeTitle: active?.title, t }, { label: triggerLabel, nativeTitle }), "data-testid": "conversation-trigger", onClick: () => setOpen((v) => !v), children: _jsx(Icon, { name: "comment", size: 16 }) }), open ? (_jsxs("div", { className: "jini-conv-menu", role: "menu", "data-testid": "conversation-menu", children: [_jsxs("div", { className: "jini-conv-head", children: [_jsxs("span", { className: "jini-conv-heading", children: [t('Conversations'), _jsx("span", { className: "jini-conv-count", "data-testid": "conversation-count", children: conversations.length })] }), _jsxs("button", { type: "button", className: "jini-conv-new", disabled: createDisabled, "data-testid": "conversation-new", 
+                                // `disabled` alone guards this: a disabled button never dispatches a click.
+                                onClick: () => {
                                     // No optimistic row is inserted — the list still comes straight from props — so a
                                     // rejection here cannot leave a phantom conversation on screen; it only means the
                                     // switcher closed without one actually being created. Reporting the failure closes
                                     // the remaining gap between "switcher closed" and "the host actually knows".
                                     runConversationListHostEffect('onCreate', () => onCreate());
                                     setOpen(false);
-                                }, children: [_jsx(Icon, { name: "plus", size: 12 }), _jsx("span", { children: t('New') })] })] }), _jsxs("label", { className: "jini-conv-search", children: [_jsx(Icon, { name: "search", size: 13 }), _jsx("input", { type: "search", value: query, placeholder: t('Search conversations'), "data-testid": "conversation-search", onChange: (event) => setQuery(event.currentTarget.value) })] }), _jsx("div", { className: "jini-conv-list", "data-testid": "conversation-list", children: conversations.length === 0 ? (_jsx("div", { className: "jini-conv-empty", children: emptyState ?? t('No conversations yet') })) : visible.length === 0 ? (_jsx("div", { className: "jini-conv-empty", children: t('No conversations match') })) : (visible.map((item) => (_jsxs("div", { className: `jini-conv-item${item.id === activeConversationId ? ' jini-conv-item-active' : ''}`, "data-testid": `conversation-item-${item.id}`, children: [editingId === item.id ? (_jsx("input", { autoFocus: true, className: "jini-conv-rename", value: draft, "data-testid": `conversation-rename-${item.id}`, onChange: (event) => setDraft(event.currentTarget.value), onBlur: () => commitRename(item.id), onKeyDown: (event) => {
-                                        if (event.key === 'Enter')
-                                            commitRename(item.id);
-                                        else if (event.key === 'Escape')
-                                            setEditingId(null);
-                                    } })) : (_jsxs("button", { type: "button", className: "jini-conv-item-select", "data-testid": `conversation-select-${item.id}`, title: t('Double-click to rename'), onClick: () => {
+                                }, children: [_jsx(Icon, { name: "plus", size: 12 }), _jsx("span", { children: t('New') })] })] }), _jsxs("label", { className: "jini-conv-search", children: [_jsx(Icon, { name: "search", size: 13 }), _jsx("input", { type: "search", value: query, placeholder: t('Search conversations'), "data-testid": "conversation-search", onChange: (event) => setQuery(event.currentTarget.value) })] }), _jsx("div", { className: "jini-conv-list", "data-testid": "conversation-list", children: conversations.length === 0 ? (_jsx("div", { className: "jini-conv-empty", children: emptyState ?? t('No conversations yet') })) : visible.length === 0 ? (_jsx("div", { className: "jini-conv-empty", children: t('No conversations match') })) : (visible.map((item) => (_jsxs("div", { className: `jini-conv-item${item.id === activeConversationId ? ' jini-conv-item-active' : ''}`, "data-testid": `conversation-item-${item.id}`, children: [editingId === item.id ? (_jsx(ConversationTitleEditor, { title: rawTitles.get(item.id) ?? null, "data-testid": `conversation-rename-${item.id}`, onCommit: (next) => commitRename(item.id, next), onCancel: () => setEditingId(null) })) : (_jsxs("button", { type: "button", className: "jini-conv-item-select", "data-testid": `conversation-select-${item.id}`, title: t('Double-click to rename'), onClick: () => {
                                         cancelPendingSelect();
                                         pendingSelectRef.current = setTimeout(() => {
                                             pendingSelectRef.current = null;
                                             onSelect(item.id);
                                             setOpen(false);
                                         }, DOUBLE_CLICK_GRACE_MS);
-                                    }, onDoubleClick: () => {
-                                        cancelPendingSelect();
-                                        // Snapshot the raw seed: a host refresh during editing is not a user edit.
-                                        originalDraftRef.current = rawTitles.get(item.id) ?? '';
-                                        setEditingId(item.id);
-                                        setDraft(originalDraftRef.current);
-                                    }, children: [_jsx("span", { className: "jini-conv-item-title", children: item.title ?? t('Untitled') }), _jsxs("span", { className: "jini-conv-item-meta", children: [item.messageCount === undefined ? '' : `${item.messageCount} msg · `, relativeTime(item.updatedAt, now)] })] })), _jsx("button", { type: "button", className: "jini-conv-item-delete", "aria-label": t('Delete conversation'), "data-testid": `conversation-delete-${item.id}`, onClick: (event) => {
+                                    }, onDoubleClick: () => startRename(item.id), children: [_jsx("span", { className: "jini-conv-item-title", children: item.title ?? t('Untitled') }), _jsxs("span", { className: "jini-conv-item-meta", children: [item.messageCount === undefined ? '' : `${item.messageCount} msg · `, relativeTime(item.updatedAt, now)] })] })), editingId !== item.id ? _jsx("button", { type: "button", className: "jini-conv-item-rename", "aria-label": t('Rename chat'), "data-testid": `conversation-rename-button-${item.id}`, onClick: () => startRename(item.id), children: _jsx(Icon, { name: "pencil", size: 12 }) }) : null, _jsx("button", { type: "button", className: "jini-conv-item-delete", "aria-label": t('Delete conversation'), "data-testid": `conversation-delete-${item.id}`, onClick: (event) => {
                                         event.stopPropagation();
                                         requestDelete(item);
                                     }, children: _jsx(Icon, { name: "close", size: 12 }) })] }, item.id)))) })] })) : null] }));

package/dist/react/components/ConversationTitleEditor.d.ts

@@ -0,0 +1,27 @@
+export interface ConversationTitleEditorProps {
+    title: string | null;
+    onCommit: (title: string) => void | Promise<void>;
+    onCancel: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Shared inline rename lifecycle. Enter/blur save once; Escape, empty and unchanged drafts cancel.
+ * Snapshots the raw title on mount so a background title refresh cannot become a user edit.
+ * Host failures are reported without leaving a rejected promise unhandled.
+ * @complexity O(n) time/space to trim a draft of n code units; the saved title is bounded.
+ * @example <ConversationTitleEditor title={title} onCommit={rename} onCancel={close} />
+ */
+export declare function ConversationTitleEditor({ title, onCommit, onCancel, className, 'data-testid': testId }: ConversationTitleEditorProps): import("react").JSX.Element;
+export interface ConversationTitleProps {
+    title: string | null;
+    displayTitle: string;
+    onRename: (title: string) => void | Promise<void>;
+    disabled?: boolean;
+}
+/** Clickable title using the same editor as ConversationList; a host keys it by conversation ID.
+ * @complexity O(1) outside the shared editor's draft normalization.
+ * @example <ConversationTitle key={id} title={rawTitle} displayTitle={label} onRename={rename} />
+ */
+export declare function ConversationTitle({ title, displayTitle, onRename, disabled }: ConversationTitleProps): import("react").JSX.Element;
+//# sourceMappingURL=ConversationTitleEditor.d.ts.map

package/dist/react/components/ConversationTitleEditor.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { MAX_CONVERSATION_TITLE_LENGTH } from '../../core/conversation-title.js';
+import { useT } from '../hooks/context.js';
+/**
+ * Shared inline rename lifecycle. Enter/blur save once; Escape, empty and unchanged drafts cancel.
+ * Snapshots the raw title on mount so a background title refresh cannot become a user edit.
+ * Host failures are reported without leaving a rejected promise unhandled.
+ * @complexity O(n) time/space to trim a draft of n code units; the saved title is bounded.
+ * @example <ConversationTitleEditor title={title} onCommit={rename} onCancel={close} />
+ */
+export function ConversationTitleEditor({ title, onCommit, onCancel, className = 'jini-conv-rename', 'data-testid': testId }) {
+    const t = useT();
+    const original = useRef(title ?? '');
+    const [draft, setDraft] = useState(original.current);
+    const finished = useRef(false);
+    // Enter/Escape can unmount a focused input and cause blur; only the first completion may act.
+    const finish = async ({ cancel = false } = {}) => {
+        if (finished.current)
+            return;
+        finished.current = true;
+        const next = draft.trim().slice(0, MAX_CONVERSATION_TITLE_LENGTH);
+        if (cancel || !next || draft === original.current) {
+            onCancel();
+            return;
+        }
+        try {
+            await onCommit(next);
+        }
+        catch (error) {
+            console.error('[@jini-ai/chat] ConversationTitleEditor onCommit host effect failed:', error);
+        }
+    };
+    return _jsx("input", { autoFocus: true, className: className, "aria-label": t('Rename chat'), "data-testid": testId, maxLength: MAX_CONVERSATION_TITLE_LENGTH, value: draft, onChange: (event) => setDraft(event.currentTarget.value), onBlur: () => { void finish(); }, onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                void finish({ cancel: event.key === 'Escape' });
+            }
+        } });
+}
+/** Clickable title using the same editor as ConversationList; a host keys it by conversation ID.
+ * @complexity O(1) outside the shared editor's draft normalization.
+ * @example <ConversationTitle key={id} title={rawTitle} displayTitle={label} onRename={rename} />
+ */
+export function ConversationTitle({ title, displayTitle, onRename, disabled = false }) {
+    const t = useT();
+    const [editing, setEditing] = useState(false);
+    return editing ? _jsx(ConversationTitleEditor, { title: title, onCancel: () => setEditing(false), onCommit: (next) => {
+            setEditing(false);
+            return onRename(next);
+        } }) : _jsx("button", { type: "button", className: "jini-conv-title-button", "aria-label": t('Rename chat'), title: displayTitle, disabled: disabled, onClick: () => setEditing(true), children: displayTitle });
+}
+//# sourceMappingURL=ConversationTitleEditor.js.map

package/dist/react/components/Icon.d.ts

@@ -7,7 +7,7 @@
  * AgentIcon and WorkingDirPicker.
  */
 import type { SVGProps } from 'react';
-export type IconName = 'spinner' | 'check' | 'close' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'attach' | 'file' | 'image' | 'x' | 'comment' | 'search' | 'plus' | 'copy';
+export type IconName = 'spinner' | 'check' | 'close' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'attach' | 'file' | 'image' | 'x' | 'comment' | 'search' | 'plus' | 'pencil' | 'copy';
 interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
     name: IconName;
     size?: number | string;