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/history/[id]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { use } from "react";
-import { ArrowLeft, MessageSquare, Wrench } from "lucide-react";
+import { use, useState, useRef, useEffect } from "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">
-        <Link href="/history" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
-          <ArrowLeft size={20} className="text-zinc-400" />
+      <div className="flex items-center gap-3 mb-4">
+        <Link href="/history" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
+          <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">
-            {session?.title || `Session ${id.slice(0, 8)}`}
-          </h1>
+          <div className="text-[15px] font-medium truncate" style={{ color: "var(--text-1)" }}>
+            {session?.title || "Session " + id.slice(0, 8)}
+          </div>
           {session && (
-            <div className="flex items-center gap-2 text-xs text-zinc-500">
-              <span className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${platformBadgeClass(session.source)}`}>
+            <div className="flex items-center gap-2 mt-0.5">
+              <span className={`badge ${platformBadgeClass(session.source)}`}>
                 {session.source}
               </span>
-              <span>{session.message_count} msgs</span>
-              <span>{formatTokens(session.input_tokens + session.output_tokens)} tok</span>
-              <span>{timeAgo(session.started_at)}</span>
+              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+                {session.message_count} msgs · {formatTokens(session.input_tokens + session.output_tokens)} · {timeAgo(session.started_at)}
+              </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 className="h-4 bg-white/[0.06] rounded w-full mb-2" />
-              <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+            <div key={i} className="card p-4 animate-pulse">
+              <div className="h-4 rounded w-full mb-2" style={{ background: "var(--bg-hover)" }} />
+              <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
-              key={m.id}
-              message={m}
-              toolResults={toolResults}
-            />
+            <MessageBubble 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>
       )}