{label} {valueText}

) } function LoadAvgCell({ label, value, cores, }: { label: string value: number | null cores: number | null }) { const saturated = value != null && cores != null && value > cores return (

{label} {value != null ? value.toFixed(2) : "—"} {cores ? ( / {cores} cores ) : null}

) } function memoryUsedBytes(m: HostStats["memory"]): number | null { if (m.total_bytes == null) return null // Prefer "available" over "free" — on Linux, free excludes reclaimable // buffer/cache memory and overstates pressure. const available = m.available_bytes ?? m.free_bytes if (available == null) return null return Math.max(0, m.total_bytes - available) } function memoryUsedPct(m: HostStats["memory"]): number { const used = memoryUsedBytes(m) if (used == null || m.total_bytes == null || m.total_bytes === 0) return 0 return (used / m.total_bytes) * 100 } function memoryUsedLabel(m: HostStats["memory"]): string { const used = memoryUsedBytes(m) if (used == null || m.total_bytes == null) return "—" return `${formatBytes(used)} / ${formatBytes(m.total_bytes)}` } function busiestDiskPct(disks: HostStats["disks"]): number { return disks.reduce((m, d) => Math.max(m, d.used_pct), 0) } function busiestDiskLabel(disks: HostStats["disks"]): string { if (disks.length === 0) return "—" const busiest = disks.reduce((a, b) => (b.used_pct > a.used_pct ? b : a)) return `${busiest.used_pct}% (${busiest.mount})` } function barColor(pct: number): string { if (pct >= 90) return "var(--destructive)" if (pct >= 75) return "#f59e0b" return "var(--primary)" } // --- Jobs panel -------------------------------------------------------- function JobsPanel({ stats, recent, onRetry, }: { stats: JobStats | null recent: ObanJob[] onRetry: (id: number) => Promise }) { if (!stats) { return } text="No job stats available." /> } const stateData: ChartDatum[] = (Object.entries(stats.counts) as [string, number][]) .filter(([, n]) => n > 0) .map(([state, n]) => ({ label: state, value: n, color: jobStateColor(state) })) const queueData: ChartDatum[] = stats.queues.map((q) => { const totals = stats.by_queue[q] ?? {} const sum = Object.values(totals).reduce((a, n) => a + (n ?? 0), 0) return { label: q, value: sum } }) return (

Jobs by state {stateData.length === 0 ? (

No active jobs.

) : ( )}

{d.label} {d.value}

Active jobs by queue {queueData.length === 0 ? (

No queued or executing jobs.

) : ( )}

Recent jobs Latest 50 — newest first. {recent.length === 0 ? (

No recent jobs.

) : (

{j.state} {j.worker} queue: {j.queue} attempt {j.attempt}/{j.max_attempts} · inserted{" "} {new Date(j.inserted_at).toLocaleString()} {j.completed_at ? ` · completed ${new Date(j.completed_at).toLocaleString()}` : ""} {j.errors && j.errors.length > 0 ? ( {j.errors[j.errors.length - 1]?.error ?? "(error)"} ) : null}
{j.state === "retryable" || j.state === "discarded" ? ( ) : null}

)}

) } // --- Sessions panel ---------------------------------------------------- function SessionsPanel({ sessions, }: { sessions: { sessions: ActiveSession[]; count: number } | null }) { if (!sessions) { return } text="No session data available." /> } // Bucket sign-ins by hour for a 24h sparkline. const hourly = useMemo(() => { const now = Date.now() const buckets = Array.from({ length: 24 }, (_, i) => ({ x: i, y: 0, })) for (const s of sessions.sessions) { const t = new Date(s.last_sign_in_at).getTime() const ago = (now - t) / (60 * 60 * 1000) const idx = 23 - Math.floor(ago) if (idx >= 0 && idx < 24) buckets[idx].y++ } return buckets }, [sessions]) return (

Sign-ins over the last 24h One bar per hour, latest on the right.

