@townco/ui 0.1.77 → 0.1.78

package/dist/gui/components/MessageContent.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import * as React from "react";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { isPreliminaryToolCall } from "../../core/utils/tool-call-state.js";
-import { getDuration, getTransition, motionEasing, shimmerTransition, } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { HookNotification } from "./HookNotification.js";
 import { Reasoning } from "./Reasoning.js";
@@ -36,8 +34,7 @@ const messageContentVariants = cva("w-full rounded-2xl text-[var(--font-size)] f
 export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStreaming: isStreamingProp, message, thinkingDisplayStyle = "collapsible", className, children, ...props }, ref) => {
     // Get streaming start time and current model from store
     const streamingStartTime = useChatStore((state) => state.streamingStartTime);
-    const currentModel = useChatStore((state) => state.currentModel);
-    const shouldReduceMotion = useReducedMotion();
+    const _currentModel = useChatStore((state) => state.currentModel);
     // Use smart rendering if message is provided and no custom children
     const useSmartRendering = message && !children;
     // Derive props from message if using smart rendering
@@ -52,45 +49,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
         const hasThinking = !!thinking;
         // Check if waiting (streaming but no content yet)
         const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
-        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(motion.div, { initial: {
-                        filter: "blur(12px)",
-                        opacity: 0,
-                        y: 12,
-                    }, animate: {
-                        filter: "blur(0px)",
-                        opacity: 1,
-                        y: 0,
-                    }, exit: {
-                        filter: "blur(12px)",
-                        opacity: 0,
-                        y: -12,
-                    }, transition: getTransition(shouldReduceMotion ?? false, {
-                        duration: 0.5,
-                        ease: motionEasing.smooth,
-                    }), children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx(motion.div, { initial: {
-                        filter: "blur(12px)",
-                        opacity: 0,
-                        y: 12,
-                    }, animate: {
-                        filter: "blur(0px)",
-                        opacity: 1,
-                        y: 0,
-                    }, exit: {
-                        filter: "blur(12px)",
-                        opacity: 0,
-                        y: -12,
-                    }, transition: getTransition(shouldReduceMotion ?? false, {
-                        duration: 0.4,
-                        ease: motionEasing.smooth,
-                    }), children: _jsx(motion.div, { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", animate: {
-                            backgroundPosition: ["-200% 0", "200% 0"],
-                        }, transition: {
-                            ...shimmerTransition,
-                            duration: getDuration(shouldReduceMotion ?? false, 1.5),
-                        }, style: {
-                            backgroundImage: "linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.75) 25%, transparent 35%)",
-                            backgroundSize: "200% 100%",
-                        }, children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) }) })), message.role === "assistant" ? ((() => {
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx("div", { children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) })), message.role === "assistant" ? ((() => {
                     // Sort tool calls by content position
                     const sortedToolCalls = (message.toolCalls || [])
                         .slice()
@@ -111,6 +70,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 });
                             }
                             else if (currentSelectingGroup.length === 1) {
+                                // biome-ignore lint/style/noNonNullAssertion: Length check ensures element exists
                                 result.push(currentSelectingGroup[0]);
                             }
                             currentSelectingGroup = [];
@@ -124,6 +84,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 });
                             }
                             else if (currentConsecutiveGroup.length === 1) {
+                                // biome-ignore lint/style/noNonNullAssertion: Length check ensures element exists
                                 result.push(currentConsecutiveGroup[0]);
                             }
                             currentConsecutiveGroup = [];
@@ -207,22 +168,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         const hasHookPositions = hookNotifications.some((n) => n.contentPosition !== undefined);
                         if (!hasHookPositions) {
                             // No positions - render hooks at top, then tool calls, then content
-                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx(AnimatePresence, { mode: "popLayout", children: _jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) }) })), _jsx(motion.div, { initial: {
-                                            filter: "blur(12px)",
-                                            opacity: 0,
-                                            y: 12,
-                                        }, animate: {
-                                            filter: "blur(0px)",
-                                            opacity: 1,
-                                            y: 0,
-                                        }, exit: {
-                                            filter: "blur(12px)",
-                                            opacity: 0,
-                                            y: -12,
-                                        }, transition: getTransition(shouldReduceMotion ?? false, {
-                                            duration: 0.4,
-                                            ease: motionEasing.smooth,
-                                        }), children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }) })] }));
+                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }) })] }));
                         }
                         // Hooks have positions - render them inline with content
                         const elements = [];
