@townco/ui 0.1.6 → 0.1.8

package/dist/gui/components/ChatLayout.js

@@ -1,232 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
 import * as React from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Toaster } from "./Sonner.js";
-
 const ChatLayoutContext = React.createContext(undefined);
 const useChatLayoutContext = () => {
-	const context = React.useContext(ChatLayoutContext);
-	if (!context) {
-		throw new Error(
-			"ChatLayout components must be used within ChatLayout.Root",
-		);
-	}
-	return context;
+    const context = React.useContext(ChatLayoutContext);
+    if (!context) {
+        throw new Error("ChatLayout components must be used within ChatLayout.Root");
+    }
+    return context;
 };
-const ChatLayoutRoot = React.forwardRef(
-	(
-		{
-			defaultSidebarOpen = false,
-			defaultPanelSize = "hidden",
-			defaultActiveTab = "todo",
-			className,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
-		const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
-		const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
-		return _jsx(ChatLayoutContext.Provider, {
-			value: {
-				sidebarOpen,
-				setSidebarOpen,
-				panelSize,
-				setPanelSize,
-				activeTab,
-				setActiveTab,
-			},
-			children: _jsx("div", {
-				ref: ref,
-				className: cn(
-					"flex h-screen flex-row bg-background text-foreground",
-					className,
-				),
-				...props,
-				children: children,
-			}),
-		});
-	},
-);
+const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPanelSize = "hidden", defaultActiveTab = "todo", className, children, ...props }, ref) => {
+    const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
+    const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
+    const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+    return (_jsx(ChatLayoutContext.Provider, { value: {
+            sidebarOpen,
+            setSidebarOpen,
+            panelSize,
+            setPanelSize,
+            activeTab,
+            setActiveTab,
+        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: children }) }));
+});
 ChatLayoutRoot.displayName = "ChatLayout.Root";
-const ChatLayoutHeader = React.forwardRef(
-	({ className, children, ...props }, ref) => {
-		return _jsx("div", {
-			ref: ref,
-			className: cn(
-				"relative z-10 border-b border-border bg-card shrink-0",
-				className,
-			),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("relative z-10 border-b border-border bg-card shrink-0", className), ...props, children: children }));
+});
 ChatLayoutHeader.displayName = "ChatLayout.Header";
-const ChatLayoutMain = React.forwardRef(
-	({ className, children, ...props }, ref) => {
-		return _jsx("div", {
-			ref: ref,
-			className: cn("flex flex-1 flex-col overflow-hidden", className),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden", className), ...props, children: children }));
+});
 ChatLayoutMain.displayName = "ChatLayout.Main";
-const ChatLayoutBody = React.forwardRef(
-	({ showToaster = true, className, children, ...props }, ref) => {
-		return _jsxs("div", {
-			ref: ref,
-			className: cn("relative flex flex-1 flex-col overflow-hidden", className),
-			...props,
-			children: [children, showToaster && _jsx(Toaster, {})],
-		});
-	},
-);
+const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
+});
 ChatLayoutBody.displayName = "ChatLayout.Body";
-const ChatLayoutMessages = React.forwardRef(
-	(
-		{
-			className,
-			children,
-			onScrollChange,
-			showScrollToBottom = true,
-			...props
-		},
-		ref,
-	) => {
-		const [showScrollButton, setShowScrollButton] = React.useState(false);
-		const scrollContainerRef = React.useRef(null);
-		// Merge refs
-		React.useImperativeHandle(ref, () => scrollContainerRef.current);
-		// Check if user is at bottom of scroll
-		const checkScrollPosition = React.useCallback(() => {
-			const container = scrollContainerRef.current;
-			if (!container) return;
-			const { scrollTop, scrollHeight, clientHeight } = container;
-			const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-			const isAtBottom = distanceFromBottom < 100; // 100px threshold
-			setShowScrollButton(!isAtBottom && showScrollToBottom);
-			onScrollChange?.(isAtBottom);
-		}, [onScrollChange, showScrollToBottom]);
-		// Handle scroll events
-		const handleScroll = React.useCallback(() => {
-			checkScrollPosition();
-		}, [checkScrollPosition]);
-		// Scroll to bottom function
-		const scrollToBottom = React.useCallback(() => {
-			const container = scrollContainerRef.current;
-			if (!container) return;
-			container.scrollTo({
-				top: container.scrollHeight,
-				behavior: "smooth",
-			});
-		}, []);
-		// Check scroll position on mount and when children change
-		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" }),
-					}),
-			],
-		});
-	},
-);
+const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    const scrollContainerRef = React.useRef(null);
+    // Merge refs
+    React.useImperativeHandle(ref, () => scrollContainerRef.current);
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events
+    const handleScroll = React.useCallback(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    // Scroll to bottom function
+    const scrollToBottom = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "smooth",
+        });
+    }, []);
+    // Check scroll position on mount and when children change
+    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" }) }))] }));
+});
 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,
