@townco/ui 0.1.18 → 0.1.19

package/dist/gui/components/Button.js

@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 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", {
+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",

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/Message.d.ts

@@ -7,7 +7,7 @@ import type { DisplayMessage } from "./MessageList.js";
  */
 declare const messageVariants: (props?: ({
     role?: "user" | "assistant" | "system" | null | undefined;
-    layout?: "default" | "full" | "compact" | null | undefined;
+    layout?: "default" | "compact" | "full" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageVariants> {
     /**

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

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

package/dist/gui/components/index.js

@@ -2,6 +2,7 @@
 export { toast } from "sonner";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
+export { ChatEmptyState } from "./ChatEmptyState.js";
 export * as ChatHeader from "./ChatHeader.js";
 // Chat components - composable primitives
 export { Actions as ChatInputActions, Attachment as ChatInputAttachment, CommandMenu as ChatInputCommandMenu, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";

package/dist/sdk/transports/http.js

@@ -217,9 +217,9 @@ export class HttpTransport {
             "Content-Type": "application/json",
             ...this.options.headers,
         };
-        const timeout = this.options.timeout || 30000;
+        const timeoutMs = this.options.timeout ?? 10 * 60 * 1000;
         const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
         try {
             const response = await fetch(`${this.options.baseUrl}/rpc`, {
                 method: "POST",
@@ -242,7 +242,7 @@ export class HttpTransport {
         catch (error) {
             clearTimeout(timeoutId);
             if (error instanceof Error && error.name === "AbortError") {
-                throw new Error(`Request timeout after ${timeout}ms`);
+                throw new Error(`Request timeout after ${timeoutMs}ms`);
             }
             throw error;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.15",
+    "@townco/tsconfig": "0.1.16",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/src/styles/global.css

@@ -23,6 +23,11 @@
   --input: 214.3 31.8% 91.4%;
   --ring: 222.2 84% 4.9%;
   --radius: 0.5rem;
+  
+  /* Text colors from design system */
+  --text-primary: 0 0% 9.02%;      /* #171717 */
+  --text-secondary: 0 0% 32.16%;   /* #525252 */
+  --text-tertiary: 0 0% 45.1%;     /* #737373 */
 }
 
 .dark {
@@ -45,9 +50,15 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
+  
+  /* Text colors from design system (dark mode) */
+  --text-primary: 0 0% 98%;        /* Light text for dark mode */
+  --text-secondary: 0 0% 70%;      /* Muted light text */
+  --text-tertiary: 0 0% 55%;       /* More muted text */
 }
 
 @theme {
+  /* Colors */
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-card: hsl(var(--card));
@@ -67,8 +78,34 @@
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
+  
+  /* Text colors from design system */
+  --color-text-primary: hsl(var(--text-primary));
+  --color-text-secondary: hsl(var(--text-secondary));
+  --color-text-tertiary: hsl(var(--text-tertiary));
+  
+  /* Shadows */
   --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
   --shadow-md: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
+  
+  /* Layout widths - max-width utilities */
+  --max-width-chat: 720px;
+  --max-width-prose: 477px;
+  --max-width-prompt-container: 393px;
+  
+  /* Typography - Letter spacing */
+  --letter-spacing-tight: -0.48px;
+  --letter-spacing-uppercase: 1.12px;
+  
+  /* Typography - Font sizes with line heights */
+  --font-size-heading-3: 1.5rem;       /* 24px */
+  --line-height-heading-3: 1.2;        /* 120% */
+  
+  --font-size-subheading: 1.25rem;     /* 20px */
+  --line-height-subheading: 1.5;       /* 150% */
+  
+  --font-size-label: 0.875rem;         /* 14px */
+  --line-height-label: 1.5;            /* 150% */
 }
 
 @layer base {
@@ -79,6 +116,33 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
   }
+  button {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  /* Typography utilities following design system */
+  .text-heading-3 {
+    font-size: var(--font-size-heading-3);
+    line-height: var(--line-height-heading-3);
+    font-weight: 600;
+    letter-spacing: var(--letter-spacing-tight);
+  }
+  
+  .text-subheading {
+    font-size: var(--font-size-subheading);
+    line-height: var(--line-height-subheading);
+    font-weight: 400;
+  }
+  
+  .text-label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-label);
+    font-weight: 500;
+    letter-spacing: var(--letter-spacing-uppercase);
+    text-transform: uppercase;
+  }
 }
 
 @keyframes spin {