@townco/ui 0.1.38 → 0.1.40

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

@@ -1,12 +1,46 @@
 /**
  * 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;
@@ -22,3 +56,4 @@ export declare class Logger {
  * @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,7 +1,45 @@
 /**
  * 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,
@@ -18,7 +56,7 @@ const _LOG_COLORS = {
     error: "#EF4444", // red
     fatal: "#DC2626", // dark red
 };
-const LOG_STYLES = {
+const _LOG_STYLES = {
     trace: "color: #6B7280",
     debug: "color: #3B82F6; font-weight: bold",
     info: "color: #10B981; font-weight: bold",
@@ -29,6 +67,10 @@ const LOG_STYLES = {
 export class Logger {
     service;
     minLevel;
+    logFilePath;
+    logsDir;
+    writeQueue = [];
+    isWriting = false;
     constructor(service, minLevel = "debug") {
         this.service = service;
         this.minLevel = minLevel;
@@ -37,6 +79,48 @@ export class Logger {
             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];
@@ -46,38 +130,37 @@ export class Logger {
             return;
         }
         const entry = {
+            id: `log_${++logIdCounter}`,
             timestamp: new Date().toISOString(),
             level,
             service: this.service,
             message,
             ...(metadata && { metadata }),
         };
-        // Console output with color-coding
-        const style = LOG_STYLES[level];
-        const levelUpper = level.toUpperCase().padEnd(5);
-        if (typeof console !== "undefined") {
-            // Format: [timestamp] [SERVICE] [LEVEL] message
-            const prefix = `%c[${entry.timestamp}] [${this.service}] [${levelUpper}]`;
-            const msg = metadata ? `${message} %o` : message;
-            switch (level) {
-                case "trace":
-                case "debug":
-                case "info":
-                    console.log(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-                case "warn":
-                    console.warn(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-                case "error":
-                case "fatal":
-                    console.error(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-            }
+        // 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();
         }
-        // Also log the structured JSON for debugging
-        if (level === "fatal" || level === "error") {
-            console.debug("Structured log:", JSON.stringify(entry));
+        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);

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

@@ -0,0 +1,5 @@
+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;

package/dist/tui/components/LogsPanel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useEffect, useState } from "react";
+import { subscribeToLogs } from "../../core/lib/logger.js";
+// Color mapping for log levels
+const LOG_LEVEL_COLORS = {
+    trace: "gray",
+    debug: "blue",
+    info: "green",
+    warn: "yellow",
+    error: "red",
+    fatal: "red",
+};
+export function LogsPanel({ logs: initialLogs }) {
+    const [logs, setLogs] = useState(initialLogs);
+    // Subscribe to new logs
+    useEffect(() => {
+        const unsubscribe = subscribeToLogs((entry) => {
+            setLogs((prev) => [...prev, entry]);
+        });
+        return unsubscribe;
+    }, []);
+    if (logs.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "No logs yet..." }) }));
+    }
+    // Show last 100 logs
+    const displayLogs = logs.slice(-100);
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: displayLogs.map((log) => (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: new Date(log.timestamp).toLocaleTimeString() }), _jsxs(Text, { color: LOG_LEVEL_COLORS[log.level], bold: true, children: ["[", log.level.toUpperCase(), "]"] }), _jsxs(Text, { dimColor: true, children: ["[", log.service, "]"] }), _jsx(Text, { children: log.message }), log.metadata && (_jsx(Text, { dimColor: true, children: JSON.stringify(log.metadata) }))] }, log.id))) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "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.16",
+    "@townco/core": "0.0.18",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -54,6 +54,7 @@
     "lucide-react": "^0.552.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
@@ -62,7 +63,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.35",
+    "@townco/tsconfig": "0.1.37",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

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

@@ -1,14 +0,0 @@
-import type { AcpClient } from "../../sdk/client/acp-client.js";
-import type { ToolCall } from "../../core/schemas/tool-call.js";
-export interface InlineToolCallSummaryProps {
-    /** The tool call to summarize */
-    toolCall: ToolCall;
-    /** ACP client for making requests */
-    client: AcpClient | null;
-}
-/**
- * Inline tool call summary that appears beneath completed tool calls
- * Shows a brief AI-generated summary of what the tool accomplished
- * Uses the ACP client to make the request
- */
-export declare function InlineToolCallSummary({ toolCall, client, }: InlineToolCallSummaryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/InlineToolCallSummary.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircle, Sparkles } from "lucide-react";
-import { useEffect, useState } from "react";
-/**
- * Inline tool call summary that appears beneath completed tool calls
- * Shows a brief AI-generated summary of what the tool accomplished
- * Uses the ACP client to make the request
- */
-export function InlineToolCallSummary({ toolCall, client, }) {
-    const [summary, setSummary] = useState(null);
-    const [loading, setLoading] = useState(false);
-    useEffect(() => {
-        // Only generate summary for completed tool calls
-        if (toolCall.status !== "completed" || !client) {
-            return;
-        }
-        // Don't fetch if we already have a summary
-        if (summary) {
-            return;
-        }
-        const fetchSummary = async () => {
-            setLoading(true);
-            try {
-                // Create a minimal Anthropic-format request with just this tool call
-                const request = {
-                    messages: [
-                        {
-                            role: "assistant",
-                            content: [
-                                {
-                                    type: "tool_use",
-                                    id: toolCall.id,
-                                    name: toolCall.title.toLowerCase().replace(/\s+/g, "_"),
-                                    input: toolCall.rawInput || {},
-                                },
-                            ],
-                        },
-                        {
-                            role: "user",
-                            content: [
-                                {
-                                    type: "tool_result",
-                                    tool_use_id: toolCall.id,
-                                    content: extractToolOutput(toolCall),
-                                },
-                            ],
-                        },
-                    ],
-                };
-                // Make ACP RPC request to agent/summarize method
-                const response = await client.request("agent/summarize", request);
-                // Extract the description from the first tool call
-                if (response.toolCalls && response.toolCalls.length > 0) {
-                    const firstToolCall = response.toolCalls[0];
-                    if (firstToolCall) {
-                        setSummary(firstToolCall.description);
-                    }
-                }
-            }
-            catch (error) {
-                // Silently fail - summaries are optional enhancements
-                console.debug("Failed to fetch tool call summary via ACP:", error);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        fetchSummary();
-    }, [toolCall, client, summary]);
-    // Don't show anything if not completed or still loading
-    if (toolCall.status !== "completed" || loading) {
-        return null;
-    }
-    // Don't show if no summary
-    if (!summary) {
-        return null;
-    }
-    return (_jsxs("div", { className: "flex items-start gap-2 mt-2 px-3 py-2 rounded-lg bg-emerald-50/50 border border-emerald-100", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-emerald-600 shrink-0 mt-0.5" }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-[11px] text-emerald-900 font-medium", children: summary }) }), _jsx(Sparkles, { className: "h-3 w-3 text-emerald-600/50 shrink-0 mt-0.5" })] }));
-}
-/**
- * Extract output text from a tool call for summarization
- */
-function extractToolOutput(toolCall) {
-    // Try to extract text from content blocks
-    if (toolCall.content && toolCall.content.length > 0) {
-        const textBlocks = [];
-        for (const block of toolCall.content) {
-            if (block.type === "text" && "text" in block) {
-                textBlocks.push(block.text);
-            }
-            else if (block.type === "content" && "content" in block) {
-                const innerContent = block.content;
-                if (innerContent.type === "text" && innerContent.text) {
-                    textBlocks.push(innerContent.text);
-                }
-            }
-        }
-        if (textBlocks.length > 0) {
-            // Truncate very long outputs for summary purposes
-            const output = textBlocks.join("\n");
-            return output.length > 500 ? `${output.slice(0, 500)}...` : output;
-        }
-    }
-    // Fallback to raw output
-    if (toolCall.rawOutput) {
-        const output = JSON.stringify(toolCall.rawOutput);
-        return output.length > 500 ? `${output.slice(0, 500)}...` : output;
-    }
-    return "No output";
-}

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

