MVP: Pulse, Memory, History modules
- Mobile-first PWA with dark glassmorphic theme - Pulse: status card, recent sessions, memory snapshot - Memory: view/edit agent + user memory with usage bars - History: session list, platform filter, search, session replay - TanStack Query hooks for all Hermes WebAPI endpoints - Bottom tab navigation, safe-area support
This commit is contained in:
Hermes
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { ArrowLeft, MessageSquare, Wrench } 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";
|
||||
|
||||
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = use(params);
|
||||
const { data: sessionData } = useSession(id);
|
||||
const { data: messagesData, isLoading } = useMessages(id);
|
||||
|
||||
const session = sessionData?.session;
|
||||
const messages = messagesData?.items || [];
|
||||
|
||||
// Group tool results with their preceding assistant tool_calls
|
||||
const visibleMessages = messages.filter(
|
||||
(m) => m.role === "user" || m.role === "assistant"
|
||||
);
|
||||
|
||||
// Collect tool results keyed by tool_call_id
|
||||
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 || "",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/history" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
|
||||
<ArrowLeft size={20} className="text-zinc-400" />
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-base font-semibold text-zinc-200 truncate">
|
||||
{session?.title || `Session ${id.slice(0, 8)}`}
|
||||
</h1>
|
||||
{session && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
<span className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${platformBadgeClass(session.source)}`}>
|
||||
{session.source}
|
||||
</span>
|
||||
<span>{session.message_count} msgs</span>
|
||||
<span>{formatTokens(session.input_tokens + session.output_tokens)} tok</span>
|
||||
<span>{timeAgo(session.started_at)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="glass p-4 animate-pulse">
|
||||
<div className="h-4 bg-white/[0.06] rounded w-full mb-2" />
|
||||
<div className="h-4 bg-white/[0.06] rounded w-3/4" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{visibleMessages.map((m) => (
|
||||
<MessageBubble
|
||||
key={m.id}
|
||||
message={m}
|
||||
toolResults={toolResults}
|
||||
/>
|
||||
))}
|
||||
{visibleMessages.length === 0 && (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
Empty session
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Clock, Search, X } from "lucide-react";
|
||||
import { useSessions, useSessionSearch } from "@/lib/hooks";
|
||||
import { SessionCard } from "@/components/SessionCard";
|
||||
|
||||
const PLATFORMS = [
|
||||
{ id: null, label: "All" },
|
||||
{ id: "cli", label: "CLI" },
|
||||
{ id: "telegram", label: "Telegram" },
|
||||
{ id: "discord", label: "Discord" },
|
||||
{ id: "web", label: "Web" },
|
||||
] as const;
|
||||
|
||||
export default function HistoryPage() {
|
||||
const [filter, setFilter] = useState<string | null>(null);
|
||||
const [query, setQuery] = useState("");
|
||||
const [searching, setSearching] = useState(false);
|
||||
|
||||
const { data: sessionsData, isLoading } = useSessions(30, filter || undefined);
|
||||
const { data: searchData, isFetching: searchLoading } = useSessionSearch(
|
||||
searching ? query : ""
|
||||
);
|
||||
|
||||
const showSearch = searching && query.length >= 2;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={20} style={{ color: "#22c55e" }} />
|
||||
<h1 className="text-xl font-bold" style={{ color: "#22c55e" }}>History</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="relative">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => { setQuery(e.target.value); setSearching(true); }}
|
||||
onFocus={() => setSearching(true)}
|
||||
placeholder="Search sessions..."
|
||||
className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm bg-white/[0.04] border border-white/[0.08] text-zinc-200 placeholder-zinc-600 outline-none focus:border-white/[0.15] transition-colors"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => { setQuery(""); setSearching(false); }}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search results */}
|
||||
{showSearch ? (
|
||||
<div>
|
||||
<div className="text-xs text-zinc-500 mb-2">
|
||||
{searchLoading ? "Searching..." : `${searchData?.count || 0} results`}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{searchData?.results?.map((r) => (
|
||||
<a key={r.message_id} href={`/history/${r.session_id}`}>
|
||||
<div className="glass glass-hover p-3 transition-all">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-medium text-zinc-400">
|
||||
{r.session_title || r.session_id.slice(0, 8)}
|
||||
</span>
|
||||
<span className="text-[10px] text-zinc-600">{r.role}</span>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-300 line-clamp-2">{r.content}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Platform filter */}
|
||||
<div className="flex gap-1.5 overflow-x-auto pb-1 -mx-1 px-1">
|
||||
{PLATFORMS.map((p) => (
|
||||
<button
|
||||
key={p.id || "all"}
|
||||
onClick={() => setFilter(p.id)}
|
||||
className="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-all shrink-0"
|
||||
style={{
|
||||
background: filter === p.id ? "rgba(34,197,94,0.15)" : "rgba(255,255,255,0.04)",
|
||||
color: filter === p.id ? "#22c55e" : "#6b7280",
|
||||
border: `1px solid ${filter === p.id ? "rgba(34,197,94,0.3)" : "rgba(255,255,255,0.06)"}`,
|
||||
}}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Session list */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="glass p-4 animate-pulse">
|
||||
<div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
|
||||
<div className="h-3 bg-white/[0.06] rounded w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sessionsData?.items?.map((s) => (
|
||||
<SessionCard key={s.id} session={s} />
|
||||
))}
|
||||
{sessionsData?.items?.length === 0 && (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
No sessions found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user