-		});
-	},
-);
+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 }));
+});
 ChatLayoutFooter.displayName = "ChatLayout.Footer";
-const ChatLayoutSidebar = React.forwardRef(
-	({ className, children, ...props }, ref) => {
-		const { sidebarOpen } = useChatLayoutContext();
-		if (!sidebarOpen) return null;
-		return _jsx("div", {
-			ref: ref,
-			className: cn(
-				"border-r border-border bg-card w-64 overflow-y-auto",
-				className,
-			),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { sidebarOpen } = useChatLayoutContext();
+    if (!sidebarOpen)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn("border-r border-border bg-card w-64 overflow-y-auto", className), ...props, children: children }));
+});
 ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
-const ChatLayoutAside = React.forwardRef(
-	({ breakpoint = "lg", className, children, ...props }, ref) => {
-		const { panelSize } = useChatLayoutContext();
-		// Hidden state - don't render
-		if (panelSize === "hidden") return null;
-		return _jsx("div", {
-			ref: ref,
-			className: cn(
-				// Hidden by default, visible at breakpoint
-				"hidden border-l border-border bg-card overflow-y-auto transition-all duration-300",
-				// Breakpoint visibility
-				breakpoint === "md" && "md:block",
-				breakpoint === "lg" && "lg:block",
-				breakpoint === "xl" && "xl:block",
-				breakpoint === "2xl" && "2xl:block",
-				// Size variants
-				panelSize === "small" && "w-80",
-				panelSize === "large" && "w-[32rem]",
-				className,
-			),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children, ...props }, ref) => {
+    const { panelSize } = useChatLayoutContext();
+    // Hidden state - don't render
+    if (panelSize === "hidden")
+        return null;
+    return (_jsx("div", { ref: ref, className: cn(
+        // Hidden by default, visible at breakpoint
+        "hidden border-l border-border bg-card overflow-y-auto transition-all duration-300", 
+        // Breakpoint visibility
+        breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
+        // Size variants
+        panelSize === "small" && "w-80", panelSize === "large" && "w-lg", className), ...props, children: children }));
+});
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------
  * Exports
  * -----------------------------------------------------------------------------------------------*/
-export {
-	ChatLayoutRoot as Root,
-	ChatLayoutHeader as Header,
-	ChatLayoutMain as Main,
-	ChatLayoutBody as Body,
-	ChatLayoutMessages as Messages,
-	ChatLayoutFooter as Footer,
-	ChatLayoutSidebar as Sidebar,
-	ChatLayoutAside as Aside,
-	useChatLayoutContext,
-};
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };

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

@@ -4,24 +4,15 @@ import type { TodoItem } from "./TodoListItem.js";
  * Shared tab content components for both mobile (ChatHeader) and desktop (Panel) views
  * Following component architecture best practices
  */
-export interface TodoTabContentProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	todos: TodoItem[];
+export interface TodoTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    todos: TodoItem[];
 }
-export declare const TodoTabContent: React.ForwardRefExoticComponent<
-	TodoTabContentProps & React.RefAttributes<HTMLDivElement>
->;
-export interface FilesTabContentProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	files?: string[];
+export declare const TodoTabContent: React.ForwardRefExoticComponent<TodoTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    files?: string[];
 }
