@townco/ui 0.1.17 → 0.1.19

package/dist/gui/components/Button.js

@@ -1,46 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-const Button = React.forwardRef(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return _jsx(Comp, {
-			className: cn(buttonVariants({ variant, size, className })),
-			ref: ref,
-			...props,
-		});
-	},
-);
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
 Button.displayName = "Button";
 export { Button, buttonVariants };

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

@@ -1,27 +1,8 @@
 import * as React from "react";
-declare const Card: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardHeader: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardTitle: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardDescription: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardContent: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardFooter: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardDescription,
-	CardContent,
-};
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist/gui/components/Card.js

@@ -1,62 +1,16 @@
-import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
-
-const Card = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn(
-			"rounded-lg border bg-card text-card-foreground shadow-sm",
-			className,
-		),
-		...props,
-	}),
-);
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("flex flex-col space-y-1.5 p-6", className),
-		...props,
-	}),
-);
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn(
-			"text-2xl font-semibold leading-none tracking-tight",
-			className,
-		),
-		...props,
-	}),
-);
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("text-sm text-muted-foreground", className),
-		...props,
-	}),
-);
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props }),
-);
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("flex items-center p-6 pt-0", className),
-		...props,
-	}),
-);
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardDescription,
-	CardContent,
-};
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface ChatEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Agent name/title */
+    title: string;
+    /** Agent description */
+    description: string;
+    /** Optional guide link URL */
+    guideUrl?: string;
+    /** Optional guide link text */
+    guideText?: string;
+    /** Suggested prompts */
+    suggestedPrompts?: string[];
+    /** Callback when a prompt is clicked */
+    onPromptClick?: (prompt: string) => void;
+    /** Callback when guide is clicked */
+    onGuideClick?: () => void;
+}
+export declare const ChatEmptyState: React.ForwardRefExoticComponent<ChatEmptyStateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatEmptyState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export const ChatEmptyState = React.forwardRef(({ title, description, guideUrl, guideText = "Guide", suggestedPrompts = [], onPromptClick, onGuideClick, className, ...props }, ref) => {
+    const handlePromptClick = (prompt) => {
+        onPromptClick?.(prompt);
+    };
+    const handleGuideClick = () => {
+        if (guideUrl) {
+            window.open(guideUrl, "_blank", "noopener,noreferrer");
+        }
+        onGuideClick?.();
+    };
+    // Group prompts into rows of 2
+    const promptRows = [];
+    for (let i = 0; i < suggestedPrompts.length; i += 2) {
+        promptRows.push(suggestedPrompts.slice(i, i + 2));
+    }
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-start gap-6", className), ...props, children: [_jsx("h3", { className: "text-heading-3 text-text-primary hidden lg:block", children: title }), _jsx("p", { className: "text-subheading text-text-secondary max-w-prose", children: description }), (guideUrl || onGuideClick) && (_jsxs("button", { type: "button", onClick: handleGuideClick, className: "flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-accent transition-colors", children: [_jsx("span", { className: "text-sm font-medium leading-normal text-text-primary", children: guideText }), _jsx(ChevronRight, { className: "size-4 text-text-primary" })] })), suggestedPrompts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3 w-full max-w-prompt-container", children: [_jsx("p", { className: "text-label text-text-tertiary", children: "Suggested Prompts" }), _jsx("div", { className: "flex flex-col gap-2.5", children: promptRows.map((row) => (_jsx("div", { className: "flex gap-2.5 items-center", children: row.map((prompt) => (_jsx("button", { type: "button", onClick: () => handlePromptClick(prompt), className: "flex-1 flex items-start gap-2 p-3 bg-secondary hover:bg-secondary/80 rounded-2xl transition-colors min-w-0", children: _jsx("span", { className: "text-base font-normal leading-normal text-text-tertiary truncate", children: prompt }) }, prompt))) }, row.join("-")))) })] }))] }));
+});
+ChatEmptyState.displayName = "ChatEmptyState";

package/dist/gui/components/ChatInput.js

@@ -48,6 +48,34 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
             }, 0);
         }
     };
