@adecore/agents-react 0.0.1 → 0.17.0-beta.2

package/src/chat/ui/TimelineMenu.tsx

@@ -0,0 +1,124 @@
+import type { RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, Pencil, Scan } from 'lucide-react';
+import { placeBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks';
+import { forkRefusal, turnIdOfRow } from '../logic/fork';
+import { markdownOf, messageTextOf } from '../logic/timeline-copy';
+import type { TimelineTarget } from '../logic/timeline-target';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import { openFileLink, useFileLinkCwd } from './file-links';
+import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
+
+/*
+ * The menu behind a right-click in a thread. Copy is the reason it exists. Everything in a thread
+ * is text a person may want out of it, and a whole message, a code block or the markdown an answer
+ * was written in are each a different amount of that.
+ */
+export function TimelineMenuPopup({
+    target,
+    thread,
+    chatId = null
+}: {
+    target: TimelineTarget;
+    thread: RefObject<HTMLDivElement | null>;
+    /* The chat whose own thread this is; a thread in its place (a sub-agent's) has nothing to fork. */
+    chatId?: string | null;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const message = target.row === null ? null : messageTextOf(target.row);
+    const turnId = chatId === null || target.row === null ? null : turnIdOfRow(target.row);
+    const forkBlocked = useChatRow(chatId ?? '', (row) => (turnId === null ? null : forkRefusal(row?.info ?? null, row?.structure[turnId])));
+    const markdown = target.row === null ? null : markdownOf(target.row);
+    const markable = chatId !== null && (target.row?.kind === 'user' || target.row?.kind === 'assistant') ? target.row.id : null;
+    // A thread outside a chat (a sub-agent's transcript) has no cwd of its own; the app answers for it then.
+    const cwd = useFileLinkCwd();
+    const { fork, fileLinks } = chatHost();
+    const openInPreview = (): void => {
+        if (target.path !== null) {
+            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false });
+        }
+    };
+    return (
+        <ContextMenu.Popup>
+            <ContextMenu.Item disabled={target.selection === ''} onClick={() => copyText(target.selection)}>
+                <Icon icon={Copy} size={14} /> {t('common.action.copy')} <Kbd shortcut={EDIT_SHORTCUTS.copy} />
+            </ContextMenu.Item>
+            {message !== null && (
+                <ContextMenu.Item onClick={() => copyText(message)}>
+                    <Icon icon={MessageSquare} size={14} /> {t('timeline.menu.copyMessage')}
+                </ContextMenu.Item>
+            )}
+            {target.code !== null && (
+                <ContextMenu.Item onClick={() => copyText(target.code ?? '')}>
+                    <Icon icon={Braces} size={14} /> {t('timeline.menu.copyCode')}
+                </ContextMenu.Item>
+            )}
+            {markdown !== null && (
+                <ContextMenu.Item onClick={() => copyText(markdown)}>
+                    <Icon icon={FileText} size={14} /> {t('timeline.menu.copyMarkdown')}
+                </ContextMenu.Item>
+            )}
+            {chatId !== null && turnId !== null && fork !== null && (
+                <DisabledReason reason={forkBlocked}>
+                    <ContextMenu.Item disabled={forkBlocked !== null} onClick={() => fork(chatId, turnId)}>
+                        <Icon icon={GitFork} size={14} /> {t('timeline.menu.forkFromHere')}
+                    </ContextMenu.Item>
+                </DisabledReason>
+            )}
+            {chatId !== null && markable !== null && <BookmarkMenuItems chatId={chatId} itemId={markable} />}
+            <ContextMenu.Separator />
+            <ContextMenu.Item onClick={() => selectAllWithin(thread.current)}>
+                <Icon icon={Scan} size={14} /> {t('common.action.selectAll')}
+            </ContextMenu.Item>
+            {target.path !== null && fileLinks !== null && (
+                <>
+                    <ContextMenu.Separator />
+                    <ContextMenu.Item onClick={openInPreview}>
+                        <Icon icon={Eye} size={14} /> {t('timeline.menu.openInPreview')}
+                    </ContextMenu.Item>
+                </>
+            )}
+        </ContextMenu.Popup>
+    );
+}
+
+/*
+ * Place a bookmark on a message, or rename and remove the one it has: the same rows from the thread
+ * and from the strip beside it. `onName` runs when a row opens the name field, which sits on the
+ * bookmark's line over the message and so has to be on screen; the strip scrolls there, the thread
+ * was clicked on it.
+ */
+export function BookmarkMenuItems({ chatId, itemId, onName }: { chatId: string; itemId: string; onName?: () => void }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const bookmark = useChatRow(chatId, (row) => row?.bookmarks?.find((candidate) => candidate.itemId === itemId) ?? null);
+    if (bookmark === null) {
+        return (
+            <ContextMenu.Item
+                onClick={() => {
+                    void placeBookmark(scope, chatId, itemId);
+                    onName?.();
+                }}
+            >
+                <Icon icon={BookmarkPlus} size={14} /> {t('bookmarks.add')}
+            </ContextMenu.Item>
+        );
+    }
+    return (
+        <>
+            <ContextMenu.Item
+                onClick={() => {
+                    useBookmarkNaming.getState().open(scope.keyOf(chatId), bookmark.itemId);
+                    onName?.();
+                }}
+            >
+                <Icon icon={Pencil} size={14} /> {t('bookmarks.rename')}
+            </ContextMenu.Item>
+            <ContextMenu.Item onClick={() => void removeBookmark(scope, chatId, bookmark)}>
+                <Icon icon={BookmarkX} size={14} /> {t('bookmarks.remove')}
+            </ContextMenu.Item>
+        </>
+    );
+}

