@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/ComposerInput.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from 'react';
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+export interface ComposerInputHandle {
+    focus(): void;
+    setCaret(pos: number): void;
+}
+export interface InputSelection {
+    from: number;
+    to: number;
+}
+interface ComposerInputProps {
+    ref?: Ref<ComposerInputHandle>;
+    dictationToolbar?: HTMLElement | null;
+    value: string;
+    placeholder: string | HTMLElement;
+    disabled: boolean;
+    tabbable: boolean;
+    className?: string;
+    extensions?: Extension;
+    onChange(text: string, selection: InputSelection, state: EditorState): void;
+    onSelectionChange?(text: string, selection: InputSelection, state: EditorState): void;
+    onBlur?(): void;
+    onKeyDown?(event: KeyboardEvent, view: EditorView): boolean;
+    onPaste?(event: ClipboardEvent, view: EditorView): boolean;
+}
+export declare function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions, ...handlers }: ComposerInputProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/ComposerInput.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Compartment, EditorState, Prec, Transaction } from '@codemirror/state';
+import { EditorView, placeholder as placeholderText } from '@codemirror/view';
+import { chatHost } from '../../host';
+import { composerEditorExtensions, externalChange } from './composer/editor';
+const NO_EXTENSIONS = [];
+/*
+ * A multi-line text field on CodeMirror, controlled by a plain string. The editor draws the text
+ * itself, so a decoration may change a font or add padding without walking the caret off its
+ * character, which a textarea with a painted layer behind it could not.
+ */
+export function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions = NO_EXTENSIONS, ...handlers }) {
+    const hostRef = useRef(null);
+    const targetRef = useRef(null);
+    const viewRef = useRef(null);
+    const [compartments] = useState(() => ({
+        attributes: new Compartment(),
+        editable: new Compartment(),
+        placeholder: new Compartment(),
+        extensions: new Compartment()
+    }));
+    const latest = useRef({ value, handlers });
+    // What the editor last reported. The parent handing that back is catching up, not setting a value of its own.
+    const reported = useRef(value);
+    useLayoutEffect(() => {
+        latest.current = { value, handlers };
+    });
+    useLayoutEffect(() => {
+        const host = hostRef.current;
+        if (!host) {
+            return;
+        }
+        const initial = latest.current.value;
+        const view = new EditorView({
+            parent: host,
+            state: EditorState.create({
+                doc: initial,
+                selection: { anchor: initial.length },
+                extensions: [
+                    composerEditorExtensions(),
+                    chatHost().dictation.composer?.extensions ?? [],
+                    compartments.attributes.of([]),
+                    compartments.editable.of([]),
+                    compartments.placeholder.of([]),
+                    compartments.extensions.of([]),
+                    Prec.highest(EditorView.domEventHandlers({
+                        keydown: (event, target) => latest.current.handlers.onKeyDown?.(event, target) ?? false,
+                        paste: (event, target) => latest.current.handlers.onPaste?.(event, target) ?? false
+                    })),
+                    EditorView.updateListener.of((update) => {
+                        const current = latest.current.handlers;
+                        if (update.focusChanged && !update.view.hasFocus) {
+                            current.onBlur?.();
+                        }
+                        if ((!update.docChanged && !update.selectionSet) || update.transactions.some((tr) => tr.annotation(externalChange))) {
+                            return;
+                        }
+                        const text = update.state.doc.toString();
+                        const { from, to } = update.state.selection.main;
+                        if (update.docChanged) {
+                            reported.current = text;
+                            current.onChange(text, { from, to }, update.state);
+                        }
+                        else {
+                            current.onSelectionChange?.(text, { from, to }, update.state);
+                        }
+                    })
+                ]
+            })
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, [compartments]);
+    useLayoutEffect(() => {
+        viewRef.current?.dispatch({
+            effects: [
+                // Spellcheck stays on, as it was on the textarea this editor replaced.
+                compartments.attributes.reconfigure(EditorView.contentAttributes.of({ spellcheck: 'true', tabindex: tabbable ? '0' : '-1' })),
+                compartments.editable.reconfigure([EditorView.editable.of(!disabled), EditorState.readOnly.of(disabled)]),
+                compartments.placeholder.reconfigure(placeholderText(placeholder)),
+                compartments.extensions.reconfigure(extensions)
+            ]
+        });
+    }, [compartments, tabbable, disabled, placeholder, extensions]);
+    useLayoutEffect(() => {
+        const view = viewRef.current;
+        if (!view || value === reported.current) {
+            return;
+        }
+        reported.current = value;
+        const doc = view.state.doc.toString();
+        if (value === doc) {
+            return;
+        }
+        view.dispatch({
+            changes: { from: 0, to: doc.length, insert: value },
+            selection: { anchor: value.length },
+            annotations: [externalChange.of(true), Transaction.addToHistory.of(false)]
+        });
+    }, [value]);
+    useImperativeHandle(ref, () => ({
+        focus: () => viewRef.current?.focus(),
+        setCaret: (pos) => {
+            const view = viewRef.current;
+            if (!view) {
+                return;
+            }
+            view.dispatch({ selection: { anchor: Math.min(pos, view.state.doc.length) }, scrollIntoView: true });
+            view.focus();
+        }
+    }), []);
+    const Dictation = chatHost().dictation.composer?.Control;
+    return (_jsxs("div", { ref: targetRef, className: "min-w-0", children: [_jsx("div", { ref: hostRef, className: className }), Dictation && _jsx(Dictation, { buttonContainer: dictationToolbar, targetRef: targetRef, disabled: disabled, editor: () => viewRef.current })] }));
+}

package/dist/chat/ui/DiffPool.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export default function DiffPool({ workerFactory, children }: {
+    workerFactory: () => Worker;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/chat/ui/DiffPool.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useWorkerPool, WorkerPoolContextProvider } from '@pierre/diffs/react';
+import { useDiffTheme } from './diff-theme';
+// Two workers keep highlighting off the main thread without holding a shiki instance per chat node.
+const POOL_SIZE = 2;
+/* The pool reads its highlighter options once, when the singleton is made, and its theme wins over a diff's own. */
+function ThemeSync() {
+    const pool = useWorkerPool();
+    const theme = useDiffTheme();
+    useEffect(() => {
+        void pool?.setRenderOptions({ theme });
+    }, [pool, theme]);
+    return null;
+}
+/*
+ * Shares one highlighter pool between every diff under it; the provider keeps a singleton behind the
+ * scenes. How a worker of `@pierre/diffs/worker` is made is the bundler's business, so the app says.
+ */
+export default function DiffPool({ workerFactory, children }) {
+    const theme = useDiffTheme();
+    return (_jsxs(WorkerPoolContextProvider, { poolOptions: {
+            poolSize: POOL_SIZE,
+            workerFactory
+        }, highlighterOptions: { theme }, children: [_jsx(ThemeSync, {}), children] }));
+}

package/dist/chat/ui/EditDiff.d.ts

@@ -0,0 +1,4 @@
+import type { FileChange } from '../logic/tools';
+export default function EditDiff({ change }: {
+    change: FileChange;
+}): import("react").JSX.Element;

package/dist/chat/ui/EditDiff.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MultiFileDiff } from '@pierre/diffs/react';
+import { chatHost } from '../../host';
+import { useDiffTheme } from './diff-theme';
+/* One hunk of a file edit, highlighted in a worker. The header is ours, so the library's is off. */
+export default function EditDiff({ change }) {
+    const resolved = chatHost().code.useMode();
+    const theme = useDiffTheme();
+    const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
+    const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);
+    const options = useMemo(() => ({
+        diffStyle: 'unified',
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        overflow: 'wrap',
+        hunkSeparators: 'simple'
+    }), [theme, resolved]);
+    return (_jsx("div", { className: "chat-diff select-text", children: _jsx(MultiFileDiff, { oldFile: oldFile, newFile: newFile, options: options }) }));
+}

package/dist/chat/ui/FadingWords.d.ts

@@ -0,0 +1,3 @@
+export declare function FadingWords({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/FadingWords.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { FADE_CLASS, isWhitespace, wordSegments } from './rehype-fade';
+export function FadingWords({ text }) {
+    return (_jsx(_Fragment, { children: wordSegments(text).map((segment, index) => isWhitespace(segment) ? (segment) : (_jsx("span", { className: FADE_CLASS, children: segment }, index))) }));
+}

package/dist/chat/ui/ImageView.d.ts

@@ -0,0 +1,6 @@
+import type { ResourceUrl } from '../../host';
+export declare function ImageThumb({ source, alt, className }: {
+    source: ResourceUrl;
+    alt: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/ImageView.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '@base-ui-components/react/dialog';
+import clsx from 'clsx';
+import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
+import { BTN_GROUP } from '@ruimte/ui/classes';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { CloseButton } from '@ruimte/ui/CloseButton';
+import { Icon } from '@ruimte/ui/Icon';
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+// One wheel notch, small enough that a trackpad flick does not jump past the detail it aimed at.
+const WHEEL_STEP = 1.0015;
+const BUTTON_STEP = 1.5;
+const START = { scale: 1, x: 0, y: 0 };
+/*
+ * Zooms around a point, which is what makes a wheel over a detail feel like a magnifier instead of
+ * a slider. The pixel under the pointer stays where it is while everything else moves away from it.
+ * `x` and `y` are offsets from the middle of the frame, so a scale of 1 is always centered.
+ */
+const zoomed = (view, factor, pointX, pointY) => {
+    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
+    if (scale === MIN_SCALE) {
+        return START;
+    }
+    const ratio = scale / view.scale;
+    return { scale, x: pointX - (pointX - view.x) * ratio, y: pointY - (pointY - view.y) * ratio };
+};
+/* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
+function Lightbox({ src, alt, open, onOpenChange }) {
+    const { t } = useTranslation('agent-chat');
+    const [view, setView] = useState(START);
+    // The alt of an image an agent read is its path; the header shows the file and keeps the path on a tooltip.
+    const name = alt.slice(alt.lastIndexOf('/') + 1);
+    const title = _jsx("span", { className: "min-w-0 truncate text-xs text-text", children: name });
+    const frameRef = useRef(null);
+    const dragRef = useRef(null);
+    if (!open && view !== START) {
+        setView(START);
+    }
+    /* Where the pointer sits against the middle of the frame, which is what the transform counts from. */
+    const pointIn = (event) => {
+        const rect = frameRef.current?.getBoundingClientRect();
+        if (!rect) {
+            return { x: 0, y: 0 };
+        }
+        return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
+    };
+    const zoomButton = (factor) => setView((current) => zoomed(current, factor, 0, 0));
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: "dialog-backdrop lightbox-backdrop" }), _jsxs(Dialog.Popup, { className: "dialog-popup flex min-w-72 flex-col", children: [_jsx(Dialog.Title, { className: "sr-only", children: alt }), _jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3", children: [name === alt ? title : _jsx(Tooltip, { label: alt, children: title }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "tabular-nums text-xs text-text-faint", children: [Math.round(view.scale * 100), "%"] }), _jsxs("span", { className: BTN_GROUP, children: [_jsx(Tooltip, { label: t('image.zoomOut'), name: true, children: _jsx("button", { className: "icon-btn icon-btn-sm", disabled: view.scale <= MIN_SCALE, onClick: () => zoomButton(1 / BUTTON_STEP), children: _jsx(Icon, { icon: Minus, size: 14 }) }) }), _jsx(Tooltip, { label: t('image.zoomIn'), name: true, children: _jsx("button", { className: "icon-btn icon-btn-sm", disabled: view.scale >= MAX_SCALE, onClick: () => zoomButton(BUTTON_STEP), children: _jsx(Icon, { icon: Plus, size: 14 }) }) }), _jsx(Tooltip, { label: t('image.reset'), name: true, children: _jsx("button", { className: "icon-btn icon-btn-sm", disabled: view.scale === MIN_SCALE, onClick: () => setView(START), children: _jsx(Icon, { icon: RotateCcw, size: 14 }) }) })] }), _jsx(CloseButton, { label: t('common.action.close'), kbd: "esc", className: "ml-1", dialog: true })] }), _jsx("div", { ref: frameRef, className: clsx('lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken', view.scale > MIN_SCALE && 'cursor-grab'), onWheel: (e) => {
+                                const point = pointIn(e);
+                                setView((current) => zoomed(current, WHEEL_STEP ** -e.deltaY, point.x, point.y));
+                            }, onDoubleClick: (e) => {
+                                const point = pointIn(e);
+                                setView((current) => (current.scale > MIN_SCALE ? START : zoomed(current, 2, point.x, point.y)));
+                            }, onPointerDown: (e) => {
+                                if (view.scale <= MIN_SCALE) {
+                                    return;
+                                }
+                                e.currentTarget.setPointerCapture(e.pointerId);
+                                dragRef.current = { pointerId: e.pointerId, x: e.clientX - view.x, y: e.clientY - view.y };
+                            }, onPointerMove: (e) => {
+                                const drag = dragRef.current;
+                                if (drag?.pointerId === e.pointerId) {
+                                    setView((current) => ({ ...current, x: e.clientX - drag.x, y: e.clientY - drag.y }));
+                                }
+                            }, onPointerUp: () => {
+                                dragRef.current = null;
+                            }, onPointerCancel: () => {
+                                dragRef.current = null;
+                            }, children: _jsx("img", { src: src, alt: alt, draggable: false, className: "select-none", style: { transform: `translate(${Math.round(view.x)}px, ${Math.round(view.y)}px) scale(${view.scale})` } }) })] })] }) }));
+}
+/*
+ * A thumbnail that opens the same image large. The button is the picture, so there is nothing to aim at.
+ * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
+ */
+export function ImageThumb({ source, alt, className }) {
+    const [open, setOpen] = useState(false);
+    const { url: src, failure } = source;
+    if (src === null) {
+        return (_jsx("span", { className: "grid size-16 place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint", children: failure !== null && (_jsx(Tooltip, { label: failure, children: _jsx(Icon, { icon: ImageOff, size: 14 }) })) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "block overflow-hidden rounded-lg border border-border", onClick: () => setOpen(true), children: _jsx("img", { src: src, alt: alt, className: className }) }), _jsx(Lightbox, { src: src, alt: alt, open: open, onOpenChange: setOpen })] }));
+}

