@adecore/agents-react 0.27.3 → 0.27.5

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

@@ -185,7 +185,7 @@ export function ThinkingRow({ chatId, item: derived }) {
     const preview = useMemo(() => (item.streaming ? '' : thoughtPreview(item.text)), [item.streaming, item.text]);
     const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
-    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text", disabled: item.streaming, "aria-expanded": item.streaming ? undefined : open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text min-w-0 truncate", children: live || t('rows.thinking.live') })) : preview === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: open ? t('rows.thinking.thought') : preview }), _jsx("span", { className: "grow" }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: duration }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 border-l border-border pl-2.5 select-text", children: reveal.active ? (_jsx("div", { className: "text-sm whitespace-pre-wrap text-text-faint", children: _jsx(FadingWords, { text: reveal.text }) })) : (_jsx(Markdown, { text: text, muted: true })) }))] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text", disabled: item.streaming, "aria-expanded": item.streaming ? undefined : open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text min-w-0 truncate", children: live || t('rows.thinking.live') })) : preview === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: open ? t('rows.thinking.thought') : preview }), _jsx("span", { className: "grow" }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: duration }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 ml-1.75 border-l border-border pl-4 select-text", children: reveal.active ? (_jsx("div", { className: "text-sm whitespace-pre-wrap text-text-faint", children: _jsx(FadingWords, { text: reveal.text }) })) : (_jsx(Markdown, { text: text, muted: true })) }))] }));
 }
 /*
  * The latest thought of a running turn over the call it led to, as its heading or first sentence,
@@ -257,7 +257,7 @@ export function ApprovalHistoryRow({ item }) {
     if (item.decision === 'pending') {
         return null;
     }
-    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono", children: toolSummaryIsPath(item.toolName, item.input) ? (_jsx(MiddleTruncate, { text: toolSummary(item.toolName, item.input) })) : (toolSummary(item.toolName, item.input)) })] }));
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono text-code", children: toolSummaryIsPath(item.toolName, item.input) ? (_jsx(MiddleTruncate, { text: toolSummary(item.toolName, item.input) })) : (toolSummary(item.toolName, item.input)) })] }));
 }
 export function QuestionHistoryRow({ item }) {
     const { t } = useTranslation('agent-chat');

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

@@ -10,6 +10,7 @@ import { useChatScope } from '../../../scope.js';
 import { useChats } from '../../../state/chats.js';
 import { useProviders } from '../../../state/providers.js';
 import { taskRowStateOf } from '../../subagent-list.js';
+import { ROW_GUTTER } from '../icons.js';
 const DOT = {
     running: 'bg-status-running',
     waiting: 'bg-status-needs-you',
@@ -34,7 +35,7 @@ function StateLine({ state, task }) {
     const { t } = useTranslation('agent-chat');
     const until = state === 'paused' ? task?.paused?.until : undefined;
     const now = useNow(60_000, until === undefined);
-    return (_jsx("span", { className: clsx('truncate text-xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
+    return (_jsx("span", { className: clsx('truncate text-2xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
 }
 /*
  * The row of a task given to another node: that agent's mark and model, what the task is about and
@@ -59,5 +60,5 @@ export function TaskRow({ item, task, open, onPress }) {
     const startedAt = task?.createdAt ?? item.startedAt;
     const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
     const settled = state === 'done' || state === 'failed' || state === 'cancelled';
-    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-center gap-2.5 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: "relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text", children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), (state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
+    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: clsx(ROW_GUTTER, 'relative text-text'), children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), _jsxs("span", { className: "flex h-5 shrink-0 items-center gap-2", children: [(state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] })] }));
 }

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

@@ -76,7 +76,7 @@ export function ToggleLine({ icon, label, brand, detail, command, look, path, op
     const classes = clsx(
     // Fix the width so long commands reach the truncation inside the negative margins.
     'group/line -mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted', onToggle !== undefined && 'hover:bg-surface-hover', failed && 'text-status-error', className);
-    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
     if (onToggle === undefined) {
         return _jsx("div", { className: classes, children: content });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.27.3",
+  "version": "0.27.5",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.27.3",
-    "@adecore/editor": "0.27.3",
-    "@adecore/editor-react": "0.27.3",
-    "@adecore/intelligent-ui": "0.27.3",
-    "@adecore/merge": "0.27.3",
+    "@adecore/agent-contracts": "0.27.5",
+    "@adecore/editor": "0.27.5",
+    "@adecore/editor-react": "0.27.5",
+    "@adecore/intelligent-ui": "0.27.5",
+    "@adecore/merge": "0.27.5",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.27.3",
+    "@adecore/ui": "^0.27.5",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.27.3",
+    "@adecore/ui": "0.27.5",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

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

@@ -381,7 +381,7 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
                 )}
             </button>
             {shown && text !== '' && (
-                <div data-find-field="text" className="mt-1 border-l border-border pl-2.5 select-text">
+                <div data-find-field="text" className="mt-1 ml-1.75 border-l border-border pl-4 select-text">
                     {reveal.active ? (
                         <div className="text-sm whitespace-pre-wrap text-text-faint">
                             <FadingWords text={reveal.text} />
@@ -535,7 +535,7 @@ export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
             <span className={clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error')}>{DECISION_ICON[item.decision]}</span>
             <span className={clsx(item.decision === 'deny' && 'text-status-error')}>{t(`rows.approval.${item.decision}`)}</span>
             <span className="text-text-muted">{item.toolName}</span>
-            <span className="min-w-0 truncate font-mono">
+            <span className="min-w-0 truncate font-mono text-code">
                 {toolSummaryIsPath(item.toolName, item.input) ? (
                     <MiddleTruncate text={toolSummary(item.toolName, item.input)} />
                 ) : (

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

@@ -11,6 +11,7 @@ import { useChatScope } from '../../../scope';
 import { useChats } from '../../../state/chats';
 import { useProviders } from '../../../state/providers';
 import { taskRowStateOf, type TaskRowState } from '../../subagent-list';
+import { ROW_GUTTER } from '../icons';
 
 const DOT: Record<TaskRowState, string> = {
     running: 'bg-status-running',
@@ -40,7 +41,7 @@ function StateLine({ state, task }: { state: TaskRowState; task: SubagentTask |
     const until = state === 'paused' ? task?.paused?.until : undefined;
     const now = useNow(60_000, until === undefined);
     return (
-        <span className={clsx('truncate text-xs', STATE_TONE[state])}>
+        <span className={clsx('truncate text-2xs', STATE_TONE[state])}>
             {until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) })}
         </span>
     );
@@ -70,10 +71,10 @@ export function TaskRow({ item, task, open, onPress }: { item: ChatSubagentItem;
     const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
     const settled = state === 'done' || state === 'failed' || state === 'cancelled';
     return (
-        <button className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-center gap-2.5 rounded-md px-1 py-1 text-left hover:bg-surface-hover" onClick={onPress}>
-            <span className="relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text">
+        <button className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover" onClick={onPress}>
+            <span className={clsx(ROW_GUTTER, 'relative text-text')}>
                 {provider === undefined ? <Icon icon={Bot} size={14} /> : <AgentIcon kind={provider} size={14} />}
-                <span className={clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state])} />
+                <span className={clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state])} />
             </span>
             <span className="flex min-w-0 grow flex-col">
                 <span data-find-field="summary" className="truncate text-xs font-medium text-text">
@@ -81,11 +82,13 @@ export function TaskRow({ item, task, open, onPress }: { item: ChatSubagentItem;
                 </span>
                 <StateLine state={state} task={task} />
             </span>
-            {(state === 'running' || state === 'waiting') && startedAt > 0 && <Elapsed startedAt={startedAt} />}
-            {settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (
-                <span className="shrink-0 text-xs text-text-faint tabular-nums">{formatElapsedShort(finishedAt - startedAt)}</span>
-            )}
-            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            <span className="flex h-5 shrink-0 items-center gap-2">
+                {(state === 'running' || state === 'waiting') && startedAt > 0 && <Elapsed startedAt={startedAt} />}
+                {settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (
+                    <span className="shrink-0 text-xs text-text-faint tabular-nums">{formatElapsedShort(finishedAt - startedAt)}</span>
+                )}
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            </span>
         </button>
     );
 }

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

@@ -162,7 +162,7 @@ export function ToggleLine({
             {look !== undefined ? (
                 <>
                     {look.run.detail !== '' && (
-                        <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
+                        <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
                             <LookDetail run={look.run} chatId={look.chatId} />
                         </span>
                     )}
@@ -170,7 +170,7 @@ export function ToggleLine({
                 </>
             ) : (
                 detail && (
-                    <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
+                    <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
                         {command ? <ShellCommand command={detail} /> : path ? <MiddleTruncate text={detail} /> : detail}
                     </span>
                 )