@townco/ui 0.1.77 → 0.1.78

package/dist/gui/components/ToolOperation.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, Globe, Image, Link, ListVideo, Search, Wrench, } from "lucide-react";
 import React, { useEffect, useState } from "react";
-import { areAllToolCallsCompleted, getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, hasAnyToolCallFailed, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
+import { getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
 import { generateSmartSummary } from "../../core/utils/tool-summary.js";
-import { expandCollapseVariants, fadeInVariants, getDuration, getTransition, motionDuration, motionEasing, rotateVariants, shimmerTransition, standardTransition, } from "../lib/motion.js";
-import { cn } from "../lib/utils.js";
 import * as ChatLayout from "./ChatLayout.js";
 import { SubAgentDetails } from "./SubAgentDetails.js";
 import { useTheme } from "./ThemeProvider.js";
@@ -35,8 +32,6 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const [isExpanded, setIsExpanded] = useState(false);
     const [isMinimized, setIsMinimized] = useState(false);
     const [userInteracted, setUserInteracted] = useState(false);
-    const { resolvedTheme } = useTheme();
-    const shouldReduceMotion = useReducedMotion();
     // For single tool call, extract it
     const singleToolCall = toolCalls.length === 1 ? toolCalls[0] : null;
     const isTodoWrite = singleToolCall?.title === "todo_write";
@@ -63,7 +58,6 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const isCompleted = displayState === "completed";
     const isFailed = displayState === "failed";
     const isSelecting = displayState === "selecting";
-    const isActive = displayState === "executing";
     // Auto-minimize when completed (only if user hasn't manually interacted)
     useEffect(() => {
         if (autoMinimize && isCompleted && !isMinimized && !userInteracted) {
@@ -136,64 +130,14 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const displayText = getDisplayText();
     // For preliminary/selecting states, show simple non-expandable text
     if (isSelecting && !isGrouped) {
-        return (_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("span", { className: "text-paragraph-sm text-text-secondary/50", children: displayText }) }));
+        return (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/50", children: displayText }) }));
     }
     // If it's a grouped preliminary (selecting) state
     if (isSelecting && isGrouped) {
-        return (_jsxs(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: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })] }));
+        return (_jsxs("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })] }));
     }
     // Full display (for single tool call or expanded group, includes minimized state)
-    return (_jsxs(motion.div, { className: "flex flex-col my-4", 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: [_jsxs(motion.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 rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, animate: isActive || isSelecting
-                    ? {
-                        backgroundPosition: ["200% 0", "-200% 0"],
-                    }
-                    : {}, transition: isActive || isSelecting
-                    ? {
-                        ...shimmerTransition,
-                        duration: getDuration(shouldReduceMotion ?? false, 1.5),
-                    }
-                    : {}, style: isActive || isSelecting
-                    ? {
-                        backgroundImage: "linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.75) 25%, transparent 35%)",
-                        backgroundSize: "200% 100%",
-                    }
-                    : {}, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isGrouped && (_jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })), isFailed && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors" })) : (_jsx(motion.div, { animate: {
-                                    rotate: isExpanded ? 180 : 0,
-                                }, transition: getTransition(shouldReduceMotion ?? false, {
-                                    duration: motionDuration.normal,
-                                    ease: motionEasing.smooth,
-                                }), className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(ChevronDown, { className: "h-3 w-3" }) }))] }), !isGrouped &&
+    return (_jsxs("div", { className: "flex flex-col my-4", 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 rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isGrouped && (_jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })), isFailed && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors" })) : (_jsx("div", { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-all duration-200 ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDown, { className: "h-3 w-3" }) }))] }), !isGrouped &&
                         singleToolCall &&
                         (isTodoWrite && singleToolCall.rawInput?.todos ? (_jsx(TodoSubline, { todos: singleToolCall.rawInput.todos, className: "text-paragraph-sm text-text-secondary/70 pl-4.5" })) : singleToolCall.subline ? (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: singleToolCall.subline })) : null), !isGrouped && toolHookNotification && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: toolHookNotification.status === "triggered"
                             ? "Compacting response..."
@@ -218,19 +162,16 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                 return (_jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: [compactedCount, " response", compactedCount > 1 ? "s" : "", " ", "compacted"] }));
                             }
                             return null;
