| Lane |
Model |
+ Mode |
Context |
$/1K out |
Tools |
@@ -464,6 +471,15 @@ export function CostTracker() {
)}
{isLoading && ...}
+
+
+ {laneSourceLabel(l.source)}
+
+ |
{formatCtx(l.context_window)} |
{l.cost_output_per_1k ? `$${l.cost_output_per_1k.toFixed(4)}` : '--'}
diff --git a/src/warroom/src/pages/FleetDashboard.tsx b/src/warroom/src/pages/FleetDashboard.tsx
new file mode 100644
index 0000000..cf31fa1
--- /dev/null
+++ b/src/warroom/src/pages/FleetDashboard.tsx
@@ -0,0 +1,662 @@
+import { useCallback, useEffect, useState } from 'react'
+import { usePageTitle, usePolling } from '@/hooks'
+import {
+ approveFederationDashboardApproval,
+ denyFederationDashboardApproval,
+ fetchFederationDashboard,
+ subscribeFederationDashboard,
+ type FleetActivityEvent,
+ type FleetApproval,
+ type FleetDashboardInstance,
+ type FleetTrustProposal,
+} from '@/api/federation'
+import { MetricCard } from '@/components/MetricCard'
+import { PageLoader } from '@/components/PageLoader'
+import { formatRelativeTime, formatTimestamp } from '@/utils/dateFormat'
+import { getErrorMessage } from '@/utils/errors'
+
+const STATE_STYLES: Record = {
+ healthy: {
+ border: 'border-state-healthy/70',
+ dot: 'bg-state-healthy',
+ text: 'text-state-healthy',
+ label: 'Healthy',
+ },
+ attention: {
+ border: 'border-state-warning/80',
+ dot: 'bg-state-warning',
+ text: 'text-state-warning',
+ label: 'Attention',
+ },
+ critical: {
+ border: 'border-state-error',
+ dot: 'bg-state-error',
+ text: 'text-state-error',
+ label: 'Critical',
+ },
+ paused: {
+ border: 'border-accent-primary',
+ dot: 'bg-accent-primary',
+ text: 'text-accent-primary',
+ label: 'Paused',
+ },
+}
+
+type DashboardDecision = 'approve' | 'deny'
+
+interface DecisionTarget {
+ decision: DashboardDecision
+ instanceId: string
+ approvalId: string
+ title: string
+ subtitle: string
+}
+
+function roleLabel(role: string): string {
+ if (!role) return 'PEER'
+ return role.toUpperCase()
+}
+
+function compactHash(hash: string): string {
+ return hash ? hash.slice(0, 10) : 'unavailable'
+}
+
+function formatHeartbeat(instance: FleetDashboardInstance): string {
+ if (instance.heartbeat_state === 'lost') return 'LOST'
+ if (instance.heartbeat_age_s === null) return instance.heartbeat_state.toUpperCase()
+ if (instance.heartbeat_age_s < 60) return `${Math.round(instance.heartbeat_age_s)}s ago`
+ return formatRelativeTime(instance.last_heartbeat_at)
+}
+
+function formatPct(value: number): string {
+ return `${Math.round(value)}%`
+}
+
+function instanceGridClass(count: number): string {
+ if (count <= 1) return 'grid grid-cols-1 gap-4 lg:max-w-2xl'
+ if (count === 2) return 'grid grid-cols-1 gap-4 lg:grid-cols-2 xl:max-w-5xl'
+ return 'grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'
+}
+
+function DetailPill({ label, value, tone = 'muted' }: {
+ label: string
+ value: string | number
+ tone?: 'muted' | 'warning' | 'error' | 'healthy'
+}) {
+ const toneClass = {
+ muted: 'text-text-secondary bg-surface-input',
+ warning: 'text-state-warning bg-state-warning/10',
+ error: 'text-state-error bg-state-error/10',
+ healthy: 'text-state-healthy bg-state-healthy/10',
+ }[tone]
+
+ return (
+
+ )
+}
+
+function InstanceCard({ instance }: { instance: FleetDashboardInstance }) {
+ const style = STATE_STYLES[instance.state]
+ const approvalTone = instance.pending_approvals > 0 ? 'warning' : 'muted'
+ const proposalTone = instance.trust_proposals > 0 ? 'warning' : 'muted'
+ const budgetTone = instance.budget_threshold === 'normal'
+ ? 'healthy'
+ : instance.budget_threshold === 'warning' || instance.budget_threshold === 'spawn_restricted'
+ ? 'warning'
+ : 'error'
+ const commandCenterUrl = instance.command_center_url || (instance.is_self ? '/war-room/command' : '')
+
+ return (
+
+
+
+
+
+ {instance.name}
+
+
+ {instance.instance_short_id || 'local'}
+
+
+
+ {style.label}
+
+ {instance.is_self ? 'SELF' : roleLabel(instance.role)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Soul
+
+ {compactHash(instance.soul_version_hash)}
+
+
+
+
+
+ Latest Activity
+
+ {instance.recent_activity ? (
+
+ {instance.recent_activity}
+ {instance.recent_activity_at && (
+ ({formatRelativeTime(instance.recent_activity_at)})
+ )}
+
+ ) : (
+ No recent activity
+ )}
+
+
+ Needs Attention
+
+ {instance.attention_reasons.slice(0, 4).map((reason) => (
+
+ {reason}
+
+ ))}
+ Unified Approval Queue
+ No pending approvals
+
+ )
+ }
+
+ return (
+
+ Unified Approval Queue
+
+
+
+
+ | Instance |
+ Action |
+ Tier |
+ Capability |
+ Waiting |
+ Actions |
+
+
+
+ {approvals.map((item) => (
+
+ | {item.instance_name} |
+
+ {item.action_name}
+ {item.context && (
+
+ {item.context}
+
+ )}
+ |
+
+
+ {item.risk_tier || 'T3'}
+
+ |
+
+ {item.capability}
+ |
+ {formatRelativeTime(item.waiting_since || item.created_at)} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+ Unified Trust Proposals
+ No pending trust proposals
+
+ )
+ }
+
+ return (
+
+ Unified Trust Proposals
+
+
+
+
+ | Instance |
+ Capability |
+ Current |
+ Proposed |
+ Successes |
+ Actions |
+
+
+
+ {proposals.map((item) => (
+
+ | {item.instance_name} |
+ {item.capability} |
+ T{item.current_tier} |
+ T{item.proposed_tier} |
+ {item.consecutive_successes} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+ Fleet Activity
+ {events.length === 0 ? (
+ No recent fleet activity
+ ) : (
+
+ {events.slice(0, 40).map((event) => (
+
+
+
+ {event.description}
+ {event.instance_name} - {event.event_type}
+
+
+ {formatRelativeTime(event.timestamp)}
+
+
+
+ ))}
+
+
+
+ {label} Decision
+
+ {target.title}
+
+ {target.subtitle}
+
+
+
+ |