@townco/ui 0.1.68 → 0.1.70

package/dist/gui/components/HookNotification.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, Archive, CheckCircle2, ChevronDown, Scissors, } from "lucide-react";
+import React, { useState } from "react";
+/**
+ * Get display information for a hook type
+ */
+function getHookDisplayInfo(hookType, _callback) {
+    if (hookType === "context_size") {
+        return {
+            icon: Archive,
+            title: "Context Compacted",
+        };
+    }
+    if (hookType === "tool_response") {
+        return {
+            icon: Scissors,
+            title: "Tool Response Compacted",
+        };
+    }
+    // Fallback for unknown hook types
+    return {
+        icon: Archive,
+        title: `Hook Executed`,
+    };
+}
+/**
+ * Format a number with thousand separators
+ */
+function formatNumber(num) {
+    return num.toLocaleString();
+}
+/**
+ * HookNotification component - displays a hook notification inline with messages
+ * Only shows completed or error states (not intermediate "triggered" state)
+ */
+export function HookNotification({ notification }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback);
+    const isCompleted = notification.status === "completed";
+    const isError = notification.status === "error";
+    // Build subtitle showing key info
+    let subtitle = "";
+    if (isCompleted && notification.metadata?.tokensSaved !== undefined) {
+        subtitle = `${formatNumber(notification.metadata.tokensSaved)} tokens saved`;
+    }
+    else if (isError && notification.error) {
+        subtitle = notification.error;
+    }
+    return (_jsxs("div", { className: "flex flex-col my-3", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: isError ? "text-destructive" : "text-muted-foreground", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: title }), isCompleted && _jsx(CheckCircle2, { className: "h-3 w-3 text-green-500" }), isError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), subtitle && (_jsx("span", { className: `text-paragraph-sm pl-4.5 ${isError ? "text-destructive/70" : "text-muted-foreground/70"}`, children: subtitle }))] }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Hook Details" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Type:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.hookType })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Callback:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.callback })] })] })] }), notification.metadata && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Result" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [notification.metadata.action && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Action:" }), _jsx("span", { className: "text-foreground", children: notification.metadata.action })] })), notification.metadata.messagesRemoved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Messages Removed:" }), _jsx("span", { className: "text-foreground", children: formatNumber(notification.metadata.messagesRemoved) })] })), notification.metadata.tokensSaved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Tokens Saved:" }), _jsx("span", { className: "text-green-500 font-medium", children: formatNumber(notification.metadata.tokensSaved) })] }))] })] })), notification.error && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-destructive uppercase tracking-wider mb-1.5 font-sans", children: "Error" }), _jsx("div", { className: "text-[11px] text-destructive font-mono", children: notification.error })] })), notification.completedAt && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border text-[10px] text-muted-foreground font-sans", children: ["Executed:", " ", new Date(notification.completedAt).toLocaleTimeString()] }))] }))] }));
+}

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;

package/dist/gui/components/SessionHistory.js

@@ -0,0 +1,101 @@
+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";
+const logger = createLogger("session-history");
+const isToday = (date) => {
+    const today = new Date();
+    return (date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear());
+};
+const isYesterday = (date) => {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    return (date.getDate() === yesterday.getDate() &&
+        date.getMonth() === yesterday.getMonth() &&
+        date.getFullYear() === yesterday.getFullYear());
+};
+const groupSessionsByDate = (sessions) => {
+    const now = new Date();
+    const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    const oneMonthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+    return sessions.reduce((groups, session) => {
+        const sessionDate = new Date(session.updatedAt);
+        if (isToday(sessionDate)) {
+            groups.today.push(session);
+        }
+        else if (isYesterday(sessionDate)) {
+            groups.yesterday.push(session);
+        }
+        else if (sessionDate > oneWeekAgo) {
+            groups.lastWeek.push(session);
+        }
+        else if (sessionDate > oneMonthAgo) {
+            groups.lastMonth.push(session);
+        }
+        else {
+            groups.older.push(session);
+        }
+        return groups;
+    }, {
+        today: [],
+        yesterday: [],
+        lastWeek: [],
+        lastMonth: [],
+        older: [],
+    });
+};
+export function SessionHistory({ client, currentSessionId, onSessionSelect, onRenameSession, onArchiveSession, onDeleteSession, }) {
+    const { setOpenMobile } = useSidebar();
+    const [sessions, setSessions] = useState([]);
+    const [isLoading, setIsLoading] = 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 on mount and when client changes
+    useEffect(() => {
+        fetchSessions();
+    }, [fetchSessions]);
+    const handleSessionSelect = (sessionId) => {
+        if (sessionId === currentSessionId) {
+            return;
+        }
+        if (onSessionSelect) {
+            onSessionSelect(sessionId);
+        }
+        else {
+            // Default behavior: update URL with session ID
+            const url = new URL(window.location.href);
+            url.searchParams.set("session", sessionId);
+            window.location.href = url.toString();
+        }
+    };
+    if (!client) {
+        return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex w-full flex-row items-center justify-center gap-2 px-2 text-sm text-muted-foreground", children: "Connect to an agent to see session history" }) }) }));
+    }
+    if (isLoading) {
+        return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Today" }), _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex flex-col", children: [44, 32, 28, 64, 52].map((item) => (_jsx("div", { className: "flex h-8 items-center gap-2 rounded-md px-2", children: _jsx("div", { className: "h-4 flex-1 rounded-md bg-sidebar-accent-foreground/10 animate-pulse", style: {
+                                    maxWidth: `${item}%`,
+                                } }) }, item))) }) })] }));
+    }
+    if (sessions.length === 0) {
+        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)))] }))] }) }) }) }));
+}

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

@@ -0,0 +1,11 @@
+import type { SessionSummary } from "../../sdk/transports/index.js";
+export interface SessionHistoryItemProps {
+    session: SessionSummary;
+    isActive: boolean;
+    onSelect: (sessionId: string) => void;
+    onRename?: ((sessionId: string) => void) | undefined;
+    onArchive?: ((sessionId: string) => void) | undefined;
+    onDelete?: ((sessionId: string) => void) | undefined;
+    setOpenMobile: (open: boolean) => void;
+}
+export declare const SessionHistoryItem: import("react").MemoExoticComponent<({ session, isActive, onSelect, onRename, onArchive, onDelete, setOpenMobile, }: SessionHistoryItemProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/gui/components/SessionHistoryItem.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+import { memo } from "react";
+import { cn } from "../lib/utils.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./DropdownMenu.js";
+import { SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, } from "./Sidebar.js";
+const PureSessionHistoryItem = ({ session, isActive, onSelect, onRename, onArchive, onDelete, setOpenMobile, }) => {
+    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" })] })] })] }));
+};
+export const SessionHistoryItem = memo(PureSessionHistoryItem, (prevProps, nextProps) => {
+    if (prevProps.isActive !== nextProps.isActive) {
+        return false;
+    }
+    if (prevProps.session.sessionId !== nextProps.session.sessionId) {
+        return false;
+    }
+    if (prevProps.session.firstUserMessage !== nextProps.session.firstUserMessage) {
+        return false;
+    }
+    return true;
+});

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

@@ -0,0 +1,25 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/gui/components/Sheet.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold text-foreground", className), ...props })));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };