@phuetz/code-buddy 0.1.0

package/dist/ui/dashboard/components/metric-card.js

@@ -0,0 +1,65 @@
+/**
+ * Metric Card Component
+ *
+ * Displays a single metric with optional trend indicator,
+ * sparkline chart, and status coloring.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../../context/theme-context.js';
+/**
+ * Metric Card - Displays a key metric with styling
+ */
+export function MetricCard({ label, value, unit, detail, status = 'neutral', trend, icon, width, bordered = false, }) {
+    const { colors } = useTheme();
+    // Determine color based on status
+    const statusColors = {
+        success: colors.success,
+        warning: colors.warning,
+        error: colors.error,
+        neutral: colors.text,
+    };
+    const valueColor = statusColors[status] || colors.text;
+    // Trend indicators
+    const trendIcons = {
+        up: { icon: '↑', color: colors.success },
+        down: { icon: '↓', color: colors.error },
+        stable: { icon: '→', color: colors.textMuted },
+    };
+    const trendDisplay = trend ? trendIcons[trend] : null;
+    const content = (React.createElement(Box, { flexDirection: "column", width: width },
+        React.createElement(Box, null,
+            icon && React.createElement(Text, null,
+                icon,
+                " "),
+            React.createElement(Text, { color: colors.textMuted }, label)),
+        React.createElement(Box, null,
+            React.createElement(Text, { bold: true, color: valueColor }, value),
+            unit && React.createElement(Text, { color: colors.textMuted },
+                " ",
+                unit),
+            trendDisplay && (React.createElement(Text, { color: trendDisplay.color },
+                " ",
+                trendDisplay.icon))),
+        detail && (React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true }, detail)))));
+    if (bordered) {
+        return (React.createElement(Box, { borderStyle: "single", borderColor: colors.border, paddingX: 1, width: width }, content));
+    }
+    return content;
+}
+/**
+ * Metric Row - Horizontal layout of metrics
+ */
+export function MetricRow({ children, gap = 2, }) {
+    return (React.createElement(Box, { flexDirection: "row", gap: gap }, children));
+}
+/**
+ * Metric Grid - Grid layout of metric cards
+ */
+export function MetricGrid({ children, columns = 2, }) {
+    const { colors } = useTheme();
+    return (React.createElement(Box, { flexDirection: "row", flexWrap: "wrap", borderStyle: "single", borderColor: colors.border, padding: 1 }, React.Children.map(children, (child, index) => (React.createElement(Box, { key: index, width: `${100 / columns}%`, paddingRight: 1 }, child)))));
+}
+export default MetricCard;
+//# sourceMappingURL=metric-card.js.map

package/dist/ui/dashboard/components/metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-card.js","sourceRoot":"","sources":["../../../../src/ui/dashboard/components/metric-card.tsx"],"names":[],"mappings":"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"}

package/dist/ui/dashboard/components/mini-chart.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Mini Chart Components
+ *
+ * ASCII-based charts for terminal display:
+ * - Sparkline: Compact inline trend visualization
+ * - BarChart: Horizontal bar chart
+ * - ProgressRing: Circular progress (ASCII art)
+ */
+import React from 'react';
+export interface SparklineProps {
+    /** Data points to visualize */
+    data: number[];
+    /** Width in characters */
+    width?: number;
+    /** Color of the sparkline */
+    color?: string;
+    /** Show min/max labels */
+    showLabels?: boolean;
+}
+/**
+ * Sparkline - Compact inline trend visualization
+ */
+export declare function Sparkline({ data, width, color, showLabels, }: SparklineProps): React.JSX.Element;
+export interface BarChartProps {
+    /** Data items with label and value */
+    data: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    /** Maximum width for bars */
+    maxBarWidth?: number;
+    /** Show values */
+    showValues?: boolean;
+    /** Label width */
+    labelWidth?: number;
+}
+/**
+ * Bar Chart - Horizontal bar chart
+ */
+export declare function BarChart({ data, maxBarWidth, showValues, labelWidth, }: BarChartProps): React.JSX.Element;
+export interface ProgressRingProps {
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Size: small, medium, large */
+    size?: 'small' | 'medium' | 'large';
+    /** Color based on progress */
+    autoColor?: boolean;
+    /** Custom color */
+    color?: string;
+    /** Show percentage label */
+    showLabel?: boolean;
+}
+/**
+ * Progress Ring - ASCII circular progress
+ */
+export declare function ProgressRing({ progress, size, autoColor, color, showLabel, }: ProgressRingProps): React.JSX.Element;
+export interface HistogramProps {
+    /** Data points */
+    data: number[];
+    /** Number of buckets */
+    buckets?: number;
+    /** Height in lines */
+    height?: number;
+    /** Show bucket labels */
+    showLabels?: boolean;
+}
+/**
+ * Histogram - Vertical bar histogram
+ */
+export declare function Histogram({ data, buckets, height, showLabels, }: HistogramProps): React.JSX.Element;
+export default Sparkline;

