@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/logic/scrubber.d.ts

@@ -0,0 +1,50 @@
+import type { ChatBookmark } from '@ruimte/agent-contracts';
+import type { TimelineRow } from './timeline';
+export type TickKind = 'person' | 'wake' | 'bookmark';
+export interface ScrubberTick {
+    id: string;
+    rowIndex: number;
+    kind: TickKind;
+    text: string;
+    createdAt: number;
+    turnId: string | null;
+    bookmark: ChatBookmark | null;
+}
+export declare const SCRUBBER_MIN_TICKS = 3;
+export declare const TICK_HEIGHT_PX = 2;
+export declare const STRIP_WIDTH_PX = 24;
+export declare const STRIP_INSET_PX = 8;
+export declare const ticksOf: (rows: readonly TimelineRow[], marks?: ReadonlyMap<string, ChatBookmark>) => ScrubberTick[];
+export interface TickSlot {
+    first: number;
+    last: number;
+    kind: TickKind;
+    marked: boolean;
+    found: boolean;
+    y: number;
+}
+export interface ScrubberLayout {
+    top: number;
+    pitch: number;
+    count: number;
+    slots: TickSlot[];
+}
+export declare const layoutTicks: (kinds: readonly TickKind[], height: number, marked?: readonly boolean[], found?: readonly boolean[]) => ScrubberLayout;
+export declare const tickOfRow: (ticks: readonly ScrubberTick[], rowIndex: number) => number | null;
+export declare const ticksWithHits: (ticks: readonly ScrubberTick[], hitRows: readonly number[]) => boolean[];
+export declare const messageAt: (layout: ScrubberLayout, y: number) => number | null;
+export declare const slotOf: (layout: ScrubberLayout, message: number) => number | null;
+export declare const tickWidth: (kind: TickKind, distanceFromPointer: number | null) => number;
+export interface ReadingPosition {
+    starts: readonly number[];
+    scrollTop: number;
+    visibleHeight: number;
+}
+export interface MessageRange {
+    first: number;
+    last: number;
+}
+export declare const messagesInView: ({ starts, scrollTop, visibleHeight }: ReadingPosition) => MessageRange | null;
+export declare const slotInView: (slot: TickSlot, range: MessageRange | null) => boolean;
+export declare const stepMessage: (starts: readonly number[], eligible: (index: number) => boolean, scrollTop: number, direction: -1 | 1) => number | null;
+export declare const threadPaddingLeft: (width: number, strip: boolean) => number;

package/dist/chat/logic/scrubber.js

