Improve chat UX: thinking indicator, pending message, 5min timeout

app/api/sessions/[id]/chat/route.ts

@@ -6,17 +6,23 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
   const { id } = await params;
   const body = await req.json();
   try {
+    // Agent chat can take a while — 5 minute timeout
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 300_000);
     const res = await fetch(BACKEND + "/api/sessions/" + id + "/chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
+      signal: controller.signal,
     });
+    clearTimeout(timeout);
     const data = await res.text();
     return new NextResponse(data, {
       status: res.status,
       headers: { "content-type": "application/json" },
     });
-  } catch {
-    return NextResponse.json({ error: "backend unreachable" }, { status: 502 });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "backend unreachable";
+    return NextResponse.json({ error: msg }, { status: 502 });
   }
 }

app/history/[id]/page.tsx

@@ -1,26 +1,29 @@
 "use client";
 
-import { use, useState, useRef, useEffect } from "react";
-import { ArrowLeft, Send } from "lucide-react";
+import { use, useState, useRef } from "react";
+import { ArrowLeft, Send, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { useSession, useMessages } from "@/lib/hooks";
 import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
 import { MessageBubble } from "@/components/MessageBubble";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
+  const qc = useQueryClient();
   const { data: sessionData } = useSession(id);
-  const { data: messagesData, isLoading, refetch } = useMessages(id);
+  const { data: messagesData, isLoading } = useMessages(id);
   const [input, setInput] = useState("");
   const [sending, setSending] = useState(false);
+  const [pendingMsg, setPendingMsg] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const session = sessionData?.session;
   const messages = messagesData?.items || [];
 
-  const visibleMessages = messages.filter(
-    (m) => m.role === "user" || m.role === "assistant"
-  ).reverse(); // newest first
+  const visibleMessages = messages
+    .filter((m) => m.role === "user" || m.role === "assistant")
+    .reverse();
 
   const toolResults = new Map<string, { name: string; content: string }>();
   for (const m of messages) {
@@ -34,20 +37,23 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
 
   const sendMessage = async () => {
     if (!input.trim() || sending) return;
+    const msg = input.trim();
+    setInput("");
     setSending(true);
+    setPendingMsg(msg);
+
     try {
       await fetch("/api/sessions/" + id + "/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: input.trim() }),
+        body: JSON.stringify({ message: msg }),
       });
-      setInput("");
-      // Poll for response
-      setTimeout(() => refetch(), 2000);
-      setTimeout(() => refetch(), 5000);
-      setTimeout(() => refetch(), 10000);
     } catch {}
+
+    setPendingMsg(null);
     setSending(false);
+    qc.invalidateQueries({ queryKey: ["messages", id] });
+    qc.invalidateQueries({ queryKey: ["session", id] });
   };
 
   return (
@@ -82,7 +88,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && sendMessage()}
-          placeholder="Send a message..."
+          placeholder={sending ? "Hermes is thinking..." : "Send a message..."}
           className="flex-1 px-4 py-2.5 rounded-xl text-sm outline-none transition-colors"
           style={{
             background: "var(--bg-raised)",
@@ -97,7 +103,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
           className="px-3 rounded-xl transition-opacity disabled:opacity-20"
           style={{ background: "var(--accent)", color: "white" }}
         >
-          <Send size={16} />
+          {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
         </button>
       </div>
 
@@ -113,10 +119,31 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
         </div>
       ) : (
         <div className="space-y-2">
+          {/* Pending thinking indicator */}
+          {sending && (
+            <div className="flex justify-start">
+              <div className="rounded-2xl px-3.5 py-2.5" style={{ background: "var(--bg-raised)" }}>
+                <div className="flex items-center gap-2 text-[13px]" style={{ color: "var(--text-2)" }}>
+                  <Loader2 size={14} className="animate-spin" style={{ color: "var(--accent)" }} />
+                  Thinking...
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Pending user message */}
+          {pendingMsg && (
+            <div className="flex justify-end">
+              <div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 opacity-60" style={{ background: "var(--accent)", color: "white" }}>
+                <p className="text-[14px]">{pendingMsg}</p>
+              </div>
+            </div>
+          )}
+
           {visibleMessages.map((m) => (
             <MessageBubble key={m.id} message={m} toolResults={toolResults} />
           ))}
-          {visibleMessages.length === 0 && (
+          {visibleMessages.length === 0 && !sending && (
             <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
               Empty session
             </p>