@adecore/agents-react 0.23.1 → 0.24.1

package/src/chat/ui/mermaid.ts

@@ -0,0 +1,118 @@
+import type { MermaidConfig } from 'mermaid';
+
+/* The colors of a diagram, each a token of the theme resolved to an opaque color over the frame it is drawn in. */
+export interface MermaidColors {
+    ground: string;
+    node: string;
+    nodeBorder: string;
+    text: string;
+    line: string;
+    cluster: string;
+    clusterBorder: string;
+    note: string;
+}
+
+/* The token each color reads. Borders carry an alpha, so they are resolved over the ground. */
+export const MERMAID_TOKENS: Readonly<Record<keyof MermaidColors, string>> = {
+    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: MermaidColors, dark: boolean, font: { family: string; size: string }): MermaidConfig {
+    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
+        }
+    };
+}
+
+export interface SizedSvg {
+    svg: string;
+    width: number;
+    height: number;
+}
+
+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: string): SizedSvg | null {
+    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: string): string {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}

package/src/chat/ui/rows/ForksRow.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { ChevronRight, GitFork } from 'lucide-react';
 import { useForkIdsAfter } from '../../forks';
 import { ROW_GUTTER } from '../icons';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 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';
@@ -52,7 +52,8 @@ function ForksLabel({ label, link = true }: { label: string; link?: boolean }) {
 
 // A fork no longer in this project has nowhere to lead, so it only says it is there.
 function OneFork({ forkId, label }: { forkId: string; label: string }) {
-    const place = chatHost().useChatPlace(forkId);
+    const host = useChatHost();
+    const place = host.useChatPlace(forkId);
     return (
         <div className="flex">
             {place.title === null ? (
@@ -69,8 +70,9 @@ function OneFork({ forkId, label }: { forkId: string; label: string }) {
 }
 
 function ForkItem({ forkId }: { forkId: string }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = chatHost().useChatPlace(forkId);
+    const place = host.useChatPlace(forkId);
     return (
         <Menu.Item disabled={place.title === null} onClick={place.go}>
             <Icon icon={GitFork} size={14} /> <span className="truncate">{place.title ?? t('fork.pill.label')}</span>

package/src/chat/ui/rows/GeneratedImageRow.tsx

@@ -5,14 +5,14 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Check, Copy, Ellipsis, ExternalLink, FolderDown, ImageIcon, Maximize2 } from 'lucide-react';
 import type { ChatAttachment, ChatToolItem } from '@adecore/agent-contracts';
 import { Button, ButtonGroup, copyText, ErrorBoundary, FileIcon, Icon, IconButton, Menu, Surface } from '@adecore/ui';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 import { formatBytes } from '../../attachments';
 import { attachmentAspect, generatedImageView, type GeneratedImageFailure } from '../../logic/generated-image';
 import { toolStartedAt } from '../../logic/tools';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips';
-import { openFileLink, useFileLinkCwd } from '../file-links';
+import { useFileLinkCwd, useOpenFileLink } from '../file-links';
 import { ImageThumb } from '../ImageView';
 import { ROW_GUTTER } from '../icons';
 import { RunningFor, WorkRow } from './WorkRows';
@@ -67,13 +67,15 @@ function HeadLine({ label, detail, live, startedAt }: { label: string; detail?:
 function SavedFile({ path }: { path: string }) {
     const cwd = useFileLinkCwd();
     const { id } = useChatScope();
+    const { fileLinks } = useChatHost();
+    const openFileLink = useOpenFileLink();
     const chip = (
         <>
             <FileIcon path={path} size={14} />
             <span className="truncate">{path}</span>
         </>
     );
-    if (chatHost().fileLinks === null) {
+    if (fileLinks === null) {
         return <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)}>{chip}</span>;
     }
     return (
@@ -91,7 +93,7 @@ function SavedFile({ path }: { path: string }) {
 function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: string; attachment: ChatAttachment; prompt: string | null; transparent: boolean }) {
     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/src/chat/ui/rows/MessageRows.tsx

@@ -14,21 +14,22 @@ import type {
 import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
 import { useChatRow, useCurrentItem } from '../../../state/chats';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { splitQuote } from '../../quote';
 import { jumpToTimelineItem } from '../../timeline-scroll';
 import { useProviders } from '../../../state/providers';
 import { ChatReferenceChip } from '../ChatReferenceChip';
 import { ImageThumb } from '../ImageView';
-import { MessageMarkdown, ReplyMarkdown } from '../Markdown';
+import { Markdown, MessageMarkdown, ReplyMarkdown } from '../Markdown';
 import { FadingWords } from '../FadingWords';
 import { settledBlocksText } from '../markdown-blocks';
 import { WHOLE_FADE_CLASS } from '../rehype-fade';
 import { useRevealedText } from '../reveal';
 import { formatAgo, formatElapsedShort, formatMoment, formatTokens } from '@adecore/ui/format';
-import { Icon, Tooltip, useTickingText } from '@adecore/ui';
-import { toolSummary } from '../../logic/tools';
+import { Icon, MiddleTruncate, Tooltip, useTickingText } from '@adecore/ui';
+import { thoughtLine, thoughtPreview } from '../../logic/thought';
+import { toolSummary, toolSummaryIsPath } from '../../logic/tools';
 import { ROW_GUTTER } from '../icons';
 import { useOpenForFind } from '../find-reveal';
 import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
@@ -42,9 +43,10 @@ const USER_FOLD_CHARS = 600;
 const FOLD = 'max-h-[10em] overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]';
 
 function useReplyAuthor(chatId: string) {
+    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;
 }
 
@@ -53,8 +55,9 @@ function useReplyAuthor(chatId: string) {
  * hands a link that opens a window to the system browser, which cannot reach a blob of this page.
  */
 function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
+    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 (
         <Tooltip label={attachment.name}>
@@ -78,8 +81,9 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
 
 /* A picture attached to a message, which opens large. */
 function AttachmentThumb({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
+    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 <ImageThumb source={source} alt={attachment.name} className="max-h-32 max-w-48 object-cover" />;
 }
 
@@ -264,6 +268,7 @@ function Writing() {
  * written fades anything: an old reply scrolled back into view just stands there.
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
+    const host = useChatHost();
     const item = useCurrentItem(chatId, derived);
     const scope = useChatScope();
     const context = useContext(ReplyContext);
@@ -271,7 +276,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
         () => (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);
@@ -329,12 +334,14 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
 
 /*
  * 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 }: { chatId: string; item: ChatThinkingItem }) {
+    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.
@@ -342,31 +349,72 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
     // 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 (
         <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
-            <button className="flex items-center gap-2 text-xs text-text-muted hover:text-text" disabled={item.streaming} onClick={() => setOpen((o) => !o)}>
+            <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)}
+            >
                 <span className={ROW_GUTTER}>
                     <Icon icon={Brain} size={12} />
                 </span>
                 {item.streaming ? (
-                    <span className="chat-live-text">{t('rows.thinking.live')}</span>
+                    <span className="chat-live-text min-w-0 truncate">{live || t('rows.thinking.live')}</span>
+                ) : preview === '' ? (
+                    <>
+                        <span>{t('rows.thinking.thoughtFor', { duration })}</span>
+                        <Icon icon={ChevronDown} size={12} className={clsx('shrink-0 transition-transform', open && 'rotate-180')} />
+                    </>
                 ) : (
                     <>
-                        <span>{t('rows.thinking.thoughtFor', { duration: formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt) })}</span>
-                        <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />
+                        <span className="min-w-0 truncate">{open ? t('rows.thinking.thought') : preview}</span>
+                        <span className="grow" />
+                        <span className="shrink-0 text-text-faint tabular-nums">{duration}</span>
+                        <Icon icon={ChevronDown} size={12} className={clsx('shrink-0 transition-transform', open && 'rotate-180')} />
                     </>
                 )}
             </button>
             {shown && text !== '' && (
-                <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">
-                    {reveal.active ? <FadingWords text={reveal.text} /> : text}
+                <div data-find-field="text" className="mt-1 border-l border-border pl-2.5 select-text">
+                    {reveal.active ? (
+                        <div className="text-sm whitespace-pre-wrap text-text-faint">
+                            <FadingWords text={reveal.text} />
+                        </div>
+                    ) : (
+                        <Markdown text={text} muted />
+                    )}
                 </div>
             )}
         </div>
     );
 }
 
+/*
+ * 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 }: { chatId: string; item: ChatThinkingItem }) {
+    const item = useCurrentItem(chatId, derived);
+    const line = useMemo(() => thoughtLine(item.text), [item.text]);
+    if (line === '') {
+        return null;
+    }
+    return (
+        <div className="-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-muted">
+            <span className={ROW_GUTTER}>
+                <Icon icon={Brain} size={12} />
+            </span>
+            <span className="line-clamp-4 min-w-0 wrap-anywhere select-text">{line}</span>
+        </div>
+    );
+}
+
 const NOTE_ICON = {
     info: <Icon icon={Info} size={12} />,
     warning: <Icon icon={TriangleAlert} size={12} />,
@@ -417,8 +465,9 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
 
 /* "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 }: { chatId: string; label: 'openFork' | 'openWaiting' }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = chatHost().useChatPlace(chatId);
+    const place = host.useChatPlace(chatId);
     if (place.title === null) {
         return null;
     }
@@ -486,7 +535,13 @@ export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
             <span className={clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error')}>{DECISION_ICON[item.decision]}</span>
             <span className={clsx(item.decision === 'deny' && 'text-status-error')}>{t(`rows.approval.${item.decision}`)}</span>
             <span className="text-text-muted">{item.toolName}</span>
-            <span className="min-w-0 truncate font-mono">{toolSummary(item.toolName, item.input)}</span>
+            <span className="min-w-0 truncate font-mono">
+                {toolSummaryIsPath(item.toolName, item.input) ? (
+                    <MiddleTruncate text={toolSummary(item.toolName, item.input)} />
+                ) : (
+                    toolSummary(item.toolName, item.input)
+                )}
+            </span>
         </div>
     );
 }

package/src/chat/ui/rows/Rows.tsx

@@ -3,7 +3,18 @@ import { ErrorBoundary } from '@adecore/ui';
 import type { ThreadCard } from '../../../host';
 import type { TimelineRow } from '../../logic/timeline';
 import type { SubagentStep } from '../../subagent-view';
-import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import {
+    AgentTurnRow,
+    ApprovalHistoryRow,
+    AssistantRow,
+    CompactionRow,
+    LiveThoughtRow,
+    NoteRow,
+    QuestionHistoryRow,
+    ReportRow,
+    ThinkingRow,
+    UserRow
+} from './MessageRows';
 import { isImageGeneration } from '../../logic/generated-image';
 import { ForksRow } from './ForksRow';
 import { GeneratedImageRow } from './GeneratedImageRow';
@@ -52,6 +63,8 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
             return <ReportRow id={row.id} text={row.text} />;
         case 'thinking':
             return <ThinkingRow chatId={chatId} item={row.item} />;
+        case 'live-thought':
+            return <LiveThoughtRow chatId={chatId} item={row.item} />;
         case 'work':
             return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow tool={row.tool} />;
         case 'work-live':

package/src/chat/ui/rows/SubagentRow.tsx

@@ -15,7 +15,7 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
 import { useSubagentSupport } from '../../subagent-support';
 import { canOpenSubagent, crumbOf, type SubagentStep } from '../../subagent-view';
-import { chatHost, type SubagentTask } from '../../../host';
+import { useChatHost, type SubagentTask } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 
@@ -135,10 +135,11 @@ export function SubagentRow({
     /* Opens everything it did in the thread's place, for a surface that has somewhere to open it. */
     onOpenConversation?(): void;
 }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const taskId = taskIdOf(item);
-    const task = chatHost().tasks.useTask(id, taskId);
+    const task = host.tasks.useTask(id, taskId);
     // A task paused on its child's limit is still a running row on the wire, but nothing is at work.
     const running = item.status === 'running' && statusWordOf(item, task) !== 'paused';
     const detail = item.description || item.summary || item.subagentType || '';

package/src/chat/ui/rows/VisualRow.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Ellipsis, Maximize2, Trash2 } from 'lucide-react';
 import type { ChatVisual } from '@adecore/agent-contracts';
 import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@adecore/ui';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useVisualDialog } from '../../visuals';
 import { VisualFrame } from '../VisualFrame';
@@ -14,9 +14,10 @@ import { VisualFrame } from '../VisualFrame';
  * sit here.
  */
 export function VisualRow({ chatId, visual }: { chatId: string; visual: ChatVisual }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { keyOf } = useChatScope();
-    if (chatHost().visuals === null) {
+    if (host.visuals === null) {
         return null;
     }
     const open = (kind: 'expand' | 'remove'): void => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);