{sessions.count} recent sessions {sessions.sessions.length === 0 ? (

No sign-ins in the last 24 hours.

) : (

{s.email} {s.first_name || s.last_name ? `${s.first_name ?? ""} ${s.last_name ?? ""}`.trim() + " · " : ""} {s.user_type ?? "user"} · status: {s.status} {s.two_factor_enabled ? " · 2FA" : ""}
{new Date(s.last_sign_in_at).toLocaleString()}

)}

) } // --- Audit panel ------------------------------------------------------- function AuditPanel({ stats }: { stats: AuditStats | null }) { if (!stats) { return } text="No audit stats available." /> } const bySeverity: ChartDatum[] = Object.entries(stats.by_severity ?? {}).map( ([k, v]) => ({ label: k, value: v, color: severityColor(k) }), ) const byResource: ChartDatum[] = Object.entries(stats.by_resource_type ?? {}) .sort((a, b) => b[1] - a[1]) .slice(0, 10) .map(([k, v]) => ({ label: k, value: v })) // Time series — only render if backend supplied it. const series: SeriesPoint[] | null = stats.over_time ? stats.over_time.map((p, i) => ({ x: i, y: p.total })) : null return (

Events by severity (7d) {bySeverity.length === 0 ? (

No events.

) : ( )} Top resource types {byResource.length === 0 ? (

No events.

) : ( )} {series ? ( Events over time ) : null}

) } // --- Infrastructure panel ---------------------------------------------- function InfraPanel({ summary, spaces, droplets, }: { summary: InfrastructureSummary | null spaces: Space[] droplets: Droplet[] }) { const dropletsByRegion = useMemo(() => { const out: Record = {} for (const d of droplets) { const r = typeof d.region === "string" ? d.region : d.region?.slug ?? d.region?.name ?? "unknown" out[r] = (out[r] ?? 0) + 1 } return out }, [droplets]) if (!summary && spaces.length === 0 && droplets.length === 0) { return ( } text="No infrastructure connected. Wire a DigitalOcean token in arcadia's .env to see this section populate." /> ) } return (

{summary ? ( DigitalOcean summary

              {JSON.stringify(summary, null, 2)}

) : null}

} /> } /> } />

{droplets.length > 0 ? (

Droplet regions Coloured continents indicate any droplets in that hemisphere. Droplets ({droplets.length})

{d.name} {typeof d.region === "string" ? d.region : d.region?.slug ?? "—"} {d.size_slug ? ` · ${d.size_slug}` : ""} {d.vcpus ? ` · ${d.vcpus} vCPU` : ""} {d.memory ? ` · ${formatBytes(d.memory * 1024 * 1024)}` : ""}
{d.status}
+ {droplets.length - 20} more

) : null} {spaces.length > 0 ? ( Spaces ({spaces.length})

              {JSON.stringify(spaces, null, 2)}

) : null}

) } function regionColorsFor(byRegion: Record): Record { // Best-effort mapping from DO region slugs to continent IDs the WorldMapSvg knows. // The lib exposes regions like "north-america", "europe", "asia", etc. const colors: Record = {} const continentOf = (r: string): string | null => { const lc = r.toLowerCase() if (/^(nyc|sfo|tor|ams_tor)/.test(lc)) return "north-america" if (/^(lon|ams|fra)/.test(lc)) return "europe" if (/^(blr|sgp)/.test(lc)) return "asia" if (/^(syd)/.test(lc)) return "oceania" return null } for (const r of Object.keys(byRegion)) { const c = continentOf(r) if (c) colors[c] = "var(--primary)" } return colors } // --- Rate limits panel ------------------------------------------------- function RateLimitsPanel({ limits }: { limits: RateLimit[] }) { if (limits.length === 0) { return ( } text="No rate-limit configuration available." /> ) } return ( Configured rate limits The maximum requests allowed per window for each authenticated bucket.

{l.type} Window: {l.window_seconds}s
{l.max_requests.toLocaleString()} req

) } // --- helpers ---------------------------------------------------------- function PanelStub({ icon, text }: { icon: React.ReactNode; text: string }) { return ( {icon} {text} ) } function jobStateColor(state: string): string { switch (state) { case "executing": return "#3b82f6" case "available": case "scheduled": return "#a3a3a3" case "retryable": return "#f59e0b" case "discarded": return "#ef4444" case "cancelled": return "#737373" case "completed": return "#10b981" default: return "#9ca3af" } } function jobStateVariant( state: string, ): "default" | "secondary" | "destructive" | "outline" { if (state === "executing" || state === "completed") return "default" if (state === "discarded") return "destructive" if (state === "retryable" || state === "scheduled") return "secondary" return "outline" } function severityColor(s: string): string { if (s === "critical" || s === "error") return "#ef4444" if (s === "warning") return "#f59e0b" return "#94a3b8" }