977 lines
46 KiB
TypeScript
977 lines
46 KiB
TypeScript
import { FormEvent, useCallback, useEffect, useRef, useState } from "react";
|
|
import {
|
|
Boxes, Command, Cpu, Database, FlaskConical, Menu, Monitor, Moon, Plus, RefreshCw,
|
|
ShieldCheck, Sun, X,
|
|
} from "lucide-react";
|
|
|
|
import { CommandCenter } from "./components/CommandCenter";
|
|
import { CommandPalette } from "./components/CommandPalette";
|
|
import { ModelsRegistry } from "./components/ModelsRegistry";
|
|
import { DiscoverWorkspace } from "./components/DiscoverWorkspace";
|
|
import { RuntimeWorkspace } from "./components/RuntimeWorkspace";
|
|
import { CapabilityWorkspace } from "./components/CapabilityWorkspace";
|
|
import { EvaluationWorkspace } from "./components/EvaluationWorkspace";
|
|
import { AdvisorWorkspace } from "./components/AdvisorWorkspace";
|
|
import { LifecycleWorkspace } from "./components/LifecycleWorkspace";
|
|
import { MigrationWorkspace } from "./components/MigrationWorkspace";
|
|
import { OperationsWorkspace } from "./components/OperationsWorkspace";
|
|
import { RecoveryWorkspace } from "./components/RecoveryWorkspace";
|
|
import {
|
|
api, ApiError, clearOperatorCredential, setOperatorCredential,
|
|
onOperatorSessionInvalidated, operatorCredentialReference,
|
|
type PublicHealth, type PublicRelease,
|
|
} from "./lib/api";
|
|
import { navigation, navigationGroups, type RouteKey } from "./navigation";
|
|
import type {
|
|
AcceleratorState, CapabilityDeployment, EnrollmentCreated, HardwareState, ModelSummary,
|
|
NodeDecommissionPreview, NodeDecommissionRecordCount, NodeDecommissionResult, NodeState,
|
|
ObservedValue, ProjectIntegration, ProjectSummary, SchedulerBudget, SystemMetadata,
|
|
} from "./types";
|
|
|
|
type Theme = "dark" | "light" | "system";
|
|
|
|
const THEME_STORAGE_KEY = "modelforge.theme";
|
|
const MOBILE_NAV_MEDIA = "(max-width: 860px)";
|
|
|
|
function readStoredTheme(): Theme {
|
|
// Storage can throw outright in a private window or when site data is blocked, so a failure to
|
|
// read a cosmetic preference must never stop the console from rendering.
|
|
try {
|
|
const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
|
|
if (stored === "dark" || stored === "light" || stored === "system") return stored;
|
|
} catch { /* fall through to the default */ }
|
|
return "system";
|
|
}
|
|
|
|
function currentRoute(): string {
|
|
const route = window.location.hash.replace("#/", "");
|
|
if (route.startsWith("nodes/")) return route;
|
|
return navigation.some((item) => item.key === route) ? route : "overview";
|
|
}
|
|
|
|
function routeKey(route: string): RouteKey {
|
|
return route.startsWith("nodes/") ? "nodes" : (route as RouteKey);
|
|
}
|
|
|
|
function LoadingState() {
|
|
return <div className="state-card"><span className="state-spinner" />Loading control-plane state…</div>;
|
|
}
|
|
|
|
function EmptyState({ children }: { children: string }) {
|
|
return <div className="state-card"><Database size={18} />{children}</div>;
|
|
}
|
|
|
|
export default function App() {
|
|
const [route, setRoute] = useState(currentRoute);
|
|
const [models, setModels] = useState<ModelSummary[]>([]);
|
|
const [projects, setProjects] = useState<ProjectSummary[]>([]);
|
|
const [projectIntegrations, setProjectIntegrations] = useState<ProjectIntegration[]>([]);
|
|
const [hardware, setHardware] = useState<HardwareState | null>(null);
|
|
const [deployments, setDeployments] = useState<CapabilityDeployment[]>([]);
|
|
const [budgets, setBudgets] = useState<SchedulerBudget[]>([]);
|
|
const [deploymentsLoaded, setDeploymentsLoaded] = useState(false);
|
|
const [budgetsLoaded, setBudgetsLoaded] = useState(false);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [system, setSystem] = useState<SystemMetadata | null>(null);
|
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pollError, setPollError] = useState<string | null>(null);
|
|
const [operatorUnlocked, setOperatorUnlocked] = useState(false);
|
|
const [operatorDraft, setOperatorDraft] = useState("");
|
|
const [unlocking, setUnlocking] = useState(false);
|
|
const [publicHealth, setPublicHealth] = useState<PublicHealth | null>(null);
|
|
const [publicRelease, setPublicRelease] = useState<PublicRelease | null>(null);
|
|
const [theme, setTheme] = useState<Theme>(readStoredTheme);
|
|
const [navOpen, setNavOpen] = useState(false);
|
|
const [paletteOpen, setPaletteOpen] = useState(false);
|
|
const menuButtonRef = useRef<HTMLButtonElement>(null);
|
|
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
|
const sidebarRef = useRef<HTMLElement>(null);
|
|
const navWasOpen = useRef(false);
|
|
const navOpenRef = useRef(false);
|
|
const closeFocusTarget = useRef<"menu" | "active-route">("menu");
|
|
|
|
const loadControlPlane = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
await Promise.all([api.system(), api.models(), api.projects(), api.projectIntegrations(), api.hardware()])
|
|
.then(async ([systemData, modelData, projectData, integrationData, hardwareData]) => {
|
|
setSystem(systemData);
|
|
setModels(modelData.items);
|
|
setProjects(projectData);
|
|
setProjectIntegrations(integrationData);
|
|
setHardware(hardwareData);
|
|
const [deploymentResult, budgetResult] = await Promise.allSettled([
|
|
api.capabilityDeployments(), api.scheduler(),
|
|
]);
|
|
setDeploymentsLoaded(deploymentResult.status === "fulfilled" && Array.isArray(deploymentResult.value));
|
|
setBudgetsLoaded(budgetResult.status === "fulfilled" && Array.isArray(budgetResult.value));
|
|
if (deploymentResult.status === "fulfilled" && Array.isArray(deploymentResult.value)) setDeployments(deploymentResult.value);
|
|
if (budgetResult.status === "fulfilled" && Array.isArray(budgetResult.value)) setBudgets(budgetResult.value);
|
|
setLastUpdated(new Date());
|
|
})
|
|
.catch((cause: unknown) => setError(cause instanceof Error ? cause.message : "Unable to load ModelForge API"))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const onHashChange = () => setRoute(currentRoute());
|
|
window.addEventListener("hashchange", onHashChange);
|
|
Promise.allSettled([api.liveness(), api.version()]).then(([healthResult, releaseResult]) => {
|
|
if (healthResult.status === "fulfilled") setPublicHealth(healthResult.value);
|
|
if (releaseResult.status === "fulfilled") setPublicRelease(releaseResult.value);
|
|
});
|
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!operatorUnlocked) return;
|
|
void loadControlPlane();
|
|
}, [loadControlPlane, operatorUnlocked]);
|
|
|
|
useEffect(() => onOperatorSessionInvalidated(() => {
|
|
lockOperatorSession();
|
|
setError("Operator session is no longer valid; unlock again to continue");
|
|
}), []);
|
|
|
|
useEffect(() => {
|
|
if (!operatorUnlocked) return undefined;
|
|
const interval = window.setInterval(() => {
|
|
api.hardware()
|
|
.then((state) => { setHardware(state); setPollError(null); setLastUpdated(new Date()); })
|
|
.catch((cause: unknown) => setPollError(cause instanceof Error ? cause.message : "Hardware polling failed"));
|
|
}, 5000);
|
|
return () => window.clearInterval(interval);
|
|
}, [operatorUnlocked]);
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
if (theme === "system") root.removeAttribute("data-theme");
|
|
else root.setAttribute("data-theme", theme);
|
|
try { window.localStorage.setItem(THEME_STORAGE_KEY, theme); } catch { /* preference is not load-bearing */ }
|
|
}, [theme]);
|
|
|
|
// Escape closes the mobile drawer; a drawer you can open but not close is a trap.
|
|
useEffect(() => {
|
|
if (!navOpen) return undefined;
|
|
const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setNavOpen(false); };
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, [navOpen]);
|
|
|
|
useEffect(() => {
|
|
const onShortcut = (event: KeyboardEvent) => {
|
|
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
|
|
if (document.querySelector('[aria-modal="true"]')) return;
|
|
event.preventDefault();
|
|
setPaletteOpen((current) => !current);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onShortcut);
|
|
return () => window.removeEventListener("keydown", onShortcut);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof window.matchMedia !== "function") return undefined;
|
|
const mobile = window.matchMedia(MOBILE_NAV_MEDIA);
|
|
const closeAfterResize = (event: MediaQueryListEvent) => {
|
|
if (!event.matches && navOpenRef.current) {
|
|
closeFocusTarget.current = "active-route";
|
|
setNavOpen(false);
|
|
}
|
|
};
|
|
mobile.addEventListener("change", closeAfterResize);
|
|
return () => mobile.removeEventListener("change", closeAfterResize);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
navOpenRef.current = navOpen;
|
|
if (navOpen) {
|
|
navWasOpen.current = true;
|
|
closeButtonRef.current?.focus();
|
|
} else if (navWasOpen.current) {
|
|
navWasOpen.current = false;
|
|
if (closeFocusTarget.current === "active-route") {
|
|
sidebarRef.current?.querySelector<HTMLButtonElement>('button[aria-current="page"]')?.focus();
|
|
} else {
|
|
menuButtonRef.current?.focus();
|
|
}
|
|
closeFocusTarget.current = "menu";
|
|
}
|
|
}, [navOpen]);
|
|
|
|
const activeRoute = routeKey(route);
|
|
const routeInfo = navigation.find((item) => item.key === activeRoute)!;
|
|
const detailNode = route.startsWith("nodes/")
|
|
? hardware?.nodes.find((node) => node.id === route.slice(6))
|
|
: undefined;
|
|
|
|
const navigate = useCallback((key: string) => {
|
|
window.location.hash = `#/${key}`;
|
|
setRoute(key);
|
|
setNavOpen(false);
|
|
}, []);
|
|
|
|
async function refreshHardware() {
|
|
if (refreshing) return;
|
|
setRefreshing(true);
|
|
setError(null);
|
|
try { setHardware(await api.refreshHardware()); }
|
|
catch (cause: unknown) { setError(cause instanceof Error ? cause.message : "Hardware refresh failed"); }
|
|
finally { setRefreshing(false); }
|
|
}
|
|
|
|
async function refreshDashboard() {
|
|
if (refreshing) return;
|
|
setRefreshing(true);
|
|
setError(null);
|
|
try {
|
|
const [hardwareResult, deploymentResult, budgetResult] = await Promise.allSettled([
|
|
api.hardware(), api.capabilityDeployments(), api.scheduler(),
|
|
]);
|
|
if (hardwareResult.status === "fulfilled") setHardware(hardwareResult.value);
|
|
setDeploymentsLoaded(deploymentResult.status === "fulfilled" && Array.isArray(deploymentResult.value));
|
|
setBudgetsLoaded(budgetResult.status === "fulfilled" && Array.isArray(budgetResult.value));
|
|
if (deploymentResult.status === "fulfilled" && Array.isArray(deploymentResult.value)) setDeployments(deploymentResult.value);
|
|
if (budgetResult.status === "fulfilled" && Array.isArray(budgetResult.value)) setBudgets(budgetResult.value);
|
|
const failures = [hardwareResult, deploymentResult, budgetResult].filter((result) => result.status === "rejected");
|
|
setPollError(failures.length ? `${failures.length} command-center evidence source${failures.length === 1 ? "" : "s"} unavailable` : null);
|
|
setLastUpdated(new Date());
|
|
} finally { setRefreshing(false); }
|
|
}
|
|
|
|
function cycleTheme() {
|
|
setTheme((current) => (current === "system" ? "dark" : current === "dark" ? "light" : "system"));
|
|
}
|
|
|
|
async function unlockOperatorSession(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (!operatorDraft || unlocking) return;
|
|
setUnlocking(true);
|
|
setError(null);
|
|
try {
|
|
const verifiedSystem = await api.verifyOperatorCredential(operatorDraft);
|
|
setOperatorCredential(operatorDraft);
|
|
setOperatorDraft("");
|
|
setSystem(verifiedSystem);
|
|
setOperatorUnlocked(true);
|
|
} catch (cause: unknown) {
|
|
clearOperatorCredential();
|
|
setError(cause instanceof Error ? cause.message : "Operator authentication failed");
|
|
} finally {
|
|
setUnlocking(false);
|
|
}
|
|
}
|
|
|
|
function lockOperatorSession() {
|
|
clearOperatorCredential();
|
|
setOperatorDraft("");
|
|
setOperatorUnlocked(false);
|
|
setModels([]);
|
|
setProjects([]);
|
|
setProjectIntegrations([]);
|
|
setHardware(null);
|
|
setDeployments([]);
|
|
setBudgets([]);
|
|
setDeploymentsLoaded(false);
|
|
setBudgetsLoaded(false);
|
|
setSystem(null);
|
|
setError(null);
|
|
setPollError(null);
|
|
setLastUpdated(null);
|
|
}
|
|
|
|
const title = detailNode?.display_name ?? routeInfo.label;
|
|
const description = detailNode
|
|
? `Observed inventory and telemetry reported by this node's agent.`
|
|
: routeInfo.description;
|
|
|
|
if (!operatorUnlocked) {
|
|
return <OperatorSessionLock
|
|
credential={operatorDraft}
|
|
unlocking={unlocking}
|
|
error={error}
|
|
health={publicHealth}
|
|
release={publicRelease}
|
|
theme={theme}
|
|
onCredential={setOperatorDraft}
|
|
onSubmit={unlockOperatorSession}
|
|
onTheme={cycleTheme}
|
|
/>;
|
|
}
|
|
|
|
return <div className="shell">
|
|
<a className="skip-link" href="#workspace-content" onClick={(event) => {
|
|
event.preventDefault();
|
|
document.getElementById("workspace-content")?.focus();
|
|
}}>Skip to workspace</a>
|
|
<div className="mobile-bar" inert={navOpen ? true : undefined}>
|
|
<button
|
|
ref={menuButtonRef}
|
|
onClick={() => setNavOpen(true)}
|
|
aria-label="Open navigation"
|
|
aria-expanded={navOpen}
|
|
aria-controls="primary-sidebar"
|
|
>
|
|
<Menu size={17} />
|
|
</button>
|
|
<strong>{title}</strong>
|
|
<ThemeButton theme={theme} onClick={cycleTheme} />
|
|
</div>
|
|
|
|
{navOpen ? <div className="nav-scrim" aria-hidden="true" onClick={() => setNavOpen(false)} /> : null}
|
|
|
|
<aside
|
|
ref={sidebarRef}
|
|
id="primary-sidebar"
|
|
className={navOpen ? "sidebar open" : "sidebar"}
|
|
role={navOpen ? "dialog" : undefined}
|
|
aria-modal={navOpen ? true : undefined}
|
|
aria-label={navOpen ? "Primary navigation" : undefined}
|
|
>
|
|
<div className="brand">
|
|
<div className="brand-mark"><Boxes size={18} /></div>
|
|
<div className="brand-copy">
|
|
<strong>ModelForge</strong>
|
|
<span>Operator console</span>
|
|
</div>
|
|
{navOpen ? (
|
|
<button
|
|
ref={closeButtonRef}
|
|
className="theme-toggle"
|
|
onClick={() => setNavOpen(false)}
|
|
aria-label="Close navigation"
|
|
>
|
|
<X size={15} />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="nav-groups">
|
|
{navigationGroups.map((group) => (
|
|
<div className="nav-group" key={group}>
|
|
<span className="nav-group-label">{group}</span>
|
|
<nav aria-label={group}>
|
|
{navigation.filter((item) => item.group === group).map((item) => (
|
|
<button
|
|
key={item.key}
|
|
className={activeRoute === item.key ? "active" : ""}
|
|
onClick={() => navigate(item.key)}
|
|
aria-current={activeRoute === item.key ? "page" : undefined}
|
|
>
|
|
<item.icon size={16} />
|
|
<span className="nav-copy"><strong>{item.label}</strong><small>{item.shortDescription}</small></span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="sidebar-footer">
|
|
<span className={`status-dot ${error || pollError ? "error" : ""}`} />
|
|
{error || pollError ? "Control plane unavailable" : `Control plane ${system?.version ?? "…"}`}
|
|
</div>
|
|
</aside>
|
|
|
|
<main id="workspace-content" tabIndex={-1} inert={navOpen || paletteOpen ? true : undefined}>
|
|
<div className="workspace-toolbar" role="toolbar" aria-label="Workspace controls">
|
|
<div className="breadcrumbs"><span>ModelForge</span><span aria-hidden="true">/</span><strong>{routeInfo.group}</strong><span aria-hidden="true">/</span><span>{title}</span></div>
|
|
<div className="workspace-actions">
|
|
<button className="quick-jump" onClick={() => setPaletteOpen(true)}><Command size={14} /><span>Quick jump</span><kbd>Ctrl K</kbd></button>
|
|
<button className="session-lock" onClick={lockOperatorSession}><ShieldCheck size={14} /><span>Lock console</span></button>
|
|
<ThemeButton theme={theme} onClick={cycleTheme} />
|
|
</div>
|
|
</div>
|
|
<header className="page-header">
|
|
<div>
|
|
<span className="eyebrow">{routeInfo.group.toUpperCase()}</span>
|
|
<h1>{title}</h1>
|
|
<p>{description}</p>
|
|
</div>
|
|
<span className="foundation-badge"><span className={`status-dot ${error || pollError ? "error" : ""}`} />{system?.environment ?? "control plane"} · v{system?.version ?? "…"}</span>
|
|
</header>
|
|
|
|
{error ? (
|
|
<div className="error-banner" role="alert">
|
|
<strong>Operation failed</strong>
|
|
<span>{error}. No operational state is being inferred.</span>
|
|
</div>
|
|
) : null}
|
|
{pollError ? (
|
|
<div className="error-banner" role="status">
|
|
<strong>Live node updates paused</strong>
|
|
<span>{pollError}. Last-good state is retained.</span>
|
|
</div>
|
|
) : null}
|
|
|
|
{loading ? <LoadingState /> : null}
|
|
{!loading && activeRoute === "overview" ? (
|
|
<CommandCenter
|
|
system={system}
|
|
models={models}
|
|
projects={projects}
|
|
integrations={projectIntegrations}
|
|
hardware={hardware}
|
|
deployments={deployments}
|
|
budgets={budgets}
|
|
deploymentsLoaded={deploymentsLoaded}
|
|
budgetsLoaded={budgetsLoaded}
|
|
pollError={pollError}
|
|
lastUpdated={lastUpdated}
|
|
refreshing={refreshing}
|
|
onRefresh={refreshDashboard}
|
|
onNavigate={navigate}
|
|
/>
|
|
) : null}
|
|
{!loading && activeRoute === "models" ? <ModelsRegistry /> : null}
|
|
{!loading && activeRoute === "discover" ? <DiscoverWorkspace /> : null}
|
|
{!loading && activeRoute === "runtime" ? <RuntimeWorkspace /> : null}
|
|
{!loading && activeRoute === "capabilities" ? <CapabilityWorkspace onError={setError} /> : null}
|
|
{!loading && activeRoute === "evaluation" ? <EvaluationWorkspace /> : null}
|
|
{!loading && activeRoute === "recommendations" ? <AdvisorWorkspace /> : null}
|
|
{!loading && activeRoute === "lifecycle" ? <LifecycleWorkspace /> : null}
|
|
{!loading && activeRoute === "migrations" ? <MigrationWorkspace /> : null}
|
|
{!loading && activeRoute === "operations" ? <OperationsWorkspace /> : null}
|
|
{!loading && activeRoute === "recovery" ? <RecoveryWorkspace /> : null}
|
|
{!loading && activeRoute === "projects" ? <Projects projects={projects} integrations={projectIntegrations} /> : null}
|
|
{!loading && activeRoute === "nodes" && !route.startsWith("nodes/") ? (
|
|
<Nodes
|
|
hardware={hardware}
|
|
refreshing={refreshing}
|
|
onRefresh={refreshHardware}
|
|
onSelect={(id) => navigate(`nodes/${id}`)}
|
|
onError={setError}
|
|
/>
|
|
) : null}
|
|
{!loading && route.startsWith("nodes/") ? (
|
|
detailNode ? (
|
|
<NodeDetail
|
|
node={detailNode}
|
|
onBack={() => navigate("nodes")}
|
|
onChanged={async () => setHardware(await api.hardware())}
|
|
onError={setError}
|
|
/>
|
|
) : <EmptyState>Compute node not found.</EmptyState>
|
|
) : null}
|
|
{!loading && !routeInfo.implemented ? <FutureRoute title={routeInfo.label} /> : null}
|
|
</main>
|
|
<CommandPalette open={paletteOpen} navigation={navigation} onClose={() => setPaletteOpen(false)} onNavigate={navigate} />
|
|
</div>;
|
|
}
|
|
|
|
function OperatorSessionLock({
|
|
credential, unlocking, error, health, release, theme,
|
|
onCredential, onSubmit, onTheme,
|
|
}: {
|
|
credential: string;
|
|
unlocking: boolean;
|
|
error: string | null;
|
|
health: PublicHealth | null;
|
|
release: PublicRelease | null;
|
|
theme: Theme;
|
|
onCredential: (value: string) => void;
|
|
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
|
|
onTheme: () => void;
|
|
}) {
|
|
return <main className="operator-lock-shell">
|
|
<section className="operator-lock-card" aria-labelledby="operator-lock-title">
|
|
<div className="operator-lock-heading">
|
|
<div className="brand-mark"><Boxes size={20} /></div>
|
|
<div><span className="eyebrow">MODELFORGE CONTROL PLANE</span><h1 id="operator-lock-title">Operator session locked</h1></div>
|
|
<ThemeButton theme={theme} onClick={onTheme} />
|
|
</div>
|
|
<p>Unlock once to load governed models, projects, hardware and operational evidence. The credential stays only in this page's memory and is cleared when you lock or reload the console.</p>
|
|
<div className="operator-public-status" aria-label="Public platform status">
|
|
<div><span>API liveness</span><strong>{health?.status ?? "checking"}</strong></div>
|
|
<div><span>Release</span><strong>{release?.version ?? "checking"}</strong></div>
|
|
</div>
|
|
<form onSubmit={onSubmit}>
|
|
<label htmlFor="operator-session-key">Operator API key</label>
|
|
<input
|
|
id="operator-session-key"
|
|
name="operator-api-key"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={credential}
|
|
onChange={(event) => onCredential(event.target.value)}
|
|
autoFocus
|
|
/>
|
|
<button type="submit" disabled={!credential || unlocking}>
|
|
<ShieldCheck size={16} />{unlocking ? "Verifying…" : "Unlock operator session"}
|
|
</button>
|
|
</form>
|
|
{error ? <div className="error-banner" role="alert"><strong>Unlock denied</strong><span>{error}</span></div> : null}
|
|
<small>No credential is written to localStorage, sessionStorage, a URL, telemetry or logs.</small>
|
|
</section>
|
|
</main>;
|
|
}
|
|
|
|
function ThemeButton({ theme, onClick }: { theme: Theme; onClick: () => void }) {
|
|
const Icon = theme === "dark" ? Moon : theme === "light" ? Sun : Monitor;
|
|
const next = theme === "system" ? "dark" : theme === "dark" ? "light" : "system";
|
|
return (
|
|
<button className="theme-toggle" onClick={onClick} title={`Theme: ${theme}. Switch to ${next}.`} aria-label={`Theme: ${theme}. Switch to ${next}.`}>
|
|
<Icon size={15} />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function Nodes({ hardware, refreshing, onRefresh, onSelect, onError }: {
|
|
hardware: HardwareState | null; refreshing: boolean; onRefresh: () => void;
|
|
onSelect: (id: string) => void; onError: (message: string | null) => void;
|
|
}) {
|
|
const [enrolling, setEnrolling] = useState(false);
|
|
return <div className="hardware-stack">
|
|
<div className="hardware-toolbar">
|
|
<span>{hardware?.overview.node_count ?? 0} registered nodes · {hardware?.overview.accelerator_count ?? 0} accelerators</span>
|
|
<div className="toolbar-actions">
|
|
<button onClick={() => setEnrolling((value) => !value)}><Plus size={15} />Enroll node</button>
|
|
<button onClick={onRefresh} disabled={refreshing}>
|
|
<RefreshCw size={15} className={refreshing ? "spin" : ""} />{refreshing ? "Refreshing…" : "Refresh local"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{enrolling ? <EnrollmentPanel onClose={() => setEnrolling(false)} onError={onError} /> : null}
|
|
{!hardware?.nodes.length ? (
|
|
<EmptyState>No compute nodes are registered. Create an enrollment token to connect one.</EmptyState>
|
|
) : (
|
|
<section className="node-grid">
|
|
{hardware.nodes.map((node) => {
|
|
const gpu = node.accelerators[0];
|
|
return (
|
|
<button className="node-card panel" key={node.id} onClick={() => onSelect(node.id)}>
|
|
<div className="panel-header">
|
|
<div>
|
|
<span className="eyebrow">{node.observation_source.replace("_", " ")}</span>
|
|
<h2>{node.display_name}</h2>
|
|
</div>
|
|
<Liveness state={node.liveness} />
|
|
</div>
|
|
<div className="property-grid compact">
|
|
<Property label="Hostname" value={node.hostname} />
|
|
<Property label="Role" value={node.role ?? "unassigned"} />
|
|
<Property label="Agent" value={node.agent_version ?? "not reported"} />
|
|
<Property label="Last heartbeat" value={formatAge(node.last_heartbeat_at)} />
|
|
<Property label="Inventory age" value={formatSeconds(node.inventory_age_seconds)} />
|
|
<Property label="CPU / RAM" value={`${formatObserved(node.cpu_model)} · ${formatObservedBytes(node.total_ram_bytes)}`} />
|
|
</div>
|
|
<div className="node-card-footer">
|
|
<span>{gpu ? `${gpu.name} · ${formatObservedBytes(gpu.total_vram_bytes)}` : "No accelerator"}</span>
|
|
<span>{eligibility(node).join(" · ") || "not scheduler eligible"}</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</section>
|
|
)}
|
|
</div>;
|
|
}
|
|
|
|
function EnrollmentPanel({ onClose, onError }: { onClose: () => void; onError: (message: string | null) => void }) {
|
|
const sessionCredential = operatorCredentialReference();
|
|
const [adminToken, setAdminToken] = useState(sessionCredential);
|
|
const [displayName, setDisplayName] = useState("");
|
|
const [role, setRole] = useState("worker");
|
|
const [labelsJson, setLabelsJson] = useState("{}");
|
|
const [productionEligible, setProductionEligible] = useState(false);
|
|
const [labEligible, setLabEligible] = useState(true);
|
|
const [benchmarkEligible, setBenchmarkEligible] = useState(false);
|
|
const [result, setResult] = useState<EnrollmentCreated | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
async function submit(event: FormEvent) {
|
|
event.preventDefault();
|
|
setSubmitting(true);
|
|
onError(null);
|
|
try {
|
|
const labels = JSON.parse(labelsJson) as Record<string, string | boolean>;
|
|
if (!labels || Array.isArray(labels) || typeof labels !== "object") throw new Error("Labels must be a JSON object");
|
|
if (Object.values(labels).some((value) => typeof value !== "string" && typeof value !== "boolean")) {
|
|
throw new Error("Label values must be strings or booleans");
|
|
}
|
|
setResult(await api.createEnrollment({
|
|
expires_in_seconds: 900,
|
|
display_name: displayName || undefined,
|
|
role: role || undefined,
|
|
labels,
|
|
production_eligible: productionEligible,
|
|
lab_eligible: labEligible,
|
|
benchmark_eligible: benchmarkEligible,
|
|
}, adminToken));
|
|
setAdminToken("");
|
|
} catch (cause: unknown) {
|
|
onError(cause instanceof Error ? cause.message : "Enrollment creation failed");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
if (result) {
|
|
return <article className="panel enrollment-panel">
|
|
<span className="eyebrow">ONE-TIME SECRET</span>
|
|
<h2>Enrollment token created</h2>
|
|
<p>Copy this now. ModelForge stores only its hash and will never display it again.</p>
|
|
<code className="secret-output">{result.enrollment_token}</code>
|
|
<pre>{Object.entries(result.setup_environment).map(([key, value]) => `${key}=${value}`).join("\n")}</pre>
|
|
<small>
|
|
Expires {new Date(result.expires_at).toLocaleString()} and becomes invalid after first use.
|
|
Waiting for the first authenticated report; the node list updates automatically.
|
|
</small>
|
|
<button onClick={onClose}>Done</button>
|
|
</article>;
|
|
}
|
|
|
|
return <form className="panel enrollment-panel" onSubmit={submit}>
|
|
<span className="eyebrow">SECURE ONBOARDING</span>
|
|
<h2>Create one-time enrollment</h2>
|
|
<p>The operator credential stays in memory for this request and is never persisted by the UI.</p>
|
|
{!sessionCredential ? <label>Operator API key
|
|
<input type="password" required value={adminToken} onChange={(event) => setAdminToken(event.target.value)} autoComplete="off" />
|
|
</label> : null}
|
|
<label>Display name
|
|
<input value={displayName} onChange={(event) => setDisplayName(event.target.value)} placeholder="Inference server" />
|
|
</label>
|
|
<label>Role
|
|
<input value={role} onChange={(event) => setRole(event.target.value)} placeholder="worker" />
|
|
</label>
|
|
<label>Labels (JSON)
|
|
<input value={labelsJson} onChange={(event) => setLabelsJson(event.target.value)} />
|
|
</label>
|
|
<div className="eligibility-options">
|
|
<label><input type="checkbox" checked={productionEligible} onChange={(event) => setProductionEligible(event.target.checked)} />Production eligible</label>
|
|
<label><input type="checkbox" checked={labEligible} onChange={(event) => setLabEligible(event.target.checked)} />Lab eligible</label>
|
|
<label><input type="checkbox" checked={benchmarkEligible} onChange={(event) => setBenchmarkEligible(event.target.checked)} />Benchmark eligible</label>
|
|
</div>
|
|
<div className="form-actions">
|
|
<button type="button" onClick={onClose}>Cancel</button>
|
|
<button type="submit" disabled={submitting}>{submitting ? "Creating…" : "Create token"}</button>
|
|
</div>
|
|
</form>;
|
|
}
|
|
|
|
function NodeDetail({ node, onBack, onChanged, onError }: {
|
|
node: NodeState; onBack: () => void; onChanged: () => Promise<void>;
|
|
onError: (message: string | null) => void;
|
|
}) {
|
|
return <div className="hardware-stack">
|
|
<div className="hardware-toolbar">
|
|
<button onClick={onBack}>← All compute nodes</button>
|
|
<Liveness state={node.liveness} />
|
|
</div>
|
|
{node.last_connection_error ? (
|
|
<div className="error-banner"><strong>Agent report warning</strong><span>{node.last_connection_error}</span></div>
|
|
) : null}
|
|
<article className="panel hardware-node">
|
|
<div className="panel-header">
|
|
<div><span className="eyebrow">NODE ID {node.id}</span><h2>{node.hostname}</h2></div>
|
|
<span className={`status-chip ${node.status}`}>{node.status}</span>
|
|
</div>
|
|
<div className="property-grid">
|
|
<Property label="Source" value={node.observation_source.replaceAll("_", " ")} />
|
|
<Property label="Environment" value={node.environment ?? "unknown"} />
|
|
<Property label="OS / architecture" value={`${node.os_name ?? "unknown"} / ${node.architecture ?? "unknown"}`} />
|
|
<Property label="Fingerprint" value={node.hardware_fingerprint ? `${node.hardware_fingerprint.slice(0, 16)}…` : "unknown"} />
|
|
<Property label="Agent health" value={node.agent_health} />
|
|
<Property label="Agent / protocol" value={`${node.agent_version ?? "unknown"} / v${node.protocol_version ?? "?"}`} />
|
|
<Property label="Heartbeat" value={formatAge(node.last_heartbeat_at)} />
|
|
<Property label="Inventory age" value={formatSeconds(node.inventory_age_seconds)} />
|
|
<Property label="Telemetry age" value={formatSeconds(node.telemetry_age_seconds)} />
|
|
<Property label="Role" value={node.role ?? "unassigned"} />
|
|
<Property label="CPU" value={formatObserved(node.cpu_model)} />
|
|
<Property label="RAM" value={`${formatObservedBytes(node.available_ram_bytes)} free / ${formatObservedBytes(node.total_ram_bytes)}`} />
|
|
</div>
|
|
<div className="tags">
|
|
{Object.entries(node.labels).map(([key, value]) => <code key={key}>{key}={String(value)}</code>)}
|
|
{eligibility(node).map((item) => <code key={item}>{item}</code>)}
|
|
</div>
|
|
<div className="accelerator-grid">
|
|
{node.accelerators.length
|
|
? node.accelerators.map((gpu) => <GpuCard key={gpu.id} gpu={gpu} />)
|
|
: <EmptyState>No NVIDIA accelerator detected.</EmptyState>}
|
|
</div>
|
|
<div className="storage-list">
|
|
{node.storage.map((disk) => (
|
|
<div key={disk.id}>
|
|
<strong>{disk.purpose}</strong>
|
|
<code>{disk.path}</code>
|
|
<span>{formatObservedBytes(disk.free_bytes)} free / {formatObservedBytes(disk.total_bytes)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</article>
|
|
<NodeDecommissionPanel node={node} onChanged={onChanged} onError={onError} />
|
|
</div>;
|
|
}
|
|
|
|
function NodeDecommissionPanel({ node, onChanged, onError }: {
|
|
node: NodeState; onChanged: () => Promise<void>; onError: (message: string | null) => void;
|
|
}) {
|
|
const sessionCredential = operatorCredentialReference();
|
|
const [adminToken, setAdminToken] = useState(sessionCredential);
|
|
const [operator, setOperator] = useState("");
|
|
const [reason, setReason] = useState("");
|
|
const [confirmation, setConfirmation] = useState("");
|
|
const [preview, setPreview] = useState<NodeDecommissionPreview | null>(null);
|
|
const [result, setResult] = useState<NodeDecommissionResult | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [localError, setLocalError] = useState<string | null>(null);
|
|
const [idempotencyKey] = useState(() => `node-decommission:${node.id}:${Date.now()}`);
|
|
|
|
async function loadPreview() {
|
|
setBusy(true);
|
|
setLocalError(null);
|
|
onError(null);
|
|
try {
|
|
setPreview(await api.previewNodeDecommission(node.id, adminToken));
|
|
setResult(null);
|
|
} catch (cause: unknown) {
|
|
setLocalError(cause instanceof Error ? cause.message : "Decommission preview failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function execute() {
|
|
if (!preview?.safe) return;
|
|
setBusy(true);
|
|
setLocalError(null);
|
|
onError(null);
|
|
try {
|
|
const completed = await api.decommissionNode(node.id, {
|
|
expected_generation: preview.node_generation,
|
|
preview_digest: preview.dependency_digest,
|
|
idempotency_key: idempotencyKey,
|
|
operator,
|
|
reason,
|
|
confirmation,
|
|
}, adminToken);
|
|
setResult(completed);
|
|
setAdminToken("");
|
|
await onChanged();
|
|
} catch (cause: unknown) {
|
|
const message = cause instanceof Error ? cause.message : "Node decommission failed";
|
|
setLocalError(message);
|
|
if (cause instanceof ApiError && cause.code === "decommission_preview_stale") setPreview(null);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
if (node.decommissioned_at || result) {
|
|
return <section className="panel danger-zone decommission-complete" aria-labelledby="decommission-title">
|
|
<span className="eyebrow">TERMINAL NODE TOMBSTONE</span>
|
|
<h2 id="decommission-title">Node decommissioned</h2>
|
|
<p>Old credentials are revoked and this persisted identity cannot automatically enroll, publish inventory, or return online.</p>
|
|
<div className="property-grid compact">
|
|
<Property label="When" value={new Date(result?.decommissioned_at ?? node.decommissioned_at!).toLocaleString()} />
|
|
<Property label="Operator" value={(node.decommissioned_by ?? operator) || "recorded in audit"} />
|
|
<Property label="Operation" value={result?.operation_id ?? "retained in authoritative history"} />
|
|
<Property label="Reason" value={(node.decommission_reason ?? reason) || "retained in audit"} />
|
|
</div>
|
|
</section>;
|
|
}
|
|
|
|
return <section className="panel danger-zone" aria-labelledby="decommission-title">
|
|
<span className="eyebrow">DANGER ZONE · AUDITED LIFECYCLE</span>
|
|
<h2 id="decommission-title">Decommission this node</h2>
|
|
<p>This is not a delete. Preview first; execution fails closed if work, residency, leases, approvals, migrations, enrollment, or production safety still depends on the node.</p>
|
|
{localError ? <div className="error-banner" role="alert"><strong>Decommission refused</strong><span>{localError}</span></div> : null}
|
|
<div className="decommission-form">
|
|
{!sessionCredential ? <label>Operator API key<input type="password" autoComplete="off" value={adminToken} onChange={(event) => setAdminToken(event.target.value)} /></label> : null}
|
|
<label>Operator identity<input value={operator} onChange={(event) => setOperator(event.target.value)} placeholder="name or change owner" /></label>
|
|
<label className="wide">Reason<textarea value={reason} onChange={(event) => setReason(event.target.value)} placeholder="Why this node is permanently leaving service" /></label>
|
|
<button onClick={loadPreview} disabled={busy || !adminToken}>{busy ? "Checking…" : "Preview decommission"}</button>
|
|
</div>
|
|
{preview ? <div className="decommission-preview" aria-live="polite">
|
|
<div className={`decommission-verdict ${preview.safe ? "safe" : "blocked"}`}>
|
|
<strong>{preview.safe ? "Safe to decommission" : `${preview.blockers.length} safety blocker${preview.blockers.length === 1 ? "" : "s"}`}</strong>
|
|
<span>Generation {preview.node_generation} · dependency digest {preview.dependency_digest.slice(0, 12)}…</span>
|
|
</div>
|
|
{preview.blockers.length ? <div className="decommission-blockers">
|
|
<h3>Blocking dependencies</h3>
|
|
{preview.blockers.map((blocker) => <article key={`${blocker.code}-${blocker.record_type}`}>
|
|
<strong>{blocker.code.replaceAll("_", " ")}</strong>
|
|
<span>{blocker.message}</span>
|
|
<code>{blocker.record_type} · {blocker.count}</code>
|
|
</article>)}
|
|
</div> : null}
|
|
<div className="decommission-columns">
|
|
<DecommissionCounts title="Current state affected" rows={preview.cleanup} />
|
|
<DecommissionCounts title="Historical evidence retained" rows={preview.preserved} />
|
|
</div>
|
|
{preview.safe ? <div className="decommission-confirmation">
|
|
<label>Type <code>{preview.persisted_identity}</code>, <code>{preview.hostname}</code>, or <code>{preview.display_name}</code> to confirm
|
|
<input value={confirmation} onChange={(event) => setConfirmation(event.target.value)} autoComplete="off" />
|
|
</label>
|
|
<button
|
|
className="danger-action"
|
|
onClick={execute}
|
|
disabled={busy || operator.trim().length === 0 || reason.trim().length < 10 || ![preview.persisted_identity, preview.hostname, preview.display_name].includes(confirmation)}
|
|
>{busy ? "Decommissioning…" : "Permanently decommission node"}</button>
|
|
</div> : null}
|
|
</div> : null}
|
|
</section>;
|
|
}
|
|
|
|
function DecommissionCounts({ title, rows }: { title: string; rows: NodeDecommissionRecordCount[] }) {
|
|
return <div><h3>{title}</h3><dl>{rows.map((row) => <div key={`${row.record_type}-${row.action}`}>
|
|
<dt>{row.record_type.replaceAll("_", " ")}</dt><dd>{row.count} · {row.action.replaceAll("_", " ")}</dd>
|
|
</div>)}</dl></div>;
|
|
}
|
|
|
|
function Liveness({ state }: { state: NodeState["liveness"] }) {
|
|
return <span className={`liveness ${state}`}><i />{state}</span>;
|
|
}
|
|
|
|
function eligibility(node: NodeState): string[] {
|
|
return [node.production_eligible && "production", node.lab_eligible && "lab", node.benchmark_eligible && "benchmark"]
|
|
.filter((value): value is string => Boolean(value));
|
|
}
|
|
|
|
function formatAge(value?: string | null): string {
|
|
if (!value) return "never";
|
|
const seconds = Math.max(0, Math.round((Date.now() - new Date(value).getTime()) / 1000));
|
|
return `${formatSeconds(seconds)} ago`;
|
|
}
|
|
|
|
function formatSeconds(value?: number | null): string {
|
|
if (value == null) return "unknown";
|
|
if (value < 60) return `${value}s`;
|
|
if (value < 3600) return `${Math.floor(value / 60)}m`;
|
|
return `${Math.floor(value / 3600)}h`;
|
|
}
|
|
|
|
function formatObserved<T>(observation?: ObservedValue<T> | null): string {
|
|
if (!observation || observation.availability !== "known") {
|
|
return observation?.availability?.replace("_", " ") ?? "unknown";
|
|
}
|
|
return String(observation.value);
|
|
}
|
|
|
|
function formatObservedBytes(observation?: ObservedValue<number> | null): string {
|
|
return observation?.availability === "known" && observation.value != null
|
|
? `${(observation.value / 1024 ** 3).toFixed(1)} GB`
|
|
: formatObserved(observation);
|
|
}
|
|
|
|
function Meter({ value }: { value?: ObservedValue<number> | null }) {
|
|
const percent = value?.availability === "known" && value.value != null
|
|
? Math.max(0, Math.min(100, value.value))
|
|
: null;
|
|
return (
|
|
<div className="meter" aria-label={percent == null ? formatObserved(value) : `${percent}%`}>
|
|
<span style={{ width: percent == null ? "0%" : `${percent}%` }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Property({ label, value }: { label: string; value: string }) {
|
|
return <div className="property"><span>{label}</span><strong>{value}</strong></div>;
|
|
}
|
|
|
|
function GpuCard({ gpu }: { gpu: AcceleratorState }) {
|
|
const compute = gpu.compute_capability_major.availability === "known" && gpu.compute_capability_minor.availability === "known"
|
|
? `${gpu.compute_capability_major.value}.${gpu.compute_capability_minor.value}`
|
|
: "unknown";
|
|
return <div className="gpu-card">
|
|
<div className="gpu-title">
|
|
<div>
|
|
<span className="eyebrow">NVIDIA ACCELERATOR</span>
|
|
<h3>{gpu.name}</h3>
|
|
<code>{gpu.device_uuid.length > 22 ? `${gpu.device_uuid.slice(0, 18)}…` : gpu.device_uuid}</code>
|
|
</div>
|
|
<span className={`status-chip ${gpu.status}`}>{gpu.status}</span>
|
|
</div>
|
|
<div className="gpu-meter-row">
|
|
<span>GPU utilization</span>
|
|
<strong>
|
|
{gpu.telemetry
|
|
? formatObserved(gpu.telemetry.gpu_utilization_percent) + (gpu.telemetry.gpu_utilization_percent.availability === "known" ? "%" : "")
|
|
: "unknown"}
|
|
</strong>
|
|
</div>
|
|
<Meter value={gpu.telemetry?.gpu_utilization_percent} />
|
|
<div className="property-grid compact">
|
|
<Property label="VRAM" value={`${formatObservedBytes(gpu.telemetry?.used_vram_bytes)} / ${formatObservedBytes(gpu.total_vram_bytes)}`} />
|
|
<Property label="Temperature" value={gpu.telemetry?.temperature_c.availability === "known" ? `${gpu.telemetry.temperature_c.value} °C` : formatObserved(gpu.telemetry?.temperature_c)} />
|
|
<Property label="Power" value={gpu.telemetry?.power_draw_w.availability === "known" ? `${gpu.telemetry.power_draw_w.value} W` : formatObserved(gpu.telemetry?.power_draw_w)} />
|
|
<Property label="Driver" value={formatObserved(gpu.driver_version)} />
|
|
<Property label="Compute" value={compute} />
|
|
<Property label="PCI" value={formatObserved(gpu.pci_bus_id)} />
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
function ModelRows({ models }: { models: ModelSummary[] }) {
|
|
if (!models.length) return <EmptyState>No candidate metadata has been registered.</EmptyState>;
|
|
return <div className="model-list">
|
|
{models.map((model) => {
|
|
const capabilities = Array.isArray(model.interpretation_metadata.intended_capabilities)
|
|
? model.interpretation_metadata.intended_capabilities.map(String)
|
|
: [];
|
|
return <div className="model-row" key={model.id}>
|
|
<div className="model-icon"><Cpu size={17} /></div>
|
|
<div className="model-copy">
|
|
<strong>{model.display_name}</strong>
|
|
<span>{String(model.interpretation_metadata.proposed_role ?? "No local role interpretation")}</span>
|
|
<div className="tags">{capabilities.map((capability) => <code key={capability}>{capability}</code>)}</div>
|
|
</div>
|
|
<div className="model-meta">
|
|
<span className="pill candidate">{model.verification_status}</span>
|
|
<small>{model.deployment_status.replace("_", " ")}</small>
|
|
</div>
|
|
</div>;
|
|
})}
|
|
</div>;
|
|
}
|
|
|
|
function Projects({ projects, integrations }: { projects: ProjectSummary[]; integrations: ProjectIntegration[] }) {
|
|
if (!projects.length) return <EmptyState>No project manifests are registered.</EmptyState>;
|
|
const activeIntegrations = integrations.filter((item) => item.state.toLowerCase() === "active").length;
|
|
const requestVolume = integrations.reduce((sum, item) => sum + item.usage.request_volume, 0);
|
|
return <div className="projects-workspace">
|
|
<section className="projects-summary" aria-label="Project integration summary">
|
|
<div><span>Registered projects</span><strong>{projects.length}</strong><small>Manifest-backed consumers</small></div>
|
|
<div><span>Capability bindings</span><strong>{projects.reduce((sum, item) => sum + item.bindings.length, 0)}</strong><small>No concrete model paths</small></div>
|
|
<div><span>Active integrations</span><strong>{activeIntegrations}/{integrations.length}</strong><small>{requestVolume.toLocaleString()} observed requests</small></div>
|
|
</section>
|
|
<section className="projects-list">
|
|
{projects.map((project) => {
|
|
const active = integrations.filter((item) => item.project_key === project.id);
|
|
return <article className="panel project-workspace-card" key={project.id}>
|
|
<header className="project-title-row"><div><span className="eyebrow">PROJECT · {project.id}</span><h2>{project.name}</h2><p>{project.description}</p></div><span className="project-count">{project.bindings.length} bindings · {active.length} integrations</span></header>
|
|
<div className="project-columns">
|
|
<section className="project-bindings" aria-label={`${project.name} capability bindings`}>
|
|
<div className="section-label"><span>Declared capability contracts</span><small>Manifest source of truth</small></div>
|
|
{project.bindings.map((binding) => <div className="project-binding-row" key={binding.capability}>
|
|
<code>{binding.capability}@{binding.contract_version}</code>
|
|
<span>{binding.binding.channel} · {binding.binding.priority}{binding.binding.optional ? " · optional" : ""}</span>
|
|
</div>)}
|
|
</section>
|
|
<section className="project-integrations" aria-label={`${project.name} operational integrations`}>
|
|
<div className="section-label"><span>Operational integrations</span><small>Credential identity, usage and project fit</small></div>
|
|
{active.length ? active.map((item) => <article className="integration-row" key={item.client_id}>
|
|
<div className="integration-title"><div><code>{item.capability}</code><small>{item.client_name} · {item.environment}</small></div><span className={`registry-status ${item.state.toLowerCase()}`}>{item.state}</span></div>
|
|
<p>{item.purpose}</p>
|
|
<div className="integration-metrics"><span><small>Requests</small><strong>{item.usage.request_volume.toLocaleString()}</strong></span><span><small>Success</small><strong>{item.usage.successful_requests.toLocaleString()}</strong></span><span><small>Errors</small><strong>{item.usage.error_count.toLocaleString()}</strong></span><span><small>p95</small><strong>{item.usage.latency_p95_ms == null ? "—" : `${item.usage.latency_p95_ms.toFixed(1)} ms`}</strong></span></div>
|
|
<div className="project-fit-row"><span>Engineering <strong>{item.project_fit?.engineering_integration ?? "INCOMPLETE"}</strong></span><span>Fit <strong>{item.project_fit?.recommendation ?? "REQUIRES_MORE_EVIDENCE"}</strong></span><span>Production <strong>{item.project_fit?.production_validation ?? "REQUIRED"}</strong></span></div>
|
|
</article>) : <div className="inline-empty"><ShieldCheck size={18} /><div><strong>Planning bindings only</strong><p>No scoped consumer identity has used ModelForge yet.</p></div></div>}
|
|
</section>
|
|
</div>
|
|
</article>;
|
|
})}
|
|
</section>
|
|
</div>;
|
|
}
|
|
|
|
function FutureRoute({ title }: { title: string }) {
|
|
return <div className="future-state">
|
|
<FlaskConical size={28} />
|
|
<span className="eyebrow">NOT AVAILABLE IN THIS RELEASE</span>
|
|
<h2>{title} has no console workspace in this release</h2>
|
|
<p>The route is reserved in the information architecture. ModelForge will not fabricate data or expose premature controls.</p>
|
|
</div>;
|
|
}
|