@adecore/agents-react 0.20.0 → 0.20.1

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

@@ -117,6 +117,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' }}

package/src/chat/ui/Timeline.tsx

@@ -498,7 +498,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         // A file an answer names is relative to the folder this chat runs in, which is a worktree as
         // often as it is the project itself.
         <FileLinkContext.Provider value={info?.cwd ?? null}>
-            <div ref={frameRef} className="relative flex min-h-0 grow flex-col">
+            <div ref={frameRef} className="relative flex min-h-0 grow flex-col" data-file-cwd={info?.cwd ?? ''} data-file-scope-id={scope.id}>
                 {searching && chatFind.bar}
                 <ContextMenu.Root>
                     <div

package/src/chat/ui/TimelineMenu.tsx

@@ -8,7 +8,7 @@ import type { TimelineTarget } from '../logic/timeline-target';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow } from '../../state/chats';
-import { openFileLink, useFileLinkCwd } from './file-links';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 
 /*
@@ -34,10 +34,13 @@ export function TimelineMenuPopup({
     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 = (): void => {
-        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 (

package/src/chat/ui/file-links.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { chatHost, type FileRef } from '../../host';
+import { ChatScopeContext } from '../../scope';
 
 /*
  * The folder a relative reference in rendered text counts from: a chat's own cwd, which is a
@@ -12,13 +13,18 @@ export function useFileLinkCwd(): string | null {
     return useContext(FileLinkContext);
 }
 
+export function useFileLinkScopeId(): string | null {
+    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: string): FileRef | null {
     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: string | null, ref: FileRef): void {
-    chatHost().fileLinks?.open(cwd, ref);
+export function openFileLink(cwd: string | null, ref: FileRef, scopeId: string | null = null): void {
+    chatHost().fileLinks?.open(cwd, ref, scopeId);
 }

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

@@ -1,4 +1,4 @@
-import { useContext, useState, type ReactNode } from 'react';
+import { useContext, useMemo, useState, type ReactNode } 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';
@@ -188,6 +188,12 @@ function Writing() {
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
     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;
@@ -200,7 +206,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
                 <ReplyHeading chatId={chatId} />
                 {settled !== '' && (
                     <div data-find-field="text" data-quote-answer className="contents">
-                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} />
+                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} reply={reply} />
                     </div>
                 )}
                 {item.streaming && <Writing />}
@@ -219,7 +225,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
         <div data-find-item={item.id} className={clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS)}>
             <ReplyHeading chatId={chatId} />
             <div data-find-field="text" data-quote-answer className="contents">
-                <ReplyMarkdown text={reveal.text} streaming={reveal.active} />
+                <ReplyMarkdown text={reveal.text} streaming={reveal.active} reply={reply} />
             </div>
             {live && item.text === '' && <span className="inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" />}
         </div>

package/src/host.ts

@@ -56,10 +56,22 @@ export interface FileRef {
     path: string;
     /* One-based, when the reference named a line. */
     line?: number;
+    column?: number;
+    endLine?: number;
     /* A trailing separator is the only thing that says a reference means a directory. */
     directory: boolean;
 }
 
