@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/Scrubber.js

@@ -0,0 +1,121 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo, useEffect, useMemo, useState } from 'react';
+import { ContextMenu } from '@base-ui-components/react/context-menu';
+import { PreviewCard } from '@base-ui-components/react/preview-card';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Copy, GitFork } from 'lucide-react';
+import { layoutTicks, messageAt, slotInView, slotOf, tickWidth, TICK_HEIGHT_PX } from '../logic/scrubber';
+import { BookmarkMenuItems } from './TimelineMenu';
+import { formatMoment } from '@ruimte/ui/format/datetime';
+import { MENU_SEPARATOR } from '@ruimte/ui/classes';
+import { copyText } from '@ruimte/ui/clipboard';
+import { cameThroughPortal } from '@ruimte/ui/floating';
+import { Icon } from '@ruimte/ui/Icon';
+const PREVIEW_CHARS = 280;
+const FOUND_WIDTH_PX = 4;
+const timeOf = (createdAt) => formatMoment(createdAt);
+const CARD_ACTIONS = {
+    'copy-message': {
+        label: 'timeline.menu.copyMessage',
+        icon: Copy,
+        // A wake carries the machine's label, not anything a person wrote.
+        offers: (tick) => tick.kind === 'person' && tick.text !== '',
+        run: (tick) => copyText(tick.text)
+    },
+    fork: {
+        label: 'timeline.menu.forkFromHere',
+        icon: GitFork,
+        offers: (tick, chat) => chat !== null && tick.turnId !== null && chat.canFork(tick.turnId),
+        run: (tick, chat) => {
+            if (chat !== null && tick.turnId !== null) {
+                chat.fork(tick.turnId);
+            }
+        }
+    }
+};
+const NOTHING_FOUND = [];
+/*
+ * The strip at the left edge of a chat view: a tick per message of the person, per wake by tasks and
+ * per other message with a bookmark, the ones on screen bright and the rest dimmed, a bookmark in the accent, growing only under the pointer. A single hover card follows the pointer along the strip, anchored at the tick
+ * it points at, so a thousand ticks are a thousand spans and not a thousand popups. While a find is
+ * open, a short mark at the strip's right edge stands beside every tick with a hit under it.
+ */
+export const Scrubber = memo(function Scrubber({ ticks, firstInView, lastInView, onPick, chat = null, found = NOTHING_FOUND, foundCurrent = null }) {
+    const { t } = useTranslation('agent-chat');
+    // State rather than a ref. The card's anchor is built during render and has to change when the strip does.
+    const [strip, setStrip] = useState(null);
+    const [height, setHeight] = useState(0);
+    // The message the card is about; it stays while the card closes, so the card never empties as it fades.
+    const [hovered, setHovered] = useState(null);
+    // Apart from `hovered`, which outlives the pointer for the card's sake. The ticks shrink back the moment it leaves.
+    const [pointing, setPointing] = useState(false);
+    const [cardOpen, setCardOpen] = useState(false);
+    // The message a right-click was on, kept apart from `hovered`, which moves on with the pointer while the menu is up.
+    const [menuIndex, setMenuIndex] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    useEffect(() => {
+        if (strip === null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => setHeight(strip.offsetHeight));
+        observer.observe(strip);
+        return () => observer.disconnect();
+    }, [strip]);
+    const kinds = useMemo(() => ticks.map((tick) => tick.kind), [ticks]);
+    const marked = useMemo(() => ticks.map((tick) => tick.bookmark !== null), [ticks]);
+    const layout = useMemo(() => layoutTicks(kinds, height, marked, found), [kinds, height, marked, found]);
+    const currentSlot = foundCurrent === null ? null : slotOf(layout, foundCurrent);
+    const inView = firstInView === null || lastInView === null ? null : { first: firstInView, last: lastInView };
+    const hoveredTick = hovered === null ? null : (ticks[hovered] ?? null);
+    const hoveredSlot = hovered === null ? null : slotOf(layout, hovered);
+    const anchorY = hoveredSlot === null ? null : layout.slots[hoveredSlot].y;
+    const anchor = useMemo(() => {
+        const element = strip;
+        if (anchorY === null || element === null) {
+            return undefined;
+        }
+        return {
+            contextElement: element,
+            getBoundingClientRect: () => {
+                const rect = element.getBoundingClientRect();
+                return DOMRect.fromRect({ x: rect.left, y: rect.top + anchorY + TICK_HEIGHT_PX / 2, width: rect.width, height: 0 });
+            }
+        };
+    }, [anchorY, strip]);
+    const pointAt = (e) => messageAt(layout, e.clientY - e.currentTarget.getBoundingClientRect().top);
+    const actionsFor = (tick) => tick === null ? [] : Object.values(CARD_ACTIONS).filter((action) => action.offers(tick, chat));
+    const actions = actionsFor(hoveredTick);
+    /* The message a bookmark goes on: the one it is on already, or the person's own. A wake is the machine's and holds none. */
+    const markableOf = (tick) => tick === null || chat === null ? null : (tick.bookmark?.itemId ?? (tick.kind === 'person' ? tick.id : null));
+    const menuTick = menuIndex === null ? null : (ticks[menuIndex] ?? null);
+    const menuMarkable = markableOf(menuTick);
+    const onContextMenu = (e) => {
+        // The hover card is a child here as well, and a click in it is about no tick.
+        const index = strip === null || cameThroughPortal(e) ? null : messageAt(layout, e.clientY - strip.getBoundingClientRect().top);
+        const tick = index === null ? null : (ticks[index] ?? null);
+        if (tick === null || (actionsFor(tick).length === 0 && markableOf(tick) === null)) {
+            e.preventBaseUIHandler();
+            return;
+        }
+        setMenuIndex(index);
+    };
+    return (_jsxs(ContextMenu.Root, { onOpenChange: setMenuOpen, children: [_jsx(ContextMenu.Trigger, { className: "h-full w-full", onContextMenu: onContextMenu, children: _jsxs(PreviewCard.Root, { open: cardOpen && !menuOpen, onOpenChange: setCardOpen, children: [_jsx(PreviewCard.Trigger, { delay: 150, closeDelay: 150, render: _jsx("div", { ref: setStrip, role: "navigation", "aria-label": t('scrubber.strip'), className: "relative h-full w-full cursor-pointer select-none", onPointerMove: (e) => {
+                                    setPointing(true);
+                                    const index = pointAt(e);
+                                    if (index !== hovered) {
+                                        setHovered(index);
+                                    }
+                                }, onPointerLeave: () => setPointing(false), onClick: (e) => {
+                                    const index = pointAt(e);
+                                    if (index !== null) {
+                                        onPick(index);
+                                    }
+                                } }), children: layout.slots.map((slot, index) => {
+                                const distance = pointing && hoveredSlot !== null ? Math.abs(index - hoveredSlot) : null;
+                                // A bookmark is a place to find again from anywhere, so it never dims with the rest.
+                                const bright = slot.marked || slotInView(slot, inView) || distance === 0;
+                                return (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": true, className: clsx('absolute left-1 rounded-full transition-[width,opacity] duration-100 ease-out motion-reduce:transition-none', slot.marked ? 'bg-accent' : slot.kind === 'wake' ? 'bg-text-muted' : 'bg-text', bright ? 'opacity-100' : 'opacity-30'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: tickWidth(slot.kind, distance) } }), slot.found && (_jsx("span", { "aria-hidden": true, className: clsx('absolute right-0 rounded-full bg-find-current', index === currentSlot ? 'opacity-100' : 'opacity-50'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: FOUND_WIDTH_PX } }))] }, slot.first));
+                            }) }), _jsx(PreviewCard.Portal, { children: _jsx(PreviewCard.Positioner, { anchor: anchor, side: "right", align: "center", sideOffset: 4, className: "z-(--z-popup)", children: _jsx(PreviewCard.Popup, { className: "menu-popup w-72", children: hoveredTick !== null && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "px-2.5 pt-1.5 pb-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs text-text-faint", children: [hoveredTick.bookmark === null ? (_jsx("span", { children: hoveredTick.kind === 'person' ? t('rows.user.heading') : t('scrubber.tasks') })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-1 self-center text-text-muted", children: [_jsx(Icon, { icon: Bookmark, size: 12, className: "shrink-0 text-accent" }), _jsx("span", { className: "truncate", children: hoveredTick.bookmark.name ?? t('bookmarks.unnamed') })] })), _jsx("time", { className: "tabular-nums", children: timeOf(hoveredTick.createdAt) })] }), _jsx("p", { className: "mt-1 line-clamp-4 text-sm break-words whitespace-pre-line text-text", children: hoveredTick.text.slice(0, PREVIEW_CHARS) || t('pickers.stash.noText') })] }), actions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: MENU_SEPARATOR }), actions.map((action) => (_jsxs("button", { type: "button", className: "menu-item w-full hover:bg-surface-hover", onClick: () => action.run(hoveredTick, chat), children: [_jsx(Icon, { icon: action.icon, size: 14 }), " ", t(action.label)] }, action.label)))] }))] })) }) }) })] }) }), _jsx(ContextMenu.Portal, { children: _jsx(ContextMenu.Positioner, { className: "z-(--z-popup)", children: _jsxs(ContextMenu.Popup, { className: "menu-popup", children: [menuTick !== null &&
+                                actionsFor(menuTick).map((action) => (_jsxs(ContextMenu.Item, { className: "menu-item", onClick: () => action.run(menuTick, chat), children: [_jsx(Icon, { icon: action.icon, size: 14 }), " ", t(action.label)] }, action.label))), menuTick !== null && actionsFor(menuTick).length > 0 && menuMarkable !== null && _jsx(ContextMenu.Separator, { className: MENU_SEPARATOR }), chat !== null && menuIndex !== null && menuMarkable !== null && (_jsx(BookmarkMenuItems, { chatId: chat.chatId, itemId: menuMarkable, onName: () => onPick(menuIndex) }))] }) }) })] }));
+});

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export declare function SubagentTitleCrumb({ chatId, className, children }: {
+    chatId: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SubagentBreadcrumb({ chatId, title, className }: {
+    chatId: string;
+    title?: string;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/SubagentControls.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, X } from 'lucide-react';
+import { breadcrumbOf, MAIN_AGENT, trailTo, useOpenableSubagents, useSubagentTrail } from '../subagent-view';
+import { SubagentStopButton } from './SubagentStopButton';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+const CRUMB_LINK = 'truncate text-text-muted hover:text-text';
+/*
+ * The chat's own title where the bar draws it. While a sub-agent stands in the chat's place it is the first crumb of the way down, so pressing it goes back to the main agent.
+ */
+export function SubagentTitleCrumb({ chatId, className, children }) {
+    const { trail, show } = useSubagentTrail(chatId);
+    if (trail.length === 0) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("button", { type: "button", className: clsx('flex min-w-0 items-center', className), onClick: () => show(MAIN_AGENT), children: children }));
+}
+/*
+ * The way down after the chat's title, each step a way back up, and a close that goes straight back
+ * to the main agent. A bar that does not draw the title itself passes it, and it opens the way.
+ * Nothing while the main agent itself is on screen.
+ */
+export function SubagentBreadcrumb({ chatId, title, className }) {
+    const { t } = useTranslation('agent-chat');
+    const { trail, show } = useSubagentTrail(chatId);
+    const subagents = useOpenableSubagents(chatId);
+    if (trail.length === 0) {
+        return null;
+    }
+    const steps = breadcrumbOf(trail);
+    // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
+    const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0].toolUseId) : undefined;
+    return (_jsxs("nav", { "aria-label": t('subagents.title'), className: clsx('flex min-w-0 items-center gap-1 text-xs', className), children: [title !== undefined && (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(MAIN_AGENT), children: title })), steps.map((step) => (_jsxs(Fragment, { children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: "shrink-0 text-text-faint" }), step.current ? (_jsx("span", { "aria-current": "page", className: "min-w-0 truncate text-text", children: step.label })) : (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(trailTo(trail, step.depth)), children: step.label }))] }, step.depth))), shown !== undefined && _jsx(SubagentStopButton, { chatId: chatId, item: shown, size: "sm" }), _jsx(Tooltip, { label: t('subagents.backToMain'), name: true, children: _jsx("button", { type: "button", className: "icon-btn icon-btn-sm", onClick: () => show(MAIN_AGENT), children: _jsx(Icon, { icon: X, size: 14 }) }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { ChatSubagentItem } from '@ruimte/agent-contracts';
+export declare function SubagentStopButton({ chatId, item, size, className }: {
+    chatId: string;
+    item: ChatSubagentItem;
+    size?: 'sm' | 'xs';
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/SubagentStopButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Square } from 'lucide-react';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import { useChatActions } from '../actions';
+import { stopLabel, stopOf, subagentTitle } from '../subagent-list';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+/* Stops one active sub-agent of a chat, or says nothing when stopping it is not on offer. */
+export function SubagentStopButton({ chatId, item, size = 'xs', className }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const actions = useChatActions();
+    const turnRunning = useChatRow(chatId, (row) => (row?.info.activeTurnId ?? null) !== null);
+    const stop = stopOf(item, turnRunning);
+    if (stop === null) {
+        return null;
+    }
+    const send = () => {
+        void actions.stopSubagent(chatId, item.toolUseId).catch((e) => {
+            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
+        });
+    };
+    const run = () => {
+        if (stop === 'task' && item.childId !== undefined) {
+            chatHost().confirm.stopTask(id, item.childId, subagentTitle(item), send);
+            return;
+        }
+        send();
+    };
+    return (_jsx(Tooltip, { label: stopLabel(stop), name: true, children: _jsx("button", { type: "button", className: clsx('icon-btn', size === 'sm' ? 'icon-btn-sm' : 'icon-btn-xs', className), onClick: run, children: _jsx(Icon, { icon: Square, size: size === 'sm' ? 14 : 12 }) }) }));
+}

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

@@ -0,0 +1,4 @@
+export declare function SubagentTimeline({ chatId, toolUseId }: {
+    chatId: string;
+    toolUseId: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/SubagentTimeline.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ContextMenu } from '@base-ui-components/react/context-menu';
+import { useTranslation } from 'react-i18next';
+import { Bot } from 'lucide-react';
+import { deriveTimelineRows } from '../logic/timeline';
+import { INITIAL_CONVERSATION, SubagentConversation } from '../subagent-conversation';
+import { useSubagentSupport } from '../subagent-support';
+import { EMPTY_TARGET, readTimelineTarget } from '../logic/timeline-target';
+import { openBelow, useSubagentTrail } from '../subagent-view';
+import { Row } from './rows/Rows';
+import { TimelineMenuPopup } from './TimelineMenu';
+import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm';
+import { useToggleSet } from './useToggleSet';
+import { FileLinkContext } from './file-links';
+import { useChatRow } from '../../state/chats';
+import { useChatScope } from '../../scope';
+import { Button } from '@ruimte/ui/Button';
+import { EmptyState } from '@ruimte/ui/EmptyState';
+const NO_TURNS = new Set();
+/*
+ * A sub-agent's whole conversation, read back from the host and grown while it is on screen. It
+ * stands in the chat's own place, read-only, and a sub-agent it opened goes one level further down.
+ */
+export function SubagentTimeline({ chatId, toolUseId }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const { trail, show } = useSubagentTrail(chatId);
+    const [state, setState] = useState(INITIAL_CONVERSATION);
+    const controller = useRef(null);
+    const scrollRef = useRef(null);
+    const threadRef = useRef(null);
+    const [target, setTarget] = useState(EMPTY_TARGET);
+    const followRef = useRef(true);
+    const stopFollowing = useCallback(() => {
+        followRef.current = false;
+    }, []);
+    const groups = useToggleSet(stopFollowing);
+    const subagents = useToggleSet(stopFollowing);
+    // The height before older rows went in above, so the rows being read stay where they were.
+    const heightBefore = useRef(null);
+    const cwd = useChatRow(chatId, (row) => row?.info.cwd ?? null);
+    useEffect(() => {
+        const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
+        controller.current = conversation;
+        void conversation.start();
+        return () => {
+            conversation.dispose();
+            controller.current = null;
+        };
+    }, [scope, chatId, toolUseId]);
+    useEffect(() => {
+        if (state.unsupported) {
+            useSubagentSupport.getState().markUnsupported(scope.id);
+        }
+    }, [state.unsupported, scope]);
+    const rows = useMemo(() => deriveTimelineRows(state.items, { expandedGroups: groups.ids, expandedTurns: NO_TURNS, expandedSubagents: subagents.ids, activeTurnId: null }), [state.items, groups.ids, subagents.ids]);
+    useLayoutEffect(() => {
+        const element = scrollRef.current;
+        if (element === null) {
+            return;
+        }
+        if (heightBefore.current !== null) {
+            element.scrollTop += element.scrollHeight - heightBefore.current;
+            heightBefore.current = null;
+            return;
+        }
+        if (followRef.current) {
+            element.scrollTop = element.scrollHeight;
+        }
+    }, [rows, state.live]);
+    if (state.status === 'loading') {
+        return _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') });
+    }
+    if (state.status === 'failed') {
+        return _jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) });
+    }
+    const openChild = (step) => {
+        show(openBelow(trail, step));
+    };
+    const loadEarlier = () => {
+        heightBefore.current = scrollRef.current?.scrollHeight ?? null;
+        void controller.current?.loadEarlier();
+    };
+    return (_jsx(FileLinkContext.Provider, { value: cwd, children: _jsx("div", { ref: scrollRef, className: "chat-thread h-full min-h-0 overflow-auto px-4 pt-4 pb-3", onScroll: (event) => {
+                const element = event.currentTarget;
+                followRef.current = element.scrollHeight - element.scrollTop - element.clientHeight < FOLLOW_THRESHOLD_PX;
+            }, children: _jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { ref: threadRef, className: "chat-column-content", onContextMenu: (event) => setTarget(readTimelineTarget(event.target, threadRef.current, rows)), children: [state.cursor !== null && (_jsx("div", { className: "flex justify-center pb-2", children: _jsx(Button, { size: "sm", disabled: state.loadingEarlier, onClick: loadEarlier, children: state.loadingEarlier ? t('subagents.loadingEarlier') : t('subagents.loadEarlier') }) })), rows.length === 0 && !state.live && _jsx(EmptyState, { icon: Bot, children: t('rows.subagent.nothingYet') }), rows.map((row, index) => {
+                                const previous = index > 0 ? rows[index - 1] : null;
+                                return (_jsx("div", { "data-item-id": row.id, className: rowRhythm(row, previous), children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: () => undefined, toggleSubagent: subagents.toggle, openSubagent: () => undefined, openConversation: openChild }) }, row.id));
+                            }), state.live && _jsx("div", { className: "chat-live-text pt-1 text-xs", children: t('subagents.working') })] }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef })] }) }) }));
+}

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

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare function Timeline({ chatId, composer }: {
+    chatId: string;
+    composer?: ReactNode;
+}): import("react").JSX.Element;