-export declare const FilesTabContent: React.ForwardRefExoticComponent<
-	FilesTabContentProps & React.RefAttributes<HTMLDivElement>
->;
-export interface DatabaseTabContentProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	data?: unknown;
+export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    data?: unknown;
 }
-export declare const DatabaseTabContent: React.ForwardRefExoticComponent<
-	DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const DatabaseTabContent: React.ForwardRefExoticComponent<DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatPanelTabContent.js

@@ -1,93 +1,15 @@
-import * as React from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
-export const TodoTabContent = React.forwardRef(
-	({ todos, className, ...props }, ref) => {
-		return _jsxs("div", {
-			ref: ref,
-			className: cn("space-y-4", className),
-			...props,
-			children: [
-				_jsx("h3", { className: "font-semibold text-lg", children: "Tasks" }),
-				_jsx("div", {
-					className: "space-y-2",
-					children:
-						todos.length === 0
-							? _jsx("p", {
-									className: "text-sm text-muted-foreground",
-									children: "No tasks yet",
-								})
-							: todos.map((todo) =>
-									_jsx(
-										"div",
-										{ className: "text-sm", children: todo.text },
-										todo.id,
-									),
-								),
-				}),
-			],
-		});
-	},
-);
+export const TodoTabContent = React.forwardRef(({ todos, className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: todos.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No todos yet" }) })) : (todos.map((todo) => (_jsx("div", { className: "text-sm", children: todo.text }, todo.id)))) }));
+});
 TodoTabContent.displayName = "TodoTabContent";
-export const FilesTabContent = React.forwardRef(
-	({ files = [], className, ...props }, ref) => {
-		return _jsxs("div", {
-			ref: ref,
-			className: cn("space-y-4", className),
-			...props,
-			children: [
-				_jsx("h3", { className: "font-semibold text-lg", children: "Files" }),
-				files.length === 0
-					? _jsx("p", {
-							className: "text-sm text-muted-foreground",
-							children: "No files attached",
-						})
-					: _jsx("div", {
-							className: "space-y-2",
-							children: files.map((file) =>
-								_jsx("div", { className: "text-sm", children: file }, file),
-							),
-						}),
-			],
-		});
-	},
-);
+export const FilesTabContent = React.forwardRef(({ files = [], className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: files.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No files attached" }) })) : (files.map((file) => (_jsx("div", { className: "text-sm", children: file }, file)))) }));
+});
 FilesTabContent.displayName = "FilesTabContent";
-export const DatabaseTabContent = React.forwardRef(
-	({ data, className, ...props }, ref) => {
-		return _jsxs("div", {
-			ref: ref,
-			className: cn("space-y-4", className),
-			...props,
-			children: [
-				_jsx("h3", {
-					className: "font-semibold text-lg",
-					children: "Database",
-				}),
-				_jsxs("div", {
-					className: "text-sm text-muted-foreground",
-					children: [
-						_jsx("p", {
-							children:
-								"Database viewer - panel automatically expanded to large size",
-						}),
-						_jsxs("div", {
-							className: "mt-4 p-4 border border-border rounded",
-							children: [
-								_jsx("p", { children: "Your large data table would go here" }),
-								data && typeof data === "object"
-									? _jsx("pre", {
-											className: "mt-2 text-xs overflow-auto",
-											children: JSON.stringify(data, null, 2),
-										})
-									: null,
-							],
-						}),
-					],
-				}),
-			],
-		});
-	},
-);
+export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Database" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("p", { children: "Database viewer - panel automatically expanded to large size" }), _jsxs("div", { className: "mt-4 p-4 border border-border rounded", children: [_jsx("p", { children: "Your large data table would go here" }), data && typeof data === "object" ? (_jsx("pre", { className: "mt-2 text-xs overflow-auto", children: JSON.stringify(data, null, 2) })) : null] })] })] }));
+});
 DatabaseTabContent.displayName = "DatabaseTabContent";

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

@@ -6,18 +6,15 @@ 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[];
 }
-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,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { 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, 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..." }) })] }) }));
+});
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";