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,15 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BACKEND = process.env.HERMES_BACKEND_URL || "http://127.0.0.1:8643";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ name: string[] }> }) {
+  const { name } = await params;
+  const target = name.join("/");
+  const qs = req.nextUrl.search;
+  const res = await fetch(BACKEND + "/api/skills/" + target + qs);
+  const data = await res.text();
+  return new NextResponse(data, {
+    status: res.status,
+    headers: { "content-type": "application/json" },
+  });
+}
@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BACKEND = process.env.HERMES_BACKEND_URL || "http://127.0.0.1:8643";
+
+export async function GET(req: NextRequest) {
+  const qs = req.nextUrl.search;
+  const res = await fetch(BACKEND + "/api/skills" + qs);
+  const data = await res.text();
+  return new NextResponse(data, {
+    status: res.status,
+    headers: { "content-type": "application/json" },
+  });
+}
@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const GATEWAY = process.env.HERMES_GATEWAY_URL || "http://127.0.0.1:8642";
+
+export async function POST(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  try {
+    const res = await fetch(GATEWAY + "/api/jobs/" + id + "/run", { method: "POST" });
+    const data = await res.text();
+    return new NextResponse(data, {
+      status: res.status,
+      headers: { "content-type": "application/json" },
+    });
+  } catch {
+    return NextResponse.json({ error: "gateway unreachable" }, { status: 502 });
+  }
+}
@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+const GATEWAY = process.env.HERMES_GATEWAY_URL || "http://127.0.0.1:8642";
+
+export async function GET() {
+  try {
+    const res = await fetch(GATEWAY + "/api/jobs");
+    const data = await res.text();
+    return new NextResponse(data, {
+      status: res.status,
+      headers: { "content-type": "application/json" },
+    });
+  } catch {
+    return NextResponse.json({ jobs: [] }, { status: 502 });
+  }
+}
@@ -0,0 +1,144 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Timer, Play, Pause, RefreshCw, ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { timeAgo } from "@/lib/utils";
+
+interface CronJob {
+  id: string;
+  name?: string;
+  prompt: string;
+  schedule: string;
+  status: string;
+  deliver: string;
+  skill?: string;
+  skills?: string[];
+  model?: string;
+  repeat?: number;
+  run_count?: number;
+  last_run?: string;
+  next_run?: string;
+  created_at?: string;
+}
+
+export default function CronPage() {
+  const [jobs, setJobs] = useState<CronJob[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const load = () => {
+    fetch("/cron/jobs")
+      .then((r) => r.json())
+      .then((d) => setJobs(d.jobs || []))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const trigger = async (id: string) => {
+    await fetch(`/cron/jobs/${id}/run`, { method: "POST" });
+    load();
+  };
+
+  const active = jobs.filter((j) => j.status === "active" || j.status === "enabled");
+  const paused = jobs.filter((j) => j.status === "paused");
+  const other = jobs.filter((j) => !["active", "enabled", "paused"].includes(j.status));
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Timer size={20} style={{ color: "#f59e0b" }} />
+          <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>Cron Jobs</h1>
+        </div>
+        <button
+          onClick={load}
+          className="p-2 rounded-xl active:scale-95 transition-all"
+          style={{ color: "#f59e0b" }}
+        >
+          <RefreshCw size={16} />
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="space-y-2">
+          {[...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>
+          ))}
+        </div>
+      ) : jobs.length === 0 ? (
+        <div className="glass p-6 text-center text-sm text-zinc-500">
+          No cron jobs configured
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {active.length > 0 && (
+            <Section label="Active" jobs={active} onTrigger={trigger} />
+          )}
+          {paused.length > 0 && (
+            <Section label="Paused" jobs={paused} onTrigger={trigger} />
+          )}
+          {other.length > 0 && (
+            <Section label="Other" jobs={other} onTrigger={trigger} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Section({ label, jobs, onTrigger }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void }) {
+  return (
+    <div>
+      <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2 px-1">
+        {label} ({jobs.length})
+      </h2>
+      <div className="space-y-1.5">
+        {jobs.map((j) => (
+          <CronCard key={j.id} job={j} onTrigger={() => onTrigger(j.id)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CronCard({ job, onTrigger }: { job: CronJob; onTrigger: () => void }) {
+  const isActive = job.status === "active" || job.status === "enabled";
+  return (
+    <div className="glass p-4">
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-zinc-200 line-clamp-1">
+            {job.name || job.prompt.slice(0, 60)}
+          </div>
+          <div className="text-xs text-zinc-500 font-mono mt-0.5">{job.schedule}</div>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <div
+            className="w-2 h-2 rounded-full"
+            style={{ background: isActive ? "#22c55e" : "#6b7280" }}
+          />
+          <button
+            onClick={onTrigger}
+            className="p-1.5 rounded-lg active:bg-white/[0.06]"
+            style={{ color: "#f59e0b" }}
+            title="Run now"
+          >
+            <Play size={14} />
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center gap-3 text-[11px] text-zinc-500">
+        <span>→ {job.deliver}</span>
+        {job.skills && job.skills.length > 0 && (
+          <span className="text-purple-400/60">{job.skills.join(", ")}</span>
+        )}
+        {job.last_run && <span className="ml-auto">last: {timeAgo(new Date(job.last_run).getTime() / 1000)}</span>}
+      </div>
+    </div>
+  );
+}
@@ -1,10 +1,18 @@
 "use client";

+import Link from "next/link";
+import { Puzzle, Timer, Sparkles } from "lucide-react";
 import { StatusCard } from "@/components/StatusCard";
 import { SessionCard } from "@/components/SessionCard";
 import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
 import { useSessions } from "@/lib/hooks";

+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" },
+] as const;
+
 export default function PulsePage() {
  const { data: sessionsData, isLoading } = useSessions(8);

@@ -17,6 +25,18 @@ export default function PulsePage() {
      <StatusCard />
      <MemorySnapshotCard />

+      {/* Quick links */}
+      <div className="grid grid-cols-3 gap-2">
+        {QUICK_LINKS.map(({ href, label, icon: Icon, color }) => (
+          <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>
+          </Link>
+        ))}
+      </div>
+
      <div>
        <h2 className="text-sm font-medium text-zinc-400 mb-2">
          Recent Sessions
@@ -0,0 +1,65 @@
+"use client";
+
+import { use } from "react";
+import { ArrowLeft, FileText, Folder } from "lucide-react";
+import Link from "next/link";
+import { useSkill } from "@/lib/hooks";
+
+export default function SkillDetailPage({ params }: { params: Promise<{ name: string }> }) {
+  const { name } = use(params);
+  const { data, isLoading } = useSkill(name);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/skills" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
+          <ArrowLeft size={20} className="text-zinc-400" />
+        </Link>
+        <h1 className="text-base font-semibold text-zinc-200">{name}</h1>
+      </div>
+
+      {isLoading ? (
+        <div className="glass p-4 animate-pulse space-y-2">
+          <div className="h-4 bg-white/[0.06] rounded w-full" />
+          <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+          <div className="h-4 bg-white/[0.06] rounded w-1/2" />
+        </div>
+      ) : data ? (
+        <>
+          {/* Linked files */}
+          {data.linked_files && Object.keys(data.linked_files).length > 0 && (
+            <div className="glass p-3">
+              <div className="text-xs font-medium text-zinc-400 mb-2 flex items-center gap-1.5">
+                <Folder size={12} /> Linked Files
+              </div>
+              <div className="space-y-1">
+                {Object.entries(data.linked_files).map(([dir, files]) =>
+                  (files as string[]).map((f) => (
+                    <div
+                      key={`${dir}/${f}`}
+                      className="flex items-center gap-2 text-xs text-zinc-500 py-0.5"
+                    >
+                      <FileText size={11} />
+                      <span className="font-mono">{dir}/{f}</span>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Skill content */}
+          <div className="glass p-4">
+            <pre className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto">
+              {data.content}
+            </pre>
+          </div>
+        </>
+      ) : (
+        <div className="glass p-6 text-center text-sm text-zinc-500">
+          Skill not found
+        </div>
+      )}
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import { promises as fs } from "fs";
+
+const SOUL_PATH = process.env.HERMES_SOUL_PATH || "/home/hermes/.hermes/SOUL.md";
+
+export async function GET() {
+  try {
+    const content = await fs.readFile(SOUL_PATH, "utf-8");
+    return NextResponse.json({ content });
+  } catch {
+    return NextResponse.json({ content: "" });
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  try {
+    const { content } = await req.json();
+    await fs.writeFile(SOUL_PATH, content, "utf-8");
+    return NextResponse.json({ ok: true });
+  } catch (e) {
+    return NextResponse.json({ error: String(e) }, { status: 500 });
+  }
+}
@@ -0,0 +1,84 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Sparkles, Save, RotateCcw } from "lucide-react";
+
+export default function SoulPage() {
+  const [content, setContent] = useState("");
+  const [original, setOriginal] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    fetch("/soul/api")
+      .then((r) => r.json())
+      .then((d) => { setContent(d.content || ""); setOriginal(d.content || ""); })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const dirty = content !== original;
+
+  const save = async () => {
+    setSaving(true);
+    await fetch("/soul/api", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+    setOriginal(content);
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sparkles size={20} style={{ color: "#ec4899" }} />
+          <h1 className="text-xl font-bold" style={{ color: "#ec4899" }}>SOUL.md</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          {dirty && (
+            <button
+              onClick={() => setContent(original)}
+              className="p-2 rounded-xl active:scale-95 text-zinc-500"
+            >
+              <RotateCcw size={16} />
+            </button>
+          )}
+          <button
+            onClick={save}
+            disabled={!dirty || saving}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium transition-all disabled:opacity-30"
+            style={{ background: "rgba(236,72,153,0.15)", color: "#ec4899" }}
+          >
+            <Save size={14} />
+            {saving ? "Saving..." : saved ? "Saved!" : "Save"}
+          </button>
+        </div>
+      </div>
+
+      <p className="text-xs text-zinc-500">
+        Persona file loaded fresh each message. Edit to change how Hermes communicates.
+      </p>
+
+      {loading ? (
+        <div className="glass p-4 animate-pulse space-y-2">
+          <div className="h-4 bg-white/[0.06] rounded w-full" />
+          <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+          <div className="h-4 bg-white/[0.06] rounded w-1/2" />
+        </div>
+      ) : (
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          className="w-full min-h-[60vh] p-4 rounded-2xl text-sm text-zinc-300 bg-white/[0.04] border border-white/[0.08] outline-none focus:border-white/[0.15] resize-none font-mono leading-relaxed transition-colors"
+          spellCheck={false}
+        />
+      )}
+    </div>
+  );
+}