@townco/ui 0.1.22 → 0.1.24

package/dist/tui/components/ChatView.js

@@ -6,18 +6,18 @@ import { MessageList } from "./MessageList.js";
 import { StatusBar } from "./StatusBar.js";
 export function ChatView({ client }) {
     const setIsStreaming = useChatStore((state) => state.setIsStreaming);
-    const streamingStartTime = useChatStore((state) => state.streamingStartTime);
-    const totalBilled = useChatStore((state) => state.totalBilled);
-    const currentContext = useChatStore((state) => state.currentContext);
-    const currentModel = useChatStore((state) => state.currentModel);
-    const tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
+    const _streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    const _totalBilled = useChatStore((state) => state.totalBilled);
+    const _currentContext = useChatStore((state) => state.currentContext);
+    const _currentModel = useChatStore((state) => state.currentModel);
+    const _tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
     // Use headless hooks for business logic
-    const { connectionStatus, sessionId } = useChatSession(client);
+    useChatSession(client); // Subscribe to session changes
     const { messages, isStreaming } = useChatMessages(client);
     useToolCalls(client); // Still need to subscribe to tool call events
     const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client);
     // Check if we're actively receiving content (hide waiting indicator)
-    const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
+    const _hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
     // Callbacks for keyboard shortcuts
     const handleEscape = () => {
         if (isStreaming) {
@@ -25,5 +25,17 @@ export function ChatView({ client }) {
             setIsStreaming(false);
         }
     };
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", children: _jsx(MessageList, { messages: messages }) }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onEscape: handleEscape }), _jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", children: _jsx(MessageList, { messages: messages }) }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onEscape: handleEscape })] }));
+}
+// Export helper to render status content separately
+export function ChatViewStatus({ client }) {
+    const streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    const totalBilled = useChatStore((state) => state.totalBilled);
+    const currentContext = useChatStore((state) => state.currentContext);
+    const currentModel = useChatStore((state) => state.currentModel);
+    const tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
+    const { connectionStatus, sessionId } = useChatSession(client);
+    const { messages, isStreaming } = useChatMessages(client);
+    const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
+    return (_jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode }));
 }

package/dist/tui/components/InputBox.js

@@ -1,10 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useStdout } from "ink";
-import { ReadlineInput } from "./ReadlineInput.js";
+import { Box, Text, useInput, useStdout } from "ink";
+import { SimpleTextInput } from "./SimpleTextInput.js";
 export function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmit, onEscape, }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns || 80;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) }), attachedFiles.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Text, { dimColor: true, children: "Attached files:" }), attachedFiles.map((file) => (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [" ", file.name] }), _jsxs(Text, { dimColor: true, children: [" (", formatFileSize(file.size), ")"] })] }, file.path)))] })), _jsxs(Box, { paddingY: 1, children: [_jsx(Text, { bold: true, color: "blue", children: "> " }), isSubmitting ? (_jsx(Text, { color: "gray", italic: true, children: "Sending..." })) : onEscape ? (_jsx(ReadlineInput, { value: value, onChange: onChange, onSubmit: onSubmit, onEscape: onEscape, placeholder: "Type your message..." })) : (_jsx(ReadlineInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: "Type your message..." }))] }), _jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) })] }));