@@ -0,0 +1,216 @@
+/* With fewer messages than this the thread is short enough to scroll through, and the strip is noise. */
+export const SCRUBBER_MIN_TICKS = 3;
+export const TICK_HEIGHT_PX = 2;
+const PITCH_PX = 8;
+const MIN_PITCH_PX = 4;
+/* The thread's content column in a view of its own (`.chat-column-content`) and the scroller's padding around it (`px-4`). */
+const CONTENT_MAX_WIDTH_PX = 768;
+const THREAD_PADDING_PX = 16;
+export const STRIP_WIDTH_PX = 24;
+/* The strip's distance from the view's left edge, and the air it keeps between itself and the thread's text. */
+export const STRIP_INSET_PX = 8;
+const STRIP_CLEARANCE_PX = STRIP_INSET_PX + STRIP_WIDTH_PX + STRIP_INSET_PX;
+const WIDTH_HOVERED_PX = 16;
+const WIDTH_NEAR_PERSON_PX = 12;
+const WIDTH_NEAR_WAKE_PX = 8;
+const WIDTH_PERSON_PX = 8;
+const WIDTH_WAKE_PX = 5;
+/* `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. */
+export const ticksOf = (rows, marks = new Map()) => rows.flatMap((row, rowIndex) => {
+    const bookmark = marks.get(row.id) ?? null;
+    if (row.kind === 'user') {
+        // A message of only attachments still has a place in the thread; its names stand in for the text.
+        const text = row.item.text !== '' ? row.item.text : (row.item.attachments ?? []).map((attachment) => attachment.name).join(', ');
+        return [{ id: row.id, rowIndex, kind: 'person', text, createdAt: row.item.createdAt, turnId: row.item.turnId, bookmark }];
+    }
+    // The other turns nobody asked for (a sub-agent that finished, the CLI going on) are no place to return to.
+    if (row.kind === 'turn-start' && ((row.turn.taskIds?.length ?? 0) > 0 || (row.turn.messageFrom?.length ?? 0) > 0)) {
+        return [{ id: row.id, rowIndex, kind: 'wake', text: row.label, createdAt: row.turn.createdAt, turnId: row.turn.id, bookmark: null }];
+    }
+    if (bookmark === null) {
+        return [];
+    }
+    if (row.kind === 'assistant') {
+        return [{ id: row.id, rowIndex, kind: 'bookmark', text: row.item.text, createdAt: row.item.createdAt, turnId: row.item.turnId, bookmark }];
+    }
+    // The fold of a turn a marked reply is hidden in; the card reads the start the bookmark kept.
+    const turnId = row.kind === 'turn-fold' ? row.turn.id : null;
+    return [{ id: row.id, rowIndex, kind: 'bookmark', text: bookmark.excerpt, createdAt: bookmark.createdAt, turnId, bookmark }];
+});
+/* `marked` and `found` say per message whether it has a bookmark and whether a find hit falls under it; absent, none has. */
+export const layoutTicks = (kinds, height, marked = [], found = []) => {
+    const count = kinds.length;
+    const room = Math.max(0, Math.floor(height));
+    const slotCount = Math.min(count, Math.floor(room / MIN_PITCH_PX));
+    if (slotCount === 0) {
+        return { top: 0, pitch: MIN_PITCH_PX, count, slots: [] };
+    }
+    const pitch = Math.min(PITCH_PX, Math.floor(room / slotCount));
+    const top = Math.floor((room - slotCount * pitch) / 2);
+    const inset = Math.floor((pitch - TICK_HEIGHT_PX) / 2);
+    const slots = [];
+    for (let i = 0; i < slotCount; i++) {
+        const first = Math.floor((i * count) / slotCount);
+        const last = Math.floor(((i + 1) * count) / slotCount) - 1;
+        // A merged tick is the person's as soon as one message in it is, since those are what the strip is for.
+        const run = kinds.slice(first, last + 1);
+        const kind = run.includes('person') ? 'person' : run.includes('bookmark') ? 'bookmark' : 'wake';
+        slots.push({
+            first,
+            last,
+            kind,
+            marked: marked.slice(first, last + 1).includes(true),
+            found: found.slice(first, last + 1).includes(true),
+            y: top + i * pitch + inset
+        });
+    }
+    return { top, pitch, count, slots };
+};
+/*
+ * The tick whose stretch of the thread a row falls in: a tick stands for its row and every row up to
+ * the next tick's, and a row above the first tick counts under the first. Null without ticks.
+ */
+export const tickOfRow = (ticks, rowIndex) => {
+    if (ticks.length === 0) {
+        return null;
+    }
+    let low = 0;
+    let high = ticks.length - 1;
+    let found = 0;
+    while (low <= high) {
+        const middle = (low + high) >> 1;
+        if (ticks[middle].rowIndex <= rowIndex) {
+            found = middle;
+            low = middle + 1;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    return found;
+};
+/* Per tick, whether any of the rows has a find hit in its stretch. */
+export const ticksWithHits = (ticks, hitRows) => {
+    const found = ticks.map(() => false);
+    for (const row of hitRows) {
+        const tick = tickOfRow(ticks, row);
+        if (tick !== null) {
+            found[tick] = true;
+        }
+    }
+    return found;
+};
+/* The message under a height in the strip; inside a merged tick the height picks among its messages. */
+export const messageAt = (layout, y) => {
+    const { slots, top, pitch } = layout;
+    if (slots.length === 0) {
+        return null;
+    }
+    const offset = y - top;
+    const index = Math.min(slots.length - 1, Math.max(0, Math.floor(offset / pitch)));
+    const slot = slots[index];
+    const fraction = Math.min(1, Math.max(0, (offset - index * pitch) / pitch));
+    return slot.first + Math.min(slot.last - slot.first, Math.floor(fraction * (slot.last - slot.first + 1)));
+};
+export const slotOf = (layout, message) => {
+    const { slots } = layout;
+    let low = 0;
+    let high = slots.length - 1;
+    while (low <= high) {
+        const middle = (low + high) >> 1;
+        const slot = slots[middle];
+        if (message < slot.first) {
+            high = middle - 1;
+        }
+        else if (message > slot.last) {
+            low = middle + 1;
+        }
+        else {
+            return middle;
+        }
+    }
+    return null;
+};
+/*
+ * At rest every tick of a kind is as long as the next, so length never competes with the brightness
+ * that says what is on screen. Only a pointer on the strip magnifies, the way a dock does, one step out.
+ */
+export const tickWidth = (kind, distanceFromPointer) => {
+    if (distanceFromPointer === 0) {
+        return WIDTH_HOVERED_PX;
+    }
+    if (distanceFromPointer === 1) {
+        return kind === 'wake' ? WIDTH_NEAR_WAKE_PX : WIDTH_NEAR_PERSON_PX;
+    }
+    return kind === 'wake' ? WIDTH_WAKE_PX : WIDTH_PERSON_PX;
+};
+/* The last index whose start lies at or above a line, or -1. The starts only grow. */
+const lastAtOrAbove = (starts, line) => {
+    let low = 0;
+    let high = starts.length - 1;
+    let found = -1;
+    while (low <= high) {
+        const middle = (low + high) >> 1;
+        if (starts[middle] <= line) {
+            found = middle;
+            low = middle + 1;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    return found;
+};
+/*
+ * The messages on screen. A message counts from its own start to the start of the next one, so the
+ * question whose answer fills the screen is in view even after it scrolled out at the top.
+ */
+export const messagesInView = ({ starts, scrollTop, visibleHeight }) => {
+    const bottom = scrollTop + visibleHeight;
+    if (starts.length === 0 || visibleHeight <= 0 || starts[0] >= bottom) {
+        return null;
+    }
+    const first = Math.max(0, lastAtOrAbove(starts, scrollTop));
+    let last = lastAtOrAbove(starts, bottom);
+    // A row that starts on the very last line has not a pixel on screen yet.
+    if (starts[last] >= bottom) {
+        last--;
+    }
+    return { first, last: Math.max(first, last) };
+};
+/* Whether a drawn tick covers any of the messages on screen. */
+export const slotInView = (slot, range) => range !== null && slot.last >= range.first && slot.first <= range.last;
+/*
+ * The message a step back or forward lands on, among the ones `eligible` allows. A jump puts a
+ * message's start at the top, so back from there is the one before it, and back from the middle of
+ * a long answer is the question it belongs to. A pixel of slack absorbs rounding in the scroller.
+ */
+export const stepMessage = (starts, eligible, scrollTop, direction) => {
+    if (direction === -1) {
+        for (let i = lastAtOrAbove(starts, scrollTop - 1.5); i >= 0; i--) {
+            if (eligible(i)) {
+                return i;
+            }
+        }
+        return null;
+    }
+    for (let i = lastAtOrAbove(starts, scrollTop + 1) + 1; i < starts.length; i++) {
+        if (eligible(i)) {
+            return i;
+        }
+    }
+    return null;
+};
+/*
+ * The left padding of the thread in a view that draws the strip at its left edge. A wide view keeps
+ * the usual padding, since its centered column already clears the strip; a narrower one pads until
+ * the column's text starts clear of it, so nothing is ever drawn under the strip.
+ */
+export const threadPaddingLeft = (width, strip) => {
+    if (!strip) {
+        return THREAD_PADDING_PX;
+    }
+    // The column's margin is half of what the padding leaves, so the padding counts the clearance twice.
+    const padding = 2 * STRIP_CLEARANCE_PX + CONTENT_MAX_WIDTH_PX + THREAD_PADDING_PX - Math.floor(width);
+    return Math.min(STRIP_CLEARANCE_PX, Math.max(THREAD_PADDING_PX, padding));
+};

package/dist/chat/logic/timeline-copy.d.ts

@@ -0,0 +1,4 @@
+import type { TimelineRow } from './timeline';
+export declare const stripMarkdown: (text: string) => string;
+export declare const messageTextOf: (row: TimelineRow) => string | null;
+export declare const markdownOf: (row: TimelineRow) => string | null;

package/dist/chat/logic/timeline-copy.js

@@ -0,0 +1,51 @@
+/*
+ * What a row of the thread puts on the clipboard. An answer is markdown on the wire and rendered
+ * text on the screen, so copying it as text has to undo the marks the renderer swallowed; the
+ * source itself stays available as "Copy as markdown".
+ */
+/*
+ * The marks that only exist to be rendered come off, what they marked stays. `_` is left alone on
+ * purpose: it is a letter in half the identifiers an agent writes, and no italic is worth mangling
+ * `file_path`.
+ */
+export const stripMarkdown = (text) => text
+    .replace(/^ *```[^\n]*\n?/gm, '')
+    .replace(/^ *(#{1,6}) +/gm, '')
+    .replace(/^ *> ?/gm, '')
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, '$2')
+    .replace(/\*(?=\S)([^*\n]*\S)\*/g, '$1')
+    .replace(/`+([^`]+)`+/g, '$1')
+    .trim();
+/* What a tool call has to show for itself: what it answered, or what it has answered so far. */
+const outputOf = (tool) => tool.output ?? tool.progress?.output ?? null;
+/* The whole item under the pointer as plain text, or null for a row that carries no message. */
+export const messageTextOf = (row) => {
+    switch (row.kind) {
+        case 'user':
+            return row.item.text || null;
+        case 'assistant':
+            return stripMarkdown(row.item.text) || null;
+        case 'report':
+            return stripMarkdown(row.text) || null;
+        case 'thinking':
+            return row.item.text || null;
+        case 'work':
+        case 'work-live':
+        case 'workflow':
+            return outputOf(row.tool);
+        case 'work-group': {
+            const outputs = row.tools.map(outputOf).filter((output) => output !== null);
+            return outputs.length > 0 ? outputs.join('\n\n') : null;
+        }
+        case 'subagent':
+            return row.item.result ?? row.item.summary ?? null;
+        case 'note':
+            return row.text;
+        default:
+            return null;
+    }
+};
+/* The markdown an answer was written in; every other row has none to copy. */
+export const markdownOf = (row) => row.kind === 'assistant' ? row.item.text || null : row.kind === 'report' ? row.text || null : null;

package/dist/chat/logic/timeline-target.d.ts

@@ -0,0 +1,12 @@
+import type { ChatItem } from '@ruimte/agent-contracts';
+import type { TimelineRow } from './timeline';
+export interface TimelineTarget {
+    selection: string;
+    row: TimelineRow | null;
+    code: string | null;
+    path: string | null;
+    line: number | null;
+}
+export declare const EMPTY_TARGET: TimelineTarget;
+export declare const withCurrentText: (rows: TimelineRow[], items: Record<string, ChatItem> | undefined) => TimelineRow[];
+export declare const readTimelineTarget: (element: HTMLElement, scroller: HTMLElement | null, rows: TimelineRow[]) => TimelineTarget;

package/dist/chat/logic/timeline-target.js

@@ -0,0 +1,34 @@
+import { selectionWithin } from '@ruimte/ui/selection';
+export const EMPTY_TARGET = { selection: '', row: null, code: null, path: null, line: null };
+/*
+ * The rows with the text a reply or a thought holds now. Rows are derived from the structure of a
+ * thread, which a delta leaves alone, so a row still carries the text it was derived with.
+ */
+export const withCurrentText = (rows, items) => {
+    if (!items) {
+        return rows;
+    }
+    return rows.map((row) => {
+        const item = items[row.id];
+        if (row.kind === 'assistant' && item?.kind === 'assistant') {
+            return { ...row, item };
+        }
+        if (row.kind === 'thinking' && item?.kind === 'thinking') {
+            return { ...row, item };
+        }
+        return row;
+    });
+};
+/* The row a click landed in is the one whose id it sits under; the rest comes from the same walk up. */
+export const readTimelineTarget = (element, scroller, rows) => {
+    const id = element.closest('[data-item-id]')?.dataset.itemId;
+    const file = element.closest('[data-file-path]');
+    const line = Number(file?.dataset.fileLine);
+    return {
+        selection: selectionWithin(scroller),
+        row: rows.find((row) => row.id === id) ?? null,
+        code: element.closest('pre')?.textContent ?? null,
+        path: file?.dataset.filePath ?? null,
+        line: Number.isFinite(line) && line > 0 ? line : null
+    };
+};

package/dist/chat/logic/timeline.d.ts

@@ -0,0 +1,110 @@
+import type { ChatApprovalItem, ChatAssistantItem, ChatCheckpointDiff, ChatItem, ChatQuestionItem, ChatSubagentItem, ChatThinkingItem, ChatToolItem, ChatTurnItem, ChatUserItem, ChatWorkflow } from '@ruimte/agent-contracts';
+export interface SubagentBranch {
+    id: string;
+    item: ChatSubagentItem;
+    children: ChatItem[];
+    nested: SubagentBranch[];
+    expanded: boolean;
+}
+export type TimelineRow = {
+    kind: 'user';
+    id: string;
+    item: ChatUserItem;
+} | {
+    kind: 'turn-start';
+    id: string;
+    turn: ChatTurnItem;
+    label: string;
+} | {
+    kind: 'assistant';
+    id: string;
+    item: ChatAssistantItem;
+} | {
+    kind: 'report';
+    id: string;
+    text: string;
+} | {
+    kind: 'thinking';
+    id: string;
+    item: ChatThinkingItem;
+} | {
+    kind: 'work';
+    id: string;
+    tool: ChatToolItem;
+} | {
+    kind: 'work-group';
+    id: string;
+    tools: ChatToolItem[];
+    summary: string;
+    expanded: boolean;
+} | {
+    kind: 'work-live';
+    id: string;
+    tool: ChatToolItem;
+} | {
+    kind: 'workflow';
+    id: string;
+    tool: ChatToolItem;
+    workflow: ChatWorkflow;
+} | ({
+    kind: 'subagent';
+} & SubagentBranch) | {
+    kind: 'approval';
+    id: string;
+    item: ChatApprovalItem;
+} | {
+    kind: 'question';
+    id: string;
+    item: ChatQuestionItem;
+} | {
+    kind: 'note';
+    id: string;
+    level: 'info' | 'warning' | 'error';
+    text: string;
+    from?: string;
+} | {
+    kind: 'compaction';
+    id: string;
+    preTokens: number | null;
+} | {
+    kind: 'changed-files';
+    id: string;
+    turnId: string;
+    tools: ChatToolItem[];
+    diff: ChatCheckpointDiff | null;
+    checkpoint: boolean;
+} | {
+    kind: 'turn-fold';
+    id: string;
+    turn: ChatTurnItem;
+    label: string;
+    work: string[];
+    hiddenCount: number;
+    expanded: boolean;
+} | {
+    kind: 'forks';
+    id: string;
+    turnId: string;
+} | {
+    kind: 'working';
+    id: string;
+    startedAt: number;
+};
+interface TimelineOptions {
+    expandedGroups: ReadonlySet<string>;
+    expandedTurns: ReadonlySet<string>;
+    expandedSubagents: ReadonlySet<string>;
+    activeTurnId: string | null;
+    forkedTurns?: ReadonlySet<string>;
+}
+export declare const isBlock: (row: TimelineRow) => boolean;
+export declare const summarizeGroup: (tools: ChatToolItem[]) => string;
+export declare const summarizeTurn: (tools: readonly ChatToolItem[]) => string[];
+export declare const agentTurnLabel: (turn: ChatTurnItem) => string;
+export declare const turnLabel: (turn: ChatTurnItem, items?: readonly ChatItem[]) => string;
+export declare const findSubagentBranch: (rows: readonly TimelineRow[], toolUseId: string) => {
+    index: number;
+    branch: SubagentBranch;
+} | null;
+export declare const deriveTimelineRows: (items: ChatItem[], options: TimelineOptions) => TimelineRow[];
+export {};