@@ -1,15 +0,0 @@
-import type { AcpClient } from "../../sdk/client/acp-client.js";
-import type { ToolCall } from "../../core/schemas/tool-call.js";
-export interface InlineToolCallSummaryACPProps {
-    /** The tool call to summarize */
-    toolCall: ToolCall;
-    /** ACP client for making requests */
-    client: AcpClient | null;
-}
-/**
- * Inline tool call summary using ACP protocol
- *
- * This version uses the ACP client to make a custom method call
- * instead of direct HTTP fetch
- */
-export declare function InlineToolCallSummaryACP({ toolCall, client, }: InlineToolCallSummaryACPProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/InlineToolCallSummaryACP.js

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircle, Sparkles } from "lucide-react";
-import { useEffect, useState } from "react";
-/**
- * Inline tool call summary using ACP protocol
- *
- * This version uses the ACP client to make a custom method call
- * instead of direct HTTP fetch
- */
-export function InlineToolCallSummaryACP({ toolCall, client, }) {
-    const [summary, setSummary] = useState(null);
-    const [loading, setLoading] = useState(false);
-    useEffect(() => {
-        if (toolCall.status !== "completed" || !client || summary) {
-            return;
-        }
-        const fetchSummary = async () => {
-            setLoading(true);
-            try {
-                // This would require adding a custom ACP method to the server
-                // For now, this shows the concept - you'd need to implement
-                // the corresponding handler in the ACP adapter
-                // Example of what it might look like:
-                // const response = await client.request({
-                //   method: "agent/summarize",
-                //   params: {
-                //     messages: [
-                //       {
-                //         role: "assistant",
-                //         content: [{
-                //           type: "tool_use",
-                //           id: toolCall.id,
-                //           name: toolCall.title,
-                //           input: toolCall.rawInput || {}
-                //         }]
-                //       },
-                //       {
-                //         role: "user",
-                //         content: [{
-                //           type: "tool_result",
-                //           tool_use_id: toolCall.id,
-                //           content: extractToolOutput(toolCall)
-                //         }]
-                //       }
-                //     ]
-                //   }
-                // });
-                // For now, fall back to direct fetch since the ACP method
-                // isn't implemented
-                console.log("ACP-based summary not yet implemented");
-            }
-            catch (error) {
-                console.debug("Failed to fetch tool call summary via ACP:", error);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        fetchSummary();
-    }, [toolCall, client, summary]);
-    if (toolCall.status !== "completed" || loading || !summary) {
-        return null;
-    }
-    return (_jsxs("div", { className: "flex items-start gap-2 mt-2 px-3 py-2 rounded-lg bg-emerald-50/50 border border-emerald-100", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-emerald-600 shrink-0 mt-0.5" }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-[11px] text-emerald-900 font-medium", children: summary }) }), _jsx(Sparkles, { className: "h-3 w-3 text-emerald-600/50 shrink-0 mt-0.5" })] }));
-}
-function extractToolOutput(toolCall) {
-    if (toolCall.content && toolCall.content.length > 0) {
-        const textBlocks = [];
-        for (const block of toolCall.content) {
-            if (block.type === "text" && "text" in block) {
-                textBlocks.push(block.text);
-            }
-            else if (block.type === "content" && "content" in block) {
-                const innerContent = block.content;
-                if (innerContent.type === "text" && innerContent.text) {
-                    textBlocks.push(innerContent.text);
-                }
-            }
-        }
-        if (textBlocks.length > 0) {
-            const output = textBlocks.join("\n");
-            return output.length > 500 ? `${output.slice(0, 500)}...` : output;
-        }
-    }
-    if (toolCall.rawOutput) {
-        const output = JSON.stringify(toolCall.rawOutput);
-        return output.length > 500 ? `${output.slice(0, 500)}...` : output;
-    }
-    return "No output";
-}

