hermes-os/app/history/[id]/page.tsx

"use client";

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

  const toolResults = new Map<string, { name: string; content: string }>();
  for (const m of messages) {
    if (m.role === "tool" && m.tool_call_id) {
      toolResults.set(m.tool_call_id, {
        name: m.tool_name || "tool",
        content: m.content || "",
      });
    }
  }

  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: msg }),
      });
    } catch {}

    setPendingMsg(null);
    setSending(false);
    qc.invalidateQueries({ queryKey: ["messages", id] });
    qc.invalidateQueries({ queryKey: ["session", id] });
  };

  return (
    <div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
      {/* Header */}
      <div className="flex items-center gap-3 mb-4">
        <Link href="/history" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
          <ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
        </Link>
        <div className="flex-1 min-w-0">
          <div className="text-[15px] font-medium truncate" style={{ color: "var(--text-1)" }}>
            {session?.title || "Session " + id.slice(0, 8)}
          </div>
          {session && (
            <div className="flex items-center gap-2 mt-0.5">
              <span className={`badge ${platformBadgeClass(session.source)}`}>
                {session.source}
              </span>
              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
                {session.message_count} msgs · {formatTokens(session.input_tokens + session.output_tokens)} · {timeAgo(session.started_at)}
              </span>
            </div>
          )}
        </div>
      </div>

      {/* Message input */}
      <div className="flex gap-2 mb-4">
        <input
          ref={inputRef}
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
          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)",
            border: "1px solid var(--border)",
            color: "var(--text-1)",
          }}
          disabled={sending}
        />
        <button
          onClick={sendMessage}
          disabled={!input.trim() || sending}
          className="px-3 rounded-xl transition-opacity disabled:opacity-20"
          style={{ background: "var(--accent)", color: "white" }}
        >
          {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
        </button>
      </div>

      {/* Messages - newest first */}
      {isLoading ? (
        <div className="space-y-3">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="card p-4 animate-pulse">
              <div className="h-4 rounded w-full mb-2" style={{ background: "var(--bg-hover)" }} />
              <div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
            </div>
          ))}
        </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 && !sending && (
            <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
              Empty session
            </p>
          )}
        </div>
      )}
    </div>
  );
}