Visual redesign, message input, reversed messages, systemd service

- New visual identity: solid dark cards, purple accent, iOS-like feel
- Session replay: newest messages first, message input with send button
- Chat proxy route for sending messages to sessions
- systemd user service with deploy script
- All pages restyled: Pulse, Memory, History, Skills, Cron, Soul, Config

app/api/sessions/[id]/chat/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BACKEND = process.env.HERMES_BACKEND_URL || "http://127.0.0.1:8643";
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const body = await req.json();
+  try {
+    const res = await fetch(BACKEND + "/api/sessions/" + id + "/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const data = await res.text();
+    return new NextResponse(data, {
+      status: res.status,
+      headers: { "content-type": "application/json" },
+    });
+  } catch {
+    return NextResponse.json({ error: "backend unreachable" }, { status: 502 });
+  }
+}

app/globals.css

@@ -2,49 +2,84 @@
 
 :root {
   --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --accent: #7c6ef0;
+  --accent-dim: rgba(124, 110, 240, 0.12);
+  --bg: #111113;
+  --bg-raised: #1a1a1f;
+  --bg-hover: #222228;
+  --border: rgba(255, 255, 255, 0.06);
+  --text-1: #ececef;
+  --text-2: #8e8e93;
+  --text-3: #48484a;
 }
 
 body {
-  background: #0a0a0f;
+  background: var(--bg);
-  color: #f0f0f0;
+  color: var(--text-1);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   overscroll-behavior: none;
 }
 
-/* Glass card */
+/* Card - solid, not glass */
-.glass {
+.card {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-raised);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
-  border-radius: 16px;
+  border: 1px solid var(--border);
 }
 
-.glass-hover:active {
+.card-hover:active {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--bg-hover);
 }
 
 /* Scrollbar */
