@adecore/agents-react 0.20.0 → 0.21.0

package/src/chat/ui/CodeBlock.tsx

@@ -1,5 +1,8 @@
-import { Fragment, memo, useContext, useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { Fragment, memo, useContext, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
 import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy } from 'lucide-react';
+import { ButtonGroup, IconButton } from '@adecore/ui';
 import type { BundledLanguage, BundledTheme, createHighlighter, ThemeRegistration } from 'shiki/bundle/web';
 import { IncrementalLines, type CodeToken, type Tokenize } from './code-lines';
 import { CodeStreamingContext } from './code-streaming';
@@ -10,6 +13,7 @@ type Highlighter = Awaited<ReturnType<typeof createHighlighter>>;
 type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
 // A plain language needs no grammar; shiki draws it in the theme's own foreground.
 const PLAIN = 'text';
+const COPIED_MS = 1500;
 
 let highlighter: Highlighter | null = null;
 let highlighterLoad: Promise<Highlighter> | null = null;
@@ -123,9 +127,12 @@ const CodeLine = memo(function CodeLine({ tokens }: { tokens: CodeToken[] }) {
  * 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 }: { code: string; lang: string }) {
+export function CodeBlock({ code, lang, actions }: { code: string; lang: string; actions?: ReactNode }) {
+    const { t } = useTranslation('agent-chat');
     const theme = useCodeTheme();
     const streaming = useContext(CodeStreamingContext);
+    const [copyState, setCopyState] = useState<'idle' | 'copying' | 'copied' | 'failed'>('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<string | null>(null);
     const tokenizer = tokenizerFor(lang, theme);
@@ -134,6 +141,31 @@ export function CodeBlock({ code, lang }: { code: string; lang: string }) {
     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(): Promise<void> {
+        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;
@@ -147,29 +179,46 @@ export function CodeBlock({ code, lang }: { code: string; lang: string }) {
         };
     }, [lang, theme, tokenizer]);
 
-    if (tokenizer === null || tokens === null) {
-        const failed = loaded === 'failed';
-        return (
-            <div className={clsx('chat-code', !failed && 'invisible')} aria-hidden={failed ? undefined : true}>
-                <pre>
-                    <code>{code}</code>
-                </pre>
-            </div>
-        );
-    }
+    const pending = (tokenizer === null || tokens === null) && loaded !== 'failed';
     return (
-        <div className={clsx('chat-code', waited && WHOLE_FADE_CLASS)}>
-            <pre style={{ color: tokenizer.fg }}>
+        <div className="chat-code" data-copy-state={copyState}>
+            <pre
+                className={clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS)}
+                aria-hidden={pending || undefined}
+                style={{ color: tokenizer?.fg }}
+            >
                 <code>
-                    {tokens.map((line, index) => (
-                        // Lines only ever grow at the end, so the place of a line is a stable key.
-                        <Fragment key={index}>
-                            <CodeLine tokens={line} />
-                            {index < tokens.length - 1 && '\n'}
-                        </Fragment>
-                    ))}
+                    {tokens === null
+                        ? code
+                        : tokens.map((line, index) => (
+                              // Lines only ever grow at the end, so the place of a line is a stable key.
+                              <Fragment key={index}>
+                                  <CodeLine tokens={line} />
+                                  {index < tokens.length - 1 && '\n'}
+                              </Fragment>
+                          ))}
                 </code>
             </pre>
+            <ButtonGroup className="chat-code-actions" role="group" aria-label={t('code.actions')}>
+                <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}
+            </ButtonGroup>
+            <span className="sr-only" role="status">
+                {copyState === 'copied' ? t('timeline.actions.copied') : ''}
+            </span>
+            {copyState === 'failed' && (
+                <p className="chat-code-error" role="alert">
+                    {t('code.copyFailed')}
+                </p>
+            )}
         </div>
     );
 }

package/src/chat/ui/Composer.tsx

@@ -166,6 +166,8 @@ function splitPath(path: string): { name: string; dir: string } {
 // 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 }: ComposerProps) {
     const { t } = useTranslation('agent-chat');
+    const sendDelivery = chatHost().useSendDelivery();
+    const canSteer = info.provider === 'claude' || info.provider === 'codex';
     const [draft, setDraft] = useState<ChatDraft>(() => readDraft(chatId));
     const [historyIndex, setHistoryIndex] = useState<number | null>(null);
     const [menuIndex, setMenuIndex] = useState(0);
@@ -602,7 +604,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
     };
 
-    const submit = (): void => {
+    const submit = (alternate = false): void => {
+        const delivery = canSteer && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
         const trimmed = text.trim();
         if (isEmptyDraft(draft) || !writable || guard.tooLong) {
             return;
@@ -633,6 +636,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,
@@ -871,7 +875,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;
@@ -1295,13 +1299,26 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                     </button>
                                 </Tooltip>
                             )}
-                            {/* While a turn runs the same button queues the message instead of sending it. */}
                             {(!busy || !isEmptyDraft(draft)) && (
-                                <Tooltip label={busy ? t('composer.queueButton') : t('composer.send')} kbd={KEY_SHORTCUTS.modEnter} name>
+                                <Tooltip
+                                    label={
+                                        busy
+                                            ? t(
+                                                  canSteer
+                                                      ? sendDelivery === 'steer'
+                                                          ? 'composer.steerButton'
+                                                          : 'composer.queueWithSteerButton'
+                                                      : 'composer.queueButton'
+                                              )
+                                            : t('composer.send')
+                                    }
+                                    kbd={KEY_SHORTCUTS.modEnter}
+                                    name
+                                >
                                     <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}
+                                        onClick={(event) => submit(event.altKey)}
                                     >
                                         <Icon icon={ArrowUp} size={16} />
                                     </button>

package/src/chat/ui/ImageView.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
@@ -34,7 +34,19 @@ function zoomed(view: View, factor: number, pointX: number, pointY: number): Vie
 }
 
 /* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
-function Lightbox({ src, alt, open, onOpenChange }: { src: string; alt: string; open: boolean; onOpenChange(open: boolean): void }) {
+function Lightbox({
+    src,
+    alt,
+    open,
+    onOpenChange,
+    actions
+}: {
+    src: string;
+    alt: string;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    actions?: ReactNode;
+}) {
     const { t } = useTranslation('agent-chat');
     const [view, setView] = useState<View>(START);
     // The alt of an image an agent read is its path; the header shows the file and keeps the path on a tooltip.
@@ -84,6 +96,7 @@ function Lightbox({ src, alt, open, onOpenChange }: { src: string; alt: string;
                         />
                         <IconButton icon={RotateCcw} size="sm" label={t('image.reset')} disabled={view.scale === MIN_SCALE} onClick={() => setView(START)} />
                     </ButtonGroup>
+                    {actions}
                     <CloseButton label={t('common.action.close')} kbd="esc" className="ml-1" dialog />
                 </div>
                 <div
@@ -130,16 +143,41 @@ function Lightbox({ src, alt, open, onOpenChange }: { src: string; alt: string;
     );
 }
 
+export interface ImageThumbProps {
+    source: ResourceUrl;
+    alt: string;
+    className?: string;
+    /* Width over height, known before the bytes: the thumbnail then fills its container's width at that ratio and holds its place while they load. */
+    aspect?: number;
+    /* Drawn in the lightbox's header before Close, such as icon buttons that act on the image. */
+    actions?: ReactNode;
+    /* Whether the lightbox is open, for a caller that opens it from a control of its own; left out, the thumbnail keeps it. */
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+}
+
 /*
  * A thumbnail that opens the same image large. The button is the picture, so there is nothing to aim at.
  * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
  */
-export function ImageThumb({ source, alt, className }: { source: ResourceUrl; alt: string; className?: string }) {
-    const [open, setOpen] = useState(false);
+export function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }: ImageThumbProps) {
+    const [ownOpen, setOwnOpen] = useState(false);
+    const open = openProp ?? ownOpen;
+    const setOpen = (next: boolean): void => {
+        setOwnOpen(next);
+        onOpenChange?.(next);
+    };
     const { url: src, failure } = source;
+    const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
     if (src === null) {
         return (
-            <span className="grid size-16 place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint">
+            <span
+                className={clsx(
+                    'grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint',
+                    aspect === undefined ? 'size-16' : 'w-full'
+                )}
+                style={ratio}
+            >
                 {failure !== null && (
                     <Tooltip label={failure}>
                         <Icon icon={ImageOff} size={14} />
@@ -150,10 +188,15 @@ export function ImageThumb({ source, alt, className }: { source: ResourceUrl; al
     }
     return (
         <>
-            <button className="block overflow-hidden rounded-lg border border-border" onClick={() => setOpen(true)}>
-                <img src={src} alt={alt} className={className} />
+            <button
+                type="button"
+                className={clsx('block overflow-hidden rounded-lg border border-border', aspect !== undefined && 'w-full')}
+                style={ratio}
+                onClick={() => setOpen(true)}
+            >
+                <img src={src} alt={alt} className={clsx(aspect !== undefined && 'size-full object-contain', className)} />
             </button>
-            <Lightbox src={src} alt={alt} open={open} onOpenChange={setOpen} />
+            <Lightbox src={src} alt={alt} open={open} onOpenChange={setOpen} actions={actions} />
         </>
     );
 }

package/src/chat/ui/Markdown.tsx

@@ -1,7 +1,7 @@
-import { memo, useMemo, type ReactNode } from 'react';
+import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { Zap } from 'lucide-react';
-import ReactMarkdown, { type Components, type Options } from 'react-markdown';
+import ReactMarkdown, { type Components, type ExtraProps, type Options } from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips';
@@ -11,10 +11,55 @@ import { splitMarkdownBlocks } from './markdown-blocks';
 import { rehypeChips, type ChipOptions } from './rehype-chips';
 import { rehypeFadeWords } from './rehype-fade';
 import { remarkHtmlAsText } from './remark-html-as-text';
-import type { FileRef } from '../../host';
-import { openFileLink, useFileLinkCwd, useFileLinkTarget } from './file-links';
+import { chatHost, type FileRef, type ShellCodeBlockContext } from '../../host';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget } from './file-links';
 import { FileIcon, Icon } from '@adecore/ui';
 
+type ShellCodeBlockReply = Pick<ShellCodeBlockContext, 'scopeId' | 'chatId' | 'itemId'> & { streaming: boolean };
+
+const ShellCodeBlockReplyContext = createContext<ShellCodeBlockReply | null>(null);
+const BlockCodeContext = createContext(false);
+
+interface MarkdownNode {
+    type: string;
+    children?: MarkdownNode[];
+    position?: { start: { offset?: number }; end: { offset?: number } };
+    data?: { hProperties?: Record<string, unknown> };
+}
+
+/* Only root children qualify; Markdown's parser decides whether a fence belongs to a list or quote. */
+function remarkShellCodeBlocks() {
+    return (tree: MarkdownNode, file: { value: unknown }) => {
+        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: string | undefined): string {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
@@ -29,6 +74,7 @@ const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code
  */
 function FileLink({ target, className, children }: { target: FileRef; className?: string; children: ReactNode }) {
     const cwd = useFileLinkCwd();
+    const scopeId = useFileLinkScopeId();
     return (
         // `select-text` because a thread is copied as often as it is clicked, and a button is not
         // selectable on its own.
@@ -37,7 +83,12 @@ function FileLink({ target, className, children }: { target: FileRef; className?
             className={clsx('cursor-pointer select-text', className)}
             data-file-path={target.path}
             data-file-line={target.line}
-            onClick={() => openFileLink(cwd, target)}
+            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}
         </button>
@@ -85,18 +136,20 @@ function MarkdownLink({ href, children }: { href?: string; children?: ReactNode
     );
 }
 
+function MarkdownCode({ className, children, plain = false }: { className?: string; children?: ReactNode; plain?: boolean }) {
+    const block = useContext(BlockCodeContext);
+    const text = String(children ?? '');
+    if (block) {
+        return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
+    }
+    return plain ? <code className={INLINE_CODE}>{text}</code> : <InlineCode text={text} />;
+}
+
 const components = {
     pre({ children }: { children?: ReactNode }) {
-        return <>{children}</>;
-    },
-    code({ className, children }: { className?: string; children?: ReactNode }) {
-        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 <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
-        }
-        return <InlineCode text={text} />;
+        return <BlockCodeContext.Provider value={true}>{children}</BlockCodeContext.Provider>;
     },
+    code: MarkdownCode,
     a({ href, children }: { href?: string; children?: ReactNode }) {
         return <MarkdownLink href={href}>{children}</MarkdownLink>;
     },
@@ -114,11 +167,11 @@ const components = {
 const plainComponents = {
     ...components,
     code({ className, children }: { className?: string; children?: ReactNode }) {
-        const text = String(children ?? '');
-        if (className?.startsWith('language-') || text.includes('\n')) {
-            return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
-        }
-        return <code className={INLINE_CODE}>{text}</code>;
+        return (
+            <MarkdownCode className={className} plain>
+                {children}
+            </MarkdownCode>
+        );
     },
     a({ href, children }: { href?: string; children?: ReactNode }) {
         return (
@@ -142,6 +195,7 @@ function replyHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
 
 const replyComponents = {
     ...components,
+    code: ReplyCode,
     h1: replyHeading(1),
     h2: replyHeading(2),
     h3: replyHeading(3),
@@ -150,6 +204,36 @@ const replyComponents = {
     h6: replyHeading(6)
 };
 
+function ReplyCode({ className, children, node }: { className?: string; children?: ReactNode } & ExtraProps) {
+    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: ShellCodeBlockContext | null =
+        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 (
+            <CodeBlock
+                code={text.replace(/\n$/, '')}
+                lang={languageOf(className)}
+                actions={context !== null ? chatHost().renderShellCodeBlock?.(context) : undefined}
+            />
+        );
+    }
+    return <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 }: { kind: string; value: string }) {
     if (kind === 'skill') {
@@ -162,7 +246,7 @@ function Chip({ kind, value }: { kind: string; value: string }) {
     }
     return (
         // The path is what the thread's menu opens in the preview from here.
-        <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)} data-file-path={value}>
+        <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)} data-file-path={value} data-file-directory={/[\\/]$/.test(value)}>
             <FileIcon path={value} size={14} />
             <span className="truncate">{value}</span>
         </span>
@@ -181,6 +265,7 @@ 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];
@@ -188,14 +273,16 @@ const NO_PLUGINS: typeof FADE_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 }: { text: string; fade: boolean; open: boolean }) {
+const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }: { text: string; fade: boolean; open: boolean; reply?: ShellCodeBlockReply }) {
     return (
         // A context rather than a second set of components. A component that changed would mount the
         // code block again the moment its fence closes, and it would lose the lines it already has.
         <CodeStreamingContext.Provider value={open}>
-            <ReactMarkdown remarkPlugins={PLUGINS} rehypePlugins={fade ? FADE_PLUGINS : NO_PLUGINS} components={replyComponents}>
-                {text}
-            </ReactMarkdown>
+            <ShellCodeBlockReplyContext.Provider value={reply ?? null}>
+                <ReactMarkdown remarkPlugins={REPLY_PLUGINS} rehypePlugins={fade ? FADE_PLUGINS : NO_PLUGINS} components={replyComponents}>
+                    {text}
+                </ReactMarkdown>
+            </ShellCodeBlockReplyContext.Provider>
         </CodeStreamingContext.Provider>
     );
 });
@@ -206,13 +293,23 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open }: { text: string
  * 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 }: { text: string; streaming: boolean; arriving?: boolean }) {
+export const ReplyMarkdown = memo(function ReplyMarkdown({
+    text,
+    streaming,
+    arriving = false,
+    reply
+}: {
+    text: string;
+    streaming: boolean;
+    arriving?: boolean;
+    reply?: ShellCodeBlockReply;
+}) {
     const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
             {blocks.map((block, index) => (
                 // Blocks only ever grow at the end, so the place of a block is a stable key.
-                <ReplyBlock key={index} text={block.text} fade={streaming} open={streaming && block.openFence} />
+                <ReplyBlock key={index} text={block.text} fade={streaming} open={streaming && block.openFence} reply={reply} />
             ))}
         </div>
     );

package/src/chat/ui/MessageActions.tsx

@@ -9,19 +9,18 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow, useChats } from '../../state/chats';
-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;
+const TIMESTAMP_FORMAT: Intl.DateTimeFormatOptions = { dateStyle: 'full', timeStyle: 'medium' };
 
 type MessageRow = Extract<TimelineRow, { kind: 'user' | 'assistant' }>;
 
-/*
- * 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.
- */
+/* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
 export function MessageActions({ chatId, row }: { chatId: string; row: MessageRow }) {
     const { t } = useTranslation('agent-chat');
+    useFormatLocale();
     const scope = useChatScope();
     const { fork } = chatHost();
     const turnId = row.item.turnId;
@@ -61,8 +60,8 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
             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'
+                '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'
             )}
         >
             {!streaming && (
@@ -83,6 +82,14 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
                     )}
                 </ButtonGroup>
             )}
+            <Tooltip label={formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT)}>
+                <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')}
+                >
+                    {formatClock(row.item.createdAt)}
+                </time>
+            </Tooltip>
         </div>
     );
 }

package/src/chat/ui/SubagentTimeline.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bot, LoaderCircle } from 'lucide-react';
 import { deriveTimelineRows } from '../logic/timeline';
@@ -9,6 +9,8 @@ import { EMPTY_TARGET, readTimelineTarget, type TimelineTarget } from '../logic/
 import { openBelow, useSubagentTrail, type SubagentStep } from '../subagent-view';
 import { Row } from './rows/Rows';
 import { ReplyContext } from './reply-context';
+import { PromptComposer } from './PromptComposer';
+import { useProviders } from '../../state/providers';
 import { SubagentInfo } from './SubagentInfo';
 import { TimelineMenuPopup } from './TimelineMenu';
 import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm';
@@ -27,8 +29,14 @@ const NO_TURNS = new Set<string>();
 export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const connected = useSyncExternalStore(
+        useCallback((changed) => scope.transport.subscribeStatus(changed), [scope]),
+        useCallback(() => scope.transport.status === 'open', [scope]),
+        () => false
+    );
     const { trail, show } = useSubagentTrail(chatId);
     const [state, setState] = useState<SubagentConversationState>(INITIAL_CONVERSATION);
+    const denyReason = useProviders((row) => row.providers.find((provider) => provider.kind === state.context?.provider)?.capabilities.denyReason === true);
     const controller = useRef<SubagentConversation | null>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
     const threadRef = useRef<HTMLDivElement>(null);
@@ -117,6 +125,8 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
                     <ReplyContext.Provider value={state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }}>
                         <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' }}
@@ -165,6 +175,21 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
                     </ReplyContext.Provider>
                 </FileLinkContext.Provider>
             )}
+            {state.context?.chatId !== undefined && state.pending.length > 0 && (
+                <div className="chat-column-content shrink-0">
+                    <PromptComposer
+                        key={state.context.chatId}
+                        chatId={state.context.chatId}
+                        pending={state.pending}
+                        focused={false}
+                        disabled={!connected}
+                        hasDraft={false}
+                        denyReason={denyReason}
+                    >
+                        {null}
+                    </PromptComposer>
+                </div>
+            )}
         </div>
     );
 }