'use client' import { Button } from '@/components/ui/button' export interface DbStats { tasks: { total: number; byStatus: Record } agents: { total: number; byStatus: Record } audit: { day: number; week: number; loginFailures: number } activities: { day: number } notifications: { unread: number } pipelines: { active: number; recentDay: number } backup: { name: string; size: number; age_hours: number } | null dbSizeBytes: number webhookCount: number } export interface ClaudeStats { total_sessions: number active_sessions: number total_input_tokens: number total_output_tokens: number total_estimated_cost: number unique_projects: number } export type LogLike = { id: string timestamp: number level: 'info' | 'warn' | 'error' | 'debug' source: string message: string } export interface DashboardData { isLocal: boolean systemStats: any dbStats: DbStats | null claudeStats: ClaudeStats | null githubStats: any loading: { system: boolean; sessions: boolean; claude: boolean; github: boolean } sessions: any[] logs: any[] agents: any[] tasks: any[] connection: { isConnected: boolean; url: string; reconnectAttempts: number; latency?: number; sseConnected?: boolean } subscription: { type: string; provider?: string; rateLimitTier?: string } | null navigateToPanel: (tab: string) => void openSession: (session: any) => void // Pre-computed values memPct: number | null diskPct: number systemLoad: number activeSessions: number errorCount: number onlineAgents: number claudeActive: number codexActive: number hermesActive: number claudeLocalSessions: any[] codexLocalSessions: any[] hermesLocalSessions: any[] runningTasks: number inboxCount: number assignedCount: number reviewCount: number doneCount: number backlogCount: number mergedRecentLogs: LogLike[] recentErrorLogs: number // Health statuses localOsStatus: { value: string; status: 'good' | 'warn' | 'bad' } claudeHealth: { value: string; status: 'good' | 'warn' | 'bad' } codexHealth: { value: string; status: 'good' | 'warn' | 'bad' } hermesHealth: { value: string; status: 'good' | 'warn' | 'bad' } mcHealth: { value: string; status: 'good' | 'warn' | 'bad' } gatewayHealthStatus: 'good' | 'bad' // Loading states isSystemLoading: boolean isSessionsLoading: boolean isClaudeLoading: boolean isGithubLoading: boolean // Hermes enrichment hermesCronJobCount: number // Subscription display subscriptionLabel: string | null subscriptionPrice: number | null } // --- Sub-components --- export function MetricCard({ label, value, total, subtitle, icon, color }: { label: string value: number | string total?: number subtitle?: string icon: React.ReactNode color: 'blue' | 'green' | 'purple' | 'red' }) { const colorMap = { blue: 'bg-blue-500/10 text-blue-400 border-blue-500/20', green: 'bg-green-500/10 text-green-400 border-green-500/20', purple: 'bg-purple-500/10 text-purple-400 border-purple-500/20', red: 'bg-red-500/10 text-red-400 border-red-500/20', } return (

{label}

{icon}

{value} {total != null && / {total}}

{subtitle &&

{subtitle}

}

) } export function SignalPill({ label, value, tone }: { label: string value: string tone: 'success' | 'warning' | 'info' }) { const toneClass = tone === 'success' ? 'bg-green-500/15 border-green-500/30 text-green-300' : tone === 'warning' ? 'bg-amber-500/15 border-amber-500/30 text-amber-300' : 'bg-blue-500/15 border-blue-500/30 text-blue-300' return (

{label}

{value}

) } export function HealthRow({ label, value, status, bar }: { label: string value: string status: 'good' | 'warn' | 'bad' bar?: number }) { const statusColor = status === 'good' ? 'text-green-400' : status === 'warn' ? 'text-amber-400' : 'text-red-400' return (

{label} {value}

{bar != null && (

90 ? 'bg-red-500' : bar > 70 ? 'bg-amber-500' : 'bg-green-500'}`} style={{ width: `${Math.min(bar, 100)}%` }} />

)}

) } export function StatRow({ label, value, alert }: { label: string; value: number | string; alert?: boolean }) { return (

{label} {value}

) } export function LogRow({ log }: { log: LogLike }) { return (

{log.message.length > 100 ? log.message.slice(0, 100) + '...' : log.message}

{log.source} · {new Date(log.timestamp).toLocaleTimeString()}

) } export function QuickAction({ label, desc, tab, icon, onNavigate }: { label: string desc: string tab: string icon: React.ReactNode onNavigate: (tab: string) => void }) { return ( ) } // --- Helper functions --- export function formatUptime(ms: number): string { const hours = Math.floor(ms / (1000 * 60 * 60)) const days = Math.floor(hours / 24) if (days > 0) return `${days}d ${hours % 24}h` return `${hours}h` } export function formatTokensShort(n: number): string { if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M` if (n >= 1_000) return `${Math.round(n / 1_000)}K` return String(n) } export function formatBytes(bytes: number): string { if (bytes === 0) return '0 B' const k = 1024 const sizes = ['B', 'KB', 'MB', 'GB'] const i = Math.floor(Math.log(bytes) / Math.log(k)) return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}` } export function getProviderHealth(active: number, total: number): { value: string; status: 'good' | 'warn' | 'bad' } { if (total === 0) return { value: 'No sessions', status: 'warn' } if (active > 0) return { value: `${active} active`, status: 'good' } return { value: `Idle (${total})`, status: 'warn' } } export function getLocalOsStatus(memPct: number | null, diskPct: number | null): { value: string; status: 'good' | 'warn' | 'bad' } { if (memPct == null && diskPct == null) return { value: 'Unknown', status: 'bad' } const maxPct = Math.max(memPct ?? 0, diskPct ?? 0) if (maxPct >= 95) return { value: 'Critical', status: 'bad' } if (maxPct >= 80) return { value: 'Degraded', status: 'warn' } return { value: 'Healthy', status: 'good' } } export function getMcHealth(systemStats: any, dbStats: DbStats | null, errorCount: number): { value: string; status: 'good' | 'warn' | 'bad' } { if (!systemStats || !dbStats) return { value: 'Unavailable', status: 'bad' } if (errorCount > 0) return { value: `${errorCount} errors`, status: 'warn' } return { value: 'Healthy', status: 'good' } } // --- SVG Icons --- export function SessionIcon() { return ( ) } export function AgentIcon() { return ( ) } export function GatewayIcon() { return ( ) } export function ActivityIconMini() { return ( ) } export function TaskIcon() { return ( ) } export function SpawnActionIcon() { return ( ) } export function LogActionIcon() { return ( ) } export function TaskActionIcon() { return ( ) } export function MemoryActionIcon() { return ( ) } export function PipelineActionIcon() { return ( ) } export function TokenIcon() { return ( ) } export function CostIcon() { return ( ) }