@@ -233,22 +179,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             if (position > currentPosition) {
                                 const textChunk = message.content.slice(currentPosition, position);
                                 if (textChunk) {
-                                    elements.push(_jsx(motion.div, { initial: {
-                                            filter: "blur(12px)",
-                                            opacity: 0,
-                                            y: 12,
-                                        }, animate: {
-                                            filter: "blur(0px)",
-                                            opacity: 1,
-                                            y: 0,
-                                        }, exit: {
-                                            filter: "blur(12px)",
-                                            opacity: 0,
-                                            y: -12,
-                                        }, transition: getTransition(shouldReduceMotion ?? false, {
-                                            duration: 0.4,
-                                            ease: motionEasing.smooth,
-                                        }), children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-hook-${notification.id}`));
+                                    elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-hook-${notification.id}`));
                                 }
                             }
                             // Add hook notification
@@ -259,22 +190,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         if (currentPosition < message.content.length) {
                             const remainingText = message.content.slice(currentPosition);
                             if (remainingText) {
-                                elements.push(_jsx(motion.div, { initial: {
-                                        filter: "blur(12px)",
-                                        opacity: 0,
-                                        y: 12,
-                                    }, animate: {
-                                        filter: "blur(0px)",
-                                        opacity: 1,
-                                        y: 0,
-                                    }, exit: {
-                                        filter: "blur(12px)",
-                                        opacity: 0,
-                                        y: -12,
-                                    }, transition: getTransition(shouldReduceMotion ?? false, {
-                                        duration: 0.4,
-                                        ease: motionEasing.smooth,
-                                    }), children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end-hooks"));
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end-hooks"));
                             }
                         }
                         // Add tool calls at the end
@@ -283,7 +199,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 elements.push(renderToolCallOrGroup(item, index));
                             });
                         }
-                        return (_jsx(AnimatePresence, { mode: "popLayout", children: elements }));
+                        return _jsx(_Fragment, { children: elements });
                     }
                     // Render content interleaved with tool calls and hook notifications
                     // Group consecutive tool calls with the same batchId or same title