+    // Handle special keys for multi-line and escape
+    useInput((_input, key) => {
+        // Escape key
+        if (key.escape && onEscape) {
+            onEscape();
+            return;
+        }
+        // Don't interfere if submitting
+        if (isSubmitting)
+            return;
+        // Shift+Enter or Alt+Enter: insert newline
+        if (key.return && (key.shift || key.meta)) {
+            onChange(`${value}\n`);
+            return;
+        }
+    });
+    // Split value into lines for display
+    const lines = value.split("\n");
+    const _hasMultipleLines = lines.length > 1;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) }), attachedFiles.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Attached files:" }), attachedFiles.map((file) => (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [" ", file.name] }), _jsxs(Text, { dimColor: true, children: [" (", formatFileSize(file.size), ")"] })] }, file.path)))] })), _jsx(Box, { paddingY: 1, flexDirection: "column", children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: "blue", children: "> " }), _jsx(Box, { flexGrow: 1, children: isSubmitting ? (_jsx(Text, { color: "gray", italic: true, children: "Sending..." })) : (_jsx(SimpleTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: "Type your message... (\\ or Shift+Enter for newline)" })) })] }) })] }));
 }
 function formatFileSize(bytes) {
     if (bytes < 1024)

package/dist/tui/components/MessageList.js

@@ -3,7 +3,7 @@ import { Box, Text } from "ink";
 import { GameOfLife } from "./GameOfLife.js";
 import { ToolCall } from "./ToolCall.js";
 export function MessageList({ messages }) {
-    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: messages.length === 0 ? (_jsx(GameOfLife, {})) : (messages.map((message) => (_jsx(Message, { message: message }, message.id)))) }));
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, height: "100%", children: messages.length === 0 ? (_jsx(GameOfLife, {})) : (messages.map((message) => (_jsx(Message, { message: message }, message.id)))) }));
 }
 function Message({ message }) {
     const roleColor = message.role === "user"

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

@@ -0,0 +1,7 @@
+export interface SimpleTextInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    placeholder?: string;
+}
+export declare function SimpleTextInput({ value, onChange, onSubmit, placeholder, }: SimpleTextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/SimpleTextInput.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+export function SimpleTextInput({ value, onChange, onSubmit, placeholder = "", }) {
+    const [cursorOffset, setCursorOffset] = useState(0);
+    useInput((input, key) => {
+        // Handle return/enter
+        if (key.return) {
+            onSubmit();
+            return;
+        }
+        // Handle backspace/delete
+        if (key.backspace || key.delete) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos > 0) {
+                const newValue = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+                onChange(newValue);
+                if (cursorOffset < 0) {
+                    setCursorOffset(cursorOffset + 1);
+                }
+            }
+            return;
+        }
+        // Handle left arrow
+        if (key.leftArrow) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos > 0) {
+                setCursorOffset(cursorOffset - 1);
+            }
+            return;
+        }
+        // Handle right arrow
+        if (key.rightArrow) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos < value.length) {
+                setCursorOffset(cursorOffset + 1);
+            }
+            return;
+        }
+        // Handle up arrow - navigate to previous line
+        if (key.upArrow) {
+            const cursorPos = value.length + cursorOffset;
+            const lines = value.split("\n");
+            // Find current line and position within it
+            let currentLineIndex = 0;
+            let charCount = 0;
+            let posInLine = cursorPos;
+            for (let i = 0; i < lines.length; i++) {
+                const lineLength = (lines[i]?.length || 0) + (i < lines.length - 1 ? 1 : 0);
+                if (charCount + lineLength > cursorPos || i === lines.length - 1) {
+                    currentLineIndex = i;
+                    posInLine = cursorPos - charCount;
+                    break;
+                }
+                charCount += lineLength;
+            }
+            // Move to previous line if possible
+            if (currentLineIndex > 0) {
+                const prevLine = lines[currentLineIndex - 1] || "";
+                const currentLine = lines[currentLineIndex] || "";
+                const prevLineStart = charCount - (currentLine.length + 1);
+                const targetPos = Math.min(posInLine, prevLine.length);
+                const newCursorPos = prevLineStart + targetPos;
+                setCursorOffset(newCursorPos - value.length);
+            }
+            return;
+        }
+        // Handle down arrow - navigate to next line
+        if (key.downArrow) {
+            const cursorPos = value.length + cursorOffset;
+            const lines = value.split("\n");
+            // Find current line and position within it
+            let currentLineIndex = 0;
+            let charCount = 0;
+            let posInLine = cursorPos;
+            for (let i = 0; i < lines.length; i++) {
+                const lineLength = (lines[i]?.length || 0) + (i < lines.length - 1 ? 1 : 0);
+                if (charCount + lineLength > cursorPos || i === lines.length - 1) {
+                    currentLineIndex = i;
+                    posInLine = cursorPos - charCount;
+                    break;
+                }
+                charCount += lineLength;
+            }
+            // Move to next line if possible
+            if (currentLineIndex < lines.length - 1) {
+                const nextLine = lines[currentLineIndex + 1] || "";
+                const currentLine = lines[currentLineIndex] || "";
+                const nextLineStart = charCount + currentLine.length + 1;
+                const targetPos = Math.min(posInLine, nextLine.length);
+                const newCursorPos = nextLineStart + targetPos;
+                setCursorOffset(newCursorPos - value.length);
+            }
+            return;
+        }
+        // Handle Ctrl+A (move to beginning)
+        if (key.ctrl && input === "a") {
+            setCursorOffset(-value.length);
+            return;
+        }
+        // Handle Ctrl+E (move to end)
+        if (key.ctrl && input === "e") {
+            setCursorOffset(0);
+            return;
+        }
+        // Handle Ctrl+W (delete word backward)
+        if (key.ctrl && input === "w") {
+            const cursorPos = value.length + cursorOffset;
+            const before = value.slice(0, cursorPos);
+            const after = value.slice(cursorPos);
+            const match = before.match(/\s*\S*$/);
+            if (match) {
+                const newBefore = before.slice(0, -match[0].length);
+                onChange(newBefore + after);
+                setCursorOffset(-after.length);
+            }
+            return;
+        }
+        // Handle Ctrl+U (delete to beginning)
+        if (key.ctrl && input === "u") {
+            const cursorPos = value.length + cursorOffset;
+            onChange(value.slice(cursorPos));
+            setCursorOffset(-value.slice(cursorPos).length);
+            return;
+        }
+        // Handle Ctrl+K (delete to end)
+        if (key.ctrl && input === "k") {
+            const cursorPos = value.length + cursorOffset;
+            onChange(value.slice(0, cursorPos));
+            setCursorOffset(0);
+            return;
+        }
+        // Regular character input
+        if (!key.ctrl && !key.meta && input.length > 0) {
+            const cursorPos = value.length + cursorOffset;
+            const newValue = value.slice(0, cursorPos) + input + value.slice(cursorPos);
+            // If user types backslash at the end, automatically add newline
+            if (input === "\\" && cursorPos === value.length) {
+                onChange(`${newValue.slice(0, -1)}\n`);
+                // Reset cursor to end (no offset)
+                setCursorOffset(0);
+            }
+            else {
+                onChange(newValue);
+                // Keep cursor at same relative position
+                if (cursorOffset < 0) {
+                    setCursorOffset(cursorOffset - input.length);
+                }
+            }
+        }
+    });
+    // Reset cursor when value changes externally (e.g., after submit)
+    useEffect(() => {
+        if (value.length === 0) {
+            setCursorOffset(0);
+        }
+    }, [value]);
+    // Display the input with cursor
+    const cursorPos = value.length + cursorOffset;
+    // Show placeholder if empty
+    if (value.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: placeholder })] }));
+    }
+    // Split by newlines for multi-line rendering
+    const allLines = value.split("\n");
+    // Find which line the cursor is on and position within that line
+    let charCount = 0;
+    let cursorLineIndex = 0;
+    let cursorPosInLine = 0;
+    for (let i = 0; i < allLines.length; i++) {
+        const line = allLines[i] || "";
+        const lineEndPos = charCount + line.length;
+        // Check if cursor is within this line (including at the end before newline)
+        if (cursorPos <= lineEndPos) {
+            cursorLineIndex = i;
+            cursorPosInLine = cursorPos - charCount;
+            break;
+        }
+        // Move past the newline character for next iteration
+        charCount = lineEndPos + 1;
+    }
+    // Build the full display text with cursor
+    let displayText = "";
+    for (let i = 0; i < allLines.length; i++) {
+        const line = allLines[i] || "";
+        if (i === cursorLineIndex) {
+            // Add text before cursor
+            displayText += line.slice(0, cursorPosInLine);
+            // Mark cursor position - we'll add it separately
+            displayText += "\0"; // placeholder for cursor
+            // Add text after cursor
+            displayText += line.slice(cursorPosInLine + 1);
+        }
+        else {
+            displayText += line;
+        }
+        // Add newline if not last line
+        // if (i < allLines.length - 1) {
+        displayText += "\n";
+        // }
+    }
+    // Split by cursor placeholder
+    const parts = displayText.split("\0");
+    const beforeCursor = parts[0] || "";
+    const afterCursor = parts[1] || "";
+    const cursorChar = allLines[cursorLineIndex]?.[cursorPosInLine] || " ";
+    return (_jsxs(Text, { children: [beforeCursor, _jsx(Text, { inverse: true, children: cursorChar }), afterCursor] }));
+}

