@adecore/agents-react 0.19.0 → 0.20.1

package/dist/host.d.ts

@@ -40,8 +40,18 @@ export interface ChatActions {
 export interface FileRef {
     path: string;
     line?: number;
+    column?: number;
+    endLine?: number;
     directory: boolean;
 }
+export interface ShellCodeBlockContext {
+    scopeId: string;
+    chatId: string;
+    itemId: string;
+    language: 'sh' | 'bash' | 'zsh';
+    code: string;
+    complete: boolean;
+}
 export interface ChatPlace {
     title: string | null;
     go(): void;
@@ -145,10 +155,12 @@ export interface ChatHost {
         }>;
     };
     useStreaming(): 'words' | 'blocks' | 'whole';
+    useSendDelivery(): 'queue' | 'steer';
     fileLinks: {
-        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;
+    renderShellCodeBlock?: (context: ShellCodeBlockContext) => ReactNode;
     useTimelineFind(options: TimelineFindOptions): TimelineFind;
     dictation: {
         Textarea: ComponentType<TextareaProps>;

package/dist/host.js

@@ -20,6 +20,7 @@ const DEFAULT_HOST = {
     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/dist/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/dist/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/dist/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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -899,7 +899,7 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.7.2",
     "@pierre/diffs": "^1.4.3",
-    "@adecore/agent-contracts": "0.19.0",
+    "@adecore/agent-contracts": "0.20.1",
     "@tanstack/react-virtual": "^3.14.13",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
@@ -912,7 +912,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.19.0",
+    "@adecore/ui": "^0.20.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/chat/chat-client.ts

@@ -28,6 +28,7 @@ interface ChatOpenOptions {
 }
 
 export interface ChatSendExtras {
+    delivery?: 'steer' | 'queue';
     /* Paths picked with `@`; they also sit in the text, this is what the timeline highlights. */
     mentions?: string[];
     /* Skills picked with `$`; they also sit in the text, this is what the timeline chips. */

package/src/chat/logic/timeline-target.ts

@@ -1,6 +1,7 @@
 import type { ChatItem } from '@adecore/agent-contracts';
 import type { TimelineRow } from './timeline';
 import { selectionWithin } from '@adecore/ui';
+import type { FileRef } from '../../host';
 
 /* What the right-click landed on, read once when the menu opens. */
 export interface TimelineTarget {
@@ -13,6 +14,8 @@ export interface TimelineTarget {
     path: string | null;
     /* The line that file reference named, where it named one. */
     line: number | null;
+    /* Captured at menu opening, before the rendering scope or cwd can change. */
+    file?: { ref: FileRef; cwd: string | null; scopeId: string | null } | null;
 }
 
 export const EMPTY_TARGET: TimelineTarget = { selection: '', row: null, code: null, path: null, line: null };
@@ -41,12 +44,34 @@ export function withCurrentText(rows: TimelineRow[], items: Record<string, ChatI
 export function readTimelineTarget(element: HTMLElement, scroller: HTMLElement | null, rows: TimelineRow[]): TimelineTarget {
     const id = element.closest<HTMLElement>('[data-item-id]')?.dataset.itemId;
     const file = element.closest<HTMLElement>('[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<HTMLElement>('[data-file-cwd]')?.dataset.fileCwd || null,
+                      scopeId: file?.closest<HTMLElement>('[data-file-scope-id]')?.dataset.fileScopeId || null
+                  }
     };
 }
+
+function positiveInteger(value: string | undefined): number | null {
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number > 0 ? number : null;
+}

package/src/chat/logic/timeline.ts

@@ -368,23 +368,25 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
         }
         const turnId = chunk.turnId;
         const turn = chunk.items.find((item): item is ChatTurnItem => 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.
@@ -407,7 +409,7 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
             }
         }
         rows.push(...standing);
-        const changed = changedFilesRow(turn, rest);
+        const changed = changedFilesRow(turn, conversation);
         if (changed) {
             rows.push(changed);
         }

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>