@adecore/agents-react 0.24.0 → 0.24.2

package/dist/chat/ui/Composer.js

@@ -39,6 +39,7 @@ import { useNotice } from './composer/use-notice.js';
 import { usePendingRequests } from './composer/use-pending-requests.js';
 import { usePromptHistory } from './composer/use-prompt-history.js';
 import { usePromptHold } from './composer/use-prompt-hold.js';
+import { surfacePartOf } from './composer/surface.js';
 import { useTakeBack } from './composer/use-take-back.js';
 function sendLabelKey(busy, steerable, delivery) {
     if (!busy) {
@@ -121,29 +122,40 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setText: (next) => box.setText(next),
         submit
     });
+    const pointSurface = (event) => {
+        event.currentTarget.toggleAttribute('data-text-cursor', surfacePartOf(event.target, event.currentTarget) !== 'action');
+    };
+    const pressSurface = (event) => {
+        if (!writable || event.button !== 0 || event.defaultPrevented || surfacePartOf(event.target, event.currentTarget) !== 'surface') {
+            return;
+        }
+        // Nothing around the field selects, so the default would only blur it on the way, closing its picker and lifting a held prompt card.
+        event.preventDefault();
+        inputRef.current?.setCaret(Infinity);
+    };
     return (_jsxs("div", { className: "chat-composer-content pointer-events-none relative z-10 w-full", children: [!atEnd && !readOnly && (_jsx("div", { className: "absolute inset-x-0 bottom-full mb-2 flex justify-center", children: _jsx(Tooltip, { label: t('composer.jumpToEnd'), name: true, children: _jsx(Surface, { render: _jsx("button", { onClick: () => scrollTimelineToEnd(chatId) }), className: "pointer-events-auto grid h-8 w-8 place-items-center rounded-full text-text-muted hover:text-text", children: _jsx(Icon, { icon: ChevronDown, size: 16 }) }) }) })), _jsx(ChatActivity, { chatId: chatId }), _jsx("div", { className: clsx('@container/composer pointer-events-auto flex flex-col overflow-hidden rounded-2xl border shadow-float backdrop-blur-[14px] focus-ring-within', files.dragging
                     ? 'border-accent bg-[color-mix(in_srgb,var(--accent-soft)_60%,var(--surface-raised))]'
-                    : 'border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)]'), ...files.dropTarget, children: _jsxs(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !empty, denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), hold: hold, children: [_jsx(LimitDock, { chatId: chatId, info: info }), _jsx(GoalDock, { chatId: chatId, info: info, goals: capabilities?.goals }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: controls.compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), _jsx(ComposerMenu, { menus: menus }), queue.length > 0 && (_jsx(QueuedMessages, { chatId: chatId, queue: queue, paused: info.queuePaused === true, takingBack: takingBack !== null, onEdit: (message) => void takeBack(message) })), draft.quote !== '' && (_jsx(DraftQuote, { chatId: chatId, quote: draft.quote, source: draft.quoteSource, onRemove: box.removeQuote, onSourceGone: () => notice.setNotice(t('rows.user.quoteGone')) })), draft.chats.length > 0 && _jsx(DraftChats, { chats: draft.chats, onRemove: box.removeChat }), draft.attachments.length > 0 && _jsx(DraftAttachments, { attachments: draft.attachments, onRemove: box.removeAttachment }), _jsx(ComposerInput, { ref: inputRef, dictationToolbar: dictationToolbar, className: "composer-input select-text text-sm leading-normal text-text", value: draft.text, placeholder: placeholder, disabled: !writable, tabbable: focused, extensions: editorExtensions, aria: menus.inputAria, onChange: (value, selection, state) => {
-                                hold.noteInput();
-                                box.setText(value);
-                                menus.setMenuIndex(0);
-                                menus.trackTriggers(value, selection, state);
-                                history.edited(value);
-                            }, onSelectionChange: menus.trackTriggers, onBlur: () => {
-                                menus.close();
-                                hold.release('blur');
-                            }, onComposing: hold.setComposing, onKeyDown: onKeyDown, onPaste: files.onPaste }), notice.notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice.notice })), guard.visible && (_jsxs("div", { className: clsx('px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5', guard.tooLong ? 'text-status-error' : 'text-text-faint'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsx(ComposerControls, { chatId: chatId, info: info, providerFixed: providerFixed, writable: writable, attachable: capabilities?.attachments !== false, controls: controls, send: {
-                                visible: !busy || !empty,
-                                disabled: empty || !writable || guard.tooLong,
-                                label: t(sendLabelKey(busy, steerable, sendDelivery)),
-                                kbd: sendShortcut(sendKey, draft.text.includes('\n')),
-                                onSend: (alternate) => submit(alternate ? 'alternate' : 'default')
-                            }, dictationToolbar: setDictationToolbar, onFiles: (picked) => {
-                                files.addFiles(picked);
-                                inputRef.current?.focus();
-                            }, onRestore: restoreStashed, insert: (added) => {
-                                if (writable) {
-                                    inputRef.current?.insert(added);
-                                }
-                            } })] }) }), _jsx(PromptDialog, { open: controls.confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: controls.forceClearThread, onOpenChange: controls.cancelClear })] }));
+                    : 'border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)]'), ...files.dropTarget, children: _jsx(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !empty, denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), hold: hold, children: _jsxs("div", { className: clsx(writable && 'data-[text-cursor]:cursor-text'), onPointerOver: pointSurface, onMouseDown: pressSurface, children: [_jsx(LimitDock, { chatId: chatId, info: info }), _jsx(GoalDock, { chatId: chatId, info: info, goals: capabilities?.goals }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: controls.compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), _jsx(ComposerMenu, { menus: menus }), queue.length > 0 && (_jsx(QueuedMessages, { chatId: chatId, queue: queue, paused: info.queuePaused === true, takingBack: takingBack !== null, onEdit: (message) => void takeBack(message) })), draft.quote !== '' && (_jsx(DraftQuote, { chatId: chatId, quote: draft.quote, source: draft.quoteSource, onRemove: box.removeQuote, onSourceGone: () => notice.setNotice(t('rows.user.quoteGone')) })), draft.chats.length > 0 && _jsx(DraftChats, { chats: draft.chats, onRemove: box.removeChat }), draft.attachments.length > 0 && _jsx(DraftAttachments, { attachments: draft.attachments, onRemove: box.removeAttachment }), _jsx(ComposerInput, { ref: inputRef, dictationToolbar: dictationToolbar, className: "composer-input select-text text-sm leading-normal text-text", value: draft.text, placeholder: placeholder, disabled: !writable, tabbable: focused, extensions: editorExtensions, aria: menus.inputAria, onChange: (value, selection, state) => {
+                                    hold.noteInput();
+                                    box.setText(value);
+                                    menus.setMenuIndex(0);
+                                    menus.trackTriggers(value, selection, state);
+                                    history.edited(value);
+                                }, onSelectionChange: menus.trackTriggers, onBlur: () => {
+                                    menus.close();
+                                    hold.release('blur');
+                                }, onComposing: hold.setComposing, onKeyDown: onKeyDown, onPaste: files.onPaste }), notice.notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice.notice })), guard.visible && (_jsxs("div", { className: clsx('px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5', guard.tooLong ? 'text-status-error' : 'text-text-faint'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsx(ComposerControls, { chatId: chatId, info: info, providerFixed: providerFixed, writable: writable, attachable: capabilities?.attachments !== false, controls: controls, send: {
+                                    visible: !busy || !empty,
+                                    disabled: empty || !writable || guard.tooLong,
+                                    label: t(sendLabelKey(busy, steerable, sendDelivery)),
+                                    kbd: sendShortcut(sendKey, draft.text.includes('\n')),
+                                    onSend: (alternate) => submit(alternate ? 'alternate' : 'default')
+                                }, dictationToolbar: setDictationToolbar, onFiles: (picked) => {
+                                    files.addFiles(picked);
+                                    inputRef.current?.focus();
+                                }, onRestore: restoreStashed, insert: (added) => {
+                                    if (writable) {
+                                        inputRef.current?.insert(added);
+                                    }
+                                } })] }) }) }), _jsx(PromptDialog, { open: controls.confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: controls.forceClearThread, onOpenChange: controls.cancelClear })] }));
 }

