@townco/ui 0.1.0 → 0.1.3

package/dist/tui/components/SingleSelect.js

@@ -1,46 +1,87 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
 import { useState } from "react";
-export function SingleSelect({ options, selected: _selected, onChange, onSubmit, onCancel, }) {
-    const [focusedIndex, setFocusedIndex] = useState(0);
-    const totalItems = options.length;
-    useInput((input, key) => {
-        // Handle Escape: Cancel
-        if (key.escape) {
-            onCancel?.();
-            return;
-        }
-        // Handle Enter: Select option and submit immediately
-        if (key.return) {
-            const currentOption = options[focusedIndex];
-            if (currentOption) {
-                onChange(currentOption.value);
-                onSubmit(currentOption.value);
-            }
-            return;
-        }
-        // Handle Arrow Up: Move focus up
-        if (key.upArrow) {
-            setFocusedIndex((prev) => (prev > 0 ? prev - 1 : totalItems - 1));
-            return;
-        }
-        // Handle Arrow Down: Move focus down
-        if (key.downArrow) {
-            setFocusedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : 0));
-            return;
-        }
-        // Handle Spacebar: Select option and submit immediately
-        if (input === " ") {
-            const currentOption = options[focusedIndex];
-            if (currentOption) {
-                onChange(currentOption.value);
-                onSubmit(currentOption.value);
-            }
-            return;
-        }
-    });
-    return (_jsxs(Box, { flexDirection: "column", children: [options.map((option, index) => {
-                const isFocused = index === focusedIndex;
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { inverse: isFocused, children: [isFocused ? ">" : " ", " ", option.label] }) }), option.description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: option.description }) }))] }, option.value));
-            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193: Navigate \u2022 Space/Enter: Select and continue \u2022 Esc: Cancel" }) })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SingleSelect({
+	options,
+	selected: _selected,
+	onChange,
+	onSubmit,
+	onCancel,
+}) {
+	const [focusedIndex, setFocusedIndex] = useState(0);
+	const totalItems = options.length;
+	useInput((input, key) => {
+		// Handle Escape: Cancel
+		if (key.escape) {
+			onCancel?.();
+			return;
+		}
+		// Handle Enter: Select option and submit immediately
+		if (key.return) {
+			const currentOption = options[focusedIndex];
+			if (currentOption) {
+				onChange(currentOption.value);
+				onSubmit(currentOption.value);
+			}
+			return;
+		}
+		// Handle Arrow Up: Move focus up
+		if (key.upArrow) {
+			setFocusedIndex((prev) => (prev > 0 ? prev - 1 : totalItems - 1));
+			return;
+		}
+		// Handle Arrow Down: Move focus down
+		if (key.downArrow) {
+			setFocusedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : 0));
+			return;
+		}
+		// Handle Spacebar: Select option and submit immediately
+		if (input === " ") {
+			const currentOption = options[focusedIndex];
+			if (currentOption) {
+				onChange(currentOption.value);
+				onSubmit(currentOption.value);
+			}
+			return;
+		}
+	});
+	return _jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			options.map((option, index) => {
+				const isFocused = index === focusedIndex;
+				return _jsxs(
+					Box,
+					{
+						flexDirection: "column",
+						children: [
+							_jsx(Box, {
+								children: _jsxs(Text, {
+									inverse: isFocused,
+									children: [isFocused ? ">" : " ", " ", option.label],
+								}),
+							}),
+							option.description &&
+								_jsx(Box, {
+									paddingLeft: 2,
+									children: _jsx(Text, {
+										dimColor: true,
+										children: option.description,
+									}),
+								}),
+						],
+					},
+					option.value,
+				);
+			}),
+			_jsx(Box, {
+				marginTop: 1,
+				children: _jsx(Text, {
+					dimColor: true,
+					children:
+						"\u2191/\u2193: Navigate \u2022 Space/Enter: Select and continue \u2022 Esc: Cancel",
+				}),
+			}),
+		],
+	});
 }

package/dist/tui/components/StatusBar.d.ts