-::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar { width: 0; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
 
-/* Safe area padding for bottom nav */
+/* Safe area */
 .pb-safe {
   padding-bottom: calc(4.5rem + var(--safe-bottom));
 }
 
 /* Platform badges */
-.badge-cli { background: rgba(245,158,11,0.15); color: #f59e0b; }
+.badge {
-.badge-telegram { background: rgba(56,189,248,0.15); color: #38bdf8; }
+  font-size: 10px;
-.badge-discord { background: rgba(139,92,246,0.15); color: #8b5cf6; }
+  font-weight: 600;
-.badge-whatsapp { background: rgba(34,197,94,0.15); color: #22c55e; }
+  padding: 2px 8px;
-.badge-web { background: rgba(168,85,247,0.15); color: #a78bfa; }
+  border-radius: 100px;
+  letter-spacing: 0.02em;
+}
+.badge-cli { background: rgba(255,255,255,0.06); color: #8e8e93; }
+.badge-telegram { background: rgba(0,136,204,0.12); color: #29b6f6; }
+.badge-discord { background: rgba(88,101,242,0.12); color: #7289da; }
+.badge-whatsapp { background: rgba(37,211,102,0.12); color: #25d366; }
+.badge-web { background: rgba(124,110,240,0.12); color: #7c6ef0; }
 
-/* Pulse dot animation */
+/* Accent button */
-@keyframes pulse-dot {
+.btn-accent {
-  0%, 100% { opacity: 1; }
+  background: var(--accent);
-  50% { opacity: 0.4; }
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 14px;
+  padding: 10px 16px;
+  transition: opacity 0.15s;
 }
-.animate-pulse-dot {
+.btn-accent:active { opacity: 0.7; }
-  animation: pulse-dot 2s ease-in-out infinite;
+.btn-accent:disabled { opacity: 0.3; }
+
+/* Divider */
+.divider {
+  height: 1px;
+  background: var(--border);
+  margin: 0 -16px;
+}
+
+/* Section label */
+.section-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }

app/history/[id]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { use } from "react";
+import { use, useState, useRef, useEffect } from "react";
-import { ArrowLeft, MessageSquare, Wrench } from "lucide-react";
+import { ArrowLeft, Send } from "lucide-react";
 import Link from "next/link";
 import { useSession, useMessages } from "@/lib/hooks";
 import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
@@ -10,17 +10,18 @@ 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 { data: messagesData, isLoading, refetch } = useMessages(id);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   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"
-  );
+  ).reverse(); // newest first
 
-  // 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) {
@@ -31,53 +32,94 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
     }
   }
 
+  const sendMessage = async () => {
+    if (!input.trim() || sending) return;
+    setSending(true);
+    try {
+      await fetch("/api/sessions/" + id + "/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: input.trim() }),
+      });
+      setInput("");
+      // Poll for response
+      setTimeout(() => refetch(), 2000);
+      setTimeout(() => refetch(), 5000);
+      setTimeout(() => refetch(), 10000);
+    } catch {}
+    setSending(false);
+  };
+
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
       {/* Header */}
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-3 mb-4">
-        <Link href="/history" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
+        <Link href="/history" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
-          <ArrowLeft size={20} className="text-zinc-400" />
+          <ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
         </Link>
         <div className="flex-1 min-w-0">
-          <h1 className="text-base font-semibold text-zinc-200 truncate">
+          <div className="text-[15px] font-medium truncate" style={{ color: "var(--text-1)" }}>
-            {session?.title || `Session ${id.slice(0, 8)}`}
+            {session?.title || "Session " + id.slice(0, 8)}
-          </h1>
+          </div>
           {session && (
-            <div className="flex items-center gap-2 text-xs text-zinc-500">
+            <div className="flex items-center gap-2 mt-0.5">
-              <span className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${platformBadgeClass(session.source)}`}>
+              <span className={`badge ${platformBadgeClass(session.source)}`}>
                 {session.source}
               </span>
-              <span>{session.message_count} msgs</span>
+              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
-              <span>{formatTokens(session.input_tokens + session.output_tokens)} tok</span>
+                {session.message_count} msgs · {formatTokens(session.input_tokens + session.output_tokens)} · {timeAgo(session.started_at)}
-              <span>{timeAgo(session.started_at)}</span>
+              </span>
             </div>
           )}
         </div>
       </div>
 
-      {/* Messages */}
+      {/* Message input */}
+      <div className="flex gap-2 mb-4">
+        <input
+          ref={inputRef}
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
+          placeholder="Send a message..."
+          className="flex-1 px-4 py-2.5 rounded-xl text-sm outline-none transition-colors"
+          style={{
+            background: "var(--bg-raised)",
+            border: "1px solid var(--border)",
+            color: "var(--text-1)",
+          }}
+          disabled={sending}
+        />
+        <button
+          onClick={sendMessage}
+          disabled={!input.trim() || sending}
+          className="px-3 rounded-xl transition-opacity disabled:opacity-20"
+          style={{ background: "var(--accent)", color: "white" }}
+        >
+          <Send size={16} />
+        </button>
+      </div>
+
+      {/* Messages - newest first */}
       {isLoading ? (
         <div className="space-y-3">
           {[...Array(4)].map((_, i) => (
-            <div key={i} className="glass p-4 animate-pulse">
+            <div key={i} className="card p-4 animate-pulse">
-              <div className="h-4 bg-white/[0.06] rounded w-full mb-2" />
+              <div className="h-4 rounded w-full mb-2" style={{ background: "var(--bg-hover)" }} />
-              <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+              <div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
             </div>
           ))}
         </div>
       ) : (
-        <div className="space-y-3">
+        <div className="space-y-2">
           {visibleMessages.map((m) => (
-            <MessageBubble
+            <MessageBubble key={m.id} message={m} toolResults={toolResults} />
-              key={m.id}
-              message={m}
-              toolResults={toolResults}
-            />
           ))}
           {visibleMessages.length === 0 && (
-            <div className="glass p-6 text-center text-sm text-zinc-500">
+            <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
               Empty session
-            </div>
+            </p>
           )}
         </div>
       )}

app/history/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Clock, Search, X } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { useSessions, useSessionSearch } from "@/lib/hooks";
 import { SessionCard } from "@/components/SessionCard";
 
@@ -19,59 +19,44 @@ export default function HistoryPage() {
   const [searching, setSearching] = useState(false);
 
   const { data: sessionsData, isLoading } = useSessions(30, filter || undefined);
-  const { data: searchData, isFetching: searchLoading } = useSessionSearch(
+  const { data: searchData, isFetching: searchLoading } = useSessionSearch(searching ? query : "");
-    searching ? query : ""
-  );
-
   const showSearch = searching && query.length >= 2;
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>History</h1>
-        <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" />
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
         <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"
+          className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm outline-none transition-colors"
+          style={{ background: "var(--bg-raised)", border: "1px solid var(--border)", color: "var(--text-1)" }}
         />
         {query && (
-          <button
+          <button onClick={() => { setQuery(""); setSearching(false); }} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
-            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">
+          <div className="text-[11px] mb-2" style={{ color: "var(--text-3)" }}>
-            {searchLoading ? "Searching..." : `${searchData?.count || 0} results`}
+            {searchLoading ? "Searching..." : (searchData?.count || 0) + " results"}
           </div>
-          <div className="space-y-2">
+          <div className="space-y-1">
             {searchData?.results?.map((r) => (
-              <a key={r.message_id} href={`/history/${r.session_id}`}>
+              <a key={r.message_id} href={"/history/" + r.session_id}>
-                <div className="glass glass-hover p-3 transition-all">
+                <div className="card card-hover p-3 transition-colors">
-                  <div className="flex items-center gap-2 mb-1">
+                  <div className="text-[12px] mb-0.5" style={{ color: "var(--text-2)" }}>
-                    <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>
+                  <p className="text-[13px] line-clamp-2" style={{ color: "var(--text-1)" }}>{r.content}</p>
                 </div>
               </a>
             ))}
@@ -79,17 +64,15 @@ export default function HistoryPage() {
         </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"
+                className="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap shrink-0 transition-all"
                 style={{
-                  background: filter === p.id ? "rgba(34,197,94,0.15)" : "rgba(255,255,255,0.04)",
+                  background: filter === p.id ? "var(--accent-dim)" : "var(--bg-raised)",
-                  color: filter === p.id ? "#22c55e" : "#6b7280",
+                  color: filter === p.id ? "var(--accent)" : "var(--text-3)",
-                  border: `1px solid ${filter === p.id ? "rgba(34,197,94,0.3)" : "rgba(255,255,255,0.06)"}`,
                 }}
               >
                 {p.label}
@@ -97,25 +80,22 @@ export default function HistoryPage() {
             ))}
           </div>
 
-          {/* Session list */}
           {isLoading ? (
-            <div className="space-y-2">
+            <div className="space-y-1">
               {[...Array(5)].map((_, i) => (
-                <div key={i} className="glass p-4 animate-pulse">
+                <div key={i} className="py-3 animate-pulse">
-                  <div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
+                  <div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
-                  <div className="h-3 bg-white/[0.06] rounded w-1/2" />
+                  <div className="h-3 rounded w-1/2" style={{ background: "var(--bg-raised)" }} />
                 </div>
               ))}
             </div>
           ) : (
-            <div className="space-y-2">
+            <div>
               {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">
+                <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No sessions found</p>
-                  No sessions found
-                </div>
               )}
             </div>
           )}

app/memory/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { Brain, Plus } from "lucide-react";
+import { 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: "memory", label: "Agent" },
-  { id: "user", label: "User", color: "#38bdf8" },
+  { id: "user", label: "User" },
 ] as const;
 
 export default function MemoryPage() {
@@ -22,10 +22,8 @@ export default function MemoryPage() {
   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;
@@ -34,41 +32,28 @@ export default function MemoryPage() {
     });
   };
 
-  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">
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Memory</h1>
-          <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"
+          className="p-2 rounded-xl active:scale-95 transition-all"
-          style={{ background: "rgba(56,189,248,0.15)", color: "#38bdf8" }}
+          style={{ background: "var(--accent-dim)", color: "var(--accent)" }}
         >
           <Plus size={18} />
         </button>
       </div>
 
-      {/* Tabs */}
+      <div className="flex gap-1 p-1 rounded-xl" style={{ background: "var(--bg-raised)" }}>
-      <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"
+            className="flex-1 py-2 rounded-lg text-sm font-medium transition-all"
             style={{
-              background: tab === t.id ? `${t.color}20` : "rgba(255,255,255,0.04)",
+              background: tab === t.id ? "var(--bg-hover)" : "transparent",
-              color: tab === t.id ? t.color : "#6b7280",
+              color: tab === t.id ? "var(--text-1)" : "var(--text-3)",
-              border: `1px solid ${tab === t.id ? `${t.color}40` : "rgba(255,255,255,0.06)"}`,
             }}
           >
             {t.label}
@@ -76,44 +61,36 @@ export default function MemoryPage() {
         ))}
       </div>
 
-      {/* Usage bar */}
       {usage && (
-        <div>
+        <div className="flex items-center gap-3">
-          <div className="flex justify-between text-xs mb-1">
+          <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
-            <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 }}
+              style={{ width: pct + "%", background: pct > 85 ? "#ff3b30" : "var(--accent)" }}
             />
           </div>
+          <span className="text-[11px] font-mono" style={{ color: "var(--text-3)" }}>{usage}</span>
         </div>
       )}
 
-      {/* Add form */}
       {adding && (
-        <div className="glass p-3 space-y-2">
+        <div className="card p-3 space-y-2">
           <textarea
             value={newText}
             onChange={(e) => setNewText(e.target.value)}
-            placeholder="New memory entry..."
+            placeholder="New entry..."
-            className="w-full bg-transparent text-sm text-zinc-200 placeholder-zinc-600 resize-none outline-none min-h-[80px]"
+            className="w-full bg-transparent text-sm placeholder-[var(--text-3)] resize-none outline-none min-h-[80px]"
+            style={{ color: "var(--text-1)" }}
             autoFocus
           />
           <div className="flex gap-2 justify-end">
-            <button
+            <button onClick={() => { setAdding(false); setNewText(""); }} className="px-3 py-1.5 text-xs rounded-lg" style={{ color: "var(--text-3)" }}>
-              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"
+              className="btn-accent text-xs !py-1.5 !px-3"
-              style={{ background: "rgba(56,189,248,0.2)", color: "#38bdf8" }}
             >
               {addMutation.isPending ? "Saving..." : "Add"}
             </button>
@@ -121,28 +98,25 @@ export default function MemoryPage() {
         </div>
       )}
 
-      {/* Entries */}
       {isLoading ? (
         <div className="space-y-2">
           {[...Array(3)].map((_, i) => (
-            <div key={i} className="glass p-4 animate-pulse">
+            <div key={i} className="card p-4 animate-pulse">
-              <div className="h-4 bg-white/[0.06] rounded w-full mb-2" />
+              <div className="h-4 rounded w-full mb-2" style={{ background: "var(--bg-hover)" }} />
-              <div className="h-4 bg-white/[0.06] rounded w-2/3" />
+              <div className="h-4 rounded w-2/3" style={{ background: "var(--bg-hover)" }} />
             </div>
           ))}
         </div>
       ) : entries.length === 0 ? (
-        <div className="glass p-6 text-center text-sm text-zinc-500">
+        <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No entries yet</p>
-          No entries yet
-        </div>
       ) : (
         <div className="space-y-2">
           {entries.map((entry, i) => (
             <MemoryEntry
-              key={`${tab}-${i}`}
+              key={tab + "-" + i}
               content={entry}
-              onPatch={(newContent) => handlePatch(entry.slice(0, 40), newContent)}
+              onPatch={(nc) => patchMutation.mutate({ target: tab, old_text: entry.slice(0, 40), content: nc })}
-              onDelete={() => handleDelete(entry.slice(0, 40))}
+              onDelete={() => deleteMutation.mutate({ target: tab, old_text: entry.slice(0, 40) })}
             />
           ))}
         </div>

app/page.tsx

@@ -11,63 +11,55 @@ import { useSessions } from "@/lib/hooks";
 import { usePullToRefresh } from "@/lib/usePullToRefresh";
 
 const QUICK_LINKS = [
-  { href: "/skills", label: "Skills", icon: Puzzle, color: "#a78bfa" },
+  { href: "/skills", label: "Skills", icon: Puzzle },
-  { href: "/cron", label: "Cron", icon: Timer, color: "#f59e0b" },
+  { href: "/cron", label: "Cron", icon: Timer },
-  { href: "/soul", label: "Soul", icon: Sparkles, color: "#ec4899" },
+  { href: "/soul", label: "Soul", icon: Sparkles },
-  { href: "/config", label: "Config", icon: Settings, color: "#6b7280" },
+  { href: "/config", label: "Config", icon: Settings },
 ] as const;
 
 export default function PulsePage() {
   const qc = useQueryClient();
   const { data: sessionsData, isLoading } = useSessions(8);
 
-  usePullToRefresh(() => {
+  usePullToRefresh(() => { qc.invalidateQueries(); });
-    qc.invalidateQueries();
-  });
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
-      <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
-        Pulse
-      </h1>
-
       <StatusCard />
       <StatsCard />
       <MemorySnapshotCard />
 
       <div className="grid grid-cols-4 gap-2">
-        {QUICK_LINKS.map(({ href, label, icon: Icon, color }) => (
+        {QUICK_LINKS.map(({ href, label, icon: Icon }) => (
           <Link key={href} href={href}>
-            <div className="glass glass-hover p-3 flex flex-col items-center gap-1.5 transition-all">
+            <div className="card card-hover p-3 flex flex-col items-center gap-1 transition-colors">
-              <Icon size={18} style={{ color }} />
+              <Icon size={18} style={{ color: "var(--accent)" }} />
-              <span className="text-[11px] font-medium" style={{ color }}>{label}</span>
+              <span className="text-[11px]" style={{ color: "var(--text-2)" }}>{label}</span>
             </div>
           </Link>
         ))}
       </div>
 
       <div>
-        <h2 className="text-sm font-medium text-zinc-400 mb-2">
+        <div className="section-label mb-2">Recent</div>
-          Recent Sessions
-        </h2>
         {isLoading ? (
-          <div className="space-y-3">
+          <div className="space-y-1">
             {[...Array(3)].map((_, i) => (
-              <div key={i} className="glass p-4 animate-pulse">
+              <div key={i} className="py-3 animate-pulse">
-                <div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
+                <div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
-                <div className="h-3 bg-white/[0.06] rounded w-1/2" />
+                <div className="h-3 rounded w-1/2" style={{ background: "var(--bg-raised)" }} />
               </div>
             ))}
           </div>
         ) : (
-          <div className="space-y-2">
+          <div>
             {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">
+              <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
                 No sessions yet
-              </div>
+              </p>
             )}
           </div>
         )}

app/skills/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { Puzzle, ChevronRight, Search, X } from "lucide-react";
+import { ChevronRight, Search, X } from "lucide-react";
 import { useSkills } from "@/lib/hooks";
 import type { SkillSummary } from "@/lib/types";
 
@@ -14,91 +14,62 @@ export default function SkillsPage() {
   const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();
 
   const filtered = search
-    ? skills.filter(
+    ? skills.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.description.toLowerCase().includes(search.toLowerCase()))
-        (s) =>
-          s.name.toLowerCase().includes(search.toLowerCase()) ||
-          s.description.toLowerCase().includes(search.toLowerCase())
-      )
     : skills;
 
   const grouped = categories
-    .map((cat) => ({
+    .map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
-      category: cat,
-      skills: filtered.filter((s) => (s.category || "uncategorized") === cat),
-    }))
     .filter((g) => g.skills.length > 0);
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between">
-        <Puzzle size={20} style={{ color: "#a78bfa" }} />
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Skills</h1>
-        <h1 className="text-xl font-bold" style={{ color: "#a78bfa" }}>Skills</h1>
+        <span className="text-[12px]" style={{ color: "var(--text-3)" }}>{skills.length}</span>
-        <span className="text-xs text-zinc-500 ml-auto">{skills.length} total</span>
       </div>
 
       <div className="relative">
-        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
         <input
           type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          placeholder="Filter skills..."
+          placeholder="Filter..."
-          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"
+          className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm outline-none transition-colors"
+          style={{ background: "var(--bg-raised)", border: "1px solid var(--border)", color: "var(--text-1)" }}
         />
         {search && (
-          <button
+          <button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
-            onClick={() => setSearch("")}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
-          >
             <X size={16} />
           </button>
         )}
       </div>
 
       {isLoading ? (
-        <div className="space-y-3">
+        <div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
-          {[...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-5">
           {grouped.map(({ category, skills }) => (
             <div key={category}>
-              <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2 px-1">
+              <div className="section-label mb-2">{category}</div>
-                {category}
-              </h2>
-              <div className="space-y-1.5">
               {skills.map((s) => (
-                  <SkillRow key={s.name} skill={s} />
+                <Link key={s.name} href={"/skills/" + s.name}>
-                ))}
+                  <div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
+                    <div className="flex-1 min-w-0">
+                      <div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
+                      <div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
                     </div>
+                    <ChevronRight size={16} style={{ color: "var(--text-3)" }} />
+                  </div>
+                </Link>
+              ))}
             </div>
           ))}
           {grouped.length === 0 && (
-            <div className="glass p-6 text-center text-sm text-zinc-500">
+            <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match "{search}"</p>
-              No skills match &ldquo;{search}&rdquo;
-            </div>
           )}
         </div>
       )}
     </div>
   );
 }
-
-function SkillRow({ skill }: { skill: SkillSummary }) {
-  return (
-    <Link href={`/skills/${skill.name}`}>
-      <div className="glass glass-hover p-3 flex items-center gap-3 transition-all">
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-zinc-200">{skill.name}</div>
-          <div className="text-xs text-zinc-500 line-clamp-1">{skill.description}</div>
-        </div>
-        <ChevronRight size={16} className="text-zinc-600 shrink-0" />
-      </div>
-    </Link>
-  );
-}

components/BottomNav.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 import { Activity, Brain, Clock } from "lucide-react";
 
 const TABS = [
-  { href: "/", label: "Pulse", icon: Activity, color: "#f59e0b" },
+  { href: "/", label: "Pulse", icon: Activity },
-  { href: "/memory", label: "Memory", icon: Brain, color: "#38bdf8" },
+  { href: "/memory", label: "Memory", icon: Brain },
-  { href: "/history", label: "History", icon: Clock, color: "#22c55e" },
+  { href: "/history", label: "History", icon: Clock },
 ] as const;
 
 export function BottomNav() {
@@ -15,29 +15,36 @@ export function BottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50 border-t border-white/[0.06]"
+      className="fixed bottom-0 left-0 right-0 z-50"
       style={{
-        background: "rgba(10,10,15,0.92)",
+        background: "rgba(17,17,19,0.95)",
-        backdropFilter: "blur(20px)",
+        backdropFilter: "saturate(180%) blur(20px)",
-        WebkitBackdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "saturate(180%) blur(20px)",
+        borderTop: "1px solid var(--border)",
         paddingBottom: "var(--safe-bottom)",
       }}
     >
-      <div className="flex justify-around items-center h-16 max-w-lg mx-auto">
+      <div className="flex justify-around items-center h-14 max-w-lg mx-auto">
-        {TABS.map(({ href, label, icon: Icon, color }) => {
+        {TABS.map(({ href, label, icon: Icon }) => {
           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"
+              className="flex flex-col items-center gap-0.5 px-6 py-1.5"
-              style={{ opacity: active ? 1 : 0.4 }}
             >
-              <Icon size={22} style={{ color: active ? color : "#a1a1aa" }} />
+              <Icon
+                size={20}
+                strokeWidth={active ? 2.2 : 1.5}
+                style={{ color: active ? "var(--accent)" : "var(--text-3)" }}
+              />
               <span
-                className="text-[10px] font-medium"
+                className="text-[10px]"
-                style={{ color: active ? color : "#a1a1aa" }}
+                style={{
+                  color: active ? "var(--accent)" : "var(--text-3)",
+                  fontWeight: active ? 600 : 400,
+                }}
               >
                 {label}
               </span>

components/MemoryEntry.tsx

@@ -23,25 +23,19 @@ export function MemoryEntry({ content, onPatch, onDelete }: Props) {
 
   if (editing) {
     return (
-      <div className="glass p-3 space-y-2">
+      <div className="card 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]"
+          className="w-full bg-transparent text-sm resize-none outline-none min-h-[80px]"
+          style={{ color: "var(--text-1)" }}
           autoFocus
         />
         <div className="flex gap-2 justify-end">
-          <button
+          <button onClick={() => { setEditing(false); setEditText(content); }} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
-            onClick={() => { setEditing(false); setEditText(content); }}
-            className="p-1.5 rounded-lg text-zinc-500"
-          >
             <X size={16} />
           </button>
-          <button
+          <button onClick={handleSave} className="p-1.5 rounded-lg" style={{ color: "#34c759" }}>
-            onClick={handleSave}
-            className="p-1.5 rounded-lg"
-            style={{ color: "#22c55e" }}
-          >
             <Check size={16} />
           </button>
         </div>
@@ -50,30 +44,24 @@ export function MemoryEntry({ content, onPatch, onDelete }: Props) {
   }
 
   return (
-    <div className="glass p-4 group">
+    <div className="card p-4 group">
-      <p className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed">
+      <p className="text-[13px] whitespace-pre-wrap leading-relaxed" style={{ color: "var(--text-1)" }}>
         {content}
       </p>
       <div className="flex gap-2 justify-end mt-2 opacity-0 group-active:opacity-100 transition-opacity">
-        <button
+        <button onClick={() => setEditing(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
-          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" }}
+            style={{ background: "rgba(255,59,48,0.12)", color: "#ff3b30" }}
           >
             Confirm
           </button>
         ) : (
-          <button
+          <button onClick={() => setConfirmDelete(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
-            onClick={() => setConfirmDelete(true)}
-            className="p-1.5 rounded-lg text-zinc-500 active:text-red-400"
-          >
             <Trash2 size={14} />
           </button>
         )}

components/MemorySnapshotCard.tsx

@@ -1,56 +1,47 @@
 "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 }) {
+function Bar({ 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 items-center gap-3">
-      <div className="flex justify-between text-[10px] mb-1">
+      <span className="text-[12px] w-12" style={{ color: "var(--text-2)" }}>{label}</span>
-        <span className="text-zinc-400">{label}</span>
+      <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
-        <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 }}
+          style={{
+            width: pct + "%",
+            background: pct > 85 ? "#ff3b30" : "var(--accent)",
+          }}
         />
       </div>
+      <span className="text-[11px] font-mono w-10 text-right" style={{ color: "var(--text-3)" }}>
+        {pct}%
+      </span>
     </div>
   );
 }
 
 export function MemorySnapshotCard() {
   const { data } = useMemory();
-
+  const mem = data?.targets?.find((t) => t.target === "memory");
-  const memoryTarget = data?.targets?.find((t) => t.target === "memory");
+  const usr = data?.targets?.find((t) => t.target === "user");
-  const userTarget = data?.targets?.find((t) => t.target === "user");
 
   return (
     <Link href="/memory">
-      <div className="glass glass-hover p-4 transition-all">
+      <div className="card card-hover p-4 space-y-2 transition-colors">
-        <div className="flex items-center gap-2 mb-3">
+        <div className="flex items-center justify-between mb-1">
-          <Brain size={16} style={{ color: "#38bdf8" }} />
+          <span className="text-[13px] font-medium" style={{ color: "var(--text-1)" }}>Memory</span>
-          <span className="text-sm font-medium text-zinc-200">Memory</span>
+          <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
-          <span className="text-xs text-zinc-500 ml-auto">
+            {(mem?.entry_count || 0) + (usr?.entry_count || 0)} entries
-            {(memoryTarget?.entry_count || 0) + (userTarget?.entry_count || 0)} entries
           </span>
         </div>
-        <div className="space-y-2">
+        {mem && <Bar label="Agent" usage={mem.usage} />}
-          {memoryTarget && (
+        {usr && <Bar label="User" usage={usr.usage} />}
-            <UsageBar label="Agent" usage={memoryTarget.usage} />
-          )}
-          {userTarget && (
-            <UsageBar label="User" usage={userTarget.usage} />
-          )}
-        </div>
       </div>
     </Link>
   );

components/MessageBubble.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Wrench, ChevronDown, ChevronRight, User, Bot } from "lucide-react";
+import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
 import type { Message, ToolCall } from "@/lib/types";
 
 interface Props {
@@ -15,25 +15,24 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
   try { args = JSON.parse(tc.function.arguments); } catch {}
 
   return (
-    <div className="mt-2">
+    <div className="mt-1.5">
       <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"
+        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
-        style={{ color: "#f59e0b" }}
+        style={{ color: "var(--accent)" }}
       >
-        <Wrench size={11} />
+        <Wrench size={10} />
         <span className="font-mono">{tc.function.name}</span>
-        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
+        {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
       </button>
       {open && (
-        <div className="mt-1 ml-2 pl-2 border-l border-white/[0.06] space-y-1">
+        <div className="mt-1 ml-2 pl-2 space-y-1" style={{ borderLeft: "2px solid var(--border)" }}>
-          <pre className="text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto">
+          <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
             {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">
+            <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
-              {result.content.slice(0, 500)}
+              {result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
-              {result.content.length > 500 ? "..." : ""}
             </pre>
           )}
         </div>
@@ -56,24 +55,14 @@ export function MessageBubble({ message, toolResults }: Props) {
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
       <div
-        className="max-w-[90%] rounded-2xl px-4 py-3"
+        className="max-w-[88%] rounded-2xl px-3.5 py-2.5"
         style={{
-          background: isUser ? "rgba(56,189,248,0.12)" : "rgba(255,255,255,0.04)",
+          background: isUser ? "var(--accent)" : "var(--bg-raised)",
-          border: `1px solid ${isUser ? "rgba(56,189,248,0.2)" : "rgba(255,255,255,0.06)"}`,
+          color: isUser ? "white" : "var(--text-1)",
         }}
       >
-        <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">
+          <p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
             {content}
           </p>
         )}
@@ -81,14 +70,10 @@ export function MessageBubble({ message, toolResults }: Props) {
           <div>
             {toolCalls.length <= 3 ? (
               toolCalls.map((tc) => (
-                <ToolCallBlock
+                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
-                  key={tc.id}
-                  tc={tc}
-                  result={toolResults.get(tc.id)}
-                />
               ))
             ) : (
-              <CollapsedToolCalls toolCalls={toolCalls} toolResults={toolResults} />
+              <CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
             )}
           </div>
         )}
@@ -97,27 +82,20 @@ export function MessageBubble({ message, toolResults }: Props) {
   );
 }
 
-function CollapsedToolCalls({
+function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; toolResults: Map<string, { name: string; content: string }> }) {
-  toolCalls,
-  toolResults,
-}: {
-  toolCalls: ToolCall[];
-  toolResults: Map<string, { name: string; content: string }>;
-}) {
   const [open, setOpen] = useState(false);
   return (
-    <div className="mt-2">
+    <div className="mt-1.5">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04]"
+        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
-        style={{ color: "#f59e0b" }}
+        style={{ color: "var(--accent)" }}
       >
-        <Wrench size={11} />
+        <Wrench size={10} />
         <span>{toolCalls.length} tool calls</span>
-        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
+        {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
       </button>
-      {open &&
+      {open && toolCalls.map((tc) => (
-        toolCalls.map((tc) => (
         <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
       ))}
     </div>

components/SessionCard.tsx

@@ -1,36 +1,38 @@
 "use client";
 
 import Link from "next/link";
-import { MessageSquare } from "lucide-react";
+import { ChevronRight } 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)}`;
+  const title = session.title || "Untitled session";
 
   return (
     <Link href={`/history/${session.id}`}>
-      <div className="glass glass-hover p-4 transition-all">
+      <div className="flex items-center gap-3 py-3 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
-        <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex-1 min-w-0">
-          <span className="text-sm font-medium text-zinc-200 line-clamp-1 flex-1">
+          <div className="text-[14px] text-[var(--text-1)] truncate">{title}</div>
-            {title}
+          <div className="flex items-center gap-2 mt-0.5">
-          </span>
+            <span className={`badge ${platformBadgeClass(session.source)}`}>
-          <span
-            className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 font-medium ${platformBadgeClass(session.source)}`}
-          >
               {session.source}
             </span>
-        </div>
+            <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
-        <div className="flex items-center gap-3 text-xs text-zinc-500">
+              {session.message_count} msgs
-          <span className="flex items-center gap-1">
+            </span>
-            <MessageSquare size={12} />
+            {tokens > 0 && (
-            {session.message_count}
+              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+                {formatTokens(tokens)}
+              </span>
+            )}
+            <span className="text-[11px] ml-auto" style={{ color: "var(--text-3)" }}>
+              {timeAgo(session.started_at)}
             </span>
-          {tokens > 0 && <span>{formatTokens(tokens)} tok</span>}
-          <span className="ml-auto">{timeAgo(session.started_at)}</span>
           </div>
         </div>
+        <ChevronRight size={16} style={{ color: "var(--text-3)" }} />
+      </div>
     </Link>
   );
 }

components/StatsCard.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { BarChart3 } from "lucide-react";
 import { useSessions } from "@/lib/hooks";
 import { formatTokens } from "@/lib/utils";
 
@@ -10,30 +9,22 @@ export function StatsCard() {
   const items = data?.items || [];
   const total = data?.total || 0;
   const totalTokens = items.reduce((s, i) => s + i.input_tokens + i.output_tokens, 0);
-  const totalCost = items.reduce((s, i) => s + (i.estimated_cost_usd || 0), 0);
   const platforms = new Set(items.map((i) => i.source));
 
-  const stats = [
-    { label: "Sessions", value: String(total) },
-    { label: "Tokens (recent)", value: formatTokens(totalTokens) },
-    { label: "Platforms", value: String(platforms.size) },
-    ...(totalCost > 0 ? [{ label: "Est. Cost", value: "$" + totalCost.toFixed(2) }] : []),
-  ];
-
   return (
-    <div className="glass p-4">
+    <div className="card p-4 grid grid-cols-3 gap-4">
-      <div className="flex items-center gap-2 mb-3">
+      <Stat value={String(total)} label="Sessions" />
-        <BarChart3 size={16} style={{ color: "#22c55e" }} />
+      <Stat value={formatTokens(totalTokens)} label="Tokens" />
-        <span className="text-sm font-medium text-zinc-200">Stats</span>
+      <Stat value={String(platforms.size)} label="Platforms" />
-      </div>
+    </div>
-      <div className="grid grid-cols-3 gap-3">
+  );
-        {stats.map((s) => (
+}
-          <div key={s.label} className="text-center">
+
-            <div className="text-lg font-bold text-zinc-200">{s.value}</div>
+function Stat({ value, label }: { value: string; label: string }) {
-            <div className="text-[10px] text-zinc-500">{s.label}</div>
+  return (
-          </div>
+    <div className="text-center">
-        ))}
+      <div className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>{value}</div>
-      </div>
+      <div className="text-[11px]" style={{ color: "var(--text-3)" }}>{label}</div>
     </div>
   );
 }

components/StatusCard.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Cpu, Wifi, WifiOff } from "lucide-react";
 import { useHealth, useConfig } from "@/lib/hooks";
 
 export function StatusCard() {
@@ -9,38 +8,22 @@ export function StatusCard() {
 
   const online = health?.status === "ok";
   const model = config?.model || "—";
-  const provider = config?.provider || "custom";
 
   return (
-    <div className="glass p-4">
+    <div className="card p-4 flex items-center justify-between">
-      <div className="flex items-center justify-between mb-3">
+      <div>
-        <div className="flex items-center gap-2">
+        <div className="text-[13px] font-mono" style={{ color: "var(--text-2)" }}>
-          <Cpu size={18} style={{ color: "#f59e0b" }} />
+          {model}
-          <span className="font-semibold text-sm">Hermes</span>
         </div>
-        <div className="flex items-center gap-1.5">
+      </div>
+      <div className="flex items-center gap-2">
         <div
           className="w-2 h-2 rounded-full"
-            style={{
+          style={{ background: online ? "#34c759" : "#ff3b30" }}
-              background: online ? "#22c55e" : "#ef4444",
-            }}
         />
-          {online ? (
+        <span className="text-xs" style={{ color: online ? "#34c759" : "#ff3b30" }}>
-            <Wifi size={14} style={{ color: "#22c55e" }} />
+          {online ? "Online" : "Offline"}
-          ) : (
+        </span>
-            <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>
   );

deploy/deploy.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+set -euo pipefail
+
+PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+SYSTEMD_DIR="$HOME/.config/systemd/user"
+PORT="${1:-3100}"
+
+echo "Building..."
+cd "$PROJECT_DIR"
+export PATH="$HOME/.hermes/node/bin:$PATH"
+HERMES_BACKEND_URL=http://127.0.0.1:8643 npx next build
+
+echo "Copying static assets to standalone..."
+cp -r .next/static .next/standalone/.next/static
+cp -r public .next/standalone/public
+
+echo "Installing service..."
+mkdir -p "$SYSTEMD_DIR"
+sed "s|ExecStart=.*|ExecStart=/home/hermes/.hermes/node/bin/node $PROJECT_DIR/.next/standalone/server.js|" \
+  "$PROJECT_DIR/deploy/hermes-os.service" > "$SYSTEMD_DIR/hermes-os.service"
+
+# Add port
+if ! grep -q "PORT=" "$SYSTEMD_DIR/hermes-os.service"; then
+  sed -i "/NODE_ENV/a Environment=PORT=$PORT" "$SYSTEMD_DIR/hermes-os.service"
+  sed -i "/NODE_ENV/a Environment=HOSTNAME=0.0.0.0" "$SYSTEMD_DIR/hermes-os.service"
+fi
+
+systemctl --user daemon-reload
+systemctl --user restart hermes-os
+systemctl --user enable hermes-os
+
+sleep 3
+if curl -s -o /dev/null -w "%{http_code}" "http://localhost:$PORT" | grep -q 200; then
+  echo "✅ Hermes OS running on port $PORT"
+else
+  echo "⚠️  Service started but health check failed"
+  systemctl --user status hermes-os --no-pager
+fi

deploy/hermes-os.service

@@ -0,0 +1,18 @@
+[Unit]
+Description=Hermes OS — Mobile dashboard
+After=network.target
+
+[Service]
+Type=simple
+WorkingDirectory=/home/hermes/hermes-os
+Environment=PATH=/home/hermes/.hermes/node/bin:/usr/local/bin:/usr/bin:/bin
+Environment=HERMES_BACKEND_URL=http://127.0.0.1:8643
+Environment=HERMES_GATEWAY_URL=http://127.0.0.1:8642
+Environment=HERMES_SOUL_PATH=/home/hermes/.hermes/SOUL.md
+Environment=NODE_ENV=production
+ExecStart=/home/hermes/.hermes/node/bin/node /home/hermes/hermes-os/.next/standalone/server.js
+Restart=on-failure
+RestartSec=5
+
+[Install]
+WantedBy=default.target

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  output: "standalone",
   reactStrictMode: true,
 };