npcts 0.1.0

package/dist/ui/chat/components/MessageItem.js

@@ -0,0 +1,43 @@
+import React, { memo } from "react";
+import { Paperclip, Wrench } from "lucide-react";
+export const MessageItem = memo(({ message, isSelected, messageSelectionMode, toggleMessageSelection, handleMessageContextMenu, searchTerm, isCurrentSearchResult, onResendMessage, onCreateBranch, messageIndex, }) => {
+    const messageId = message.id || message.timestamp || String(messageIndex);
+    return (React.createElement("div", { id: `message-${messageId}`, className: `max-w-[85%] rounded-lg p-3 relative group ${message.role === "user" ? "theme-message-user" : "theme-message-assistant"} ${message.type === "error" ? "theme-message-error theme-border" : ""} ${isSelected ? "ring-2 ring-blue-500" : ""} ${isCurrentSearchResult ? "ring-2 ring-yellow-500" : ""} ${messageSelectionMode ? "cursor-pointer" : ""}`, onClick: () => messageSelectionMode && toggleMessageSelection(messageId), onContextMenu: (e) => handleMessageContextMenu(e, messageId) },
+        messageSelectionMode && (React.createElement("div", { className: "absolute top-2 right-2 z-10" },
+            React.createElement("input", { type: "checkbox", checked: isSelected, onChange: () => toggleMessageSelection(messageId), className: "w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500", onClick: (e) => e.stopPropagation() }))),
+        message.role === "user" && !messageSelectionMode && onCreateBranch && (React.createElement("div", { className: "absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity z-10" },
+            React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onCreateBranch(messageIndex);
+                }, className: "p-1 theme-hover rounded-full transition-all", title: "Create branch from here" },
+                React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                    React.createElement("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
+                    React.createElement("circle", { cx: "18", cy: "6", r: "3" }),
+                    React.createElement("circle", { cx: "6", cy: "18", r: "3" }),
+                    React.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" }))))),
+        message.role === "user" && !messageSelectionMode && onResendMessage && (React.createElement("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10" },
+            React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onResendMessage(message);
+                }, className: "p-1 theme-hover rounded-full transition-all", title: "Resend" },
+                React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                    React.createElement("polyline", { points: "23 4 23 10 17 10" }),
+                    React.createElement("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" }))))),
+        React.createElement("div", { className: "flex justify-between items-center text-xs theme-text-muted mb-1 opacity-80" },
+            React.createElement("span", { className: "font-semibold" }, message.role === "user" ? "You" : (message.npc || "Agent")),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                message.role !== "user" && message.model && (React.createElement("span", { className: "truncate", title: message.model }, message.model)),
+                React.createElement("span", null, message.timestamp ? new Date(message.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""))),
+        React.createElement("div", { className: "whitespace-pre-wrap break-words" }, message.content),
+        (message.attachments?.length || message.tool_calls?.length || message.tool_use_history?.length) ? (React.createElement("div", { className: "mt-2 flex flex-wrap gap-2 text-xs theme-text-muted" },
+            message.attachments?.length ? (React.createElement("span", { className: "flex items-center gap-1" },
+                React.createElement(Paperclip, { size: 12 }),
+                " ",
+                message.attachments.length,
+                " attachments")) : null,
+            (message.tool_calls?.length || message.tool_use_history?.length) ? (React.createElement("span", { className: "flex items-center gap-1" },
+                React.createElement(Wrench, { size: 12 }),
+                " ",
+                (message.tool_calls?.length || 0) + (message.tool_use_history?.length || 0),
+                " tool calls")) : null)) : null));
+});

package/dist/ui/chat/components/PredictiveTextOverlay.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Props {
+    predictionSuggestion: string;
+    predictionTargetElement: HTMLElement | null;
+    isPredictiveTextEnabled: boolean;
+    setPredictionSuggestion: (value: string) => void;
+    setPredictionTargetElement: (el: HTMLElement | null) => void;
+}
+export declare const PredictiveTextOverlay: React.FC<Props>;
+export {};

