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 (