package/dist/tui/components/StatusBar.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Text } from "ink";
 import { useEffect, useState } from "react";
 import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 // Synonyms of "thinking" in multiple languages
@@ -113,7 +113,7 @@ export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, h
         const contextPercentage = calculateTokenPercentage(contextTokens, currentModel ?? undefined);
         const contextPercentageStr = formatTokenPercentage(contextTokens, currentModel ?? undefined);
         const contextColor = getTokenColor(contextPercentage);
-        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "Context: " }), _jsx(Text, { color: contextColor, children: contextPercentageStr }), _jsx(Text, { dimColor: true, children: " | Input: " }), _jsx(Text, { children: formatTokenCount(inputTokens) }), _jsx(Text, { dimColor: true, children: " | Output: " }), _jsx(Text, { children: formatTokenCount(outputTokens) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Ctx: " }), _jsx(Text, { color: contextColor, children: contextPercentageStr }), _jsx(Text, { dimColor: true, children: " | In: " }), _jsx(Text, { children: formatTokenCount(inputTokens) }), _jsx(Text, { dimColor: true, children: " | Out: " }), _jsx(Text, { children: formatTokenCount(outputTokens) })] }));
     };
-    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", gap: 2, children: [_jsx(Text, { dimColor: true, children: "Status: " }), _jsx(Text, { color: statusColor, children: connectionStatus }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] }))] }), renderTokenDisplay()] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusColor, children: "\u25CF" }), _jsxs(Text, { children: [" ", connectionStatus] }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), _jsx(Text, { dimColor: true, children: " | " }), renderTokenDisplay()] }));
 }

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

