diff --git a/apps/web/src/components/node-dashboard/DAGIRouterCard.tsx b/apps/web/src/components/node-dashboard/DAGIRouterCard.tsx
new file mode 100644
index 00000000..80f7de25
--- /dev/null
+++ b/apps/web/src/components/node-dashboard/DAGIRouterCard.tsx
@@ -0,0 +1,463 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import {
+ Router,
+ CheckCircle,
+ Ghost,
+ Archive,
+ RefreshCw,
+ Bot,
+ AlertTriangle,
+ Clock,
+ ExternalLink,
+ Search,
+ Filter,
+ ChevronDown,
+ Download,
+ Upload,
+ Brain
+} from 'lucide-react';
+import {
+ useDAGIRouterAgents,
+ runDAGIAudit,
+ syncPhantomAgents,
+ markStaleAgents,
+ type DAGIRouterAgent
+} from '@/hooks/useDAGIAudit';
+
+interface DAGIRouterCardProps {
+ nodeId: string;
+ expanded?: boolean;
+}
+
+type StatusFilter = 'all' | 'active' | 'phantom' | 'stale';
+
+const STATUS_CONFIG = {
+ active: {
+ label: 'Active',
+ color: 'emerald',
+ bgClass: 'bg-emerald-500/20',
+ textClass: 'text-emerald-400',
+ icon: CheckCircle
+ },
+ phantom: {
+ label: 'Phantom',
+ color: 'amber',
+ bgClass: 'bg-amber-500/20',
+ textClass: 'text-amber-400',
+ icon: Ghost
+ },
+ stale: {
+ label: 'Stale',
+ color: 'orange',
+ bgClass: 'bg-orange-500/20',
+ textClass: 'text-orange-400',
+ icon: Archive
+ },
+ error: {
+ label: 'Error',
+ color: 'red',
+ bgClass: 'bg-red-500/20',
+ textClass: 'text-red-400',
+ icon: AlertTriangle
+ }
+};
+
+export function DAGIRouterCard({ nodeId, expanded = false }: DAGIRouterCardProps) {
+ const { agents, summary, lastAuditAt, isLoading, error, refresh } = useDAGIRouterAgents(nodeId);
+ const [isRunning, setIsRunning] = useState(false);
+ const [isSyncing, setIsSyncing] = useState(false);
+ const [runError, setRunError] = useState
(null);
+ const [statusFilter, setStatusFilter] = useState('all');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showFilterMenu, setShowFilterMenu] = useState(false);
+
+ // Filter agents
+ const filteredAgents = useMemo(() => {
+ return agents.filter(agent => {
+ // Status filter
+ if (statusFilter !== 'all' && agent.status !== statusFilter) {
+ return false;
+ }
+ // Search filter
+ if (searchQuery) {
+ const query = searchQuery.toLowerCase();
+ return (
+ agent.name.toLowerCase().includes(query) ||
+ agent.role?.toLowerCase().includes(query) ||
+ agent.id.toLowerCase().includes(query)
+ );
+ }
+ return true;
+ });
+ }, [agents, statusFilter, searchQuery]);
+
+ const handleRunAudit = async () => {
+ setIsRunning(true);
+ setRunError(null);
+ try {
+ await runDAGIAudit(nodeId);
+ await refresh();
+ } catch (e) {
+ setRunError(e instanceof Error ? e.message : 'Failed to run audit');
+ } finally {
+ setIsRunning(false);
+ }
+ };
+
+ const handleSyncPhantom = async () => {
+ const phantomIds = agents.filter(a => a.status === 'phantom').map(a => a.id);
+ if (phantomIds.length === 0) return;
+
+ setIsSyncing(true);
+ try {
+ await syncPhantomAgents(nodeId, phantomIds);
+ await runDAGIAudit(nodeId);
+ await refresh();
+ } catch (e) {
+ setRunError(e instanceof Error ? e.message : 'Failed to sync');
+ } finally {
+ setIsSyncing(false);
+ }
+ };
+
+ const handleMarkStale = async () => {
+ const staleIds = agents.filter(a => a.status === 'stale').map(a => a.id);
+ if (staleIds.length === 0) return;
+
+ setIsSyncing(true);
+ try {
+ await markStaleAgents(nodeId, staleIds);
+ await refresh();
+ } catch (e) {
+ setRunError(e instanceof Error ? e.message : 'Failed to mark stale');
+ } finally {
+ setIsSyncing(false);
+ }
+ };
+
+ // Format timestamp
+ const formatTime = (timestamp: string) => {
+ try {
+ const date = new Date(timestamp);
+ return date.toLocaleString('uk-UA', {
+ day: '2-digit',
+ month: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ } catch {
+ return timestamp;
+ }
+ };
+
+ const getStatusBadge = (status: string) => {
+ const config = STATUS_CONFIG[status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.error;
+ const Icon = config.icon;
+ return (
+
+
+ {config.label}
+
+ );
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+ DAGI Router
+
+
+ {summary.phantom > 0 && (
+
+ )}
+
+
+
+
+ {/* Error */}
+ {(error || runError) && (
+
+
+ {runError || error?.message || 'Помилка завантаження'}
+
+ )}
+
+ {/* Loading */}
+ {isLoading && agents.length === 0 && (
+
+
+ Завантаження...
+
+ )}
+
+ {/* No data */}
+ {!isLoading && agents.length === 0 && !error && (
+
+
+
Ще немає даних аудиту
+
Натисніть "Запустити" для аудиту
+
+ )}
+
+ {/* Content */}
+ {agents.length > 0 && (
+ <>
+ {/* Timestamp */}
+ {lastAuditAt && (
+
+
+ Останній аудит: {formatTime(lastAuditAt)}
+
+ )}
+
+ {/* Stats Grid */}
+
+
+
+
+
+
+ {/* Source counts */}
+
+ Router: {summary.router_total} агентів
+ System: {summary.system_total} агентів
+
+
+ {/* Search & Filter */}
+
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-3 py-2 bg-slate-800/50 border border-white/10 rounded-lg
+ text-sm text-white placeholder-white/30 focus:outline-none focus:ring-2
+ focus:ring-purple-500/50"
+ />
+
+
+
+ {showFilterMenu && (
+
+ {(['all', 'active', 'phantom', 'stale'] as const).map((status) => (
+
+ ))}
+
+ )}
+
+
+
+ {/* Agents Table */}
+
+
+
+
+
+ |
+ Agent
+ |
+
+ Status
+ |
+
+ Runtime
+ |
+
+ Last Seen
+ |
+
+ Cabinet
+ |
+
+
+
+ {filteredAgents.map((agent) => (
+
+
+
+
+
+
+
+
+ {agent.name}
+ {agent.has_prompts && (
+
+
+
+ )}
+ {!agent.has_prompts && agent.status === 'active' && (
+
+
+
+ )}
+
+ {agent.role && (
+ {agent.role}
+ )}
+
+ |
+
+ {getStatusBadge(agent.status)}
+ |
+
+
+ {agent.gpu && {agent.gpu} }
+ {agent.cpu && {agent.cpu} }
+ |
+
+
+ {agent.last_seen_at ? formatTime(agent.last_seen_at) : '—'}
+
+ |
+
+ {agent.has_cabinet && agent.cabinet_slug ? (
+
+ Open
+
+
+ ) : (
+ —
+ )}
+ |
+
+ ))}
+
+
+
+
+ {/* Empty state for filtered results */}
+ {filteredAgents.length === 0 && agents.length > 0 && (
+
+
+
Немає агентів за цим фільтром
+
+ )}
+
+
+ {/* Footer stats */}
+
+
+ Показано {filteredAgents.length} з {agents.length} агентів
+
+ {summary.phantom === 0 && summary.stale === 0 && (
+
+
+ Всі агенти синхронізовані
+
+ )}
+
+
+ )}
+
+
+
Не вдалося завантажити метрики
+
+
+ {/* Header */}
+
+
+
+ Node Metrics
+
+
+
+
+ {/* Metrics Grid */}
+
+ {/* GPU */}
+
+
+
+
+
+
+
GPU
+
+ {metrics.gpu_model || 'Unknown'}
+
+
+
+
+
+ {formatBytes(metrics.gpu_memory_used)}
+ {formatBytes(metrics.gpu_memory_total)}
+
+
+
+ {/* CPU */}
+
+
+
+
+
+
+
CPU
+
+ {metrics.cpu_cores} cores
+
+
+
+
+
+ {metrics.cpu_usage.toFixed(1)}%
+ 100%
+
+
+
+ {/* RAM */}
+
+
+
+
+
+
+
RAM
+
+ {ramUsagePercent.toFixed(0)}% used
+
+
+
+
+
+ {formatBytes(metrics.ram_used)}
+ {formatBytes(metrics.ram_total)}
+
+
+
+ {/* Disk */}
+
+
+
+
+
+
+
Disk
+
+ {diskUsagePercent.toFixed(0)}% used
+
+
+
+
+
+ {formatBytes(metrics.disk_used)}
+ {formatBytes(metrics.disk_total)}
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {metrics.agent_count_router} Router
+ /
+ {metrics.agent_count_system} System
+
+
+
+
+
+ {formatTime(metrics.last_heartbeat)}
+
+
+