@adecore/agents-react 0.20.0 → 0.20.1

package/dist/chat/chat-client.d.ts

@@ -10,6 +10,7 @@ interface ChatOpenOptions {
     runtimeMode?: RuntimeMode;
 }
 export interface ChatSendExtras {
+    delivery?: 'steer' | 'queue';
     mentions?: string[];
     skills?: string[];
     chats?: string[];

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

@@ -1,11 +1,17 @@
 import type { ChatItem } from '@adecore/agent-contracts';
 import type { TimelineRow } from './timeline.js';
+import type { FileRef } from '../../host.js';
 export interface TimelineTarget {
     selection: string;
     row: TimelineRow | null;
     code: string | null;
     path: string | null;
     line: number | null;
+    file?: {
+        ref: FileRef;
+        cwd: string | null;
+        scopeId: string | null;
+    } | null;
 }
 export declare const EMPTY_TARGET: TimelineTarget;
 export declare function withCurrentText(rows: TimelineRow[], items: Record<string, ChatItem> | undefined): TimelineRow[];

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

@@ -23,12 +23,32 @@ export function withCurrentText(rows, items) {
 export function 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);
+    const line = positiveInteger(file?.dataset.fileLine);
+    const column = positiveInteger(file?.dataset.fileColumn);
+    const endLine = positiveInteger(file?.dataset.fileEndLine);
+    const path = file?.dataset.filePath ?? null;
     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
+        path,
+        line,
+        file: path === null
+            ? null
+            : {
+                ref: {
+                    path,
+                    ...(line === null ? {} : { line }),
+                    ...(column === null ? {} : { column }),
+                    ...(line === null || endLine === null || endLine < line ? {} : { endLine }),
+                    directory: file?.dataset.fileDirectory === 'true'
+                },
+                cwd: file?.closest('[data-file-cwd]')?.dataset.fileCwd || null,
+                scopeId: file?.closest('[data-file-scope-id]')?.dataset.fileScopeId || null
+            }
     };
 }
+function positiveInteger(value) {
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number > 0 ? number : null;
+}

package/dist/chat/logic/timeline.js

@@ -289,23 +289,25 @@ export function deriveTimelineRows(items, options) {
         }
         const turnId = chunk.turnId;
         const turn = chunk.items.find((item) => item.kind === 'turn');
-        const user = chunk.items.filter((item) => item.kind === 'user');
-        const rest = chunk.items.filter((item) => item.kind !== 'user' && item.kind !== 'turn');
+        const conversation = chunk.items.filter((item) => item.kind !== 'turn');
         if (turn?.origin === 'agent') {
             // The agent started this one itself, so there is no message of the person to show above it.
             rows.push({ kind: 'turn-start', id: `start-${turnId}`, turn, label: agentTurnLabel(turn) });
         }
-        rows.push(...rowsForItems(user, options, children));
         const active = turnId === options.activeTurnId || turn?.state === 'running';
-        const work = rowsForItems(rest, options, children);
         if (!turn || active) {
-            rows.push(...work);
+            rows.push(...rowsForItems(conversation, options, children));
             if (active) {
                 rows.push({ kind: 'working', id: `working-${turnId}`, startedAt: turn?.createdAt ?? Date.now() });
             }
             continue;
         }
-        // The closing answer stays visible; everything before it folds behind the label.
+        // Steering splits the conversation inside a turn. Earlier responses keep their place above it.
+        const lastUser = conversation.findLastIndex((item) => item.kind === 'user');
+        rows.push(...rowsForItems(conversation.slice(0, lastUser + 1), options, children));
+        const rest = conversation.slice(lastUser + 1);
+        const work = rowsForItems(rest, options, children);
+        // The closing answer stays visible; the work after the last input folds behind the label.
         const finalAssistant = lastAssistantRow(work);
         const before = finalAssistant ? work.slice(0, work.indexOf(finalAssistant)) : work;
         // A workflow runs on past the turn that launched it, so its row stays in sight until it ends.