+    // Handle clicks on the composer to focus the input field
+    const handleFormClick = (e) => {
+        // Don't focus if clicking on interactive elements (buttons, inputs, etc.)
+        const target = e.target;
+        const isInteractive = target.tagName === "BUTTON" ||
+            target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.closest("button");
+        if (!isInteractive && textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    };
+    // Handle keyboard events for accessibility
+    const handleFormKeyDown = (e) => {
+        // Focus input when Space is pressed on the form (but not on interactive elements)
+        // Enter is handled by form submission, so we don't intercept it
+        const target = e.target;
+        const isInteractive = target.tagName === "BUTTON" ||
+            target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.closest("button");
+        if (!isInteractive && e.key === " ") {
+            e.preventDefault();
+            if (textareaRef.current) {
+                textareaRef.current.focus();
+            }
+        }
+    };
     // Expose textarea ref to children via context
     React.useEffect(() => {
         const textarea = document.querySelector('textarea[name="chat-input"]');
@@ -79,7 +107,7 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
             setMenuItemCount,
             triggerMenuSelect,
             triggerCounter,
-        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, className: cn("relative w-full divide-y rounded-xl border bg-background shadow-md", className), ...props, children: children }) }));
+        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, onClick: handleFormClick, onKeyDown: handleFormKeyDown, className: cn("relative w-full divide-y rounded-xl border bg-background shadow-md", className), ...props, children: children }) }));
 });
 ChatInputRoot.displayName = "ChatInput.Root";
 const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown, children, ...props }, ref) => {

package/dist/gui/components/ChatLayout.js

@@ -72,11 +72,11 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
     React.useEffect(() => {
         checkScrollPosition();
     }, [checkScrollPosition]);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto", className), onScroll: handleScroll, ...props, children: children }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "h-4 w-4" }) }))] }));
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto", className), onScroll: handleScroll, ...props, children: _jsx("div", { className: "mx-auto max-w-chat min-h-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("bg-linear-to-t from-background to-transparent px-4 pb-4", className), ...props, children: children }));
+    return (_jsx("div", { ref: ref, className: cn("bg-linear-to-t from-background to-transparent px-4 pb-4", className), ...props, children: _jsx("div", { className: "mx-auto max-w-chat", children: children }) }));
 });
 ChatLayoutFooter.displayName = "ChatLayout.Footer";
 const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, ref) => {

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

@@ -6,18 +6,29 @@ import type { TodoItem } from "./TodoListItem.js";
  * 1. Hook-based: Pass `client` prop (future support when todos are in store)
  * 2. Prop-based: Pass `todos` prop directly
  */
-export interface ChatSecondaryPanelProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * ACP Client for hook-based todo fetching (future support)
-	 */
-	client?: AcpClient | null;
-	/**
-	 * Todos to display (prop-based pattern)
-	 * Either client or todos should be provided
-	 */
-	todos?: TodoItem[];
+export interface ChatSecondaryPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * ACP Client for hook-based todo fetching (future support)
+     */
+    client?: AcpClient | null;
+    /**
+     * Todos to display (prop-based pattern)
+     * Either client or todos should be provided
+     */
+    todos?: TodoItem[];
+    /**
+     * Styling variant
+     * - 'animated': Clip-path animated tabs (original style)
+     * - 'pills': Simple pill-style tabs with background (Figma design)
+     */
+    variant?: "animated" | "pills";
+    /**
+     * Whether to show icons in tabs (for pills variant)
+     */
+    showIcons?: boolean;
+    /**
+     * Which tabs to show
+     */
+    visibleTabs?: ("todo" | "files" | "database")[];
 }
-export declare const ChatSecondaryPanel: React.ForwardRefExoticComponent<
-	ChatSecondaryPanelProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const ChatSecondaryPanel: React.ForwardRefExoticComponent<ChatSecondaryPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatSecondaryPanel.js

