@townco/ui 0.1.33 → 0.1.35

package/dist/gui/data/mockFileSystemData.js

@@ -0,0 +1,127 @@
+/**
+ * Mock filesystem data - stub implementation
+ * Replace this with a real FileSystemProvider implementation later
+ */
+/**
+ * Stub filesystem data matching the Figma design
+ * This data can be easily replaced with real filesystem queries
+ */
+export const mockFileSystemData = [
+    {
+        id: "folder-1",
+        name: "Item 1",
+        type: "folder",
+        children: [
+            {
+                id: "file-1-1",
+                name: "Item 2",
+                type: "file",
+                extension: "tsx",
+            },
+            {
+                id: "file-1-2",
+                name: "Item 3",
+                type: "file",
+                extension: "ts",
+            },
+            {
+                id: "file-1-3",
+                name: "Item 4",
+                type: "file",
+                extension: "json",
+            },
+            {
+                id: "file-1-4",
+                name: "Item 5",
+                type: "file",
+                extension: "md",
+            },
+        ],
+    },
+    {
+        id: "folder-2",
+        name: "Description 1",
+        type: "folder",
+        children: [
+            {
+                id: "file-2-1",
+                name: "Description 2",
+                type: "file",
+                extension: "tsx",
+            },
+            {
+                id: "file-2-2",
+                name: "Description 3",
+                type: "file",
+                extension: "ts",
+            },
+            {
+                id: "file-2-3",
+                name: "Description 4",
+                type: "file",
+                extension: "json",
+            },
+            {
+                id: "file-2-4",
+                name: "Description 5",
+                type: "file",
+                extension: "md",
+            },
+        ],
+    },
+    {
+        id: "folder-3",
+        name: "financial-docs",
+        type: "folder",
+        children: [],
+    },
+];
+/**
+ * Mock FileSystemProvider implementation
+ * Replace this class with a real implementation that fetches from an actual filesystem
+ */
+export class MockFileSystemProvider {
+    data;
+    constructor(data = mockFileSystemData) {
+        this.data = data;
+    }
+    async getRootItems() {
+        // Simulate async operation
+        return Promise.resolve(this.data);
+    }
+    async getItemChildren(itemId) {
+        const findItem = (items) => {
+            for (const item of items) {
+                if (item.id === itemId)
+                    return item;
+                if (item.children) {
+                    const found = findItem(item.children);
+                    if (found)
+                        return found;
+                }
+            }
+            return undefined;
+        };
+        const item = findItem(this.data);
+        return Promise.resolve(item?.children || []);
+    }
+    async getItemDetails(itemId) {
+        const findItem = (items) => {
+            for (const item of items) {
+                if (item.id === itemId)
+                    return item;
+                if (item.children) {
+                    const found = findItem(item.children);
+                    if (found)
+                        return found;
+                }
+            }
+            return undefined;
+        };
+        const item = findItem(this.data);
+        if (!item) {
+            throw new Error(`Item with id ${itemId} not found`);
+        }
+        return Promise.resolve(item);
+    }
+}

package/dist/gui/types/filesystem.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Filesystem types for the file manager view
+ * This stub system can be easily replaced with real filesystem data later
+ */
+export type FileSystemItemType = "file" | "folder";
+export interface FileSystemItem {
+    id: string;
+    name: string;
+    type: FileSystemItemType;
+    children?: FileSystemItem[];
+    size?: number;
+    lastModified?: Date;
+    path?: string;
+    extension?: string;
+}
+export interface FileSystemData {
+    items: FileSystemItem[];
+}
+/**
+ * Interface for filesystem data providers
+ * Implement this to replace the stub with real data
+ */
+export interface FileSystemProvider {
+    getRootItems(): Promise<FileSystemItem[]>;
+    getItemChildren(itemId: string): Promise<FileSystemItem[]>;
+    getItemDetails(itemId: string): Promise<FileSystemItem>;
+}

package/dist/gui/types/filesystem.js

@@ -0,0 +1,5 @@
+/**
+ * Filesystem types for the file manager view
+ * This stub system can be easily replaced with real filesystem data later
+ */
+export {};

package/dist/sdk/schemas/session.d.ts