@@ -328,7 +330,7 @@ export function deriveTimelineRows(items, options) {
             }
         }
         rows.push(...standing);
-        const changed = changedFilesRow(turn, rest);
+        const changed = changedFilesRow(turn, conversation);
         if (changed) {
             rows.push(changed);
         }

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

@@ -1,4 +1,6 @@
-export declare function CodeBlock({ code, lang }: {
+import { type ReactNode } from 'react';
+export declare function CodeBlock({ code, lang, actions }: {
     code: string;
     lang: string;
+    actions?: ReactNode;
 }): import("react").JSX.Element;

package/dist/chat/ui/CodeBlock.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { Fragment, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy } from 'lucide-react';
+import { ButtonGroup, IconButton } from '@adecore/ui';
 import { IncrementalLines } from './code-lines.js';
 import { CodeStreamingContext } from './code-streaming.js';
 import { WHOLE_FADE_CLASS } from './rehype-fade.js';
 import { shikiThemeOf, useCodeTheme } from './code-theme.js';
 // A plain language needs no grammar; shiki draws it in the theme's own foreground.
 const PLAIN = 'text';
+const COPIED_MS = 1500;
 let highlighter = null;
 let highlighterLoad = null;
 const loadedLanguages = new Set([PLAIN]);
@@ -102,9 +106,12 @@ const CodeLine = memo(function CodeLine({ tokens }) {
  * fence that is still open is tokenized as it grows, and the same component carries on once it
  * closes, so closing it does not draw it again.
  */
-export function CodeBlock({ code, lang }) {
+export function CodeBlock({ code, lang, actions }) {
+    const { t } = useTranslation('agent-chat');
     const theme = useCodeTheme();
     const streaming = useContext(CodeStreamingContext);
+    const [copyState, setCopyState] = useState('idle');
+    const copying = useRef(false);
     // What loaded last, so a block whose theme changes draws again once the new one is in.
     const [loaded, setLoaded] = useState(null);
     const tokenizer = tokenizerFor(lang, theme);
@@ -112,6 +119,31 @@ export function CodeBlock({ code, lang }) {
     const [waited] = useState(tokenizer === null);
     const lines = useMemo(() => (tokenizer ? new IncrementalLines(tokenizer.tokenize) : null), [tokenizer]);
     const tokens = useMemo(() => lines?.update(code, !streaming) ?? null, [lines, code, streaming]);
+    useEffect(() => {
+        if (copyState !== 'copied') {
+            return;
+        }
+        const timer = setTimeout(() => setCopyState('idle'), COPIED_MS);
+        return () => clearTimeout(timer);
+    }, [copyState]);
+    async function copy() {
+        if (copying.current) {
+            return;
+        }
+        copying.current = true;
+        setCopyState('copying');
+        try {
+            // The best-effort clipboard helper cannot distinguish a refusal from success.
+            await navigator.clipboard.writeText(code);
+            setCopyState('copied');
+        }
+        catch {
+            setCopyState('failed');
+        }
+        finally {
+            copying.current = false;
+        }
+    }
     useEffect(() => {
         if (tokenizer !== null) {
             return;
@@ -124,9 +156,8 @@ export function CodeBlock({ code, lang }) {
             cancelled = true;
         };
     }, [lang, theme, tokenizer]);
-    if (tokenizer === null || tokens === null) {
-        const failed = loaded === 'failed';
-        return (_jsx("div", { className: clsx('chat-code', !failed && 'invisible'), "aria-hidden": failed ? undefined : true, children: _jsx("pre", { children: _jsx("code", { children: code }) }) }));
-    }
-    return (_jsx("div", { className: clsx('chat-code', waited && WHOLE_FADE_CLASS), children: _jsx("pre", { style: { color: tokenizer.fg }, children: _jsx("code", { children: tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }) }));
+    const pending = (tokenizer === null || tokens === null) && loaded !== 'failed';
+    return (_jsxs("div", { className: "chat-code", "data-copy-state": copyState, children: [_jsx("pre", { className: clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS), "aria-hidden": pending || undefined, style: { color: tokenizer?.fg }, children: _jsx("code", { children: tokens === null
+                        ? code
+                        : tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }), _jsxs(ButtonGroup, { className: "chat-code-actions", role: "group", "aria-label": t('code.actions'), children: [_jsx(IconButton, { icon: copyState === 'copied' ? Check : Copy, size: "sm", label: copyState === 'copied' ? t('timeline.actions.copied') : t('timeline.menu.copyCode'), busy: copyState === 'copying', "aria-busy": copyState === 'copying', "aria-disabled": copyState === 'copying', onClick: () => void copy() }), actions] }), _jsx("span", { className: "sr-only", role: "status", children: copyState === 'copied' ? t('timeline.actions.copied') : '' }), copyState === 'failed' && (_jsx("p", { className: "chat-code-error", role: "alert", children: t('code.copyFailed') }))] }));
 }

package/dist/chat/ui/Composer.js

@@ -95,6 +95,8 @@ function splitPath(path) {
 // Keep the editor mounted while a pending request takes over, so its selection and draft survive.
 export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }) {
     const { t } = useTranslation('agent-chat');
+    const sendDelivery = chatHost().useSendDelivery();
+    const canSteer = info.provider === 'claude' || info.provider === 'codex';
     const [draft, setDraft] = useState(() => readDraft(chatId));
     const [historyIndex, setHistoryIndex] = useState(null);
     const [menuIndex, setMenuIndex] = useState(0);
@@ -474,7 +476,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const removeAttachment = (index) => {
         setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
     };
-    const submit = () => {
+    const submit = (alternate = false) => {
+        const delivery = canSteer && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
         const trimmed = text.trim();
         if (isEmptyDraft(draft) || !writable || guard.tooLong) {
             return;
@@ -502,6 +505,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             return;
         }
         onSend(withQuote(quote, trimmed), {
+            delivery,
             mentions: presentMentions(trimmed, draft.mentions),
             skills: presentSkills(trimmed, draft.skills),
             chats: draft.chats,
@@ -739,7 +743,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 view.dispatch({ changes: { from: line.from, to: line.to }, selection: { anchor: line.from }, userEvent: 'delete' });
                 return true;
             }
-            submit();
+            submit(e.altKey);
             return true;
         }
         const { from, to } = view.state.selection.main;
@@ -852,5 +856,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                         addFiles(Array.from(e.target.files ?? []));
                                         e.target.value = '';
                                         inputRef.current?.focus();
-                                    } }), _jsx(RunSettings, { disabled: configurationPending || !writable, providers: pickable, provider: info.provider, selection: info.selection, model: model, runtimeMode: info.runtimeMode, effectiveRuntimeMode: info.effectiveRuntimeMode, permissionMode: info.permissionMode, open: modelPickerOpen, onOpenChange: setModelPickerOpen, onModel: chooseModel, onOption: (id, value) => configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } }), onMode: (runtimeMode) => configure({ runtimeMode }), usage: info.usage, compactDisabled: busy || !writable, onCompact: compact, account: accountChoice === null ? null : { choice: accountChoice, started, onPick: chooseAccount } }), _jsx(StashPicker, { onRestore: restoreStashed }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insertIntoDraft }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: setDictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text", onClick: (event) => stop(event.shiftKey), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), (!busy || !isEmptyDraft(draft)) && (_jsx(Tooltip, { label: busy ? t('composer.queueButton') : t('composer.send'), kbd: KEY_SHORTCUTS.modEnter, name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100", disabled: isEmptyDraft(draft) || !writable || guard.tooLong, onClick: submit, children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] })] }) }), _jsx(PromptDialog, { open: confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: forceClearThread, onOpenChange: () => setConfirmClear(false) })] }));
+                                    } }), _jsx(RunSettings, { disabled: configurationPending || !writable, providers: pickable, provider: info.provider, selection: info.selection, model: model, runtimeMode: info.runtimeMode, effectiveRuntimeMode: info.effectiveRuntimeMode, permissionMode: info.permissionMode, open: modelPickerOpen, onOpenChange: setModelPickerOpen, onModel: chooseModel, onOption: (id, value) => configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } }), onMode: (runtimeMode) => configure({ runtimeMode }), usage: info.usage, compactDisabled: busy || !writable, onCompact: compact, account: accountChoice === null ? null : { choice: accountChoice, started, onPick: chooseAccount } }), _jsx(StashPicker, { onRestore: restoreStashed }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insertIntoDraft }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: setDictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text", onClick: (event) => stop(event.shiftKey), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), (!busy || !isEmptyDraft(draft)) && (_jsx(Tooltip, { label: busy
+                                                ? t(canSteer
+                                                    ? sendDelivery === 'steer'
+                                                        ? 'composer.steerButton'
+                                                        : 'composer.queueWithSteerButton'
+                                                    : 'composer.queueButton')
+                                                : t('composer.send'), kbd: KEY_SHORTCUTS.modEnter, name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100", disabled: isEmptyDraft(draft) || !writable || guard.tooLong, onClick: (event) => submit(event.altKey), children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] })] }) }), _jsx(PromptDialog, { open: confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: forceClearThread, onOpenChange: () => setConfirmClear(false) })] }));
 }

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