@@ -1,121 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSquare, Database, FileText } from "lucide-react";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+import { FilesTabContent, TodoTabContent } from "./ChatPanelTabContent.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 import { TodoList } from "./TodoList.js";
-export const ChatSecondaryPanel = React.forwardRef(
-	({ client, todos, className, ...props }, ref) => {
-		// For now, just use prop-based todos
-		// Future: Add hook to get todos from store when available
-		const todosToDisplay = todos || [];
-		const [activeTab, setActiveTab] = useState("todo");
-		const containerRef = useRef(null);
-		const activeTabElementRef = useRef(null);
-		useEffect(() => {
-			const updateClipPath = () => {
-				const container = containerRef.current;
-				if (activeTab && container) {
-					const activeTabElement = activeTabElementRef.current;
-					if (activeTabElement) {
-						const containerRect = container.getBoundingClientRect();
-						const tabRect = activeTabElement.getBoundingClientRect();
-						const offsetLeft = tabRect.left - containerRect.left;
-						const offsetWidth = tabRect.width;
-						const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
-						const clipRightPercent =
-							100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
-						container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
-					}
-				}
-			};
-			// Small delay to ensure DOM is ready
-			const timeoutId = setTimeout(updateClipPath, 0);
-			return () => clearTimeout(timeoutId);
-		}, [activeTab]);
-		const tabs = [
-			{ id: "todo", label: "To-Do List" },
-			{ id: "files", label: "Files" },
-			{ id: "database", label: "Database" },
-		];
-		return _jsx("div", {
-			ref: ref,
-			className: cn("select-none", className),
-			...props,
-			children: _jsxs(Tabs, {
-				value: activeTab,
-				onValueChange: setActiveTab,
-				className: "w-full",
-				children: [
-					_jsxs("div", {
-						className: "relative mb-4 border-border",
-						children: [
-							_jsx(TabsList, {
-								className:
-									"bg-transparent p-0 h-auto rounded-none w-full border-none",
-								children: tabs.map((tab) =>
-									_jsx(
-										TabsTrigger,
-										{
-											value: tab.id,
-											className:
-												"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-											children: tab.label,
-										},
-										tab.id,
-									),
-								),
-							}),
-							_jsx("div", {
-								ref: containerRef,
-								className:
-									"absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none",
-								style: {
-									clipPath: "inset(0 100% 0 0% round 999px)",
-									transition: "clip-path 0.25s ease-out",
-								},
-								children: _jsx(TabsList, {
-									className:
-										"bg-secondary p-0 h-auto rounded-none w-full border-none",
-									children: tabs.map((tab) =>
-										_jsx(
-											TabsTrigger,
-											{
-												value: tab.id,
-												ref: activeTab === tab.id ? activeTabElementRef : null,
-												className:
-													"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none",
-												tabIndex: -1,
-												children: tab.label,
-											},
-											tab.id,
-										),
-									),
-								}),
-							}),
-						],
-					}),
-					_jsx(TabsContent, {
-						value: "todo",
-						children: _jsx(TodoList, { todos: todosToDisplay }),
-					}),
-					_jsx(TabsContent, {
-						value: "files",
-						children: _jsx("div", {
-							className: "text-sm text-foreground opacity-60 italic",
-							children: "Files tab coming soon...",
-						}),
-					}),
-					_jsx(TabsContent, {
-						value: "database",
-						children: _jsx("div", {
-							className: "text-sm text-foreground opacity-60 italic",
-							children: "Database tab coming soon...",
-						}),
-					}),
-				],
-			}),
-		});
-	},
-);
+export const ChatSecondaryPanel = React.forwardRef(({ client, todos, variant = "animated", showIcons = false, visibleTabs = ["todo", "files", "database"], className, ...props }, ref) => {
+    // For now, just use prop-based todos
+    // Future: Add hook to get todos from store when available
+    const todosToDisplay = todos || [];
+    const [activeTab, setActiveTab] = useState(visibleTabs[0] || "todo");
+    const containerRef = useRef(null);
+    const activeTabElementRef = useRef(null);
+    useEffect(() => {
+        const updateClipPath = () => {
+            const container = containerRef.current;
+            if (activeTab && container) {
+                const activeTabElement = activeTabElementRef.current;
+                if (activeTabElement) {
+                    const containerRect = container.getBoundingClientRect();
+                    const tabRect = activeTabElement.getBoundingClientRect();
+                    const offsetLeft = tabRect.left - containerRect.left;
+                    const offsetWidth = tabRect.width;
+                    const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
+                    const clipRightPercent = 100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
+                    container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
+                }
+            }
+        };
+        // Small delay to ensure DOM is ready
+        const timeoutId = setTimeout(updateClipPath, 0);
+        return () => clearTimeout(timeoutId);
+    }, [activeTab]);
+    const allTabs = [
+        {
+            id: "todo",
+            label: variant === "pills" ? "To-do" : "To-Do List",
+            icon: CheckSquare,
+        },
+        {
+            id: "files",
+            label: "Files",
+            icon: FileText,
+        },
+        {
+            id: "database",
+            label: "Database",
+            icon: Database,
+        },
+    ];
+    const tabs = allTabs.filter((tab) => visibleTabs.includes(tab.id));
+    return (_jsx("div", { ref: ref, className: cn("select-none", className), ...props, children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [variant === "pills" ? (
+                // Pills variant - Simple background highlight (Figma design)
+                _jsx(TabsList, { className: cn("w-full justify-start bg-transparent p-0 h-auto", "gap-1"), children: tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-sm font-medium", "data-[state=active]:bg-zinc-100 data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
+                    }) })) : (
+                // Animated variant - Clip-path animation (original style)
+                _jsxs("div", { className: "relative mb-4 border-border", children: [_jsx(TabsList, { className: "bg-transparent p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.id))) }), _jsx("div", { ref: containerRef, className: "absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none", style: {
+                                clipPath: "inset(0 100% 0 0% round 999px)",
+                                transition: "clip-path 0.25s ease-out",
+                            }, children: _jsx(TabsList, { className: "bg-secondary p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, ref: activeTab === tab.id ? activeTabElementRef : null, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none", tabIndex: -1, children: tab.label }, tab.id))) }) })] })), _jsx(TabsContent, { value: "todo", className: variant === "pills" ? "mt-0" : "", children: variant === "pills" ? (_jsx(TodoTabContent, { todos: todosToDisplay })) : (_jsx(TodoList, { todos: todosToDisplay })) }), _jsx(TabsContent, { value: "files", className: variant === "pills" ? "mt-0" : "", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "database", className: variant === "pills" ? "mt-0" : "", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) })] }) }));
+});
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";

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

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type ReactNode } from "react";
 export interface ChatStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
