@adecore/agents-react 0.39.0 → 0.40.0

package/src/chat/ui/Markdown.tsx

@@ -37,12 +37,15 @@ interface MarkdownNode {
 /* The command a shell fence holds, read from the fence as written, so it keeps the indentation and line endings it has. */
 function shellFence(source: string): ShellFence | null {
     const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(source);
+
     if (opening === null) {
         return null;
     }
+
     const body = source.slice(opening[0].length);
     const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
     const closed = closing !== null && closing[1]![0] === opening[1]![0] && closing[1]!.length >= opening[1]!.length;
+
     return { language: opening[2] as ShellFence['language'], code: closed ? body.slice(0, closing.index) : body, closed };
 }
 
@@ -53,15 +56,20 @@ function remarkShellCodeBlocks() {
             if (node.type !== 'code') {
                 continue;
             }
+
             const start = node.position?.start.offset;
             const end = node.position?.end.offset;
+
             if (start === undefined || end === undefined) {
                 continue;
             }
+
             const shell = shellFence(String(file.value).slice(start, end));
+
             if (shell === null) {
                 continue;
             }
+
             node.data = {
                 ...node.data,
                 hProperties: {
@@ -80,7 +88,9 @@ function shellCodeBlockActions(reply: ShellCodeBlockReply | null, shell: ShellFe
     if (reply === null || shell === null) {
         return undefined;
     }
+
     const { scopeId, chatId, itemId } = reply;
+
     return render?.({ scopeId, chatId, itemId, language: shell.language, code: shell.code, complete: !reply.streaming && shell.closed });
 }
 
@@ -98,6 +108,7 @@ function FileLink({ target, className, children }: { target: FileRef; className?
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
     const openFileLink = useOpenFileLink();
+
     return (
         // A button is not selectable on its own, and a thread is copied as often as it is clicked.
         <button
@@ -120,9 +131,11 @@ function FileLink({ target, className, children }: { target: FileRef; className?
 /* Inline code, which is a file reference often enough that it is worth asking every time. */
 function InlineCode({ text }: { text: string }) {
     const target = useFileLinkTarget(text);
+
     if (target === null) {
         return <code className={INLINE_CODE}>{text}</code>;
     }
+
     return (
         // The chip sits on a code inside the button, since a button is always a box of its own and its
         // background would fill the whole box once a long path wraps.
@@ -138,6 +151,7 @@ function InlineCode({ text }: { text: string }) {
  */
 function hrefPath(href: string): string {
     const bare = href.replace(/^file:\/\//, '');
+
     try {
         return decodeURI(bare);
     } catch {
@@ -148,6 +162,7 @@ function hrefPath(href: string): string {
 /* A markdown link, which is a file when its target names no scheme of its own. */
 function MarkdownLink({ href, children }: { href?: string; children?: ReactNode }) {
     const target = useFileLinkTarget(hrefPath(href ?? ''));
+
     if (target !== null) {
         return (
             <FileLink target={target} className="text-accent underline underline-offset-2">
@@ -155,6 +170,7 @@ function MarkdownLink({ href, children }: { href?: string; children?: ReactNode
             </FileLink>
         );
     }
+
     return <ExternalLink href={href}>{children}</ExternalLink>;
 }
 
@@ -174,13 +190,17 @@ function localImagePath(src: string, cwd: string | null): string | null {
     if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
         return null;
     }
+
     const target = hrefPath(src);
+
     if (target.startsWith('/')) {
         return target;
     }
+
     if (cwd === null) {
         return null;
     }
+
     return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
 }
 
@@ -189,9 +209,11 @@ function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
     const { MarkdownImage: HostImage } = useChatHost();
     const cwd = useFileLinkCwd();
     const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+
     if (HostImage === undefined || path === null) {
         return <img src={src} alt={alt} />;
     }
+
     return <HostImage path={path} alt={alt ?? ''} />;
 }
 
@@ -202,6 +224,7 @@ function PlainImage({ src, alt }: { src?: string; alt?: string }) {
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }: { code: string }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <ErrorBoundary label={t('code.mermaid.crashed')} resetKeys={[code]} compact className="rounded-lg border border-border">
             <MermaidBlock code={code} />
@@ -212,11 +235,14 @@ function Diagram({ code }: { code: string }) {
 function MarkdownCode({ className, children, plain = false }: { className?: string; children?: ReactNode; plain?: boolean }) {
     const block = useContext(BlockCodeContext);
     const text = String(children ?? '');
+
     if (block) {
         const lang = languageOf(className);
         const code = text.replace(/\n$/, '');
+
         return lang === 'mermaid' ? <Diagram code={code} /> : <CodeBlock code={code} lang={lang} />;
     }
+
     return plain ? <code className={INLINE_CODE}>{text}</code> : <InlineCode text={text} />;
 }
 
@@ -259,6 +285,7 @@ const REPLY_HEADING_OFFSET = 3;
 
 function replyHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
     const Tag = `h${level}` as const;
+
     return function ReplyHeading({ children }: { children?: ReactNode }) {
         return <Tag aria-level={Math.min(6, level + REPLY_HEADING_OFFSET)}>{children}</Tag>;
     };
@@ -283,17 +310,22 @@ function ReplyCode({ className, children, node }: { className?: string; children
     const properties = node?.properties;
     const language = properties?.['data-shell-language'];
     const code = properties?.['data-shell-code'];
+
     const shell: ShellFence | null =
         (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
             ? { language, code, closed: properties?.['data-shell-closed'] === true }
             : null;
+
     const text = String(children ?? '');
+
     if (block && languageOf(className) === 'mermaid') {
         return <Diagram code={text.replace(/\n$/, '')} />;
     }
+
     if (block) {
         return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} actions={shellCodeBlockActions(reply, shell, renderShellCodeBlock)} />;
     }
+
     return <InlineCode text={text} />;
 }
 
@@ -302,6 +334,7 @@ function Chip({ kind, value }: { kind: string; value: string }) {
     if (kind === 'reference') {
         return <ReferenceChip id={value} />;
     }
+
     if (kind === 'skill') {
         return (
             <TokenChip
@@ -314,6 +347,7 @@ function Chip({ kind, value }: { kind: string; value: string }) {
             />
         );
     }
+
     return (
         // The path is what the thread's menu opens in the preview from here.
         <TokenChip
@@ -336,6 +370,7 @@ function ChipSpan({ children, node: _node, 'data-chip': chip, 'data-value': valu
     if (chip === undefined || value === undefined) {
         return <span {...rest}>{children}</span>;
     }
+
     return <Chip kind={chip} value={value} />;
 }
 
@@ -352,8 +387,10 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }: { text:
     const { items, referenced } = useContext(ReferenceLookupContext);
     // Chips first, so the fade wraps the words around a chip and never cuts a name in two.
     const named: NamedReferenceOptions = { items, referenced };
+
     const rehypePlugins: Options['rehypePlugins'] =
         items.length === 0 ? (fade ? FADE_PLUGINS : NO_PLUGINS) : [[rehypeNamedReferences, named], ...(fade ? FADE_PLUGINS : [])];
+
     return (
         // A context rather than a second set of components. A component that changed would mount the
         // code block again the moment its fence closes, and it would lose the lines it already has.
@@ -389,6 +426,7 @@ const ReplyFence = memo(function ReplyFence({
     // The class markdown gives the code, read back the way a parsed fence's is.
     const lang = languageOf(`language-${info.split(/[ \t]/, 1)[0]}`);
     const shell = reply === undefined ? null : shellFence(source);
+
     return (
         <CodeStreamingContext.Provider value={open}>
             {lang === 'mermaid' ? (
@@ -418,6 +456,7 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
     reply?: ShellCodeBlockReply;
 }) {
     const blocks = splitMarkdownBlocks(text);
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
             {blocks.map((block, index) =>
@@ -455,6 +494,7 @@ export const MessageMarkdown = memo(function MessageMarkdown({
     references?: readonly ReferenceToken[];
 }) {
     const rehypePlugins: [typeof rehypeChips, ChipOptions][] = [[rehypeChips, { mentions, skills, references }]];
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm">
             <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={replyComponents}>
@@ -484,6 +524,7 @@ export const Markdown = memo(function Markdown({
     componentOverrides?: Components;
 }) {
     const renderComponents = { ...(fileLinks ? components : plainComponents), ...componentOverrides };
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-muted={muted || undefined}>
             <ReactMarkdown remarkPlugins={breaks ? PLUGINS_WITH_BREAKS : PLUGINS} rehypePlugins={rehypePlugins} components={renderComponents}>

package/src/chat/ui/MermaidBlock.tsx

@@ -25,14 +25,17 @@ function resolveColor(element: HTMLElement, token: string, ground: string): stri
     probeCanvas.height = 1;
     const context = probeCanvas.getContext('2d', { willReadFrequently: true });
     const value = getComputedStyle(element).getPropertyValue(token).trim();
+
     if (context === null || value === '') {
         return ground;
     }
+
     context.fillStyle = ground;
     context.fillRect(0, 0, 1, 1);
     context.fillStyle = value;
     context.fillRect(0, 0, 1, 1);
     const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
+
     return `#${[red, green, blue].map((channel) => channel!.toString(16).padStart(2, '0')).join('')}`;
 }
 
@@ -45,14 +48,17 @@ interface DiagramLook {
 function diagramLook(element: HTMLElement): DiagramLook {
     const style = getComputedStyle(element);
     const ground = resolveColor(element, GROUND_TOKEN, '#808080');
+
     const colors = Object.fromEntries(
         Object.entries(DIAGRAM_TOKENS).map(([name, token]) => [name, token === GROUND_TOKEN ? ground : resolveColor(element, token, ground)])
     );
+
     const font = {
         family: style.fontFamily,
         mono: style.getPropertyValue('--font-mono').trim() || 'monospace',
         size: Number.parseFloat(style.fontSize) || 14
     };
+
     return { colors, font };
 }
 
@@ -64,6 +70,7 @@ function keepingSame(next: DiagramLook) {
 async function layOut(id: string, source: string, font: DiagramFont): Promise<LaidOut> {
     const { renderAsync } = await import('pele/lazy');
     const { svg, width, height } = await renderAsync(source, renderOptions(font, id));
+
     return { svg, width: Math.ceil(width), height: Math.ceil(height) };
 }
 
@@ -84,6 +91,7 @@ export function MermaidBlock({ code }: { code: string }) {
 
     useEffect(() => {
         const element = frame.current;
+
         if (element !== null) {
             setLook(keepingSame(diagramLook(element)));
         }
@@ -92,25 +100,31 @@ export function MermaidBlock({ code }: { code: string }) {
     // An app may change its colors without turning light or dark, which only the root of the page tells.
     useEffect(() => {
         const element = frame.current;
+
         if (element === null) {
             return;
         }
+
         return watchTheme(element.ownerDocument, () => setLook(keepingSame(diagramLook(element))));
     }, []);
 
     const fontFamily = look?.font.family;
     const fontMono = look?.font.mono;
     const fontSize = look?.font.size;
+
     useEffect(() => {
         if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
             return;
         }
+
         let cancelled = false;
+
         // A diagram already drawn stays until the next one is there, so it does not blink.
         layOut(id, code, { family: fontFamily, mono: fontMono, size: fontSize }).then(
             (image) => !cancelled && setDrawing({ state: 'drawn', image }),
             () => !cancelled && setDrawing({ state: 'failed' })
         );
+
         return () => {
             cancelled = true;
         };
@@ -118,6 +132,7 @@ export function MermaidBlock({ code }: { code: string }) {
 
     const image = drawing.state === 'drawn' && look !== null ? { ...drawing.image, svg: themedSvg(drawing.image.svg, look.colors) } : null;
     const showsDiagram = !streaming && !source && drawing.state !== 'failed';
+
     const toggle =
         streaming || drawing.state === 'failed' ? undefined : (
             <IconButton
@@ -127,6 +142,7 @@ export function MermaidBlock({ code }: { code: string }) {
                 onClick={() => setSource((shown) => !shown)}
             />
         );
+
     return (
         // One tree in every state, so the code block keeps the lines it has when the fence closes.
         <div ref={frame}>

package/src/chat/ui/MessageActions.tsx

@@ -31,14 +31,19 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
     const bookmarks = useChatRow(chatId, (chat) => chat?.bookmarks);
     const info = useChatRow(chatId, (chat) => chat?.info ?? null);
     const turn = useChatRow(chatId, (chat) => (turnId === null ? undefined : chat?.structure[turnId]));
+
     const streaming = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
+
         return item?.kind === 'assistant' && item.streaming;
     });
+
     const hasText = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
+
         return (item?.kind === 'user' || item?.kind === 'assistant') && /\S/.test(item.text);
     });
+
     const bookmarked = bookmarks?.some((candidate) => candidate.itemId === row.id) === true;
     const canFork = turnId !== null && forkRefusal(info, turn) === null;
     const [copied, setCopied] = useState(false);
@@ -48,7 +53,9 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         if (!copied) {
             return;
         }
+
         const timer = setTimeout(() => setCopied(false), COPIED_MS);
+
         return () => clearTimeout(timer);
     }, [copied]);
 
@@ -57,6 +64,7 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         const item = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
         const current = item?.kind === row.kind ? ({ ...row, item } as MessageRow) : row;
         const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
+
         if (text !== null) {
             copyWithChips(messageClipboardChips(current.item, text, lookup));
             setCopied(true);

package/src/chat/ui/ModelMarks.tsx

@@ -6,6 +6,7 @@ import { Icon, Pill, Tooltip } from '@adecore/ui';
 /* What a model row says beside the name: its badge, and a mark when the provider says the model can call tools. */
 export function ModelMarks({ model }: { model: ModelInfo }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <>
             {model.badge && (

package/src/chat/ui/Pickers.tsx

@@ -77,19 +77,26 @@ export function ModelPicker({
     const trimmed = query.trim().toLowerCase();
 
     const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
+
     const starredHere = (row: PickerEntry | undefined): boolean => row?.kind === 'model' && favorites[row.provider.kind]?.includes(row.model.slug) === true;
+
     const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, { provider, model: selection.model }, (kind) =>
         favoriteModelsOf(favorites, kind)
     );
+
     const scope = useContext(ChatScopeContext);
     const machine = useHostMachineLabel(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.
     const kindBefore = (i: number): AgentKind | undefined => {
         const before = entries[i - 1];
+
         return before === undefined || before.kind === 'legacy' ? undefined : before.provider.kind;
     };
+
     const blockedKinds = new Set(entries.flatMap((entry) => (entry.kind === 'model' && requirementOf(entry) !== null ? [entry.provider.kind] : [])));
 
     /* Closing forgets the search, so the next open (a click or `/model`) starts on the whole list. */
@@ -99,6 +106,7 @@ export function ModelPicker({
             setLegacyOpen(false);
             setExpanded(new Set());
         }
+
         setIndex(0);
         onOpenChange(next);
     };
@@ -112,26 +120,36 @@ export function ModelPicker({
         if (!entry) {
             return;
         }
+
         if (entry.kind === 'legacy') {
             setLegacyOpen(true);
             inputRef.current?.focus();
+
             return;
         }
+
         if (entry.kind === 'all') {
             const kind = entry.provider.kind;
+
             setExpanded((now) => {
                 const next = new Set(now);
+
                 if (!next.delete(kind)) {
                     next.add(kind);
                 }
+
                 return next;
             });
+
             inputRef.current?.focus();
+
             return;
         }
+
         if (requirementOf(entry) !== null) {
             return;
         }
+
         onChange(entry.provider.kind, entry.model.slug);
         setOpen(false);
     };
@@ -193,6 +211,7 @@ export function ModelPicker({
                         if (entry.kind === 'all') {
                             const before = entries[i - 1];
                             const header = grouped && (before === undefined || before.kind === 'legacy' || before.provider.kind !== entry.provider.kind);
+
                             return (
                                 <div key={`all-${entry.provider.kind}`}>
                                     {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
@@ -215,6 +234,7 @@ export function ModelPicker({
                                 </div>
                             );
                         }
+
                         if (entry.kind === 'legacy') {
                             return (
                                 <button
@@ -229,11 +249,13 @@ export function ModelPicker({
                                 </button>
                             );
                         }
+
                         const previous = entries[i - 1];
                         // A provider's rows start where the one before it ended; its row that opens the rest belongs to it.
                         const first = grouped && (previous === undefined || previous.kind === 'legacy' || previous.provider.kind !== entry.provider.kind);
                         // The makers read as groups only where the whole list is shown, so a short list is not cut by labels.
                         const vendorOpen = trimmed !== '' || expanded.has(entry.provider.kind);
+
                         // The starred rows lead their CLI without a maker's label; the makers start after them.
                         const vendorFirst =
                             vendorOpen &&
@@ -244,11 +266,13 @@ export function ModelPicker({
                                 previous.provider.kind !== entry.provider.kind ||
                                 starredHere(previous) ||
                                 previous.model.vendor !== entry.model.vendor);
+
                         const requirement = requirementOf(entry);
                         const next = entries[i + 1];
                         const lastOfGroup = next === undefined || next.kind !== 'model' || next.provider.kind !== entry.provider.kind;
                         const chosen = entry.provider.kind === provider && entry.model.slug === selection.model;
                         const starred = starredHere(entry);
+
                         return (
                             <div key={`${entry.provider.kind}/${entry.model.slug}`}>
                                 {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
@@ -325,9 +349,11 @@ export function ModelPicker({
 export function StashPicker({ onRestore }: { onRestore(prompt: StashedPrompt): void }) {
     const { t } = useTranslation('agent-chat');
     const prompts = useStash((s) => s.prompts);
+
     if (prompts.length === 0) {
         return null;
     }
+
     return (
         <Popover.Root>
             <Tooltip label={t('pickers.stash.title')} kbd={STASH_SHORTCUT}>

package/src/chat/ui/PromptComposer.tsx

@@ -82,6 +82,7 @@ export function PromptComposer({
         if (hold?.releasedBy === 'blur' && heldKey.current === activeKey) {
             return;
         }
+
         if (focused && expanded && !elsewhere && !ref.current?.querySelector('.prompt-card')?.contains(document.activeElement)) {
             // Keys meant for the draft may still be coming, and on a button the next Space would answer the card.
             if (hasDraft) {
@@ -114,6 +115,7 @@ export function PromptComposer({
                         onDraft={(draft) => session.setDraft(promptIdOf(active), draft)}
                         onAction={(action) => {
                             refocus.hold();
+
                             void session
                                 .act(active, () => answerPrompt(active, action, actions, host))
                                 .then((result) => {

package/src/chat/ui/PromptEditor.tsx

@@ -76,23 +76,29 @@ export function PromptEditor({
         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);
     };
 

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