Message timestamps in full mode, API error state, model badges on session list

components/StatusCard.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useHealth, useConfig, useSessions } from "@/lib/hooks";
+import { AlertTriangle } from "lucide-react";
 
 export function StatusCard() {
-  const { data: health } = useHealth();
+  const { data: health, isError: healthError } = useHealth();
   const { data: config } = useConfig();
   const { data: sessions } = useSessions(10);
 
@@ -11,6 +12,20 @@ export function StatusCard() {
   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>