@adecore/agents-react 0.39.0 → 0.40.0

package/src/chat/ui/RunSettings.tsx

@@ -92,9 +92,11 @@ interface AccountPick {
 
 function optionSummary(option: ModelOptionDescriptor, selection: ModelSelection): string | null {
     const value = selection.options[option.id];
+
     if (option.type === 'select') {
         return option.choices.find((choice) => choice.id === (value ?? option.defaultChoice))?.label ?? null;
     }
+
     return (value ?? option.defaultValue) === true ? option.label : null;
 }
 
@@ -148,16 +150,21 @@ export function RunSettings({
     const current = modelName(selection.model, owner?.models);
     const short = shortModelName(current, owner?.models);
     const options = orderOptions((model?.options ?? []).map(localizedOption));
+
     const summary = options.flatMap((option) => {
         const label = optionSummary(option, selection);
+
         return label === null ? [] : [{ id: option.id, label, ring: option.id === CONTEXT_OPTION }];
     });
+
     // A CLI without a context choice still fills one, so the ring stands on its own next to the size.
     const hasContextOption = options.some((option) => option.id === CONTEXT_OPTION);
     const standaloneContext = !hasContextOption && Boolean(usage.contextWindow);
+
     if (standaloneContext) {
         summary.push({ id: CONTEXT_OPTION, label: formatTokens(usage.contextWindow ?? 0), ring: true });
     }
+
     const grouped = providers.length > 1;
     const live = modelGroupsOf(providers, false);
     const legacy = modelGroupsOf(providers, true);
@@ -176,7 +183,9 @@ export function RunSettings({
 
     const searchable = wantsModelSearch(providers);
     const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
+
     const favoritesOf = (kind: AgentKind): ReadonlySet<string> => favoriteModelsOf(favorites, kind);
+
     const found = query.trim() === '' ? null : searchModels(inPickerOrder(providers), query, favoritesOf);
 
     // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
@@ -184,7 +193,9 @@ export function RunSettings({
         if (!open || !searchable) {
             return;
         }
+
         const frame = requestAnimationFrame(() => searchRef.current?.focus());
+
         return () => cancelAnimationFrame(frame);
     }, [open, searchable]);
 
@@ -192,6 +203,7 @@ export function RunSettings({
         if (!next) {
             setQuery('');
         }
+
         onOpenChange(next);
     };
 
@@ -200,10 +212,13 @@ export function RunSettings({
         if (!searchable || event.target === searchRef.current || event.metaKey || event.ctrlKey || event.altKey) {
             return;
         }
+
         const typed = event.key.length === 1 && event.key !== ' ';
+
         if (!typed && event.key !== 'Backspace') {
             return;
         }
+
         event.preventDefault();
         event.stopPropagation();
         setQuery((now) => (typed ? now + event.key : now.slice(0, -1)));
@@ -216,17 +231,22 @@ export function RunSettings({
             event.preventDefault();
             event.stopPropagation();
             setQuery('');
+
             return;
         }
+
         if (event.key === 'Enter') {
             event.preventDefault();
             const first = found?.[0];
+
             if (first !== undefined) {
                 onModel(first.entry.kind, first.models[0]!.slug);
                 changeOpen(false);
             }
+
             return;
         }
+
         if (event.key !== 'Escape' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Tab') {
             event.stopPropagation();
         }
@@ -235,6 +255,7 @@ export function RunSettings({
     // The name wraps rather than truncates, so a long name a provider gives is read whole.
     const modelRow = (entry: ProviderInfo, row: ModelInfo) => {
         const starred = favoritesOf(entry.kind).has(row.slug);
+
         return (
             <Menu.Row key={row.slug} aria-label={row.name}>
                 <Menu.RadioItem value={modelValue(entry.kind, row.slug)} closeOnClick>
@@ -256,10 +277,13 @@ export function RunSettings({
     // Every model of one provider, the starred ones first and the rest under a label per maker where the provider names them.
     const byMaker = (entry: ProviderInfo, models: ModelInfo[]) => {
         const starred = favoritesOf(entry.kind);
+
         return favoritesFirst(models, starred).map((row, i, sorted) => {
             const previous = sorted[i - 1];
+
             const labeled =
                 row.vendor !== undefined && !starred.has(row.slug) && (previous === undefined || starred.has(previous.slug) || previous.vendor !== row.vendor);
+
             return (
                 <Fragment key={row.slug}>
                     {labeled && <Menu.GroupLabel>{row.vendor}</Menu.GroupLabel>}
@@ -273,9 +297,11 @@ export function RunSettings({
     const providerModels = (entry: ProviderInfo, models: ModelInfo[]) => {
         const starred = favoritesOf(entry.kind);
         const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model }, starred);
+
         if (shortlist === null) {
             return [...models.filter((row) => starred.has(row.slug)), ...models.filter((row) => !starred.has(row.slug))].map((row) => modelRow(entry, row));
         }
+
         return (
             <>
                 {shortlist.map((row) => modelRow(entry, row))}
@@ -468,6 +494,7 @@ function AccountSubmenu({ provider, account }: { provider: AgentKind; account: A
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { choice, started, onPick } = account;
+
     return (
         <Menu.SubmenuRoot>
             <Menu.SubmenuTrigger className="text-text-muted">
@@ -502,9 +529,11 @@ function AccountRows({ choice, locked }: { choice: AccountChoice; locked(id: str
     const { t } = useTranslation('agent-chat');
     const limits = useUsageLimits();
     const now = useNow(MINUTE_MS);
+
     return choice.offered.map((entry) => {
         const session = sessionWindow(limitsOfAccount(limits, entry.id));
         const disabled = locked(entry.id);
+
         const row = (
             <Menu.RadioItem key={entry.id} value={entry.id} disabled={disabled} closeOnClick className="items-start data-disabled:opacity-50">
                 <span className="flex min-w-0 grow flex-col">
@@ -516,6 +545,7 @@ function AccountRows({ choice, locked }: { choice: AccountChoice; locked(id: str
                 </span>
             </Menu.RadioItem>
         );
+
         return disabled ? (
             <Tooltip key={entry.id} label={t('pickers.account.forkToSwitch', { account: choice.nameOf(entry) })} side="right" sideOffset={12}>
                 {row}
@@ -529,6 +559,7 @@ function AccountRows({ choice, locked }: { choice: AccountChoice; locked(id: str
 /* How full the context is, drawn small enough to sit in the pill beside the window's size. */
 function ContextRing({ usage }: { usage: ChatUsage }) {
     const fraction = contextFraction(usage);
+
     return (
         <svg width="14" height="14" viewBox="0 0 14 14" className={clsx('shrink-0', contextTone(fraction))} aria-hidden="true">
             <circle cx="7" cy="7" r={RING_RADIUS} fill="none" strokeWidth="2" className="stroke-border-strong" />
@@ -554,6 +585,7 @@ function ContextUsage({ usage, disabled, onCompact }: { usage: ChatUsage; disabl
     const percent = Math.round(fraction * 100);
     const segments = contextSegments(usage);
     const used = formatTokens(usage.contextTokens);
+
     return (
         <Menu.Group className="flex flex-col gap-2 px-2.5 py-1.5">
             <div className="flex items-center gap-2">
@@ -623,14 +655,17 @@ function ContextUsage({ usage, disabled, onCompact }: { usage: ChatUsage; disabl
  */
 function OptionRow({ option, selection, onChange }: { option: ModelOptionDescriptor; selection: ModelSelection; onChange(value: string | boolean): void }) {
     const icon = <Icon icon={optionIcon(option)} size={14} className="shrink-0 text-text-faint" />;
+
     if (option.type === 'boolean') {
         const checked = (selection.options[option.id] ?? option.defaultValue) === true;
+
         const item = (
             <Menu.CheckboxItem indicator="end" className="text-text-muted" checked={checked} onCheckedChange={onChange} closeOnClick={false}>
                 {icon}
                 <span className="min-w-0 grow truncate">{option.label}</span>
             </Menu.CheckboxItem>
         );
+
         return option.description ? (
             <Tooltip label={option.description} side="right" sideOffset={12}>
                 {item}
@@ -639,7 +674,9 @@ function OptionRow({ option, selection, onChange }: { option: ModelOptionDescrip
             item
         );
     }
+
     const value = String(selection.options[option.id] ?? option.defaultChoice);
+
     if (option.choices.length > INLINE_CHOICES) {
         return (
             <Menu.SubmenuRoot>
@@ -663,6 +700,7 @@ function OptionRow({ option, selection, onChange }: { option: ModelOptionDescrip
             </Menu.SubmenuRoot>
         );
     }
+
     return (
         <div className="flex items-center gap-2.5 px-2.5 py-1.5 text-sm text-text-muted">
             {icon}

package/src/chat/ui/Scrubber.tsx

@@ -99,8 +99,10 @@ export const Scrubber = memo(function Scrubber({
         if (strip === null || typeof ResizeObserver === 'undefined') {
             return;
         }
+
         const observer = new ResizeObserver(() => setHeight(strip.offsetHeight));
         observer.observe(strip);
+
         return () => observer.disconnect();
     }, [strip]);
 
@@ -115,13 +117,16 @@ export const Scrubber = memo(function Scrubber({
 
     const anchor = useMemo(() => {
         const element = strip;
+
         if (anchorY === null || element === null) {
             return undefined;
         }
+
         return {
             contextElement: element,
             getBoundingClientRect: () => {
                 const rect = element.getBoundingClientRect();
+
                 return DOMRect.fromRect({ x: rect.left, y: rect.top + anchorY + TICK_HEIGHT_PX / 2, width: rect.width, height: 0 });
             }
         };
@@ -131,10 +136,13 @@ export const Scrubber = memo(function Scrubber({
 
     const actionsFor = (tick: ScrubberTick | null): CardAction[] =>
         tick === null ? [] : Object.values(CARD_ACTIONS).filter((action) => action.offers(tick, chat));
+
     const actions = actionsFor(hoveredTick);
+
     /* The message a bookmark goes on: the one it is on already, or the person's own. A wake is the machine's and holds none. */
     const markableOf = (tick: ScrubberTick | null): string | null =>
         tick === null || chat === null ? null : (tick.bookmark?.itemId ?? (tick.kind === 'person' ? tick.id : null));
+
     const menuTick = menuIndex === null ? null : (ticks[menuIndex] ?? null);
     const menuMarkable = markableOf(menuTick);
 
@@ -142,10 +150,13 @@ export const Scrubber = memo(function Scrubber({
         // The hover card is a child here as well, and a click in it is about no tick.
         const index = strip === null || cameThroughPortal(e) ? null : messageAt(layout, e.clientY - strip.getBoundingClientRect().top);
         const tick = index === null ? null : (ticks[index] ?? null);
+
         if (tick === null || (actionsFor(tick).length === 0 && markableOf(tick) === null)) {
             e.preventBaseUIHandler();
+
             return;
         }
+
         setMenuIndex(index);
     };
 
@@ -165,6 +176,7 @@ export const Scrubber = memo(function Scrubber({
                                 onPointerMove={(e) => {
                                     setPointing(true);
                                     const index = pointAt(e);
+
                                     if (index !== hovered) {
                                         setHovered(index);
                                     }
@@ -172,6 +184,7 @@ export const Scrubber = memo(function Scrubber({
                                 onPointerLeave={() => setPointing(false)}
                                 onClick={(e) => {
                                     const index = pointAt(e);
+
                                     if (index !== null) {
                                         onPick(index);
                                     }
@@ -183,6 +196,7 @@ export const Scrubber = memo(function Scrubber({
                             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 (
                                 <Fragment key={slot.first}>
                                     <span

package/src/chat/ui/SessionLine.tsx

@@ -20,6 +20,7 @@ export function SessionLine({ window, now }: { window: UsageWindow; now: number
     const tone = sessionTone(window.used);
     const mark = evenPace(window, now)?.percent ?? null;
     const resetsAt = window.resetsAt;
+
     return (
         <span className="flex items-center gap-2 text-xs text-text-faint tabular-nums">
             <span aria-hidden className="relative h-1 w-14 shrink-0 rounded-full bg-surface-sunken">

package/src/chat/ui/ShellCommand.tsx

@@ -32,6 +32,7 @@ const cache = new Map<string, Run[]>();
 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,
@@ -44,18 +45,23 @@ function runsOf(highlighter: Highlighter, code: string, language: string, theme:
 /* `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);
 }
 
@@ -74,25 +80,34 @@ function languagesOf(command: string, extra: readonly EmbeddedCode[]): Set<strin
 function highlight(command: string, extra: readonly EmbeddedCode[], theme: string, code: CodeHighlighter): Run[] | null {
     const key = `${theme}\n${extra.map(({ start, end, language }) => `${start}:${end}:${language}`).join(',')}\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 = codeIn(command, extra);
     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;
 }
 
@@ -101,20 +116,26 @@ function draw(command: string, runs: readonly Run[] | null, from: number, to: nu
     if (runs === null) {
         return [command.slice(from, to)];
     }
+
     const parts: ReactNode[] = [];
     let at = from;
+
     for (const run of runs) {
         if (run.end <= from || run.start >= to) {
             continue;
         }
+
         const start = Math.max(run.start, from);
         const end = Math.min(run.end, to);
+
         // Shiki leaves the line breaks out of its tokens; they come from the command itself.
         if (start > at) {
             parts.push(command.slice(at, start));
         }
+
         const content = run.content.slice(start - run.start, end - run.start);
         const style = tokenStyle(run);
+
         parts.push(
             style === undefined ? (
                 content
@@ -124,11 +145,14 @@ function draw(command: string, runs: readonly Run[] | null, from: number, to: nu
                 </span>
             )
         );
+
         at = end;
     }
+
     if (at < to) {
         parts.push(command.slice(at, to));
     }
+
     return parts;
 }
 
@@ -148,14 +172,18 @@ function Name({ named }: { named: NamedWord }) {
 function drawNamed(command: string, runs: readonly Run[] | null, names: readonly NamedWord[]): ReactNode[] {
     const parts: ReactNode[] = [];
     let at = 0;
+
     for (const named of names) {
         if (named.start < at) {
             continue;
         }
+
         parts.push(...draw(command, runs, at, named.start), <Name key={`name-${named.start}`} named={named} />);
         at = named.end;
     }
+
     parts.push(...draw(command, runs, at, command.length));
+
     return parts;
 }
 
@@ -180,10 +208,13 @@ export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }: { co
         if (runs !== null || tooLong) {
             return;
         }
+
         let cancelled = false;
+
         Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command, code)].map((lang) => highlighter.loadLanguage(lang))])
             .then(() => !cancelled && setLoads((count) => count + 1))
             .catch(() => undefined);
+
         return () => {
             cancelled = true;
         };
@@ -192,5 +223,6 @@ export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }: { co
     if (names.length > 0) {
         return <>{drawNamed(command, runs, names)}</>;
     }
+
     return <>{runs === null ? command : draw(command, runs, 0, command.length)}</>;
 }

package/src/chat/ui/SubagentControls.tsx

@@ -11,9 +11,11 @@ const CRUMB_LINK = 'truncate text-text-muted hover:text-text';
 /* The chat's own title in the bar; while a sub-agent stands in the chat's place, pressing it goes back to the main agent. */
 export function SubagentTitleCrumb({ chatId, className, children }: { chatId: string; className?: string; children: ReactNode }) {
     const { trail, show } = useSubagentTrail(chatId);
+
     if (trail.length === 0) {
         return <>{children}</>;
     }
+
     return (
         <button type="button" className={clsx('flex min-w-0 items-center', className)} onClick={() => show(MAIN_AGENT)}>
             {children}
@@ -25,9 +27,11 @@ export function SubagentTitleCrumb({ chatId, className, children }: { chatId: st
 export function SubagentBreadcrumb({ chatId, className }: { chatId: string; className?: string }) {
     const { t } = useTranslation('agent-chat');
     const { trail, show } = useSubagentTrail(chatId);
+
     if (trail.length === 0) {
         return null;
     }
+
     return (
         <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1', className)}>
             {breadcrumbOf(trail).map((step) => (
@@ -53,11 +57,14 @@ export function SubagentActions({ chatId }: { chatId: string }) {
     const { t } = useTranslation('agent-chat');
     const { trail, show } = useSubagentTrail(chatId);
     const subagents = useOpenableSubagents(chatId);
+
     if (trail.length === 0) {
         return null;
     }
+
     // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
     const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0]!.toolUseId) : undefined;
+
     return (
         <div className="flex shrink-0 items-center gap-1">
             {shown !== undefined && <SubagentStopButton chatId={chatId} item={shown} size="sm" />}

package/src/chat/ui/SubagentInfo.tsx

@@ -24,6 +24,7 @@ export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId:
     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 py-1.5 pr-1.5 pl-4">
             <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">

package/src/chat/ui/SubagentStopButton.tsx

@@ -26,9 +26,11 @@ export function SubagentStopButton({
     const actions = useChatActions();
     const turnRunning = useChatRow(chatId, (row) => (row?.info.activeTurnId ?? null) !== null);
     const stop = stopOf(item, turnRunning);
+
     if (stop === null) {
         return null;
     }
+
     const send = (): void => {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e: unknown) => {
             const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
@@ -36,12 +38,16 @@ export function SubagentStopButton({
             host.notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };
+
     const run = (): void => {
         if (stop === 'task' && item.childId !== undefined) {
             host.confirm.stopTask(id, item.childId, subagentTitle(item), send);
+
             return;
         }
+
         send();
     };
+
     return <IconButton icon={Square} size={size} label={stopLabel(stop)} className={className} onClick={run} />;
 }

package/src/chat/ui/SubagentTimeline.tsx

@@ -38,9 +38,11 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
     const threadRef = useRef<HTMLDivElement>(null);
     const [target, setTarget] = useState<TimelineTarget>(EMPTY_TARGET);
     const followRef = useRef(true);
+
     const stopFollowing = () => {
         followRef.current = false;
     };
+
     const groups = useToggleSet(stopFollowing);
     const subagents = useToggleSet(stopFollowing);
     // The row being read when an earlier page was asked for, so it stays where it was once that page is in.
@@ -52,6 +54,7 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
         const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
         controller.current = conversation;
         void conversation.start();
+
         return () => {
             conversation.dispose();
             controller.current = null;
@@ -74,17 +77,21 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
 
     useLayoutEffect(() => {
         const element = scrollRef.current;
+
         if (element === null) {
             return;
         }
+
         const head = state.items[0]?.id;
         const moved = head !== headRef.current;
         headRef.current = head;
+
         if (moved && anchorRef.current !== null && !followRef.current) {
             restoreAnchor(element, anchorRef.current);
         } else if (followRef.current) {
             element.scrollTop = element.scrollHeight;
         }
+
         if (moved) {
             anchorRef.current = null;
         }
@@ -92,9 +99,11 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
 
     const loadEarlier = useCallback(() => {
         const element = scrollRef.current;
+
         if (element === null || state.cursor === null || !wantsEarlier(element)) {
             return;
         }
+
         // Taken on every call, since the reader may scroll on while a page is on its way.
         anchorRef.current = firstRowInView(element);
         void controller.current?.loadEarlier();
@@ -153,6 +162,7 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
                                     {rows.length === 0 && !state.live && <EmptyState icon={Bot}>{t('rows.subagent.nothingYet')}</EmptyState>}
                                     {rows.map((row, index) => {
                                         const previous = index > 0 ? rows[index - 1]! : null;
+
                                         return (
                                             <div key={row.id} data-item-id={row.id} className={rowRhythm(row, previous)}>
                                                 <Row