Add Skills browser, Cron jobs, SOUL.md editor

- Skills: categorized list with search, detail view with markdown - Cron: job list grouped by status, manual trigger button - Soul: full SOUL.md editor with save/revert - Pulse: quick link cards to Skills, Cron, Soul - All routes proxied server-side (no CORS)
2026-04-09 20:59:33 -05:00
parent 1bce2a29cc
commit f721d87423
10 changed files with 501 additions and 0 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Puzzle, ChevronRight, Search, X } from "lucide-react";
+import { useSkills } from "@/lib/hooks";
+import type { SkillSummary } from "@/lib/types";
+
+export default function SkillsPage() {
+  const { data, isLoading } = useSkills();
+  const [search, setSearch] = useState("");
+
+  const skills = data?.skills || [];
+  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;
+
+  const grouped = categories
+    .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>
+
+      <div className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+        <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"
+        />
+        {search && (
+          <button
+            onClick={() => setSearch("")}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
+          >
+            <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-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>
+          ))}
+          {grouped.length === 0 && (
+            <div className="glass p-6 text-center text-sm text-zinc-500">
+              No skills match &ldquo;{search}&rdquo;
+            </div>
+          )}
+        </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>
+  );
+}