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
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,50 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0f;
|
||||
color: #f0f0f0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
/* Glass card */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.glass-hover:active {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||||
|
||||
/* Safe area padding for bottom nav */
|
||||
.pb-safe {
|
||||
padding-bottom: calc(4.5rem + var(--safe-bottom));
|
||||
}
|
||||
|
||||
/* Platform badges */
|
||||
.badge-cli { background: rgba(245,158,11,0.15); color: #f59e0b; }
|
||||
.badge-telegram { background: rgba(56,189,248,0.15); color: #38bdf8; }
|
||||
.badge-discord { background: rgba(139,92,246,0.15); color: #8b5cf6; }
|
||||
.badge-whatsapp { background: rgba(34,197,94,0.15); color: #22c55e; }
|
||||
.badge-web { background: rgba(168,85,247,0.15); color: #a78bfa; }
|
||||
|
||||
/* Pulse dot animation */
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
.animate-pulse-dot {
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import "./globals.css";
|
||||
import { BottomNav } from "@/components/BottomNav";
|
||||
import { Providers } from "@/components/Providers";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hermes OS",
|
||||
description: "Mobile dashboard for Hermes Agent",
|
||||
icons: { icon: "/icon-192.png", apple: "/icon-192.png" },
|
||||
appleWebApp: { capable: true, statusBarStyle: "black-translucent", title: "Hermes" },
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: "#0a0a0f",
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
viewportFit: "cover",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
</head>
|
||||
<body className="antialiased">
|
||||
<Providers>
|
||||
<main className="min-h-screen pb-safe px-4 pt-4 max-w-lg mx-auto">
|
||||
{children}
|
||||
</main>
|
||||
<BottomNav />
|
||||
</Providers>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `if("serviceWorker"in navigator)window.addEventListener("load",()=>navigator.serviceWorker.register("/sw.js"))`,
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Brain, Plus } from "lucide-react";
|
||||
import { useMemory, useAddMemory, usePatchMemory, useDeleteMemory } from "@/lib/hooks";
|
||||
import { MemoryEntry } from "@/components/MemoryEntry";
|
||||
|
||||
const TABS = [
|
||||
{ id: "memory", label: "Agent", color: "#f59e0b" },
|
||||
{ id: "user", label: "User", color: "#38bdf8" },
|
||||
] as const;
|
||||
|
||||
export default function MemoryPage() {
|
||||
const [tab, setTab] = useState<"memory" | "user">("memory");
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [newText, setNewText] = useState("");
|
||||
const { data, isLoading } = useMemory();
|
||||
const addMutation = useAddMemory();
|
||||
const patchMutation = usePatchMemory();
|
||||
const deleteMutation = useDeleteMemory();
|
||||
|
||||
const target = data?.targets?.find((t) => t.target === tab);
|
||||
const entries = target?.entries || [];
|
||||
const usage = target?.usage || "";
|
||||
|
||||
const pctMatch = usage.match(/(\d+)%/);
|
||||
const pct = pctMatch ? parseInt(pctMatch[1]) : 0;
|
||||
const barColor = pct > 85 ? "#ef4444" : pct > 65 ? "#f59e0b" : "#38bdf8";
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!newText.trim()) return;
|
||||
addMutation.mutate({ target: tab, content: newText.trim() }, {
|
||||
onSuccess: () => { setNewText(""); setAdding(false); },
|
||||
});
|
||||
};
|
||||
|
||||
const handlePatch = (oldText: string, newContent: string) => {
|
||||
patchMutation.mutate({ target: tab, old_text: oldText, content: newContent });
|
||||
};
|
||||
|
||||
const handleDelete = (oldText: string) => {
|
||||
deleteMutation.mutate({ target: tab, old_text: oldText });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain size={20} style={{ color: "#38bdf8" }} />
|
||||
<h1 className="text-xl font-bold" style={{ color: "#38bdf8" }}>Memory</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAdding(!adding)}
|
||||
className="p-2 rounded-xl transition-all active:scale-95"
|
||||
style={{ background: "rgba(56,189,248,0.15)", color: "#38bdf8" }}
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2">
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className="flex-1 py-2 rounded-xl text-sm font-medium transition-all"
|
||||
style={{
|
||||
background: tab === t.id ? `${t.color}20` : "rgba(255,255,255,0.04)",
|
||||
color: tab === t.id ? t.color : "#6b7280",
|
||||
border: `1px solid ${tab === t.id ? `${t.color}40` : "rgba(255,255,255,0.06)"}`,
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Usage bar */}
|
||||
{usage && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-zinc-400">{tab === "memory" ? "Agent memory" : "User profile"}</span>
|
||||
<span className="text-zinc-500 font-mono">{usage}</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-white/[0.06]">
|
||||
<div
|
||||
className="h-full rounded-full transition-all"
|
||||
style={{ width: `${pct}%`, background: barColor }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add form */}
|
||||
{adding && (
|
||||
<div className="glass p-3 space-y-2">
|
||||
<textarea
|
||||
value={newText}
|
||||
onChange={(e) => setNewText(e.target.value)}
|
||||
placeholder="New memory entry..."
|
||||
className="w-full bg-transparent text-sm text-zinc-200 placeholder-zinc-600 resize-none outline-none min-h-[80px]"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
onClick={() => { setAdding(false); setNewText(""); }}
|
||||
className="px-3 py-1.5 text-xs text-zinc-400 rounded-lg"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!newText.trim() || addMutation.isPending}
|
||||
className="px-3 py-1.5 text-xs rounded-lg font-medium disabled:opacity-40"
|
||||
style={{ background: "rgba(56,189,248,0.2)", color: "#38bdf8" }}
|
||||
>
|
||||
{addMutation.isPending ? "Saving..." : "Add"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Entries */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[...Array(3)].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-2/3" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
No entries yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{entries.map((entry, i) => (
|
||||
<MemoryEntry
|
||||
key={`${tab}-${i}`}
|
||||
content={entry}
|
||||
onPatch={(newContent) => handlePatch(entry.slice(0, 40), newContent)}
|
||||
onDelete={() => handleDelete(entry.slice(0, 40))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { StatusCard } from "@/components/StatusCard";
|
||||
import { SessionCard } from "@/components/SessionCard";
|
||||
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
|
||||
import { useSessions } from "@/lib/hooks";
|
||||
|
||||
export default function PulsePage() {
|
||||
const { data: sessionsData, isLoading } = useSessions(8);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
|
||||
Pulse
|
||||
</h1>
|
||||
|
||||
<StatusCard />
|
||||
<MemorySnapshotCard />
|
||||
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-zinc-400 mb-2">
|
||||
Recent Sessions
|
||||
</h2>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].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 yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user