@@ -316,10 +232,14 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     const flushBatch = () => {
                         if (currentBatch.length > 1) {
                             // Group multiple consecutive calls (by batchId or same title)
-                            elements.push(_jsx(ToolOperation, { toolCalls: currentBatch, isGrouped: true }, `group-${currentBatchId || currentBatchTitle}-${currentBatch[0].id}`));
+                            elements.push(_jsx(ToolOperation, { toolCalls: currentBatch, isGrouped: true }, `group-${currentBatchId || currentBatchTitle}-${currentBatch[0]?.id}`));
                         }
                         else if (currentBatch.length === 1) {
-                            elements.push(_jsx("div", { children: _jsx(ToolOperation, { toolCalls: [currentBatch[0]], isGrouped: false }) }, `tool-${currentBatch[0].id}`));
+                            elements.push(_jsx("div", { children: _jsx(ToolOperation
+                                // biome-ignore lint/style/noNonNullAssertion: Length check ensures element exists
+                                , { 
+                                    // biome-ignore lint/style/noNonNullAssertion: Length check ensures element exists
+                                    toolCalls: [currentBatch[0]], isGrouped: false }) }, `tool-${currentBatch[0]?.id}`));
                         }
                         currentBatch = [];
                         currentBatchId = undefined;
@@ -337,22 +257,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 const itemId = positionedItem.type === "toolCall"
                                     ? positionedItem.item.id
                                     : positionedItem.item.id;
-                                elements.push(_jsx(motion.div, { initial: {
-                                        filter: "blur(12px)",
-                                        opacity: 0,
-                                        y: 12,
-                                    }, animate: {
-                                        filter: "blur(0px)",
-                                        opacity: 1,
-                                        y: 0,
-                                    }, exit: {
-                                        filter: "blur(12px)",
-                                        opacity: 0,
-                                        y: -12,
-                                    }, transition: getTransition(shouldReduceMotion ?? false, {
-                                        duration: 0.4,
-                                        ease: motionEasing.smooth,
-                                    }), children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-${itemId}`));
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-${itemId}`));
                             }
                         }
                         if (positionedItem.type === "hookNotification") {
@@ -399,65 +304,24 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     if (currentPosition < message.content.length) {
                         const remainingText = message.content.slice(currentPosition);
                         if (remainingText) {
-                            elements.push(_jsx(motion.div, { initial: {
-                                    filter: "blur(12px)",
-                                    opacity: 0,
-                                    y: 12,
-                                }, animate: {
-                                    filter: "blur(0px)",
-                                    opacity: 1,
-                                    y: 0,
-                                }, exit: {
-                                    filter: "blur(12px)",
-                                    opacity: 0,
-                                    y: -12,
-                                }, transition: getTransition(shouldReduceMotion ?? false, {
-                                    duration: 0.4,
-                                    ease: motionEasing.smooth,
-                                }), children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end"));
+                            elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end"));
                         }
                     }
                     // Render preliminary (selecting) tool calls at the end, grouped
                     if (preliminaryToolCalls.length > 0) {
                         if (preliminaryToolCalls.length > 1) {
-                            elements.push(_jsx(ToolOperation, { toolCalls: preliminaryToolCalls, isGrouped: true }, `selecting-group-${preliminaryToolCalls[0].id}`));
+                            elements.push(_jsx(ToolOperation, { toolCalls: preliminaryToolCalls, isGrouped: true }, `selecting-group-${preliminaryToolCalls[0]?.id}`));
                         }
                         else {
-                            elements.push(_jsx("div", { children: _jsx(ToolOperation, { toolCalls: [preliminaryToolCalls[0]], isGrouped: false }) }, `tool-${preliminaryToolCalls[0].id}`));
+                            elements.push(_jsx("div", { children: _jsx(ToolOperation
+                                // biome-ignore lint/style/noNonNullAssertion: Condition ensures element exists
+                                , { 
+                                    // biome-ignore lint/style/noNonNullAssertion: Condition ensures element exists
+                                    toolCalls: [preliminaryToolCalls[0]], isGrouped: false }) }, `tool-${preliminaryToolCalls[0]?.id}`));
                         }
                     }
-                    return (_jsx(AnimatePresence, { mode: "popLayout", children: elements }));
-                })()) : (_jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx(motion.div, { className: "flex flex-wrap gap-2", initial: {
-                                filter: "blur(12px)",
-                                opacity: 0,
-                                y: 12,
-                            }, animate: {
-                                filter: "blur(0px)",
-                                opacity: 1,
-                                y: 0,
-                            }, exit: {
-                                filter: "blur(12px)",
-                                opacity: 0,
-                                y: -12,
-                            }, transition: getTransition(shouldReduceMotion ?? false, {
-                                duration: 0.5,
-                                ease: motionEasing.smooth,
-                            }), children: message.images.map((image, index) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${index + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover" }, index))) })), message.content && (_jsx(motion.div, { className: "whitespace-pre-wrap", initial: {
-                                filter: "blur(12px)",
-                                opacity: 0,
-                                y: 12,
-                            }, animate: {
-                                filter: "blur(0px)",
-                                opacity: 1,
-                                y: 0,
-                            }, exit: {
-                                filter: "blur(12px)",
-                                opacity: 0,
-                                y: -12,
-                            }, transition: getTransition(shouldReduceMotion ?? false, {
-                                duration: 0.4,
-                                ease: motionEasing.smooth,
-                            }), children: message.content }))] }))] }));
+                    return _jsx(_Fragment, { children: elements });
+                })()) : (_jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover" }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))] }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

package/dist/gui/components/SessionHistory.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { SessionHistoryItem } from "./SessionHistoryItem.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, useSidebar, } from "./Sidebar.js";
@@ -97,5 +96,5 @@ export function SessionHistory({ client, currentSessionId, onSessionSelect, onRe
         return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex w-full flex-row items-center justify-center gap-2 px-2 py-4 text-sm text-muted-foreground", children: "Your sessions will appear here once you start chatting!" }) }) }));
     }
     const groupedSessions = groupSessionsByDate(sessions);
-    return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [groupedSessions.today.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-2 py-1 text-sidebar-foreground/50 text-xs", children: "Today" }), groupedSessions.today.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.yesterday.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-2 py-1 text-sidebar-foreground/50 text-xs", children: "Yesterday" }), groupedSessions.yesterday.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastWeek.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-2 py-1 text-sidebar-foreground/50 text-xs", children: "Last 7 days" }), groupedSessions.lastWeek.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastMonth.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-2 py-1 text-sidebar-foreground/50 text-xs", children: "Last 30 days" }), groupedSessions.lastMonth.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.older.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-2 py-1 text-sidebar-foreground/50 text-xs", children: "Older" }), groupedSessions.older.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] }))] }) }) }) }));
+    return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [groupedSessions.today.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Today" }), groupedSessions.today.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.yesterday.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Yesterday" }), groupedSessions.yesterday.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastWeek.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 7 days" }), groupedSessions.lastWeek.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastMonth.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 30 days" }), groupedSessions.lastMonth.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.older.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Older" }), groupedSessions.older.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] }))] }) }) }) }));
 }

