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

package/src/chat/ui/ComposerInput.tsx

@@ -0,0 +1,187 @@
+import { useImperativeHandle, useLayoutEffect, useRef, useState, type Ref } from 'react';
+import { Compartment, EditorState, Prec, Transaction, type Extension } from '@codemirror/state';
+import { EditorView, placeholder as placeholderText } from '@codemirror/view';
+import { chatHost } from '../../host';
+import { composerEditorExtensions, externalChange } from './composer/editor';
+import { insertAtSelection } from './composer/insert';
+
+export interface ComposerInputHandle {
+    focus(): void;
+    /* Puts the caret at `pos`, clamped to the text, and gives the editor the focus. */
+    setCaret(pos: number): void;
+    /* Types text in over the selection (`insertAtSelection`) and gives the editor the focus. */
+    insert(text: string): void;
+}
+
+export interface InputSelection {
+    from: number;
+    to: number;
+}
+
+interface ComposerInputProps {
+    ref?: Ref<ComposerInputHandle>;
+    dictationToolbar?: HTMLElement | null;
+    value: string;
+    /* An element for a placeholder with markup of its own; keep its reference stable, as with `extensions`. */
+    placeholder: string | HTMLElement;
+    disabled: boolean;
+    tabbable: boolean;
+    className?: string;
+    /* Keep the reference stable. A new one reconfigures the editor. */
+    extensions?: Extension;
+    onChange(text: string, selection: InputSelection, state: EditorState): void;
+    onSelectionChange?(text: string, selection: InputSelection, state: EditorState): void;
+    onBlur?(): void;
+    /* Runs before the editor's own keymap; true means the key is handled and its default prevented. */
+    onKeyDown?(event: KeyboardEvent, view: EditorView): boolean;
+    /* Runs before the editor pastes the plain text itself; true means the paste is handled. */
+    onPaste?(event: ClipboardEvent, view: EditorView): boolean;
+}
+
+const NO_EXTENSIONS: Extension = [];
+
+/*
+ * 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
+}: ComposerInputProps) {
+    const hostRef = useRef<HTMLDivElement>(null);
+    const targetRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView | null>(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: number) => {
+                const view = viewRef.current;
+                if (!view) {
+                    return;
+                }
+                view.dispatch({ selection: { anchor: Math.min(pos, view.state.doc.length) }, scrollIntoView: true });
+                view.focus();
+            },
+            insert: (text: string) => {
+                const view = viewRef.current;
+                if (!view) {
+                    return;
+                }
+                view.dispatch(insertAtSelection(view.state, text));
+                view.focus();
+            }
+        }),
+        []
+    );
+
+    const Dictation = chatHost().dictation.composer?.Control;
+    return (
+        <div ref={targetRef} className="min-w-0">
+            <div ref={hostRef} className={className} />
+            {Dictation && <Dictation buttonContainer={dictationToolbar} targetRef={targetRef} disabled={disabled} editor={() => viewRef.current} />}
+        </div>
+    );
+}

package/src/chat/ui/DiffPool.tsx

@@ -0,0 +1,36 @@
+import { useEffect, type ReactNode } 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 }: { workerFactory: () => Worker; children: ReactNode }) {
+    const theme = useDiffTheme();
+    return (
+        <WorkerPoolContextProvider
+            poolOptions={{
+                poolSize: POOL_SIZE,
+                workerFactory
+            }}
+            highlighterOptions={{ theme }}
+        >
+            <ThemeSync />
+            {children}
+        </WorkerPoolContextProvider>
+    );
+}

package/src/chat/ui/EditDiff.tsx

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { MultiFileDiff } from '@pierre/diffs/react';
+import { chatHost } from '../../host';
+import { useDiffTheme } from './diff-theme';
+
+import type { FileChange } from '../logic/tools';
+
+/* 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 }: { change: FileChange }) {
+    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' as const,
+            theme,
+            themeType: resolved,
+            disableFileHeader: true,
+            overflow: 'wrap' as const,
+            hunkSeparators: 'simple' as const
+        }),
+        [theme, resolved]
+    );
+    return (
+        <div className="chat-diff select-text">
+            <MultiFileDiff oldFile={oldFile} newFile={newFile} options={options} />
+        </div>
+    );
+}

package/src/chat/ui/FadingWords.tsx

@@ -0,0 +1,18 @@
+import { FADE_CLASS, isWhitespace, wordSegments } from './rehype-fade';
+
+export function FadingWords({ text }: { text: string }) {
+    return (
+        <>
+            {wordSegments(text).map((segment, index) =>
+                isWhitespace(segment) ? (
+                    segment
+                ) : (
+                    // Streaming appends words, so the index keeps existing fades from restarting.
+                    <span key={index} className={FADE_CLASS}>
+                        {segment}
+                    </span>
+                )
+            )}
+        </>
+    );
+}

package/src/chat/ui/ImageView.tsx

@@ -0,0 +1,159 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
+import type { ResourceUrl } from '../../host';
+import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+
+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;
+
+interface View {
+    scale: number;
+    x: number;
+    y: number;
+}
+
+const START: View = { 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.
+ */
+function zoomed(view: View, factor: number, pointX: number, pointY: number): View {
+    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 }: { src: string; alt: string; open: boolean; onOpenChange(open: boolean): void }) {
+    const { t } = useTranslation('agent-chat');
+    const [view, setView] = useState<View>(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 = <span className="min-w-0 truncate text-xs text-text">{name}</span>;
+    const frameRef = useRef<HTMLDivElement>(null);
+    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(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: { clientX: number; clientY: number }): { x: number; y: number } => {
+        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: number): void => setView((current) => zoomed(current, factor, 0, 0));
+
+    return (
+        <Dialog.Root open={open} onOpenChange={onOpenChange}>
+            {/* Nothing here sets a size. The picture takes the room `.lightbox-frame` allows it, and the popup follows. */}
+            <Dialog.Popup backdropClassName="lightbox-backdrop" className="flex min-w-72 flex-col">
+                <Dialog.Title className="sr-only">{alt}</Dialog.Title>
+                <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3">
+                    {name === alt ? title : <Tooltip label={alt}>{title}</Tooltip>}
+                    <span className="grow" />
+                    <span className="tabular-nums text-xs text-text-faint">{Math.round(view.scale * 100)}%</span>
+                    <ButtonGroup render={<span />}>
+                        <IconButton
+                            icon={Minus}
+                            size="sm"
+                            label={t('image.zoomOut')}
+                            disabled={view.scale <= MIN_SCALE}
+                            onClick={() => zoomButton(1 / BUTTON_STEP)}
+                        />
+                        <IconButton
+                            icon={Plus}
+                            size="sm"
+                            label={t('image.zoomIn')}
+                            disabled={view.scale >= MAX_SCALE}
+                            onClick={() => zoomButton(BUTTON_STEP)}
+                        />
+                        <IconButton icon={RotateCcw} size="sm" label={t('image.reset')} disabled={view.scale === MIN_SCALE} onClick={() => setView(START)} />
+                    </ButtonGroup>
+                    <CloseButton label={t('common.action.close')} kbd="esc" className="ml-1" dialog />
+                </div>
+                <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;
+                    }}
+                >
+                    <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})` }}
+                    />
+                </div>
+            </Dialog.Popup>
+        </Dialog.Root>
+    );
+}
+
+/*
+ * 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 }: { source: ResourceUrl; alt: string; className?: string }) {
+    const [open, setOpen] = useState(false);
+    const { url: src, failure } = source;
+    if (src === null) {
+        return (
+            <span className="grid size-16 place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint">
+                {failure !== null && (
+                    <Tooltip label={failure}>
+                        <Icon icon={ImageOff} size={14} />
+                    </Tooltip>
+                )}
+            </span>
+        );
+    }
+    return (
+        <>
+            <button className="block overflow-hidden rounded-lg border border-border" onClick={() => setOpen(true)}>
+                <img src={src} alt={alt} className={className} />
+            </button>
+            <Lightbox src={src} alt={alt} open={open} onOpenChange={setOpen} />
+        </>
+    );
+}

package/src/chat/ui/LimitState.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Hourglass } from 'lucide-react';
+import type { ChatInfo } from '@adecore/agent-contracts';
+import { AccountDot } from '../../agents/AccountDot';
+import { continueTarget, hasUnreadAccount } from '../../agents/account-limits';
+import { useAccountChoice, type AccountChoice } from '../account-choice';
+import { limitView } from '../logic/limit';
+import { useFormatLocale } from '@adecore/ui/format';
+import { Switch, Button, Icon, Pill, Tooltip, useNow } from '@adecore/ui';
+import { useUsageLimits } from '../../usage/limits';
+import { useChats } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope, type ChatScope } from '../../scope';
+import { useChatActions } from '../actions';
+import { useUsageStore } from '../../state/usage';
+
+// 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<string, number>();
+
+/*
+ * 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.
+ */
+function readUnreadAccounts(scope: ChatScope): void {
+    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 }: { chatId: string; info: ChatInfo }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const actions = useChatActions();
+    const machineAllows = chatHost().useResumeAtReset(id);
+    const set = (on: boolean): void => {
+        void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
+    };
+    return (
+        <Tooltip label={machineAllows ? t('limit.toggle') : t('limit.machineOff')}>
+            {/* A disabled switch does not take the pointer, so the tooltip hangs on a wrapper. */}
+            <span className="inline-flex shrink-0">
+                <Switch checked={machineAllows && info.resumeAtReset !== false} onCheckedChange={set} label={t('limit.toggle')} disabled={!machineAllows} />
+            </span>
+        </Tooltip>
+    );
+}
+
+/*
+ * 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 }: { chatId: string; info: ChatInfo; choice: AccountChoice }) {
+    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 = (): void => {
+        setBusy(true);
+        actions
+            .continueOn(chatId, target.id)
+            .catch((e: unknown) =>
+                chatHost().notify({
+                    kind: 'error',
+                    title: t('limit.continueFailed', { account: name }),
+                    description: e instanceof Error ? e.message : String(e)
+                })
+            )
+            .finally(() => setBusy(false));
+    };
+    return (
+        <Tooltip label={t('limit.continueOnTip', { account: name })}>
+            <Button
+                variant="secondary"
+                size="sm"
+                className="shrink-0 gap-1.5 whitespace-nowrap"
+                disabled={busy}
+                aria-label={t('limit.continueOnAria', { account: name })}
+                onClick={go}
+            >
+                {t('limit.continueOn')}
+                <AccountDot color={target.account.color} className="size-1.75" />
+                {name}
+            </Button>
+        </Tooltip>
+    );
+}
+
+/* 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 }: { chatId: string; info: ChatInfo }) {
+    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 (
+        <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
+            <Icon icon={Hourglass} size={16} className="shrink-0 text-text-faint" />
+            <span className="flex min-w-0 grow flex-col">
+                <span className="truncate text-sm text-text">{view.title}</span>
+                {detail !== null && <span className="truncate text-xs tabular-nums text-text-faint">{detail}</span>}
+            </span>
+            {choice !== null && info.limit?.kind === 'usage' && <ContinueOn chatId={chatId} info={info} choice={choice} />}
+            <span className="shrink-0 text-xs text-text-muted">{t('limit.toggle')}</span>
+            <ResumeAtResetToggle chatId={chatId} info={info} />
+        </div>
+    );
+}
+
+/* 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 }: { chatId: string }) {
+    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 (
+        <>
+            <Tooltip label={view.detail === null ? view.title : `${view.title}. ${view.detail}`}>
+                <Pill className="tabular-nums" icon={<Icon icon={Hourglass} size={12} />}>
+                    {view.pill}
+                </Pill>
+            </Tooltip>
+            <ResumeAtResetToggle chatId={chatId} info={info} />
+        </>
+    );
+}