391 lines
14 KiB
TypeScript
391 lines
14 KiB
TypeScript
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useState, useMemo } from 'react';
|
|
import { ControlFleetHost, ControlPerfSample } from '@/hooks/useControlStream';
|
|
import { useReducedMotion } from '@/hooks/useReducedMotion';
|
|
import { VramGauge } from './VramGauge';
|
|
import { TtlRing } from './TtlRing';
|
|
import { PerfChart } from './PerfChart';
|
|
import { cn } from '@/lib/utils';
|
|
import type { GpuData } from './FleetTab';
|
|
import { Play, Eraser, Check, Loader2, AlertTriangle, Circle, ChevronDown, ChevronRight } from 'lucide-react';
|
|
|
|
interface HostCardProps {
|
|
host: ControlFleetHost;
|
|
gpuData: GpuData | null;
|
|
perfSamples?: ControlPerfSample[];
|
|
}
|
|
|
|
// C1: redundant (non-color) signifier per model state for color-blind users.
|
|
const STATE_ICON: Record<string, typeof Check> = {
|
|
ready: Check,
|
|
starting: Loader2,
|
|
stopping: Loader2,
|
|
error: AlertTriangle,
|
|
stopped: Circle,
|
|
down: Circle,
|
|
};
|
|
|
|
const STATE_COLORS: Record<string, { bg: string; glowVar: string; animate: boolean }> = {
|
|
starting: { bg: 'bg-amber-500', glowVar: '--glow-amber', animate: true },
|
|
ready: { bg: 'bg-green-500', glowVar: '--glow-green', animate: false },
|
|
error: { bg: 'bg-red-500', glowVar: '--glow-red', animate: false },
|
|
down: { bg: 'bg-gray-500', glowVar: '--glow-gray', animate: false },
|
|
stopped: { bg: 'bg-gray-400', glowVar: '--glow-gray', animate: false },
|
|
stopping: { bg: 'bg-amber-400', glowVar: '--glow-amber', animate: true },
|
|
};
|
|
|
|
const FALLBACK_STATE = { bg: 'bg-gray-500', glowVar: '--glow-gray', animate: false };
|
|
|
|
function relTime(iso: string | null): string {
|
|
if (!iso) return '';
|
|
const diff = Date.now() - new Date(iso).getTime();
|
|
const seconds = Math.floor(diff / 1000);
|
|
if (seconds < 60) return `${seconds}s ago`;
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
const days = Math.floor(hours / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
function livenessLabel(state: string): string {
|
|
switch (state) {
|
|
case 'connected': return 'connected';
|
|
case 'down': return 'down';
|
|
default: return state;
|
|
}
|
|
}
|
|
|
|
function getGlowColor(glowVar: string): string {
|
|
return getComputedStyle(document.documentElement).getPropertyValue(glowVar).trim();
|
|
}
|
|
|
|
export function HostCard({ host, gpuData, perfSamples = [] }: HostCardProps) {
|
|
const reducedMotion = useReducedMotion();
|
|
const [showPerf, setShowPerf] = useState(false);
|
|
|
|
// B2: build perf history series for this host from buffered samples.
|
|
const perf = useMemo(() => {
|
|
const mine = perfSamples.filter((s) => s.providerId === host.providerId).slice(-120);
|
|
const timestamps = mine.map((s) => s.ts);
|
|
const num = (g: unknown, k: string): number => {
|
|
const v = (g as Record<string, unknown> | null)?.[k];
|
|
return typeof v === 'number' ? v : 0;
|
|
};
|
|
return {
|
|
timestamps,
|
|
hasData: mine.length > 1,
|
|
series: [
|
|
{ name: 'VRAM MB', data: mine.map((s) => num(s.gpu, 'vram_used')), color: '#60a5fa' },
|
|
{ name: 'Temp C', data: mine.map((s) => num(s.gpu, 'temperature')), color: '#f87171' },
|
|
{ name: 'Power W', data: mine.map((s) => num(s.gpu, 'power')), color: '#fbbf24' },
|
|
],
|
|
};
|
|
}, [perfSamples, host.providerId]);
|
|
const livenessKey = host.liveness === 'connected' ? 'ready' : host.liveness;
|
|
const stateConfig = STATE_COLORS[livenessKey] ?? FALLBACK_STATE;
|
|
// AUD1: getComputedStyle is a forced style read; memoize so it doesn't fire on
|
|
// every WS-delta re-render (only the theme token changes it, which is rare).
|
|
const glowColor = useMemo(() => getGlowColor(stateConfig.glowVar), [stateConfig.glowVar]);
|
|
|
|
const vramUsed = gpuData?.vram_used ?? 0;
|
|
const vramTotal = gpuData?.vram_total ?? 0;
|
|
const gpuTemp = gpuData?.temperature ?? null;
|
|
const gpuPower = gpuData?.power ?? null;
|
|
|
|
return (
|
|
<motion.div
|
|
layout
|
|
initial={reducedMotion ? undefined : { opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={reducedMotion ? undefined : { opacity: 0, scale: 0.97 }}
|
|
transition={reducedMotion ? undefined : { type: 'spring', stiffness: 300, damping: 25 }}
|
|
className={cn(
|
|
'rounded-xl border border-border/60 bg-card p-4',
|
|
'shadow-sm',
|
|
)}
|
|
>
|
|
{/* Header: provider ID + liveness chip + last seen */}
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<h2 className="text-sm font-semibold tracking-tight">{host.providerId}</h2>
|
|
|
|
<motion.div
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium',
|
|
'border border-border/40',
|
|
)}
|
|
animate={
|
|
reducedMotion
|
|
? undefined
|
|
: stateConfig.animate
|
|
? { boxShadow: ['0 0 0px transparent', `0 0 8px ${glowColor}33`, '0 0 0px transparent'] }
|
|
: { boxShadow: [`0 0 6px ${glowColor}33`] }
|
|
}
|
|
transition={
|
|
reducedMotion
|
|
? undefined
|
|
: { duration: 1.5, repeat: stateConfig.animate ? Infinity : 0 }
|
|
}
|
|
>
|
|
<span
|
|
className={cn(
|
|
'w-1.5 h-1.5 rounded-full',
|
|
stateConfig.bg,
|
|
)}
|
|
/>
|
|
<span className="capitalize">{livenessLabel(host.liveness)}</span>
|
|
</motion.div>
|
|
|
|
{host.liveness === 'down' && host.lastSeenAt && (
|
|
<span className="text-[11px] text-muted-foreground">
|
|
last seen {relTime(host.lastSeenAt)}
|
|
</span>
|
|
)}
|
|
|
|
{perf.hasData && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPerf((v) => !v)}
|
|
className="text-[10px] text-muted-foreground ml-auto inline-flex items-center gap-0.5 hover:text-foreground"
|
|
>
|
|
{showPerf ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
|
|
perf
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
{/* Left: VRAM gauge + GPU readouts */}
|
|
<div className="flex items-start gap-4 shrink-0">
|
|
{vramTotal > 0 ? (
|
|
<VramGauge used={vramUsed} total={vramTotal} size={110} />
|
|
) : (
|
|
<div className="w-[110px] h-[110px] flex items-center justify-center text-[11px] text-muted-foreground">
|
|
no GPU data
|
|
</div>
|
|
)}
|
|
|
|
{/* GPU readouts */}
|
|
<div className="space-y-2 pt-2">
|
|
{gpuTemp != null && (
|
|
<GpuReadout label="Temp" value={`${gpuTemp.toFixed(0)}\u00B0C`} />
|
|
)}
|
|
{gpuPower != null && (
|
|
<GpuReadout label="Power" value={`${gpuPower.toFixed(0)}W`} />
|
|
)}
|
|
<GpuReadout label="VRAM" value={`${vramUsed.toFixed(0)} / ${vramTotal.toFixed(0)} MB`} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: model chips + TTL rings */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-medium">
|
|
Models
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<AnimatePresence mode="popLayout">
|
|
{host.models.map((m) => (
|
|
<ModelChip key={`${m.model}-${m.state}`} model={m} providerId={host.providerId} />
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* TTL rings */}
|
|
{host.models.some((m) => m.ttlDeadline) && (
|
|
<div className="mt-3">
|
|
<div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-medium">
|
|
TTL
|
|
</div>
|
|
<div className="flex gap-3">
|
|
{host.models.filter((m) => m.ttlDeadline).map((m) => (
|
|
<div key={`ttl-${m.model}`} className="flex flex-col items-center gap-1">
|
|
<TtlRing deadline={m.ttlDeadline} size={64} />
|
|
<span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
|
|
{m.model}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* B2: perf history (collapsible) */}
|
|
{showPerf && perf.hasData && (
|
|
<div className="mt-4 border-t border-border/30 pt-3">
|
|
<PerfChart series={perf.series} timestamps={perf.timestamps} height={180} />
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function GpuReadout({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
|
|
{label}
|
|
</span>
|
|
<span className="text-sm font-bold font-[Orbitron] tabular-nums text-foreground">
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ModelChipProps {
|
|
model: {
|
|
model: string;
|
|
state: string;
|
|
ts: string;
|
|
ttlDeadline: string | null;
|
|
inflight: number;
|
|
};
|
|
providerId: string;
|
|
}
|
|
|
|
function ModelChip({ model, providerId }: ModelChipProps) {
|
|
const reducedMotion = useReducedMotion();
|
|
const StateIcon = STATE_ICON[model.state] ?? Circle;
|
|
const spin = model.state === 'starting' || model.state === 'stopping';
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
const [confirmUnload, setConfirmUnload] = useState(false);
|
|
|
|
// P2.2: Optimistic UI — API calls only, no local state mutation.
|
|
// The control_fleet delta from WS updates the UI.
|
|
const handleWarm = async () => {
|
|
try {
|
|
const res = await fetch('/api/control/action/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type: 'warm', providerId, model: model.model }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
setActionError(data.error || `Warm failed: ${res.status}`);
|
|
setTimeout(() => setActionError(null), 3000);
|
|
}
|
|
} catch {
|
|
setActionError('Network error');
|
|
setTimeout(() => setActionError(null), 3000);
|
|
}
|
|
};
|
|
|
|
const handleUnload = async (confirmed: boolean) => {
|
|
try {
|
|
const res = await fetch('/api/control/action/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type: 'unload',
|
|
providerId,
|
|
model: model.model,
|
|
confirmed,
|
|
}),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
if (data.requiresConfirmation) {
|
|
setConfirmUnload(true);
|
|
return;
|
|
}
|
|
setActionError(data.error || `Unload failed: ${res.status}`);
|
|
setTimeout(() => setActionError(null), 3000);
|
|
} else {
|
|
setConfirmUnload(false);
|
|
}
|
|
} catch {
|
|
setActionError('Network error');
|
|
setTimeout(() => setActionError(null), 3000);
|
|
}
|
|
};
|
|
|
|
const handleConfirmedUnload = async () => {
|
|
await handleUnload(true);
|
|
setConfirmUnload(false);
|
|
};
|
|
|
|
return (
|
|
<motion.span
|
|
layout
|
|
initial={reducedMotion ? undefined : { scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={reducedMotion ? undefined : { scale: 0.8, opacity: 0 }}
|
|
transition={reducedMotion ? undefined : { type: 'spring', stiffness: 400, damping: 20 }}
|
|
className={cn(
|
|
'relative inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs',
|
|
'border border-border/40 bg-muted/30',
|
|
'font-medium',
|
|
)}
|
|
>
|
|
<StateIcon
|
|
aria-label={model.state}
|
|
className={cn(
|
|
'size-3 shrink-0',
|
|
spin && 'animate-spin',
|
|
model.state === 'ready' && 'text-green-400',
|
|
model.state === 'error' && 'text-red-400',
|
|
(model.state === 'starting' || model.state === 'stopping') && 'text-amber-400',
|
|
(model.state === 'stopped' || model.state === 'down') && 'text-gray-400',
|
|
)}
|
|
/>
|
|
<span className="truncate max-w-[160px]" title={`${model.model} (${model.state})`}>{model.model}</span>
|
|
{model.inflight > 0 && (
|
|
<span className="text-[10px] text-muted-foreground ml-0.5">
|
|
({model.inflight})
|
|
</span>
|
|
)}
|
|
|
|
{/* Action buttons — fire-and-forget, UI updates from control_fleet delta */}
|
|
<button
|
|
type="button"
|
|
onClick={handleWarm}
|
|
className="p-0.5 rounded hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors"
|
|
title={`Warm ${model.model}`}
|
|
>
|
|
<Play className="size-2.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleUnload(false)}
|
|
className="p-0.5 rounded hover:bg-muted/50 text-muted-foreground hover:text-red-400 transition-colors"
|
|
title={`Unload ${model.model}`}
|
|
>
|
|
<Eraser className="size-2.5" />
|
|
</button>
|
|
|
|
{actionError && (
|
|
<span className="text-[9px] text-red-400 absolute -top-4 left-0 whitespace-nowrap">
|
|
{actionError}
|
|
</span>
|
|
)}
|
|
|
|
{confirmUnload && (
|
|
<div className="absolute top-full left-0 mt-1 z-10 bg-background border border-border rounded-md p-2 shadow-lg flex flex-col gap-1 min-w-[180px]">
|
|
<p className="text-[11px] text-foreground">
|
|
Model has active requests. Force unload?
|
|
</p>
|
|
<div className="flex gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirmedUnload}
|
|
className="px-2 py-0.5 text-[10px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
|
|
>
|
|
Force unload
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmUnload(false)}
|
|
className="px-2 py-0.5 text-[10px] rounded bg-muted/30 text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.span>
|
|
);
|
|
}
|