@townco/ui 0.1.37 → 0.1.39

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

@@ -0,0 +1,44 @@
+/**
+ * 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

@@ -0,0 +1,67 @@
+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/data/mockSourceData.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Mock source data - stub implementation
+ * Replace this with real source data from agent later
+ */
+import type { SourceItem } from "../components/SourceListItem.js";
+/**
+ * Stub source data
+ * This data can be easily replaced with real sources from the agent
+ */
+export declare const mockSourceData: SourceItem[];

package/dist/gui/data/mockSourceData.js

@@ -0,0 +1,40 @@
+/**
+ * Mock source data - stub implementation
+ * Replace this with real source data from agent later
+ */
+/**
+ * Stub source data
+ * This data can be easily replaced with real sources from the agent
+ */
+export const mockSourceData = [
+    {
+        id: "1",
+        title: "Boeing Scores Early Wins at Dubai Airshow",
+        url: "https://www.reuters.com/business/aerospace-defense/boeing-scores-early-wins-dubai-airshow-2024-11-17",
+        snippet: "DUBAI, Nov 17 (Reuters) - Boeing (BA.N), opens new tab took centre stage at day one of the Dubai Airshow on Monday, booking a $38 billion order from host carrier Emirates and clinching more deals with African carriers, while China displayed its C919 in the Middle East for the first time.",
+        sourceName: "Reuters",
+        favicon: "https://www.reuters.com/favicon.ico",
+    },
+    {
+        id: "2",
+        title: "Boeing's Sustainable Aviation Goals Take Flight",
+        url: "https://www.forbes.com/boeing-sustainability",
+        snippet: "SEATTLE, Nov 18 (Reuters) - Boeing is making headway towards its sustainability targets, unveiling plans for a new eco-friendly aircraft design aimed at reducing emissions by 50% by 2030.",
+        sourceName: "Forbes",
+    },
+    {
+        id: "3",
+        title: "Boeing Faces Increased Competition in Global Aviation Market",
+        url: "https://www.reuters.com/business/aerospace-defense/boeing-competition-2024-11-19",
+        snippet: "CHICAGO, Nov 19 (Reuters) - As the global aviation industry rebounds post-pandemic, Boeing is grappling with intensified competition from rival manufacturers, particularly in the Asian market.",
+        sourceName: "Reuters",
+        favicon: "https://www.reuters.com/favicon.ico",
+    },
+    {
+        id: "4",
+        title: "Boeing's Starliner Successfully Completes Orbital Test Flight",
+        url: "https://www.theverge.com/boeing-starliner",
+        snippet: "NASA, Nov 20 (Reuters) - Boeing's CST-100 Starliner spacecraft achieves a significant milestone, successfully completing its orbital test flight, paving the way for future crewed missions to the International Space Station.",
+        sourceName: "The Verge",
+    },
+];

package/dist/gui/data/mockTodoData.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Mock todo data - stub implementation
+ * Replace this with real todo data from agent/store later
+ */
+import type { TodoItem } from "../components/TodoListItem.js";
+/**
+ * Stub todo data
+ * This data can be easily replaced with real todo queries from the agent
+ */
+export declare const mockTodoData: TodoItem[];

package/dist/gui/data/mockTodoData.js

@@ -0,0 +1,35 @@
+/**
+ * Mock todo data - stub implementation
+ * Replace this with real todo data from agent/store later
+ */
+/**
+ * Stub todo data
+ * This data can be easily replaced with real todo queries from the agent
+ */
+export const mockTodoData = [
+    {
+        id: "todo-1",
+        text: "Review filesystem implementation",
+        status: "completed",
+    },
+    {
+        id: "todo-2",
+        text: "Add overflow menu actions",
+        status: "in_progress",
+    },
+    {
+        id: "todo-3",
+        text: "Connect to real filesystem API",
+        status: "pending",
+    },
+    {
+        id: "todo-4",
+        text: "Implement drag and drop support",
+        status: "pending",
+    },
+    {
+        id: "todo-5",
+        text: "Add file preview functionality",
+        status: "pending",
+    },
+];

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * 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

@@ -0,0 +1,94 @@
+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.
+            } }) }));
+}

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

@@ -158,6 +158,8 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     toolCall: z.ZodObject<{
         id: z.ZodString;
         title: z.ZodString;
+        prettyName: z.ZodOptional<z.ZodString>;
+        icon: z.ZodOptional<z.ZodString>;
         kind: z.ZodEnum<{
             read: "read";
             edit: "edit";

package/dist/sdk/transports/http.js

@@ -519,10 +519,22 @@ export class HttpTransport {
                 "messageId" in update._meta
                 ? String(update._meta.messageId)
                 : undefined;
+            const prettyName = update._meta &&
+                typeof update._meta === "object" &&
+                "prettyName" in update._meta
+                ? String(update._meta.prettyName)
+                : undefined;
+            const icon = update._meta &&
+                typeof update._meta === "object" &&
+                "icon" in update._meta
+                ? String(update._meta.icon)
+                : undefined;
             // Initial tool call notification
             const toolCall = {
                 id: update.toolCallId ?? "",
                 title: update.title ?? "",
+                prettyName,
+                icon,
                 kind: update.kind || "other",
                 status: update.status || "pending",
                 locations: update.locations,

package/dist/sdk/transports/stdio.js

@@ -60,10 +60,23 @@ export class StdioTransport {
                         const sessionId = self.currentSessionId || params.sessionId;
                         // Handle ACP tool call notifications
                         if (update?.sessionUpdate === "tool_call") {
+                            // Extract prettyName and icon from _meta
+                            const prettyName = update._meta &&
+                                typeof update._meta === "object" &&
+                                "prettyName" in update._meta
+                                ? String(update._meta.prettyName)
+                                : undefined;
+                            const icon = update._meta &&
+                                typeof update._meta === "object" &&
+                                "icon" in update._meta
+                                ? String(update._meta.icon)
+                                : undefined;
                             // Initial tool call notification
                             const toolCall = {
                                 id: update.toolCallId ?? "",
                                 title: update.title ?? "",
+                                prettyName,
+                                icon,
                                 kind: update.kind || "other",
                                 status: update.status || "pending",
                                 locations: update.locations,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "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.15",
+    "@townco/core": "0.0.17",
     "@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.34",
+    "@townco/tsconfig": "0.1.36",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

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;

package/dist/tui/components/LogsPanel.js

@@ -1,29 +0,0 @@
-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))) }));
-}