@townco/ui 0.1.3 → 0.1.7

package/README.md

@@ -1,4 +1,4 @@
-# @town/ui
+# @townco/ui
 
 Unified UI package with composable components for chat interfaces.
 
@@ -6,14 +6,14 @@ Unified UI package with composable components for chat interfaces.
 
 Three layers:
 
-1. **Core** (`@town/ui/core`) - Headless business logic
-1. **TUI** (`@town/ui/tui`) - Terminal renderers (Ink)
-1. **GUI** (`@town/ui/gui`) - Web renderers (React + Tailwind)
+1. **Core** (`@townco/ui/core`) - Headless business logic
+1. **TUI** (`@townco/ui/tui`) - Terminal renderers (Ink)
+1. **GUI** (`@townco/ui/gui`) - Web renderers (React + Tailwind)
 
 ## Installation
 
 ```bash
-bun add @town/ui @town/ui
+bun add @townco/ui @townco/ui
 
 # For TUI
 bun add ink react
@@ -27,7 +27,7 @@ bun add react react-dom
 ### Core (Headless Hooks)
 
 ```typescript
-import { useChatSession, useChatMessages, useChatInput } from "@town/ui/core";
+import { useChatSession, useChatMessages, useChatInput } from "@townco/ui/core";
 
 function MyComponent({ client }) {
   const { connectionStatus, sessionId } = useChatSession(client);
@@ -42,8 +42,8 @@ function MyComponent({ client }) {
 
 ```typescript
 import { render } from "ink";
-import { ChatView } from "@town/ui/tui";
-import { AcpClient } from "@town/ui";
+import { ChatView } from "@townco/ui/tui";
+import { AcpClient } from "@townco/ui";
 
 const client = new AcpClient({ stdio: { agentPath: "./agent" } });
 render(<ChatView client={client} />);
@@ -53,8 +53,8 @@ render(<ChatView client={client} />);
 
 ```typescript
 import ReactDOM from "react-dom/client";
-import { ChatView } from "@town/ui/gui";
-import { AcpClient } from "@town/ui";
+import { ChatView } from "@townco/ui/gui";
+import { AcpClient } from "@townco/ui";
 
 const client = new AcpClient({ http: { baseUrl: "http://localhost:8080" } });
 ReactDOM.createRoot(root).render(<ChatView client={client} />);
@@ -152,7 +152,7 @@ bun test
 ## Example: Custom Component
 
 ```typescript
-import { useChatMessages, useChatInput } from "@town/ui/core";
+import { useChatMessages, useChatInput } from "@townco/ui/core";
 
 function CustomChat({ client }) {
   const { messages, sendMessage } = useChatMessages(client);

package/dist/core/hooks/use-chat-input.d.ts

@@ -3,21 +3,21 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat input
  */
 export declare function useChatInput(client: AcpClient | null): {
-	value: string;
-	isSubmitting: boolean;
-	attachedFiles: {
-		name: string;
-		path: string;
-		size: number;
-		mimeType: string;
-	}[];
-	onChange: (value: string) => void;
-	onSubmit: () => Promise<void>;
-	onAttachFile: (file: {
-		name: string;
-		path: string;
-		size: number;
-		mimeType: string;
-	}) => void;
-	onRemoveFile: (index: number) => void;
+    value: string;
+    isSubmitting: boolean;
+    attachedFiles: {
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+    }[];
+    onChange: (value: string) => void;
+    onSubmit: () => Promise<void>;
+    onAttachFile: (file: {
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+    }) => void;
+    onRemoveFile: (index: number) => void;
 };

package/dist/core/hooks/use-chat-input.js

@@ -5,68 +5,59 @@ import { useChatMessages } from "./use-chat-messages.js";
  * Hook for managing chat input
  */
 export function useChatInput(client) {
-	const input = useChatStore((state) => state.input);
-	const setInputValue = useChatStore((state) => state.setInputValue);
-	const setInputSubmitting = useChatStore((state) => state.setInputSubmitting);
-	const addFileAttachment = useChatStore((state) => state.addFileAttachment);
-	const removeFileAttachment = useChatStore(
-		(state) => state.removeFileAttachment,
-	);
-	const { sendMessage } = useChatMessages(client);
-	/**
-	 * Handle input value change
-	 */
-	const handleInputChange = useCallback(
-		(value) => {
-			setInputValue(value);
-		},
-		[setInputValue],
-	);
-	/**
-	 * Handle input submission
-	 */
-	const handleSubmit = useCallback(async () => {
-		if (!input.value.trim() || input.isSubmitting) {
-			return;
-		}
-		const message = input.value;
-		// Clear input immediately for better UX
-		setInputValue("");
-		setInputSubmitting(true);
-		try {
-			await sendMessage(message);
-		} catch (error) {
-			// Error is handled in useChatMessages
-			console.error("Failed to send message:", error);
-		} finally {
-			setInputSubmitting(false);
-		}
-	}, [input, setInputValue, setInputSubmitting, sendMessage]);
-	/**
-	 * Handle file attachment
-	 */
-	const handleAttachFile = useCallback(
-		(file) => {
-			addFileAttachment(file);
-		},
-		[addFileAttachment],
-	);
-	/**
-	 * Handle file removal
-	 */
-	const handleRemoveFile = useCallback(
-		(index) => {
-			removeFileAttachment(index);
-		},
-		[removeFileAttachment],
-	);
-	return {
-		value: input.value,
-		isSubmitting: input.isSubmitting,
-		attachedFiles: input.attachedFiles,
-		onChange: handleInputChange,
-		onSubmit: handleSubmit,
-		onAttachFile: handleAttachFile,
-		onRemoveFile: handleRemoveFile,
-	};
+    const input = useChatStore((state) => state.input);
+    const setInputValue = useChatStore((state) => state.setInputValue);
+    const setInputSubmitting = useChatStore((state) => state.setInputSubmitting);
+    const addFileAttachment = useChatStore((state) => state.addFileAttachment);
+    const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
+    const { sendMessage } = useChatMessages(client);
+    /**
+     * Handle input value change
+     */
+    const handleInputChange = useCallback((value) => {
+        setInputValue(value);
+    }, [setInputValue]);
+    /**
+     * Handle input submission
+     */
+    const handleSubmit = useCallback(async () => {
+        if (!input.value.trim() || input.isSubmitting) {
+            return;
+        }
+        const message = input.value;
+        // Clear input immediately for better UX
+        setInputValue("");
+        setInputSubmitting(true);
+        try {
+            await sendMessage(message);
+        }
+        catch (error) {
+            // Error is handled in useChatMessages
+            console.error("Failed to send message:", error);
+        }
+        finally {
+            setInputSubmitting(false);
+        }
+    }, [input, setInputValue, setInputSubmitting, sendMessage]);
+    /**
+     * Handle file attachment
+     */
+    const handleAttachFile = useCallback((file) => {
+        addFileAttachment(file);
+    }, [addFileAttachment]);
+    /**
+     * Handle file removal
+     */
+    const handleRemoveFile = useCallback((index) => {
+        removeFileAttachment(index);
+    }, [removeFileAttachment]);
+    return {
+        value: input.value,
+        isSubmitting: input.isSubmitting,
+        attachedFiles: input.attachedFiles,
+        onChange: handleInputChange,
+        onSubmit: handleSubmit,
+        onAttachFile: handleAttachFile,
+        onRemoveFile: handleRemoveFile,
+    };
 }

package/dist/core/hooks/use-chat-messages.d.ts

@@ -3,15 +3,15 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat messages
  */
 export declare function useChatMessages(client: AcpClient | null): {
-	messages: {
-		id: string;
-		role: "user" | "assistant" | "system";
-		content: string;
-		timestamp: string;
-		isStreaming: boolean;
-		streamingStartTime?: number | undefined;
-		metadata?: Record<string, unknown> | undefined;
-	}[];
-	isStreaming: boolean;
-	sendMessage: (content: string) => Promise<void>;
+    messages: {
+        id: string;
+        role: "user" | "assistant" | "system";
+        content: string;
+        timestamp: string;
+        isStreaming: boolean;
+        streamingStartTime?: number | undefined;
+        metadata?: Record<string, unknown> | undefined;
+    }[];
+    isStreaming: boolean;
+    sendMessage: (content: string) => Promise<void>;
 };

package/dist/core/hooks/use-chat-messages.js

@@ -4,125 +4,118 @@ import { useChatStore } from "../store/chat-store.js";
  * Hook for managing chat messages
  */
 export function useChatMessages(client) {
-	const messages = useChatStore((state) => state.messages);
-	const isStreaming = useChatStore((state) => state.isStreaming);
-	const sessionId = useChatStore((state) => state.sessionId);
-	const setIsStreaming = useChatStore((state) => state.setIsStreaming);
-	const setStreamingStartTime = useChatStore(
-		(state) => state.setStreamingStartTime,
-	);
-	const addMessage = useChatStore((state) => state.addMessage);
-	const updateMessage = useChatStore((state) => state.updateMessage);
-	const setError = useChatStore((state) => state.setError);
-	/**
-	 * Send a message to the agent
-	 */
-	const sendMessage = useCallback(
-		async (content) => {
-			if (!client) {
-				console.error("❌ No client available");
-				setError("No client available");
-				return;
-			}
-			if (!sessionId) {
-				console.error("❌ No active session");
-				setError("No active session");
-				return;
-			}
-			try {
-				// Start streaming and track time immediately
-				const startTime = Date.now();
-				setIsStreaming(true);
-				setStreamingStartTime(startTime);
-				// Add user message to UI
-				const userMessage = {
-					id: `msg_${Date.now()}_user`,
-					role: "user",
-					content,
-					timestamp: new Date().toISOString(),
-					isStreaming: false,
-				};
-				addMessage(userMessage);
-				// Create placeholder for assistant message BEFORE sending
-				const assistantMessageId = `msg_${Date.now()}_assistant`;
-				const assistantMessage = {
-					id: assistantMessageId,
-					role: "assistant",
-					content: "",
-					timestamp: new Date().toISOString(),
-					isStreaming: true,
-					streamingStartTime: startTime, // Use the same start time from when user sent message
-				};
-				addMessage(assistantMessage);
-				// Build full conversation history (excluding system messages)
-				const conversationHistory = messages
-					.filter((msg) => msg.role !== "system")
-					.map(
-						(msg) =>
-							`${msg.role === "user" ? "Human" : "Assistant"}: ${msg.content}`,
-					)
-					.join("\n\n");
-				// Combine history with new message
-				const fullPrompt = conversationHistory
-					? `${conversationHistory}\n\nHuman: ${content}`
-					: content;
-				// Start receiving chunks (async iterator)
-				const messageStream = client.receiveMessages();
-				// Send full conversation without awaiting (fire and forget)
-				// This allows chunks to start arriving while we're listening
-				client.sendMessage(fullPrompt, sessionId).catch((error) => {
-					const message =
-						error instanceof Error ? error.message : String(error);
-					setError(message);
-					setIsStreaming(false);
-					setStreamingStartTime(null);
-				});
-				// Listen for streaming chunks
-				let accumulatedContent = "";
-				for await (const chunk of messageStream) {
-					if (chunk.isComplete) {
-						// Update final message
-						updateMessage(assistantMessageId, {
-							content: accumulatedContent,
-							isStreaming: false,
-							streamingStartTime: undefined, // Clear streaming start time
-						});
-						setIsStreaming(false);
-						setStreamingStartTime(null); // Clear global streaming start time
-						break;
-					} else {
-						// Update streaming content
-						if (chunk.contentDelta.type === "text") {
-							accumulatedContent += chunk.contentDelta.text;
-							updateMessage(assistantMessageId, {
-								content: accumulatedContent,
-							});
-							// Small delay to allow Ink to render between chunks (~60fps)
-							await new Promise((resolve) => setTimeout(resolve, 16));
-						}
-					}
-				}
-			} catch (error) {
-				const message = error instanceof Error ? error.message : String(error);
-				setError(message);
-				setIsStreaming(false);
-				setStreamingStartTime(null); // Clear streaming start time on error
-			}
-		},
-		[
-			client,
-			sessionId,
-			messages,
-			addMessage,
-			updateMessage,
-			setIsStreaming,
-			setStreamingStartTime,
-			setError,
-		],
-	);
-	return {
-		messages,
-		isStreaming,
-		sendMessage,
-	};
+    const messages = useChatStore((state) => state.messages);
+    const isStreaming = useChatStore((state) => state.isStreaming);
+    const sessionId = useChatStore((state) => state.sessionId);
+    const setIsStreaming = useChatStore((state) => state.setIsStreaming);
+    const setStreamingStartTime = useChatStore((state) => state.setStreamingStartTime);
+    const addMessage = useChatStore((state) => state.addMessage);
+    const updateMessage = useChatStore((state) => state.updateMessage);
+    const setError = useChatStore((state) => state.setError);
+    /**
+     * Send a message to the agent
+     */
+    const sendMessage = useCallback(async (content) => {
+        if (!client) {
+            console.error("❌ No client available");
+            setError("No client available");
+            return;
+        }
+        if (!sessionId) {
+            console.error("❌ No active session");
+            setError("No active session");
+            return;
+        }
+        try {
+            // Start streaming and track time immediately
+            const startTime = Date.now();
+            setIsStreaming(true);
+            setStreamingStartTime(startTime);
+            // Add user message to UI
+            const userMessage = {
+                id: `msg_${Date.now()}_user`,
+                role: "user",
+                content,
+                timestamp: new Date().toISOString(),
+                isStreaming: false,
+            };
+            addMessage(userMessage);
+            // Create placeholder for assistant message BEFORE sending
+            const assistantMessageId = `msg_${Date.now()}_assistant`;
+            const assistantMessage = {
+                id: assistantMessageId,
+                role: "assistant",
+                content: "",
+                timestamp: new Date().toISOString(),
+                isStreaming: true,
+                streamingStartTime: startTime, // Use the same start time from when user sent message
+            };
+            addMessage(assistantMessage);
+            // Build full conversation history (excluding system messages)
+            const conversationHistory = messages
+                .filter((msg) => msg.role !== "system")
+                .map((msg) => `${msg.role === "user" ? "Human" : "Assistant"}: ${msg.content}`)
+                .join("\n\n");
+            // Combine history with new message
+            const fullPrompt = conversationHistory
+                ? `${conversationHistory}\n\nHuman: ${content}`
+                : content;
+            // Start receiving chunks (async iterator)
+            const messageStream = client.receiveMessages();
+            // Send full conversation without awaiting (fire and forget)
+            // This allows chunks to start arriving while we're listening
+            client.sendMessage(fullPrompt, sessionId).catch((error) => {
+                const message = error instanceof Error ? error.message : String(error);
+                setError(message);
+                setIsStreaming(false);
+                setStreamingStartTime(null);
+            });
+            // Listen for streaming chunks
+            let accumulatedContent = "";
+            for await (const chunk of messageStream) {
+                if (chunk.isComplete) {
+                    // Update final message
+                    updateMessage(assistantMessageId, {
+                        content: accumulatedContent,
+                        isStreaming: false,
+                        streamingStartTime: undefined, // Clear streaming start time
+                    });
+                    setIsStreaming(false);
+                    setStreamingStartTime(null); // Clear global streaming start time
+                    break;
+                }
+                else {
+                    // Update streaming content
+                    if (chunk.contentDelta.type === "text") {
+                        accumulatedContent += chunk.contentDelta.text;
+                        updateMessage(assistantMessageId, {
+                            content: accumulatedContent,
+                        });
+                        // Small delay to allow Ink to render between chunks (~60fps)
+                        await new Promise((resolve) => setTimeout(resolve, 16));
+                    }
+                }
+            }
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setError(message);
+            setIsStreaming(false);
+            setStreamingStartTime(null); // Clear streaming start time on error
+        }
+    }, [
+        client,
+        sessionId,
+        messages,
+        addMessage,
+        updateMessage,
+        setIsStreaming,
+        setStreamingStartTime,
+        setError,
+    ]);
+    return {
+        messages,
+        isStreaming,
+        sendMessage,
+    };
 }

package/dist/core/hooks/use-chat-session.d.ts

@@ -3,9 +3,9 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat session lifecycle
  */
 export declare function useChatSession(client: AcpClient | null): {
-	connectionStatus: "error" | "connecting" | "connected" | "disconnected";
-	sessionId: string | null;
-	connect: () => Promise<void>;
-	startSession: () => Promise<void>;
-	disconnect: () => Promise<void>;
+    connectionStatus: "error" | "connecting" | "connected" | "disconnected";
+    sessionId: string | null;
+    connect: () => Promise<void>;
+    startSession: () => Promise<void>;
+    disconnect: () => Promise<void>;
 };