@@ -1,8 +1,13 @@
 import { type Components, type Options } from 'react-markdown';
-export declare const ReplyMarkdown: import("react").MemoExoticComponent<({ text, streaming, arriving }: {
+import { type ShellCodeBlockContext } from '../../host.js';
+type ShellCodeBlockReply = Pick<ShellCodeBlockContext, 'scopeId' | 'chatId' | 'itemId'> & {
+    streaming: boolean;
+};
+export declare const ReplyMarkdown: import("react").MemoExoticComponent<({ text, streaming, arriving, reply }: {
     text: string;
     streaming: boolean;
     arriving?: boolean;
+    reply?: ShellCodeBlockReply;
 }) => import("react").JSX.Element>;
 export declare const MessageMarkdown: import("react").MemoExoticComponent<({ text, mentions, skills }: {
     text: string;
@@ -16,3 +21,4 @@ export declare const Markdown: import("react").MemoExoticComponent<({ text, brea
     rehypePlugins?: Options['rehypePlugins'];
     componentOverrides?: Components;
 }) => import("react").JSX.Element>;
+export {};

package/dist/chat/ui/Markdown.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, memo, useContext, useMemo } from 'react';
 import clsx from 'clsx';
 import { Zap } from 'lucide-react';
 import ReactMarkdown, {} from 'react-markdown';
@@ -12,8 +12,43 @@ import { splitMarkdownBlocks } from './markdown-blocks.js';
 import { rehypeChips } from './rehype-chips.js';
 import { rehypeFadeWords } from './rehype-fade.js';
 import { remarkHtmlAsText } from './remark-html-as-text.js';
-import { openFileLink, useFileLinkCwd, useFileLinkTarget } from './file-links.js';
+import { chatHost } from '../../host.js';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget } from './file-links.js';
 import { FileIcon, Icon } from '@adecore/ui';
+const ShellCodeBlockReplyContext = createContext(null);
+const BlockCodeContext = createContext(false);
+/* Only root children qualify; Markdown's parser decides whether a fence belongs to a list or quote. */
+function remarkShellCodeBlocks() {
+    return (tree, file) => {
+        for (const node of tree.children ?? []) {
+            if (node.type !== 'code') {
+                continue;
+            }
+            const start = node.position?.start.offset;
+            const end = node.position?.end.offset;
+            if (start === undefined || end === undefined) {
+                continue;
+            }
+            const raw = String(file.value).slice(start, end);
+            const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(raw);
+            if (opening === null) {
+                continue;
+            }
+            const body = raw.slice(opening[0].length);
+            const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
+            const closed = closing !== null && closing[1][0] === opening[1][0] && closing[1].length >= opening[1].length;
+            node.data = {
+                ...node.data,
+                hProperties: {
+                    ...node.data?.hProperties,
+                    'data-shell-language': opening[2],
+                    'data-shell-code': closed ? body.slice(0, closing.index) : body,
+                    'data-shell-closed': closed
+                }
+            };
+        }
+    };
+}
 function languageOf(className) {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
@@ -26,7 +61,8 @@ const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code
  */
 function FileLink({ target, className, children }) {
     const cwd = useFileLinkCwd();
-    return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, onClick: () => openFileLink(cwd, target), children: children }));
+    const scopeId = useFileLinkScopeId();
+    return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, "data-file-column": target.column, "data-file-end-line": target.endLine, "data-file-directory": target.directory, "data-file-cwd": cwd ?? '', "data-file-scope-id": scopeId ?? '', onClick: () => openFileLink(cwd, target, scopeId), children: children }));
 }
 /* Inline code, which is a file reference often enough that it is worth asking every time. */
 function InlineCode({ text }) {
@@ -55,18 +91,19 @@ function MarkdownLink({ href, children }) {
     }
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
+function MarkdownCode({ className, children, plain = false }) {
+    const block = useContext(BlockCodeContext);
+    const text = String(children ?? '');
+    if (block) {
+        return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
+    }
+    return plain ? _jsx("code", { className: INLINE_CODE, children: text }) : _jsx(InlineCode, { text: text });
+}
 const components = {
     pre({ children }) {
-        return _jsx(_Fragment, { children: children });
-    },
-    code({ className, children }) {
-        const text = String(children ?? '');
-        // Fenced blocks end with a newline and carry a language; anything else is inline.
-        if (className?.startsWith('language-') || text.includes('\n')) {
-            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
-        }
-        return _jsx(InlineCode, { text: text });
+        return _jsx(BlockCodeContext.Provider, { value: true, children: children });
     },
+    code: MarkdownCode,
     a({ href, children }) {
         return _jsx(MarkdownLink, { href: href, children: children });
     },
@@ -79,11 +116,7 @@ const components = {
 const plainComponents = {
     ...components,
     code({ className, children }) {
-        const text = String(children ?? '');
-        if (className?.startsWith('language-') || text.includes('\n')) {
-            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
-        }
-        return _jsx("code", { className: INLINE_CODE, children: text });
+        return (_jsx(MarkdownCode, { className: className, plain: true, children: children }));
     },
     a({ href, children }) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
@@ -100,6 +133,7 @@ function replyHeading(level) {
 }
 const replyComponents = {
     ...components,
+    code: ReplyCode,
     h1: replyHeading(1),
     h2: replyHeading(2),
     h3: replyHeading(3),
@@ -107,12 +141,34 @@ const replyComponents = {
     h5: replyHeading(5),
     h6: replyHeading(6)
 };
+function ReplyCode({ className, children, node }) {
+    const reply = useContext(ShellCodeBlockReplyContext);
+    const block = useContext(BlockCodeContext);
+    const properties = node?.properties;
+    const language = properties?.['data-shell-language'];
+    const code = properties?.['data-shell-code'];
+    const context = reply !== null && (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
+        ? {
+            scopeId: reply.scopeId,
+            chatId: reply.chatId,
+            itemId: reply.itemId,
+            language,
+            code,
+            complete: !reply.streaming && properties?.['data-shell-closed'] === true
+        }
+        : null;
+    const text = String(children ?? '');
+    if (block) {
+        return (_jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className), actions: context !== null ? chatHost().renderShellCodeBlock?.(context) : undefined }));
+    }
+    return _jsx(InlineCode, { text: text });
+}
 /* A picked file or skill in a sent message. The glyph stands in for the sigil the text still carries. */
 function Chip({ kind, value }) {
     if (kind === 'skill') {
         return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, SKILL_TONE), children: [_jsx(Icon, { icon: Zap, size: 14, className: "shrink-0 opacity-85" }), _jsx("span", { className: "truncate", children: value })] }));
     }