-	children: ReactNode;
+    children: ReactNode;
 }
-export declare const ChatStatus: React.ForwardRefExoticComponent<
-	ChatStatusProps & React.RefAttributes<HTMLSpanElement>
->;
+export declare const ChatStatus: React.ForwardRefExoticComponent<ChatStatusProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/gui/components/ChatStatus.js

@@ -1,49 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const ChatStatus = React.forwardRef(
-	({ children, className, ...props }, ref) => {
-		const [displayContent, setDisplayContent] = useState(children);
-		const [isTransitioning, setIsTransitioning] = useState(false);
-		const previousContentRef = useRef(children);
-		const isInitialMountRef = useRef(true);
-		useEffect(() => {
-			// Skip transition on initial mount
-			if (isInitialMountRef.current) {
-				isInitialMountRef.current = false;
-				previousContentRef.current = children;
-				return;
-			}
-			// Only transition if content actually changed
-			if (previousContentRef.current === children) {
-				return;
-			}
-			// Start transition out
-			setIsTransitioning(true);
-			// After fade out, update content and fade in
-			const timeoutId = setTimeout(() => {
-				setDisplayContent(children);
-				previousContentRef.current = children;
-				// Trigger fade in
-				requestAnimationFrame(() => {
-					setIsTransitioning(false);
-				});
-			}, 150); // Half of transition duration (300ms total)
-			return () => {
-				clearTimeout(timeoutId);
-			};
-		}, [children]);
-		return _jsx("span", {
-			ref: ref,
-			className: cn(
-				"text-sm text-foreground opacity-60 transition-opacity duration-300",
-				isTransitioning ? "opacity-0" : "opacity-60",
-				className,
-			),
-			...props,
-			children: displayContent,
-		});
-	},
-);
+export const ChatStatus = React.forwardRef(({ children, className, ...props }, ref) => {
+    const [displayContent, setDisplayContent] = useState(children);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const previousContentRef = useRef(children);
+    const isInitialMountRef = useRef(true);
+    useEffect(() => {
+        // Skip transition on initial mount
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false;
+            previousContentRef.current = children;
+            return;
+        }
+        // Only transition if content actually changed
+        if (previousContentRef.current === children) {
+            return;
+        }
+        // Start transition out
+        setIsTransitioning(true);
+        // After fade out, update content and fade in
+        const timeoutId = setTimeout(() => {
+            setDisplayContent(children);
+            previousContentRef.current = children;
+            // Trigger fade in
+            requestAnimationFrame(() => {
+                setIsTransitioning(false);
+            });
+        }, 150); // Half of transition duration (300ms total)
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [children]);
+    return (_jsx("span", { ref: ref, className: cn("text-sm text-foreground opacity-60 transition-opacity duration-300", isTransitioning ? "opacity-0" : "opacity-60", className), ...props, children: displayContent }));
+});
 ChatStatus.displayName = "ChatStatus";