package/dist/gui/components/tool-call-summary.d.ts

@@ -1,44 +0,0 @@
-/**
- * Tool call summary data from the /summarize endpoint
- */
-export interface ToolCallSummary {
-    id: string;
-    name: string;
-    description: string;
-    input: Record<string, unknown>;
-    output?: string | undefined;
-    status: "pending" | "completed" | "error";
-    error?: string | undefined;
-}
-export interface SummaryResponse {
-    summary: {
-        total: number;
-        byStatus: Record<string, number>;
-        byTool: Record<string, number>;
-    };
-    toolCalls: ToolCallSummary[];
-}
-/**
- * Props for ToolCallSummaryDisplay component
- */
-export interface ToolCallSummaryDisplayProps {
-    /** ACP server URL */
-    serverUrl: string;
-    /** Anthropic API request (messages with tool calls) */
-    request: {
-        model?: string;
-        messages: Array<{
-            role: "user" | "assistant";
-            content: string | Array<{
-                type: string;
-                [key: string]: unknown;
-            }>;
-        }>;
-    };
-    /** Custom className for styling */
-    className?: string;
-}
-/**
- * Display a summary of tool calls from an Anthropic API request
- */
-export declare function ToolCallSummaryDisplay({ serverUrl, request, className, }: ToolCallSummaryDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/tool-call-summary.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createLogger } from "@townco/core";
-import { AlertCircle, CheckCircle, Clock, Loader2, RefreshCw, } from "lucide-react";
-import { useEffect, useState } from "react";
-import { cn } from "../lib/utils";
-const logger = createLogger("tool-call-summary");
-/**
- * Display a summary of tool calls from an Anthropic API request
- */
-export function ToolCallSummaryDisplay({ serverUrl, request, className, }) {
-    const [summary, setSummary] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const fetchSummary = async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const response = await fetch(`${serverUrl}/summarize`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(request),
-            });
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || "Failed to fetch summary");
-            }
-            const data = await response.json();
-            setSummary(data);
-            logger.info("Tool call summary fetched", {
-                total: data.summary.total,
-            });
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            setError(message);
-            logger.error("Failed to fetch tool call summary", { error: message });
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    // Fetch summary on mount and when request changes
-    useEffect(() => {
-        fetchSummary();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [serverUrl, request]);
-    if (loading && !summary) {
-        return (_jsxs("div", { className: cn("flex items-center justify-center p-4 text-muted-foreground", className), children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), _jsx("span", { className: "text-paragraph-sm", children: "Loading summary..." })] }));
-    }
-    if (error) {
-        return (_jsx("div", { className: cn("rounded-lg border border-destructive/20 p-4", className), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-paragraph-sm font-medium text-destructive", children: "Error loading summary" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground mt-1", children: error })] }), _jsx("button", { type: "button", onClick: fetchSummary, className: "text-muted-foreground hover:text-foreground transition-colors", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }) }));
-    }
-    if (!summary || summary.summary.total === 0) {
-        return (_jsx("div", { className: cn("flex items-center justify-center p-4 text-muted-foreground", className), children: _jsx("span", { className: "text-paragraph-sm", children: "No tool calls found" }) }));
-    }
-    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-heading-5 font-semibold", children: ["Tool Calls (", summary.summary.total, ")"] }), _jsx("button", { type: "button", onClick: fetchSummary, disabled: loading, className: "text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50", children: _jsx(RefreshCw, { className: cn("h-4 w-4", loading && "animate-spin") }) })] }), _jsxs("div", { className: "flex gap-4", children: [(summary.summary.byStatus.completed ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle, { className: "h-4 w-4 text-success" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.completed, " completed"] })] })), (summary.summary.byStatus.pending ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "h-4 w-4 text-warning" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.pending, " pending"] })] })), (summary.summary.byStatus.error ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.error, " errors"] })] }))] }), _jsx("div", { className: "space-y-2", children: summary.toolCalls.map((toolCall) => (_jsx(ToolCallSummaryItem, { toolCall: toolCall }, toolCall.id))) })] }));
-}
-/**
- * Display a single tool call summary
- */
-function ToolCallSummaryItem({ toolCall }) {
-    const [expanded, setExpanded] = useState(false);
-    const statusIcon = toolCall.status === "completed" ? (_jsx(CheckCircle, { className: "h-4 w-4 text-success" })) : toolCall.status === "error" ? (_jsx(AlertCircle, { className: "h-4 w-4 text-destructive" })) : (_jsx(Clock, { className: "h-4 w-4 text-warning" }));
-    return (_jsxs("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2", children: [_jsxs("button", { type: "button", onClick: () => setExpanded(!expanded), className: "flex items-start gap-2 w-full text-left", children: [statusIcon, _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-paragraph-sm font-medium text-foreground truncate", children: toolCall.description }), _jsx("p", { className: "text-paragraph-xs text-muted-foreground", children: toolCall.name })] })] }), expanded && (_jsxs("div", { className: "pl-6 space-y-2", children: [Object.keys(toolCall.input).length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-muted-foreground mb-1", children: "Input:" }), _jsx("pre", { className: "text-paragraph-xs bg-muted p-2 rounded overflow-x-auto", children: JSON.stringify(toolCall.input, null, 2) })] })), toolCall.output && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-muted-foreground mb-1", children: "Output:" }), _jsx("pre", { className: "text-paragraph-xs bg-muted p-2 rounded overflow-x-auto", children: toolCall.output })] })), toolCall.error && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-destructive mb-1", children: "Error:" }), _jsx("p", { className: "text-paragraph-xs text-destructive bg-destructive/10 p-2 rounded", children: toolCall.error })] }))] }))] }));
-}