package/src/chat/ui/UnifiedDiff.tsx

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { FileDiff, PatchDiff } from '@pierre/diffs/react';
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import { chatHost } from '../../host';
+import { useDiffTheme } from './diff-theme';
+import { fullFileDiff, type DiffContents } from './full-diff';
+
+/*
+ * A patch the CLI reported itself (Codex writes unified diffs). The renderer needs a file header
+ * to know what it is looking at, and a CLI that only sends hunks gets one from the path we know.
+ * A diff without hunks at all is shown as its own lines, so nothing is ever swallowed.
+ */
+function asPatch(change: ChatFileChange): string | null {
+    if (!/^@@/m.test(change.diff)) {
+        return null;
+    }
+    if (/^\+\+\+ /m.test(change.diff)) {
+        return change.diff;
+    }
+    const from = change.kind === 'add' ? '/dev/null' : `a/${change.path}`;
+    const to = change.kind === 'delete' ? '/dev/null' : `b/${change.path}`;
+    return `--- ${from}\n+++ ${to}\n${change.diff}`;
+}
+
+/* Lets a diff with a view of its own run to the bottom of it, so the scrollbar of a short one sits
+   there instead of under its last line; the lines themselves keep their height. */
+const FILL_CSS = `
+:host { display: flex; flex-direction: column; flex-grow: 1; }
+pre { flex-grow: 1; align-content: start; }
+pre[data-diff-type="single"] { display: flex; flex-direction: column; }
+pre[data-diff-type="split"][data-overflow="scroll"]:not([data-dehydrated]) { align-content: stretch; }
+pre > [data-code] { flex-grow: 1; align-self: stretch; align-content: start; }
+`;
+
+function lineClass(line: string): string {
+    if (line.startsWith('+')) {
+        return 'text-chat-added';
+    }
+    if (line.startsWith('-')) {
+        return 'text-chat-removed';
+    }
+    return 'text-text-muted';
+}
+
+interface UnifiedDiffProps {
+    change: ChatFileChange;
+    overflow?: 'wrap' | 'scroll';
+    /* `split` puts the old and the new side by side; the chat always stacks. */
+    diffStyle?: 'unified' | 'split';
+    /* Grow to the height of a flex column around it. */
+    fill?: boolean;
+    /* Both whole texts the patch was made between, with which a person can unfold the lines between hunks. */
+    contents?: DiffContents;
+}
+
+export default function UnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents }: UnifiedDiffProps) {
+    const resolved = chatHost().code.useMode();
+    const theme = useDiffTheme();
+    const patch = useMemo(() => asPatch(change), [change]);
+    const oldText = contents?.old;
+    const newText = contents?.new;
+    const full = useMemo(
+        () => (patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText })),
+        [patch, change.path, oldText, newText]
+    );
+    const unfolds = full !== null;
+    const options = useMemo(
+        () => ({
+            theme,
+            themeType: resolved,
+            disableFileHeader: true,
+            diffStyle,
+            overflow,
+            hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
+            unsafeCSS: fill ? FILL_CSS : undefined
+        }),
+        [diffStyle, overflow, theme, resolved, fill, unfolds]
+    );
+    if (patch === null) {
+        return (
+            <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code select-text">
+                {change.diff
+                    .replace(/\n$/, '')
+                    .split('\n')
+                    .map((line, index) => (
+                        <div key={index} className={clsx(lineClass(line), 'whitespace-pre-wrap')}>
+                            {line}
+                        </div>
+                    ))}
+            </pre>
+        );
+    }
+    return (
+        <div className={clsx('chat-diff select-text', fill && 'flex grow flex-col')}>
+            {full === null ? <PatchDiff patch={patch} options={options} /> : <FileDiff fileDiff={full} options={options} />}
+        </div>
+    );
+}

