@adecore/agents-react 0.23.1 → 0.24.0

package/src/chat/ui/Pickers.tsx

@@ -6,12 +6,12 @@ import { AgentIcon } from '../../agents/AgentIcon';
 import { ProviderLogo } from '../../agents/ProviderLogo';
 import { agentChipOf, modelName } from '../../agents/model-name';
 import { modelRequirementOf } from '../../agents/model-requirement';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { ChatScopeContext } from '../../scope';
 import { useReportedModels } from '../../state/chats';
 import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
-import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+import { Icon, IconButton, Menu, Pill, Popover, Tooltip } from '@adecore/ui';
 
 const triggerClass =
     'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
@@ -58,6 +58,7 @@ export function ModelPicker({
     finalFocus,
     footer
 }: ModelPickerProps) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const [query, setQuery] = useState('');
     const [legacyOpen, setLegacyOpen] = useState(false);
@@ -73,7 +74,7 @@ export function ModelPicker({
 
     const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen), [providers, trimmed, legacyOpen]);
     const scope = useContext(ChatScopeContext);
-    const machine = chatHost().useMachineLabel(scope?.id ?? '');
+    const machine = host.useMachineLabel(scope?.id ?? '');
     const reported = useReportedModels(provider);
     const requirementOf = (entry: PickerEntry & { kind: 'model' }) => modelRequirementOf(entry.model, entry.provider, reported);
     // A CLI that is too old blocks all its models; one way to its settings under the group says it once.
