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

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: "/memory", label: "Memory", icon: Brain, color: "#38bdf8" },
-  { href: "/history", label: "History", icon: Clock, color: "#22c55e" },
+  { href: "/", label: "Pulse", icon: Activity },
+  { href: "/memory", label: "Memory", icon: Brain },
+  { 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)",
-        backdropFilter: "blur(20px)",
-        WebkitBackdropFilter: "blur(20px)",
+        background: "rgba(17,17,19,0.95)",
+        backdropFilter: "saturate(180%) 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">
-        {TABS.map(({ href, label, icon: Icon, color }) => {
+      <div className="flex justify-around items-center h-14 max-w-lg mx-auto">
+        {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"
-              style={{ opacity: active ? 1 : 0.4 }}
+              className="flex flex-col items-center gap-0.5 px-6 py-1.5"
             >
-              <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"
-                style={{ color: active ? color : "#a1a1aa" }}
+                className="text-[10px]"
+                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
-            onClick={() => { setEditing(false); setEditText(content); }}
-            className="p-1.5 rounded-lg text-zinc-500"
-          >
+          <button onClick={() => { setEditing(false); setEditText(content); }} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
             <X size={16} />
           </button>
-          <button
-            onClick={handleSave}
-            className="p-1.5 rounded-lg"
-            style={{ color: "#22c55e" }}
-          >
+          <button onClick={handleSave} className="p-1.5 rounded-lg" style={{ color: "#34c759" }}>
             <Check size={16} />
           </button>
         </div>
@@ -50,30 +44,24 @@ export function MemoryEntry({ content, onPatch, onDelete }: Props) {
   }
 
   return (
-    <div className="glass p-4 group">
-      <p className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed">
+    <div className="card p-4 group">
+      <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
-          onClick={() => setEditing(true)}
-          className="p-1.5 rounded-lg text-zinc-500 active:text-zinc-300"
-        >
+        <button onClick={() => setEditing(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
           <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
-            onClick={() => setConfirmDelete(true)}
-            className="p-1.5 rounded-lg text-zinc-500 active:text-red-400"
-          >
+          <button onClick={() => setConfirmDelete(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
             <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 }) {
-  // usage format: "42% — 939/2,200 chars"
+function Bar({ label, usage }: { label: string; usage: string }) {
   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="flex items-center gap-3">
+      <span className="text-[12px] w-12" style={{ color: "var(--text-2)" }}>{label}</span>
+      <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
         <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 memoryTarget = data?.targets?.find((t) => t.target === "memory");
-  const userTarget = data?.targets?.find((t) => t.target === "user");
+  const mem = data?.targets?.find((t) => t.target === "memory");
+  const usr = 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
+      <div className="card card-hover p-4 space-y-2 transition-colors">
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-[13px] font-medium" style={{ color: "var(--text-1)" }}>Memory</span>
+          <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+            {(mem?.entry_count || 0) + (usr?.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>
+        {mem && <Bar label="Agent" usage={mem.usage} />}
+        {usr && <Bar label="User" usage={usr.usage} />}
       </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"
-        style={{ color: "#f59e0b" }}
+        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
+        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">
-          <pre className="text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto">
+        <div className="mt-1 ml-2 pl-2 space-y-1" style={{ borderLeft: "2px solid var(--border)" }}>
+          <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">
-              {result.content.slice(0, 500)}
-              {result.content.length > 500 ? "..." : ""}
+            <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.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)",
-          border: `1px solid ${isUser ? "rgba(56,189,248,0.2)" : "rgba(255,255,255,0.06)"}`,
+          background: isUser ? "var(--accent)" : "var(--bg-raised)",
+          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
-                  key={tc.id}
-                  tc={tc}
-                  result={toolResults.get(tc.id)}
-                />
+                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
               ))
             ) : (
-              <CollapsedToolCalls toolCalls={toolCalls} toolResults={toolResults} />
+              <CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
             )}
           </div>
         )}
@@ -97,29 +82,22 @@ export function MessageBubble({ message, toolResults }: Props) {
   );
 }
 
-function CollapsedToolCalls({
-  toolCalls,
-  toolResults,
-}: {
-  toolCalls: ToolCall[];
-  toolResults: Map<string, { name: string; content: string }>;
-}) {
+function CollapsedTools({ 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]"
-        style={{ color: "#f59e0b" }}
+        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
+        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 &&
-        toolCalls.map((tc) => (
-          <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
-        ))}
+      {open && toolCalls.map((tc) => (
+        <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
+      ))}
     </div>
   );
 }

components/SessionCard.tsx

@@ -1,35 +1,37 @@
 "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-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 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-1 min-w-0">
+          <div className="text-[14px] text-[var(--text-1)] truncate">{title}</div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className={`badge ${platformBadgeClass(session.source)}`}>
+              {session.source}
+            </span>
+            <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+              {session.message_count} msgs
+            </span>
+            {tokens > 0 && (
+              <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>
+          </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="flex items-center gap-2 mb-3">
-        <BarChart3 size={16} style={{ color: "#22c55e" }} />
-        <span className="text-sm font-medium text-zinc-200">Stats</span>
-      </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>
-            <div className="text-[10px] text-zinc-500">{s.label}</div>
-          </div>
-        ))}
-      </div>
+    <div className="card p-4 grid grid-cols-3 gap-4">
+      <Stat value={String(total)} label="Sessions" />
+      <Stat value={formatTokens(totalTokens)} label="Tokens" />
+      <Stat value={String(platforms.size)} label="Platforms" />
+    </div>
+  );
+}
+
+function Stat({ value, label }: { value: string; label: string }) {
+  return (
+    <div className="text-center">
+      <div className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>{value}</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="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 className="card p-4 flex items-center justify-between">
+      <div>
+        <div className="text-[13px] font-mono" style={{ color: "var(--text-2)" }}>
+          {model}
         </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 className="flex items-center gap-2">
+        <div
+          className="w-2 h-2 rounded-full"
+          style={{ background: online ? "#34c759" : "#ff3b30" }}
+        />
+        <span className="text-xs" style={{ color: online ? "#34c759" : "#ff3b30" }}>
+          {online ? "Online" : "Offline"}
+        </span>
       </div>
     </div>
   );