package/src/chat/ui/UploadThumb.tsx

@@ -0,0 +1,13 @@
+import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
+import { useUploadThumbnail } from '../thumbnails';
+
+const BOX = 'h-14 w-14 rounded-lg border border-border';
+
+/* An image the composer holds, drawn from its thumbnail; an empty box of the same size stands in while that is made. */
+export function UploadThumb({ upload }: { upload: ChatAttachmentUpload }) {
+    const url = useUploadThumbnail(upload);
+    if (url === null) {
+        return <span role="img" aria-label={upload.name} className={`block bg-surface-sunken ${BOX}`} />;
+    }
+    return <img src={url} alt={upload.name} className={`object-cover ${BOX}`} />;
+}

package/src/chat/ui/Welcome.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { useChatRow } from '../../state/chats';
+import { dayPartOf } from '../logic/welcome';
+
+function localClock(): Date {
+    return new Date();
+}
+
+/* What stands over the composer of a chat nobody wrote in yet. The part of the day is read once, when the chat opens. */
+export function WelcomeGreeting({ chatId, now = localClock }: { chatId: string; now?: () => Date }) {
+    const { t } = useTranslation('agent-chat');
+    const provider = useChatRow(chatId, (row) => row?.info.provider ?? null);
+    const [part] = useState(() => dayPartOf(now()));
+    return (
+        <div className="flex items-center justify-center gap-3 px-3 pb-2 text-text">
+            {provider && <AgentIcon kind={provider} size={32} className="shrink-0" />}
+            <h2 className="text-4xl font-semibold tracking-tight text-balance">{t(`timeline.welcome.${part}`)}</h2>
+        </div>
+    );
+}

package/src/chat/ui/chips.ts

@@ -0,0 +1,15 @@
+/* An `@file` or `$skill` token drawn as a pill: the tone says which of the two it is, the shape
+   says where it is drawn. */
+
+export const MENTION_TONE = 'bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]';
+
+/* A skill is the same token shape as a file mention, in its own hue. */
+export const SKILL_TONE = 'bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]';
+
+/* The pill in the composer's editor, around the token's own characters: the editor places the caret
+   from what it drew, so padding is safe, and a chip that wraps keeps it on every fragment. */
+export const CHIP_IN_EDITOR = 'box-decoration-clone rounded-md px-1 py-0.5';
+
+/* The same pill in the transcript: a real inline box a shade smaller than the text around it, with
+   the icon in place of the sigil. */
+export const CHIP_IN_MESSAGE = 'inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium';