package/dist/chat/ui/LimitState.d.ts

@@ -0,0 +1,8 @@
+import type { ChatInfo } from '@ruimte/agent-contracts';
+export declare function LimitDock({ chatId, info }: {
+    chatId: string;
+    info: ChatInfo;
+}): import("react").JSX.Element | null;
+export declare function LimitPill({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/LimitState.js

@@ -0,0 +1,117 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Hourglass } from 'lucide-react';
+import { AccountDot } from '../../agents/AccountDot';
+import { continueTarget, hasUnreadAccount } from '../../agents/account-limits';
+import { useAccountChoice } from '../account-choice';
+import { limitView } from '../logic/limit';
+import { useFormatLocale } from '@ruimte/ui/format/locale';
+import { Toggle } from '@ruimte/ui/controls';
+import { useUsageLimits } from '../../usage/limits';
+import { useChats } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatActions } from '../actions';
+import { useUsageStore } from '../../state/usage';
+import { Button } from '@ruimte/ui/Button';
+import { Icon } from '@ruimte/ui/Icon';
+import { Pill } from '@ruimte/ui/Pill';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { useNow } from '@ruimte/ui/useNow';
+// A time a limit names reads as a clock today and with its day after that, so the words follow the minute.
+const MINUTE_MS = 60_000;
+// Reading an account's plan starts its CLI, so an account nobody used yet is read at most this often per host.
+const UNREAD_REFRESH_MS = 5 * MINUTE_MS;
+const refreshedAt = new Map();
+/*
+ * The host reads the plan of an account other than a CLI's default one only while it is in use, so
+ * an account that could take the chat over may have no numbers yet. The dock asks for them.
+ */
+const readUnreadAccounts = (scope) => {
+    const last = refreshedAt.get(scope.id);
+    if (last !== undefined && Date.now() - last < UNREAD_REFRESH_MS) {
+        return;
+    }
+    refreshedAt.set(scope.id, Date.now());
+    void scope.transport
+        .request('usage.refreshLimits', {})
+        .then((snapshot) => useUsageStore.getState().setLimits(scope.id, snapshot))
+        .catch(() => undefined);
+};
+/*
+ * The chat's own "Resume at reset". It only counts while the host allows it, so with the host's
+ * switch off it stands off and says where that switch is.
+ */
+function ResumeAtResetToggle({ chatId, info }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const actions = useChatActions();
+    const machineAllows = chatHost().useResumeAtReset(id);
+    const set = (on) => {
+        void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
+    };
+    return (_jsx(Tooltip, { label: machineAllows ? t('limit.toggle') : t('limit.machineOff'), children: _jsx("span", { className: "inline-flex shrink-0", children: _jsx(Toggle, { checked: machineAllows && info.resumeAtReset !== false, onChange: set, label: t('limit.toggle'), disabled: !machineAllows }) }) }));
+}
+/*
+ * Another account of the chat's CLI that has room: the one with the least of its session spent. Only
+ * ever offered, since going on there spends someone's other plan. An account that reads the chat's
+ * conversation takes it over; any other goes on in a fork, which then opens the way a fork does.
+ */
+function ContinueOn({ chatId, info, choice }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const limits = useUsageLimits();
+    const [busy, setBusy] = useState(false);
+    const target = continueTarget(choice.accounts, limits, info.provider, info.account);
+    const unread = limits !== null && hasUnreadAccount(choice.accounts, limits, info.provider, info.account);
+    useEffect(() => {
+        if (unread) {
+            readUnreadAccounts(scope);
+        }
+    }, [scope, unread]);
+    if (target === null) {
+        return null;
+    }
+    const name = choice.nameOf(target);
+    const go = () => {
+        setBusy(true);
+        actions
+            .continueOn(chatId, target.id)
+            .catch((e) => chatHost().notify({
+            kind: 'error',
+            title: t('limit.continueFailed', { account: name }),
+            description: e instanceof Error ? e.message : String(e)
+        }))
+            .finally(() => setBusy(false));
+    };
+    return (_jsx(Tooltip, { label: t('limit.continueOnTip', { account: name }), children: _jsxs(Button, { variant: "secondary", size: "sm", className: "shrink-0 gap-1.5 whitespace-nowrap", disabled: busy, "aria-label": t('limit.continueOnAria', { account: name }), onClick: go, children: [t('limit.continueOn'), _jsx(AccountDot, { color: target.account.color, className: "size-1.75" }), name] }) }));
+}
+/* At the top of the composer while the last turn stopped on a limit: what stopped it, when it goes on, and the switch. */
+export function LimitDock({ chatId, info }) {
+    const { t } = useTranslation('agent-chat');
+    useFormatLocale();
+    const now = useNow(MINUTE_MS, info.limit !== undefined);
+    const choice = useAccountChoice(info.provider, info.account);
+    const view = limitView(info, now);
+    if (view === null) {
+        return null;
+    }
+    // With a choice of accounts the line names the one that ran into the limit.
+    const account = choice === null ? null : choice.current === null ? choice.currentId : choice.nameOf(choice.current);
+    const detail = account === null ? view.detail : view.detail === null ? account : `${account} · ${view.detail}`;
+    return (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 py-2.5", children: [_jsx(Icon, { icon: Hourglass, size: 16, className: "shrink-0 text-text-faint" }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm text-text", children: view.title }), detail !== null && _jsx("span", { className: "truncate text-xs tabular-nums text-text-faint", children: detail })] }), choice !== null && info.limit?.kind === 'usage' && _jsx(ContinueOn, { chatId: chatId, info: info, choice: choice }), _jsx("span", { className: "shrink-0 text-xs text-text-muted", children: t('limit.toggle') }), _jsx(ResumeAtResetToggle, { chatId: chatId, info: info })] }));
+}
+/* The same state in a chat node's header, read from the status every client gets, so a node nobody opened says it too. */
+export function LimitPill({ chatId }) {
+    const { keyOf } = useChatScope();
+    const info = useChats((s) => s.statusByKey[keyOf(chatId)]?.info);
+    useFormatLocale();
+    const now = useNow(MINUTE_MS, info?.limit !== undefined);
+    const view = info === undefined ? null : limitView(info, now);
+    if (info === undefined || view === null) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: view.detail === null ? view.title : `${view.title}. ${view.detail}`, children: _jsx(Pill, { className: "tabular-nums", icon: _jsx(Icon, { icon: Hourglass, size: 12 }), children: view.pill }) }), _jsx(ResumeAtResetToggle, { chatId: chatId, info: info })] }));
+}