package/dist/gui/components/SessionHistoryItem.js

@@ -8,7 +8,7 @@ const PureSessionHistoryItem = ({ session, isActive, onSelect, onRename, onArchi
     return (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, isActive: isActive, onClick: () => {
                     onSelect(session.sessionId);
                     setOpenMobile(false);
-                }, children: _jsx("button", { type: "button", className: "w-full", children: _jsx("span", { className: "truncate", children: session.firstUserMessage || "Empty session" }) }) }), _jsxs(DropdownMenu, { modal: true, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuAction, { className: "mr-0.5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", showOnHover: !isActive, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onRename, onSelect: () => onRename?.(session.sessionId), children: "Rename" }), _jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onArchive, onSelect: () => onArchive?.(session.sessionId), children: "Archive" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: cn("cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"), disabled: !onDelete, onSelect: () => onDelete?.(session.sessionId), children: "Delete" })] })] })] }));
+                }, className: "h-10 px-2 py-3", children: _jsx("button", { type: "button", className: "w-full text-base", children: _jsx("span", { className: "truncate", children: session.firstUserMessage || "Empty session" }) }) }), _jsxs(DropdownMenu, { modal: true, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuAction, { className: "mr-0.5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", showOnHover: !isActive, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onRename, onSelect: () => onRename?.(session.sessionId), children: "Rename" }), _jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onArchive, onSelect: () => onArchive?.(session.sessionId), children: "Archive" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: cn("cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"), disabled: !onDelete, onSelect: () => onDelete?.(session.sessionId), children: "Delete" })] })] })] }));
 };
 export const SessionHistoryItem = memo(PureSessionHistoryItem, (prevProps, nextProps) => {
     if (prevProps.isActive !== nextProps.isActive) {

package/dist/gui/components/Sidebar.js

@@ -1,19 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot as SlotPrimitive } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "framer-motion";
 import { PanelLeft } from "lucide-react";
 import * as React from "react";
+import { SIDEBAR_WIDTH_DESKTOP, SIDEBAR_WIDTH_MOBILE } from "../constants.js";
+import { useLockBodyScroll } from "../hooks/use-lock-body-scroll.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
+import { backdropVariants, sidebarContentTransition, sidebarContentVariants, sidebarDesktopVariants, sidebarMobileTransition, sidebarMobileVariants, sidebarTransition, } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./Sheet.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "s";
 const SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -39,6 +39,7 @@ const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp,
             _setOpen(openState);
         }
         // This sets the cookie to keep the sidebar state.
+        // biome-ignore lint/suspicious/noDocumentCookie: Intentional cookie setting for sidebar state persistence
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     }, [setOpenProp, open]);
     // Helper to toggle the sidebar.
@@ -46,7 +47,7 @@ const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp,
         return isMobile
             ? setOpenMobile((open) => !open)
             : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+    }, [isMobile, setOpen]);
     // Adds a keyboard shortcut to toggle the sidebar (Cmd/Ctrl+Shift+S).
     React.useEffect(() => {
         const handleKeyDown = (event) => {
@@ -71,41 +72,20 @@ const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp,
         openMobile,
         setOpenMobile,
         toggleSidebar,
-    }), [
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-    ]);
-    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { className: cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className), ref: ref, style: {
-                    "--sidebar-width": SIDEBAR_WIDTH,
-                    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                    ...style,
-                }, ...props, children: children }) }) }));
+    }), [state, open, setOpen, isMobile, openMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { className: cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className), ref: ref, style: style, ...props, children: children }) }) }));
 });
 SidebarProvider.displayName = "SidebarProvider";
