@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/Timeline.js

@@ -0,0 +1,318 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu } from '@base-ui-components/react/context-menu';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import clsx from 'clsx';
+import { useForkedTurns } from '../forks';
+import { bookmarkRows } from '../logic/bookmarks';
+import { deriveTimelineRows, findSubagentBranch } from '../logic/timeline';
+import { openFromMain, useSubagentTrail } from '../subagent-view';
+import { registerItemJumper, registerMessageStepper, registerTimeline, setTimelineAtEnd } from '../timeline-scroll';
+import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber';
+import { EMPTY_TARGET, readTimelineTarget, withCurrentText } from '../logic/timeline-target';
+import { forkRefusal } from '../logic/fork';
+import { FindRevealContext } from './find-reveal';
+import { BookmarkMarker } from './BookmarkMarker';
+import { MessageActions } from './MessageActions';
+import { Scrubber } from './Scrubber';
+import { TimelineMenuPopup } from './TimelineMenu';
+import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm';
+import { QuoteButton } from './QuoteButton';
+import { QuoteTakerContext } from './quote-selection';
+import { useToggleSet } from './useToggleSet';
+import { Row } from './rows/Rows';
+import { useChatRow, useChats } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { FileLinkContext } from './file-links';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { useModelName } from '../../agents/model-name';
+import { SECTION_LABEL } from '@ruimte/ui/classes';
+import { EmptyState } from '@ruimte/ui/EmptyState';
+import { ErrorBoundary } from '@ruimte/ui/ErrorBoundary';
+const ESTIMATED_ROW_PX = 56;
+/*
+ * A thread before its first message: which model answers, what the lines into this node let it read,
+ * and the folder it works in, so a first question can lean on all three.
+ */
+function EmptyThread({ chatId }) {
+    const { t } = useTranslation('agent-chat');
+    const info = useChatRow(chatId, (row) => row?.info ?? null);
+    const model = useModelName(info?.provider, info?.selection.model ?? '');
+    const sources = chatHost().useContextSources(chatId);
+    return (_jsx("div", { className: "flex grow items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center", children: [_jsx(EmptyState, { icon: info ? _jsx(AgentIcon, { kind: info.provider }) : undefined, className: "p-0", children: info ? t('timeline.empty.ready', { model }) : t('timeline.empty.ask') }), sources.length > 0 && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx("span", { className: SECTION_LABEL, children: t('timeline.empty.canRead') }), _jsx("span", { className: "max-w-full text-xs text-text-muted", children: sources.map((source) => source.title).join(', ') })] })), info?.cwd && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx("span", { className: SECTION_LABEL, children: t('timeline.empty.worksIn') }), _jsx("span", { className: "max-w-full font-mono text-xs break-all text-text-muted", children: info.cwd })] }))] }) }));
+}
+/*
+ * A row of the thread behind the chapter line of its bookmark. A message, the only row that takes a
+ * bookmark, gets its actions under it; every other row carries a bookmark only for a reply it folds.
+ */
+function MarkableRow({ row, chatId, bookmark, children }) {
+    if (row.kind !== 'user' && row.kind !== 'assistant') {
+        return (_jsxs(_Fragment, { children: [bookmark !== null && _jsx(BookmarkMarker, { chatId: chatId, itemId: bookmark.itemId, bookmark: bookmark }), children] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(BookmarkMarker, { chatId: chatId, itemId: row.id, bookmark: bookmark }), _jsxs("div", { className: "group/message", children: [children, _jsx(MessageActions, { chatId: chatId, row: row })] })] }));
+}
+export function Timeline({ chatId, composer }) {
+    const { t } = useTranslation('agent-chat');
+    const order = useChatRow(chatId, (row) => row?.order);
+    // The structure, not the items. A delta growing a reply must not derive every row again.
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const activeTurnId = useChatRow(chatId, (row) => row?.info.activeTurnId ?? null);
+    const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
+    const forkedTurns = useForkedTurns(chatId);
+    const info = useChatRow(chatId, (row) => row?.info ?? null);
+    const { keyOf } = useChatScope();
+    // Read when the menu opens rather than subscribed to, for the same reason the rows use the structure.
+    const fullItems = () => useChats.getState().byKey[keyOf(chatId)]?.items;
+    const scrollRef = useRef(null);
+    const threadRef = useRef(null);
+    const contentRef = useRef(null);
+    const quoteTakerRef = useRef(null);
+    const registerQuoteTaker = useCallback((take) => {
+        quoteTakerRef.current = take;
+        return () => {
+            if (quoteTakerRef.current === take) {
+                quoteTakerRef.current = null;
+            }
+        };
+    }, []);
+    const followRef = useRef(true);
+    const stopFollowing = useCallback(() => {
+        followRef.current = false;
+    }, []);
+    const groups = useToggleSet(stopFollowing);
+    const turns = useToggleSet(stopFollowing);
+    const subagents = useToggleSet(stopFollowing);
+    const scrollGeometry = useRef({ top: 0, height: 0, viewport: 0 });
+    const [target, setTarget] = useState(EMPTY_TARGET);
+    const { trail, show } = useSubagentTrail(chatId);
+    const frameRef = useRef(null);
+    const composerRef = useRef(null);
+    const [composerHeight, setComposerHeight] = useState(0);
+    const [frame, setFrame] = useState({ width: 0, height: 0, column: false });
+    const rows = useMemo(() => {
+        if (!order || !items) {
+            return [];
+        }
+        return deriveTimelineRows(order.map((id) => items[id]), { expandedGroups: groups.ids, expandedTurns: turns.ids, expandedSubagents: subagents.ids, activeTurnId, forkedTurns });
+    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
+    const empty = rows.length === 0;
+    const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
+    const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+    // A message a jump is on its way to; it may first have to open the turn its reply folded into.
+    const [seeking, setSeeking] = useState(null);
+    // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
+    useEffect(() => {
+        const element = frameRef.current;
+        if (element === null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const column = element.closest('.chat-column') !== null;
+        const measure = () => setFrame((current) => current.width === element.offsetWidth && current.height === element.offsetHeight && current.column === column
+            ? current
+            : { width: element.offsetWidth, height: element.offsetHeight, column });
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        measure();
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const element = composerRef.current;
+        if (element === null) {
+            return;
+        }
+        const measure = () => setComposerHeight(element.offsetHeight);
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        measure();
+        return () => observer.disconnect();
+    }, []);
+    // Oversized prompts scroll in full instead of sticking with their top outside the viewport.
+    const stickyComposer = composerHeight < frame.height - FOLLOW_THRESHOLD_PX;
+    const coveredHeight = stickyComposer ? composerHeight : 0;
+    const coveredHeightRef = useRef(coveredHeight);
+    coveredHeightRef.current = coveredHeight;
+    // The composer pages through the thread with PageUp and PageDown; this is the element it moves.
+    useEffect(() => registerTimeline(chatId, scrollRef.current, (enabled) => {
+        followRef.current = enabled;
+    }, () => coveredHeightRef.current), [chatId]);
+    // The client does not run the React Compiler, so its memoization rule has nothing to break here.
+    // oxlint-disable-next-line react/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => ESTIMATED_ROW_PX,
+        getItemKey: (index) => rows[index].id,
+        overscan: 8,
+        scrollPaddingEnd: coveredHeight
+    });
+    // A change in what the last row says (a streaming delta) must also pull the view down.
+    const lastRow = rows[rows.length - 1];
+    const lastReplyLength = useChatRow(chatId, (row) => {
+        const item = lastRow?.kind === 'assistant' ? row?.items[lastRow.id] : undefined;
+        return item?.kind === 'assistant' ? item.text.length : null;
+    });
+    const tail = lastReplyLength ?? rows.length;
+    /*
+     * The rows are measured as they render, so the end of the list moves while it is drawn: a diff
+     * that highlights, an image that loads, a tool row that grows a line of output. `scrollToIndex`
+     * aims at where the row was when it was asked, which is what left the thread short of the end.
+     * The scroller's own bottom is a fact rather than an estimate, and the total size changing is
+     * what says a row was measured again, so this runs for every one of those.
+     */
+    const totalSize = virtualizer.getTotalSize();
+    useLayoutEffect(() => {
+        const element = scrollRef.current;
+        if (!followRef.current || rows.length === 0 || element === null) {
+            return;
+        }
+        // The composer is in the scroll flow, so its measured height is part of this end position.
+        element.scrollTop = element.scrollHeight;
+        scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
+    }, [rows.length, tail, totalSize, composerHeight, frame.height]);
+    // A sub-agent in the thread's place hides the thread, and the strip and the keyboard go with it.
+    const onMainAgent = trail.length === 0;
+    // A node on a canvas has no strip. It is too narrow to give up a column of its width.
+    const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
+    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber);
+    /*
+     * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
+     * drew), so reading the scroll position costs no layout. The virtualizer renders this component on
+     * every scroll already.
+     */
+    const measurements = virtualizer.measurementsCache;
+    const starts = ticks.map((tick) => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
+    const scrollTop = virtualizer.scrollOffset ?? 0;
+    const viewport = virtualizer.scrollRect?.height ?? 0;
+    const visibleHeight = Math.max(0, viewport - coveredHeight);
+    const inView = showsScrubber ? messagesInView({ starts, scrollTop, visibleHeight }) : null;
+    const chatFind = chatHost().useTimelineFind({
+        chatId,
+        frame: frameRef,
+        thread: threadRef,
+        scroller: scrollRef,
+        enabled: onMainAgent,
+        rows,
+        structure: items,
+        order,
+        firstRowInView: () => {
+            const top = scrollRef.current?.scrollTop ?? 0;
+            return virtualizer.getVirtualItems().find((virtualRow) => virtualRow.end > top)?.index ?? 0;
+        },
+        openTurn: turns.add,
+        openGroup: groups.add,
+        openSubagent: subagents.add,
+        // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
+        scrollToRow: (index) => {
+            const top = scrollRef.current?.scrollTop ?? 0;
+            const bottom = top + visibleHeight;
+            if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
+                virtualizer.scrollToIndex(index, { align: 'center' });
+            }
+        },
+        coveredHeight: () => coveredHeightRef.current,
+        stopFollowing
+    });
+    const searching = chatFind.open;
+    const found = useMemo(() => (searching ? ticksWithHits(ticks, chatFind.hitRows) : []), [searching, ticks, chatFind.hitRows]);
+    const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
+    const jumpTo = (index) => {
+        const tick = ticks[index];
+        if (!tick) {
+            return;
+        }
+        if (tick.bookmark !== null) {
+            setSeeking(tick.bookmark.itemId);
+            return;
+        }
+        followRef.current = false;
+        virtualizer.scrollToIndex(tick.rowIndex, { align: 'start' });
+    };
+    useLayoutEffect(() => {
+        if (seeking === null) {
+            return;
+        }
+        const index = rows.findIndex((row) => row.id === seeking);
+        if (index !== -1) {
+            setSeeking(null);
+            followRef.current = false;
+            virtualizer.scrollToIndex(index, { align: 'start' });
+            return;
+        }
+        const turnId = items?.[seeking]?.turnId ?? null;
+        if (turnId !== null && !turns.ids.has(turnId)) {
+            turns.add(turnId);
+            return;
+        }
+        setSeeking(null);
+    }, [seeking, rows, items, turns, virtualizer]);
+    useEffect(() => registerItemJumper(keyOf(chatId), setSeeking), [keyOf, chatId]);
+    // The strip is memoized and draws on every scroll, so it gets one callback for its life.
+    const jumpRef = useRef(jumpTo);
+    jumpRef.current = jumpTo;
+    const pick = useCallback((index) => jumpRef.current(index), []);
+    // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
+    const cardChat = useMemo(() => ({
+        chatId,
+        canFork: (turnId) => {
+            if (chatHost().fork === null) {
+                return false;
+            }
+            const row = useChats.getState().byKey[keyOf(chatId)];
+            return forkRefusal(row?.info ?? null, row?.structure[turnId]) === null;
+        },
+        fork: (turnId) => chatHost().fork?.(chatId, turnId)
+    }), [keyOf, chatId]);
+    const stepRef = useRef(() => false);
+    stepRef.current = (direction) => {
+        if (!onMainAgent) {
+            return false;
+        }
+        const index = stepMessage(starts, (i) => ticks[i].kind === 'person', scrollTop, direction);
+        if (index === null) {
+            return false;
+        }
+        jumpTo(index);
+        return true;
+    };
+    useEffect(() => registerMessageStepper(keyOf(chatId), (direction) => stepRef.current(direction)), [keyOf, chatId]);
+    /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
+    const openConversation = (step) => {
+        show(openFromMain(step));
+    };
+    /* The header of a turn a sub-agent woke. It points at the row that agent worked in, or the one it hangs under. */
+    const openSubagent = (toolUseId) => {
+        const found = findSubagentBranch(rows, toolUseId);
+        if (!found) {
+            return;
+        }
+        subagents.add(found.branch.id);
+        followRef.current = false;
+        virtualizer.scrollToIndex(found.index, { align: 'start' });
+    };
+    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
+                            // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
+                            // it and scrolls the thread toward the end on every keystroke.
+                            className: "chat-scroll min-h-0 grow overflow-auto", onScrollCapture: (e) => {
+                                const el = e.currentTarget;
+                                // Capture the reader's movement before virtualization remeasures rows and shifts the scroll offset.
+                                const previous = scrollGeometry.current;
+                                const layoutChanged = previous.height !== el.scrollHeight || previous.viewport !== el.clientHeight;
+                                const atEnd = el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_THRESHOLD_PX;
+                                if (!layoutChanged && el.scrollTop < previous.top) {
+                                    followRef.current = false;
+                                }
+                                else if (atEnd) {
+                                    followRef.current = true;
+                                }
+                                scrollGeometry.current = { top: el.scrollTop, height: el.scrollHeight, viewport: el.clientHeight };
+                                setTimelineAtEnd(chatId, followRef.current);
+                            }, children: _jsxs("div", { ref: contentRef, className: "relative flex min-h-full flex-col", children: [_jsx(ContextMenu.Trigger, { ref: threadRef, className: "chat-thread flex grow flex-col px-4 pt-4", style: { paddingLeft }, onContextMenu: (e) => setTarget(readTimelineTarget(e.target, threadRef.current, withCurrentText(rows, fullItems()))), children: empty ? (_jsx(EmptyThread, { chatId: chatId })) : (_jsx("div", { className: "chat-column-content relative w-full shrink-0", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualRow) => {
+                                                const row = rows[virtualRow.index];
+                                                // Put turn gaps inside the measured row so the virtualizer includes them.
+                                                const question = row.kind === 'user';
+                                                const previous = virtualRow.index > 0 ? rows[virtualRow.index - 1] : null;
+                                                return (_jsx("div", { "data-index": virtualRow.index, "data-item-id": row.id, ref: virtualizer.measureElement, className: clsx('absolute left-0 top-0 w-full', rowRhythm(row, previous), question && virtualRow.index > 0 && 'pt-(--chat-turn-gap)'), style: { transform: `translateY(${virtualRow.start}px)` }, children: _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: marks.get(row.id) ?? null, children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }) }) }) }, row.id));
+                                            }) })) }), _jsx(QuoteButton, { thread: threadRef, frame: contentRef, taker: quoteTakerRef }), _jsx("div", { ref: composerRef, className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3'), style: { position: stickyComposer ? 'sticky' : 'relative', bottom: 0 }, children: _jsx(QuoteTakerContext.Provider, { value: registerQuoteTaker, children: composer }) })] }) }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef, chatId: onMainAgent ? chatId : null })] }), showsScrubber && (_jsx("div", { className: "absolute top-4", style: { left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }, children: _jsx(ErrorBoundary, { label: t('timeline.stripFailed'), resetKeys: [ticks.length], children: _jsx(Scrubber, { ticks: ticks, firstInView: inView?.first ?? null, lastInView: inView?.last ?? null, onPick: pick, chat: cardChat, found: found, foundCurrent: foundCurrent }) }) }))] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { TimelineTarget } from '../logic/timeline-target';
+export declare function TimelineMenuPopup({ target, thread, chatId }: {
+    target: TimelineTarget;
+    thread: RefObject<HTMLDivElement | null>;
+    chatId?: string | null;
+}): import("react").JSX.Element;
+export declare function BookmarkMenuItems({ chatId, itemId, onName }: {
+    chatId: string;
+    itemId: string;
+    onName?: () => void;
+}): import("react").JSX.Element;

package/dist/chat/ui/TimelineMenu.js

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ContextMenu } from '@base-ui-components/react/context-menu';
+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 { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import { openFileLink, useFileLinkCwd } from './file-links';
+import { MENU_SEPARATOR } from '@ruimte/ui/classes';
+import { DisabledReason } from '@ruimte/ui/DisabledReason';
+import { copyText } from '@ruimte/ui/clipboard';
+import { Icon } from '@ruimte/ui/Icon';
+import { selectAllWithin } from '@ruimte/ui/selection';
+import { EDIT_SHORTCUTS } from '@ruimte/ui/shortcut';
+import { Kbd } from '@ruimte/ui/Kbd';
+/*
+ * 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 }) {
+    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 = () => {
+        if (target.path !== null) {
+            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false });
+        }
+    };
+    return (_jsx(ContextMenu.Portal, { children: _jsx(ContextMenu.Positioner, { className: "z-(--z-popup)", children: _jsxs(ContextMenu.Popup, { className: "menu-popup", children: [_jsxs(ContextMenu.Item, { className: "menu-item", disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { className: "menu-item", disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, { className: MENU_SEPARATOR }), _jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, { className: MENU_SEPARATOR }), _jsxs(ContextMenu.Item, { className: "menu-item", onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] }))] }) }) }));
+}
+/*
+ * 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 }) {
+    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 (_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => {
+                void placeBookmark(scope, chatId, itemId);
+                onName?.();
+            }, children: [_jsx(Icon, { icon: BookmarkPlus, size: 14 }), " ", t('bookmarks.add')] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => {
+                    useBookmarkNaming.getState().open(scope.keyOf(chatId), bookmark.itemId);
+                    onName?.();
+                }, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('bookmarks.rename')] }), _jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => void removeBookmark(scope, chatId, bookmark), children: [_jsx(Icon, { icon: BookmarkX, size: 14 }), " ", t('bookmarks.remove')] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ChatFileChange } from '@ruimte/agent-contracts';
+interface UnifiedDiffProps {
+    change: ChatFileChange;
+    overflow?: 'wrap' | 'scroll';
+    diffStyle?: 'unified' | 'split';
+}
+export default function UnifiedDiff({ change, overflow, diffStyle }: UnifiedDiffProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/UnifiedDiff.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { PatchDiff } from '@pierre/diffs/react';
+import { chatHost } from '../../host';
+import { useDiffTheme } from './diff-theme';
+/*
+ * 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.
+ */
+const asPatch = (change) => {
+    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}`;
+};
+const lineClass = (line) => {
+    if (line.startsWith('+')) {
+        return 'text-term-green';
+    }
+    if (line.startsWith('-')) {
+        return 'text-term-red';
+    }
+    return 'text-text-muted';
+};
+export default function UnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified' }) {
+    const resolved = chatHost().code.useMode();
+    const theme = useDiffTheme();
+    const patch = useMemo(() => asPatch(change), [change]);
+    const options = useMemo(() => ({
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        diffStyle,
+        overflow,
+        hunkSeparators: 'simple'
+    }), [diffStyle, overflow, theme, resolved]);
+    if (patch === null) {
+        return (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code select-text", children: change.diff
+                .replace(/\n$/, '')
+                .split('\n')
+                .map((line, index) => (_jsx("div", { className: clsx(lineClass(line), 'whitespace-pre-wrap'), children: line }, index))) }));
+    }
+    return (_jsx("div", { className: "chat-diff select-text", children: _jsx(PatchDiff, { patch: patch, options: options }) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ChatAttachmentUpload } from '@ruimte/agent-contracts';
+export declare function UploadThumb({ upload }: {
+    upload: ChatAttachmentUpload;
+}): import("react").JSX.Element;

package/dist/chat/ui/UploadThumb.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }) {
+    const url = useUploadThumbnail(upload);
+    if (url === null) {
+        return _jsx("span", { role: "img", "aria-label": upload.name, className: `block bg-surface-sunken ${BOX}` });
+    }
+    return _jsx("img", { src: url, alt: upload.name, className: `object-cover ${BOX}` });
+}

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

@@ -0,0 +1,4 @@
+export declare const MENTION_TONE = "bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]";
+export declare const SKILL_TONE = "bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]";
+export declare const CHIP_IN_EDITOR = "box-decoration-clone rounded-md px-1 py-0.5";
+export declare 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/dist/chat/ui/chips.js

@@ -0,0 +1,11 @@
+/* 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/dist/chat/ui/code-lines.d.ts

@@ -0,0 +1,18 @@
+export interface CodeToken {
+    content: string;
+    color?: string;
+    fontStyle?: number;
+}
+export type Tokenize<State> = (code: string, state: State | undefined) => {
+    lines: CodeToken[][];
+    state: State | undefined;
+};
+export declare class IncrementalLines<State> {
+    private readonly tokenize;
+    private source;
+    private lines;
+    private state;
+    constructor(tokenize: Tokenize<State>);
+    update(code: string, complete: boolean): CodeToken[][];
+    private reset;
+}

package/dist/chat/ui/code-lines.js

@@ -0,0 +1,46 @@
+/*
+ * 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 {
+    tokenize;
+    // The text of the lines that are kept: empty, or ending in a newline while the block grows.
+    source = '';
+    lines = [];
+    state = undefined;
+    constructor(tokenize) {
+        this.tokenize = tokenize;
+    }
+    /* The tokens of every line of `code`; `complete` says nothing more arrives, so the last line is kept too. */
+    update(code, complete) {
+        // 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];
+    }
+    reset() {
+        this.source = '';
+        this.lines = [];
+        this.state = undefined;
+    }
+}

package/dist/chat/ui/code-streaming.d.ts

@@ -0,0 +1 @@
+export declare const CodeStreamingContext: import("react").Context<boolean>;

package/dist/chat/ui/code-streaming.js

@@ -0,0 +1,3 @@
+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/dist/chat/ui/code-theme.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeRegistration } from 'shiki';
+export declare const useCodeTheme: () => string;
+export declare const shikiThemeOf: (id: string) => string | ThemeRegistration;

package/dist/chat/ui/code-theme.js

@@ -0,0 +1,10 @@
+import { chatHost } from '../../host';
+/* The Shiki theme code is drawn in under the app's current light or dark. */
+export const useCodeTheme = () => {
+    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 const shikiThemeOf = (id) => chatHost().code.custom.find((theme) => theme.name === id) ?? id;

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

@@ -0,0 +1,6 @@
+import { type Extension } from '@codemirror/state';
+export interface ChipChoices {
+    mentions: string[];
+    skills: string[];
+}
+export declare const chipDecorations: (value: ChipChoices) => Extension;

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

@@ -0,0 +1,29 @@
+import { syntaxTree } from '@codemirror/language';
+import { Facet, RangeSetBuilder, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+import { chipRanges } from '../../mentions';
+import { CHIP_IN_EDITOR, MENTION_TONE, SKILL_TONE } from '../chips';
+import { codeRanges } from './editor';
+const NO_CHOICES = { mentions: [], skills: [] };
+const choices = Facet.define({ 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}` });
+const chipMarks = (state) => {
+    const { mentions, skills } = state.facet(choices);
+    const builder = new RangeSetBuilder();
+    // `@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({
+    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 const chipDecorations = (value) => [choices.of(value), chipField];

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

@@ -0,0 +1,11 @@
+import { Language } from '@codemirror/language';
+import { type EditorState, type Extension } from '@codemirror/state';
+export declare const externalChange: import("@codemirror/state").AnnotationType<boolean>;
+export declare const markdownLanguage: Language;
+export interface CodeRange {
+    from: number;
+    to: number;
+    kind: 'inline' | 'fence';
+}
+export declare const codeRanges: (state: EditorState, from?: number, to?: number) => CodeRange[];
+export declare const composerEditorExtensions: () => Extension;