hermes-os/components/StatusCard.tsx

"use client";

import { useHealth, useConfig, useSessions } from "@/lib/hooks";

export function StatusCard() {
  const { data: health } = 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;

  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>
  );
}