package/dist/ui/chat/components/PredictiveTextOverlay.js

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useRef } from "react";
+export const PredictiveTextOverlay = ({ predictionSuggestion, predictionTargetElement, isPredictiveTextEnabled, setPredictionSuggestion, setPredictionTargetElement, }) => {
+    if (!predictionSuggestion || !predictionTargetElement || !isPredictiveTextEnabled) {
+        return null;
+    }
+    const targetRect = predictionTargetElement.getBoundingClientRect();
+    const overlayRef = useRef(null);
+    const handleAcceptSuggestion = useCallback(() => {
+        if (predictionTargetElement && predictionSuggestion) {
+            const suggestionToInsert = predictionSuggestion.trim();
+            if (predictionTargetElement instanceof HTMLTextAreaElement ||
+                predictionTargetElement instanceof HTMLInputElement) {
+                const start = predictionTargetElement.selectionStart || 0;
+                const end = predictionTargetElement.selectionEnd || 0;
+                const value = predictionTargetElement.value;
+                predictionTargetElement.value = value.substring(0, start) + suggestionToInsert + value.substring(end);
+                predictionTargetElement.selectionStart = predictionTargetElement.selectionEnd = start + suggestionToInsert.length;
+                const event = new Event("input", { bubbles: true });
+                predictionTargetElement.dispatchEvent(event);
+            }
+            else if (predictionTargetElement.isContentEditable) {
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    range.deleteContents();
+                    range.insertNode(document.createTextNode(suggestionToInsert));
+                    range.setStart(range.endContainer, range.endOffset);
+                    range.collapse(true);
+                }
+            }
+            setPredictionSuggestion("");
+            setPredictionTargetElement(null);
+        }
+    }, [predictionSuggestion, predictionTargetElement, setPredictionSuggestion, setPredictionTargetElement]);
+    useEffect(() => {
+        const handleOverlayKeyDown = (e) => {
+            if (e.key === "Tab" && predictionSuggestion) {
+                e.preventDefault();
+                handleAcceptSuggestion();
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                setPredictionSuggestion("");
+                setPredictionTargetElement(null);
+            }
+        };
+        document.addEventListener("keydown", handleOverlayKeyDown);
+        return () => document.removeEventListener("keydown", handleOverlayKeyDown);
+    }, [handleAcceptSuggestion, predictionSuggestion, setPredictionSuggestion, setPredictionTargetElement]);
+    const style = {
+        position: "fixed",
+        left: targetRect.left,
+        top: targetRect.bottom + 5,
+        zIndex: 1000,
+        maxWidth: targetRect.width,
+        backgroundColor: "var(--theme-bg-secondary)",
+        border: "1px solid var(--theme-border)",
+        borderRadius: "4px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+        padding: "8px",
+        color: "var(--theme-text-muted)",
+        fontSize: "0.875rem",
+        whiteSpace: "pre-wrap",
+        cursor: "text",
+    };
+    return (React.createElement("div", { ref: overlayRef, style: style, onClick: handleAcceptSuggestion },
+        predictionSuggestion,
+        predictionSuggestion === "Generating..." && (React.createElement("span", { className: "ml-1 inline-block w-1.5 h-1.5 theme-text-muted rounded-full animate-bounce", style: { animationDelay: "0.15s" } })),
+        React.createElement("div", { className: "text-xs text-blue-400 mt-1" },
+            "Press ",
+            React.createElement("span", { className: "font-bold" }, "Tab"),
+            " to accept, ",
+            React.createElement("span", { className: "font-bold" }, "Esc"),
+            " to dismiss.")));
+};

package/dist/ui/chat/context/ChatContext.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { ChatMessage, ChatSendRequest, Conversation } from "../../../core/chat";
+import type { Attachment } from "../../../core/types";
+import type { AppServices } from "../../../adapters/base";
+import type { ModelInfo } from "../../../core/types";
+type MessageMap = Record<string, ChatMessage[]>;
+interface ChatState {
+    conversations: Conversation[];
+    messages: MessageMap;
+    activeConversationId?: string;
+    loading: boolean;
+    streaming: boolean;
+    error?: string;
+    send: (payload: Omit<ChatSendRequest, "conversationId">) => Promise<void>;
+    setActiveConversation: (id: string) => void;
+    createConversation: (workspacePath?: string) => Promise<void>;
+    deleteConversation: (id: string) => Promise<void>;
+    deleteMessage: (messageId: string) => Promise<void>;
+    refreshMessages: (id: string) => Promise<void>;
+    setWorkspacePath: (path?: string) => void;
+    workspacePath?: string;
+    models?: ModelInfo[];
+    attachments: Attachment[];
+    setAttachments: React.Dispatch<React.SetStateAction<Attachment[]>>;
+}
+export declare const ChatProvider: React.FC<{
+    services: AppServices;
+    workspacePath?: string;
+    children: React.ReactNode;
+    models?: ModelInfo[];
+}>;
+export declare const useChatContext: () => ChatState;
+export {};