@@ -4,12 +4,12 @@ import { z } from "zod";
  */
 export declare const SessionStatus: z.ZodEnum<{
     error: "error";
-    disconnected: "disconnected";
+    idle: "idle";
     connecting: "connecting";
     connected: "connected";
-    idle: "idle";
     active: "active";
     streaming: "streaming";
+    disconnected: "disconnected";
 }>;
 export type SessionStatus = z.infer<typeof SessionStatus>;
 /**
@@ -41,12 +41,12 @@ export declare const Session: z.ZodObject<{
     id: z.ZodString;
     status: z.ZodEnum<{
         error: "error";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         active: "active";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>;
     config: z.ZodObject<{
         agentPath: z.ZodString;
@@ -109,12 +109,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         active: "active";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -216,12 +216,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         active: "active";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -307,12 +307,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         active: "active";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -363,12 +363,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        disconnected: "disconnected";
+        idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        idle: "idle";
         active: "active";
         streaming: "streaming";
+        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
-    "@townco/core": "0.0.11",
+    "@townco/core": "0.0.13",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.30",
+    "@townco/tsconfig": "0.1.32",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/src/styles/global.css

@@ -52,11 +52,24 @@
   
   /* Typography - Letter spacing */
   --letter-spacing-tight: -0.48px;
+  --letter-spacing-heading: -0.4px;
   --letter-spacing-uppercase: 1.12px;
   
   /* Typography - Font sizes with line heights */
+  --font-size-heading-1: 3rem;         /* 48px */
+  --line-height-heading-1: 1;          /* 100% */
+
+  --font-size-heading-2: 1.875rem;     /* 30px */
+  --line-height-heading-2: 1;          /* 100% */
+
   --font-size-heading-3: 1.5rem;       /* 24px */
   --line-height-heading-3: 1.2;        /* 120% */
+
+  --font-size-heading-4: 1.25rem;      /* 20px */
+  --line-height-heading-4: 1.2;        /* 120% */
+
+  --font-size-heading-5: 1rem;         /* 16px */
+  --line-height-heading-5: 1.2;        /* 120% */
   
   --font-size-subheading: 1.25rem;     /* 20px */
   --line-height-subheading: 1.5;       /* 150% */
@@ -64,6 +77,24 @@
   --font-size-label: 0.875rem;         /* 14px */
   --line-height-label: 1.5;            /* 150% */
 
+  
+  --font-size-paragraph: 1rem;         /* 16px */
+  --line-height-paragraph: 1.5;        /* 150% */
+
+  --font-size-paragraph-sm: 0.875rem;  /* 14px */
+  --line-height-paragraph-sm: 1.5;     /* 150% */
+  
+  --font-size-paragraph-mini: 0.75rem; /* 12px */
+  --line-height-paragraph-mini: 1.5;   /* 150% */
+
+  --font-size-caption: 0.75rem;        /* 12px */
+  --line-height-caption: 1.5;          /* 150% */
+
+  --font-size-code: 0.875rem;          /* 14px */
+  --line-height-code: 1.5;             /* 150% */
+
+  --letter-spacing-wide: 0.07em;
+
   /* 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);
@@ -177,12 +208,40 @@
 
 @layer utilities {
   /* Typography utilities following design system */
