@townco/ui 0.1.68 → 0.1.69

package/dist/gui/components/ChatView.js

@@ -1,12 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { ArrowUp, Bug, ChevronDown, ChevronUp, Code, PanelRight, Plus, Settings, Sparkles, X, } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { ArrowUp, Bug, ChevronUp, PanelRight, Settings, X } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.js";
-import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
-import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
+import { AppSidebar, ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SidebarInset, SidebarProvider, SidebarToggle, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -31,85 +30,8 @@ function OpenFilesButton({ children, }) {
     };
     return _jsx(_Fragment, { children: children({ openFiles, openSettings }) });
 }
-// Hook to handle sidebar keyboard shortcut (Cmd+B / Ctrl+B)
-function SidebarHotkey() {
-    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            // Cmd+B (Mac) or Ctrl+B (Windows/Linux)
-            if ((e.metaKey || e.ctrlKey) && e.key === "b") {
-                e.preventDefault();
-                setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [panelSize, setPanelSize]);
-    return null;
-}
-// Format relative time from date string
-function formatRelativeTime(dateString) {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-    if (diffMins < 1)
-        return "Just now";
-    if (diffMins < 60)
-        return `${diffMins}m ago`;
-    if (diffHours < 24)
-        return `${diffHours}h ago`;
-    if (diffDays < 7)
-        return `${diffDays}d ago`;
-    return date.toLocaleDateString();
-}
-// Session switcher dropdown component
-function SessionSwitcher({ agentName, client, currentSessionId, }) {
-    const [sessions, setSessions] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const fetchSessions = useCallback(async () => {
-        if (!client)
-            return;
-        setIsLoading(true);
-        try {
-            const sessionList = await client.listSessions();
-            setSessions(sessionList);
-        }
-        catch (error) {
-            logger.error("Failed to fetch sessions", { error });
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [client]);
-    // Fetch sessions when dropdown opens
-    useEffect(() => {
-        if (isOpen) {
-            fetchSessions();
-        }
-    }, [isOpen, fetchSessions]);
-    const handleNewSession = () => {
-        // Clear session from URL and reload to start fresh
-        const url = new URL(window.location.href);
-        url.searchParams.delete("session");
-        window.location.href = url.toString();
-    };
-    const handleSessionSelect = (sessionId) => {
-        if (sessionId === currentSessionId) {
-            setIsOpen(false);
-            return;
-        }
-        // Update URL with session ID and reload
-        const url = new URL(window.location.href);
-        url.searchParams.set("session", sessionId);
-        window.location.href = url.toString();
-    };
-    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-heading-4 text-foreground hover:text-foreground/80 transition-colors cursor-pointer", children: [agentName, _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isOpen && "rotate-180") })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72", children: [_jsxs(DropdownMenuLabel, { className: "flex items-center justify-between", children: [_jsx("span", { children: "Sessions" }), isLoading && (_jsx("span", { className: "text-caption text-muted-foreground", children: "Loading..." }))] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleNewSession, className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New Session" })] }), sessions.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "max-h-64 overflow-y-auto", children: sessions.map((session) => (_jsxs(DropdownMenuItem, { onClick: () => handleSessionSelect(session.sessionId), className: cn("flex flex-col items-start gap-0.5 py-2", session.sessionId === currentSessionId &&
-                                "bg-muted/50 font-medium"), children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-paragraph-sm", children: session.firstUserMessage || "Empty session" }), session.sessionId === currentSessionId && (_jsx("span", { className: "shrink-0 text-caption text-primary", children: "Current" }))] }), _jsxs("span", { className: "text-caption text-muted-foreground", children: [formatRelativeTime(session.updatedAt), " \u2022 ", session.messageCount, " ", "messages"] })] }, session.sessionId))) }), sessions.length === 0 && !isLoading && (_jsx("div", { className: "px-2 py-4 text-center text-paragraph-sm text-muted-foreground", children: "No previous sessions" }))] })] }));
-}
+// Note: Keyboard shortcut (Cmd+B / Ctrl+B) for toggling the right panel
+// is now handled internally by ChatLayout.Root
 // Chat input with attachment handling
 function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, currentModel, commandMenuItems, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
@@ -128,21 +50,19 @@ function AsideTabs({ todos, tools, mcps, subagents, }) {
     return (_jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, {}) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }));
 }
 // Mobile header component that uses ChatHeader context
-function MobileHeader({ agentName, showHeader, client, currentSessionId, }) {
+function MobileHeader({ agentName, showHeader, }) {
     const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: currentSessionId }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
+    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(SidebarToggle, {}), showHeader && (_jsx("span", { className: "text-heading-4 text-foreground", children: agentName }))] }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, client, }) {
-    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
+function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, }) {
+    const { togglePanel, panelOpen } = ChatLayout.useChatLayoutContext();
     const debuggerLink = debuggerUrl
         ? sessionId
             ? `${debuggerUrl}/sessions/${sessionId}`
             : debuggerUrl
         : null;
-    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: sessionId }) })), !showHeader && _jsx("div", { className: "flex-1" }), debuggerUrl && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(IconButton, { "aria-label": "View session in debugger", disabled: !debuggerLink, asChild: !!debuggerLink, children: debuggerLink ? (_jsx("a", { href: debuggerLink, target: "_blank", rel: "noopener noreferrer", children: _jsx(Bug, { className: "size-4 text-muted-foreground" }) })) : (_jsx(Bug, { className: "size-4 text-muted-foreground" })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: sessionId ? "View session in debugger" : "Open debugger" }) })] }) })), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
-                            setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader, client: client, currentSessionId: sessionId }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }) })] }));
+    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(SidebarToggle, {}), showHeader && (_jsx("span", { className: "text-heading-4 text-foreground", children: agentName }))] }), debuggerUrl && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(IconButton, { "aria-label": "View session in debugger", disabled: !debuggerLink, asChild: !!debuggerLink, children: debuggerLink ? (_jsx("a", { href: debuggerLink, target: "_blank", rel: "noopener noreferrer", children: _jsx(Bug, { className: "size-4 text-muted-foreground" }) })) : (_jsx(Bug, { className: "size-4 text-muted-foreground" })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: sessionId ? "View session in debugger" : "Open debugger" }) })] }) })), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle panel", onClick: togglePanel, "data-state": panelOpen ? "open" : "closed", children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }) })] }));
 }
 export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