package/src/chat/ui/code-lines.ts

@@ -0,0 +1,60 @@
+/* One colored run of a line, the part of a highlighter's token the code block draws. */
+export interface CodeToken {
+    content: string;
+    color?: string;
+    /* The highlighter's bit set: 1 italic, 2 bold, 4 underline, 8 strikethrough. */
+    fontStyle?: number;
+}
+
+/* Tokenizes `code` as lines, carrying on from `state` when there is one, and answers the state after it. */
+export type Tokenize<State> = (code: string, state: State | undefined) => { lines: CodeToken[][]; state: State | undefined };
+
+/*
+ * The lines of a code block that grows at the end. A line that ended keeps the tokens it got, and
+ * the grammar state after it is where the next line starts, so a delta tokenizes the lines that are
+ * new plus the one still being written, however long the block already is. The last line is always
+ * tokenized again, since the next delta may turn it into anything (the start of a comment, a string).
+ */
+export class IncrementalLines<State> {
+    private readonly tokenize: Tokenize<State>;
+    // The text of the lines that are kept: empty, or ending in a newline while the block grows.
+    private source = '';
+    private lines: CodeToken[][] = [];
+    private state: State | undefined = undefined;
+
+    constructor(tokenize: Tokenize<State>) {
+        this.tokenize = tokenize;
+    }
+
+    /* The tokens of every line of `code`; `complete` says nothing more arrives, so the last line is kept too. */
+    update(code: string, complete: boolean): CodeToken[][] {
+        // A carriage return splits lines in ways a cut at newlines does not see, so that code starts over every time.
+        if (code.includes('\r')) {
+            this.reset();
+            return this.tokenize(code, undefined).lines;
+        }
+        const end = complete ? code.length : code.lastIndexOf('\n') + 1;
+        const stable = code.slice(0, end);
+        const continues = (this.source === '' || this.source.endsWith('\n')) && stable.startsWith(this.source);
+        if (!continues) {
+            this.reset();
+        }
+        const added = stable.slice(this.source.length);
+        if (added !== '') {
+            const result = this.tokenize(added.endsWith('\n') ? added.slice(0, -1) : added, this.state);
+            this.lines = [...this.lines, ...result.lines];
+            this.state = result.state;
+            this.source = stable;
+        }
+        if (complete) {
+            return this.lines;
+        }
+        return [...this.lines, ...this.tokenize(code.slice(end), this.state).lines];
+    }
+
+    private reset(): void {
+        this.source = '';
+        this.lines = [];
+        this.state = undefined;
+    }
+}

package/src/chat/ui/code-streaming.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+/* Whether the code blocks below are still being written, which a reply says for the fence that has not closed. */
+export const CodeStreamingContext = createContext(false);

package/src/chat/ui/code-theme.ts

@@ -0,0 +1,15 @@
+import type { ThemeRegistration } from 'shiki';
+import { chatHost } from '../../host';
+
+/* The Shiki theme code is drawn in under the app's current light or dark. */
+export function useCodeTheme(): string {
+    const { code } = chatHost();
+    const mode = code.useMode();
+    const themes = code.useThemes();
+    return mode === 'dark' ? themes.dark : themes.light;
+}
+
+/* What to hand Shiki for a theme id: a theme the app ships itself, or the id of a bundled one for Shiki to load. */
+export function shikiThemeOf(id: string): string | ThemeRegistration {
+    return chatHost().code.custom.find((theme) => theme.name === id) ?? id;
+}

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