package/dist/ui/dashboard/components/mini-chart.js

@@ -0,0 +1,184 @@
+/**
+ * Mini Chart Components
+ *
+ * ASCII-based charts for terminal display:
+ * - Sparkline: Compact inline trend visualization
+ * - BarChart: Horizontal bar chart
+ * - ProgressRing: Circular progress (ASCII art)
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../../context/theme-context.js';
+// Braille characters for sparklines (8 levels)
+const SPARK_CHARS = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+/**
+ * Sparkline - Compact inline trend visualization
+ */
+export function Sparkline({ data, width = 20, color, showLabels = false, }) {
+    const { colors } = useTheme();
+    const chartColor = color || colors.primary;
+    if (data.length === 0) {
+        return React.createElement(Text, { dimColor: true }, '─'.repeat(width));
+    }
+    // Normalize data to fit width
+    const normalizedData = normalizeDataToWidth(data, width);
+    // Find min/max for scaling
+    const min = Math.min(...normalizedData);
+    const max = Math.max(...normalizedData);
+    const range = max - min || 1;
+    // Generate sparkline characters
+    const chars = normalizedData.map((value) => {
+        const normalized = (value - min) / range;
+        const index = Math.min(SPARK_CHARS.length - 1, Math.floor(normalized * (SPARK_CHARS.length - 1)));
+        return SPARK_CHARS[index];
+    });
+    return (React.createElement(Box, null,
+        showLabels && (React.createElement(Text, { dimColor: true },
+            formatCompact(min),
+            " ")),
+        React.createElement(Text, { color: chartColor }, chars.join('')),
+        showLabels && (React.createElement(Text, { dimColor: true },
+            " ",
+            formatCompact(max)))));
+}
+/**
+ * Bar Chart - Horizontal bar chart
+ */
+export function BarChart({ data, maxBarWidth = 20, showValues = true, labelWidth = 15, }) {
+    const { colors } = useTheme();
+    if (data.length === 0) {
+        return React.createElement(Text, { dimColor: true }, "No data");
+    }
+    const maxValue = Math.max(...data.map((d) => d.value), 1);
+    return (React.createElement(Box, { flexDirection: "column" }, data.map((item, index) => {
+        const barWidth = Math.round((item.value / maxValue) * maxBarWidth);
+        const barColor = item.color || colors.primary;
+        return (React.createElement(Box, { key: index },
+            React.createElement(Box, { width: labelWidth },
+                React.createElement(Text, { color: colors.textMuted }, item.label.slice(0, labelWidth - 1).padEnd(labelWidth - 1))),
+            React.createElement(Text, { color: barColor }, '█'.repeat(barWidth)),
+            React.createElement(Text, { dimColor: true }, '░'.repeat(maxBarWidth - barWidth)),
+            showValues && (React.createElement(Text, { dimColor: true },
+                " ",
+                formatCompact(item.value)))));
+    })));
+}
+/**
+ * Progress Ring - ASCII circular progress
+ */
+export function ProgressRing({ progress, size = 'medium', autoColor = true, color, showLabel = true, }) {
+    const { colors } = useTheme();
+    // Clamp progress
+    const p = Math.max(0, Math.min(100, progress));
+    // Determine color
+    let ringColor = color || colors.primary;
+    if (autoColor && !color) {
+        if (p < 50)
+            ringColor = colors.success;
+        else if (p < 80)
+            ringColor = colors.warning;
+        else
+            ringColor = colors.error;
+    }
+    // Size-based rendering
+    if (size === 'small') {
+        // Single character progress
+        const chars = ['○', '◔', '◑', '◕', '●'];
+        const index = Math.min(chars.length - 1, Math.floor(p / 25));
+        return (React.createElement(Box, null,
+            React.createElement(Text, { color: ringColor }, chars[index]),
+            showLabel && React.createElement(Text, { dimColor: true },
+                " ",
+                p,
+                "%")));
+    }
+    // Medium/large: bar-based
+    const width = size === 'large' ? 20 : 10;
+    const filled = Math.round((p / 100) * width);
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: ringColor }, '█'.repeat(filled)),
+        React.createElement(Text, { dimColor: true }, '░'.repeat(width - filled)),
+        showLabel && React.createElement(Text, { dimColor: true },
+            " ",
+            p,
+            "%")));
+}
+/**
+ * Histogram - Vertical bar histogram
+ */
+export function Histogram({ data, buckets = 10, height = 5, showLabels = true, }) {
+    const { colors } = useTheme();
+    if (data.length === 0) {
+        return React.createElement(Text, { dimColor: true }, "No data");
+    }
+    // Calculate bucket ranges
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const bucketSize = range / buckets;
+    // Count values in each bucket
+    const counts = new Array(buckets).fill(0);
+    for (const value of data) {
+        const bucketIndex = Math.min(buckets - 1, Math.floor((value - min) / bucketSize));
+        counts[bucketIndex]++;
+    }
+    const maxCount = Math.max(...counts, 1);
+    // Build histogram rows (top to bottom)
+    const rows = [];
+    for (let row = height; row > 0; row--) {
+        const threshold = (row / height) * maxCount;
+        let line = '';
+        for (let b = 0; b < buckets; b++) {
+            line += counts[b] >= threshold ? '█' : ' ';
+        }
+        rows.push(line);
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        rows.map((row, index) => (React.createElement(Text, { key: index, color: colors.primary }, row))),
+        showLabels && (React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true },
+                formatCompact(min),
+                '─'.repeat(buckets - 6),
+                formatCompact(max))))));
+}
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Normalize data array to a specific width by sampling/averaging
+ */
+function normalizeDataToWidth(data, width) {
+    if (data.length <= width) {
+        return data;
+    }
+    const result = [];
+    const ratio = data.length / width;
+    for (let i = 0; i < width; i++) {
+        const start = Math.floor(i * ratio);
+        const end = Math.floor((i + 1) * ratio);
+        const slice = data.slice(start, end);
+        const avg = slice.reduce((a, b) => a + b, 0) / slice.length;
+        result.push(avg);
+    }
+    return result;
+}
+/**
+ * Format number in compact form (1K, 1.5M, etc.)
+ */
+function formatCompact(value) {
+    if (value >= 1_000_000) {
+        return `${(value / 1_000_000).toFixed(1)}M`;
+    }
+    if (value >= 1_000) {
+        return `${(value / 1_000).toFixed(1)}K`;
+    }
+    if (value >= 100) {
+        return Math.round(value).toString();
+    }
+    if (value >= 10) {
+        return value.toFixed(1);
+    }
+    return value.toFixed(2);
+}
+export default Sparkline;
+//# sourceMappingURL=mini-chart.js.map