package/dist/gui/examples/FileSystemDemo.d.ts

@@ -1,5 +0,0 @@
-/**
- * FileSystemDemo - A demo page showcasing the FileSystemView component
- * Can be integrated into the GUI app for testing and demonstration
- */
-export declare function FileSystemDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/gui/examples/FileSystemDemo.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * FileSystemDemo - A demo page showcasing the FileSystemView component
- * Can be integrated into the GUI app for testing and demonstration
- */
-import * as React from "react";
-import { FileSystemView } from "../components/FileSystemView.js";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/Card.js";
-export function FileSystemDemo() {
-    const [selectedItem, setSelectedItem] = React.useState(null);
-    const handleDownload = (item) => {
-        console.log("Download:", item.name);
-        // Implement download logic
-    };
-    const handleRename = (item) => {
-        console.log("Rename:", item.name);
-        // Implement rename logic
-    };
-    const handleDelete = (item) => {
-        console.log("Delete:", item.name);
-        // Implement delete logic
-    };
-    return (_jsx("div", { className: "w-full h-full p-8 bg-background", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "File Manager" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "A hierarchical file system view with stub data. Replace the MockFileSystemProvider with a real implementation to connect to actual filesystem data." })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [_jsxs(Card, { className: "lg:col-span-2", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Files" }), _jsx(CardDescription, { children: "Browse files and folders. Click folders to expand/collapse." })] }), _jsx(CardContent, { className: "p-0", children: _jsx(FileSystemView, { onItemSelect: setSelectedItem, onDownload: handleDownload, onRename: handleRename, onDelete: handleDelete, className: "max-h-[600px] overflow-y-auto" }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Details" }), _jsx(CardDescription, { children: "Information about the selected item" })] }), _jsx(CardContent, { children: selectedItem ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Name" }), _jsx("p", { className: "text-base font-mono", children: selectedItem.name })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Type" }), _jsx("p", { className: "text-base capitalize", children: selectedItem.type })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "ID" }), _jsx("p", { className: "text-base font-mono text-xs", children: selectedItem.id })] }), selectedItem.extension && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Extension" }), _jsxs("p", { className: "text-base", children: [".", selectedItem.extension] })] })), selectedItem.children && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Children" }), _jsxs("p", { className: "text-base", children: [selectedItem.children.length, " item(s)"] })] })), selectedItem.path && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Path" }), _jsx("p", { className: "text-base font-mono text-xs", children: selectedItem.path })] }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file or folder to view details" })) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Implementation Notes" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsxs("p", { children: [_jsx("strong", { children: "Stub System:" }), " Currently using ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded", children: "MockFileSystemProvider" }), " with hardcoded data."] }), _jsxs("p", { children: [_jsx("strong", { children: "Easy Replacement:" }), " Implement the ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded", children: "FileSystemProvider" }), " ", "interface to connect to real data sources."] }), _jsxs("p", { children: [_jsx("strong", { children: "Design:" }), " Based on shadcn file manager components and Figma specifications."] })] })] })] }) }));
-}