package/dist/chat/ui/EditDiff.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy.js';
 import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget.js';
@@ -17,7 +18,7 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }) {
     const legacyMode = !allowEditor || loadEngine === undefined;
     const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(change.before, change.after), [legacyMode, change.before, change.after]);
     const omitted = _jsx(DiffOmitted, { path: change.path });
-    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.before, change.after], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyEditDiff, { change: change, maxHeight: maxHeight }) }) })) : (omitted);
+    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.before, change.after], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyEditDiff, { change: change, maxHeight: maxHeight }) }) })) : (omitted);
     if (!sourceAllowed) {
         return omitted;
     }
@@ -25,5 +26,5 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }) {
         return fallback;
     }
     const unavailable = _jsx(DiffUnavailable, { path: change.path });
-    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.before, change.after, loadEngine], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorEditDiff, { change: change, loadEngine: loadEngine, fallback: unavailable, maxHeight: maxHeight, sourceChecked: true }) }) }));
+    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.before, change.after, loadEngine], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorEditDiff, { change: change, loadEngine: loadEngine, fallback: unavailable, maxHeight: maxHeight, sourceChecked: true }) }) }));
 }

package/dist/chat/ui/UnifiedDiff.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy.js';
 import { diffSourceBudget, legacyDiffBudget, patchSourceBudget } from './diff/diff-source-budget.js';
