@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/ui/PromptEditor.tsx

@@ -0,0 +1,136 @@
+import { useLayoutEffect, useRef, type SetStateAction } from 'react';
+import clsx from 'clsx';
+import { Surface } from '@adecore/ui';
+import type { ChatSkill } from '@adecore/agent-contracts';
+import type { Referables } from '../chat-references';
+import { ComposerInput, type ComposerInputHandle } from './ComposerInput';
+import { chipDecorations } from './composer/chips';
+import { ComposerMenu } from './composer/ComposerMenu';
+import { pickInMenu } from './composer/key-handler';
+import { usePromptMenus, type PromptDraft } from './composer/use-prompt-menus';
+
+interface PromptEditorProps {
+    value: PromptDraft;
+    onChange(next: PromptDraft): void;
+    /* The editor's accessible name; a label element cannot point at the editable element. */
+    label: string;
+    placeholder: string;
+    skills: readonly ChatSkill[];
+    /* What the CLI answers after `/`, besides `/goal` where `goals` is set. */
+    slashCommands?: readonly string[];
+    goals?: boolean;
+    /* Where `@` searches for files; null offers none. */
+    cwd: string | null;
+    referables: Referables;
+    providerName?: string;
+    disabled?: boolean;
+    className?: string;
+}
+
+const NO_COMMANDS: readonly string[] = [];
+
+/*
+ * A prompt written now and sent later, as a form field: the composer's editor with its pickers and chips,
+ * without a chat behind it. The host hands in what the CLI it goes to has, and keeps what was picked.
+ */
+export function PromptEditor({
+    value,
+    onChange,
+    label,
+    placeholder,
+    skills,
+    slashCommands = NO_COMMANDS,
+    goals = false,
+    cwd,
+    referables,
+    providerName,
+    disabled = false,
+    className
+}: PromptEditorProps) {
+    const inputRef = useRef<ComposerInputHandle>(null);
+    // A pick writes twice in one event (the text, then what it picked), and the second must build on the first.
+    const latest = useRef(value);
+
+    useLayoutEffect(() => {
+        latest.current = value;
+    }, [value]);
+
+    const setDraft = (action: SetStateAction<PromptDraft>): void => {
+        const next = typeof action === 'function' ? action(latest.current) : action;
+        latest.current = next;
+        onChange(next);
+    };
+
+    const setText = (next: string, mentions = value.mentions, chosen = value.skills): void => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+
+    const menus = usePromptMenus({
+        draft: { draft: value, setDraft, setText },
+        inputRef,
+        cwd,
+        skills,
+        slashCommands,
+        goals,
+        providerName,
+        referables,
+        label
+    });
+
+    const extensions = chipDecorations({ mentions: value.mentions, skills: value.skills, references: menus.referenceChips });
+
+    const onKeyDown = (e: KeyboardEvent): boolean => {
+        if (e.isComposing) {
+            return false;
+        }
+
+        // Escape closes the picker, and only that: the dialog around the field stays.
+        if (e.key === 'Escape' && menus.menuOpen) {
+            menus.close();
+            e.stopPropagation();
+
+            return true;
+        }
+
+        // Enter adds a line here rather than sending, so on a command it completes like Tab.
+        if (e.key === 'Enter' && menus.commandMenuOpen) {
+            menus.completeCommand(menus.commands[menus.activeIndex]!);
+
+            return true;
+        }
+
+        return pickInMenu(e, menus);
+    };
+
+    return (
+        <div className={clsx('relative', className)}>
+            {/* Over the form under the field, not inside it, so what a person types never moves while the picker opens and closes. */}
+            {menus.menuOpen && (
+                <Surface className="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-lg bg-clip-padding *:border-b-0">
+                    <ComposerMenu menus={menus} />
+                </Surface>
+            )}
+            <div className="field h-auto overflow-hidden p-0 focus-ring-within">
+                <ComposerInput
+                    ref={inputRef}
+                    dictationToolbar={null}
+                    className="composer-input prompt-editor select-text text-sm leading-normal text-text"
+                    value={value.text}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    tabbable
+                    extensions={extensions}
+                    aria={menus.inputAria}
+                    onChange={(text, selection, state) => {
+                        setText(text);
+                        menus.setMenuIndex(0);
+                        menus.trackTriggers(text, selection, state);
+                    }}
+                    onSelectionChange={menus.trackTriggers}
+                    onBlur={menus.close}
+                    onKeyDown={onKeyDown}
+                />
+            </div>
+        </div>
+    );
+}

