diff --git a/app/history/[id]/page.tsx b/app/history/[id]/page.tsx
index 8143e0c..8c26345 100644
--- a/app/history/[id]/page.tsx
+++ b/app/history/[id]/page.tsx
@@ -259,7 +259,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
)}
{visibleMessages.map((m) => (
-
+
))}
{visibleMessages.length === 0 && !sending && (
diff --git a/components/MessageBubble.tsx b/components/MessageBubble.tsx
index c03b4a9..0d9cdf4 100644
--- a/components/MessageBubble.tsx
+++ b/components/MessageBubble.tsx
@@ -10,6 +10,7 @@ interface Props {
message: Message;
toolResults: Map;
verbosity?: Verbosity;
+ showTimestamp?: boolean;
}
function ReasoningBlock({ text }: { text: string }) {
@@ -72,7 +73,7 @@ function ToolCallBlock({ tc, result, defaultOpen, showResult }: { tc: ToolCall;
);
}
-export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
+export function MessageBubble({ message, toolResults, verbosity = "normal", showTimestamp = false }: Props) {
const isUser = message.role === "user";
const content = message.content || "";
const reasoning = message.reasoning || "";
@@ -132,6 +133,13 @@ export function MessageBubble({ message, toolResults, verbosity = "normal" }: Pr
(tool calls only)
)}
+
+ {/* Timestamp */}
+ {showTimestamp && message.timestamp && (
+
+ {new Date(message.timestamp * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+
+ )}
);
diff --git a/components/SessionCard.tsx b/components/SessionCard.tsx
index 635a6b6..f84fd10 100644
--- a/components/SessionCard.tsx
+++ b/components/SessionCard.tsx
@@ -22,6 +22,11 @@ export function SessionCard({ session }: { session: Session }) {
{session.message_count} msgs
+ {session.model && (
+
+ {session.model.split("/").pop()?.replace("claude-", "").slice(0, 12)}
+
+ )}
{tokens > 0 && (
{formatTokens(tokens)}
diff --git a/components/StatusCard.tsx b/components/StatusCard.tsx
index 574f3fb..4e89738 100644
--- a/components/StatusCard.tsx
+++ b/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 (
+
+
+
+
WebAPI Unreachable
+
+ Check that hermes-webapi is running on port 8643
+
+
+
+ );
+ }
+
return (