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