Cron detail page with output history, markdown skill rendering

- /cron/[id]: job details, prompt, output history from filesystem
- Cron list items now link to detail pages
- Skills render SKILL.md as proper markdown (headings, code, tables)
- Cron output proxy reads from ~/.hermes/cron/output/
This commit is contained in:
Hermes
2026-04-09 21:26:34 -05:00
parent e24c179e89
commit 218d12b8d7
4 changed files with 236 additions and 31 deletions
+35 -31
View File
@@ -1,7 +1,8 @@
"use client";
import { useState, useEffect } from "react";
import { Timer, Play, RefreshCw } from "lucide-react";
import { Timer, Play, RefreshCw, Loader2 } from "lucide-react";
import Link from "next/link";
import { timeAgo } from "@/lib/utils";
interface CronJob {
@@ -14,7 +15,6 @@ interface CronJob {
skill?: string;
skills?: string[];
model?: string;
repeat?: number;
run_count?: number;
last_run?: string;
next_run?: string;
@@ -36,7 +36,9 @@ export default function CronPage() {
useEffect(() => { load(); }, []);
const trigger = async (id: string) => {
const trigger = async (e: React.MouseEvent, id: string) => {
e.preventDefault();
e.stopPropagation();
setTriggering(id);
await fetch("/cron/jobs/" + id + "/run", { method: "POST" });
setTriggering(null);
@@ -81,43 +83,45 @@ export default function CronPage() {
);
}
function JobSection({ label, jobs, onTrigger, triggering }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void; triggering: string | null }) {
function JobSection({ label, jobs, onTrigger, triggering }: { label: string; jobs: CronJob[]; onTrigger: (e: React.MouseEvent, id: string) => void; triggering: string | null }) {
return (
<div>
<div className="section-label mb-2">{label} ({jobs.length})</div>
<div className="space-y-2">
{jobs.map((j) => (
<div key={j.id} className="card p-4">
<div className="flex items-start justify-between gap-2 mb-2">
<div className="flex-1 min-w-0">
<div className="text-[14px] line-clamp-1" style={{ color: "var(--text-1)" }}>
{j.name || j.prompt.slice(0, 60)}
<Link key={j.id} href={"/cron/" + j.id}>
<div className="card card-hover p-4 transition-colors">
<div className="flex items-start justify-between gap-2 mb-2">
<div className="flex-1 min-w-0">
<div className="text-[14px] line-clamp-1" style={{ color: "var(--text-1)" }}>
{j.name || j.prompt.slice(0, 60)}
</div>
<div className="text-[12px] font-mono mt-0.5" style={{ color: "var(--text-3)" }}>{j.schedule}</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<div
className="w-2 h-2 rounded-full"
style={{ background: j.status === "active" || j.status === "enabled" ? "#34c759" : "var(--text-3)" }}
/>
<button
onClick={(e) => onTrigger(e, j.id)}
disabled={triggering === j.id}
className="p-1.5 rounded-lg active:bg-white/[0.04] disabled:opacity-30"
style={{ color: "var(--accent)" }}
>
{triggering === j.id ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
</button>
</div>
<div className="text-[12px] font-mono mt-0.5" style={{ color: "var(--text-3)" }}>{j.schedule}</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<div
className="w-2 h-2 rounded-full"
style={{ background: j.status === "active" || j.status === "enabled" ? "#34c759" : "var(--text-3)" }}
/>
<button
onClick={() => onTrigger(j.id)}
disabled={triggering === j.id}
className="p-1.5 rounded-lg active:bg-white/[0.04] disabled:opacity-30"
style={{ color: "var(--accent)" }}
>
<Play size={14} />
</button>
<div className="flex items-center gap-3 text-[11px]" style={{ color: "var(--text-3)" }}>
<span> {j.deliver}</span>
{j.skills && j.skills.length > 0 && (
<span style={{ color: "var(--accent)", opacity: 0.6 }}>{j.skills.join(", ")}</span>
)}
{j.last_run && <span className="ml-auto">last: {timeAgo(new Date(j.last_run).getTime() / 1000)}</span>}
</div>
</div>
<div className="flex items-center gap-3 text-[11px]" style={{ color: "var(--text-3)" }}>
<span> {j.deliver}</span>
{j.skills && j.skills.length > 0 && (
<span style={{ color: "var(--accent)", opacity: 0.6 }}>{j.skills.join(", ")}</span>
)}
{j.last_run && <span className="ml-auto">last: {timeAgo(new Date(j.last_run).getTime() / 1000)}</span>}
</div>
</div>
</Link>
))}
</div>
</div>