@townco/ui 0.1.16 → 0.1.18

package/dist/gui/components/Textarea.js

@@ -1,68 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 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 textareaVariants = cva(
-	"flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
-	{
-		variants: {
-			variant: {
-				default: "border-input focus-visible:ring-ring",
-				error: "border-destructive focus-visible:ring-destructive",
-				success: "border-green-500 focus-visible:ring-green-500",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-const Textarea = React.forwardRef(
-	(
-		{ className, autoResize = false, maxHeight = 200, variant, ...props },
-		ref,
-	) => {
-		const textareaRef = React.useRef(null);
-		const handleRef = React.useCallback(
-			(node) => {
-				textareaRef.current = node;
-				if (typeof ref === "function") {
-					ref(node);
-				} else if (ref) {
-					ref.current = node;
-				}
-			},
-			[ref],
-		);
-		const adjustHeight = React.useCallback(() => {
-			const textarea = textareaRef.current;
-			if (!textarea || !autoResize) return;
-			// Reset height to auto to get the correct scrollHeight
-			textarea.style.height = "auto";
-			// Set new height based on content, respecting maxHeight
-			const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-			textarea.style.height = `${newHeight}px`;
-			// Enable scrollbar if content exceeds maxHeight
-			if (textarea.scrollHeight > maxHeight) {
-				textarea.style.overflowY = "auto";
-			} else {
-				textarea.style.overflowY = "hidden";
-			}
-		}, [autoResize, maxHeight]);
-		React.useEffect(() => {
-			adjustHeight();
-		}, [adjustHeight]);
-		return _jsx("textarea", {
-			className: cn(
-				textareaVariants({ variant }),
-				autoResize && "overflow-y-hidden",
-				className,
-			),
-			ref: handleRef,
-			...props,
-		});
-	},
-);
+const textareaVariants = cva("flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none", {
+    variants: {
+        variant: {
+            default: "border-input focus-visible:ring-ring",
+            error: "border-destructive focus-visible:ring-destructive",
+            success: "border-green-500 focus-visible:ring-green-500",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Textarea = React.forwardRef(({ className, autoResize = false, maxHeight = 200, variant, ...props }, ref) => {
+    const textareaRef = React.useRef(null);
+    const handleRef = React.useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const adjustHeight = React.useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea || !autoResize)
+            return;
+        // Reset height to auto to get the correct scrollHeight
+        textarea.style.height = "auto";
+        // Set new height based on content, respecting maxHeight
+        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+        textarea.style.height = `${newHeight}px`;
+        // Enable scrollbar if content exceeds maxHeight
+        if (textarea.scrollHeight > maxHeight) {
+            textarea.style.overflowY = "auto";
+        }
+        else {
+            textarea.style.overflowY = "hidden";
+        }
+    }, [autoResize, maxHeight]);
+    React.useEffect(() => {
+        adjustHeight();
+    }, [adjustHeight]);
+    return (_jsx("textarea", { className: cn(textareaVariants({ variant }), autoResize && "overflow-y-hidden", className), ref: handleRef, ...props }));
+});
 Textarea.displayName = "Textarea";
 export { Textarea, textareaVariants };

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

@@ -1,22 +1,12 @@
 import { type VariantProps } from "class-variance-authority";
-declare const thinkingBlockVariants: (
-	props?:
-		| ({
-				variant?: "default" | "subtle" | "prominent" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface ThinkingBlockProps
-	extends VariantProps<typeof thinkingBlockVariants> {
-	thinking?: string;
-	isStreaming?: boolean;
-	displayMode?: "collapsible" | "inline";
-	className?: string;
+declare const thinkingBlockVariants: (props?: ({
+    variant?: "default" | "subtle" | "prominent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ThinkingBlockProps extends VariantProps<typeof thinkingBlockVariants> {
+    thinking?: string;
+    isStreaming?: boolean;
+    displayMode?: "collapsible" | "inline";
+    className?: string;
 }
-export declare function ThinkingBlock({
-	thinking,
-	isStreaming,
-	displayMode,
-	variant,
-	className,
-}: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ThinkingBlock({ thinking, isStreaming, displayMode, variant, className, }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/gui/components/ThinkingBlock.js

@@ -1,139 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const thinkingBlockVariants = cva(
-	"mb-3 p-3 rounded-lg bg-card border border-border",
-	{
-		variants: {
-			variant: {
-				default: "opacity-70",
-				subtle: "opacity-50",
-				prominent: "opacity-90",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-const thinkingIconVariants = cva(
-	"w-4 h-4 text-foreground opacity-60 transition-transform",
-	{
-		variants: {
-			expanded: {
-				true: "rotate-180",
-				false: "",
-			},
-		},
-		defaultVariants: {
-			expanded: false,
-		},
-	},
-);
-export function ThinkingBlock({
-	thinking,
-	isStreaming,
-	displayMode = "collapsible",
-	variant,
-	className,
-}) {
-	const [isExpanded, setIsExpanded] = useState(false);
-	if (!thinking && !isStreaming) {
-		return null;
-	}
-	// Inline mode - always visible
-	if (displayMode === "inline") {
-		return _jsxs("div", {
-			className: cn(thinkingBlockVariants({ variant }), className),
-			children: [
-				_jsxs("div", {
-					className: "flex items-start gap-2",
-					children: [
-						_jsx("span", {
-							className:
-								"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-							children: "Thinking",
-						}),
-						isStreaming &&
-							_jsx("span", {
-								className:
-									"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
-							}),
-					],
-				}),
-				_jsxs("div", {
-					className:
-						"mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-					children: [
-						thinking,
-						isStreaming &&
-							thinking &&
-							_jsx("span", {
-								className: "inline-block animate-typing",
-								children: "...",
-							}),
-					],
-				}),
-			],
-		});
-	}
-	// Collapsible mode
-	return _jsxs("div", {
-		className: cn("mb-3", className),
-		children: [
-			_jsxs("button", {
-				type: "button",
-				onClick: () => setIsExpanded(!isExpanded),
-				className:
-					"w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left",
-				children: [
-					_jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [
-							_jsx("span", {
-								className:
-									"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-								children: "Thinking",
-							}),
-							isStreaming &&
-								_jsx("span", {
-									className:
-										"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
-								}),
-							!isExpanded &&
-								thinking &&
-								_jsxs("span", {
-									className:
-										"text-xs text-foreground opacity-50 truncate max-w-[200px]",
-									children: [thinking.substring(0, 50), "..."],
-								}),
-						],
-					}),
-					_jsx(ChevronDown, {
-						className: thinkingIconVariants({ expanded: isExpanded }),
-					}),
-				],
-			}),
-			isExpanded &&
-				_jsx("div", {
-					className: cn(thinkingBlockVariants({ variant }), "mt-2"),
-					children: _jsxs("div", {
-						className:
-							"text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-						children: [
-							thinking,
-							isStreaming &&
-								thinking &&
-								_jsx("span", {
-									className: "inline-block animate-typing",
-									children: "...",
-								}),
-						],
-					}),
-				}),
-		],
-	});
+const thinkingBlockVariants = cva("mb-3 p-3 rounded-lg bg-card border border-border", {
+    variants: {
+        variant: {
+            default: "opacity-70",
+            subtle: "opacity-50",
+            prominent: "opacity-90",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const thinkingIconVariants = cva("w-4 h-4 text-foreground opacity-60 transition-transform", {
+    variants: {
+        expanded: {
+            true: "rotate-180",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+export function ThinkingBlock({ thinking, isStreaming, displayMode = "collapsible", variant, className, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (!thinking && !isStreaming) {
+        return null;
+    }
+    // Inline mode - always visible
+    if (displayMode === "inline") {
+        return (_jsxs("div", { className: cn(thinkingBlockVariants({ variant }), className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] })] }));
+    }
+    // Collapsible mode
+    return (_jsxs("div", { className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" })), !isExpanded && thinking && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate max-w-[200px]", children: [thinking.substring(0, 50), "..."] }))] }), _jsx(ChevronDown, { className: thinkingIconVariants({ expanded: isExpanded }) })] }), isExpanded && (_jsx("div", { className: cn(thinkingBlockVariants({ variant }), "mt-2"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] }) }))] }));
 }

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

@@ -7,16 +7,14 @@ import { type TodoItem } from "./TodoListItem.js";
  * 2. Prop-based: Pass `todos` prop directly
  */
 export interface TodoListProps 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[];
+    /**
+     * 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 TodoList: React.ForwardRefExoticComponent<
-	TodoListProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const TodoList: React.ForwardRefExoticComponent<TodoListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/TodoList.js

@@ -1,26 +1,11 @@
-import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { TodoListItem } from "./TodoListItem.js";
-export const TodoList = 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 || [];
-		return _jsx("div", {
-			ref: ref,
-			className: cn("space-y-2 max-h-64 overflow-y-auto", className),
-			...props,
-			children:
-				todosToDisplay.length === 0
-					? _jsx("p", {
-							className: "text-sm text-foreground opacity-60 italic",
-							children: "No tasks yet.",
-						})
-					: todosToDisplay.map((todo) =>
-							_jsx(TodoListItem, { todo: todo }, todo.id),
-						),
-		});
-	},
-);
+export const TodoList = 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 || [];
+    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.length === 0 ? (_jsx("p", { className: "text-sm text-foreground opacity-60 italic", children: "No tasks yet." })) : (todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id)))) }));
+});
 TodoList.displayName = "TodoList";

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

@@ -1,13 +1,10 @@
 import * as React from "react";
 export interface TodoItem {
-	id: string;
-	text: string;
-	status: "pending" | "in_progress" | "completed";
+    id: string;
+    text: string;
+    status: "pending" | "in_progress" | "completed";
 }
-export interface TodoListItemProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	todo: TodoItem;
+export interface TodoListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    todo: TodoItem;
 }
-export declare const TodoListItem: React.ForwardRefExoticComponent<
-	TodoListItemProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const TodoListItem: React.ForwardRefExoticComponent<TodoListItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/TodoListItem.js

@@ -1,21 +1,7 @@
-import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
-export const TodoListItem = React.forwardRef(
-	({ todo, className, ...props }, ref) => {
-		return _jsx("div", {
-			ref: ref,
-			className: cn("flex items-center gap-3 px-3 py-2 rounded-lg", className),
-			...props,
-			children: _jsx("span", {
-				className: cn(
-					"flex-1 text-[var(--font-size)] font-[var(--font-family)]",
-					todo.status === "completed" && "line-through opacity-60",
-					todo.status === "in_progress" && "shimmer-animation",
-				),
-				children: todo.text,
-			}),
-		});
-	},
-);
+export const TodoListItem = React.forwardRef(({ todo, className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex items-center gap-3 px-3 py-2 rounded-lg", className), ...props, children: _jsx("span", { className: cn("flex-1 text-[var(--font-size)] font-[var(--font-family)]", todo.status === "completed" && "line-through opacity-60", todo.status === "in_progress" && "shimmer-animation"), children: todo.text }) }));
+});
 TodoListItem.displayName = "TodoListItem";

package/dist/gui/components/ToolCall.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import JsonView from "@uiw/react-json-view";
 import { Wrench } from "lucide-react";
 import { useState } from "react";
-import ReactJson from "react-json-view";
 /**
  * Tool call status badge styles
  */
@@ -33,7 +33,7 @@ export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
     return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-gray-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-gray-200 rounded-md p-3 bg-white shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-gray-700 bg-gray-50 px-2 py-1 rounded", 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", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(ReactJson, { src: toolCall.rawInput, name: false, collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" }, theme: "rjv-default" }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" } }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
                                     // Generate a stable key based on content
                                     const getBlockKey = () => {
                                         if (block.type === "diff" && "path" in block) {
@@ -56,12 +56,12 @@ export function ToolCall({ toolCall }) {
                                         // Try to parse as JSON
                                         try {
                                             const parsed = JSON.parse(text);
-                                            // If it's an object or array, render with ReactJson
+                                            // If it's an object or array, render with JsonView
                                             if (typeof parsed === "object" && parsed !== null) {
-                                                return (_jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(ReactJson, { src: parsed, name: false, collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
+                                                return (_jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
                                                             fontSize: "11px",
                                                             backgroundColor: "transparent",
-                                                        }, theme: "rjv-default" }) }, key));
+                                                        } }) }, key));
                                             }
                                         }
                                         catch {

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

@@ -19,6 +19,7 @@ export { MarkdownRenderer } from "./MarkdownRenderer.js";
 export { Message, type MessageProps } from "./Message.js";
 export { MessageContent, type MessageContentProps } from "./MessageContent.js";
 export type { DisplayMessage } from "./MessageList.js";
+export { PanelTabsHeader, type PanelTabsHeaderProps, } from "./PanelTabsHeader.js";
 export { Reasoning, type ReasoningProps } from "./Reasoning.js";
 export { Response, type ResponseProps } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";

package/dist/gui/components/index.js

@@ -24,6 +24,7 @@ export { Label } from "./Label.js";
 export { MarkdownRenderer } from "./MarkdownRenderer.js";
 export { Message } from "./Message.js";
 export { MessageContent } from "./MessageContent.js";
+export { PanelTabsHeader, } from "./PanelTabsHeader.js";
 export { Reasoning } from "./Reasoning.js";
 export { Response } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";

package/dist/gui/lib/utils.js

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
-	return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }

package/dist/index.test.js

@@ -0,0 +1 @@
+"use strict";