@@ -7,6 +7,7 @@ export * from "./InputBox.js";
 export * from "./MessageList.js";
 export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
+export * from "./SimpleTextInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
 export * from "./ToolCall.js";

package/dist/tui/components/index.js

@@ -7,6 +7,7 @@ export * from "./InputBox.js";
 export * from "./MessageList.js";
 export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
+export * from "./SimpleTextInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
 export * from "./ToolCall.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
+    "@townco/core": "0.0.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -61,11 +62,10 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.19",
+    "@townco/tsconfig": "0.1.21",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",
-    "ink-text-input": "^6.0.0",
     "react": "^19.2.0",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"

package/src/styles/global.css

@@ -2,92 +2,49 @@
 
 @source "../**/*.{ts,tsx}";
 
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-  --radius: 0.5rem;
+@theme {
+  /* Semantic Color Tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
   
-  /* 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 {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
   
-  /* 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));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
   
-  /* 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));
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
   
-  /* 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);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
+  
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-hover: var(--destructive-hover);
   
+  --color-border: var(--border);
+  --color-border-dark: var(--border-dark);
+  --color-border-focus: var(--border-focus);
+  --color-border-error: var(--border-error);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-ring: var(--ring);
+  
+  /* Text colors from design system */
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+
   /* Layout widths - max-width utilities */
   --max-width-chat: 720px;
   --max-width-prose: 477px;
@@ -106,15 +63,112 @@
   
   --font-size-label: 0.875rem;         /* 14px */
   --line-height-label: 1.5;            /* 150% */
+
+  /* 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);
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+/* 
+  Define the CSS variables that reference Tailwind palette colors.
+  This allows us to swap them in dark mode while keeping the semantic names.
+*/
+:root {
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-950);
+  
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-950);
+  
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-950);
+  
+  --primary: var(--color-neutral-900);
+  --primary-foreground: var(--color-neutral-50);
+  --primary-hover: var(--color-neutral-700);
+  
+  --secondary: var(--color-neutral-100);
+  --secondary-foreground: var(--color-neutral-900);
+  --secondary-hover: var(--color-neutral-50);
+  
+  --muted: var(--color-neutral-50);
+  --muted-foreground: var(--color-neutral-500);
+  
+  --accent: var(--color-neutral-100);
+  --accent-foreground: var(--color-neutral-900);
+  --accent-hover: var(--color-neutral-50);
+  
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-neutral-50);
+  --destructive-hover: var(--color-red-600);
+  
+  --border: var(--color-neutral-200);
+  --border-dark: var(--color-neutral-300);
+  --border-focus: var(--color-neutral-400);
+  --border-error: var(--color-red-500);
+  --input: var(--color-neutral-200);
+  --input-background: var(--color-white);
+  --ring: var(--color-neutral-900);
+  
+  /* Text colors from design system */
+  --text-primary: var(--color-neutral-900);
+  --text-secondary: var(--color-neutral-600);
+  --text-tertiary: var(--color-neutral-500);
+}
+
+.dark {
+  --background: var(--color-neutral-950);
+  --foreground: var(--color-neutral-50);
+  
+  --card: var(--color-neutral-950);
+  --card-foreground: var(--color-neutral-50);
+  
+  --popover: var(--color-neutral-950);
+  --popover-foreground: var(--color-neutral-50);
+  
+  --primary: var(--color-neutral-50);
+  --primary-foreground: var(--color-neutral-900);
+  --primary-hover: var(--color-neutral-200);
+  
+  --secondary: var(--color-neutral-800);
+  --secondary-foreground: var(--color-neutral-50);
+  --secondary-hover: var(--color-neutral-700);
+  
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-400);
+  
+  --accent: var(--color-neutral-800);
+  --accent-foreground: var(--color-neutral-50);
+  --accent-hover: var(--color-neutral-700);
+  
+  --destructive: var(--color-red-900);
+  --destructive-foreground: var(--color-neutral-50);
+  --destructive-hover: var(--color-red-800);
+  
+  --border: var(--color-neutral-800);
+  --border-dark: var(--color-neutral-700);
+  --border-focus: var(--color-neutral-600);
+  --border-error: var(--color-red-500);
+  --input: var(--color-neutral-800);
+  --input-background: var(--color-neutral-950);
+  --ring: var(--color-neutral-300);
+  
+  /* Text colors from design system (dark mode) */
+  --text-primary: var(--color-neutral-50);
+  --text-secondary: var(--color-neutral-400);
+  --text-tertiary: var(--color-neutral-500);
 }
 
 @layer base {
   * {
-    border-color: hsl(var(--border));
+    border-color: var(--border);
   }
   body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    background-color: var(--background);
+    color: var(--foreground);
   }
   button {
     cursor: pointer;

package/dist/core/lib/logger.d.ts

@@ -1,24 +0,0 @@
-/**
- * Browser-compatible logger
- * Outputs structured JSON logs to console with color-coding
- */
-export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
-export declare class Logger {
-    private service;
-    private minLevel;
-    constructor(service: string, minLevel?: LogLevel);
-    private shouldLog;
-    private log;
-    trace(message: string, metadata?: Record<string, unknown>): void;
-    debug(message: string, metadata?: Record<string, unknown>): void;
-    info(message: string, metadata?: Record<string, unknown>): void;
-    warn(message: string, metadata?: Record<string, unknown>): void;
-    error(message: string, metadata?: Record<string, unknown>): void;
-    fatal(message: string, metadata?: Record<string, unknown>): void;
-}
-/**
- * Create a logger instance for a service
- * @param service - Service name (e.g., "gui", "http-agent", "tui")
- * @param minLevel - Minimum log level to display (default: "debug")
- */
-export declare function createLogger(service: string, minLevel?: LogLevel): Logger;