@@ -0,0 +1,43 @@
+import { syntaxTree } from '@codemirror/language';
+import { Facet, RangeSetBuilder, StateField, type EditorState, type Extension } from '@codemirror/state';
+import { Decoration, EditorView, type DecorationSet } from '@codemirror/view';
+import { chipRanges } from '../../mentions';
+import { CHIP_IN_EDITOR, MENTION_TONE, SKILL_TONE } from '../chips';
+import { codeRanges } from './editor';
+
+export interface ChipChoices {
+    mentions: string[];
+    skills: string[];
+}
+
+const NO_CHOICES: ChipChoices = { mentions: [], skills: [] };
+
+const choices = Facet.define<ChipChoices, ChipChoices>({ combine: (values) => values[0] ?? NO_CHOICES });
+
+const mentionMark = Decoration.mark({ class: `${MENTION_TONE} ${CHIP_IN_EDITOR}` });
+const skillMark = Decoration.mark({ class: `${SKILL_TONE} ${CHIP_IN_EDITOR}` });
+
+function chipMarks(state: EditorState): DecorationSet {
+    const { mentions, skills } = state.facet(choices);
+    const builder = new RangeSetBuilder<Decoration>();
+    // `@a.ts` in backticks is code, not a mention.
+    for (const range of chipRanges(state.doc.toString(), mentions, skills, codeRanges(state))) {
+        builder.add(range.from, range.to, range.kind === 'skill' ? skillMark : mentionMark);
+    }
+    return builder.finish();
+}
+
+const chipField = StateField.define<DecorationSet>({
+    create: chipMarks,
+    // The parser finishes a long text after the edit that asked for it, and a code span it finds then unmakes a chip.
+    update: (marks, tr) =>
+        tr.docChanged || tr.startState.facet(choices) !== tr.state.facet(choices) || syntaxTree(tr.startState) !== syntaxTree(tr.state)
+            ? chipMarks(tr.state)
+            : marks,
+    provide: (field) => EditorView.decorations.from(field)
+});
+
+/* Draws the chosen `@path` and `$name` tokens as chips; a new `ChipChoices` object is what redraws them. */
+export function chipDecorations(value: ChipChoices): Extension {
+    return [choices.of(value), chipField];
+}

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