@@ -23,7 +24,7 @@ export default function UnifiedDiff(props) {
     const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(oldText, newText, change.diff), [legacyMode, oldText, newText, change.diff]);
     const rawAllowed = useMemo(() => hasHunks || legacyDiffBudget('', '', change.diff), [hasHunks, change.diff]);
     const omitted = _jsx(DiffOmitted, { path: change.path });
-    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.diff, oldText, newText, diffStyle], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyUnifiedDiff, { ...props }) }) })) : (omitted);
+    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.diff, oldText, newText, diffStyle], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyUnifiedDiff, { ...props }) }) })) : (omitted);
     if (!sourceAllowed) {
         return omitted;
     }
@@ -34,5 +35,5 @@ export default function UnifiedDiff(props) {
         return fallback;
     }
     const unavailable = _jsx(DiffUnavailable, { path: change.path });
-    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorPatchDiff, { change: change, sourceChecked: true, contents: contents, ignoreWhitespace: ignoreWhitespace, wrap: overflow === 'wrap', fill: fill, maxHeight: maxHeight, layout: diffStyle, loadEngine: loadEngine, fallback: unavailable }) }) }));
+    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorPatchDiff, { change: change, sourceChecked: true, contents: contents, ignoreWhitespace: ignoreWhitespace, wrap: overflow === 'wrap', fill: fill, maxHeight: maxHeight, layout: diffStyle, loadEngine: loadEngine, fallback: unavailable }) }) }));
 }

package/dist/chat/ui/composer/surface.d.ts

@@ -0,0 +1 @@
+export declare function surfacePartOf(target: EventTarget | null, surface: Element): 'input' | 'action' | 'surface';

package/dist/chat/ui/composer/surface.js

@@ -0,0 +1,44 @@
+/* Anything with an action of its own; `data-composer-action` marks one a role cannot name, such as a control of the host's. */
+const ACTIONS = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="listbox"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="slider"]',
+    '[role="combobox"]',
+    '[data-composer-action]'
+].join(', ');
+/*
+ * Where a pointer is on the composer: in the text field, on an action, or on the space around them,
+ * which stands in for the text field. A target outside the surface is an action, as an event from a
+ * popup portaled out of it still reaches the surface through React.
+ */
+export function surfacePartOf(target, surface) {
+    // Not `instanceof Element`, which fails for an element of another window.
+    const element = target;
+    if (typeof element?.closest !== 'function' || !surface.contains(element)) {
+        return 'action';
+    }
+    const input = element.closest('.cm-editor');
+    if (input !== null && surface.contains(input)) {
+        return 'input';
+    }
+    const action = element.closest(ACTIONS);
+    return action !== null && surface.contains(action) ? 'action' : 'surface';
+}