-    return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), "data-file-path": value, children: [_jsx(FileIcon, { path: value, size: 14 }), _jsx("span", { className: "truncate", children: value })] }));
+    return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), "data-file-path": value, "data-file-directory": /[\\/]$/.test(value), children: [_jsx(FileIcon, { path: value, size: 14 }), _jsx("span", { className: "truncate", children: value })] }));
 }
 const messageComponents = {
     ...replyComponents,
@@ -125,14 +181,15 @@ const messageComponents = {
 };
 // Module constants, so a render never hands react-markdown a fresh array and makes it parse again.
 const PLUGINS = [remarkGfm];
+const REPLY_PLUGINS = [remarkGfm, remarkShellCodeBlocks];
 const PLUGINS_WITH_BREAKS = [remarkGfm, remarkBreaks];
 const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
 const FADE_PLUGINS = [rehypeFadeWords];
 const NO_PLUGINS = [];
 /* One block of a reply. It renders no element of its own, so prose still sees the paragraphs as
    direct children and keeps its first and last margins. */
-const ReplyBlock = memo(function ReplyBlock({ text, fade, open }) {
-    return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ReactMarkdown, { remarkPlugins: PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }));
+const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }) {
+    return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ShellCodeBlockReplyContext.Provider, { value: reply ?? null, children: _jsx(ReactMarkdown, { remarkPlugins: REPLY_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }) }));
 });
 /*
  * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows.
@@ -140,9 +197,9 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open }) {
  * line at a time as it grows. `arriving` fades in each block as it is added instead, for a reply
  * that is shown a block at a time.
  */
