Hermes
517583d1c4
- Mobile-first PWA with dark glassmorphic theme - Pulse: status card, recent sessions, memory snapshot - Memory: view/edit agent + user memory with usage bars - History: session list, platform filter, search, session replay - TanStack Query hooks for all Hermes WebAPI endpoints - Bottom tab navigation, safe-area support
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Cpu, Wifi, WifiOff } from "lucide-react";
|
|
import { useHealth, useConfig } from "@/lib/hooks";
|
|
|
|
export function StatusCard() {
|
|
const { data: health } = useHealth();
|
|
const { data: config } = useConfig();
|
|
|
|
const online = health?.status === "ok";
|
|
const model = config?.model || "—";
|
|
const provider = config?.provider || "custom";
|
|
|
|
return (
|
|
<div className="glass p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Cpu size={18} style={{ color: "#f59e0b" }} />
|
|
<span className="font-semibold text-sm">Hermes</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{
|
|
background: online ? "#22c55e" : "#ef4444",
|
|
}}
|
|
/>
|
|
{online ? (
|
|
<Wifi size={14} style={{ color: "#22c55e" }} />
|
|
) : (
|
|
<WifiOff size={14} style={{ color: "#ef4444" }} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 text-xs">
|
|
<div>
|
|
<div className="text-zinc-500">Model</div>
|
|
<div className="text-zinc-200 font-mono truncate">{model}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-zinc-500">Provider</div>
|
|
<div className="text-zinc-200 font-mono truncate">{provider}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|