@@ -291,32 +211,36 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             },
         },
     ];
-    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsx(SidebarHotkey, {}), _jsxs(ChatLayout.Main, { children: [!hideTopBar && (_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0, sessionId: sessionId, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, client: client, ...(debuggerUrl && { debuggerUrl }) })), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, titleElement: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: sessionId }), description: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
-                                                sendMessage(prompt);
-                                                setPlaceholder("Type a message or / for commands...");
-                                                logger.info("Prompt clicked", { prompt });
-                                            }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
-                                                agentMcps.length +
-                                                agentSubagents.length }) })) })) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
-                                        // Calculate dynamic spacing based on message sequence
-                                        const isFirst = index === 0;
-                                        const previousMessage = isFirst ? null : messages[index - 1];
-                                        let spacingClass = "mt-2";
-                                        if (isFirst) {
-                                            // First message needs more top margin if it's an assistant initial message
-                                            spacingClass =
-                                                message.role === "assistant" ? "mt-8" : "mt-2";
-                                        }
-                                        else if (message.role === "user") {
-                                            // User message usually starts a new turn
-                                            spacingClass =
-                                                previousMessage?.role === "user" ? "mt-4" : "mt-4";
-                                        }
-                                        else if (message.role === "assistant") {
-                                            // Assistant message is usually a response
-                                            spacingClass =
-                                                previousMessage?.role === "assistant" ? "mt-2" : "mt-6";
-                                        }
-                                        return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
-                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }));
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { client: client, currentSessionId: sessionId }), _jsx(SidebarInset, { children: _jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [!hideTopBar && (_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0, sessionId: sessionId, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, ...(debuggerUrl && { debuggerUrl }) })), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
+                                                            sendMessage(prompt);
+                                                            setPlaceholder("Type a message or / for commands...");
+                                                            logger.info("Prompt clicked", { prompt });
+                                                        }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
+                                                            agentMcps.length +
+                                                            agentSubagents.length }) })) })) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
+                                                    // Calculate dynamic spacing based on message sequence
+                                                    const isFirst = index === 0;
+                                                    const previousMessage = isFirst
+                                                        ? null
+                                                        : messages[index - 1];
+                                                    let spacingClass = "mt-2";
+                                                    if (isFirst) {
+                                                        // First message needs more top margin if it's an assistant initial message
+                                                        spacingClass =
+                                                            message.role === "assistant" ? "mt-8" : "mt-2";
+                                                    }
+                                                    else if (message.role === "user") {
+                                                        // User message usually starts a new turn
+                                                        spacingClass =
+                                                            previousMessage?.role === "user" ? "mt-4" : "mt-4";
+                                                    }
+                                                    else if (message.role === "assistant") {
+                                                        // Assistant message is usually a response
+                                                        spacingClass =
+                                                            previousMessage?.role === "assistant"
+                                                                ? "mt-2"
+                                                                : "mt-6";
+                                                    }
+                                                    return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
+                                                }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }) })] }));
 }

