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

package/dist/chat/ui/Timeline.js

@@ -0,0 +1,424 @@
+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 { useVirtualizer } from '@tanstack/react-virtual';
+import clsx from 'clsx';
+import { LoaderCircle } from 'lucide-react';
+import { useForkedTurns } from '../forks.js';
+import { bookmarkRows } from '../logic/bookmarks.js';
+import { deriveTimelineRows, findSubagentBranch } from '../logic/timeline.js';
+import { withThreadCards } from '../logic/thread-cards.js';
+import { openFromMain, useSubagentTrail } from '../subagent-view.js';
+import { registerItemJumper, registerMessageStepper, registerTimeline, registerTurnJumper, setTimelineAtEnd, wantsEarlier } from '../timeline-scroll.js';
+import { useTimelineFlash } from '../timeline-flash.js';
+import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber.js';
+import { EMPTY_TARGET, readTimelineTarget, withCurrentText } from '../logic/timeline-target.js';
+import { forkRefusal } from '../logic/fork.js';
+import { FindRevealContext } from './find-reveal.js';
+import { BookmarkMarker } from './BookmarkMarker.js';
+import { MessageActions } from './MessageActions.js';
+import { Scrubber } from './Scrubber.js';
+import { TimelineMenuPopup } from './TimelineMenu.js';
+import { FOLLOW_THRESHOLD_PX, replyHeader, rowRhythm } from './rows/row-rhythm.js';
+import { QuoteButton } from './QuoteButton.js';
+import { QuoteTakerContext } from './quote-selection.js';
+import { useToggleSet } from './useToggleSet.js';
+import { WelcomeGreeting } from './Welcome.js';
+import { Row } from './rows/Rows.js';
+import { ReplyHeader } from './rows/MessageRows.js';
+import { useChatRow, useChats } from '../../state/chats.js';
+import { chatHost } from '../../host.js';
+import { useChatScope } from '../../scope.js';
+import { FileLinkContext } from './file-links.js';
+import { AgentIcon } from '../../agents/AgentIcon.js';
+import { useModelName } from '../../agents/model-name.js';
+import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
+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);
+    const hidesFolder = chatHost().useHidesFolder(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(SectionLabel, { 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 && !hidesFolder && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx(SectionLabel, { 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 })] })] }));
+}
+/*
+ * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
+ * where it was underneath and the composer stays in reach for the prompts it answers.
+ */
+export function Timeline({ chatId, composer, overlay }) {
+    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 cursor = useChatRow(chatId, (row) => row?.history?.cursor ?? null);
+    const scope = useChatScope();
+    const { id: scopeId, keyOf } = scope;
+    // 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 [loadingEarlier, setLoadingEarlier] = useState(false);
+    const loadingEarlierRef = useRef(false);
+    // The row being read and where it stood, taken after every render, so a page going in above puts it back.
+    const anchorRef = useRef(null);
+    const headRef = useRef(undefined);
+    const loadEarlier = useCallback(() => {
+        if (cursor === null || loadingEarlierRef.current) {
+            return;
+        }
+        loadingEarlierRef.current = true;
+        setLoadingEarlier(true);
+        // A page that failed is asked for again on the next scroll; the thread keeps what it has.
+        void scope.chats
+            .loadEarlier(chatId, cursor)
+            .catch(() => undefined)
+            .finally(() => {
+            loadingEarlierRef.current = false;
+            setLoadingEarlier(false);
+        });
+    }, [scope, chatId, cursor]);
+    const threadRows = 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 cards = chatHost().useThreadCards(scopeId, chatId);
+    const rows = useMemo(() => withThreadCards(threadRows, cards), [threadRows, cards]);
+    const welcomes = chatHost().useWelcome(chatId);
+    const empty = rows.length === 0;
+    // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
+    const welcome = welcomes && empty && (info === null || (info.usage.turns === 0 && info.activeTurnId === null));
+    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);
+    // A turn a jump is on its way to, which waits for the page its messages are on to come in.
+    const [revealing, setRevealing] = useState(null);
+    const flash = useTimelineFlash((s) => s.target);
+    // 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 = !welcome && 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 || 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 page that went in above moves every row down by what it measures; the reader stays on the row they were on.
+    useLayoutEffect(() => {
+        const element = scrollRef.current;
+        const head = order?.[0];
+        const moved = head !== headRef.current;
+        headRef.current = head;
+        if (element === null) {
+            return;
+        }
+        const anchor = anchorRef.current;
+        const index = moved && anchor !== null && !followRef.current ? rows.findIndex((row) => row.id === anchor.id) : -1;
+        if (anchor !== null && index !== -1) {
+            // The total measures again what this commit's rows reported; the cache alone lags behind them.
+            virtualizer.getTotalSize();
+            element.scrollTop = virtualizer.measurementsCache[index].start - anchor.offset;
+            return;
+        }
+        const row = virtualizer.getVirtualItemForOffset(element.scrollTop);
+        anchorRef.current = row === undefined ? null : { id: String(row.key), offset: row.start - element.scrollTop };
+    });
+    // Close to the top, the page before goes in; again after each page that left too little above the reader.
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element !== null && wantsEarlier(element)) {
+            loadEarlier();
+        }
+    }, [rows, loadEarlier, 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;
+    // A find covers the whole thread, so every page before this one comes in while it is open.
+    useEffect(() => {
+        if (searching) {
+            loadEarlier();
+        }
+    }, [searching, loadEarlier]);
+    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 item = items?.[seeking];
+        if (item === undefined && cursor !== null) {
+            loadEarlier();
+            return;
+        }
+        const turnId = item?.turnId ?? null;
+        if (turnId !== null && !turns.ids.has(turnId)) {
+            turns.add(turnId);
+            return;
+        }
+        setSeeking(null);
+    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier]);
+    useEffect(() => registerItemJumper(keyOf(chatId), setSeeking), [keyOf, chatId]);
+    useLayoutEffect(() => {
+        if (revealing === null) {
+            return;
+        }
+        const { turnId, target } = revealing;
+        const changes = target === 'changes' ? rows.findIndex((row) => row.kind === 'changed-files' && row.turnId === turnId) : -1;
+        const opening = order?.map((id) => items?.[id]).find((item) => item?.kind === 'user' && item.turnId === turnId);
+        const found = changes !== -1 ? changes : rows.findIndex((row) => row.id === opening?.id || row.id === `start-${turnId}` || row.id === `fold-${turnId}`);
+        if (found !== -1) {
+            setRevealing(null);
+            followRef.current = false;
+            virtualizer.scrollToIndex(found, { align: 'start' });
+            useTimelineFlash.getState().flash(keyOf(chatId), rows[found].id, changes !== -1);
+            return;
+        }
+        // The turn is before the page this thread holds; a thread that holds it all has no such turn.
+        if (cursor === null) {
+            setRevealing(null);
+            return;
+        }
+        loadEarlier();
+    }, [revealing, rows, order, items, virtualizer, cursor, loadEarlier, keyOf, chatId]);
+    useEffect(() => registerTurnJumper(keyOf(chatId), (turnId, target) => setRevealing({ turnId, target })), [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", 
+                            // The thread keeps its reader in place itself when a page goes in above.
+                            style: { overflowAnchor: 'none' }, 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);
+                                if (wantsEarlier(el)) {
+                                    loadEarlier();
+                                }
+                            }, children: _jsxs("div", { ref: contentRef, className: clsx('relative flex min-h-full flex-col', welcome && 'justify-center'), children: [_jsx(ContextMenu.Trigger, { ref: threadRef, className: clsx('chat-thread flex flex-col px-4 pt-4', !welcome && 'grow'), style: { paddingLeft }, inert: overlay ? true : undefined, onContextMenu: (e) => setTarget(readTimelineTarget(e.target, threadRef.current, withCurrentText(rows, fullItems()))), children: welcome ? (_jsx(WelcomeGreeting, { chatId: chatId })) : 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;
+                                                const header = replyHeader(row, previous);
+                                                return (_jsxs("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: [flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && (_jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce)), header !== null && _jsx(ReplyHeader, { chatId: chatId, at: header.at }), _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, 
+                                        // The card is translucent so the thread shows through it, but the pb-3 strip under it must stay opaque.
+                                        className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'), 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 })] }), loadingEarlier && !overlay && (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), showsScrubber && !overlay && (_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 }) }) })), overlay && (_jsx("div", { className: "absolute inset-0 z-5 flex flex-col bg-surface", style: { paddingBottom: coveredHeight }, children: overlay }))] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { TimelineTarget } from '../logic/timeline-target.js';
+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,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, Pencil, Scan } from 'lucide-react';
+import { placeBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks.js';
+import { forkRefusal, turnIdOfRow } from '../logic/fork.js';
+import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
+import { chatHost } from '../../host.js';
+import { useChatScope } from '../../scope.js';
+import { useChatRow } from '../../state/chats.js';
+import { openFileLink, useFileLinkCwd } from './file-links.js';
+import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
+/*
+ * The menu behind a right-click in a thread. Copy is the reason it exists. Everything in a thread
+ * is text a person may want out of it, and a whole message, a code block or the markdown an answer
+ * was written in are each a different amount of that.
+ */
+export function TimelineMenuPopup({ target, thread, chatId = null }) {
+    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 (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.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, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.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, { 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, {}), _jsxs(ContextMenu.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, {}), _jsxs(ContextMenu.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, { onClick: () => {
+                void placeBookmark(scope, chatId, itemId);
+                onName?.();
+            }, children: [_jsx(Icon, { icon: BookmarkPlus, size: 14 }), " ", t('bookmarks.add')] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { onClick: () => {
+                    useBookmarkNaming.getState().open(scope.keyOf(chatId), bookmark.itemId);
+                    onName?.();
+                }, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('bookmarks.rename')] }), _jsxs(ContextMenu.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,11 @@
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import { type DiffContents } from './full-diff.js';
+interface UnifiedDiffProps {
+    change: ChatFileChange;
+    overflow?: 'wrap' | 'scroll';
+    diffStyle?: 'unified' | 'split';
+    fill?: boolean;
+    contents?: DiffContents;
+}
+export default function UnifiedDiff({ change, overflow, diffStyle, fill, contents }: UnifiedDiffProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/UnifiedDiff.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { FileDiff, PatchDiff } from '@pierre/diffs/react';
+import { chatHost } from '../../host.js';
+import { useDiffTheme } from './diff-theme.js';
+import { fullFileDiff } from './full-diff.js';
+/*
+ * A patch the CLI reported itself (Codex writes unified diffs). The renderer needs a file header
+ * to know what it is looking at, and a CLI that only sends hunks gets one from the path we know.
+ * A diff without hunks at all is shown as its own lines, so nothing is ever swallowed.
+ */
+function asPatch(change) {
+    if (!/^@@/m.test(change.diff)) {
+        return null;
+    }
+    if (/^\+\+\+ /m.test(change.diff)) {
+        return change.diff;
+    }
+    const from = change.kind === 'add' ? '/dev/null' : `a/${change.path}`;
+    const to = change.kind === 'delete' ? '/dev/null' : `b/${change.path}`;
+    return `--- ${from}\n+++ ${to}\n${change.diff}`;
+}
+/* Lets a diff with a view of its own run to the bottom of it, so the scrollbar of a short one sits
+   there instead of under its last line; the lines themselves keep their height. */
+const FILL_CSS = `
+:host { display: flex; flex-direction: column; flex-grow: 1; }
+pre { flex-grow: 1; align-content: start; }
+pre[data-diff-type="single"] { display: flex; flex-direction: column; }
+pre[data-diff-type="split"][data-overflow="scroll"]:not([data-dehydrated]) { align-content: stretch; }
+pre > [data-code] { flex-grow: 1; align-self: stretch; align-content: start; }
+`;
+function lineClass(line) {
+    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', fill = false, contents }) {
+    const resolved = chatHost().code.useMode();
+    const theme = useDiffTheme();
+    const patch = useMemo(() => asPatch(change), [change]);
+    const oldText = contents?.old;
+    const newText = contents?.new;
+    const full = useMemo(() => (patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText })), [patch, change.path, oldText, newText]);
+    const unfolds = full !== null;
+    const options = useMemo(() => ({
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        diffStyle,
+        overflow,
+        hunkSeparators: unfolds ? 'line-info' : 'simple',
+        unsafeCSS: fill ? FILL_CSS : undefined
+    }), [diffStyle, overflow, theme, resolved, fill, unfolds]);
+    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: clsx('chat-diff select-text', fill && 'flex grow flex-col'), children: full === null ? _jsx(PatchDiff, { patch: patch, options: options }) : _jsx(FileDiff, { fileDiff: full, options: options }) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ChatAttachmentUpload } from '@adecore/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.js';
+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/Welcome.d.ts

@@ -0,0 +1,4 @@
+export declare function WelcomeGreeting({ chatId, now }: {
+    chatId: string;
+    now?: () => Date;
+}): import("react").JSX.Element;

package/dist/chat/ui/Welcome.js

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

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';