ceba8556f5
- Split 1189-line runtimes-page.tsx into focused sub-components (list, detail, ping, usage, 5 chart files, shared UI, utils) - Add useRuntimeStore zustand store for shared runtime state across pages (agents page now uses it too) - Add 7d/30d/90d time range selector to usage charts - Add full-stack runtime delete: SQL query, Go handler, API route, frontend with confirmation dialog - Remove unused daemon:heartbeat WS listener (server never broadcasts it)
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { Monitor, Cloud, Wifi, WifiOff } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
export function RuntimeModeIcon({ mode }: { mode: string }) {
|
|
return mode === "cloud" ? (
|
|
<Cloud className="h-3.5 w-3.5" />
|
|
) : (
|
|
<Monitor className="h-3.5 w-3.5" />
|
|
);
|
|
}
|
|
|
|
export function StatusBadge({ status }: { status: string }) {
|
|
const isOnline = status === "online";
|
|
return (
|
|
<Badge
|
|
variant="secondary"
|
|
className={isOnline ? "bg-success/10 text-success" : ""}
|
|
>
|
|
{isOnline ? (
|
|
<Wifi className="h-3 w-3" />
|
|
) : (
|
|
<WifiOff className="h-3 w-3" />
|
|
)}
|
|
{isOnline ? "Online" : "Offline"}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
export function InfoField({
|
|
label,
|
|
value,
|
|
mono,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
mono?: boolean;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">{label}</div>
|
|
<div
|
|
className={`mt-0.5 text-sm truncate ${mono ? "font-mono text-xs" : ""}`}
|
|
>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TokenCard({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="rounded-lg border px-3 py-2">
|
|
<div className="text-xs text-muted-foreground">{label}</div>
|
|
<div className="mt-0.5 text-sm font-semibold tabular-nums">{value}</div>
|
|
</div>
|
|
);
|
|
}
|