@adecore/agents-react 0.23.0 → 0.24.0

package/dist/chat/ui/markdown-blocks.js

@@ -1,40 +1,176 @@
 const FENCE = /^([ \t]*)(`{3,}|~{3,})(.*)$/;
+const CLOSING_FENCE = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
 // Spaces and tabs only: a line that holds a no-break space is text to markdown, not a blank line.
 const BLANK = /^[ \t]*$/;
 // A line that continues what stood before the blank line: an indented paragraph of a list item, or
 // the next item of a loose list. Splitting there would change what the markdown means.
 const CONTINUES = /^([ \t]|[-*+][ \t]|\d+[.)][ \t])/;
+const LIST_MARKER = /^[ \t]*(?:([-*+])|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/;
+// A list item with nothing after its marker.
+const EMPTY_ITEM = /^ {0,3}(?:[-*+]|\d{1,9}[.)])[ \t]*$/;
+const THEMATIC_BREAK = /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
+// A heading or a quote, which ends a list item instead of continuing its paragraph.
+const ENDS_ITEM = /^ {0,3}(?:#{1,6}(?:[ \t]|$)|>)/;
+const HTML_START = /^ {0,3}<[A-Za-z/!?]/;
+// The HTML that runs on until a marker rather than a blank line, with that marker.
+const HTML_UNTIL = [
+    [/^ {0,3}<(?:pre|script|style|textarea)(?:[ \t>]|$)/i, /<\/(?:pre|script|style|textarea)>/i],
+    [/^ {0,3}<!--/, /-->/],
+    [/^ {0,3}<\?/, /\?>/],
+    [/^ {0,3}<![A-Za-z]/, />/],
+    [/^ {0,3}<!\[CDATA\[/, /\]\]>/]
+];
 // A reference or footnote definition may be used anywhere in the text, so a block cannot stand alone.
 const DEFINITION = /^ {0,3}\[[^\]]+\]:/m;
+// Markdown ends a line at a lone carriage return too, which a split at line feeds would not see.
+const LONE_RETURN = /\r(?!\n|$)/;
 // How much deeper than its opening a closing fence may sit; deeper than that it is a line of code.
 const CLOSING_INDENT = 3;
+// From four columns in, a line is indented code rather than the start of a block.
+const CODE_INDENT = 4;
+const TAB_STOP = 4;
 // A section title: an ATX heading, or a line of only bold text, which models write as a heading too.
 const HEADING = /^ {0,3}#{1,6}(?:[ \t]|$)/;
 const BOLD_LINE = /^ {0,3}\*\*(?:[^*]|\*(?!\*))+\*\*:?[ \t]*$/;
 /*
  * A reply cut into blocks at blank lines outside a code fence, so each block parses on its own and
- * only the one still growing is parsed again. Joined back together the blocks are the text.
+ * only the one still growing is parsed again. A code fence at the top level is a block of its own,
+ * through its closing line and the blank lines under it, so it can be drawn without parsing at all.
+ * Joined back together the blocks are the text.
  */
 export function splitMarkdownBlocks(text) {
-    if (DEFINITION.test(text)) {
+    if (DEFINITION.test(text) || LONE_RETURN.test(text)) {
         return [{ text, openFence: isFenceOpenAtEnd(text) }];
     }
     const lines = text.split('\n');
     const blocks = [];
     let start = 0;
     let offset = 0;
-    let fence = null;
+    // The fence as a reading line by line sees it, blind to lists and indented code. A blank line is
+    // only cut at where this reading agrees, so every such cut is one this split made before it
+    // followed fences any further.
+    let lineFence = null;
     let afterBlank = false;
-    lines.forEach((line, index) => {
-        if (fence === null && afterBlank && !BLANK.test(line) && !CONTINUES.test(line)) {
-            blocks.push({ text: text.slice(start, offset), openFence: false });
-            start = offset;
+    // A fence inside a list item.
+    let fence = null;
+    let top = null;
+    // A top-level fence that has closed; its block takes the blank lines under it.
+    let closed = null;
+    let item = null;
+    // The marker that ends the raw HTML the line stands in.
+    let html = null;
+    // Whether the top level is still known here. Past HTML, or a line that may or may not end a list
+    // item, a fence is left inside the block it stands in, which markdown parses as a whole.
+    let known = true;
+    // Where the line above starts when it is blank.
+    let blankAbove = null;
+    const cutAt = (end) => {
+        if (end > start) {
+            blocks.push({ text: text.slice(start, end), openFence: false });
         }
-        fence = nextFence(fence, line);
-        afterBlank = fence === null && BLANK.test(line) && index > 0;
+        start = end;
+    };
+    for (const [index, line] of lines.entries()) {
+        const at = offset;
         offset += line.length + 1;
-    });
-    blocks.push({ text: text.slice(start), openFence: fence !== null });
+        const content = withoutReturn(line);
+        const blank = BLANK.test(line);
+        // Blank to markdown, which a line ending in a carriage return is too.
+        const empty = BLANK.test(content);
+        const blankCut = lineFence === null && afterBlank && !blank && !CONTINUES.test(line);
+        lineFence = nextFence(lineFence, line);
+        afterBlank = lineFence === null && blank && index > 0;
+        if (top !== null) {
+            if (closesFence(top.marker, content)) {
+                closed = { fence: top, source: text.slice(top.from, at + content.length) };
+                top = null;
+            }
+            else if (index < lines.length - 1 || line !== '') {
+                // The empty line after a line ending at the end of the text is no line of the fence.
+                top.body += (top.ending ?? '') + outdent(content, top.indent);
+                top.ending = line.length > content.length ? '\r\n' : '\n';
+            }
+            continue;
+        }
+        if (closed !== null) {
+            if (empty) {
+                continue;
+            }
+            blocks.push(fenceBlock(text.slice(start, at), closed.fence, closed.source, true));
+            start = at;
+            closed = null;
+        }
+        if (html !== null) {
+            // Raw HTML holds no fence and no blank line to cut at until its marker.
+            if (html.test(content)) {
+                html = null;
+            }
+            continue;
+        }
+        if (known && fence !== null && item !== null && !empty && columns(content) < item.column) {
+            // Code is no paragraph a line may continue lazily, so a line left of the item's content ends
+            // the item and its code. A next item of the same list keeps the list going.
+            fence = null;
+            if (!LIST_MARKER.test(content)) {
+                item = null;
+            }
+        }
+        if (blankCut && fence === null) {
+            cutAt(at);
+        }
+        const above = index > 0 ? withoutReturn(lines[index - 1]) : '';
+        const opening = known && fence === null ? openingFence(content) : null;
+        if (opening !== null && EMPTY_ITEM.test(above)) {
+            // Markdown reads an empty item right above a fence as a list or as text depending on what
+            // stands before it, so the two stay in one block.
+            known = false;
+        }
+        else if (opening !== null && opening.indent < CODE_INDENT && (item === null || opening.indent < item.column)) {
+            // The blank line right above goes with the fence. Code in a list item this fence ends takes
+            // every blank line under it but the last, and at the end of a block it would take them all.
+            cutAt(blankAbove !== null && blankAbove > start ? blankAbove : at);
+            // Three columns at most, so the indentation is spaces.
+            top = { ...opening, from: at + opening.indent, body: '', ending: null };
+            item = null;
+            blankAbove = null;
+            continue;
+        }
+        if (known && item?.empty === true && empty) {
+            // An item with nothing on its first line ends at a blank line right under it.
+            item = null;
+        }
+        if (known && fence === null && !empty) {
+            // A fence in an item is followed only while the item is known to be open, and less than four
+            // columns deeper than its content: deeper it is code of the item, or of an item inside it.
+            if (opening !== null && item !== null && (!item.certain || opening.indent < item.column || opening.indent >= item.column + CODE_INDENT)) {
+                known = false;
+            }
+            else if (opening === null) {
+                item = nextItem(item, content, index > 0 && !BLANK.test(above));
+            }
+        }
+        if (fence === null && HTML_START.test(content)) {
+            known = false;
+            const until = HTML_UNTIL.find(([begins]) => begins.test(content))?.[1];
+            html = until !== undefined && !until.test(content) ? until : null;
+        }
+        if (known && (fence !== null || item !== null)) {
+            fence = nextFence(fence, fence === null ? itemContent(content) : content);
+        }
+        if (item?.empty === true && !empty && columns(content) >= item.column) {
+            item = { ...item, empty: false };
+        }
+        blankAbove = empty ? at : null;
+    }
+    if (top !== null) {
+        blocks.push(fenceBlock(text.slice(start), top, text.slice(top.from), false));
+    }
+    else if (closed !== null) {
+        blocks.push(fenceBlock(text.slice(start), closed.fence, closed.source, true));
+    }
+    else {
+        blocks.push({ text: text.slice(start), openFence: (known ? fence : lineFence) !== null });
+    }
     return blocks;
 }
 /*
@@ -97,7 +233,119 @@ function nextFence(fence, line) {
 function isFenceOpenAtEnd(text) {
     let fence = null;
     for (const line of text.split('\n')) {
-        fence = nextFence(fence, line);
+        fence = nextFence(fence, withoutReturn(line));
     }
     return fence !== null;
 }
+/* The fence a line opens wherever it stands, with its indentation in columns. */
+function openingFence(content) {
+    const match = FENCE.exec(content);
+    if (!match) {
+        return null;
+    }
+    const marker = match[2];
+    const info = match[3].replace(/^[ \t]+|[ \t]+$/g, '');
+    // A backtick fence's info string may not hold a backtick, or the line is inline code.
+    if (marker[0] === '`' && info.includes('`')) {
+        return null;
+    }
+    return { marker, info, indent: columns(content), direct: !/[\\&]/.test(info.split(/[ \t]/, 1)[0]) };
+}
+/* A line without the carriage return of a CRLF line ending. */
+function withoutReturn(line) {
+    return line.endsWith('\r') ? line.slice(0, -1) : line;
+}
+function closesFence(marker, content) {
+    const run = CLOSING_FENCE.exec(content)?.[1];
+    return run !== undefined && run[0] === marker[0] && run.length >= marker.length;
+}
+function fenceBlock(text, fence, source, closed) {
+    if (!fence.direct) {
+        return { text, openFence: !closed };
+    }
+    return { text, openFence: !closed, fence: { marker: fence.marker, info: fence.info, body: fence.body, closed, source } };
+}
+/* The list item a line that is neither blank nor a fence leaves open, as far as a fence needs to know. */
+function nextItem(item, content, underLine) {
+    const indent = columns(content);
+    if (item !== null && indent >= item.column) {
+        return item;
+    }
+    if (THEMATIC_BREAK.test(content) || ENDS_ITEM.test(content)) {
+        return null;
+    }
+    const marker = indent < CODE_INDENT ? itemMarker(content) : null;
+    if (marker === null) {
+        if (item === null || !underLine) {
+            return null;
+        }
+        // A line right under an item may continue its paragraph, or follow an item that ends in something else.
+        return { ...item, certain: false };
+    }
+    // Right under another line, only a bullet or a 1 with text after it surely starts a list; anything
+    // else may be text of a paragraph above.
+    const certain = !underLine || (item !== null && item.certain && item.kind === marker.kind) || (marker.first && marker.rest !== '');
+    return { column: marker.column, kind: marker.kind, certain, empty: marker.rest === '' };
+}
+/* The marker a list item starts with: its kind, whether it may start a list under text, and the column its content starts at. */
+function itemMarker(content) {
+    const match = LIST_MARKER.exec(content);
+    if (match === null) {
+        return null;
+    }
+    const [, bullet, number, delimiter, spacing = '', rest = ''] = match;
+    const indent = columns(content);
+    const width = bullet !== undefined ? 1 : number.length + 1;
+    // The content starts after the spaces behind the marker, unless there are five or more: then the
+    // item starts with indented code one column after the marker.
+    const gap = rest === '' ? 1 : columns(spacing, indent + width);
+    const column = indent + width + (gap > CODE_INDENT ? 1 : gap);
+    return { kind: bullet ?? delimiter, first: bullet !== undefined || Number(number) === 1, column, rest };
+}
+/* A list item's line with its marker as spaces, so a fence on that line is seen where the item's content starts. */
+function itemContent(content) {
+    const marker = itemMarker(content);
+    return marker === null ? content : ' '.repeat(marker.column) + marker.rest;
+}
+/* The columns of the indentation of a line, which starts at column `from`; a tab reaches to the next stop of four. */
+function columns(line, from = 0) {
+    let column = from;
+    for (const character of line) {
+        if (character === '\t') {
+            column += TAB_STOP - (column % TAB_STOP);
+        }
+        else if (character === ' ') {
+            column += 1;
+        }
+        else {
+            break;
+        }
+    }
+    return column - from;
+}
+/*
+ * A line of a fence less up to `indent` columns of indentation. A tab reaches to the next stop of
+ * four, and what of it lies past `indent` stays as spaces, as markdown reads it.
+ */
+function outdent(line, indent) {
+    let column = 0;
+    let index = 0;
+    while (column < indent && index < line.length) {
+        const character = line[index];
+        if (character === '\t') {
+            const stop = column + TAB_STOP - (column % TAB_STOP);
+            if (stop > indent) {
+                return ' '.repeat(stop - indent) + line.slice(index + 1);
+            }
+            column = stop;
+        }
+        else if (character === ' ') {
+            column += 1;
+        }
+        else {
+            break;
+        }
+        index += 1;
+    }
+    return line.slice(index);
+}

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

@@ -0,0 +1,23 @@
+import type { MermaidConfig } from 'mermaid';
+export interface MermaidColors {
+    ground: string;
+    node: string;
+    nodeBorder: string;
+    text: string;
+    line: string;
+    cluster: string;
+    clusterBorder: string;
+    note: string;
+}
+export declare const MERMAID_TOKENS: Readonly<Record<keyof MermaidColors, string>>;
+export declare function mermaidConfig(colors: MermaidColors, dark: boolean, font: {
+    family: string;
+    size: string;
+}): MermaidConfig;
+export interface SizedSvg {
+    svg: string;
+    width: number;
+    height: number;
+}
+export declare function sizedSvg(svg: string): SizedSvg | null;
+export declare function svgDataUrl(svg: string): string;

package/dist/chat/ui/mermaid.js

@@ -0,0 +1,93 @@
+/* The token each color reads. Borders carry an alpha, so they are resolved over the ground. */
+export const MERMAID_TOKENS = {
+    ground: '--chat-code-bg',
+    node: '--surface-raised',
+    nodeBorder: '--border-strong',
+    text: '--text',
+    line: '--text-muted',
+    cluster: '--surface',
+    clusterBorder: '--border',
+    note: '--accent-soft'
+};
+// Mermaid's own list plus what keeps a diagram in the theme and out of HTML: a directive in the text cannot change these.
+const SECURE_KEYS = [
+    'secure',
+    'securityLevel',
+    'startOnLoad',
+    'maxTextSize',
+    'maxEdges',
+    'suppressErrorRendering',
+    'htmlLabels',
+    'theme',
+    'themeVariables',
+    'themeCSS',
+    'darkMode',
+    'fontFamily'
+];
+/*
+ * Strict: no HTML in labels, no click handlers, no links that run script. What comes out is drawn as an
+ * image as well, which never runs script and loads nothing, whatever the text of the diagram says.
+ */
+export function mermaidConfig(colors, dark, font) {
+    return {
+        startOnLoad: false,
+        securityLevel: 'strict',
+        htmlLabels: false,
+        suppressErrorRendering: true,
+        secure: SECURE_KEYS,
+        theme: 'base',
+        darkMode: dark,
+        fontFamily: font.family,
+        themeVariables: {
+            darkMode: dark,
+            fontFamily: font.family,
+            fontSize: font.size,
+            background: colors.ground,
+            primaryColor: colors.node,
+            primaryTextColor: colors.text,
+            primaryBorderColor: colors.nodeBorder,
+            secondaryColor: colors.note,
+            tertiaryColor: colors.cluster,
+            mainBkg: colors.node,
+            nodeBorder: colors.nodeBorder,
+            textColor: colors.text,
+            titleColor: colors.text,
+            lineColor: colors.line,
+            clusterBkg: colors.cluster,
+            clusterBorder: colors.clusterBorder,
+            edgeLabelBackground: colors.ground,
+            noteBkgColor: colors.note,
+            noteTextColor: colors.text,
+            noteBorderColor: colors.nodeBorder
+        }
+    };
+}
+const ROOT = /<svg\b[^>]*>/;
+const VIEW_BOX = /\sviewBox="([^"]*)"/;
+const SIZE_ATTRIBUTES = /\s(?:width|height|style)="[^"]*"/g;
+/*
+ * The diagram at the size it was laid out at. Mermaid fits it to the width of its container instead,
+ * which an image does not have, so the root takes the size its view box names. Null for anything
+ * without one.
+ */
+export function sizedSvg(svg) {
+    const root = ROOT.exec(svg);
+    const viewBox = root === null ? null : VIEW_BOX.exec(root[0]);
+    if (root === null || viewBox === null) {
+        return null;
+    }
+    const [, , boxWidth, boxHeight] = viewBox[1]
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (!Number.isFinite(boxWidth) || !Number.isFinite(boxHeight) || boxWidth <= 0 || boxHeight <= 0) {
+        return null;
+    }
+    const width = Math.ceil(boxWidth);
+    const height = Math.ceil(boxHeight);
+    const tag = root[0].replace(SIZE_ATTRIBUTES, '').replace(/^<svg\b/, `<svg width="${width}" height="${height}"`);
+    return { svg: svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length), width, height };
+}
+export function svgDataUrl(svg) {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}

package/dist/chat/ui/rows/ForksRow.js

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ChevronRight, GitFork } from 'lucide-react';
 import { useForkIdsAfter } from '../../forks.js';
 import { ROW_GUTTER } from '../icons.js';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { Icon, Menu } from '@adecore/ui';
 const LINE = '-mx-1 mb-0.5 flex h-7 items-center gap-2 rounded-md px-1 text-xs text-text-muted';
 const LINK = `${LINE} hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-hover data-[popup-open]:text-text`;
@@ -28,11 +28,13 @@ function ForksLabel({ label, link = true }) {
 }
 // A fork no longer in this project has nowhere to lead, so it only says it is there.
 function OneFork({ forkId, label }) {
-    const place = chatHost().useChatPlace(forkId);
+    const host = useChatHost();
+    const place = host.useChatPlace(forkId);
     return (_jsx("div", { className: "flex", children: place.title === null ? (_jsx("span", { className: LINE, children: _jsx(ForksLabel, { label: label, link: false }) })) : (_jsx("button", { className: LINK, onClick: place.go, children: _jsx(ForksLabel, { label: label }) })) }));
 }
 function ForkItem({ forkId }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = chatHost().useChatPlace(forkId);
+    const place = host.useChatPlace(forkId);
     return (_jsxs(Menu.Item, { disabled: place.title === null, onClick: place.go, children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", _jsx("span", { className: "truncate", children: place.title ?? t('fork.pill.label') })] }));
 }

package/dist/chat/ui/rows/GeneratedImageRow.js

@@ -4,14 +4,14 @@ import clsx from 'clsx';
 import { Trans, useTranslation } from 'react-i18next';
 import { Check, Copy, Ellipsis, ExternalLink, FolderDown, ImageIcon, Maximize2 } from 'lucide-react';
 import { Button, ButtonGroup, copyText, ErrorBoundary, FileIcon, Icon, IconButton, Menu, Surface } from '@adecore/ui';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 import { formatBytes } from '../../attachments.js';
 import { attachmentAspect, generatedImageView } from '../../logic/generated-image.js';
 import { toolStartedAt } from '../../logic/tools.js';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips.js';
-import { openFileLink, useFileLinkCwd } from '../file-links.js';
+import { useFileLinkCwd, useOpenFileLink } from '../file-links.js';
 import { ImageThumb } from '../ImageView.js';
 import { ROW_GUTTER } from '../icons.js';
 import { RunningFor, WorkRow } from './WorkRows.js';
@@ -50,8 +50,10 @@ function HeadLine({ label, detail, live, startedAt }) {
 function SavedFile({ path }) {
     const cwd = useFileLinkCwd();
     const { id } = useChatScope();
+    const { fileLinks } = useChatHost();
+    const openFileLink = useOpenFileLink();
     const chip = (_jsxs(_Fragment, { children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate", children: path })] }));
-    if (chatHost().fileLinks === null) {
+    if (fileLinks === null) {
         return _jsx("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), children: chip });
     }
     return (_jsx("button", { type: "button", className: clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'hover:brightness-95'), "data-file-path": path, onClick: () => openFileLink(cwd, { path, directory: false }, id), children: chip }));
@@ -59,7 +61,7 @@ function SavedFile({ path }) {
 function ReadyImage({ chatId, attachment, prompt, transparent }) {
     const { t } = useTranslation('agent-chat');
     const { id: scopeId } = useChatScope();
-    const { attachments } = chatHost();
+    const { attachments } = useChatHost();
     const source = attachments.useUrl(scopeId, chatId, attachment.id);
     const savedKey = `${scopeId}\n${chatId}\n${attachment.id}`;
     const [lightbox, setLightbox] = useState(false);

package/dist/chat/ui/rows/MessageRows.d.ts

@@ -19,6 +19,10 @@ export declare function ThinkingRow({ chatId, item: derived }: {
     chatId: string;
     item: ChatThinkingItem;
 }): import("react").JSX.Element;
+export declare function LiveThoughtRow({ chatId, item: derived }: {
+    chatId: string;
+    item: ChatThinkingItem;
+}): import("react").JSX.Element | null;
 export declare function NoteRow({ id, level, text, from }: {
     id: string;
     level: 'info' | 'warning' | 'error';

package/dist/chat/ui/rows/MessageRows.js

@@ -6,21 +6,22 @@ import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQ
 import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments.js';
 import { useChatRow, useCurrentItem } from '../../../state/chats.js';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { splitQuote } from '../../quote.js';
 import { jumpToTimelineItem } from '../../timeline-scroll.js';
 import { useProviders } from '../../../state/providers.js';
 import { ChatReferenceChip } from '../ChatReferenceChip.js';
 import { ImageThumb } from '../ImageView.js';
-import { MessageMarkdown, ReplyMarkdown } from '../Markdown.js';
+import { Markdown, MessageMarkdown, ReplyMarkdown } from '../Markdown.js';
 import { FadingWords } from '../FadingWords.js';
 import { settledBlocksText } from '../markdown-blocks.js';
 import { WHOLE_FADE_CLASS } from '../rehype-fade.js';
 import { useRevealedText } from '../reveal.js';
 import { formatAgo, formatElapsedShort, formatMoment, formatTokens } from '@adecore/ui/format';
-import { Icon, Tooltip, useTickingText } from '@adecore/ui';
-import { toolSummary } from '../../logic/tools.js';
+import { Icon, MiddleTruncate, Tooltip, useTickingText } from '@adecore/ui';
+import { thoughtLine, thoughtPreview } from '../../logic/thought.js';
+import { toolSummary, toolSummaryIsPath } from '../../logic/tools.js';
 import { ROW_GUTTER } from '../icons.js';
 import { useOpenForFind } from '../find-reveal.js';
 import { ReplyContext, UiReplyNavigationContext } from '../reply-context.js';
@@ -31,9 +32,10 @@ const USER_FOLD_CHARS = 600;
 /* A folded user prompt fades out at the bottom instead of cutting a line in half. */
 const FOLD = 'max-h-[10em] overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]';
 function useReplyAuthor(chatId) {
+    const host = useChatHost();
     const { id } = useChatScope();
     const context = useContext(ReplyContext);
-    const author = chatHost().useReplyAuthor(id, context?.chatId ?? chatId);
+    const author = host.useReplyAuthor(id, context?.chatId ?? chatId);
     return context !== null && context.chatId === undefined ? null : author;
 }
 /*
@@ -41,15 +43,17 @@ function useReplyAuthor(chatId) {
  * hands a link that opens a window to the system browser, which cannot reach a blob of this page.
  */
 function AttachmentLink({ chatId, attachment }) {
+    const host = useChatHost();
     const { id } = useChatScope();
-    const { url } = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const { url } = host.attachments.useUrl(id, chatId, attachment.id);
     const badge = fileBadge(attachment.name);
     return (_jsx(Tooltip, { label: attachment.name, children: _jsxs("a", { href: url ?? undefined, download: attachment.name, target: "_blank", rel: "noreferrer", "aria-disabled": url === null, className: "flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover", children: [_jsx("span", { className: "flex h-6 min-w-6 items-center justify-center self-start rounded-md border border-border px-1.5 text-xs font-medium text-text-muted", children: badge ?? _jsx(Icon, { icon: File, size: 12 }) }), _jsx("span", { className: "mt-auto line-clamp-2 text-xs break-all text-text", children: attachment.name }), _jsx("span", { className: "text-xs text-text-faint", children: formatBytes(attachment.size) })] }) }));
 }
 /* A picture attached to a message, which opens large. */
 function AttachmentThumb({ chatId, attachment }) {
+    const host = useChatHost();
     const { id } = useChatScope();
-    const source = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const source = host.attachments.useUrl(id, chatId, attachment.id);
     return _jsx(ImageThumb, { source: source, alt: attachment.name, className: "max-h-32 max-w-48 object-cover" });
 }
 export function UserRow({ chatId, item }) {
@@ -139,11 +143,12 @@ function Writing() {
  * written fades anything: an old reply scrolled back into view just stands there.
  */
 export function AssistantRow({ chatId, item: derived }) {
+    const host = useChatHost();
     const item = useCurrentItem(chatId, derived);
     const scope = useChatScope();
     const context = useContext(ReplyContext);
     const reply = useMemo(() => (context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined), [context, item.parentToolUseId, scope.id, chatId, item.id, item.streaming]);
-    const mode = chatHost().useStreaming();
+    const mode = host.useStreaming();
     const [sawWriting] = useState(item.streaming);
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
@@ -161,12 +166,14 @@ export function AssistantRow({ chatId, item: derived }) {
 }
 /*
  * What the model thought before it answered. It shimmers while it streams and folds itself away
- * once the answer starts, because the thought is worth a glance and rarely worth reading twice.
+ * once the answer starts, because the thought is worth a glance and rarely worth reading twice:
+ * folded, it shows the heading it opens with or itself on one line, and opened, it reads as Markdown.
  */
 export function ThinkingRow({ chatId, item: derived }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const item = useCurrentItem(chatId, derived);
-    const mode = chatHost().useStreaming();
+    const mode = host.useStreaming();
     const [open, setOpen] = useState(false);
     const reveal = useRevealedText(item.text, mode === 'words' && item.streaming);
     // A block at a time, the paragraphs of the thought that closed are shown as they land.
@@ -174,8 +181,23 @@ export function ThinkingRow({ chatId, item: derived }) {
     // Whole, the thought stays behind "Thinking…" until it is done and then folds like any other.
     const shown = open || reveal.active || (settled !== null && settled !== '');
     const text = settled ?? reveal.text;
+    const live = useMemo(() => (item.streaming && mode !== 'whole' ? thoughtLine(text) : ''), [item.streaming, mode, text]);
+    const preview = useMemo(() => (item.streaming ? '' : thoughtPreview(item.text)), [item.streaming, item.text]);
+    const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
-    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex items-center gap-2 text-xs text-text-muted hover:text-text", disabled: item.streaming, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text", children: t('rows.thinking.live') })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration: formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt) }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 border-l border-border pl-2.5 text-sm whitespace-pre-wrap text-text-faint select-text", children: reveal.active ? _jsx(FadingWords, { text: reveal.text }) : text }))] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text", disabled: item.streaming, "aria-expanded": item.streaming ? undefined : open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text min-w-0 truncate", children: live || t('rows.thinking.live') })) : preview === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: open ? t('rows.thinking.thought') : preview }), _jsx("span", { className: "grow" }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: duration }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 border-l border-border pl-2.5 select-text", children: reveal.active ? (_jsx("div", { className: "text-sm whitespace-pre-wrap text-text-faint", children: _jsx(FadingWords, { text: reveal.text }) })) : (_jsx(Markdown, { text: text, muted: true })) }))] }));
+}
+/*
+ * The latest thought of a running turn over the call it led to, as its heading or first sentence,
+ * so what the model found stays in view while it checks it. Nothing while the thought has no line yet.
+ */
+export function LiveThoughtRow({ chatId, item: derived }) {
+    const item = useCurrentItem(chatId, derived);
+    const line = useMemo(() => thoughtLine(item.text), [item.text]);
+    if (line === '') {
+        return null;
+    }
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-muted", children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), _jsx("span", { className: "line-clamp-4 min-w-0 wrap-anywhere select-text", children: line })] }));
 }
 const NOTE_ICON = {
     info: _jsx(Icon, { icon: Info, size: 12 }),
@@ -197,8 +219,9 @@ export function NoteRow({ id, level, text, from }) {
 }
 /* "Open fork" on a note a fork sent, or "Open to answer" on one about a waiting child, while that chat is still in the project. */
 function OpenChatButton({ chatId, label }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = chatHost().useChatPlace(chatId);
+    const place = host.useChatPlace(chatId);
     if (place.title === null) {
         return null;
     }
@@ -234,7 +257,7 @@ export function ApprovalHistoryRow({ item }) {
     if (item.decision === 'pending') {
         return null;
     }
-    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono", children: toolSummary(item.toolName, item.input) })] }));
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono", children: toolSummaryIsPath(item.toolName, item.input) ? (_jsx(MiddleTruncate, { text: toolSummary(item.toolName, item.input) })) : (toolSummary(item.toolName, item.input)) })] }));
 }
 export function QuestionHistoryRow({ item }) {
     const { t } = useTranslation('agent-chat');