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/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>
   );