+  .text-heading-1 {
+    font-size: var(--font-size-heading-1);
+    line-height: var(--line-height-heading-1);
+    font-weight: 600;
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .text-heading-2 {
+    font-size: var(--font-size-heading-2);
+    line-height: var(--line-height-heading-2);
+    font-weight: 600;
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
   .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-heading-4 {
+    font-size: var(--font-size-heading-4);
+    line-height: var(--line-height-heading-4);
+    font-weight: 600;
+    letter-spacing: var(--letter-spacing-heading);
+  }
+
+  .text-heading-5 {
+    font-size: var(--font-size-heading-5);
+    line-height: var(--line-height-heading-5);
+    font-weight: 600;
+    letter-spacing: var(--letter-spacing-heading);
+  }
   
   .text-subheading {
     font-size: var(--font-size-subheading);
@@ -197,6 +256,55 @@
     letter-spacing: var(--letter-spacing-uppercase);
     text-transform: uppercase;
   }
+
+  .text-paragraph {
+    font-size: var(--font-size-paragraph);
+    line-height: var(--line-height-paragraph);
+    font-weight: 400;
+  }
+
+  .text-paragraph-medium {
+    font-size: var(--font-size-paragraph);
+    line-height: var(--line-height-paragraph);
+    font-weight: 500;
+  }
+
+  .text-paragraph-sm {
+    font-size: var(--font-size-paragraph-sm);
+    line-height: var(--line-height-paragraph-sm);
+    font-weight: 400;
+  }
+
+  .text-paragraph-sm-medium {
+    font-size: var(--font-size-paragraph-sm);
+    line-height: var(--line-height-paragraph-sm);
+    font-weight: 500;
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .text-paragraph-mini {
+    font-size: var(--font-size-paragraph-mini);
+    line-height: var(--line-height-paragraph-mini);
+    font-weight: 400;
+  }
+
+  .text-paragraph-mini-medium {
+    font-size: var(--font-size-paragraph-mini);
+    line-height: var(--line-height-paragraph-mini);
+    font-weight: 500;
+  }
+
+  .text-caption {
+    font-size: var(--font-size-caption);
+    line-height: var(--line-height-caption);
+    font-weight: 400;
+  }
+
+  .text-code {
+    font-size: var(--font-size-code);
+    line-height: var(--line-height-code);
+    font-family: monospace;
+  }
 }
 
 @keyframes spin {

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

@@ -1,59 +0,0 @@
-/**
- * Browser-compatible logger
- * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
- */
-export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
-export interface LogEntry {
-    id: string;
-    timestamp: string;
-    level: LogLevel;
-    service: string;
-    message: string;
-    metadata?: Record<string, unknown>;
-}
-/**
- * Get all captured logs
- */
-export declare function getCapturedLogs(): LogEntry[];
-/**
- * Clear all captured logs
- */
-export declare function clearCapturedLogs(): void;
-/**
- * Subscribe to log updates
- */
-type LogSubscriber = (entry: LogEntry) => void;
-export declare function subscribeToLogs(callback: LogSubscriber): () => void;
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export declare function configureLogsDir(logsDir: string): void;
-export declare class Logger {
-    private service;
-    private minLevel;
-    private logFilePath?;
-    private logsDir?;
-    private writeQueue;
-    private isWriting;
-    constructor(service: string, minLevel?: LogLevel);
-    private setupFileLogging;
-    private writeToFile;
-    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;
-export {};

package/dist/core/lib/logger.js

@@ -1,191 +0,0 @@
-/**
- * Browser-compatible logger
- * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
- */
-// Check if running in Node.js
-const isNode = typeof process !== "undefined" && process.versions?.node;
-// Global logs directory configuration (set once at app startup for TUI)
-let globalLogsDir;
-// Global log store
-const globalLogStore = [];
-let logIdCounter = 0;
-/**
- * Get all captured logs
- */
-export function getCapturedLogs() {
-    return [...globalLogStore];
-}
-/**
- * Clear all captured logs
- */
-export function clearCapturedLogs() {
-    globalLogStore.length = 0;
-}
-const logSubscribers = new Set();
-export function subscribeToLogs(callback) {
-    logSubscribers.add(callback);
-    return () => logSubscribers.delete(callback);
-}
-function notifyLogSubscribers(entry) {
-    for (const callback of logSubscribers) {
-        callback(entry);
-    }
-}
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export function configureLogsDir(logsDir) {
-    globalLogsDir = logsDir;
-}
-const LOG_LEVELS = {
-    trace: 0,
-    debug: 1,
-    info: 2,
-    warn: 3,
-    error: 4,
-    fatal: 5,
-};
-const _LOG_COLORS = {
-    trace: "#6B7280", // gray
-    debug: "#3B82F6", // blue
-    info: "#10B981", // green
-    warn: "#F59E0B", // orange
-    error: "#EF4444", // red
-    fatal: "#DC2626", // dark red
-};
-const _LOG_STYLES = {
-    trace: "color: #6B7280",
-    debug: "color: #3B82F6; font-weight: bold",
-    info: "color: #10B981; font-weight: bold",
-    warn: "color: #F59E0B; font-weight: bold",
-    error: "color: #EF4444; font-weight: bold",
-    fatal: "color: #DC2626; font-weight: bold; background: #FEE2E2",
-};
-export class Logger {
-    service;
-    minLevel;
-    logFilePath;
-    logsDir;
-    writeQueue = [];
-    isWriting = false;
-    constructor(service, minLevel = "debug") {
-        this.service = service;
-        this.minLevel = minLevel;
-        // In production, suppress trace and debug logs
-        if (typeof process !== "undefined" &&
-            process.env?.NODE_ENV === "production") {
-            this.minLevel = "info";
-        }
-        // Note: File logging setup is done lazily in log() method
-        // This allows loggers created before configureLogsDir() to still write to files
-    }
-    setupFileLogging() {
-        if (!isNode || !globalLogsDir)
-            return;
-        try {
-            // Dynamic import for Node.js modules
-            const path = require("node:path");
-            const fs = require("node:fs");
-            this.logsDir = globalLogsDir;
-            this.logFilePath = path.join(this.logsDir, `${this.service}.log`);
-            // Create logs directory if it doesn't exist
-            if (!fs.existsSync(this.logsDir)) {
-                fs.mkdirSync(this.logsDir, { recursive: true });
-            }
-        }
-        catch (_error) {
-            // Silently fail if we can't set up file logging
-        }
-    }
-    async writeToFile(content) {
-        if (!this.logFilePath || !isNode)
-            return;
-        this.writeQueue.push(content);
-        if (this.isWriting) {
-            return;
-        }
-        this.isWriting = true;
-        while (this.writeQueue.length > 0) {
-            const batch = this.writeQueue.splice(0, this.writeQueue.length);
-            const data = `${batch.join("\n")}\n`;
-            try {
-                // Dynamic import for Node.js modules
-                const fs = require("node:fs");
-                await fs.promises.appendFile(this.logFilePath, data, "utf-8");
-            }
-            catch (_error) {
-                // Silently fail
-            }
-        }
-        this.isWriting = false;
-    }
-    shouldLog(level) {
-        return LOG_LEVELS[level] >= LOG_LEVELS[this.minLevel];
-    }
-    log(level, message, metadata) {
-        if (!this.shouldLog(level)) {
-            return;
-        }
-        const entry = {
-            id: `log_${++logIdCounter}`,
-            timestamp: new Date().toISOString(),
-            level,
-            service: this.service,
-            message,
-            ...(metadata && { metadata }),
-        };
-        // Store in global log store
-        globalLogStore.push(entry);
-        // Notify subscribers
-        notifyLogSubscribers(entry);
-        // Write to file in Node.js (for logs tab to read)
-        // Lazily set up file logging if globalLogsDir was configured after this logger was created
-        if (isNode && !this.logFilePath && globalLogsDir) {
-            this.setupFileLogging();
-        }
-        if (isNode && this.logFilePath) {
-            // Write as JSON without the id field (to match expected format)
-            const fileEntry = {
-                timestamp: entry.timestamp,
-                level: entry.level,
-                service: entry.service,
-                message: entry.message,
-                ...(entry.metadata && { metadata: entry.metadata }),
-            };
-            this.writeToFile(JSON.stringify(fileEntry)).catch(() => {
-                // Silently fail
-            });
-        }
-        // No console output - logs are only captured and displayed in UI
-        // This prevents logs from polluting stdout/stderr in TUI mode
-    }
-    trace(message, metadata) {
-        this.log("trace", message, metadata);
-    }
-    debug(message, metadata) {
-        this.log("debug", message, metadata);
-    }
-    info(message, metadata) {
-        this.log("info", message, metadata);
-    }
-    warn(message, metadata) {
-        this.log("warn", message, metadata);
-    }
-    error(message, metadata) {
-        this.log("error", message, metadata);
-    }
-    fatal(message, metadata) {
-        this.log("fatal", message, metadata);
-    }
-}
-/**
- * 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 function createLogger(service, minLevel = "debug") {
-    return new Logger(service, minLevel);
-}

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

@@ -1,5 +0,0 @@
-import type { LogEntry } from "../../core/lib/logger.js";
-export interface LogsPanelProps {
-    logs: LogEntry[];
-}
-export declare function LogsPanel({ logs: initialLogs }: LogsPanelProps): import("react/jsx-runtime").JSX.Element;