package/dist/ui/dashboard/components/mini-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mini-chart.js","sourceRoot":"","sources":["../../../../src/ui/dashboard/components/mini-chart.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+/**
+ * Observability Dashboard
+ *
+ * Interactive terminal dashboard for monitoring:
+ * - Agent costs and budget
+ * - Latency and performance
+ * - Tool usage statistics
+ *
+ * Keyboard navigation:
+ * - Tab/1-4: Switch views
+ * - q: Quit dashboard
+ * - r: Refresh data
+ */
+import React from 'react';
+export type DashboardTab = 'overview' | 'costs' | 'latency' | 'tools';
+export interface ObservabilityDashboardProps {
+    /** Initial tab to display */
+    initialTab?: DashboardTab;
+    /** Budget limit for cost tracking */
+    budget?: number;
+    /** Refresh interval in ms */
+    refreshInterval?: number;
+    /** Callback when dashboard is closed */
+    onClose?: () => void;
+}
+/**
+ * Observability Dashboard Component
+ *
+ * Full-screen interactive dashboard for monitoring agent performance.
+ */
+export declare function ObservabilityDashboard(props: ObservabilityDashboardProps): React.JSX.Element;
+/**
+ * Standalone Dashboard (for direct rendering)
+ */
+export declare function StandaloneDashboard(props: ObservabilityDashboardProps): React.JSX.Element;
+export default ObservabilityDashboard;