-export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false }) {
+export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false, reply }) {
     const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
-    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence }, index))) }));
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence, reply: reply }, index))) }));
 });
 /*
  * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text

package/dist/chat/ui/MessageActions.js

@@ -9,15 +9,14 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow, useChats } from '../../state/chats.js';
-import { ButtonGroup, copyText, IconButton } from '@adecore/ui';
+import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
+import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
 const COPIED_MS = 1500;
-/*
- * Bookmark, fork and copy under a message, shown while the pointer or the focus is on a
- * `group/message`. The row always takes its height, so the virtualizer never measures it again on a
- * hover. Like the strip's card, it leaves out an action the message cannot take right now.
- */
+const TIMESTAMP_FORMAT = { dateStyle: 'full', timeStyle: 'medium' };
+/* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
 export function MessageActions({ chatId, row }) {
     const { t } = useTranslation('agent-chat');
+    useFormatLocale();
     const scope = useChatScope();
     const { fork } = chatHost();
     const turnId = row.item.turnId;
@@ -49,5 +48,5 @@ export function MessageActions({ chatId, row }) {
             setCopied(true);
         }
     };
-    return (_jsx("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' ? '-mr-1.5 mt-1.5 justify-end' : '-ml-1.5'), children: !streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [bookmark === null && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })) }));
+    return (_jsxs("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' && 'mt-1.5 justify-end'), children: [!streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [bookmark === null && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })), _jsx(Tooltip, { label: formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(row.item.createdAt).toISOString(), className: clsx('shrink-0 text-xs text-text-faint tabular-nums select-none', row.kind === 'assistant' && 'order-first'), children: formatClock(row.item.createdAt) }) })] }));
 }

package/dist/chat/ui/SubagentTimeline.js

@@ -94,7 +94,7 @@ export function SubagentTimeline({ chatId, toolUseId }) {
     const openChild = (step) => {
         show(openBelow(trail, step));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, "data-file-cwd": state.context?.cwd ?? cwd ?? '', "data-file-scope-id": scope.id, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
                         // The thread keeps its reader in place itself when a page goes in above.
                         style: { overflowAnchor: 'none' }, onScroll: (event) => {
                             const element = event.currentTarget;

package/dist/chat/ui/Timeline.js

@@ -395,7 +395,7 @@ export function Timeline({ chatId, composer, overlay }) {
         followRef.current = false;
         virtualizer.scrollToIndex(found.index, { align: 'start' });
     };
-    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
+    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
                             // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
                             // it and scrolls the thread toward the end on every keystroke.
                             className: "chat-scroll min-h-0 grow overflow-auto", 

package/dist/chat/ui/TimelineMenu.js

@@ -7,7 +7,7 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
-import { openFileLink, useFileLinkCwd } from './file-links.js';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 /*
  * The menu behind a right-click in a thread. Copy is the reason it exists. Everything in a thread
@@ -23,10 +23,14 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
     const markable = chatId !== null && (target.row?.kind === 'user' || target.row?.kind === 'assistant') ? target.row.id : null;
     // A thread outside a chat (a sub-agent's transcript) has no cwd of its own; the app answers for it then.
     const cwd = useFileLinkCwd();
+    const scopeId = useFileLinkScopeId();
     const { fork, fileLinks } = chatHost();
     const openInPreview = () => {
-        if (target.path !== null) {
-            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false });
+        if (target.file != null) {
+            openFileLink(target.file.cwd, target.file.ref, target.file.scopeId);
+        }
+        else if (target.path !== null) {
+            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false }, scopeId);
         }
     };
     return (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] }))] }));

package/dist/chat/ui/file-links.d.ts

@@ -1,5 +1,6 @@
 import { type FileRef } from '../../host.js';
 export declare const FileLinkContext: import("react").Context<string | null>;
 export declare function useFileLinkCwd(): string | null;
+export declare function useFileLinkScopeId(): string | null;
 export declare function useFileLinkTarget(text: string): FileRef | null;
-export declare function openFileLink(cwd: string | null, ref: FileRef): void;
+export declare function openFileLink(cwd: string | null, ref: FileRef, scopeId?: string | null): void;

package/dist/chat/ui/file-links.js

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { chatHost } from '../../host.js';
+import { ChatScopeContext } from '../../scope.js';
 /*
  * The folder a relative reference in rendered text counts from: a chat's own cwd, which is a
  * worktree as often as it is the project, or the folder of the file an app is drawing. Null where
@@ -9,12 +10,16 @@ export const FileLinkContext = createContext(null);
 export function useFileLinkCwd() {
     return useContext(FileLinkContext);
 }
+export function useFileLinkScopeId() {
+    return useContext(ChatScopeContext)?.id ?? null;
+}
 /* The reference a piece of text names, only where this spot on screen could open it. */
 export function useFileLinkTarget(text) {
     const cwd = useFileLinkCwd();
-    return useMemo(() => chatHost().fileLinks?.target(text, cwd) ?? null, [text, cwd]);
+    const scopeId = useFileLinkScopeId();
+    return useMemo(() => chatHost().fileLinks?.target(text, cwd, scopeId) ?? null, [text, cwd, scopeId]);
 }
 /* A reference followed, the way the app opens a file or a folder. */