-                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { port: singleToolCall.subagentPort, sessionId: singleToolCall.subagentSessionId, parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages, isReplay: isReplaySubagent }) })), _jsx(AnimatePresence, { initial: false, children: !isTodoWrite && isExpanded && (_jsx(motion.div, { initial: "collapsed", animate: "expanded", exit: "collapsed", variants: expandCollapseVariants, transition: getTransition(shouldReduceMotion ?? false, {
-                        duration: motionDuration.normal,
-                        ease: motionEasing.smooth,
-                    }), className: "mt-1", children: isGrouped ? (
-                    // Render individual tool calls in group
-                    _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
-                            const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
-                            return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
-                        }) })) : (
-                    // Render single tool call details
-                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall, ...(toolHookNotification
-                            ? { hookNotification: toolHookNotification }
-                            : {}) }))) }, "expanded-content")) })] }));
+                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { port: singleToolCall.subagentPort, sessionId: singleToolCall.subagentSessionId, parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && isExpanded && (_jsx("div", { className: "mt-1", children: isGrouped ? (
+                // Render individual tool calls in group
+                _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
+                        const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
+                        return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
+                    }) })) : (
+                // Render single tool call details
+                singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall, ...(toolHookNotification
+                        ? { hookNotification: toolHookNotification }
+                        : {}) }))) }))] }));
 }
 /**
  * Component to render a single tool call within a grouped parallel operation
@@ -290,7 +231,7 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
         "--w-rjv-type-nan-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
         "--w-rjv-type-undefined-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
     };
-    return (_jsxs("div", { className: "text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null && loc.line !== undefined && `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), ((toolCall.content && toolCall.content.length > 0) ||
+    return (_jsxs("div", { className: "text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null && loc.line !== undefined && `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, shortenTextAfterLength: 80, style: jsonStyle }) })] })), ((toolCall.content && toolCall.content.length > 0) ||
                 toolCall.error) && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
                                 // Generate a stable key based on content
                                 const getBlockKey = () => {
@@ -314,7 +255,7 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                     try {
                                         const parsed = JSON.parse(text);
                                         if (typeof parsed === "object" && parsed !== null) {
-                                            return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) }, key));
+                                            return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, shortenTextAfterLength: 80, style: jsonStyle }) }, key));
                                         }
                                     }
                                     catch {

package/dist/gui/components/WorkProgress.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { getGroupDisplayState, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
+import { isPreliminaryToolCall } from "../../core/utils/tool-call-state.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { ToolOperation } from "./ToolOperation.js";
@@ -22,6 +22,7 @@ export function WorkProgress({ thinking, isThinkingStreaming = false, toolCalls
                     result.push({ type: "selecting", toolCalls: selectingGroup });
                 }
                 else {
+                    // biome-ignore lint/style/noNonNullAssertion: else branch ensures array has exactly one element
                     result.push({ type: "single", toolCall: selectingGroup[0] });
                 }
                 selectingGroup = [];
@@ -64,14 +65,15 @@ export function WorkProgress({ thinking, isThinkingStreaming = false, toolCalls
     if (!hasThinking && !hasToolCalls) {
         return null;
     }
-    return (_jsxs("div", { className: cn("work-progress", className), children: [hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: isThinkingStreaming, mode: thinkingDisplayStyle, autoCollapse: autoCollapseThinking })), groupedToolCalls.map((group, index) => {
+    return (_jsxs("div", { className: cn("work-progress", className), children: [hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: isThinkingStreaming, mode: thinkingDisplayStyle, autoCollapse: autoCollapseThinking })), groupedToolCalls.map((group, _index) => {
                 if (group.type === "batch") {
                     // Parallel operations group
                     return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: true }, `batch-${group.batchId}`));
                 }
                 if (group.type === "selecting") {
                     // Multiple selecting operations
-                    return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: false }, `selecting-${index}`));
+                    const selectingKey = group.toolCalls.map((tc) => tc.id).join("-");
+                    return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: false }, `selecting-${selectingKey}`));
                 }
                 // Single tool call
                 return (_jsx(ToolOperation, { toolCalls: [group.toolCall], isGrouped: false, autoMinimize: true }, group.toolCall.id));

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

@@ -6,7 +6,6 @@ export { AppSidebar, type AppSidebarProps, } from "./AppSidebar.js";
 export { Button, type ButtonProps, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState, type ChatEmptyStateProps } from "./ChatEmptyState.js";
-export type { ConnectionStatus } from "./ChatHeader.js";
 export * as ChatHeader from "./ChatHeader.js";
 export { Actions as ChatInputActions, Attachment as ChatInputAttachment, type ChatInputActionsProps, type ChatInputAttachmentProps, type ChatInputCommandMenuProps, type ChatInputFieldProps, type ChatInputRootProps, type ChatInputSubmitProps, type ChatInputToolbarProps, type ChatInputVoiceInputProps, CommandMenu as ChatInputCommandMenu, type CommandMenuItem, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
 export * as ChatLayout from "./ChatLayout.js";

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

@@ -1,5 +1,5 @@
 import * as ResizablePrimitive from "react-resizable-panels";
-declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
+declare const ResizablePanelGroup: React.FC<React.ComponentProps<typeof ResizablePrimitive.PanelGroup>>;
 declare const ResizablePanel: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) => import("react/jsx-runtime").JSX.Element;
 declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;

package/dist/gui/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const SIDEBAR_WIDTH_DESKTOP = 256;
+export declare const SIDEBAR_WIDTH_MOBILE = "calc(100vw - 104px)";
+export declare const SIDEBAR_TAP_ZONE = 104;
+export declare const ASIDE_WIDTH_DEFAULT = 450;
+export declare const ASIDE_WIDTH_MIN = 250;
+export declare const ASIDE_WIDTH_MAX = 800;

package/dist/gui/constants.js

@@ -0,0 +1,8 @@
+// Sidebar constants
+export const SIDEBAR_WIDTH_DESKTOP = 256;
+export const SIDEBAR_WIDTH_MOBILE = "calc(100vw - 104px)";
+export const SIDEBAR_TAP_ZONE = 104;
+// Aside panel constants
+export const ASIDE_WIDTH_DEFAULT = 450;
+export const ASIDE_WIDTH_MIN = 250;
+export const ASIDE_WIDTH_MAX = 800;

package/dist/gui/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";
 export { useScrollToBottom } from "./use-scroll-to-bottom.js";

package/dist/gui/hooks/index.js

@@ -1,2 +1,3 @@
+export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";
 export { useScrollToBottom } from "./use-scroll-to-bottom.js";

package/dist/gui/hooks/use-lock-body-scroll.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to lock body scroll when a modal/drawer is open
+ * Primarily used for mobile sidebar overlay to prevent background scrolling
+ *
+ * @param lock - Whether to lock the body scroll
+ */
+export declare function useLockBodyScroll(lock: boolean): void;