package/dist/ui/dashboard/dashboard.js

@@ -0,0 +1,125 @@
+/**
+ * Observability Dashboard
+ *
+ * Interactive terminal dashboard for monitoring:
+ * - Agent costs and budget
+ * - Latency and performance
+ * - Tool usage statistics
+ *
+ * Keyboard navigation:
+ * - Tab/1-4: Switch views
+ * - q: Quit dashboard
+ * - r: Refresh data
+ */
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { useTheme, ThemeProvider } from '../context/theme-context.js';
+import { useDashboardData } from './hooks/use-dashboard-data.js';
+import { OverviewView } from './views/overview-view.js';
+import { CostsView } from './views/costs-view.js';
+import { LatencyView } from './views/latency-view.js';
+import { ToolsView } from './views/tools-view.js';
+const TABS = [
+    { id: 'overview', label: 'Overview', key: '1', icon: '📊' },
+    { id: 'costs', label: 'Costs', key: '2', icon: '💰' },
+    { id: 'latency', label: 'Latency', key: '3', icon: '⚡' },
+    { id: 'tools', label: 'Tools', key: '4', icon: '🔧' },
+];
+/**
+ * Dashboard Header with tab navigation
+ */
+function DashboardHeader({ activeTab, }) {
+    const { colors } = useTheme();
+    return (React.createElement(Box, { borderStyle: "double", borderColor: colors.primary, paddingX: 1, flexDirection: "column" },
+        React.createElement(Box, { justifyContent: "space-between" },
+            React.createElement(Text, { bold: true, color: colors.primary }, "\u2554\u2550\u2550\u2550 GROK CLI OBSERVABILITY DASHBOARD \u2550\u2550\u2550\u2557"),
+            React.createElement(Text, { dimColor: true }, "Press [q] to quit \u2022 [r] to refresh")),
+        React.createElement(Box, { marginTop: 1 }, TABS.map((tab) => {
+            const isActive = tab.id === activeTab;
+            return (React.createElement(Box, { key: tab.id, marginRight: 2 },
+                React.createElement(Text, { color: isActive ? colors.primary : colors.textMuted, bold: isActive, inverse: isActive }, ` [${tab.key}] ${tab.icon} ${tab.label} `)));
+        }))));
+}
+/**
+ * Dashboard Footer with help text
+ */
+function DashboardFooter({ lastUpdate }) {
+    const { colors } = useTheme();
+    return (React.createElement(Box, { borderStyle: "single", borderColor: colors.border, paddingX: 1, justifyContent: "space-between" },
+        React.createElement(Text, { dimColor: true }, "Navigation: [1-4] Switch tabs \u2022 [\u2191\u2193] Scroll \u2022 [q] Quit"),
+        React.createElement(Text, { dimColor: true },
+            "Last update: ",
+            new Date(lastUpdate).toLocaleTimeString())));
+}
+/**
+ * Main Dashboard Content
+ */
+function DashboardContent({ initialTab = 'overview', budget = 10, refreshInterval = 1000, onClose, }) {
+    const { colors } = useTheme();
+    const { exit } = useApp();
+    const [activeTab, setActiveTab] = useState(initialTab);
+    // Get real-time data
+    const data = useDashboardData({ refreshInterval });
+    // Handle keyboard input
+    useInput(useCallback((input, key) => {
+        // Tab switching
+        if (input === '1')
+            setActiveTab('overview');
+        else if (input === '2')
+            setActiveTab('costs');
+        else if (input === '3')
+            setActiveTab('latency');
+        else if (input === '4')
+            setActiveTab('tools');
+        else if (key.tab) {
+            // Cycle through tabs
+            const currentIndex = TABS.findIndex((t) => t.id === activeTab);
+            const nextIndex = (currentIndex + 1) % TABS.length;
+            setActiveTab(TABS[nextIndex].id);
+        }
+        // Quit
+        else if (input === 'q' || input === 'Q') {
+            if (onClose)
+                onClose();
+            exit();
+        }
+    }, [activeTab, exit, onClose]));
+    // Render active view
+    const renderView = () => {
+        switch (activeTab) {
+            case 'overview':
+                return React.createElement(OverviewView, { data: data });
+            case 'costs':
+                return React.createElement(CostsView, { data: data, budget: budget });
+            case 'latency':
+                return React.createElement(LatencyView, { data: data });
+            case 'tools':
+                return React.createElement(ToolsView, { data: data });
+            default:
+                return React.createElement(OverviewView, { data: data });
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
+        React.createElement(DashboardHeader, { activeTab: activeTab }),
+        !data.isConnected && (React.createElement(Box, { paddingX: 1, marginY: 1 },
+            React.createElement(Text, { color: colors.warning }, "\u26A0 Connecting to metrics collector..."))),
+        React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: colors.border, minHeight: 20 }, renderView()),
+        React.createElement(DashboardFooter, { lastUpdate: data.lastUpdate })));
+}
+/**
+ * Observability Dashboard Component
+ *
+ * Full-screen interactive dashboard for monitoring agent performance.
+ */
+export function ObservabilityDashboard(props) {
+    return (React.createElement(ThemeProvider, null,
+        React.createElement(DashboardContent, { ...props })));
+}
+/**
+ * Standalone Dashboard (for direct rendering)
+ */
+export function StandaloneDashboard(props) {
+    return React.createElement(ObservabilityDashboard, { ...props });
+}
+export default ObservabilityDashboard;
+//# sourceMappingURL=dashboard.js.map