-export function openFileLink(cwd, ref) {
-    chatHost().fileLinks?.open(cwd, ref);
+export function openFileLink(cwd, ref, scopeId = null) {
+    chatHost().fileLinks?.open(cwd, ref, scopeId);
 }

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, TriangleAlert, X } from 'lucide-react';
@@ -107,18 +107,21 @@ function Writing() {
  */
 export function AssistantRow({ chatId, item: derived }) {
     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 [sawWriting] = useState(item.streaming);
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
-        return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), settled !== '' && (_jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: settled, streaming: false, arriving: sawWriting }) })), item.streaming && _jsx(Writing, {})] }));
+        return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), settled !== '' && (_jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: settled, streaming: false, arriving: sawWriting, reply: reply }) })), item.streaming && _jsx(Writing, {})] }));
     }
     if (mode === 'whole' && item.streaming) {
         return (_jsxs("div", { className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx(Writing, {})] }));
     }
-    return (_jsxs("div", { "data-find-item": item.id, className: clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS), children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: reveal.text, streaming: reveal.active }) }), live && item.text === '' && _jsx("span", { className: "inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" })] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS), children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: reveal.text, streaming: reveal.active, reply: reply }) }), live && item.text === '' && _jsx("span", { className: "inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" })] }));
 }
 /*
  * What the model thought before it answered. It shimmers while it streams and folds itself away