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