Complete visual redesign: solid dark cards, purple accent, iOS-like
- All pages use new design system (card, section-label, btn-accent) - No more glassmorphism — clean solid surfaces - Cron, Soul, Config, Skills detail all restyled - Consistent typography and spacing throughout
This commit is contained in:
Hermes
+53
-72
@@ -1,8 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Timer, Play, Pause, RefreshCw, ChevronRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Timer, Play, RefreshCw } from "lucide-react";
|
||||
import { timeAgo } from "@/lib/utils";
|
||||
|
||||
interface CronJob {
|
||||
@@ -19,14 +18,15 @@ interface CronJob {
|
||||
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 [triggering, setTriggering] = useState<string | null>(null);
|
||||
|
||||
const load = () => {
|
||||
setLoading(true);
|
||||
fetch("/cron/jobs")
|
||||
.then((r) => r.json())
|
||||
.then((d) => setJobs(d.jobs || []))
|
||||
@@ -37,8 +37,10 @@ export default function CronPage() {
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const trigger = async (id: string) => {
|
||||
await fetch(`/cron/jobs/${id}/run`, { method: "POST" });
|
||||
load();
|
||||
setTriggering(id);
|
||||
await fetch("/cron/jobs/" + id + "/run", { method: "POST" });
|
||||
setTriggering(null);
|
||||
setTimeout(load, 1000);
|
||||
};
|
||||
|
||||
const active = jobs.filter((j) => j.status === "active" || j.status === "enabled");
|
||||
@@ -48,15 +50,8 @@ export default function CronPage() {
|
||||
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" }}
|
||||
>
|
||||
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Cron Jobs</h1>
|
||||
<button onClick={load} className="p-2 rounded-xl active:scale-95" style={{ color: "var(--text-2)" }}>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -64,81 +59,67 @@ export default function CronPage() {
|
||||
{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 key={i} className="card p-4 animate-pulse">
|
||||
<div className="h-4 rounded w-3/4 mb-2" style={{ background: "var(--bg-hover)" }} />
|
||||
<div className="h-3 rounded w-1/2" style={{ background: "var(--bg-hover)" }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : jobs.length === 0 ? (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
No cron jobs configured
|
||||
<div className="py-12 text-center">
|
||||
<Timer size={32} className="mx-auto mb-3" style={{ color: "var(--text-3)" }} />
|
||||
<p className="text-sm" style={{ color: "var(--text-3)" }}>No cron jobs</p>
|
||||
</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 className="space-y-5">
|
||||
{active.length > 0 && <JobSection label="Active" jobs={active} onTrigger={trigger} triggering={triggering} />}
|
||||
{paused.length > 0 && <JobSection label="Paused" jobs={paused} onTrigger={trigger} triggering={triggering} />}
|
||||
{other.length > 0 && <JobSection label="Other" jobs={other} onTrigger={trigger} triggering={triggering} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ label, jobs, onTrigger }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void }) {
|
||||
function JobSection({ label, jobs, onTrigger, triggering }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void; triggering: string | null }) {
|
||||
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">
|
||||
<div className="section-label mb-2">{label} ({jobs.length})</div>
|
||||
<div className="space-y-2">
|
||||
{jobs.map((j) => (
|
||||
<CronCard key={j.id} job={j} onTrigger={() => onTrigger(j.id)} />
|
||||
<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)}
|
||||
</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>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user