package/dist/ui/dashboard/dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../../../src/ui/dashboard/dashboard.tsx"],"names":[],"mappings":"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"}

package/dist/ui/dashboard/hooks/use-dashboard-data.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Dashboard Data Hook
+ *
+ * Provides real-time data from MetricsCollector for the dashboard.
+ * Updates periodically and exposes metrics, tools, providers, and errors.
+ */
+import { type DashboardState, type ToolMetrics, type ProviderMetrics, type ErrorRecord, type MetricPoint } from '../../../observability/dashboard.js';
+export interface LatencyStats {
+    avgDuration: number;
+    p95: number;
+    metTarget: number;
+    totalOperations: number;
+    avgFirstToken: number;
+    byOperation: Map<string, {
+        avg: number;
+        count: number;
+    }>;
+}
+export interface DashboardData {
+    state: DashboardState;
+    tools: ToolMetrics[];
+    providers: ProviderMetrics[];
+    errors: ErrorRecord[];
+    latency: LatencyStats;
+    tokenHistory: MetricPoint[];
+    costHistory: MetricPoint[];
+    responseTimeHistory: MetricPoint[];
+    isConnected: boolean;
+    lastUpdate: number;
+}
+export interface UseDashboardDataOptions {
+    refreshInterval?: number;
+    historyWindow?: number;
+}
+/**
+ * Hook for accessing real-time dashboard data
+ */
+export declare function useDashboardData(options?: UseDashboardDataOptions): DashboardData;
+export default useDashboardData;

package/dist/ui/dashboard/hooks/use-dashboard-data.js