package/dist/chat/ui/diff/ReviewDiff.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../../lazy.js';
 const EditDiff = lazyNamed(() => import('../EditDiff.js'), 'default');
 const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff.js'), 'default');
 export function ReviewDiff({ entry, maxHeight = 480 }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { "data-review-entry": entry.key, children: _jsx(Suspense, { fallback: _jsx("p", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: entry.change.kind === 'edit' ? (_jsx(EditDiff, { change: entry.change.edit, maxHeight: maxHeight })) : (_jsx(UnifiedDiff, { change: entry.change.patch, contents: entry.change.contents, maxHeight: maxHeight })) }) }));
+    return (_jsx("div", { "data-review-entry": entry.key, children: _jsx(LazyBoundary, { fallback: _jsx("p", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: entry.change.kind === 'edit' ? (_jsx(EditDiff, { change: entry.change.edit, maxHeight: maxHeight })) : (_jsx(UnifiedDiff, { change: entry.change.patch, contents: entry.change.contents, maxHeight: maxHeight })) }) }));
 }

package/dist/chat/ui/rows/WorkRows.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, Suspense, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 import { useTimelineFlash } from '../../timeline-flash.js';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons.js';
 import { AnsiOutput } from '../AnsiOutput.js';
 import { RowTime } from '../RowTime.js';
@@ -48,7 +48,7 @@ export function ToggleLine({ icon, label, detail, command, path, open = false, o
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }) {
     const { t } = useTranslation('agent-chat');
-    return _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
+    return _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
 }
 /* A file in a changed files card, which opens its diff under it. */
 function ChangedFileLine({ path, open, onToggle, trailing, children }) {

package/dist/lazy.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
+import { LoadedComponent } from '@adecore/ui';
 const loaders = [];
 let register = null;
 const openErrorListeners = new Set();
@@ -29,12 +30,9 @@ export function onLazyOpenError(listener) {
  * module the prefetcher already fetched.
  */
 export function lazyNamed(load, name, options) {
-    let loaded = null;
-    const open = async () => {
-        const component = (await load())[name];
-        loaded ??= component;
-        return component;
-    };
+    // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
+    const loaded = new LoadedComponent(async () => (await load())[name]);
+    const open = () => loaded.load();
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
@@ -52,7 +50,7 @@ export function lazyNamed(load, name, options) {
         }
     });
     const LazyNamed = (props) => {
-        const Component = loaded ?? Lazy;
+        const Component = loaded.current ?? Lazy;
         return _jsx(Component, { ...props });
     };
     return LazyNamed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.24.0",
-    "@adecore/editor": "0.24.0",
-    "@adecore/editor-react": "0.24.0",
-    "@adecore/intelligent-ui": "0.24.0",
-    "@adecore/merge": "0.24.0",
+    "@adecore/agent-contracts": "0.24.2",
+    "@adecore/editor": "0.24.2",
+    "@adecore/editor-react": "0.24.2",
+    "@adecore/intelligent-ui": "0.24.2",
+    "@adecore/merge": "0.24.2",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -93,14 +93,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.24.0",
+    "@adecore/ui": "^0.24.2",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.24.0",
+    "@adecore/ui": "0.24.2",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/Composer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type MouseEvent, type PointerEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
@@ -40,6 +40,7 @@ import { useNotice } from './composer/use-notice';
 import { usePendingRequests } from './composer/use-pending-requests';
 import { usePromptHistory } from './composer/use-prompt-history';
 import { usePromptHold } from './composer/use-prompt-hold';
+import { surfacePartOf } from './composer/surface';
 import { useTakeBack } from './composer/use-take-back';
 
 interface ComposerProps {
@@ -154,6 +155,19 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         submit
     });
 
