@hienlh/ppm 0.23.24 → 0.23.25

package/src/web/components/settings/schedules/schedule-kind-fields.tsx

@@ -0,0 +1,131 @@
+/** The fields that depend on what a schedule runs: a prompt on a cron, or a script on a cron or always on. */
+import { lazy, Suspense, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { draftsToDecls, type ScheduleFormState } from "@/lib/schedule-form-model";
+import { cronProblem, nextFires } from "../../../../shared/schedule-cron";
+import type { ScheduleKind } from "../../../../types/scheduler";
+import { ScheduleInputsEditor } from "./schedule-inputs-editor";
+import { ScheduleInputValues } from "./schedule-input-values";
+
+const ScheduleScriptEditor = lazy(() => import("./schedule-script-editor").then((m) => ({ default: m.ScheduleScriptEditor })));
+
+type Set = <K extends keyof ScheduleFormState>(key: K, value: ScheduleFormState[K]) => void;
+
+export function ScheduleKindFields({ form, set, secretsSet }: { form: ScheduleFormState; set: Set; secretsSet: readonly string[] }) {
+  const decls = useMemo(() => draftsToDecls(form.inputs), [form.inputs]);
+  return (
+    <>
+      {form.kind === "script" && (
+        <Field label="Mode">
+          <Segmented
+            value={form.mode}
+            options={[["tick", "Tick"], ["always-on", "Always on"]]}
+            onChange={(v) => set("mode", v)}
+          />
+          <p className="text-[11px] text-muted-foreground">
+            {form.mode === "tick" ? "Runs once on each cron fire, to the end." : "Kept running; started again if it stops."}
+          </p>
+        </Field>
+      )}
+      {form.mode === "tick" && <CronField kind={form.kind} value={form.cron} onChange={(v) => set("cron", v)} />}
+      {form.kind === "prompt" ? (
+        <Field label="Prompt (do not embed secrets)">
+          <textarea
+            value={form.prompt}
+            onChange={(e) => set("prompt", e.target.value)}
+            placeholder="Check open PRs and summarize. If nothing to do, finish immediately."
+            rows={4}
+            className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/50 resize-y"
+          />
+        </Field>
+      ) : (
+        <>
+          <Field label="Script">
+            <Suspense fallback={<p className="text-[11px] text-muted-foreground py-2">Loading editor…</p>}>
+              <ScheduleScriptEditor value={form.script} onChange={(v) => set("script", v)} />
+            </Suspense>
+          </Field>
+          <Field label="Inputs">
+            <ScheduleInputsEditor inputs={form.inputs} onChange={(v) => set("inputs", v)} />
+          </Field>
+          {decls.length > 0 && (
+            <Field label="Values">
+              <ScheduleInputValues
+                decls={decls.filter((d) => d.key)}
+                values={form.values}
+                secrets={form.secrets}
+                secretsSet={secretsSet}
+                onValue={(k, v) => set("values", { ...form.values, [k]: v })}
+                onSecret={(k, v) => set("secrets", { ...form.secrets, [k]: v })}
+              />
+            </Field>
+          )}
+        </>
+      )}
+      <div className="grid grid-cols-2 gap-2">
+        {form.kind === "prompt" && (
+          <Field label="Max turns (optional)">
+            <Input type="number" min={1} value={form.maxTurns} onChange={(e) => set("maxTurns", e.target.value)} placeholder="∞" className="h-11 md:h-9 text-xs" />
+          </Field>
+        )}
+        {form.mode === "tick" && (
+          <Field label="Timeout (ms)">
+            <Input type="number" min={10_000} value={form.timeoutMs} onChange={(e) => set("timeoutMs", e.target.value)} className="h-11 md:h-9 text-xs" />
+          </Field>
+        )}
+      </div>
+    </>
+  );
+}
+
+function CronField({ kind, value, onChange }: { kind: ScheduleKind; value: string; onChange: (v: string) => void }) {
+  const hint = useMemo(() => {
+    if (!value.trim()) return "—";
+    const problem = cronProblem(value, kind);
+    if (problem) return problem;
+    return `Next: ${nextFires(value, 3).map((d) => d.toLocaleString()).join(" · ")}`;
+  }, [value, kind]);
+  return (
+    <Field label={kind === "script" ? "Cron (local timezone; seconds first is allowed)" : "Cron expression (local timezone)"}>
+      <Input value={value} onChange={(e) => onChange(e.target.value)} placeholder={kind === "script" ? "*/30 * * * * *" : "0 7 * * *"} className="h-11 md:h-9 text-xs font-mono" />
+      <p className="text-[11px] text-muted-foreground">{hint}</p>
+    </Field>
+  );
+}
+
+export function Segmented<T extends string>({ value, options, onChange, disabled }: {
+  value: T;
+  options: Array<[T, string]>;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div className="grid grid-flow-col auto-cols-fr gap-1 rounded-md border border-border p-1">
+      {options.map(([v, label]) => (
+        <button
+          key={v}
+          type="button"
+          disabled={disabled}
+          aria-pressed={value === v}
+          onClick={() => onChange(v)}
+          className={cn(
+            "min-h-11 md:min-h-8 rounded text-xs font-medium cursor-pointer disabled:cursor-not-allowed disabled:opacity-60",
+            value === v ? "bg-primary text-primary-foreground" : "text-muted-foreground active:bg-accent/40",
+          )}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
+      {children}
+    </div>
+  );
+}

package/src/web/components/settings/schedules/schedule-logs-sheet.tsx

@@ -0,0 +1,118 @@
+/** A script schedule's live log — what its process prints, as it prints it — and what it is doing. */
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Play, RotateCw } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { api } from "@/lib/api-client";
+import type { ScheduleStatusView, ScheduleView } from "../../../../types/scheduler";
+import { ScheduleSheet } from "./schedule-sheet";
+import { ScheduleStatusChip } from "./schedule-status-chip";
+
+const POLL_MS = 2000;
+const KEEP_LINES = 1000;
+
+interface LogLine { seq: number; at: string; text: string }
+
+export function ScheduleLogsSheet({ schedule, onClose, onChanged }: {
+  schedule: ScheduleView | null;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const [lines, setLines] = useState<LogLine[]>([]);
+  const [status, setStatus] = useState<ScheduleStatusView | null>(null);
+  const last = useRef(0);
+  const box = useRef<HTMLDivElement>(null);
+  /** Keep the newest line in view, unless the reader has scrolled up to read. */
+  const follow = useRef(true);
+  const id = schedule?.id;
+
+  useEffect(() => {
+    if (id === undefined) return;
+    let stopped = false;
+    let busy = false;
+    last.current = 0;
+    follow.current = true;
+    setLines([]);
+    setStatus(null);
+    const poll = async (): Promise<void> => {
+      if (busy) return;
+      busy = true;
+      try {
+        const res = await api.get<{ status: ScheduleStatusView; lines: LogLine[]; last: number }>(`/api/schedules/${id}/logs?after=${last.current}`);
+        if (stopped) return;
+        setStatus(res.status);
+        // The server started again, and its line numbers with it.
+        const restarted = res.last < last.current;
+        const fresh = restarted ? (await api.get<{ lines: LogLine[] }>(`/api/schedules/${id}/logs`)).lines : res.lines;
+        if (stopped) return;
+        if (restarted) setLines([]);
+        if (fresh.length) {
+          last.current = fresh[fresh.length - 1]!.seq;
+          setLines((prev) => [...prev, ...fresh].slice(-KEEP_LINES));
+        } else if (restarted) last.current = 0;
+      } catch { /* the next poll tries again */ } finally {
+        busy = false;
+      }
+    };
+    void poll();
+    const timer = setInterval(() => { if (document.visibilityState === "visible") void poll(); }, POLL_MS);
+    return () => { stopped = true; clearInterval(timer); };
+  }, [id]);
+
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (el && follow.current) el.scrollTop = el.scrollHeight;
+  }, [lines]);
+
+  if (!schedule) return null;
+  const alwaysOn = schedule.mode === "always-on";
+  const shown = { ...schedule, status: status ?? schedule.status };
+
+  const runNow = async () => {
+    try {
+      await api.post(`/api/schedules/${schedule.id}/run-now`);
+      toast.success(alwaysOn ? "Restarting" : "Tick started");
+      onChanged();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Run failed");
+    }
+  };
+
+  return (
+    <ScheduleSheet open onClose={onClose} title={`Logs: ${schedule.name}`} wide>
+      <div className="space-y-2 px-1">
+        <div className="flex items-center gap-2 text-[11px] text-muted-foreground min-w-0">
+          <ScheduleStatusChip schedule={shown} />
+          {shown.status.pid !== null && <span>pid {shown.status.pid}</span>}
+          {shown.status.since && <span className="truncate">since {new Date(shown.status.since).toLocaleString()}</span>}
+          {shown.status.restarts > 0 && <span>{shown.status.restarts} restarts</span>}
+        </div>
+        {shown.status.lastError && <p className="text-[11px] text-error break-all whitespace-pre-wrap line-clamp-6">{shown.status.lastError}</p>}
+        <div
+          ref={box}
+          onScroll={(e) => {
+            const el = e.currentTarget;
+            follow.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+          }}
+          className="h-[50vh] overflow-y-auto rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed"
+        >
+          {lines.length === 0 ? (
+            <p className="text-muted-foreground">Nothing printed yet. Lines from ctx.log and console appear here as they are printed.</p>
+          ) : (
+            lines.map((l) => (
+              <p key={l.seq} className="whitespace-pre-wrap break-all">
+                <span className="text-muted-foreground">{new Date(l.at).toLocaleTimeString()} </span>{l.text}
+              </p>
+            ))
+          )}
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <Button type="button" variant="outline" onClick={onClose} className="min-h-11 cursor-pointer">Close</Button>
+          <Button type="button" onClick={runNow} disabled={alwaysOn && !schedule.enabled} className="min-h-11 gap-1 cursor-pointer">
+            {alwaysOn ? <><RotateCw className="size-4" /> Restart</> : <><Play className="size-4" /> Run now</>}
+          </Button>
+        </div>
+      </div>
+    </ScheduleSheet>
+  );
+}

package/src/web/components/settings/schedules/schedule-row.tsx

@@ -1,8 +1,9 @@
 /** One schedule row — tap to expand runs, long-press/right-click for actions. */
 import { useState } from "react";
-import { Play, Pencil, Trash2, Power, ChevronDown, ChevronRight } from "@/lib/icons";
+import {
+  Play, Pencil, Trash2, Power, ChevronDown, ChevronRight, RotateCw, ScrollText, Download, FileCode, MessageSquare,
+} from "@/lib/icons";
 import { toast } from "sonner";
-import { cn } from "@/lib/utils";
 import { api } from "@/lib/api-client";
 import {
   ContextMenu,
@@ -11,27 +12,38 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
 } from "@/components/ui/adaptive-context-menu";
+import { downloadBlob } from "@/components/remote-desktop/remote-desktop-recording";
+import { serializeScheduleTemplate, type ScheduleTemplate } from "../../../../shared/schedule-template";
 import { ScheduleRuns } from "./schedule-runs";
-import type { Schedule } from "../../../../types/scheduler";
+import { ScheduleStatusChip } from "./schedule-status-chip";
+import type { ScheduleView } from "../../../../types/scheduler";
 
 export function ScheduleRow({
   schedule,
   onEdit,
+  onLogs,
   onChanged,
 }: {
-  schedule: Schedule;
+  schedule: ScheduleView;
   onEdit: () => void;
+  onLogs: () => void;
   onChanged: () => void;
 }) {
   const [expanded, setExpanded] = useState(false);
   const [runsKey, setRunsKey] = useState(0); // bump to force runs refetch after run-now
+  const isScript = schedule.kind === "script";
+  const alwaysOn = schedule.mode === "always-on";
+  const KindIcon = isScript ? FileCode : MessageSquare;
 
   const runNow = async () => {
     try {
-      const res = await api.post<{ runId: number; wasRunning: boolean }>(`/api/schedules/${schedule.id}/run-now`);
-      toast.success(`Run #${res.runId} started${res.wasRunning ? " (previous run still active)" : ""}`);
+      const res = await api.post<{ runId: number | null; wasRunning: boolean }>(`/api/schedules/${schedule.id}/run-now`);
+      // A script tick keeps a run only if it has something to show, so it has no number yet.
+      if (res.runId !== null) toast.success(`Run #${res.runId} started${res.wasRunning ? " (previous run still active)" : ""}`);
+      else toast.success(alwaysOn ? "Restarting" : "Tick started");
       setExpanded(true);
       setRunsKey((k) => k + 1);
+      onChanged();
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Run failed");
     }
@@ -46,6 +58,18 @@ export function ScheduleRow({
     }
   };
 
+  const exportTemplate = async () => {
+    try {
+      const res = await api.get<{ template: ScheduleTemplate; fileName: string; warnings: string[] }>(`/api/schedules/${schedule.id}/export`);
+      downloadBlob(new Blob([serializeScheduleTemplate(res.template)], { type: "application/json" }), res.fileName);
+      const note = "Non-secret input values were included as defaults. Secrets were left out.";
+      if (res.warnings.length) toast.warning("Template exported — check it before sharing", { description: [note, ...res.warnings].join("\n") });
+      else toast.success("Template exported", { description: note });
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Export failed");
+    }
+  };
+
   const remove = async () => {
     try {
       await api.del(`/api/schedules/${schedule.id}`);
@@ -56,6 +80,10 @@ export function ScheduleRow({
     }
   };
 
+  const when = alwaysOn
+    ? "Always on"
+    : <><span className="font-mono">{schedule.cron_expr}</span>{" · "}{schedule.next_fire_at && schedule.enabled ? `next ${new Date(schedule.next_fire_at).toLocaleString()}` : "—"}</>;
+
   return (
     <div className="rounded-lg border border-border">
       <ContextMenu>
@@ -66,29 +94,17 @@ export function ScheduleRow({
             className="w-full flex items-center gap-2 px-2.5 py-2.5 min-h-11 text-left cursor-pointer hover:bg-accent/30"
           >
             {expanded ? <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" /> : <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />}
+            <KindIcon className="size-4 shrink-0 text-muted-foreground" />
             <div className="flex-1 min-w-0">
               <p className="text-xs font-medium truncate">{schedule.name}</p>
-              <p className="text-[11px] text-muted-foreground truncate">
-                <span className="font-mono">{schedule.cron_expr}</span>
-                {" · "}
-                {schedule.next_fire_at && schedule.enabled
-                  ? `next ${new Date(schedule.next_fire_at).toLocaleString()}`
-                  : "—"}
-              </p>
+              <p className="text-[11px] text-muted-foreground truncate">{when}</p>
             </div>
-            <span
-              className={cn(
-                "rounded px-1.5 py-0.5 text-[10px] font-medium shrink-0",
-                schedule.enabled ? "bg-success/10 text-success" : "bg-muted text-muted-foreground",
-              )}
-            >
-              {schedule.enabled ? "Enabled" : "Disabled"}
-            </span>
+            <ScheduleStatusChip schedule={schedule} />
           </button>
         </ContextMenuTrigger>
         <ContextMenuContent>
           <ContextMenuItem onClick={runNow}>
-            <Play className="size-3.5" /> Run now
+            {alwaysOn ? <><RotateCw className="size-3.5" /> Restart</> : <><Play className="size-3.5" /> Run now</>}
           </ContextMenuItem>
           <ContextMenuItem onClick={toggleEnabled}>
             <Power className="size-3.5" /> {schedule.enabled ? "Disable" : "Enable"}
@@ -96,6 +112,14 @@ export function ScheduleRow({
           <ContextMenuItem onClick={onEdit}>
             <Pencil className="size-3.5" /> Edit
           </ContextMenuItem>
+          {isScript && (
+            <ContextMenuItem onClick={onLogs}>
+              <ScrollText className="size-3.5" /> Logs
+            </ContextMenuItem>
+          )}
+          <ContextMenuItem onClick={exportTemplate}>
+            <Download className="size-3.5" /> Export template
+          </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem variant="destructive" onClick={remove}>
             <Trash2 className="size-3.5" /> Delete
@@ -104,7 +128,10 @@ export function ScheduleRow({
       </ContextMenu>
       {expanded && (
         <div className="px-2.5 pb-2.5 space-y-1.5">
-          <p className="text-[11px] text-muted-foreground break-all line-clamp-3">{schedule.prompt}</p>
+          <p className="text-[11px] text-muted-foreground break-all line-clamp-3">
+            {isScript ? schedule.description || "Script schedule" : schedule.prompt}
+          </p>
+          {schedule.status.lastError && <p className="text-[11px] text-error break-all line-clamp-3">{schedule.status.lastError}</p>}
           <ScheduleRuns key={runsKey} scheduleId={schedule.id} />
         </div>
       )}

package/src/web/components/settings/schedules/schedule-script-editor.tsx

@@ -0,0 +1,102 @@
+/**
+ * A schedule's script in Monaco; import this file lazily, so Monaco loads only once a script is
+ * on screen. On a phone the form shows the first lines and opens the editor full screen, where
+ * there is room to read and type; on a desktop it sits in the form and can be enlarged.
+ */
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Editor from "@monaco-editor/react";
+import { Maximize2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { usePortalContainer } from "@/components/ui/portal-container-context";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
+
+const PREVIEW_LINES = 8;
+
+export function ScheduleScriptEditor({
+  value,
+  onChange,
+  readOnly = false,
+  title = "Script",
+}: {
+  value: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  title?: string;
+}) {
+  const isMobile = useIsMobile();
+  const theme = useMonacoTheme();
+  const portal = usePortalContainer();
+  const [full, setFull] = useState(false);
+
+  const editor = (height: string) => (
+    <Editor
+      beforeMount={prepareMonacoTheme}
+      height={height}
+      language="javascript"
+      theme={theme}
+      value={value}
+      onChange={(v) => onChange?.(v ?? "")}
+      options={{
+        readOnly,
+        minimap: { enabled: false },
+        fontSize: 13,
+        tabSize: 2,
+        wordWrap: "on",
+        scrollBeyondLastLine: false,
+        lineNumbers: isMobile ? "off" : "on",
+      }}
+    />
+  );
+
+  const lines = value.split("\n");
+  const inline = isMobile ? (
+    <button
+      type="button"
+      onClick={() => setFull(true)}
+      className="w-full rounded-md border border-border text-left cursor-pointer active:bg-accent/30"
+    >
+      <pre className="px-3 py-2 text-[11px] font-mono text-muted-foreground whitespace-pre-wrap break-all line-clamp-[8]">
+        {lines.slice(0, PREVIEW_LINES).join("\n")}
+      </pre>
+      <span className="block border-t border-border px-3 py-3 text-xs font-medium text-primary">
+        {readOnly ? `Read all ${lines.length} line${lines.length === 1 ? "" : "s"}` : "Edit script"}
+      </span>
+    </button>
+  ) : (
+    <div className="rounded-md border border-border overflow-hidden">
+      <div className="flex justify-end border-b border-border px-1 py-0.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => setFull(true)}
+          className="h-7 px-2 text-[11px] gap-1 cursor-pointer"
+        >
+          <Maximize2 className="size-3" /> Full screen
+        </Button>
+      </div>
+      {editor("320px")}
+    </div>
+  );
+
+  return (
+    <>
+      {inline}
+      {full && createPortal(
+        <div className="fixed inset-0 z-[70] flex flex-col bg-background" role="dialog" aria-label={title}>
+          <p className="shrink-0 border-b border-border px-4 py-3 text-sm font-semibold">
+            {title}{readOnly && <span className="ml-2 text-xs font-normal text-muted-foreground">read only</span>}
+          </p>
+          <div className="min-h-0 flex-1">{editor("100%")}</div>
+          <div className="shrink-0 border-t border-border p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
+            <Button type="button" onClick={() => setFull(false)} className="w-full min-h-11 cursor-pointer">Done</Button>
+          </div>
+        </div>,
+        portal ?? document.body,
+      )}
+    </>
+  );
+}

package/src/web/components/settings/schedules/schedule-sheet.tsx

@@ -0,0 +1,34 @@
+/** The frame of every schedule sheet: a bottom sheet on a phone, a dialog on a desktop. */
+import type { ReactNode } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+
+export function ScheduleSheet({ open, onClose, title, wide, children }: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  /** Room for a script. */
+  wide?: boolean;
+  children: ReactNode;
+}) {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return (
+      <BottomSheet open={open} onClose={onClose} className="max-h-[85vh] flex flex-col">
+        <p className="text-sm font-semibold text-center pb-2 px-3 truncate">{title}</p>
+        <ScrollArea className="flex-1 min-h-0 px-3 pb-3">{children}</ScrollArea>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className={cn(wide ? "max-w-2xl" : "max-w-md", "max-h-[85vh] overflow-y-auto")}>
+        <DialogHeader><DialogTitle className="text-sm truncate">{title}</DialogTitle></DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/schedules/schedule-status-chip.tsx

@@ -0,0 +1,45 @@
+/** A schedule's state in a word or two: on or off, and for a script, what its process is doing. */
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import type { ScheduleView } from "../../../../types/scheduler";
+
+const TONES = {
+  ok: "bg-success/10 text-success",
+  wait: "bg-warning/10 text-warning",
+  bad: "bg-error/10 text-error",
+  off: "bg-muted text-muted-foreground",
+} as const;
+
+export function scheduleStatusLabel(s: ScheduleView, now: number): { text: string; tone: keyof typeof TONES } {
+  const { state, restartAt } = s.status;
+  switch (state) {
+    case "running": return { text: "Running", tone: "ok" };
+    case "restarting": {
+      if (!restartAt) return { text: "Restarting", tone: "wait" };
+      return { text: `Restarting in ${Math.max(0, Math.ceil((Date.parse(restartAt) - now) / 1000))} s`, tone: "wait" };
+    }
+    case "starting": return { text: "Starting", tone: "wait" };
+    case "stopping": return { text: "Stopping", tone: "wait" };
+    case "failed": return { text: "Failed", tone: "bad" };
+    case "blocked": return { text: "Blocked", tone: "bad" };
+    case "stopped": return { text: "Stopped", tone: "off" };
+    default: return s.enabled ? { text: "Enabled", tone: "ok" } : { text: "Disabled", tone: "off" };
+  }
+}
+
+export function ScheduleStatusChip({ schedule, className }: { schedule: ScheduleView; className?: string }) {
+  const counting = schedule.status.state === "restarting";
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!counting) return;
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [counting, schedule.status.restartAt]);
+  const { text, tone } = scheduleStatusLabel(schedule, now);
+  return (
+    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium shrink-0 whitespace-nowrap", TONES[tone], className)}>
+      {text}
+    </span>
+  );
+}

package/src/web/components/settings/schedules/schedules-settings-section.tsx

@@ -1,29 +1,40 @@
-/** Settings section: manage scheduled Claude agents (cron). */
+/** Settings section: manage scheduled Claude agents (cron) and script schedules. */
 import { useState } from "react";
-import { Plus, CalendarClock } from "@/lib/icons";
+import { Plus, CalendarClock, Upload } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { useSchedules } from "@/hooks/use-schedules";
 import { ScheduleRow } from "./schedule-row";
 import { ScheduleForm } from "./schedule-form";
-import type { Schedule } from "../../../../types/scheduler";
+import { ScheduleImportSheet } from "./schedule-import-sheet";
+import { ScheduleLogsSheet } from "./schedule-logs-sheet";
+import type { ScheduleView } from "../../../../types/scheduler";
 
 export function SchedulesSettingsSection() {
   const { schedules, loading, refetch } = useSchedules();
   const [formOpen, setFormOpen] = useState(false);
-  const [editing, setEditing] = useState<Schedule | null>(null);
+  const [editing, setEditing] = useState<ScheduleView | null>(null);
+  const [importOpen, setImportOpen] = useState(false);
+  const [logsId, setLogsId] = useState<number | null>(null);
 
   const openCreate = () => { setEditing(null); setFormOpen(true); };
-  const openEdit = (s: Schedule) => { setEditing(s); setFormOpen(true); };
+  const openEdit = (s: ScheduleView) => { setEditing(s); setFormOpen(true); };
+  // The list is polled; the sheet follows the latest copy of its schedule.
+  const logsFor = schedules.find((s) => s.id === logsId) ?? null;
 
   return (
     <div className="space-y-3">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-2">
         <p className="text-[11px] text-muted-foreground">
-          Periodically wake Claude to work on a project unattended.
+          Periodically wake Claude to work on a project unattended, or run a script on a cron or always on.
         </p>
-        <Button size="sm" onClick={openCreate} className="min-h-11 md:min-h-8 text-xs gap-1 cursor-pointer shrink-0">
-          <Plus className="size-3.5" /> Add
-        </Button>
+        <div className="flex gap-2 shrink-0">
+          <Button size="sm" variant="outline" onClick={() => setImportOpen(true)} className="min-h-11 md:min-h-8 text-xs gap-1 cursor-pointer">
+            <Upload className="size-3.5" /> Import
+          </Button>
+          <Button size="sm" onClick={openCreate} className="min-h-11 md:min-h-8 text-xs gap-1 cursor-pointer">
+            <Plus className="size-3.5" /> Add
+          </Button>
+        </div>
       </div>
 
       {loading && schedules.length === 0 ? (
@@ -32,7 +43,7 @@ export function SchedulesSettingsSection() {
         <div className="flex flex-col items-center gap-2 py-8 text-center">
           <CalendarClock className="size-8 text-muted-foreground/50" />
           <p className="text-xs text-muted-foreground">
-            No schedules yet. Add one to run Claude periodically.
+            No schedules yet. Add one to run Claude or a script periodically, or import a template.
           </p>
           <Button size="sm" onClick={openCreate} className="min-h-11 text-xs gap-1 cursor-pointer">
             <Plus className="size-3.5" /> Add schedule
@@ -41,12 +52,14 @@ export function SchedulesSettingsSection() {
       ) : (
         <div className="space-y-2">
           {schedules.map((s) => (
-            <ScheduleRow key={s.id} schedule={s} onEdit={() => openEdit(s)} onChanged={refetch} />
+            <ScheduleRow key={s.id} schedule={s} onEdit={() => openEdit(s)} onLogs={() => setLogsId(s.id)} onChanged={refetch} />
           ))}
         </div>
       )}
 
       <ScheduleForm open={formOpen} schedule={editing} onClose={() => setFormOpen(false)} onSaved={refetch} />
+      <ScheduleImportSheet open={importOpen} onClose={() => setImportOpen(false)} onImported={refetch} />
+      <ScheduleLogsSheet schedule={logsFor} onClose={() => setLogsId(null)} onChanged={refetch} />
     </div>
   );
 }