@@ -0,0 +1,117 @@
+/**
+ * Dashboard Data Hook
+ *
+ * Provides real-time data from MetricsCollector for the dashboard.
+ * Updates periodically and exposes metrics, tools, providers, and errors.
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getMetricsCollector, } from '../../../observability/dashboard.js';
+import { getLatencyOptimizer, getStreamingOptimizer, } from '../../../optimization/latency-optimizer.js';
+/**
+ * Hook for accessing real-time dashboard data
+ */
+export function useDashboardData(options = {}) {
+    const { refreshInterval = 1000, historyWindow = 5 * 60 * 1000 } = options;
+    const [data, setData] = useState(() => getInitialData());
+    const collectorRef = useRef(getMetricsCollector());
+    const fetchData = useCallback(() => {
+        const collector = collectorRef.current;
+        const latencyOptimizer = getLatencyOptimizer();
+        const streamingOptimizer = getStreamingOptimizer();
+        const since = Date.now() - historyWindow;
+        // Get latency stats by operation type
+        const opStats = latencyOptimizer.getStats();
+        const streamStats = streamingOptimizer.getStats();
+        // Calculate per-operation latency from history
+        const byOperation = new Map();
+        const responseHistory = collector.getMetricHistory('response_time', since);
+        for (const point of responseHistory) {
+            const op = point.labels?.provider || 'unknown';
+            const existing = byOperation.get(op) || { avg: 0, count: 0 };
+            existing.avg = (existing.avg * existing.count + point.value) / (existing.count + 1);
+            existing.count++;
+            byOperation.set(op, existing);
+        }
+        setData({
+            state: collector.getDashboardState(),
+            tools: collector.getToolMetrics(),
+            providers: collector.getProviderMetrics(),
+            errors: collector.getRecentErrors(10),
+            latency: {
+                avgDuration: opStats.avgDuration,
+                p95: opStats.p95,
+                metTarget: opStats.totalOperations > 0
+                    ? Math.round((opStats.metTarget / opStats.totalOperations) * 100)
+                    : 0,
+                totalOperations: opStats.totalOperations,
+                avgFirstToken: streamStats.avgFirstToken,
+                byOperation,
+            },
+            tokenHistory: collector.getMetricHistory('tokens_total', since),
+            costHistory: collector.getMetricHistory('cost_total', since),
+            responseTimeHistory: responseHistory,
+            isConnected: true,
+            lastUpdate: Date.now(),
+        });
+    }, [historyWindow]);
+    // Set up periodic refresh
+    useEffect(() => {
+        fetchData(); // Initial fetch
+        const interval = setInterval(fetchData, refreshInterval);
+        // Listen for real-time events
+        const collector = collectorRef.current;
+        const handleMetric = () => fetchData();
+        const handleTool = () => fetchData();
+        const handleAPI = () => fetchData();
+        const handleError = () => fetchData();
+        collector.on('metric', handleMetric);
+        collector.on('tool:executed', handleTool);
+        collector.on('api:request', handleAPI);
+        collector.on('error', handleError);
+        return () => {
+            clearInterval(interval);
+            collector.off('metric', handleMetric);
+            collector.off('tool:executed', handleTool);
+            collector.off('api:request', handleAPI);
+            collector.off('error', handleError);
+        };
+    }, [fetchData, refreshInterval]);
+    return data;
+}
+/**
+ * Get initial empty data
+ */
+function getInitialData() {
+    return {
+        state: {
+            uptime: 0,
+            activeSession: false,
+            totalSessions: 0,
+            totalTokens: 0,
+            totalCost: 0,
+            totalToolCalls: 0,
+            avgResponseTime: 0,
+            errorRate: 0,
+            tokensPerMinute: 0,
+            costPerHour: 0,
+        },
+        tools: [],
+        providers: [],
+        errors: [],
+        latency: {
+            avgDuration: 0,
+            p95: 0,
+            metTarget: 0,
+            totalOperations: 0,
+            avgFirstToken: 0,
+            byOperation: new Map(),
+        },
+        tokenHistory: [],
+        costHistory: [],
+        responseTimeHistory: [],
+        isConnected: false,
+        lastUpdate: 0,
+    };
+}
+export default useDashboardData;
+//# sourceMappingURL=use-dashboard-data.js.map