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,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>
+  );
+}