@adecore/agents-react 0.39.0 → 0.40.1

package/src/chat/ui/BookmarkMarker.tsx

@@ -39,6 +39,7 @@ export function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps
                     initial={bookmark?.name ?? ''}
                     onDone={(name) => {
                         useBookmarkNaming.getState().close();
+
                         if (name !== null) {
                             void nameBookmark(scope, host, chatId, itemId, name, bookmark?.name);
                         }
@@ -73,6 +74,7 @@ function NameField({ initial, onDone }: { initial: string; onDone: (name: string
     useEffect(() => {
         ref.current?.focus();
         const frame = requestAnimationFrame(() => ref.current?.focus());
+
         return () => cancelAnimationFrame(frame);
     }, []);
 
@@ -80,6 +82,7 @@ function NameField({ initial, onDone }: { initial: string; onDone: (name: string
         if (settled.current) {
             return;
         }
+
         settled.current = true;
         onDone(name);
     };
@@ -98,9 +101,11 @@ function NameField({ initial, onDone }: { initial: string; onDone: (name: string
             onBlur={(e) => settle(e.currentTarget.value)}
             onKeyDown={(e) => {
                 e.stopPropagation();
+
                 if (e.key === 'Enter') {
                     settle(e.currentTarget.value);
                 }
+
                 if (e.key === 'Escape') {
                     settle(null);
                 }

package/src/chat/ui/BookmarkSubmenu.tsx

@@ -18,6 +18,7 @@ export function BookmarkSubmenu({ chatId }: { chatId: string }) {
     const host = useChatHost();
     const place = useHostChatPlace(chatId);
     const sorted = bookmarksInThreadOrder(bookmarks ?? [], order ?? []);
+
     if (sorted.length === 0) {
         return null;
     }

package/src/chat/ui/ChatActivity.tsx

@@ -36,28 +36,37 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     const tasks = useHostTasks(id);
     // The infos of these sub-agents' own chats, so the info of any other chat changing does not draw this again.
     const children = useChats(useShallow((s) => subagents.map((item) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info))));
+
     const progress = progressOf(
         subagents.map((item, index) => {
             const taskId = taskIdOf(item);
+
             return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), children[index]);
         })
     );
+
     const words = subagents.map((item) => {
         const taskId = taskIdOf(item);
+
         return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
     });
+
     const background = useChatRow(chatId, (row) => row?.info.background) ?? NO_TASKS;
+
     if (subagents.length === 0 && background.length === 0) {
         return null;
     }
+
     const { shells, monitors } = backgroundCounts(background);
     const Slot = host.SubagentSlot;
     const counting = progress.active > 0 && progress.total > 1;
+
     const label = counting
         ? [t('activity.progress', { done: progress.done, total: progress.total }), progress.waiting > 0 && t('activity.needsYou', { count: progress.waiting })]
               .filter(Boolean)
               .join(', ')
         : t('activity.subagents', { count: badgeCountOf(words) });
+
     return (
         <div className="mb-3 flex flex-wrap items-center gap-2">
             {subagents.length > 0 &&
@@ -94,6 +103,7 @@ export function ChatActivity({ chatId }: { chatId: string }) {
 
 export function StatusIcon({ word }: { word: StatusWord }) {
     const look = statusLookOf(word);
+
     return <Icon icon={look.icon} size={14} className={clsx('shrink-0', look.tone, look.spins && 'animate-spin')} />;
 }
 
@@ -142,6 +152,7 @@ function ActivityRow({
             {time !== '' && <span className="shrink-0 text-xs text-text-faint tabular-nums">{time}</span>}
         </>
     );
+
     // The stop is a button of its own beside the line, since a button cannot hold another.
     return (
         <div className={clsx('flex items-center gap-1 rounded-md', onOpen && 'hover:bg-surface-hover')}>
@@ -163,6 +174,7 @@ function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatS
         1000,
         items.some((item) => item.status === 'running')
     );
+
     return items.map((item) => <SubagentEntry key={item.id} chatId={chatId} item={item} now={now} />);
 }
 
@@ -175,6 +187,7 @@ function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubage
     const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
     const word = statusWordOf(item, task);
     const state = taskRowStateOf(item, task, child);
+
     return (
         <ActivityRow
             icon={<StatusIcon word={word} />}

package/src/chat/ui/CodeBlock.tsx

@@ -51,7 +51,9 @@ export function CodeBlock({ code, lang, actions, view }: { code: string; lang: s
         if (copyState !== 'copied') {
             return;
         }
+
         const timer = setTimeout(() => setCopyState('idle'), COPIED_MS);
+
         return () => clearTimeout(timer);
     }, [copyState]);
 
@@ -59,8 +61,10 @@ export function CodeBlock({ code, lang, actions, view }: { code: string; lang: s
         if (copying.current) {
             return;
         }
+
         copying.current = true;
         setCopyState('copying');
+
         try {
             // The best-effort clipboard helper cannot distinguish a refusal from success.
             await navigator.clipboard.writeText(code);
@@ -76,16 +80,20 @@ export function CodeBlock({ code, lang, actions, view }: { code: string; lang: s
         if (tokenizer !== null) {
             return;
         }
+
         let cancelled = false;
+
         Promise.all([highlighter.loadLanguage(lang), highlighter.loadTheme(theme, custom)])
             .then(() => !cancelled && setLoaded(`${lang}:${theme}`))
             .catch(() => !cancelled && setLoaded('failed'));
+
         return () => {
             cancelled = true;
         };
     }, [highlighter, lang, theme, custom, tokenizer]);
 
     const pending = (tokenizer === null || tokens === null) && loaded !== 'failed';
+
     return (
         <div className="chat-code" data-copy-state={copyState}>
             {view ?? (

package/src/chat/ui/Composer.tsx

@@ -70,9 +70,11 @@ function sendLabelKey(busy: boolean, steerable: boolean, delivery: 'queue' | 'st
     if (!busy) {
         return 'composer.send';
     }
+
     if (!steerable) {
         return 'composer.queueButton';
     }
+
     return delivery === 'steer' ? 'composer.steerButton' : 'composer.queueWithSteerButton';
 }
 
@@ -96,6 +98,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const notice = useNotice();
     const history = usePromptHistory(chatId, box.setText);
     const menus = useComposerMenus({ chatId, info, capabilities, providerName: provider?.name, draft: box, inputRef });
+
     const files = useDraftFiles({
         capabilities,
         providerName: provider?.name,
@@ -107,7 +110,9 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         referables: menus.referables.chatsOnly ? menus.referables.items.filter((item) => item.kind === 'chat') : menus.referables.items,
         referenceChips: menus.referenceChips
     });
+
     const controls = useChatControls({ chatId, info, notice, onRetarget });
+
     useEffortStepper({
         chatId,
         info,
@@ -116,12 +121,14 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         controls,
         setNotice: notice.setNotice
     });
+
     const guard = promptGuard(withQuote(draft.quote, draft.text));
     const continuable = useContinuableTurn(chatId, info);
     // The stopped turn something went out for, since the chat takes a moment to answer and Continue must not stand there meanwhile.
     const [sentFor, setSentFor] = useState<string | null>(null);
     const extraPrompts = useHostExtraPrompts(scope.id, chatId);
     const sendActions = useHostComposerSendActions(scope.id, chatId);
+
     const { submit, continueTurn, restoreStashed, toggleStash } = useComposerSubmit({
         chatId,
         writable,
@@ -138,6 +145,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         onSend: (text, extras) => {
             setSentFor(continuable);
             const sent = onSend(text, extras);
+
             // A send the host did not take leaves Continue where it was; the original promise still reaches its caller.
             void Promise.resolve(sent).then(
                 (taken) => {
@@ -147,12 +155,15 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 },
                 (error: unknown) => {
                     setSentFor(null);
+
                     throw error;
                 }
             );
+
             return sent;
         }
     });
+
     const { takingBack, takeBack } = useTakeBack({
         chatId,
         draft: box,
@@ -162,16 +173,19 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             inputRef.current?.focus();
         }
     });
+
     const pending = usePendingRequests(chatId);
     const compactionOffer = useCompactionOffer(chatId, info, capabilities?.compaction);
     const placeholder = useHintedPlaceholder({ chatId, disabled, readOnly, mentionable: capabilities?.mentions !== false, hasSkills: menus.hasSkills });
     const editorExtensions = [chipDecorations({ mentions: draft.mentions, skills: draft.skills, references: menus.referenceChips }), LEAVE_DROPS_TO_THE_CARD];
+
     /* The timeline owns the scroller; this is the one bit of it the composer needs to know. */
     const atEnd = useSyncExternalStore(
         subscribeTimelineEnd,
         () => timelineAtEnd(chatId),
         () => true
     );
+
     const queue = info.queue ?? [];
     const empty = isEmptyDraft(draft);
 
@@ -201,6 +215,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         if (!writable || event.button !== 0 || event.defaultPrevented || surfacePartOf(event.target, event.currentTarget) !== 'surface') {
             return;
         }
+
         // Nothing around the field selects, so the default would only blur it on the way, closing its picker and lifting a held prompt card.
         event.preventDefault();
         inputRef.current?.setCaret(Infinity);

package/src/chat/ui/ComposerInput.tsx

@@ -69,12 +69,14 @@ export function ComposerInput({
     const hostRef = useRef<HTMLDivElement>(null);
     const targetRef = useRef<HTMLDivElement>(null);
     const viewRef = useRef<EditorView | null>(null);
+
     const [compartments] = useState(() => ({
         attributes: new Compartment(),
         editable: new Compartment(),
         placeholder: new Compartment(),
         extensions: new Compartment()
     }));
+
     const latest = useRef({ value, handlers });
     // What the editor last reported. The parent handing that back is catching up, not setting a value of its own.
     const reported = useRef(value);
@@ -85,10 +87,13 @@ export function ComposerInput({
 
     useLayoutEffect(() => {
         const host = hostRef.current;
+
         if (!host) {
             return;
         }
+
         const initial = latest.current.value;
+
         const view = new EditorView({
             parent: host,
             state: EditorState.create({
@@ -109,24 +114,30 @@ export function ComposerInput({
                             cut: (event, target) => latest.current.handlers.onCopy?.(event, target) ?? false,
                             compositionstart: () => {
                                 latest.current.handlers.onComposing?.(true);
+
                                 return false;
                             },
                             compositionend: () => {
                                 latest.current.handlers.onComposing?.(false);
+
                                 return false;
                             }
                         })
                     ),
                     EditorView.updateListener.of((update) => {
                         const current = latest.current.handlers;
+
                         if (update.focusChanged && !update.view.hasFocus) {
                             current.onBlur?.();
                         }
+
                         if ((!update.docChanged && !update.selectionSet) || update.transactions.some((tr) => tr.annotation(externalChange))) {
                             return;
                         }
+
                         const text = update.state.doc.toString();
                         const { from, to } = update.state.selection.main;
+
                         if (update.docChanged) {
                             reported.current = text;
                             current.onChange(text, { from, to }, update.state);
@@ -137,7 +148,9 @@ export function ComposerInput({
                 ]
             })
         });
+
         viewRef.current = view;
+
         return () => {
             view.destroy();
             viewRef.current = null;
@@ -158,14 +171,18 @@ export function ComposerInput({
 
     useLayoutEffect(() => {
         const view = viewRef.current;
+
         if (!view || value === reported.current) {
             return;
         }
+
         reported.current = value;
         const doc = view.state.doc.toString();
+
         if (value === doc) {
             return;
         }
+
         view.dispatch({
             changes: { from: 0, to: doc.length, insert: value },
             selection: { anchor: value.length },
@@ -179,17 +196,21 @@ export function ComposerInput({
             focus: () => viewRef.current?.focus(),
             setCaret: (pos: number) => {
                 const view = viewRef.current;
+
                 if (!view) {
                     return;
                 }
+
                 view.dispatch({ selection: { anchor: Math.min(pos, view.state.doc.length) }, scrollIntoView: true });
                 view.focus();
             },
             insert: (text: string) => {
                 const view = viewRef.current;
+
                 if (!view) {
                     return;
                 }
+
                 view.dispatch(insertAtSelection(view.state, text));
                 view.focus();
             }
@@ -198,6 +219,7 @@ export function ComposerInput({
     );
 
     const Dictation = dictation.composer?.Control;
+
     return (
         <div ref={targetRef} className="min-w-0">
             <div ref={hostRef} className={className} />

package/src/chat/ui/DiffPool.tsx

@@ -9,9 +9,11 @@ const POOL_SIZE = 2;
 function ThemeSync() {
     const pool = useWorkerPool();
     const theme = useDiffTheme();
+
     useEffect(() => {
         void pool?.setRenderOptions({ theme });
     }, [pool, theme]);
+
     return null;
 }
 
@@ -21,6 +23,7 @@ function ThemeSync() {
  */
 export default function DiffPool({ workerFactory, children }: { workerFactory: () => Worker; children: ReactNode }) {
     const theme = useDiffTheme();
+
     return (
         <WorkerPoolContextProvider
             poolOptions={{

package/src/chat/ui/EditDiff.tsx

@@ -20,6 +20,7 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const legacyMode = !allowEditor || loadEngine === undefined;
     const legacyAllowed = legacyMode && legacyDiffBudget(change.before, change.after);
     const omitted = <DiffOmitted path={change.path} />;
+
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.before, change.after]}>
             <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
@@ -29,13 +30,17 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     ) : (
         omitted
     );
+
     if (!sourceAllowed) {
         return omitted;
     }
+
     if (legacyMode) {
         return fallback;
     }
+
     const unavailable = <DiffUnavailable path={change.path} />;
+
     return (
         <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.before, change.after, loadEngine]}>
             <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>

package/src/chat/ui/GoalDock.tsx

@@ -11,13 +11,16 @@ import { useChatScope } from '../../scope';
 import { useChats } from '../../state/chats';
 import { useChatActions } from '../actions';
 import { goalView } from '../logic/goal';
+import { errorMessage } from '../../transport';
 
 /* How far the goal got, in what its CLI counts: the checks that sent the agent on, or the tokens it spent. */
 function progressOf(goal: ChatGoal, t: TFunction<'agent-chat'>): string | null {
     const parts: string[] = [];
+
     if (goal.checks !== undefined && goal.checks > 0) {
         parts.push(t('goal.checks', { count: goal.checks }));
     }
+
     if (goal.tokensUsed !== undefined && (goal.tokensUsed > 0 || goal.tokenBudget !== undefined)) {
         parts.push(
             goal.tokenBudget === undefined
@@ -25,6 +28,7 @@ function progressOf(goal: ChatGoal, t: TFunction<'agent-chat'>): string | null {
                 : t('goal.budget', { tokens: formatTokens(goal.tokensUsed), budget: formatTokens(goal.tokenBudget) })
         );
     }
+
     return parts.length === 0 ? null : parts.join(' · ');
 }
 
@@ -39,21 +43,27 @@ export function GoalDock({ chatId, info, goals }: { chatId: string; info: ChatIn
     const actions = useChatActions();
     const [changing, setChanging] = useState(false);
     const view = goalView(info, goals, actions.goal !== undefined);
+
     if (view === null) {
         return null;
     }
+
     const { goal } = view;
     const progress = progressOf(goal, t);
+
     const act = (action: ChatGoalAction): void => {
         if (!actions.goal) {
             return;
         }
+
         setChanging(true);
+
         actions
             .goal(chatId, action)
-            .catch((e: unknown) => host.notify({ kind: 'error', title: t('goal.failed'), description: e instanceof Error ? e.message : String(e) }))
+            .catch((e: unknown) => host.notify({ kind: 'error', title: t('goal.failed'), description: errorMessage(e) }))
             .finally(() => setChanging(false));
     };
+
     return (
         <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
             <Icon icon={Target} size={16} className={clsx('shrink-0', goal.status === 'active' ? 'text-accent' : 'text-text-faint')} />
@@ -91,9 +101,11 @@ export function GoalPill({ chatId }: { chatId: string }) {
     const { t } = useTranslation('agent-chat');
     const { keyOf } = useChatScope();
     const goal = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.goal);
+
     if (goal?.status !== 'active') {
         return null;
     }
+
     return (
         <Tooltip label={`${t('goal.status.active')}: ${goal.objective}`}>
             <Pill tone="accent" icon={<Icon icon={Target} size={12} />}>

package/src/chat/ui/ImageView.tsx

@@ -26,10 +26,13 @@ const START: View = { scale: 1, x: 0, y: 0 };
  */
 function zoomed(view: View, factor: number, pointX: number, pointY: number): View {
     const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
+
     if (scale === MIN_SCALE) {
         return START;
     }
+
     const ratio = scale / view.scale;
+
     return { scale, x: pointX - (pointX - view.x) * ratio, y: pointY - (pointY - view.y) * ratio };
 }
 
@@ -62,9 +65,11 @@ function Lightbox({
     /* Where the pointer sits against the middle of the frame, which is what the transform counts from. */
     const pointIn = (event: { clientX: number; clientY: number }): { x: number; y: number } => {
         const rect = frameRef.current?.getBoundingClientRect();
+
         if (!rect) {
             return { x: 0, y: 0 };
         }
+
         return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
     };
 
@@ -114,11 +119,13 @@ function Lightbox({
                         if (view.scale <= MIN_SCALE) {
                             return;
                         }
+
                         e.currentTarget.setPointerCapture(e.pointerId);
                         dragRef.current = { pointerId: e.pointerId, x: e.clientX - view.x, y: e.clientY - view.y };
                     }}
                     onPointerMove={(e) => {
                         const drag = dragRef.current;
+
                         if (drag?.pointerId === e.pointerId) {
                             setView((current) => ({ ...current, x: e.clientX - drag.x, y: e.clientY - drag.y }));
                         }
@@ -163,12 +170,15 @@ export interface ImageThumbProps {
 export function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }: ImageThumbProps) {
     const [ownOpen, setOwnOpen] = useState(false);
     const open = openProp ?? ownOpen;
+
     const setOpen = (next: boolean): void => {
         setOwnOpen(next);
         onOpenChange?.(next);
     };
+
     const { url: src, failure } = source;
     const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
+
     if (src === null) {
         return (
             <span
@@ -186,6 +196,7 @@ export function ImageThumb({ source, alt, className, aspect, actions, open: open
             </span>
         );
     }
+
     return (
         <>
             <button

package/src/chat/ui/LimitState.tsx

@@ -18,6 +18,7 @@ import { useChatActions } from '../actions';
 import { useUsageStore } from '../../state/usage';
 import { SessionLine } from './SessionLine';
 import { useHostResumeAtReset } from '../../host-hooks';
+import { errorMessage } from '../../transport';
 
 // A time a limit names reads as a clock today and with its day after that, so the words follow the minute.
 const MINUTE_MS = 60_000;
@@ -32,10 +33,13 @@ const refreshedAt = new Map<string, number>();
  */
 function readUnreadAccounts(scope: ChatScope): void {
     const last = refreshedAt.get(scope.id);
+
     if (last !== undefined && Date.now() - last < UNREAD_REFRESH_MS) {
         return;
     }
+
     refreshedAt.set(scope.id, Date.now());
+
     void scope.transport
         .request('usage.refreshLimits', {})
         .then((snapshot) => useUsageStore.getState().setLimits(scope.id, snapshot))
@@ -51,9 +55,11 @@ function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo
     const { id } = useChatScope();
     const actions = useChatActions();
     const machineAllows = useHostResumeAtReset(id);
+
     const set = (on: boolean): void => {
         void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
     };
+
     return (
         <Tooltip label={machineAllows ? t('limit.toggle') : t('limit.machineOff')}>
             {/* A disabled switch does not take the pointer, so the tooltip hangs on a wrapper. */}
@@ -65,11 +71,8 @@ function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo
 }
 
 /*
- * Another account of the chat's CLI that has room: the one with the least of its session spent, and
- * beside it a menu of every account with room, for a person whose companies each pay for their own
- * work. Only ever offered, since going on there spends someone's other plan, and nothing is
- * remembered: the next limit suggests the one with the most room again. An account that reads the
- * chat's conversation takes it over; any other goes on in a fork, which then opens the way a fork does.
+ * Another account of the chat's CLI with room, only ever offered since it spends someone's other plan, and
+ * never remembered. One that reads the chat's conversation takes it over; any other goes on in a fork.
  */
 function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo; choice: AccountChoice }) {
     const host = useChatHost();
@@ -88,24 +91,29 @@ function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo;
     }, [scope, unread]);
 
     const target = targets[0];
+
     if (target === undefined) {
         return null;
     }
+
     const go = (entry: AccountEntry): void => {
         setBusy(true);
+
         actions
             .continueOn(chatId, entry.id)
             .catch((e: unknown) =>
                 host.notify({
                     kind: 'error',
                     title: t('limit.continueFailed', { account: choice.nameOf(entry) }),
-                    description: e instanceof Error ? e.message : String(e)
+                    description: errorMessage(e)
                 })
             )
             .finally(() => setBusy(false));
     };
+
     const name = choice.nameOf(target);
     const split = targets.length > 1;
+
     const suggestion = (
         <Tooltip label={t('limit.continueOnTip', { account: name })}>
             <Button
@@ -122,9 +130,11 @@ function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo;
             </Button>
         </Tooltip>
     );
+
     if (!split) {
         return suggestion;
     }
+
     return (
         <ButtonGroup className="shrink-0">
             {suggestion}
@@ -160,10 +170,12 @@ function ContinueOnRows({
     const { t } = useTranslation('agent-chat');
     const limits = useUsageLimits();
     const now = useNow(MINUTE_MS);
+
     return targets.map((entry) => {
         const name = choice.nameOf(entry);
         const session = sessionWindow(limitsOfAccount(limits, entry.id));
         const fork = !canContinueOn(choice.accounts, info.provider, info.account, entry.id);
+
         return (
             <Menu.Item
                 key={entry.id}
@@ -191,12 +203,15 @@ export function LimitDock({ chatId, info }: { chatId: string; info: ChatInfo })
     const now = useNow(MINUTE_MS, info.limit !== undefined);
     const choice = useAccountChoice(info.provider, info.account);
     const view = limitView(info, now);
+
     if (view === null) {
         return null;
     }
+
     // With a choice of accounts the line names the one that ran into the limit.
     const account = choice === null ? null : choice.current === null ? choice.currentId : choice.nameOf(choice.current);
     const detail = account === null ? view.detail : view.detail === null ? account : `${account} · ${view.detail}`;
+
     return (
         <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
             <Icon icon={Hourglass} size={16} className="shrink-0 text-text-faint" />
@@ -218,9 +233,11 @@ export function LimitPill({ chatId }: { chatId: string }) {
     useFormatLocale();
     const now = useNow(MINUTE_MS, info?.limit !== undefined);
     const view = info === undefined ? null : limitView(info, now);
+
     if (info === undefined || view === null) {
         return null;
     }
+
     return (
         <>
             <Tooltip label={view.detail === null ? view.title : `${view.title}. ${view.detail}`}>