@@ -0,0 +1,118 @@
+import { history, historyKeymap, standardKeymap } from '@codemirror/commands';
+import { Language, defineLanguageFacet, indentUnit, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { Annotation, type EditorState, type Extension, type Range } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, keymap, type DecorationSet, type ViewUpdate } from '@codemirror/view';
+import { tagHighlighter, tags } from '@lezer/highlight';
+import { Strikethrough, Table, parser } from '@lezer/markdown';
+
+/* Marks a transaction that brings the editor in line with a value set from outside, so it is not reported back. */
+export const externalChange = Annotation.define<boolean>();
+
+/*
+ * The markdown grammar in a Language of our own. `@codemirror/lang-markdown` builds the same thing
+ * but creates the HTML language and autocomplete at module level, which tree shaking cannot drop.
+ */
+export const markdownLanguage = new Language(defineLanguageFacet(), parser.configure([Strikethrough, Table]), [], 'markdown');
+
+/* Classes rather than generated styles, so the look lives in `styles.css` on the theme's tokens. */
+const markdownClasses = tagHighlighter([
+    { tag: tags.strong, class: 'cm-md-strong' },
+    { tag: tags.emphasis, class: 'cm-md-emphasis' },
+    { tag: tags.strikethrough, class: 'cm-md-strike' },
+    { tag: tags.heading, class: 'cm-md-heading' },
+    { tag: [tags.link, tags.url], class: 'cm-md-link' },
+    { tag: tags.processingInstruction, class: 'cm-md-mark' }
+]);
+
+export interface CodeRange {
+    from: number;
+    to: number;
+    kind: 'inline' | 'fence';
+}
+
+/* The code spans and fenced blocks between `from` and `to`, as far as the parser has got. */
+export function codeRanges(state: EditorState, from = 0, to = state.doc.length): CodeRange[] {
+    const found: CodeRange[] = [];
+    syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (node) => {
+            if (node.name === 'InlineCode' || node.name === 'FencedCode') {
+                found.push({ from: node.from, to: node.to, kind: node.name === 'InlineCode' ? 'inline' : 'fence' });
+                return false;
+            }
+            return undefined;
+        }
+    });
+    return found;
+}
+
+const inlineCodeMark = Decoration.mark({ class: 'cm-md-code' });
+
+function fenceLine(first: boolean, last: boolean): Decoration {
+    return Decoration.line({ class: ['cm-md-fence', first ? 'cm-md-fence-start' : '', last ? 'cm-md-fence-end' : ''].join(' ').trim() });
+}
+
+/*
+ * Code is decorated from the tree rather than highlighted per token: the highlighter styles the
+ * backticks apart from what they wrap, and a block's background belongs to its whole lines.
+ */
+function codeDecorations(view: EditorView): DecorationSet {
+    const { state } = view;
+    const decorations: Array<Range<Decoration>> = [];
+    const fenceLines = new Set<number>();
+    for (const visible of view.visibleRanges) {
+        for (const range of codeRanges(state, visible.from, visible.to)) {
+            if (range.kind === 'inline') {
+                decorations.push(inlineCodeMark.range(range.from, range.to));
+                continue;
+            }
+            const first = state.doc.lineAt(range.from).number;
+            const last = state.doc.lineAt(range.to).number;
+            const start = state.doc.lineAt(Math.max(range.from, visible.from)).number;
+            const end = state.doc.lineAt(Math.min(range.to, visible.to)).number;
+            for (let number = start; number <= end; number++) {
+                if (!fenceLines.has(number)) {
+                    fenceLines.add(number);
+                    decorations.push(fenceLine(number === first, number === last).range(state.doc.line(number).from));
+                }
+            }
+        }
+    }
+    return Decoration.set(decorations, true);
+}
+
+const codeDecorationPlugin = ViewPlugin.fromClass(
+    class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+            this.decorations = codeDecorations(view);
+        }
+
+        update(update: ViewUpdate): void {
+            if (update.docChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state)) {
+                this.decorations = codeDecorations(update.view);
+            }
+        }
+    },
+    { decorations: (plugin) => plugin.decorations }
+);
+
+/*
+ * What every composer editor carries. The standard keymap rather than the default one: the default
+ * adds code editor commands (move a line, indent, select the syntax parent) on keys a prompt box
+ * has no business taking.
+ */
+export function composerEditorExtensions(): Extension {
+    return [
+        history(),
+        keymap.of([...standardKeymap, ...historyKeymap]),
+        EditorView.lineWrapping,
+        // What Tab and Shift+Tab in a fence add and take away, so a selection indents in the same steps as a caret.
+        indentUnit.of('    '),
+        markdownLanguage,
+        syntaxHighlighting(markdownClasses),
+        codeDecorationPlugin
+    ];
+}

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

@@ -0,0 +1,22 @@
+import type { EditorState, TransactionSpec } from '@codemirror/state';
+
+function isSpace(text: string): boolean {
+    return /^\s/.test(text);
+}
+
+/*
+ * Text an app puts in the draft, over the selection, as if it were typed there. A space keeps it apart
+ * from a word it would touch, and one after it at the end of the text lets the person type on.
+ */
+export function insertAtSelection(state: EditorState, text: string): TransactionSpec {
+    if (text === '') {
+        return {};
+    }
+    const { from, to } = state.selection.main;
+    const before = state.doc.sliceString(Math.max(0, from - 1), from);
+    const after = state.doc.sliceString(to, to + 1);
+    const lead = before !== '' && !isSpace(before) && !isSpace(text) ? ' ' : '';
+    const trail = (after === '' || !isSpace(after)) && !/\s$/.test(text) ? ' ' : '';
+    const insert = `${lead}${text}${trail}`;
+    return { changes: { from, to, insert }, selection: { anchor: from + insert.length }, scrollIntoView: true, userEvent: 'input' };
+}