package/dist/gui/hooks/use-lock-body-scroll.js

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+/**
+ * Hook to lock body scroll when a modal/drawer is open
+ * Primarily used for mobile sidebar overlay to prevent background scrolling
+ *
+ * @param lock - Whether to lock the body scroll
+ */
+export function useLockBodyScroll(lock) {
+    useEffect(() => {
+        if (!lock)
+            return;
+        // Store current scroll position
+        const scrollY = window.scrollY;
+        // Lock body scroll
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = "100%";
+        document.body.style.overflow = "hidden";
+        return () => {
+            // Unlock body scroll
+            document.body.style.position = "";
+            document.body.style.top = "";
+            document.body.style.width = "";
+            document.body.style.overflow = "";
+            // Restore scroll position
+            window.scrollTo(0, scrollY);
+        };
+    }, [lock]);
+}

package/dist/gui/lib/motion.d.ts

@@ -53,3 +53,15 @@ export declare function getTransition(shouldReduceMotion: boolean, transition?:
  * Get duration with reduced motion consideration
  */
 export declare function getDuration(shouldReduceMotion: boolean, duration?: number): number;
+export declare const sidebarTransition: Transition;
+export declare const sidebarMobileTransition: Transition;
+export declare const sidebarDesktopVariants: Variants;
+export declare const sidebarMobileVariants: Variants;
+export declare const sidebarContentVariants: Variants;
+export declare const sidebarContentTransition: Transition;
+export declare const backdropVariants: Variants;
+export declare const asideDesktopVariants: Variants;
+export declare const asideMobileVariants: Variants;
+export declare const asideContentVariants: Variants;
+export declare const asideContentTransition: Transition;
+export declare const asideMobileTransition: Transition;

package/dist/gui/lib/motion.js

@@ -215,3 +215,72 @@ export function getTransition(shouldReduceMotion, transition = standardTransitio
 export function getDuration(shouldReduceMotion, duration = motionDuration.normal) {
     return shouldReduceMotion ? 0.01 : duration;
 }
+// ============================================================================
+// Sidebar Animations (AppSidebar)
+// ============================================================================
+export const sidebarTransition = {
+    duration: 0.5,
+    ease: motionEasing.smooth,
+};
+export const sidebarMobileTransition = {
+    duration: 0.3,
+    ease: motionEasing.smooth,
+};
+// Desktop: Slide animation (fixed width, no reflow)
+export const sidebarDesktopVariants = {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    exit: { x: "-100%" },
+};
+// Mobile: Slide animation (overlay from left)
+export const sidebarMobileVariants = {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    exit: { x: "-100%" },
+};
+// Sidebar content fade-in (snappy, only on open)
+export const sidebarContentVariants = {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+};
+export const sidebarContentTransition = {
+    duration: 0.5,
+    ease: motionEasing.smooth,
+    delay: 0.25,
+};
+// Backdrop animation for mobile overlay
+export const backdropVariants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+};
+// ============================================================================
+// Aside Panel Animations (ChatLayout.Aside)
+// ============================================================================
+// Desktop: Width-based slide animation (inline panel, main content reflows)
+export const asideDesktopVariants = {
+    initial: { width: 0 },
+    animate: { width: "auto" },
+    exit: { width: 0 },
+};
+// Mobile: Slide animation from right (full-screen overlay)
+export const asideMobileVariants = {
+    initial: { x: "100%" },
+    animate: { x: 0 },
+    exit: { x: "100%" },
+};
+// Aside content fade-in (delayed, snappy)
+export const asideContentVariants = {
+    initial: { opacity: 0, x: 20 },
+    animate: { opacity: 1, x: 0 },
+};
+export const asideContentTransition = {
+    duration: 0.35,
+    ease: motionEasing.smooth,
+    delay: 0.1,
+};
+// Mobile transition (faster, matches sidebar)
+export const asideMobileTransition = {
+    duration: 0.3,
+    ease: motionEasing.smooth,
+};

package/dist/sdk/schemas/message.d.ts

@@ -13,9 +13,9 @@ export type MessageRole = z.infer<typeof MessageRole>;
  * Content type for messages
  */
 export declare const ContentType: z.ZodEnum<{
+    file: "file";
     text: "text";
     image: "image";
-    file: "file";
     tool_call: "tool_call";
     tool_result: "tool_result";
 }>;
@@ -25,9 +25,9 @@ export type ContentType = z.infer<typeof ContentType>;
  */
 export declare const BaseContent: z.ZodObject<{
     type: z.ZodEnum<{
+        file: "file";
         text: "text";
         image: "image";
-        file: "file";
         tool_call: "tool_call";
         tool_result: "tool_result";
     }>;

package/dist/sdk/schemas/session.d.ts

@@ -5,11 +5,11 @@ import { z } from "zod";
 export declare const SessionStatus: z.ZodEnum<{
     error: "error";
     active: "active";
-    disconnected: "disconnected";
+    idle: "idle";
     connecting: "connecting";
     connected: "connected";
-    idle: "idle";
     streaming: "streaming";
+    disconnected: "disconnected";
 }>;
 export type SessionStatus = z.infer<typeof SessionStatus>;
 /**
@@ -42,11 +42,11 @@ export declare const Session: z.ZodObject<{
     status: z.ZodEnum<{
         error: "error";
         active: "active";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>;
     config: z.ZodObject<{
         agentPath: z.ZodString;
@@ -118,11 +118,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
         active: "active";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -197,9 +197,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
             other: "other";
         }>;
         status: z.ZodEnum<{
-            completed: "completed";
             pending: "pending";
             in_progress: "in_progress";
+            completed: "completed";
             failed: "failed";
         }>;
         contentPosition: z.ZodOptional<z.ZodNumber>;
@@ -265,9 +265,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                 prettyName: z.ZodOptional<z.ZodString>;
                 icon: z.ZodOptional<z.ZodString>;
                 status: z.ZodEnum<{
-                    completed: "completed";
                     pending: "pending";
                     in_progress: "in_progress";
+                    completed: "completed";
                     failed: "failed";
                 }>;
                 content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -310,9 +310,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
-                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
+                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -355,11 +355,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
         active: "active";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -412,9 +412,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     toolCallUpdate: z.ZodObject<{
         id: z.ZodString;
         status: z.ZodOptional<z.ZodEnum<{
-            completed: "completed";
             pending: "pending";
             in_progress: "in_progress";
+            completed: "completed";
             failed: "failed";
         }>>;
         title: z.ZodOptional<z.ZodString>;
@@ -473,9 +473,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                 prettyName: z.ZodOptional<z.ZodString>;
                 icon: z.ZodOptional<z.ZodString>;
                 status: z.ZodEnum<{
-                    completed: "completed";
                     pending: "pending";
                     in_progress: "in_progress";
+                    completed: "completed";
                     failed: "failed";
                 }>;
                 content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -518,9 +518,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
-                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
+                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -562,11 +562,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
         active: "active";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -627,11 +627,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
         active: "active";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;

package/dist/sdk/transports/http.d.ts

@@ -1,5 +1,5 @@
 import type { Message, MessageChunk, SessionUpdate } from "../schemas/index.js";
-import type { HttpTransportOptions, SessionSummary, Transport } from "./types.js";
+import { type HttpTransportOptions, type SessionSummary, type Transport } from "./types.js";
 /**
  * HTTP transport implementation using ACP over HTTP + SSE
  * Uses POST /rpc for client->agent messages and GET /events (SSE) for agent->client

package/dist/sdk/transports/http.js

@@ -1,5 +1,6 @@
 import * as acp from "@agentclientprotocol/sdk";
 import { createLogger } from "@townco/core";
+import { httpTransportOptionsSchema, } from "./types.js";
 const logger = createLogger("http-transport");
 /**
  * HTTP transport implementation using ACP over HTTP + SSE
@@ -24,6 +25,14 @@ export class HttpTransport {
     isInReplayMode = false; // True during session replay, ignores non-replay streaming
     agentInfo;
     constructor(options) {
+        // Validate options at the boundary using Zod
+        const validationResult = httpTransportOptionsSchema.safeParse(options);
+        if (!validationResult.success) {
+            const errorMessages = validationResult.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join("; ");
+            throw new Error(`Invalid HTTP transport configuration: ${errorMessages}`);
+        }
         // Ensure baseUrl doesn't end with a slash
         this.options = { ...options, baseUrl: options.baseUrl.replace(/\/$/, "") };
     }

package/dist/sdk/transports/stdio.js

@@ -180,7 +180,7 @@ export class StdioTransport {
                                 }),
                                 startedAt: Date.now(),
                             };
-                            const sessionUpdate = {
+                            const _sessionUpdate = {
                                 type: "tool_call",
                                 sessionId,
                                 status: "active",
@@ -265,7 +265,7 @@ export class StdioTransport {
                                     ? Date.now()
                                     : undefined,
                             };
-                            const sessionUpdate = {
+                            const _sessionUpdate = {
                                 type: "tool_call_update",
                                 sessionId,
                                 status: "active",

package/dist/sdk/transports/types.d.ts

@@ -1,3 +1,4 @@
+import { z } from "zod";
 import type { Message, MessageChunk, SessionUpdate } from "../schemas/index.js";
 /**
  * Agent tool information exposed via initialize response
@@ -127,6 +128,16 @@ export interface StdioTransportOptions {
     workingDirectory?: string;
     timeout?: number;
 }
+/**
+ * Zod schema for validating HTTP transport options
+ * Validates that baseUrl is a valid URL at the boundary
+ */
+export declare const httpTransportOptionsSchema: z.ZodObject<{
+    baseUrl: z.ZodString;
+    apiKey: z.ZodOptional<z.ZodString>;
+    timeout: z.ZodOptional<z.ZodNumber>;
+    headers: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+}, z.core.$strip>;
 /**
  * HTTP transport options
  */

package/dist/sdk/transports/types.js

@@ -1 +1,28 @@
-export {};
+import { z } from "zod";
+/**
+ * Zod schema for validating HTTP transport options
+ * Validates that baseUrl is a valid URL at the boundary
+ */
+export const httpTransportOptionsSchema = z.object({
+    baseUrl: z
+        .string()
+        .url("Invalid base URL. Must be a valid URL (e.g., http://localhost:3000)")
+        .refine((url) => {
+        try {
+            const parsed = new URL(url);
+            // Check for common mistakes like double ports (e.g., http://localhost:3102:3100)
+            if (parsed.port && parsed.hostname.includes(":")) {
+                return false;
+            }
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, {
+        message: "Invalid URL format. Check for typos like duplicate ports (e.g., http://localhost:3102:3100)",
+    }),
+    apiKey: z.string().optional(),
+    timeout: z.number().optional(),
+    headers: z.record(z.string(), z.string()).optional(),
+});