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/skills/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { Puzzle, ChevronRight, Search, X } from "lucide-react";
+import { ChevronRight, Search, X } from "lucide-react";
 import { useSkills } from "@/lib/hooks";
 import type { SkillSummary } from "@/lib/types";
 
@@ -14,91 +14,62 @@ export default function SkillsPage() {
   const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();
 
   const filtered = search
-    ? skills.filter(
-        (s) =>
-          s.name.toLowerCase().includes(search.toLowerCase()) ||
-          s.description.toLowerCase().includes(search.toLowerCase())
-      )
+    ? skills.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.description.toLowerCase().includes(search.toLowerCase()))
     : skills;
 
   const grouped = categories
-    .map((cat) => ({
-      category: cat,
-      skills: filtered.filter((s) => (s.category || "uncategorized") === cat),
-    }))
+    .map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
     .filter((g) => g.skills.length > 0);
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <Puzzle size={20} style={{ color: "#a78bfa" }} />
-        <h1 className="text-xl font-bold" style={{ color: "#a78bfa" }}>Skills</h1>
-        <span className="text-xs text-zinc-500 ml-auto">{skills.length} total</span>
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Skills</h1>
+        <span className="text-[12px]" style={{ color: "var(--text-3)" }}>{skills.length}</span>
       </div>
 
       <div className="relative">
-        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
         <input
           type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          placeholder="Filter skills..."
-          className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm bg-white/[0.04] border border-white/[0.08] text-zinc-200 placeholder-zinc-600 outline-none focus:border-white/[0.15] transition-colors"
+          placeholder="Filter..."
+          className="w-full pl-9 pr-9 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)" }}
         />
         {search && (
-          <button
-            onClick={() => setSearch("")}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
-          >
+          <button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
             <X size={16} />
           </button>
         )}
       </div>
 
       {isLoading ? (
-        <div className="space-y-3">
-          {[...Array(5)].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>
-          ))}
-        </div>
+        <div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
       ) : (
         <div className="space-y-5">
           {grouped.map(({ category, skills }) => (
             <div key={category}>
-              <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2 px-1">
-                {category}
-              </h2>
-              <div className="space-y-1.5">
-                {skills.map((s) => (
-                  <SkillRow key={s.name} skill={s} />
-                ))}
-              </div>
+              <div className="section-label mb-2">{category}</div>
+              {skills.map((s) => (
+                <Link key={s.name} href={"/skills/" + s.name}>
+                  <div className="flex items-center gap-3 py-2.5 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]" style={{ color: "var(--text-1)" }}>{s.name}</div>
+                      <div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
+                    </div>
+                    <ChevronRight size={16} style={{ color: "var(--text-3)" }} />
+                  </div>
+                </Link>
+              ))}
             </div>
           ))}
           {grouped.length === 0 && (
-            <div className="glass p-6 text-center text-sm text-zinc-500">
-              No skills match &ldquo;{search}&rdquo;
-            </div>
+            <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match "{search}"</p>
           )}
         </div>
       )}
     </div>
   );
 }
-
-function SkillRow({ skill }: { skill: SkillSummary }) {
-  return (
-    <Link href={`/skills/${skill.name}`}>
-      <div className="glass glass-hover p-3 flex items-center gap-3 transition-all">
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-zinc-200">{skill.name}</div>
-          <div className="text-xs text-zinc-500 line-clamp-1">{skill.description}</div>
-        </div>
-        <ChevronRight size={16} className="text-zinc-600 shrink-0" />
-      </div>
-    </Link>
-  );
-}