+    const pointSurface = (event: PointerEvent<HTMLDivElement>) => {
+        event.currentTarget.toggleAttribute('data-text-cursor', surfacePartOf(event.target, event.currentTarget) !== 'action');
+    };
+
+    const pressSurface = (event: MouseEvent<HTMLDivElement>) => {
+        if (!writable || event.button !== 0 || event.defaultPrevented || surfacePartOf(event.target, event.currentTarget) !== 'surface') {
+            return;
+        }
+        // Nothing around the field selects, so the default would only blur it on the way, closing its picker and lifting a held prompt card.
+        event.preventDefault();
+        inputRef.current?.setCaret(Infinity);
+    };
+
     return (
         <div className="chat-composer-content pointer-events-none relative z-10 w-full">
             {/* Over the composer rather than in the thread, since the composer's height is the one it always clears.
@@ -191,104 +205,106 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     onAllAnswered={() => inputRef.current?.focus()}
                     hold={hold}
                 >
-                    <LimitDock chatId={chatId} info={info} />
-                    <GoalDock chatId={chatId} info={info} goals={capabilities?.goals} />
-                    {compactionOffer && (
-                        <ResumeCompactionDock
-                            tokens={compactionOffer.tokens}
-                            onCompact={controls.compact}
-                            onDismiss={() => dismissResumeCompaction(scope, chatId, compactionOffer.turnId)}
+                    <div className={clsx(writable && 'data-[text-cursor]:cursor-text')} onPointerOver={pointSurface} onMouseDown={pressSurface}>
+                        <LimitDock chatId={chatId} info={info} />
+                        <GoalDock chatId={chatId} info={info} goals={capabilities?.goals} />
+                        {compactionOffer && (
+                            <ResumeCompactionDock
+                                tokens={compactionOffer.tokens}
+                                onCompact={controls.compact}
+                                onDismiss={() => dismissResumeCompaction(scope, chatId, compactionOffer.turnId)}
+                            />
+                        )}
+                        <ComposerMenu menus={menus} />
+                        {queue.length > 0 && (
+                            <QueuedMessages
+                                chatId={chatId}
+                                queue={queue}
+                                paused={info.queuePaused === true}
+                                takingBack={takingBack !== null}
+                                onEdit={(message) => void takeBack(message)}
+                            />
+                        )}
+                        {draft.quote !== '' && (
+                            <DraftQuote
+                                chatId={chatId}
+                                quote={draft.quote}
+                                source={draft.quoteSource}
+                                onRemove={box.removeQuote}
+                                onSourceGone={() => notice.setNotice(t('rows.user.quoteGone'))}
+                            />
+                        )}
+                        {draft.chats.length > 0 && <DraftChats chats={draft.chats} onRemove={box.removeChat} />}
+                        {draft.attachments.length > 0 && <DraftAttachments attachments={draft.attachments} onRemove={box.removeAttachment} />}
+                        <ComposerInput
+                            ref={inputRef}
+                            dictationToolbar={dictationToolbar}
+                            className="composer-input select-text text-sm leading-normal text-text"
+                            value={draft.text}
+                            placeholder={placeholder}
+                            disabled={!writable}
+                            tabbable={focused}
+                            extensions={editorExtensions}
+                            aria={menus.inputAria}
+                            onChange={(value, selection, state) => {
+                                hold.noteInput();
+                                box.setText(value);
+                                menus.setMenuIndex(0);
+                                menus.trackTriggers(value, selection, state);
+                                history.edited(value);
+                            }}
+                            onSelectionChange={menus.trackTriggers}
+                            onBlur={() => {
+                                menus.close();
+                                hold.release('blur');
+                            }}
+                            onComposing={hold.setComposing}
+                            onKeyDown={onKeyDown}
+                            onPaste={files.onPaste}
                         />
-                    )}
-                    <ComposerMenu menus={menus} />
-                    {queue.length > 0 && (
-                        <QueuedMessages
+                        {notice.notice && (
+                            <div className="px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5" role="alert">
+                                {notice.notice}
+                            </div>
+                        )}
+                        {guard.visible && (
+                            <div
+                                className={clsx(
+                                    'px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5',
+                                    guard.tooLong ? 'text-status-error' : 'text-text-faint'
+                                )}
+                            >
+                                {formatNumber(guard.count)} / {formatNumber(PROMPT_MAX_CHARS)}
+                                {guard.tooLong && ` ${t('composer.tooLong')}`}
+                            </div>
+                        )}
+                        <ComposerControls
                             chatId={chatId}
-                            queue={queue}
-                            paused={info.queuePaused === true}
-                            takingBack={takingBack !== null}
-                            onEdit={(message) => void takeBack(message)}
+                            info={info}
+                            providerFixed={providerFixed}
+                            writable={writable}
+                            attachable={capabilities?.attachments !== false}
+                            controls={controls}
+                            send={{
+                                visible: !busy || !empty,
+                                disabled: empty || !writable || guard.tooLong,
+                                label: t(sendLabelKey(busy, steerable, sendDelivery)),
+                                kbd: sendShortcut(sendKey, draft.text.includes('\n')),
+                                onSend: (alternate) => submit(alternate ? 'alternate' : 'default')
+                            }}
+                            dictationToolbar={setDictationToolbar}
+                            onFiles={(picked) => {
+                                files.addFiles(picked);
+                                inputRef.current?.focus();
+                            }}
+                            onRestore={restoreStashed}
+                            insert={(added) => {
+                                if (writable) {
+                                    inputRef.current?.insert(added);
+                                }
+                            }}
                         />
-                    )}
-                    {draft.quote !== '' && (
-                        <DraftQuote
-                            chatId={chatId}
-                            quote={draft.quote}
-                            source={draft.quoteSource}
-                            onRemove={box.removeQuote}
-                            onSourceGone={() => notice.setNotice(t('rows.user.quoteGone'))}
-                        />
-                    )}
-                    {draft.chats.length > 0 && <DraftChats chats={draft.chats} onRemove={box.removeChat} />}
-                    {draft.attachments.length > 0 && <DraftAttachments attachments={draft.attachments} onRemove={box.removeAttachment} />}
-                    <ComposerInput
-                        ref={inputRef}
-                        dictationToolbar={dictationToolbar}
-                        className="composer-input select-text text-sm leading-normal text-text"
-                        value={draft.text}
-                        placeholder={placeholder}
-                        disabled={!writable}
-                        tabbable={focused}
-                        extensions={editorExtensions}
-                        aria={menus.inputAria}
-                        onChange={(value, selection, state) => {
-                            hold.noteInput();
-                            box.setText(value);
-                            menus.setMenuIndex(0);
-                            menus.trackTriggers(value, selection, state);
-                            history.edited(value);
-                        }}
-                        onSelectionChange={menus.trackTriggers}
-                        onBlur={() => {
-                            menus.close();
-                            hold.release('blur');
-                        }}
-                        onComposing={hold.setComposing}
-                        onKeyDown={onKeyDown}
-                        onPaste={files.onPaste}
-                    />
-                    {notice.notice && (
-                        <div className="px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5" role="alert">
-                            {notice.notice}
-                        </div>
-                    )}
-                    {guard.visible && (
-                        <div
-                            className={clsx(
-                                'px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5',
-                                guard.tooLong ? 'text-status-error' : 'text-text-faint'
-                            )}
-                        >
-                            {formatNumber(guard.count)} / {formatNumber(PROMPT_MAX_CHARS)}
-                            {guard.tooLong && ` ${t('composer.tooLong')}`}
-                        </div>
-                    )}
-                    <ComposerControls
-                        chatId={chatId}
-                        info={info}
-                        providerFixed={providerFixed}
-                        writable={writable}
-                        attachable={capabilities?.attachments !== false}
-                        controls={controls}
-                        send={{
-                            visible: !busy || !empty,
-                            disabled: empty || !writable || guard.tooLong,
-                            label: t(sendLabelKey(busy, steerable, sendDelivery)),
-                            kbd: sendShortcut(sendKey, draft.text.includes('\n')),
-                            onSend: (alternate) => submit(alternate ? 'alternate' : 'default')
-                        }}
-                        dictationToolbar={setDictationToolbar}
-                        onFiles={(picked) => {
-                            files.addFiles(picked);
-                            inputRef.current?.focus();
-                        }}
-                        onRestore={restoreStashed}
-                        insert={(added) => {
-                            if (writable) {
-                                inputRef.current?.insert(added);
-                            }
-                        }}
-                    />
+                    </div>
                 </PromptComposer>
             </div>
             <PromptDialog

package/src/chat/ui/EditDiff.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
 import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget';
@@ -22,9 +23,9 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.before, change.after]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <LegacyEditDiff change={change} maxHeight={maxHeight} />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     ) : (
         omitted
@@ -38,9 +39,9 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const unavailable = <DiffUnavailable path={change.path} />;
     return (
         <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.before, change.after, loadEngine]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <EditorEditDiff change={change} loadEngine={loadEngine!} fallback={unavailable} maxHeight={maxHeight} sourceChecked />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/UnifiedDiff.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
 import { diffSourceBudget, legacyDiffBudget, patchSourceBudget } from './diff/diff-source-budget';
@@ -27,9 +28,9 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.diff, oldText, newText, diffStyle]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <LegacyUnifiedDiff {...props} />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     ) : (
         omitted
@@ -46,7 +47,7 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
     const unavailable = <DiffUnavailable path={change.path} />;
     return (
         <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <EditorPatchDiff
                     change={change}
                     sourceChecked
@@ -59,7 +60,7 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
                     loadEngine={loadEngine!}
                     fallback={unavailable}
                 />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/composer/surface.ts

@@ -0,0 +1,45 @@
+/* Anything with an action of its own; `data-composer-action` marks one a role cannot name, such as a control of the host's. */
+const ACTIONS = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="listbox"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="slider"]',
+    '[role="combobox"]',
+    '[data-composer-action]'
+].join(', ');
+
+/*
+ * Where a pointer is on the composer: in the text field, on an action, or on the space around them,
+ * which stands in for the text field. A target outside the surface is an action, as an event from a
+ * popup portaled out of it still reaches the surface through React.
+ */
+export function surfacePartOf(target: EventTarget | null, surface: Element): 'input' | 'action' | 'surface' {
+    // Not `instanceof Element`, which fails for an element of another window.
+    const element = target as Element | null;
+    if (typeof element?.closest !== 'function' || !surface.contains(element)) {
+        return 'action';
+    }
+    const input = element.closest('.cm-editor');
+    if (input !== null && surface.contains(input)) {
+        return 'input';
+    }
+    const action = element.closest(ACTIONS);
+    return action !== null && surface.contains(action) ? 'action' : 'surface';
+}