@@ -205,9 +206,9 @@ export function ModelPicker({
                                         <Menu.Check kind="radio" checked={chosen} />
                                         <span className="min-w-0 truncate">{entry.model.name}</span>
                                         {entry.model.badge && (
-                                            <span className="rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent">
-                                                {entry.model.badge}
-                                            </span>
+                                            <Pill tone="accent" shape="tag" size="sm">
+                                                {entry.model.badge.charAt(0).toLocaleUpperCase() + entry.model.badge.slice(1)}
+                                            </Pill>
                                         )}
                                         <span className="grow" />
                                         {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
@@ -226,7 +227,7 @@ export function ModelPicker({
                                         className="cursor-row flex w-full items-center rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted"
                                         onClick={() => {
                                             setOpen(false);
-                                            chatHost().openSettings('providers');
+                                            host.openSettings('providers');
                                         }}
                                     >
                                         {t('pickers.model.providerSettings')}

package/src/chat/ui/PromptComposer.tsx

@@ -8,7 +8,7 @@ import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf, type Prom
 import { useFocusAfterAnswer } from '../../prompts/logic/useFocusAfterAnswer';
 import { usePromptSession } from '../../prompts/logic/usePromptSession';
 import { PromptView } from '../../prompts/ui/PromptView';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { Button, Icon } from '@adecore/ui';
@@ -53,10 +53,11 @@ export function PromptComposer({
 }) {
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
+    const host = useChatHost();
     const actions = useChatActions();
     const elsewhere = onShowElsewhere !== undefined;
     // A card the app raises itself waits in the chat beside the CLI's own requests.
-    const extra = chatHost().prompts.useExtra(id, chatId);
+    const extra = host.prompts.useExtra(id, chatId);
     const subjects = useMemo(
         (): PromptSubject[] => [
             ...pending.map((item): PromptSubject => ({ kind: 'chat', nodeId: chatId, item })),
@@ -117,7 +118,7 @@ export function PromptComposer({
                         onAction={(action) => {
                             refocus.hold();
                             void session
-                                .act(active, () => answerPrompt(active, action, actions))
+                                .act(active, () => answerPrompt(active, action, actions, host))
                                 .then((result) => {
                                     if (result === 'failed') {
                                         refocus.release();

package/src/chat/ui/RowTime.tsx

@@ -0,0 +1,21 @@
+import { Tooltip } from '@adecore/ui';
+import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { TIMESTAMP_FORMAT } from './timestamp-format';
+
+/*
+ * The wall-clock time of a row at its right edge, shown only while an element marked `group/line`
+ * around it is hovered or has the keyboard focus. Hidden, it takes no room and is no tab stop.
+ */
+export function RowTime({ at }: { at: number }) {
+    useFormatLocale();
+    return (
+        <Tooltip label={formatDateTime(at, TIMESTAMP_FORMAT)}>
+            <time
+                dateTime={new Date(at).toISOString()}
+                className="hidden shrink-0 text-xs text-text-faint tabular-nums select-none group-hover/line:inline group-focus-visible/line:inline group-has-focus-visible/line:inline"
+            >
+                {formatClock(at)}
+            </time>
+        </Tooltip>
+    );
+}

package/src/chat/ui/RunSettings.tsx

@@ -25,8 +25,8 @@ import { modelName, shortModelName } from '../../agents/model-name';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions, type ContextPart } from '../logic/context-usage';
 import { RUNTIME_MODES } from '../runtime-modes';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
-import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
-import { chatHost } from '../../host';
+import { Icon, Menu, Pill, Tooltip, useNow } from '@adecore/ui';
+import { useChatHost } from '../../host';
 import { useUsageLimits } from '../../usage/limits';
 
 const MINUTE_MS = 60_000;
@@ -177,7 +177,11 @@ export function RunSettings({
                     <Menu.RadioItem key={row.slug} value={modelValue(entry.kind, row.slug)} closeOnClick>
                         <AgentIcon kind={entry.kind} size={14} className="shrink-0" />
                         <span className="min-w-0 truncate">{row.name}</span>
-                        {row.badge && <span className="rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent">{row.badge}</span>}
+                        {row.badge && (
+                            <Pill tone="accent" shape="tag" size="sm">
+                                {row.badge.charAt(0).toLocaleUpperCase() + row.badge.slice(1)}
+                            </Pill>
+                        )}
                     </Menu.RadioItem>
                 ))}
             </Menu.Group>
@@ -308,6 +312,7 @@ function sessionTone(used: number): { bar: string; text: string } {
  * the conversation goes along to those. A switch applies from the next turn.
  */
 function AccountSubmenu({ provider, account }: { provider: AgentKind; account: AccountPick }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { choice, started, onPick } = account;
     return (
@@ -330,7 +335,7 @@ function AccountSubmenu({ provider, account }: { provider: AgentKind; account: A
                     </Menu.RadioGroup>
                 </Menu.Group>
                 <Menu.Separator />
-                <Menu.Item className="text-text-muted" onClick={() => chatHost().openSettings('providers')}>
+                <Menu.Item className="text-text-muted" onClick={() => host.openSettings('providers')}>
                     <Icon icon={Settings} size={14} className="shrink-0 text-text-faint" />
                     {t('pickers.account.manage')}
                 </Menu.Item>

package/src/chat/ui/ShellCommand.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import type { BundledLanguage } from 'shiki';
+import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode } from '../logic/embedded-code';
+import type { CodeToken } from './code-lines';
+import { useChatHost } from '../../host';
+import { useCodeTheme } from './code-theme';
+import { tokenStyle, useCodeHighlighter, type CodeHighlighter, type Highlighter } from './highlighter';
+
+/* One colored run of a command, as offsets into it. */
+interface Run extends CodeToken {
+    start: number;
+    end: number;
+}
+
+// Rows redraw often and a thread holds many commands, so each is tokenized once per theme.
+const CACHE_LIMIT = 300;
+const cache = new Map<string, Run[]>();
+
+/* The runs of `code` in one language, placed at `offset`; a run in the theme's own foreground takes the color around it. */
+function runsOf(highlighter: Highlighter, code: string, language: string, theme: string, offset: number): Run[] {
+    const fg = highlighter.getTheme(theme).fg.toLowerCase();
+    const { tokens } = highlighter.codeToTokens(code, { lang: language as BundledLanguage, theme });
+    return tokens.flat().map((token) => ({
+        start: offset + token.offset,
+        end: offset + token.offset + token.content.length,
+        content: token.content,
+        color: token.color?.toLowerCase() === fg ? undefined : token.color,
+        fontStyle: token.fontStyle
+    }));
+}
+
+/* `base` with `[start, end)` cut out of it and `inner` in its place. */
+function overlay(base: readonly Run[], start: number, end: number, inner: readonly Run[]): Run[] {
+    const kept: Run[] = [];
+    for (const run of base) {
+        if (run.end <= start || run.start >= end) {
+            kept.push(run);
+            continue;
+        }
+        if (run.start < start) {
+            kept.push({ ...run, end: start, content: run.content.slice(0, start - run.start) });
+        }
+        if (run.end > end) {
+            kept.push({ ...run, start: end, content: run.content.slice(end - run.start) });
+        }
+    }
+    return [...kept, ...inner].sort((left, right) => left.start - right.start);
+}
+
+function languagesOf(command: string): Set<string> {
+    return new Set([SHELL_LANGUAGE, ...embeddedCode(command).map(({ language }) => language)]);
+}
+
+/* The colored runs of a command, or null while a grammar or the theme is still on its way. */
+function highlight(command: string, theme: string, code: CodeHighlighter): Run[] | null {
+    const key = `${theme}\n${command}`;
+    const known = cache.get(key);
+    if (known !== undefined) {
+        // Touched entries move to the end, so the oldest falls out first.
+        cache.delete(key);
+        cache.set(key, known);
+        return known;
+    }
+    const embedded = embeddedCode(command);
+    const highlighter = code.ready([SHELL_LANGUAGE, ...embedded.map(({ language }) => language)], theme);
+    if (highlighter === null) {
+        return null;
+    }
+    let runs = runsOf(highlighter, command, code.language(SHELL_LANGUAGE), theme, 0);
+    for (const part of embedded) {
+        runs = overlay(runs, part.start, part.end, runsOf(highlighter, command.slice(part.start, part.end), code.language(part.language), theme, part.start));
+    }
+    cache.set(key, runs);
+    if (cache.size > CACHE_LIMIT) {
+        cache.delete(cache.keys().next().value!);
+    }
+    return runs;
+}
+
+function draw(command: string, runs: readonly Run[]): ReactNode[] {
+    const parts: ReactNode[] = [];
+    let at = 0;
+    for (const run of runs) {
+        // Shiki leaves the line breaks out of its tokens; they come from the command itself.
+        if (run.start > at) {
+            parts.push(command.slice(at, run.start));
+        }
+        const style = tokenStyle(run);
+        parts.push(
+            style === undefined ? (
+                run.content
+            ) : (
+                <span key={run.start} style={style}>
+                    {run.content}
+                </span>
+            )
+        );
+        at = run.end;
+    }
+    if (at < command.length) {
+        parts.push(command.slice(at));
+    }
+    return parts;
+}
+
+/*
+ * A shell command in the colors of the code theme, with the code inside it (a `bash -lc` script, a
+ * `python3 -c` argument, a heredoc) in its own language. Plain text until the grammars are in, which
+ * changes no size; a command past the limit stays plain.
+ */
+export function ShellCommand({ command }: { command: string }) {
+    const theme = useCodeTheme();
+    const { custom } = useChatHost().code;
+    const highlighter = useCodeHighlighter();
+    // Bumped when a load settles, so the cache is asked again.
+    const [, setLoads] = useState(0);
+    const tooLong = command.length > EMBEDDED_CODE_LIMIT;
+    const runs = tooLong ? null : highlight(command, theme, highlighter);
+
+    useEffect(() => {
+        if (runs !== null || tooLong) {
+            return;
+        }
+        let cancelled = false;
+        Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command)].map((lang) => highlighter.loadLanguage(lang))])
+            .then(() => !cancelled && setLoads((count) => count + 1))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [highlighter, command, theme, custom, runs, tooLong]);
+
+    return <>{runs === null ? command : draw(command, runs)}</>;
+}

package/src/chat/ui/SubagentInfo.tsx

@@ -7,7 +7,7 @@ import { SubagentActions, SubagentBreadcrumb } from './SubagentControls';
 import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name';
 import { useChatRow } from '../../state/chats';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 
 /*
@@ -15,17 +15,18 @@ import { useChatScope } from '../../scope';
  * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const item = useSubagentItem(chatId, toolUseId);
     const provider = useChatRow(chatId, (row) => row?.info.provider);
-    const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
+    const task = host.tasks.useTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
     const word = item === null ? null : statusWordOf(item, task);
     const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
     return (
-        <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border px-4 py-1.5">
+        <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border py-1.5 pr-1.5 pl-4">
             <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">
                 <SubagentBreadcrumb chatId={chatId} className="max-w-1/3 shrink-0 font-medium" />
                 {item !== null && word !== null && (

package/src/chat/ui/SubagentStopButton.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Square } from 'lucide-react';
 import type { ChatSubagentItem } from '@adecore/agent-contracts';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow } from '../../state/chats';
 import { useChatActions } from '../actions';
@@ -20,6 +20,7 @@ export function SubagentStopButton({
     size?: 'sm' | 'xs';
     className?: string;
 }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const actions = useChatActions();
@@ -32,12 +33,12 @@ export function SubagentStopButton({
         void actions.stopSubagent(chatId, item.toolUseId).catch((e: unknown) => {
             const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
             const description = stale ? t('subagents.stale') : e instanceof Error ? e.message : t('subagents.noAnswer');
-            chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
+            host.notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };
     const run = (): void => {
         if (stop === 'task' && item.childId !== undefined) {
-            chatHost().confirm.stopTask(id, item.childId, subagentTitle(item), send);
+            host.confirm.stopTask(id, item.childId, subagentTitle(item), send);
             return;
         }
         send();

package/src/chat/ui/SubagentTimeline.tsx

@@ -17,6 +17,8 @@ import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm';
 import { useToggleSet } from './useToggleSet';
 import { FileLinkContext } from './file-links';
 import { useChatRow } from '../../state/chats';
+import { useChatPreferences } from '../preferences';
+import { readingWidthStyle } from '../reading-width';
 import { useChatScope } from '../../scope';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 
@@ -109,12 +111,14 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
         }
     }, [rows, state.status, loadEarlier]);
 
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
+
     const openChild = (step: SubagentStep): void => {
         show(openBelow(trail, step));
     };
 
     return (
-        <div className="flex h-full min-h-0 flex-col">
+        <div className="flex h-full min-h-0 flex-col" style={readingWidthStyle(readingWidth)}>
             <SubagentInfo chatId={chatId} toolUseId={toolUseId} />
             {state.status === 'loading' && <div className="chat-column-content px-4 pt-4 text-xs text-text-faint">{t('subagents.loading')}</div>}
             {state.status === 'failed' && (