package/dist/ui/chat/context/ChatContext.js

@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+const ChatContext = createContext(undefined);
+export const ChatProvider = ({ services, workspacePath, children, models }) => {
+    const [conversations, setConversations] = useState([]);
+    const [messages, setMessages] = useState({});
+    const [activeConversationId, setActiveConversationId] = useState();
+    const [loading, setLoading] = useState(false);
+    const [streaming, setStreaming] = useState(false);
+    const [error, setError] = useState();
+    const [attachments, setAttachments] = useState([]);
+    const [currentWorkspace, setCurrentWorkspace] = useState(workspacePath);
+    useEffect(() => {
+        setCurrentWorkspace(workspacePath);
+    }, [workspacePath]);
+    useEffect(() => {
+        const load = async () => {
+            setLoading(true);
+            try {
+                const convsRaw = await services.chat.listConversations(currentWorkspace);
+                const convs = Array.isArray(convsRaw)
+                    ? convsRaw
+                    : Array.isArray(convsRaw?.conversations)
+                        ? convsRaw.conversations
+                        : [];
+                setConversations(convs);
+                if (!activeConversationId && convs[0]) {
+                    setActiveConversationId(convs[0].id);
+                }
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : "Failed to load conversations");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        load();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentWorkspace]);
+    const refreshMessages = async (id) => {
+        try {
+            const msgs = await services.chat.listMessages(id);
+            setMessages((prev) => ({ ...prev, [id]: msgs }));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load messages");
+        }
+    };
+    useEffect(() => {
+        if (activeConversationId) {
+            refreshMessages(activeConversationId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeConversationId]);
+    const send = async (payload) => {
+        if (!activeConversationId)
+            return;
+        setStreaming(Boolean(payload.stream));
+        try {
+            const result = await services.chat.sendMessage({
+                ...payload,
+                conversationId: activeConversationId,
+            });
+            if (typeof result?.[Symbol.asyncIterator] === "function") {
+                const chunks = [];
+                for await (const chunk of result) {
+                    if (chunk?.delta) {
+                        chunks.push(chunk.delta);
+                        setMessages((prev) => {
+                            const prevMsgs = prev[activeConversationId] || [];
+                            const last = prevMsgs[prevMsgs.length - 1];
+                            const partial = last && last.role === "assistant" && last.metadata?.streaming
+                                ? { ...last, content: (last.content || "") + chunk.delta }
+                                : {
+                                    id: chunk.messageId ?? `stream-${Date.now()}`,
+                                    role: "assistant",
+                                    content: chunk.delta,
+                                    metadata: { streaming: true },
+                                };
+                            return {
+                                ...prev,
+                                [activeConversationId]: [...prevMsgs.filter((m) => m !== last), partial],
+                            };
+                        });
+                    }
+                }
+            }
+            else if (result) {
+                await refreshMessages(activeConversationId);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to send message");
+        }
+        finally {
+            setStreaming(false);
+        }
+    };
+    const createConversation = async (ws) => {
+        const newConv = await services.chat.createConversation(ws ?? currentWorkspace);
+        setConversations((prev) => [newConv, ...prev]);
+        setActiveConversationId(newConv.id);
+    };
+    const deleteConversation = async (id) => {
+        await services.chat.deleteConversation(id);
+        setConversations((prev) => prev.filter((c) => c.id !== id));
+        setMessages((prev) => {
+            const { [id]: _, ...rest } = prev;
+            return rest;
+        });
+        if (activeConversationId === id) {
+            setActiveConversationId(conversations.find((c) => c.id !== id)?.id);
+        }
+    };
+    const deleteMessage = async (messageId) => {
+        if (!activeConversationId)
+            return;
+        await services.chat.deleteMessage(activeConversationId, messageId);
+        await refreshMessages(activeConversationId);
+    };
+    const value = useMemo(() => ({
+        conversations,
+        messages,
+        activeConversationId,
+        loading,
+        streaming,
+        error,
+        send,
+        setActiveConversation: setActiveConversationId,
+        createConversation,
+        deleteConversation,
+        deleteMessage,
+        refreshMessages,
+        workspacePath: currentWorkspace,
+        setWorkspacePath: setCurrentWorkspace,
+        models,
+        attachments,
+        setAttachments,
+    }), [
+        activeConversationId,
+        attachments,
+        conversations,
+        currentWorkspace,
+        error,
+        loading,
+        messages,
+        models,
+        streaming,
+    ]);
+    return React.createElement(ChatContext.Provider, { value: value }, children);
+};
+export const useChatContext = () => {
+    const ctx = useContext(ChatContext);
+    if (!ctx)
+        throw new Error("useChatContext must be used within ChatProvider");
+    return ctx;
+};

package/dist/ui/chat/hooks/useAutoScroll.d.ts

@@ -0,0 +1 @@
+export declare const useAutoScroll: <T extends HTMLElement>(deps?: unknown[]) => import("react").MutableRefObject<T>;

package/dist/ui/chat/hooks/useAutoScroll.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+export const useAutoScroll = (deps = []) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.scrollTop = ref.current.scrollHeight;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return ref;
+};

package/dist/ui/chat/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./components/ChatInterface";
+export * from "./components/ChatView";
+export * from "./components/ChatPane";
+export * from "./components/ConversationList";
+export * from "./components/InputArea";
+export * from "./components/MessageItem";
+export * from "./context/ChatContext";

package/dist/ui/chat/index.js

@@ -0,0 +1,7 @@
+export * from "./components/ChatInterface";
+export * from "./components/ChatView";
+export * from "./components/ChatPane";
+export * from "./components/ConversationList";
+export * from "./components/InputArea";
+export * from "./components/MessageItem";
+export * from "./context/ChatContext";

package/dist/ui/dashboard/ChartWidget.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import 'chartjs-adapter-date-fns';
+export interface ChartConfig {
+    x: string;
+    y: string;
+    type: 'bar' | 'line' | 'scatter';
+    groupBy?: string;
+    colors?: string[];
+}
+interface ChartWidgetProps {
+    data: Record<string, any>[];
+    config: ChartConfig;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+}
+export declare const ChartWidget: React.FC<ChartWidgetProps>;
+export default ChartWidget;

package/dist/ui/dashboard/ChartWidget.js

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { Line, Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler, TimeScale, TimeSeriesScale } from 'chart.js';
+import 'chartjs-adapter-date-fns';
+// Register Chart.js components
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler, TimeScale, TimeSeriesScale);
+const defaultColors = [
+    'rgba(59, 130, 246, 0.8)', // blue
+    'rgba(239, 68, 68, 0.8)', // red
+    'rgba(34, 197, 94, 0.8)', // green
+    'rgba(245, 158, 11, 0.8)', // amber
+    'rgba(139, 92, 246, 0.8)', // purple
+    'rgba(236, 72, 153, 0.8)', // pink
+    'rgba(20, 184, 166, 0.8)', // teal
+    'rgba(249, 115, 22, 0.8)', // orange
+];
+export const ChartWidget = ({ data, config, height = 300, showLegend = true, showGrid = true }) => {
+    const chartData = useMemo(() => {
+        if (!data || data.length === 0)
+            return null;
+        // Extract x-axis labels
+        const xKey = config.x.includes(' AS ')
+            ? config.x.split(' AS ')[1].trim()
+            : config.x;
+        const labels = data.map(row => row[xKey] ?? row[config.x] ?? '');
+        // Parse y-axis (can be comma-separated for multiple series)
+        const yKeys = config.y.split(',').map(y => {
+            const trimmed = y.trim();
+            return trimmed.includes(' AS ')
+                ? trimmed.split(' AS ')[1].trim()
+                : trimmed;
+        });
+        const colors = config.colors || defaultColors;
+        const datasets = yKeys.map((yKey, index) => ({
+            label: yKey,
+            data: data.map(row => {
+                const value = row[yKey] ?? row[config.y.split(',')[index]?.trim()];
+                return typeof value === 'number' ? value : parseFloat(value) || 0;
+            }),
+            backgroundColor: colors[index % colors.length],
+            borderColor: colors[index % colors.length].replace('0.8', '1'),
+            borderWidth: config.type === 'line' ? 2 : 1,
+            fill: config.type === 'line' ? false : undefined,
+            tension: config.type === 'line' ? 0.3 : undefined,
+        }));
+        return { labels, datasets };
+    }, [data, config]);
+    const options = useMemo(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: showLegend && chartData && chartData.datasets.length > 1,
+                position: 'top',
+                labels: {
+                    color: '#9ca3af',
+                    font: { size: 11 }
+                }
+            },
+            tooltip: {
+                backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                titleColor: '#f3f4f6',
+                bodyColor: '#d1d5db',
+                borderColor: '#374151',
+                borderWidth: 1,
+            }
+        },
+        scales: {
+            x: {
+                grid: {
+                    display: showGrid,
+                    color: 'rgba(75, 85, 99, 0.3)'
+                },
+                ticks: {
+                    color: '#9ca3af',
+                    font: { size: 10 }
+                }
+            },
+            y: {
+                grid: {
+                    display: showGrid,
+                    color: 'rgba(75, 85, 99, 0.3)'
+                },
+                ticks: {
+                    color: '#9ca3af',
+                    font: { size: 10 }
+                }
+            }
+        }
+    }), [showLegend, showGrid, chartData]);
+    if (!chartData) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-full text-gray-500" }, "No data available"));
+    }
+    const ChartComponent = config.type === 'line' ? Line : Bar;
+    return (React.createElement("div", { style: { height } },
+        React.createElement(ChartComponent, { data: chartData, options: options })));
+};
+export default ChartWidget;