package/src/chat/ui/diff/ReviewDiff.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../../lazy';
 import type { ReviewEntry } from './review-plan';
@@ -10,13 +10,13 @@ export function ReviewDiff({ entry, maxHeight = 480 }: { entry: ReviewEntry; max
     const { t } = useTranslation('agent-chat');
     return (
         <div data-review-entry={entry.key}>
-            <Suspense fallback={<p className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</p>}>
+            <LazyBoundary fallback={<p className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</p>}>
                 {entry.change.kind === 'edit' ? (
                     <EditDiff change={entry.change.edit} maxHeight={maxHeight} />
                 ) : (
                     <UnifiedDiff change={entry.change.patch} contents={entry.change.contents} maxHeight={maxHeight} />
                 )}
-            </Suspense>
+            </LazyBoundary>
         </div>
     );
 }

package/src/chat/ui/rows/WorkRows.tsx

@@ -1,4 +1,4 @@
-import { Fragment, Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { Fragment, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,7 @@ import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 import { useTimelineFlash } from '../../timeline-flash';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons';
 import { AnsiOutput } from '../AnsiOutput';
 import { RowTime } from '../RowTime';
@@ -122,7 +122,7 @@ export function ToggleLine({
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }: { children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
-    return <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</Suspense>;
+    return <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</LazyBoundary>;
 }
 
 /* A file in a changed files card, which opens its diff under it. */

package/src/lazy.tsx

@@ -1,4 +1,5 @@
 import { lazy, type ComponentProps, type ComponentType } from 'react';
+import { LoadedComponent } from '@adecore/ui';
 
 type Loader = () => Promise<unknown>;
 
@@ -38,12 +39,9 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
     name: Name,
     options?: { readonly prefetch?: boolean }
 ): ComponentType<ComponentProps<Module[Name]>> {
-    let loaded: ComponentType<any> | null = null;
-    const open = async (): Promise<ComponentType<any>> => {
-        const component = (await load())[name];
-        loaded ??= component;
-        return component;
-    };
+    // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
+    const loaded = new LoadedComponent<ComponentType<any>>(async () => (await load())[name]);
+    const open = (): Promise<ComponentType<any>> => loaded.load();
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
@@ -60,7 +58,7 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
         }
     });
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
-        const Component: ComponentType<any> = loaded ?? Lazy;
+        const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };
     return LazyNamed;