-const Sidebar = React.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === "none") {
-        return (_jsx("div", { className: cn("flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground", className), ref: ref, ...props, children: children }));
-    }
+const Sidebar = React.forwardRef(({ className, children }, ref) => {
+    const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
+    // Lock body scroll when mobile sidebar is open
+    useLockBodyScroll(isMobile && openMobile);
+    // Mobile: Sidebar with white overlay
     if (isMobile) {
-        return (_jsx(Sheet, { onOpenChange: setOpenMobile, open: openMobile, ...props, children: _jsxs(SheetContent, { className: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", "data-mobile": "true", "data-sidebar": "sidebar", side: side, style: {
-                    "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-                }, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+        return (_jsx(AnimatePresence, { initial: false, children: openMobile && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: "fixed inset-0 z-40 bg-background/80", variants: backdropVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, onClick: () => setOpenMobile(false), "aria-label": "Close sidebar" }), _jsx(motion.aside, { ref: ref, className: cn("fixed inset-y-0 left-0 z-50", "bg-sidebar text-sidebar-foreground", "flex flex-col", "border-r border-sidebar-border", "max-h-screen overflow-hidden", className), style: { width: SIDEBAR_WIDTH_MOBILE }, variants: sidebarMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, "data-sidebar": "sidebar", "data-mobile": "true", children: _jsx(motion.div, { className: "flex flex-col h-full overflow-y-auto", variants: sidebarContentVariants, initial: "initial", animate: "animate", transition: sidebarContentTransition, children: children }) })] })) }));
     }
-    return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-collapsible": state === "collapsed" ? collapsible : "", "data-side": side, "data-state": state, "data-variant": variant, ref: ref, children: [_jsx("div", { className: cn("relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-150 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
-                    ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-                    : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]") }), _jsx("div", { className: cn("fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-150 ease-linear md:flex", side === "left"
-                    ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-                    : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", 
-                // Adjust the padding for floating and inset variants.
-                variant === "floating" || variant === "inset"
-                    ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-                    : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow", "data-sidebar": "sidebar", children: children }) })] }));
+    // Desktop: Fixed width sidebar with slide animation
+    return (_jsx("div", { className: "group peer hidden md:block", "data-state": open ? "expanded" : "collapsed", "data-side": "left", ref: ref, children: _jsx(AnimatePresence, { initial: false, mode: "wait", children: open && (_jsx(motion.aside, { className: cn("fixed inset-y-0 left-0 z-40", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "flex flex-col", "max-h-screen overflow-hidden", className), style: { width: SIDEBAR_WIDTH_DESKTOP }, variants: sidebarDesktopVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarTransition, "data-sidebar": "sidebar", children: _jsx(motion.div, { className: "flex flex-col h-full overflow-y-auto", variants: sidebarContentVariants, initial: "initial", animate: "animate", transition: sidebarContentTransition, children: children }) })) }) }));
 });
 Sidebar.displayName = "Sidebar";
 const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
@@ -121,8 +101,13 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
     return (_jsx("button", { type: "button", "aria-label": "Toggle Sidebar", className: cn("-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex", "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), "data-sidebar": "rail", onClick: toggleSidebar, ref: ref, tabIndex: -1, title: "Toggle Sidebar", ...props }));
 });
 SidebarRail.displayName = "SidebarRail";
-const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("main", { className: cn("relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow", className), ref: ref, ...props }));
+const SidebarInset = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { isMobile, open } = useSidebar();
+    // Desktop: Add padding when sidebar is open
+    // Mobile: No changes (overlay handles visibility)
+    return (_jsx("main", { className: cn("relative flex w-full flex-1 flex-col bg-background transition-all duration-500", 
+        // Add left padding on desktop when sidebar is open
+        !isMobile && open && "md:pl-64", className), ref: ref, ...props, children: children }));
 });
 SidebarInset.displayName = "SidebarInset";
 const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
@@ -146,7 +131,7 @@ const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("div", { className: cn("relative flex w-full min-w-0 flex-col p-2", className), "data-sidebar": "group", ref: ref, ...props }));
+    return (_jsx("div", { className: cn("relative flex w-full min-w-0 flex-col p-4", className), "data-sidebar": "group", ref: ref, ...props }));
 });
 SidebarGroup.displayName = "SidebarGroup";
 const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
@@ -201,9 +186,9 @@ const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false,
 SidebarMenuButton.displayName = "SidebarMenuButton";
 const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
     const Comp = asChild ? SlotPrimitive : "button";