package/dist/ui/dashboard/QueryWidget.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { DatabaseClient } from '../../core/database';
+export interface QueryWidgetConfig {
+    id: string;
+    title: string;
+    type: 'stat' | 'stat_list' | 'table' | 'chart' | 'line_chart' | 'bar_chart';
+    query: string;
+    iconName?: string;
+    iconColor?: string;
+    span?: number;
+    chartConfig?: {
+        x: string;
+        y: string;
+        type?: 'line' | 'bar';
+        groupBy?: string;
+    };
+    toggleOptions?: Array<{
+        label: string;
+        modifier: string;
+    }>;
+    dataKey?: string;
+}
+export interface QueryWidgetProps {
+    config: QueryWidgetConfig;
+    client: DatabaseClient;
+    icon?: React.ReactNode;
+    onContextMenu?: (e: React.MouseEvent, widgetId: string) => void;
+}
+export declare const QueryWidget: React.FC<QueryWidgetProps>;

package/dist/ui/dashboard/QueryWidget.js

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import { Loader } from 'lucide-react';
+import { normalizeQueryResult } from '../../core/database';
+import { Chart } from '../primitives/Chart';
+import { DataTable } from '../primitives/DataTable';
+export const QueryWidget = ({ config, client, icon, onContextMenu }) => {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [activeToggle, setActiveToggle] = useState(config.toggleOptions?.[0] || null);
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                let finalQuery = config.query;
+                // Apply toggle modifier if present
+                if (activeToggle?.modifier) {
+                    const baseQuery = config.query.replace(/;$/, '');
+                    // Simple approach: append WHERE clause or modify existing
+                    if (baseQuery.toLowerCase().includes('where')) {
+                        finalQuery = `${baseQuery} AND (${activeToggle.modifier.replace(/^\s*WHERE\s*/i, '')})`;
+                    }
+                    else {
+                        finalQuery = `${baseQuery} ${activeToggle.modifier}`;
+                    }
+                }
+                const response = await client.executeSQL(finalQuery);
+                if (response.error)
+                    throw new Error(response.error);
+                setData(normalizeQueryResult(response));
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Query failed');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [config.query, client, activeToggle]);
+    const renderContent = () => {
+        if (loading) {
+            return (React.createElement("div", { className: "flex items-center justify-center h-full" },
+                React.createElement(Loader, { className: "animate-spin text-blue-400", size: 24 })));
+        }
+        if (error) {
+            return React.createElement("div", { className: "text-red-400 p-2 text-xs overflow-auto" }, error);
+        }
+        if (!data || data.length === 0) {
+            return React.createElement("div", { className: "theme-text-secondary text-sm" }, "No data");
+        }
+        switch (config.type) {
+            case 'stat': {
+                const value = config.dataKey
+                    ? data[0]?.[config.dataKey]
+                    : Object.values(data[0] || {})[0];
+                return React.createElement("p", { className: "text-3xl font-bold theme-text-primary" }, String(value ?? 'N/A'));
+            }
+            case 'stat_list': {
+                const listData = config.dataKey ? data[config.dataKey] : data;
+                if (!Array.isArray(listData)) {
+                    return React.createElement("div", { className: "text-red-400 text-xs" }, "Data is not an array");
+                }
+                return (React.createElement("ul", { className: "space-y-1 text-sm theme-text-secondary" }, listData.map((item, i) => {
+                    const values = Object.values(item);
+                    return (React.createElement("li", { key: i, className: "flex justify-between" },
+                        React.createElement("span", null, String(values[0])),
+                        React.createElement("span", { className: "font-bold" }, String(values[1] ?? ''))));
+                })));
+            }
+            case 'table': {
+                const columns = Object.keys(data[0] || {}).map(key => ({
+                    key,
+                    header: key
+                }));
+                return React.createElement(DataTable, { data: data, columns: columns });
+            }
+            case 'chart':
+            case 'line_chart':
+            case 'bar_chart': {
+                if (!config.chartConfig) {
+                    return React.createElement("div", { className: "theme-text-secondary text-sm" }, "Chart not configured");
+                }
+                const chartType = config.chartConfig.type || (config.type.includes('line') ? 'line' : 'bar');
+                const dataKeys = Object.keys(data[0] || {});
+                // Find x-axis key (handle "AS" aliases)
+                const xKey = dataKeys.find(k => k.toLowerCase() === config.chartConfig.x.toLowerCase().split(' as ').pop()?.trim()) || dataKeys[0];
+                // Parse y-axis expressions (comma separated)
+                const yExpressions = config.chartConfig.y.split(',').map(s => s.trim());
+                const datasets = yExpressions.map((yExpr, index) => {
+                    const yKey = dataKeys.find(k => k.toLowerCase() === yExpr.toLowerCase().split(' as ').pop()?.trim());
+                    const colors = ['rgba(139, 92, 246, 0.8)', 'rgba(59, 130, 246, 0.8)', 'rgba(250, 204, 21, 0.8)', 'rgba(239, 68, 68, 0.8)', 'rgba(34, 197, 94, 0.8)'];
+                    return {
+                        label: yKey || yExpr,
+                        data: data.map(d => parseFloat(String(d[yKey || ''] ?? 0))),
+                        color: colors[index % colors.length]
+                    };
+                });
+                const labels = data.map(d => String(d[xKey] ?? ''));
+                return (React.createElement("div", { className: "h-full w-full" },
+                    React.createElement(Chart, { type: chartType, labels: labels, datasets: datasets, height: 200 })));
+            }
+            default:
+                return null;
+        }
+    };
+    return (React.createElement("div", { className: "theme-bg-tertiary p-4 rounded-lg flex flex-col h-full", style: { gridColumn: `span ${config.span || 1}` }, onContextMenu: (e) => onContextMenu?.(e, config.id) },
+        React.createElement("div", { className: "flex justify-between items-start flex-shrink-0" },
+            React.createElement("div", { className: "flex items-center gap-3 mb-2 flex-1" },
+                icon && React.createElement("span", { className: config.iconColor || 'text-gray-400' }, icon),
+                React.createElement("h4", { className: "font-semibold theme-text-secondary truncate" }, config.title)),
+            config.toggleOptions && config.toggleOptions.length > 0 && (React.createElement("div", { className: "flex items-center gap-1" }, config.toggleOptions.map(opt => (React.createElement("button", { key: opt.label, onClick: () => setActiveToggle(opt), className: `px-2 py-0.5 text-xs rounded ${activeToggle?.label === opt.label
+                    ? 'theme-button-primary'
+                    : 'theme-button theme-hover'}` }, opt.label)))))),
+        React.createElement("div", { className: "flex-1 mt-1 overflow-hidden" }, renderContent())));
+};

package/dist/ui/dashboard/TableWidget.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TableWidgetProps {
+    data: Record<string, any>[];
+    columns?: string[];
+    maxHeight?: number;
+    sortable?: boolean;
+    searchable?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    onRowClick?: (row: Record<string, any>, index: number) => void;
+    onExport?: (data: Record<string, any>[]) => void;
+}
+export declare const TableWidget: React.FC<TableWidgetProps>;
+export default TableWidget;