Hermes
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useHealth, useConfig, useSessions } from "@/lib/hooks";
|
|
import { AlertTriangle } from "lucide-react";
|
|
|
|
export function StatusCard() {
|
|
const { data: health, isError: healthError } = useHealth();
|
|
const { data: config } = useConfig();
|
|
const { data: sessions } = useSessions(10);
|
|
|
|
const online = health?.status === "ok";
|
|
const model = config?.model || "—";
|
|
const activeSessions = sessions?.items?.filter((s) => !s.ended_at).length || 0;
|
|
|
|
if (healthError) {
|
|
return (
|
|
<div className="card p-4 flex items-center gap-3">
|
|
<AlertTriangle size={18} style={{ color: "#ff3b30" }} />
|
|
<div>
|
|
<div className="text-[13px] font-medium" style={{ color: "#ff3b30" }}>WebAPI Unreachable</div>
|
|
<div className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
|
Check that hermes-webapi is running on port 8643
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="card p-4 flex items-center justify-between">
|
|
<div>
|
|
<div className="text-[13px] font-mono" style={{ color: "var(--text-2)" }}>
|
|
{model}
|
|
</div>
|
|
{activeSessions > 0 && (
|
|
<div className="text-[11px] mt-0.5" style={{ color: "var(--accent)" }}>
|
|
{activeSessions} active session{activeSessions !== 1 ? "s" : ""}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{ background: online ? "#34c759" : "#ff3b30" }}
|
|
/>
|
|
<span className="text-xs" style={{ color: online ? "#34c759" : "#ff3b30" }}>
|
|
{online ? "Online" : "Offline"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|