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
2026-04-09 20:41:13 -05:00
parent 65325d5f68
commit 517583d1c4
38 changed files with 8088 additions and 0 deletions
@@ -0,0 +1,50 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { Activity, Brain, Clock } from "lucide-react";
+
+const TABS = [
+  { href: "/", label: "Pulse", icon: Activity, color: "#f59e0b" },
+  { href: "/memory", label: "Memory", icon: Brain, color: "#38bdf8" },
+  { href: "/history", label: "History", icon: Clock, color: "#22c55e" },
+] as const;
+
+export function BottomNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-50 border-t border-white/[0.06]"
+      style={{
+        background: "rgba(10,10,15,0.92)",
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        paddingBottom: "var(--safe-bottom)",
+      }}
+    >
+      <div className="flex justify-around items-center h-16 max-w-lg mx-auto">
+        {TABS.map(({ href, label, icon: Icon, color }) => {
+          const active =
+            href === "/" ? pathname === "/" : pathname.startsWith(href);
+          return (
+            <Link
+              key={href}
+              href={href}
+              className="flex flex-col items-center gap-1 px-6 py-2 transition-opacity"
+              style={{ opacity: active ? 1 : 0.4 }}
+            >
+              <Icon size={22} style={{ color: active ? color : "#a1a1aa" }} />
+              <span
+                className="text-[10px] font-medium"
+                style={{ color: active ? color : "#a1a1aa" }}
+              >
+                {label}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { Pencil, Trash2, Check, X } from "lucide-react";
+
+interface Props {
+  content: string;
+  onPatch: (newContent: string) => void;
+  onDelete: () => void;
+}
+
+export function MemoryEntry({ content, onPatch, onDelete }: Props) {
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState(content);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const handleSave = () => {
+    if (editText.trim() && editText !== content) {
+      onPatch(editText.trim());
+    }
+    setEditing(false);
+  };
+
+  if (editing) {
+    return (
+      <div className="glass p-3 space-y-2">
+        <textarea
+          value={editText}
+          onChange={(e) => setEditText(e.target.value)}
+          className="w-full bg-transparent text-sm text-zinc-200 resize-none outline-none min-h-[80px]"
+          autoFocus
+        />
+        <div className="flex gap-2 justify-end">
+          <button
+            onClick={() => { setEditing(false); setEditText(content); }}
+            className="p-1.5 rounded-lg text-zinc-500"
+          >
+            <X size={16} />
+          </button>
+          <button
+            onClick={handleSave}
+            className="p-1.5 rounded-lg"
+            style={{ color: "#22c55e" }}
+          >
+            <Check size={16} />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="glass p-4 group">
+      <p className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed">
+        {content}
+      </p>
+      <div className="flex gap-2 justify-end mt-2 opacity-0 group-active:opacity-100 transition-opacity">
+        <button
+          onClick={() => setEditing(true)}
+          className="p-1.5 rounded-lg text-zinc-500 active:text-zinc-300"
+        >
+          <Pencil size={14} />
+        </button>
+        {confirmDelete ? (
+          <button
+            onClick={() => { onDelete(); setConfirmDelete(false); }}
+            className="px-2 py-1 rounded-lg text-xs font-medium"
+            style={{ background: "rgba(239,68,68,0.2)", color: "#ef4444" }}
+          >
+            Confirm
+          </button>
+        ) : (
+          <button
+            onClick={() => setConfirmDelete(true)}
+            className="p-1.5 rounded-lg text-zinc-500 active:text-red-400"
+          >
+            <Trash2 size={14} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { Brain } from "lucide-react";
+import { useMemory } from "@/lib/hooks";
+
+function UsageBar({ label, usage }: { label: string; usage: string }) {
+  // usage format: "42% — 939/2,200 chars"
+  const pctMatch = usage.match(/(\d+)%/);
+  const pct = pctMatch ? parseInt(pctMatch[1]) : 0;
+  const color =
+    pct > 85 ? "#ef4444" : pct > 65 ? "#f59e0b" : "#38bdf8";
+
+  return (
+    <div>
+      <div className="flex justify-between text-[10px] mb-1">
+        <span className="text-zinc-400">{label}</span>
+        <span className="text-zinc-500 font-mono">{usage}</span>
+      </div>
+      <div className="h-1.5 rounded-full bg-white/[0.06]">
+        <div
+          className="h-full rounded-full transition-all"
+          style={{ width: `${pct}%`, background: color }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function MemorySnapshotCard() {
+  const { data } = useMemory();
+
+  const memoryTarget = data?.targets?.find((t) => t.target === "memory");
+  const userTarget = data?.targets?.find((t) => t.target === "user");
+
+  return (
+    <Link href="/memory">
+      <div className="glass glass-hover p-4 transition-all">
+        <div className="flex items-center gap-2 mb-3">
+          <Brain size={16} style={{ color: "#38bdf8" }} />
+          <span className="text-sm font-medium text-zinc-200">Memory</span>
+          <span className="text-xs text-zinc-500 ml-auto">
+            {(memoryTarget?.entry_count || 0) + (userTarget?.entry_count || 0)} entries
+          </span>
+        </div>
+        <div className="space-y-2">
+          {memoryTarget && (
+            <UsageBar label="Agent" usage={memoryTarget.usage} />
+          )}
+          {userTarget && (
+            <UsageBar label="User" usage={userTarget.usage} />
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { Wrench, ChevronDown, ChevronRight, User, Bot } from "lucide-react";
+import type { Message, ToolCall } from "@/lib/types";
+
+interface Props {
+  message: Message;
+  toolResults: Map<string, { name: string; content: string }>;
+}
+
+function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string; content: string } }) {
+  const [open, setOpen] = useState(false);
+  let args: Record<string, unknown> = {};
+  try { args = JSON.parse(tc.function.arguments); } catch {}
+
+  return (
+    <div className="mt-2">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04] transition-all"
+        style={{ color: "#f59e0b" }}
+      >
+        <Wrench size={11} />
+        <span className="font-mono">{tc.function.name}</span>
+        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
+      </button>
+      {open && (
+        <div className="mt-1 ml-2 pl-2 border-l border-white/[0.06] space-y-1">
+          <pre className="text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto">
+            {JSON.stringify(args, null, 2)}
+          </pre>
+          {result && (
+            <pre className="text-[11px] text-zinc-600 overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto">
+              {result.content.slice(0, 500)}
+              {result.content.length > 500 ? "..." : ""}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MessageBubble({ message, toolResults }: Props) {
+  const isUser = message.role === "user";
+  const content = message.content || "";
+
+  let toolCalls: ToolCall[] = [];
+  if (message.tool_calls) {
+    try { toolCalls = JSON.parse(message.tool_calls); } catch {}
+  }
+
+  if (!content && toolCalls.length === 0) return null;
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+      <div
+        className="max-w-[90%] rounded-2xl px-4 py-3"
+        style={{
+          background: isUser ? "rgba(56,189,248,0.12)" : "rgba(255,255,255,0.04)",
+          border: `1px solid ${isUser ? "rgba(56,189,248,0.2)" : "rgba(255,255,255,0.06)"}`,
+        }}
+      >
+        <div className="flex items-center gap-1.5 mb-1">
+          {isUser ? (
+            <User size={12} className="text-sky-400" />
+          ) : (
+            <Bot size={12} className="text-amber-400" />
+          )}
+          <span className="text-[10px] font-medium" style={{ color: isUser ? "#38bdf8" : "#f59e0b" }}>
+            {isUser ? "You" : "Hermes"}
+          </span>
+        </div>
+        {content && (
+          <p className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed break-words">
+            {content}
+          </p>
+        )}
+        {toolCalls.length > 0 && (
+          <div>
+            {toolCalls.length <= 3 ? (
+              toolCalls.map((tc) => (
+                <ToolCallBlock
+                  key={tc.id}
+                  tc={tc}
+                  result={toolResults.get(tc.id)}
+                />
+              ))
+            ) : (
+              <CollapsedToolCalls toolCalls={toolCalls} toolResults={toolResults} />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CollapsedToolCalls({
+  toolCalls,
+  toolResults,
+}: {
+  toolCalls: ToolCall[];
+  toolResults: Map<string, { name: string; content: string }>;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="mt-2">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04]"
+        style={{ color: "#f59e0b" }}
+      >
+        <Wrench size={11} />
+        <span>{toolCalls.length} tool calls</span>
+        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
+      </button>
+      {open &&
+        toolCalls.map((tc) => (
+          <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
+        ))}
+    </div>
+  );
+}
@@ -0,0 +1,16 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 30_000, retry: 1, refetchOnWindowFocus: true },
+        },
+      })
+  );
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+import { MessageSquare } from "lucide-react";
+import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
+import type { Session } from "@/lib/types";
+
+export function SessionCard({ session }: { session: Session }) {
+  const tokens = session.input_tokens + session.output_tokens;
+  const title = session.title || `Session ${session.id.slice(0, 8)}`;
+
+  return (
+    <Link href={`/history/${session.id}`}>
+      <div className="glass glass-hover p-4 transition-all">
+        <div className="flex items-start justify-between gap-2 mb-2">
+          <span className="text-sm font-medium text-zinc-200 line-clamp-1 flex-1">
+            {title}
+          </span>
+          <span
+            className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 font-medium ${platformBadgeClass(session.source)}`}
+          >
+            {session.source}
+          </span>
+        </div>
+        <div className="flex items-center gap-3 text-xs text-zinc-500">
+          <span className="flex items-center gap-1">
+            <MessageSquare size={12} />
+            {session.message_count}
+          </span>
+          {tokens > 0 && <span>{formatTokens(tokens)} tok</span>}
+          <span className="ml-auto">{timeAgo(session.started_at)}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}
@@ -0,0 +1,47 @@
+"use client";
+
+import { Cpu, Wifi, WifiOff } from "lucide-react";
+import { useHealth, useConfig } from "@/lib/hooks";
+
+export function StatusCard() {
+  const { data: health } = useHealth();
+  const { data: config } = useConfig();
+
+  const online = health?.status === "ok";
+  const model = config?.model || "—";
+  const provider = config?.provider || "custom";
+
+  return (
+    <div className="glass p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Cpu size={18} style={{ color: "#f59e0b" }} />
+          <span className="font-semibold text-sm">Hermes</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div
+            className="w-2 h-2 rounded-full"
+            style={{
+              background: online ? "#22c55e" : "#ef4444",
+            }}
+          />
+          {online ? (
+            <Wifi size={14} style={{ color: "#22c55e" }} />
+          ) : (
+            <WifiOff size={14} style={{ color: "#ef4444" }} />
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-3 text-xs">
+        <div>
+          <div className="text-zinc-500">Model</div>
+          <div className="text-zinc-200 font-mono truncate">{model}</div>
+        </div>
+        <div>
+          <div className="text-zinc-500">Provider</div>
+          <div className="text-zinc-200 font-mono truncate">{provider}</div>
+        </div>
+      </div>
+    </div>
+  );
+}