-    return (_jsx(Comp, { className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", 
+    return (_jsx(Comp, { className: cn("absolute top-3 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", 
         // Increases the hit area of the button on mobile.
-        "after:-inset-2 after:absolute after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
+        "after:-inset-2 after:absolute after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-2.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
             "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", className), "data-sidebar": "menu-action", ref: ref, type: asChild ? undefined : "button", ...props }));
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";

package/dist/gui/components/SubAgentDetails.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Loader2 } from "lucide-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
 import { MarkdownRenderer } from "./MarkdownRenderer.js";
 const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
@@ -18,20 +18,23 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     const [internalIsExpanded, setInternalIsExpanded] = useState(false);
     // Use controlled state if provided, otherwise use internal state
     const isExpanded = controlledIsExpanded ?? internalIsExpanded;
-    const setIsExpanded = onExpandChange ?? setInternalIsExpanded;
+    const _setIsExpanded = onExpandChange ?? setInternalIsExpanded;
     // Start with Thinking expanded while running to show the live stream
     const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
     const [isNearBottom, setIsNearBottom] = useState(true);
     const thinkingContainerRef = useRef(null);
     // Only use SSE streaming if not in replay mode and port/sessionId provided
     const shouldStream = !isReplay && port !== undefined && sessionId !== undefined;
-    const streamOptions = shouldStream
+    // Memoize stream options to prevent unnecessary reconnections
+    const streamOptions = useMemo(() => shouldStream
         ? {
+            // biome-ignore lint/style/noNonNullAssertion: shouldStream condition ensures port is defined
             port: port,
+            // biome-ignore lint/style/noNonNullAssertion: shouldStream condition ensures sessionId is defined
             sessionId: sessionId,
             ...(host !== undefined ? { host } : {}),
         }
-        : null;
+        : null, [shouldStream, port, sessionId, host]);
     const { messages: streamedMessages, isStreaming: hookIsStreaming, error, } = useSubagentStream(streamOptions);
     // Use stored messages if available, otherwise use streamed messages
     const messages = storedMessages && storedMessages.length > 0
@@ -82,14 +85,7 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
         if (isNearBottom && (isRunning || hasContent)) {
             scrollToBottom();
         }
-    }, [
-        currentMessage?.content,
-        currentMessage?.toolCalls,
-        isNearBottom,
-        isRunning,
-        hasContent,
-        scrollToBottom,
-    ]);
+    }, [isNearBottom, isRunning, hasContent, scrollToBottom]);
     // Set up scroll listener
     useEffect(() => {
         const container = thinkingContainerRef.current;
@@ -99,7 +95,7 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
         container.addEventListener("scroll", handleScroll, { passive: true });
         checkScrollPosition(); // Check initial position
         return () => container.removeEventListener("scroll", handleScroll);
-    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
+    }, [checkScrollPosition]);
     // When thinking section expands, scroll to bottom and reset follow state
     useEffect(() => {
         if (isThinkingExpanded) {
@@ -123,7 +119,7 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     return (_jsxs("div", { children: [!isExpanded && (_jsx("div", { className: "w-full max-w-md", children: previewText ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 truncate", children: previewText })) : queryFirstLine ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 truncate", children: queryFirstLine })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Stream" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.contentBlocks &&
                                                 currentMessage.contentBlocks.length > 0
                                                 ? // Render interleaved content blocks
-                                                    currentMessage.contentBlocks.map((block, idx) => block.type === "text" ? (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: block.text }) }, `text-${idx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))
+                                                    currentMessage.contentBlocks.map((block, blockIdx) => block.type === "text" ? (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: block.text }) }, `text-${block.text.slice(0, 30)}-${blockIdx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))
                                                 : // Fallback to legacy content with markdown
                                                     currentMessage.content && (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })), currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2 prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })] }))] }))] }));
 }

package/dist/gui/components/TodoSubline.js

@@ -7,6 +7,7 @@ export function TodoSubline({ todos, className }) {
         return null;
     // Find the most important item to display
     // Priority: in_progress > completed > first item
+    // biome-ignore lint/correctness/useHookAtTopLevel: Hook call at component top level
     const displayItem = React.useMemo(() => {
         const inProgress = todos.find((t) => t.status === "in_progress");
         if (inProgress)