@@ -1,9 +1,14 @@
 import type { ConnectionStatus } from "../../core/index.js";
 export interface StatusBarProps {
-    connectionStatus: ConnectionStatus;
-    sessionId: string | null;
-    isStreaming: boolean;
-    streamingStartTime: number | null;
-    hasStreamingContent: boolean;
+	connectionStatus: ConnectionStatus;
+	sessionId: string | null;
+	isStreaming: boolean;
+	streamingStartTime: number | null;
+	hasStreamingContent: boolean;
 }
-export declare function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusBar({
+	connectionStatus,
+	isStreaming,
+	streamingStartTime,
+	hasStreamingContent,
+}: StatusBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/StatusBar.js

@@ -1,82 +1,117 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
+import {
+	Fragment as _Fragment,
+	jsx as _jsx,
+	jsxs as _jsxs,
+} from "react/jsx-runtime";
+
 // Synonyms of "thinking" in multiple languages
 const THINKING_WORDS = [
-    "Thinking", // English
-    "Pensando", // Spanish/Portuguese
-    "Pensant", // French
-    "Denkend", // German
-    "Pensando", // Italian
-    "考えている", // Japanese (kangaeteiru)
-    "생각 중", // Korean (saenggak jung)
-    "思考中", // Chinese (sīkǎo zhōng)
-    "Размышляя", // Russian (razmyshlyaya)
-    "Düşünüyor", // Turkish
-    "Myślący", // Polish
-    "Tänkande", // Swedish
-    "Pensando", // Dutch
-    "Ajatellen", // Finnish
-    "Σκεπτόμενος", // Greek (skeptomenos)
-    "חושב", // Hebrew (choshev)
-    "सोच रहा है", // Hindi (soch raha hai)
-    "Berpikir", // Indonesian
+	"Thinking", // English
+	"Pensando", // Spanish/Portuguese
+	"Pensant", // French
+	"Denkend", // German
+	"Pensando", // Italian
+	"考えている", // Japanese (kangaeteiru)
+	"생각 중", // Korean (saenggak jung)
+	"思考中", // Chinese (sīkǎo zhōng)
+	"Размышляя", // Russian (razmyshlyaya)
+	"Düşünüyor", // Turkish
+	"Myślący", // Polish
+	"Tänkande", // Swedish
+	"Pensando", // Dutch
+	"Ajatellen", // Finnish
+	"Σκεπτόμενος", // Greek (skeptomenos)
+	"חושב", // Hebrew (choshev)
+	"सोच रहा है", // Hindi (soch raha hai)
+	"Berpikir", // Indonesian
 ];
 // Animated dot patterns for bouncing/jumping effect
 // Using regular dots (.) and middle dots (·) to create height illusion
 const DOT_ANIMATIONS = [
-    "...", // All dots down
-    "·..", // First dot up
-    ".·.", // Middle dot up
-    "..·", // Last dot up
-    ".·.", // Middle dot up
-    "·..", // First dot up
+	"...", // All dots down
+	"·..", // First dot up
+	".·.", // Middle dot up
+	"..·", // Last dot up
+	".·.", // Middle dot up
+	"·..", // First dot up
 ];
 /**
  * Component that displays elapsed time for waiting/streaming
  */
 function WaitingElapsedTime({ startTime }) {
-    const [elapsed, setElapsed] = useState(0);
-    const [thinkingWord, setThinkingWord] = useState(() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)]);
-    const [dotIndex, setDotIndex] = useState(0);
-    useEffect(() => {
-        // Update elapsed time every 100ms for smooth updates
-        const interval = setInterval(() => {
-            const now = Date.now();
-            const elapsedMs = now - startTime;
-            setElapsed(elapsedMs);
-        }, 100);
-        return () => clearInterval(interval);
-    }, [startTime]);
-    useEffect(() => {
-        // Change to random thinking word every 1.5 seconds
-        const wordInterval = setInterval(() => {
-            const randomIndex = Math.floor(Math.random() * THINKING_WORDS.length);
-            setThinkingWord(THINKING_WORDS[randomIndex]);
-        }, 1500);
-        return () => clearInterval(wordInterval);
-    }, []);
-    useEffect(() => {
-        // Animate dots every 100ms for bouncing effect
-        const dotInterval = setInterval(() => {
-            setDotIndex((prev) => (prev + 1) % DOT_ANIMATIONS.length);
-        }, 100);
-        return () => clearInterval(dotInterval);
-    }, []);
-    // Format elapsed time as seconds with 1 decimal place
-    const seconds = (elapsed / 1000).toFixed(1);
-    const animatedDots = DOT_ANIMATIONS[dotIndex];
-    return (_jsxs(Text, { color: "red", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
+	const [elapsed, setElapsed] = useState(0);
+	const [thinkingWord, setThinkingWord] = useState(
+		() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)],
+	);
+	const [dotIndex, setDotIndex] = useState(0);
+	useEffect(() => {
+		// Update elapsed time every 100ms for smooth updates
+		const interval = setInterval(() => {
+			const now = Date.now();
+			const elapsedMs = now - startTime;
+			setElapsed(elapsedMs);
+		}, 100);
+		return () => clearInterval(interval);
+	}, [startTime]);
+	useEffect(() => {
+		// Change to random thinking word every 1.5 seconds
+		const wordInterval = setInterval(() => {
+			const randomIndex = Math.floor(Math.random() * THINKING_WORDS.length);
+			setThinkingWord(THINKING_WORDS[randomIndex]);
+		}, 1500);
+		return () => clearInterval(wordInterval);
+	}, []);
+	useEffect(() => {
+		// Animate dots every 100ms for bouncing effect
+		const dotInterval = setInterval(() => {
+			setDotIndex((prev) => (prev + 1) % DOT_ANIMATIONS.length);
+		}, 100);
+		return () => clearInterval(dotInterval);
+	}, []);
+	// Format elapsed time as seconds with 1 decimal place
+	const seconds = (elapsed / 1000).toFixed(1);
+	const animatedDots = DOT_ANIMATIONS[dotIndex];
+	return _jsxs(Text, {
+		color: "red",
+		children: [thinkingWord, animatedDots, " ", seconds, "s"],
+	});
 }