package/dist/gui/examples/FileSystemExample.d.ts

@@ -1,17 +0,0 @@
-/**
- * Example usage of FileSystemView component
- * This demonstrates how to use the stub filesystem and how to replace it with real data
- */
-/**
- * Basic usage with default mock data
- */
-export declare function BasicFileSystemExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Custom mock data example
- * Shows how to create custom stub data
- */
-export declare function CustomDataExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example with real provider (commented out to avoid actual API calls)
- */
-export declare function RealDataExample(): import("react/jsx-runtime").JSX.Element;

package/dist/gui/examples/FileSystemExample.js

@@ -1,94 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Example usage of FileSystemView component
- * This demonstrates how to use the stub filesystem and how to replace it with real data
- */
-import * as React from "react";
-import { FileSystemView } from "../components/FileSystemView.js";
-import { MockFileSystemProvider } from "../data/mockFileSystemData.js";
-/**
- * Basic usage with default mock data
- */
-export function BasicFileSystemExample() {
-    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView, { onItemSelect: (item) => {
-                console.log("Selected:", item);
-            } }) }));
-}
-/**
- * Custom mock data example
- * Shows how to create custom stub data
- */
-export function CustomDataExample() {
-    const customData = [
-        {
-            id: "src",
-            name: "src",
-            type: "folder",
-            children: [
-                {
-                    id: "components",
-                    name: "components",
-                    type: "folder",
-                    children: [
-                        { id: "button", name: "Button.tsx", type: "file", extension: "tsx" },
-                        { id: "card", name: "Card.tsx", type: "file", extension: "tsx" },
-                    ],
-                },
-                { id: "app", name: "App.tsx", type: "file", extension: "tsx" },
-                { id: "index", name: "index.ts", type: "file", extension: "ts" },
-            ],
-        },
-        {
-            id: "public",
-            name: "public",
-            type: "folder",
-            children: [
-                { id: "favicon", name: "favicon.ico", type: "file" },
-            ],
-        },
-    ];
-    const customProvider = new MockFileSystemProvider(customData);
-    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView, { provider: customProvider, onItemSelect: (item) => {
-                console.log("Selected:", item);
-            } }) }));
-}
-/**
- * Example of how to implement a real FileSystemProvider
- * Replace MockFileSystemProvider with this when connecting to real data
- */
-class RealFileSystemProvider {
-    apiUrl;
-    constructor(apiUrl) {
-        this.apiUrl = apiUrl;
-    }
-    async getRootItems() {
-        // Replace with actual API call
-        const response = await fetch(`${this.apiUrl}/filesystem/root`);
-        return response.json();
-    }
-    async getItemChildren(itemId) {
-        // Replace with actual API call
-        const response = await fetch(`${this.apiUrl}/filesystem/items/${itemId}/children`);
-        return response.json();
-    }
-    async getItemDetails(itemId) {
-        // Replace with actual API call
-        const response = await fetch(`${this.apiUrl}/filesystem/items/${itemId}`);
-        return response.json();
-    }
-}
-/**
- * Example with real provider (commented out to avoid actual API calls)
- */
-export function RealDataExample() {
-    // Uncomment and configure when ready to use real data:
-    // const realProvider = new RealFileSystemProvider('https://your-api.com');
-    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView
-        // provider={realProvider}
-        , { 
-            // provider={realProvider}
-            onItemSelect: (item) => {
-                console.log("Selected:", item);
-                // Handle file selection - open file, show details, etc.
-            } }) }));
-}