package/dist/chat/ui/Markdown.d.ts

@@ -0,0 +1,18 @@
+import { type Components, type Options } from 'react-markdown';
+export declare const ReplyMarkdown: import("react").MemoExoticComponent<({ text, streaming, arriving }: {
+    text: string;
+    streaming: boolean;
+    arriving?: boolean;
+}) => import("react").JSX.Element>;
+export declare const MessageMarkdown: import("react").MemoExoticComponent<({ text, mentions, skills }: {
+    text: string;
+    mentions?: string[];
+    skills?: string[];
+}) => import("react").JSX.Element>;
+export declare const Markdown: import("react").MemoExoticComponent<({ text, breaks, fileLinks, rehypePlugins, componentOverrides }: {
+    text: string;
+    breaks?: boolean;
+    fileLinks?: boolean;
+    rehypePlugins?: Options['rehypePlugins'];
+    componentOverrides?: Components;
+}) => import("react").JSX.Element>;

package/dist/chat/ui/Markdown.js

@@ -0,0 +1,158 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import clsx from 'clsx';
+import { Zap } from 'lucide-react';
+import ReactMarkdown, {} from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips';
+import { CodeBlock } from './CodeBlock';
+import { CodeStreamingContext } from './code-streaming';
+import { splitMarkdownBlocks } from './markdown-blocks';
+import { rehypeChips } from './rehype-chips';
+import { rehypeFadeWords } from './rehype-fade';
+import { remarkHtmlAsText } from './remark-html-as-text';
+import { openFileLink, useFileLinkCwd, useFileLinkTarget } from './file-links';
+import { FileIcon } from '@ruimte/ui/FileIcon';
+import { Icon } from '@ruimte/ui/Icon';
+const languageOf = (className) => /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
+const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code';
+/*
+ * A path an agent wrote down, opened in the preview panel. It keeps the shape of the code chip it
+ * would otherwise be, so a sentence full of them does not start dancing; only the color says it can
+ * be clicked. `data-file-path` is what the thread's own right-click menu reads, so a link answers to
+ * both ways of opening it.
+ */
+function FileLink({ target, className, children }) {
+    const cwd = useFileLinkCwd();
+    return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, onClick: () => openFileLink(cwd, target), children: children }));
+}
+/* Inline code, which is a file reference often enough that it is worth asking every time. */
+function InlineCode({ text }) {
+    const target = useFileLinkTarget(text);
+    if (target === null) {
+        return _jsx("code", { className: INLINE_CODE, children: text });
+    }
+    return (_jsx(FileLink, { target: target, className: `${INLINE_CODE} text-accent hover:underline`, children: text }));
+}
+/* The path a link target spells, with the one scheme that still means a file on the host's machine
+   taken off. A href nobody encoded is left as it is, since decoding throws on a stray percent. */
+const hrefPath = (href) => {
+    const bare = href.replace(/^file:\/\//, '');
+    try {
+        return decodeURI(bare);
+    }
+    catch {
+        return bare;
+    }
+};
+/* A markdown link, which is a file when its target names no scheme of its own. */
+function MarkdownLink({ href, children }) {
+    const target = useFileLinkTarget(hrefPath(href ?? ''));
+    if (target !== null) {
+        return (_jsx(FileLink, { target: target, className: "text-accent underline underline-offset-2", children: children }));
+    }
+    return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
+}
+const components = {
+    pre({ children }) {
+        return _jsx(_Fragment, { children: children });
+    },
+    code({ className, children }) {
+        const text = String(children ?? '');
+        // Fenced blocks end with a newline and carry a language; anything else is inline.
+        if (className?.startsWith('language-') || text.includes('\n')) {
+            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
+        }
+        return _jsx(InlineCode, { text: text });
+    },
+    a({ href, children }) {
+        return _jsx(MarkdownLink, { href: href, children: children });
+    },
+    table({ children }) {
+        // A table wider than the column scrolls on its own instead of pushing the thread sideways.
+        return (_jsx("div", { className: "chat-table", children: _jsx("table", { children: children }) }));
+    }
+};
+/* For text from outside this machine, where a path in inline code is not a file anybody meant to open here. */
+const plainComponents = {
+    ...components,
+    code({ className, children }) {
+        const text = String(children ?? '');
+        if (className?.startsWith('language-') || text.includes('\n')) {
+            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
+        }
+        return _jsx("code", { className: INLINE_CODE, children: text });
+    },
+    a({ href, children }) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
+    }
+};
+// A reply sits under the heading of its message, an `h3`, so its own headings start one level below
+// that. Only `aria-level` moves. The tag stays, since the styles and a copy of the thread read it.
+const REPLY_HEADING_OFFSET = 3;
+const replyHeading = (level) => {
+    const Tag = `h${level}`;
+    return function ReplyHeading({ children }) {
+        return _jsx(Tag, { "aria-level": Math.min(6, level + REPLY_HEADING_OFFSET), children: children });
+    };
+};
+const replyComponents = {
+    ...components,
+    h1: replyHeading(1),
+    h2: replyHeading(2),
+    h3: replyHeading(3),
+    h4: replyHeading(4),
+    h5: replyHeading(5),
+    h6: replyHeading(6)
+};
+/* A picked file or skill in a sent message. The glyph stands in for the sigil the text still carries. */
+function Chip({ kind, value }) {
+    if (kind === 'skill') {
+        return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, SKILL_TONE), children: [_jsx(Icon, { icon: Zap, size: 14, className: "shrink-0 opacity-85" }), _jsx("span", { className: "truncate", children: value })] }));
+    }
+    return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), "data-file-path": value, children: [_jsx(FileIcon, { path: value, size: 14 }), _jsx("span", { className: "truncate", children: value })] }));
+}
+const messageComponents = {
+    ...replyComponents,
+    span({ children, 'data-chip': chip, 'data-value': value }) {
+        if (chip === undefined || value === undefined) {
+            return _jsx("span", { children: children });
+        }
+        return _jsx(Chip, { kind: chip, value: value });
+    }
+};
+// Module constants, so a render never hands react-markdown a fresh array and makes it parse again.
+const PLUGINS = [remarkGfm];
+const PLUGINS_WITH_BREAKS = [remarkGfm, remarkBreaks];
+const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
+const FADE_PLUGINS = [rehypeFadeWords];
+const NO_PLUGINS = [];
+/* One block of a reply. It renders no element of its own, so prose still sees the paragraphs as
+   direct children and keeps its first and last margins. */
+const ReplyBlock = memo(function ReplyBlock({ text, fade, open }) {
+    return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ReactMarkdown, { remarkPlugins: PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }));
+});
+/*
+ * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows.
+ * While it streams every new word fades in, and a fence that has not closed yet is highlighted a
+ * line at a time as it grows. `arriving` fades in each block as it is added instead, for a reply
+ * that is shown a block at a time.
+ */
+export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false }) {
+    const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence }, index))) }));
+});
+/*
+ * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text
+ * it was, and the files and skills picked in the composer are chips again.
+ */
+export const MessageMarkdown = memo(function MessageMarkdown({ text, mentions, skills }) {
+    const rehypePlugins = useMemo(() => [[rehypeChips, { mentions, skills }]], [mentions, skills]);
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", children: _jsx(ReactMarkdown, { remarkPlugins: MESSAGE_PLUGINS, rehypePlugins: rehypePlugins, components: messageComponents, children: text }) }));
+});
+/* `breaks` is for person-authored notes; applying it to CLI markdown would change its layout. */
+export const Markdown = memo(function Markdown({ text, breaks = false, fileLinks = true, rehypePlugins, componentOverrides }) {
+    const renderComponents = useMemo(() => ({ ...(fileLinks ? components : plainComponents), ...componentOverrides }), [fileLinks, componentOverrides]);
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", children: _jsx(ReactMarkdown, { remarkPlugins: breaks ? PLUGINS_WITH_BREAKS : PLUGINS, rehypePlugins: rehypePlugins, components: renderComponents, children: text }) }));
+});

package/dist/chat/ui/MessageActions.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineRow } from '../logic/timeline';
+type MessageRow = Extract<TimelineRow, {
+    kind: 'user' | 'assistant';
+}>;
+export declare function MessageActions({ chatId, row }: {
+    chatId: string;
+    row: MessageRow;
+}): import("react").JSX.Element;
+export {};