-export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, }) {
-    const statusColor = connectionStatus === "connected"
-        ? "green"
-        : connectionStatus === "connecting"
-            ? "yellow"
-            : connectionStatus === "error"
-                ? "red"
-                : "gray";
-    // Only show waiting indicator when streaming but haven't received content yet
-    const showWaiting = isStreaming && streamingStartTime && !hasStreamingContent;
-    return (_jsxs(Box, { flexDirection: "row", gap: 2, paddingY: 1, children: [_jsxs(Text, { children: ["Status: ", _jsx(Text, { color: statusColor, children: connectionStatus })] }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] }))] }));
+export function StatusBar({
+	connectionStatus,
+	isStreaming,
+	streamingStartTime,
+	hasStreamingContent,
+}) {
+	const statusColor =
+		connectionStatus === "connected"
+			? "green"
+			: connectionStatus === "connecting"
+				? "yellow"
+				: connectionStatus === "error"
+					? "red"
+					: "gray";
+	// Only show waiting indicator when streaming but haven't received content yet
+	const showWaiting = isStreaming && streamingStartTime && !hasStreamingContent;
+	return _jsxs(Box, {
+		flexDirection: "row",
+		gap: 2,
+		paddingY: 1,
+		children: [
+			_jsxs(Text, {
+				children: [
+					"Status: ",
+					_jsx(Text, { color: statusColor, children: connectionStatus }),
+				],
+			}),
+			showWaiting &&
+				_jsxs(_Fragment, {
+					children: [
+						_jsx(Text, { children: " " }),
+						_jsx(WaitingElapsedTime, { startTime: streamingStartTime }),
+					],
+				}),
+		],
+	});
 }

package/dist/tui/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @townco/ui/tui
+ * @town/ui/tui
  *
  * Terminal UI components built with Ink
  * Uses headless core for business logic

package/dist/tui/index.js

@@ -1,5 +1,5 @@
 /**
- * @townco/ui/tui
+ * @town/ui/tui
  *
  * Terminal UI components built with Ink
  * Uses headless core for business logic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,7 +13,6 @@
     "type": "git",
     "url": "git+https://github.com/federicoweber/agent_hub.git"
   },
-  "author": "Federico Weber",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -58,7 +57,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "^0.1.0",
+    "@townco/tsconfig": "workspace:*",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",