package/dist/gui/components/MessageContent.js

@@ -1,13 +1,14 @@
 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 { InvokingGroup } from "./InvokingGroup.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
-import { ToolCall } from "./ToolCall.js";
-import { ToolCallGroup } from "./ToolCallGroup.js";
+import { ToolOperation } from "./ToolOperation.js";
 /**
  * MessageContent component inspired by shadcn.io/ai
  * Provides the content container with role-based styling
@@ -35,6 +36,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
     // Get streaming start time and current model from store
     const streamingStartTime = useChatStore((state) => state.streamingStartTime);
     const currentModel = useChatStore((state) => state.currentModel);
+    const shouldReduceMotion = useReducedMotion();
     // Use smart rendering if message is provided and no custom children
     const useSmartRendering = message && !children;
     // Derive props from message if using smart rendering
@@ -49,33 +51,68 @@ 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(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "size-2.5 rounded-full bg-foreground animate-pulse-scale" }) })), 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" ? ((() => {
                     // Sort tool calls by content position
                     const sortedToolCalls = (message.toolCalls || [])
                         .slice()
                         .sort((a, b) => (a.contentPosition ?? Infinity) -
                         (b.contentPosition ?? Infinity));
-                    // Helper to check if a tool call is preliminary (invoking)
-                    const isPreliminary = (tc) => tc.status === "pending" &&
-                        (!tc.rawInput || Object.keys(tc.rawInput).length === 0);
                     // Helper to group tool calls by batchId, consecutive same-title calls, or consecutive preliminary calls
                     const groupToolCalls = (toolCalls) => {
                         const result = [];
                         const batchGroups = new Map();
-                        let currentInvokingGroup = [];
+                        let currentSelectingGroup = [];
                         let currentConsecutiveGroup = [];
                         let currentConsecutiveTitle = null;
-                        const flushInvokingGroup = () => {
-                            if (currentInvokingGroup.length > 1) {
+                        const flushSelectingGroup = () => {
+                            if (currentSelectingGroup.length > 1) {
                                 result.push({
-                                    type: "invoking",
-                                    toolCalls: currentInvokingGroup,
+                                    type: "selecting",
+                                    toolCalls: currentSelectingGroup,
                                 });
                             }
-                            else if (currentInvokingGroup.length === 1) {
-                                result.push(currentInvokingGroup[0]);
+                            else if (currentSelectingGroup.length === 1) {
+                                result.push(currentSelectingGroup[0]);
                             }
-                            currentInvokingGroup = [];
+                            currentSelectingGroup = [];
                         };
                         const flushConsecutiveGroup = () => {
                             if (currentConsecutiveGroup.length > 1) {
@@ -94,7 +131,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         for (const tc of toolCalls) {
                             // Handle batch groups (explicit batchId)
                             if (tc.batchId) {
-                                flushInvokingGroup();
+                                flushSelectingGroup();
                                 flushConsecutiveGroup();
                                 const existing = batchGroups.get(tc.batchId);
                                 if (existing) {
@@ -106,14 +143,14 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                     result.push({ type: "batch", toolCalls: group });
                                 }
                             }
-                            // Handle consecutive preliminary (invoking) tool calls
-                            else if (isPreliminary(tc)) {
+                            // Handle consecutive preliminary (selecting) tool calls
+                            else if (isPreliminaryToolCall(tc)) {
                                 flushConsecutiveGroup();
-                                currentInvokingGroup.push(tc);
+                                currentSelectingGroup.push(tc);
                             }
                             // Regular tool call - group consecutive same-title calls (e.g., subagent)
                             else {
-                                flushInvokingGroup();
+                                flushSelectingGroup();
                                 // Check if this continues a consecutive group
                                 if (currentConsecutiveTitle === tc.title) {
                                     currentConsecutiveGroup.push(tc);
@@ -127,7 +164,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             }
                         }
                         // Flush any remaining groups
-                        flushInvokingGroup();
+                        flushSelectingGroup();
                         flushConsecutiveGroup();
                         return result;
                     };
@@ -137,22 +174,37 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         if (typeof item === "object" &&
                             "type" in item &&
                             item.type === "batch") {
-                            return (_jsx(ToolCallGroup, { toolCalls: item.toolCalls }, `batch-${item.toolCalls[0]?.batchId || index}`));
+                            return (_jsx(ToolOperation, { toolCalls: item.toolCalls, isGrouped: true }, `batch-${item.toolCalls[0]?.batchId || index}`));
                         }
-                        // Invoking group (consecutive preliminary tool calls)
+                        // Selecting group (consecutive preliminary tool calls)
                         if (typeof item === "object" &&
                             "type" in item &&
-                            item.type === "invoking") {
-                            return (_jsx(InvokingGroup, { toolCalls: item.toolCalls }, `invoking-${item.toolCalls[0]?.id || index}`));
+                            item.type === "selecting") {
+                            return (_jsx(ToolOperation, { toolCalls: item.toolCalls, isGrouped: true }, `selecting-${item.toolCalls[0]?.id || index}`));
                         }
                         // Single tool call
-                        return (_jsx(ToolCall, { toolCall: item }, item.id));
+                        return (_jsx(ToolOperation, { toolCalls: [item], isGrouped: false }, item.id));
                     };
-                    // If no tool calls or they don't have positions, render old way
+                    // If no tool calls or they don't have positions, render simplified way
                     if (sortedToolCalls.length === 0 ||
                         !sortedToolCalls.some((tc) => tc.contentPosition !== undefined)) {
                         const groupedToolCalls = groupToolCalls(sortedToolCalls);
-                        return (_jsxs(_Fragment, { children: [groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })] }));
+                        return (_jsxs(_Fragment, { children: [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 }) })] }));
                     }
                     // Render content interleaved with tool calls
                     // Group consecutive tool calls with the same batchId or same title
@@ -164,18 +216,18 @@ 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(ToolCallGroup, { toolCalls: currentBatch }, `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(ToolCall, { toolCall: currentBatch[0] }) }, `tool-${currentBatch[0].id}`));
+                            elements.push(_jsx("div", { children: _jsx(ToolOperation, { toolCalls: [currentBatch[0]], isGrouped: false }) }, `tool-${currentBatch[0].id}`));
                         }
                         currentBatch = [];
                         currentBatchId = undefined;
                         currentBatchTitle = undefined;
                     };
                     // Separate preliminary tool calls - they should render at the end, not break text
-                    const preliminaryToolCalls = sortedToolCalls.filter(isPreliminary);
-                    const nonPreliminaryToolCalls = sortedToolCalls.filter((tc) => !isPreliminary(tc));
+                    const preliminaryToolCalls = sortedToolCalls.filter(isPreliminaryToolCall);
+                    const nonPreliminaryToolCalls = sortedToolCalls.filter((tc) => !isPreliminaryToolCall(tc));
                     // Process non-preliminary tool calls inline with text
                     nonPreliminaryToolCalls.forEach((toolCall, index) => {
                         const position = toolCall.contentPosition ?? message.content.length;
@@ -185,7 +237,22 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             flushBatch();
                             const textChunk = message.content.slice(currentPosition, position);
                             if (textChunk) {
-                                elements.push(_jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }, `text-before-${toolCall.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-${toolCall.id}`));
                             }
                         }
                         // Check if this tool call should be batched (by batchId or consecutive same title)
@@ -223,20 +290,65 @@ 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(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }, "text-end"));
+                            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"));
                         }
                     }
-                    // Render preliminary (invoking) tool calls at the end, grouped
+                    // Render preliminary (selecting) tool calls at the end, grouped
                     if (preliminaryToolCalls.length > 0) {
                         if (preliminaryToolCalls.length > 1) {
-                            elements.push(_jsx(InvokingGroup, { toolCalls: preliminaryToolCalls }, `invoking-group-${preliminaryToolCalls[0].id}`));
+                            elements.push(_jsx(ToolOperation, { toolCalls: preliminaryToolCalls, isGrouped: true }, `selecting-group-${preliminaryToolCalls[0].id}`));
                         }
                         else {
-                            elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: preliminaryToolCalls[0] }) }, `tool-${preliminaryToolCalls[0].id}`));
+                            elements.push(_jsx("div", { children: _jsx(ToolOperation, { toolCalls: [preliminaryToolCalls[0]], isGrouped: false }) }, `tool-${preliminaryToolCalls[0].id}`));
                         }
                     }
-                    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, 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("div", { className: "whitespace-pre-wrap", children: message.content }))] }))] }));
+                    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("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

package/dist/gui/components/SessionHistory.d.ts

@@ -0,0 +1,10 @@
+import type { AcpClient } from "../../sdk/client/index.js";
+export interface SessionHistoryProps {
+    client: AcpClient | null;
+    currentSessionId: string | null;
+    onSessionSelect?: ((sessionId: string) => void) | undefined;
+    onRenameSession?: ((sessionId: string) => void) | undefined;
+    onArchiveSession?: ((sessionId: string) => void) | undefined;
+    onDeleteSession?: ((sessionId: string) => void) | undefined;
+}
+export declare function SessionHistory({ client, currentSessionId, onSessionSelect, onRenameSession, onArchiveSession, onDeleteSession, }: SessionHistoryProps): import("react/jsx-runtime").JSX.Element;