package/src/chat/ui/QuoteButton.tsx

@@ -18,6 +18,7 @@ interface Offer {
 /* The last line the range covers. A triple-click ends on an empty rect at the start of the next row. */
 function lastLineOf(range: Range): DOMRect | null {
     const rects = [...range.getClientRects()].filter((rect) => rect.width > 0);
+
     return rects.at(-1) ?? null;
 }
 
@@ -39,15 +40,19 @@ export function QuoteButton({
 
     useEffect(() => {
         let pressed = false;
+
         const read = (): void => {
             const selection = document.getSelection();
             const quote = taker.current === null ? null : selectedAnswerQuote(selection, thread.current);
             const box = frame.current;
             const line = quote === null || selection === null ? null : lastLineOf(selection.getRangeAt(0));
+
             if (quote === null || box === null || line === null) {
                 setOffer(null);
+
                 return;
             }
+
             const bounds = box.getBoundingClientRect();
             // The canvas may zoom the cell; the button is placed in the frame's own pixels.
             const zoom = box.offsetWidth > 0 ? bounds.width / box.offsetWidth : 1;
@@ -55,23 +60,30 @@ export function QuoteButton({
             const y = (line.bottom - bounds.top) / zoom + GAP_PX;
             setOffer({ quote: quote.text, itemId: quote.itemId, x: Math.round(x), y: Math.round(y) });
         };
+
         const press = (): void => {
             pressed = true;
         };
+
         const release = (): void => {
             pressed = false;
             read();
         };
+
         const change = (): void => {
             if (pressed) {
                 setOffer(null);
+
                 return;
             }
+
             read();
         };
+
         document.addEventListener('pointerdown', press, true);
         document.addEventListener('pointerup', release, true);
         document.addEventListener('selectionchange', change);
+
         return () => {
             document.removeEventListener('pointerdown', press, true);
             document.removeEventListener('pointerup', release, true);

package/src/chat/ui/ReferenceChip.tsx

@@ -31,6 +31,7 @@ export function TokenChip({ kind, value, sigil, icon, label, tone, onOpen, class
             onOpen();
         }
     };
+
     return (
         <span
             {...rest}
@@ -55,11 +56,13 @@ export function ReferenceChip({ id }: { id: string }) {
     const { t } = useTranslation('agent-chat');
     const { items, open } = useContext(ReferenceLookupContext);
     const item = items.find((candidate) => candidate.id === id);
+
     if (item === undefined) {
         return (
             <TokenChip kind="gone" icon={<Icon icon={CircleOff} size={14} className={TOKEN_ICON} />} label={t('references.gone')} tone={REFERENCE_GONE_TONE} />
         );
     }
+
     return (
         <TokenChip
             kind="reference"

package/src/chat/ui/ResumeCompactionDock.tsx

@@ -20,6 +20,7 @@ interface ResumeCompactionDockProps {
 export function ResumeCompactionDock({ tokens, reason = 'idle', onCompact, onDismiss }: ResumeCompactionDockProps) {
     const { t } = useTranslation('agent-chat');
     const cold = reason === 'cache-expired';
+
     return (
         <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
             <Icon icon={Minimize2} size={16} className="shrink-0 text-text-faint" />

package/src/chat/ui/RowTime.tsx

@@ -8,6 +8,7 @@ import { TIMESTAMP_FORMAT } from './timestamp-format';
  */
 export function RowTime({ at }: { at: number }) {
     useFormatLocale();
+
     return (
         <Tooltip label={formatDateTime(at, TIMESTAMP_FORMAT)}>
             <time

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)}</>;
 }