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/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: "/cron", label: "Cron", icon: Timer, color: "#f59e0b" },
-  { href: "/soul", label: "Soul", icon: Sparkles, color: "#ec4899" },
-  { href: "/config", label: "Config", icon: Settings, color: "#6b7280" },
+  { href: "/skills", label: "Skills", icon: Puzzle },
+  { href: "/cron", label: "Cron", icon: Timer },
+  { href: "/soul", label: "Soul", icon: Sparkles },
+  { href: "/config", label: "Config", icon: Settings },
 ] as const;
 
 export default function PulsePage() {
   const qc = useQueryClient();
   const { data: sessionsData, isLoading } = useSessions(8);
 
-  usePullToRefresh(() => {
-    qc.invalidateQueries();
-  });
+  usePullToRefresh(() => { qc.invalidateQueries(); });
 
   return (
-    <div className="space-y-4">
-      <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
-        Pulse
-      </h1>
-
+    <div className="space-y-5">
       <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">
-              <Icon size={18} style={{ color }} />
-              <span className="text-[11px] font-medium" style={{ color }}>{label}</span>
+            <div className="card card-hover p-3 flex flex-col items-center gap-1 transition-colors">
+              <Icon size={18} style={{ color: "var(--accent)" }} />
+              <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">
-          Recent Sessions
-        </h2>
+        <div className="section-label mb-2">Recent</div>
         {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 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 key={i} className="py-3 animate-pulse">
+                <div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
+                <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>
         )}