+export interface ShellCodeBlockContext {
+    scopeId: string;
+    chatId: string;
+    itemId: string;
+    language: 'sh' | 'bash' | 'zsh';
+    code: string;
+    /* A closed fence in a main reply that has stopped streaming. */
+    complete: boolean;
+}
+
 /* Where another chat stands and how to get there; a null title is a chat that is gone. */
 export interface ChatPlace {
     title: string | null;
@@ -210,12 +222,16 @@ export interface ChatHost {
     };
     /* How a reply appears while it streams: a word, a block or the whole of it at a time. */
     useStreaming(): 'words' | 'blocks' | 'whole';
+    /* How Send handles a running turn; Option or Alt selects the other behavior. */
+    useSendDelivery(): 'queue' | 'steer';
     /* Paths in an answer as links; null leaves them text. */
     fileLinks: {
         /* The reference a piece of text names, where the folder it counts from lets it be opened. */
-        target(text: string, cwd: string | null): FileRef | null;
-        open(cwd: string | null, ref: FileRef): void;
+        target(text: string, cwd: string | null, scopeId?: string | null): FileRef | null;
+        open(cwd: string | null, ref: FileRef, scopeId?: string | null): void;
     } | null;
+    /* Renders in a main reply's shell block action group. Rendering must not execute an action. */
+    renderShellCodeBlock?: (context: ShellCodeBlockContext) => ReactNode;
     /* Find in a thread; without one the thread has no find. */
     useTimelineFind(options: TimelineFindOptions): TimelineFind;
     dictation: {
@@ -296,6 +312,7 @@ const DEFAULT_HOST: ChatHost = {
     ReadImage: null,
     code: { useMode: () => 'light', useThemes: () => ({ light: 'github-light', dark: 'github-dark' }), custom: [] },
     useStreaming: () => 'words',
+    useSendDelivery: () => 'queue',
     fileLinks: null,
     useTimelineFind: () => NO_FIND,
     dictation: { Textarea: PlainTextarea, composer: null },

package/src/locales/en/agent-chat.json

@@ -307,7 +307,9 @@
       "description": "A turn is running. Stop it and clear the thread?",
       "confirm": "Stop and clear"
     },
-    "waitingBelow": "Waiting for your answer below"
+    "waitingBelow": "Waiting for your answer below",
+    "steerButton": "Send to the running agent. Hold Option or Alt to queue after this turn.",
+    "queueWithSteerButton": "Queue after this turn. Hold Option or Alt to send to the running agent."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -454,5 +456,9 @@
       "failed": "failed",
       "cancelled": "cancelled"
     }
+  },
+  "code": {
+    "actions": "Code actions",
+    "copyFailed": "Could not copy the code. Try again."
   }
 }

package/src/locales/nl/agent-chat.json

@@ -307,7 +307,9 @@
       "description": "Er loopt een turn. Die stoppen en de thread wissen?",
       "confirm": "Stoppen en wissen"
     },
-    "waitingBelow": "Wacht hieronder op je antwoord"
+    "waitingBelow": "Wacht hieronder op je antwoord",
+    "steerButton": "Stuur naar de werkende agent. Houd Option of Alt ingedrukt om te wachten tot deze beurt klaar is.",
+    "queueWithSteerButton": "Wacht tot deze beurt klaar is. Houd Option of Alt ingedrukt om naar de werkende agent te sturen."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -454,5 +456,9 @@
       "failed": "mislukt",
       "cancelled": "geannuleerd"
     }
+  },
+  "code": {
+    "actions": "Codeacties",
+    "copyFailed": "De code kon niet worden gekopieerd. Probeer het opnieuw."
   }
 }

package/src/theme.css

@@ -193,9 +193,26 @@
 .chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
-.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: auto; }
-.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
+.chat-code { position: relative; min-height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: hidden; }
+.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); overflow: auto; user-select: text; background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
 .chat-code code { font-family: inherit; }
+.chat-code-actions { position: absolute; top: 4px; right: 4px; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); box-shadow: 0 0 0 1px var(--border); }
+.chat-code-error { margin: 0; padding: 0 12px 10px; color: var(--status-error); font-size: var(--text-sm); }
+@media (hover: hover) and (pointer: fine) {
+    .chat-code-actions { opacity: 0; pointer-events: none; }
+    .chat-code:hover .chat-code-actions, .chat-code:focus-within .chat-code-actions,
+    .chat-code[data-copy-state="failed"] .chat-code-actions, .chat-code-actions:has([aria-busy="true"]) { opacity: 1; pointer-events: auto; }
+}
+@media (pointer: coarse) {
+    .chat-code { min-height: 54px; }
+    .chat-code-actions { padding: 8px; gap: 17px; }
+    .chat-code-actions .icon-btn { position: relative; }
+    .chat-code-actions .icon-btn::after { content: ''; position: absolute; inset: -8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .chat-code-actions .icon-btn { transition: none; }
+    .chat-code-actions .icon-btn:active { scale: 1; }
+}
 
 /* The chat composer is a CodeMirror editor, whose base theme lands in an unlayered style tag at
    mount. These rules stay unlayered too, and carry one class more than the theme's selectors. */