@adecore/agents-react 0.17.0-beta.1 → 0.17.0-beta.2

package/LICENSE

@@ -6,7 +6,7 @@ FSL-1.1-MIT
 
 ## Notice
 
-Copyright 2026 Bas Milius
+Copyright 2026 - present Bas Milius
 
 ## Terms and Conditions
 

package/README.md

@@ -1,53 +1,61 @@
 # @adecore/agents-react
 
-React agent chat threads, a CodeMirror composer, approvals/questions, provider account settings, and usage views. The host supplies a typed connection and adapters for files, permissions, login, task state, and navigation. Backend provider execution stays outside the browser.
+[![npm](https://img.shields.io/npm/v/@adecore/agents-react)](https://www.npmjs.com/package/@adecore/agents-react)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/agents-react/)
 
-Import per module. There is no root barrel:
+React views for agent chats: the thread, the composer, approvals and questions, the agent CLIs and their accounts, and what they cost. They talk to a host of chats, such as [`@adecore/agents`](https://adecore.dev/agents/), over the requests of [`@adecore/agent-contracts`](https://adecore.dev/agent-contracts/). Built on React 19, [`@adecore/ui`](https://adecore.dev/ui/) and Tailwind 4.
 
-```tsx
-import { Composer } from '@adecore/agents-react/chat/ui/Composer';
-import { Timeline } from '@adecore/agents-react/chat/ui/Timeline';
-import { ChatClient } from '@adecore/agents-react/chat/chat-client';
-import { portTransport } from '@adecore/agents-react/port-transport';
+**[Documentation with live demos](https://adecore.dev/agents-react/)**
+
+## Install
 
-export const agentViews = { Composer, Timeline, ChatClient, portTransport };
+```sh
+bun add @adecore/agents-react @adecore/agent-contracts
 ```
 
-The host brings React/React DOM 19, i18next, react-i18next, and `@adecore/ui` as peers. The package depends on `@adecore/agent-contracts` and uses Zustand, CodeMirror, Shiki, and the diff library. Consult the manifest for exact peer ranges. Import `@adecore/ui/theme.css` before `@adecore/agents-react/theme.css`; use Tailwind 4, scan linked `src` or compiled `dist`, and load the typography plugin. Terminal/find colors need host tokens and utility mappings.
+`@adecore/ui`, React 19, `react-dom`, `i18next` and `react-i18next` are peer dependencies.
 
-Configure `setChatHost({ storage })` before any persistent store use. A `ChatScopeContext` supplies one stable transport/client per backend. The host singleton and persistence configuration are shared across scopes. Use unique chat IDs across scopes because drafts use raw IDs. `portTransport.close()` rejects waiting requests and stops frame listening; the owner also closes its native port. `ChatClient.dispose()` releases subscriptions and detaches views without stopping agents.
+## Set up
 
-## Documentation
+Import the theme after the one of `@adecore/ui`, let Tailwind scan the package, and load the typography plugin. The `@source` path is relative to the CSS file.
 
-- [Overview](../../docs/agents-react/index.md)
-- [Installation and setup](../../docs/agents-react/getting-started.md)
-- [Host adapters](../../docs/agents-react/host.md)
-- [Chat state and lifecycle](../../docs/agents-react/chat-lifecycle.md)
-- [Composer](../../docs/agents-react/composer.md)
-- [Attachments and mentions](../../docs/agents-react/attachments.md)
-- [Messages and timeline](../../docs/agents-react/timeline.md)
-- [Approvals and tasks](../../docs/agents-react/approvals-tasks.md)
-- [Accounts and models](../../docs/agents-react/accounts-models.md)
-- [Usage](../../docs/agents-react/usage.md)
-- [Persistence](../../docs/agents-react/persistence.md)
-- [CSS, theme, and translations](../../docs/agents-react/styling.md)
-- [Testing](../../docs/agents-react/testing.md)
-- [Migration](../../docs/agents-react/migration.md)
-- [Troubleshooting](../../docs/agents-react/troubleshooting.md)
-- [Runtime reference](../../docs/agents-react/reference-runtime.md)
-- [Chat reference](../../docs/agents-react/reference-chat.md)
-- [Settings reference](../../docs/agents-react/reference-settings.md)
+```css
+@import "tailwindcss";
+@import "@adecore/ui/theme.css";
+@import "@adecore/agents-react/theme.css";
+@plugin "@tailwindcss/typography";
+@source "../node_modules/@adecore/agents-react/dist";
+```
 
-The reference pages group all preserved module subpaths, including lower-level renderers, prompt/session helpers, account forms, and usage formatters. `DiffPool`, `EditDiff`, and `UnifiedDiff` use default exports.
+Add the words of `AGENTS_LOCALES` to your i18next, call `setChatHost` once, and render the views in a `ChatScopeContext`:
 
-## Compatibility and verification
+```tsx
+import { Composer } from '@adecore/agents-react/chat/ui/Composer';
+import { Timeline } from '@adecore/agents-react/chat/ui/Timeline';
+import { ChatScopeContext } from '@adecore/agents-react/scope';
+
+<ChatScopeContext.Provider value={scope}>
+    <Timeline chatId={chatId} composer={<Composer chatId={chatId} info={info} {...composerProps} />} />
+</ChatScopeContext.Provider>;
+```
+
+[Getting started](https://adecore.dev/agents-react/guide/getting-started) covers the words, the host, the scope and its transport.
 
-Storage keys default to `adecore.chat.drafts`, `adecore.chat.preferences`, `adecore.chat.stash`, and `adecore.usage`. Keep previous keys/namespace in place or configure ordered legacy keys to copy raw records unchanged, retaining their old copies. Setup after hydration throws. Custom synchronous storage and memory-only storage are supported; failed draft writes may omit attachment bytes. See the persistence guide for formats and cross-window listeners.
+Every module has its own subpath, `@adecore/agents-react/<path>`; there is no root import.
 
-Mention drags use `application/x-adecore-mention`. `writeMentionDrag` writes both new and transitional formats by default, and `carriesMentions`/`droppedMentions` read both. Migrate producers and receivers together before disabling legacy writes. The existing space-separated payload still cannot represent whitespace-containing paths as one token. The chat CodeMirror input is separate from the file editor.
+## Documentation
 
-`AGENTS_LOCALES` loads English/Dutch for `agent-chat`, `agent-prompts`, `agent-providers`, and `agent-usage`. Load them on the default i18next instance used by package helpers and React. `UIProvider` supplies UI words and formatter setup separately.
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/agents-react/guide/getting-started) | Install, CSS, words, the host and a first chat |
+| [Host adapters](https://adecore.dev/agents-react/guide/host) | Everything `setChatHost` takes |
+| [Chat client and state](https://adecore.dev/agents-react/guide/chat-client) | The transport, `ChatClient` and the stores |
+| [Persistence](https://adecore.dev/agents-react/guide/persistence) | Drafts, preferences and their storage keys |
+| [Chat](https://adecore.dev/agents-react/chat/timeline) | The timeline, the composer, prompts and their parts, each with a live demo |
+| [Providers](https://adecore.dev/agents-react/providers/providers-pane) | The settings of the CLIs and their accounts |
+| [Usage](https://adecore.dev/agents-react/usage/usage-page) | Cost, charts and plan limits |
+| [Modules](https://adecore.dev/agents-react/reference) | Every subpath and its exports |
 
-Build dependencies before default-export checks. The [agent-port example](../../examples/agent-port) safely verifies `AgentHost`, a fake CLI, `FramePort`, `portTransport`, `ChatClient`, rendered scope context, locale loading, reply state, and structured refusals. `fixtures/storage.mjs` runs storage compatibility checks in a fresh process. Package typecheck/tests and source/default consumer checks are described in the testing guide.
+## License
 
-This package remains private at `0.0.0` pending publication setup. Source-condition imports support a linked checkout; default exports require built artifacts. The transferred code retains FSL-1.1-MIT; see [LICENSE](./LICENSE).
+FSL-1.1-MIT. See [LICENSE](./LICENSE).

package/dist/chat/logic/ansi.js

@@ -125,8 +125,8 @@ function applyRendition(state, parameters) {
 }
 function styleOf(state) {
     const style = {};
-    const color = state.inverse ? (state.background ?? 'var(--term-bg)') : state.foreground;
-    const background = state.inverse ? (state.foreground ?? 'var(--term-fg)') : state.background;
+    const color = state.inverse ? (state.background ?? 'var(--chat-code-bg)') : state.foreground;
+    const background = state.inverse ? (state.foreground ?? 'var(--chat-output)') : state.background;
     if (color !== undefined || state.dim) {
         style.color = state.dim ? `color-mix(in srgb, ${color ?? 'currentColor'} 65%, transparent)` : color;
     }

package/dist/chat/ui/Scrubber.js

@@ -112,7 +112,7 @@ export const Scrubber = memo(function Scrubber({ ticks, firstInView, lastInView,
                                 const distance = pointing && hoveredSlot !== null ? Math.abs(index - hoveredSlot) : null;
                                 // A bookmark is a place to find again from anywhere, so it never dims with the rest.
                                 const bright = slot.marked || slotInView(slot, inView) || distance === 0;
-                                return (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": true, className: clsx('absolute left-1 rounded-full transition-[width,opacity] duration-100 ease-out motion-reduce:transition-none', slot.marked ? 'bg-accent' : slot.kind === 'wake' ? 'bg-text-muted' : 'bg-text', bright ? 'opacity-100' : 'opacity-30'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: tickWidth(slot.kind, distance) } }), slot.found && (_jsx("span", { "aria-hidden": true, className: clsx('absolute right-0 rounded-full bg-find-current', index === currentSlot ? 'opacity-100' : 'opacity-50'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: FOUND_WIDTH_PX } }))] }, slot.first));
+                                return (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": true, className: clsx('absolute left-1 rounded-full transition-[width,opacity] duration-100 ease-out motion-reduce:transition-none', slot.marked ? 'bg-accent' : slot.kind === 'wake' ? 'bg-text-muted' : 'bg-text', bright ? 'opacity-100' : 'opacity-30'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: tickWidth(slot.kind, distance) } }), slot.found && (_jsx("span", { "aria-hidden": true, className: clsx('absolute right-0 rounded-full bg-chat-find', index === currentSlot ? 'opacity-100' : 'opacity-50'), style: { top: slot.y, height: TICK_HEIGHT_PX, width: FOUND_WIDTH_PX } }))] }, slot.first));
                             }) }), _jsx(PreviewCard.Popup, { anchor: anchor, side: "right", align: "center", sideOffset: 4, className: "w-72", children: hoveredTick !== null && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "px-2.5 pt-1.5 pb-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs text-text-faint", children: [hoveredTick.bookmark === null ? (_jsx("span", { children: hoveredTick.kind === 'person' ? t('rows.user.heading') : t('scrubber.tasks') })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-1 self-center text-text-muted", children: [_jsx(Icon, { icon: Bookmark, size: 12, className: "shrink-0 text-accent" }), _jsx("span", { className: "truncate", children: hoveredTick.bookmark.name ?? t('bookmarks.unnamed') })] })), _jsx("time", { className: "tabular-nums", children: timeOf(hoveredTick.createdAt) })] }), _jsx("p", { className: "mt-1 line-clamp-4 text-sm break-words whitespace-pre-line text-text", children: hoveredTick.text.slice(0, PREVIEW_CHARS) || t('pickers.stash.noText') })] }), actions.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), actions.map((action) => (_jsxs("button", { type: "button", className: "menu-item w-full hover:bg-surface-hover", onClick: () => action.run(hoveredTick, chat), children: [_jsx(Icon, { icon: action.icon, size: 14 }), " ", t(action.label)] }, action.label)))] }))] })) })] }) }), _jsxs(ContextMenu.Popup, { children: [menuTick !== null &&
                         actionsFor(menuTick).map((action) => (_jsxs(ContextMenu.Item, { onClick: () => action.run(menuTick, chat), children: [_jsx(Icon, { icon: action.icon, size: 14 }), " ", t(action.label)] }, action.label))), menuTick !== null && actionsFor(menuTick).length > 0 && menuMarkable !== null && _jsx(ContextMenu.Separator, {}), chat !== null && menuIndex !== null && menuMarkable !== null && (_jsx(BookmarkMenuItems, { chatId: chat.chatId, itemId: menuMarkable, onName: () => onPick(menuIndex) }))] })] }));
 });

package/dist/chat/ui/UnifiedDiff.js

@@ -32,10 +32,10 @@ pre > [data-code] { flex-grow: 1; align-self: stretch; align-content: start; }
 `;
 function lineClass(line) {
     if (line.startsWith('+')) {
-        return 'text-term-green';
+        return 'text-chat-added';
     }
     if (line.startsWith('-')) {
-        return 'text-term-red';
+        return 'text-chat-removed';
     }
     return 'text-text-muted';
 }

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

@@ -34,7 +34,7 @@ function ToolBody({ tool }) {
     const { t } = useTranslation('agent-chat');
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-term-red' : 'text-term-fg'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
 /* One settled tool call: a line, and its input and output behind it. An image the call looked at
    is drawn under the line, because a picture says more about that read than its path does. */
@@ -56,7 +56,7 @@ export function WorkLiveRow({ chatId, tool: derived }) {
     const [open, setOpen] = useState(false);
     const tool = useCurrentItem(chatId, derived);
     const tail = liveOutput(tool);
-    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-term-fg select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
+    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
 }
 /* A run of tool calls as one line ("Read 4 files"); opening it lists every call. */
 export function WorkGroupRow({ tools, summary, expanded, onToggle }) {
@@ -91,7 +91,7 @@ function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, c
         setSeenReveal(revealNonce);
         setExpanded(true);
     }
-    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-term-green tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-term-red tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
+    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
 }
 /*
  * The files a settled turn changed, as a card; each file opens its diff in place. The host's
@@ -126,7 +126,7 @@ export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
     const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
     if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
         const files = checkpointDiff.files;
-        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": file.path, onClick: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-term-green tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-term-red tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": file.path, onClick: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }

package/dist/theme.css

@@ -18,6 +18,8 @@
     --chart-context-files: #9a63e0;
     --chart-context-conversation: #2f9e5a;
     --chart-context-system: var(--text-faint);
+    /* The current hit of a find, which has to stand out from the accent of a bookmark next to it. */
+    --chat-find: #facc15;
 }
 
 [data-theme="dark"] {
@@ -31,6 +33,16 @@
     --chart-context-files: #b98af3;
     --chart-context-conversation: #6dd08b;
     --chart-context-system: var(--text-faint);
+    --chat-find: #f5c542;
+}
+
+/* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
+   and the base theme's otherwise. Declared on every themed element, so a nested theme resolves its own. */
+:root, [data-theme] {
+    --chat-code-bg: var(--term-bg, var(--surface-sunken));
+    --chat-output: var(--term-fg, var(--text));
+    --chat-added: var(--term-ansi-green, var(--positive));
+    --chat-removed: var(--term-ansi-red, var(--status-error));
 }
 
 @theme inline {
@@ -44,6 +56,10 @@
     --color-chart-context-files: var(--chart-context-files);
     --color-chart-context-conversation: var(--chart-context-conversation);
     --color-chart-context-system: var(--chart-context-system);
+    --color-chat-find: var(--chat-find);
+    --color-chat-output: var(--chat-output);
+    --color-chat-added: var(--chat-added);
+    --color-chat-removed: var(--chat-removed);
 }
 
 @layer components {
@@ -160,7 +176,7 @@
 .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(--term-bg); overflow: auto; }
+.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 code { font-family: inherit; }
 

package/package.json

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

package/src/chat/logic/ansi.ts

@@ -144,8 +144,8 @@ function applyRendition(state: AnsiState, parameters: string): AnsiState {
 
 function styleOf(state: AnsiState): CSSProperties {
     const style: CSSProperties = {};
-    const color = state.inverse ? (state.background ?? 'var(--term-bg)') : state.foreground;
-    const background = state.inverse ? (state.foreground ?? 'var(--term-fg)') : state.background;
+    const color = state.inverse ? (state.background ?? 'var(--chat-code-bg)') : state.foreground;
+    const background = state.inverse ? (state.foreground ?? 'var(--chat-output)') : state.background;
     if (color !== undefined || state.dim) {
         style.color = state.dim ? `color-mix(in srgb, ${color ?? 'currentColor'} 65%, transparent)` : color;
     }

package/src/chat/ui/Scrubber.tsx

@@ -198,10 +198,7 @@ export const Scrubber = memo(function Scrubber({
                                     {slot.found && (
                                         <span
                                             aria-hidden
-                                            className={clsx(
-                                                'absolute right-0 rounded-full bg-find-current',
-                                                index === currentSlot ? 'opacity-100' : 'opacity-50'
-                                            )}
+                                            className={clsx('absolute right-0 rounded-full bg-chat-find', index === currentSlot ? 'opacity-100' : 'opacity-50')}
                                             style={{ top: slot.y, height: TICK_HEIGHT_PX, width: FOUND_WIDTH_PX }}
                                         />
                                     )}

package/src/chat/ui/UnifiedDiff.tsx

@@ -35,10 +35,10 @@ pre > [data-code] { flex-grow: 1; align-self: stretch; align-content: start; }
 
 function lineClass(line: string): string {
     if (line.startsWith('+')) {
-        return 'text-term-green';
+        return 'text-chat-added';
     }
     if (line.startsWith('-')) {
-        return 'text-term-red';
+        return 'text-chat-removed';
     }
     return 'text-text-muted';
 }

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

@@ -103,7 +103,7 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
                     data-find-field="output"
                     className={clsx(
                         'max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text',
-                        tool.state === 'error' ? 'text-term-red' : 'text-term-fg'
+                        tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'
                     )}
                 >
                     <AnsiOutput text={tool.output} limit={OUTPUT_LIMIT} />
@@ -161,7 +161,7 @@ export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: C
             />
             {open && <ToolBody tool={tool} />}
             {tail !== null && !open && (
-                <pre className="mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-term-fg select-text">
+                <pre className="mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text">
                     <AnsiOutput text={tail} tailLines={12} />
                 </pre>
             )}
@@ -267,8 +267,8 @@ function ChangedFilesCard({
                 <span className="shrink-0 font-medium text-text">{t('work.changedFiles', { count })}</span>
                 {truncated && <span className="min-w-0 truncate text-text-faint">{t('work.andMore')}</span>}
                 <span className="grow" />
-                {added !== undefined && <span className="text-term-green tabular-nums">+{added}</span>}
-                {deleted !== undefined && <span className="text-term-red tabular-nums">-{deleted}</span>}
+                {added !== undefined && <span className="text-chat-added tabular-nums">+{added}</span>}
+                {deleted !== undefined && <span className="text-chat-removed tabular-nums">-{deleted}</span>}
                 <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90')} />
             </button>
             {expanded && children}
@@ -343,8 +343,8 @@ export function ChangedFilesRow({
                             />
                             <span className="min-w-0 truncate font-mono text-text">{file.path}</span>
                             <span className="grow" />
-                            <span className="text-term-green tabular-nums">+{file.added}</span>
-                            <span className="text-term-red tabular-nums">-{file.deleted}</span>
+                            <span className="text-chat-added tabular-nums">+{file.added}</span>
+                            <span className="text-chat-removed tabular-nums">-{file.deleted}</span>
                         </button>
                         {open[file.path] && (
                             <div className="border-t border-border">

package/src/theme.css

@@ -18,6 +18,8 @@
     --chart-context-files: #9a63e0;
     --chart-context-conversation: #2f9e5a;
     --chart-context-system: var(--text-faint);
+    /* The current hit of a find, which has to stand out from the accent of a bookmark next to it. */
+    --chat-find: #facc15;
 }
 
 [data-theme="dark"] {
@@ -31,6 +33,16 @@
     --chart-context-files: #b98af3;
     --chart-context-conversation: #6dd08b;
     --chart-context-system: var(--text-faint);
+    --chat-find: #f5c542;
+}
+
+/* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
+   and the base theme's otherwise. Declared on every themed element, so a nested theme resolves its own. */
+:root, [data-theme] {
+    --chat-code-bg: var(--term-bg, var(--surface-sunken));
+    --chat-output: var(--term-fg, var(--text));
+    --chat-added: var(--term-ansi-green, var(--positive));
+    --chat-removed: var(--term-ansi-red, var(--status-error));
 }
 
 @theme inline {
@@ -44,6 +56,10 @@
     --color-chart-context-files: var(--chart-context-files);
     --color-chart-context-conversation: var(--chart-context-conversation);
     --color-chart-context-system: var(--chart-context-system);
+    --color-chat-find: var(--chat-find);
+    --color-chat-output: var(--chat-output);
+    --color-chat-added: var(--chat-added);
+    --color-chat-removed: var(--chat-removed);
 }
 
 @layer components {
@@ -160,7 +176,7 @@
 .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(--term-bg); overflow: auto; }
+.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 code { font-family: inherit; }