bloby-bot 0.58.0 → 0.60.0

package/supervisor/chat/OnboardWizard.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, type KeyboardEvent, type MutableRefObject } from 'react';
 import { createPortal } from 'react-dom';
-import { ArrowRight, ArrowLeft, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff, Shield, ShieldCheck, ShieldOff, Copy, Smartphone, Globe, Wifi, WifiOff, TriangleAlert, X, Plus, KeyRound } from 'lucide-react';
+import { ArrowRight, ArrowLeft, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff, Shield, ShieldCheck, ShieldOff, Copy, Smartphone, Globe, Wifi, WifiOff, TriangleAlert, X, Plus, KeyRound, Activity, Moon, Save, CalendarClock, Clock, Zap, FileText, Pause, Play, Trash2, Download, Info } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { authFetch } from './src/lib/auth';
 
@@ -168,6 +168,7 @@ const SETTINGS_SCREENS: { step: number; label: string }[] = [
   { step: 4, label: 'AI Provider' },
   { step: 5, label: 'Voice Messages' },
   { step: 6, label: 'Environment Variables' },
+  { step: 7, label: 'Pulse & Crons' },
 ];
 
 // Compact "Go to" dropdown shown in the settings header so the user can jump to any screen.
@@ -521,6 +522,524 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
   );
 }
 
+/* ── Settings mode: Pulse & Crons screen ── */
+
+interface PulseConfig {
+  enabled: boolean;
+  intervalMinutes: number;
+  quietHours: { start: string; end: string };
+}
+
+interface CronView {
+  id: string;
+  schedule: string;
+  task: string;
+  enabled: boolean;
+  oneShot?: boolean;
+  paused?: boolean;
+  hasTaskFile: boolean;
+  nextRun: string | null; // ISO
+  description: string;    // humanized schedule
+}
+
+interface PulseCronCache { pulse: PulseConfig; original: PulseConfig | null; crons: CronView[] }
+
+const DEFAULT_PULSE: PulseConfig = { enabled: false, intervalMinutes: 60, quietHours: { start: '22:00', end: '07:00' } };
+
+// 8 slider stops; the last (-1) is the "Custom" sentinel.
+const PULSE_STOPS: { mins: number; label: string }[] = [
+  { mins: 10, label: '10m' }, { mins: 30, label: '30m' }, { mins: 60, label: '1h' },
+  { mins: 120, label: '2h' }, { mins: 180, label: '3h' }, { mins: 360, label: '6h' },
+  { mins: 720, label: '12h' }, { mins: -1, label: 'Custom' },
+];
+const PULSE_CUSTOM_INDEX = PULSE_STOPS.length - 1;
+const PULSE_TIME_RE = /^([01]\d|2[0-3]):[0-5]\d$/;
+
+function pulseIndexForMinutes(mins: number): number {
+  const i = PULSE_STOPS.findIndex((s) => s.mins === mins);
+  return i === -1 ? PULSE_CUSTOM_INDEX : i;
+}
+
+function humanizeInterval(mins: number): string {
+  if (!Number.isFinite(mins) || mins <= 0) return 'Every —';
+  if (mins % 60 === 0) { const h = mins / 60; return `Every ${h} hour${h === 1 ? '' : 's'}`; }
+  if (mins < 60) return `Every ${mins} minute${mins === 1 ? '' : 's'}`;
+  return `Every ${Math.floor(mins / 60)}h ${mins % 60}m`;
+}
+
+// nextRun ISO → short human string ("in 12m", "Today 3:00 PM", "Tomorrow 9:00 AM", "Jun 9, 3:00 PM").
+function formatNextRun(iso: string | null): string | null {
+  if (!iso) return null;
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return null;
+  const now = new Date();
+  const diffMs = d.getTime() - now.getTime();
+  const time = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+  if (diffMs > 0 && diffMs < 60 * 60 * 1000) return `in ${Math.max(1, Math.round(diffMs / 60000))}m`;
+  if (diffMs > 0 && diffMs < 6 * 60 * 60 * 1000) return `in ${Math.round(diffMs / 3_600_000)}h`;
+  const startOfDay = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate());
+  const dayDiff = Math.round((startOfDay(d).getTime() - startOfDay(now).getTime()) / 86_400_000);
+  if (dayDiff === 0) return `Today ${time}`;
+  if (dayDiff === 1) return `Tomorrow ${time}`;
+  if (dayDiff > 1 && dayDiff < 7) return `${d.toLocaleDateString([], { weekday: 'long' })} ${time}`;
+  return `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time}`;
+}
+
+function PulseSection({ pulse, original, setPulse, onPulseSaved }: {
+  pulse: PulseConfig;
+  original: PulseConfig | null;
+  setPulse: (next: PulseConfig) => void;
+  onPulseSaved: (saved: PulseConfig) => void;
+}) {
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  // Explicit "Custom" mode — NOT derived from the value, otherwise typing a value that happens to
+  // equal a preset (e.g. 60) would snap the slider and unmount the input mid-keystroke. Seeded from
+  // whether the loaded interval is a non-preset value.
+  const [customMode, setCustomMode] = useState(pulseIndexForMinutes(pulse.intervalMinutes) === PULSE_CUSTOM_INDEX);
+
+  const presetIdx = pulseIndexForMinutes(pulse.intervalMinutes);
+  const onCustom = customMode;
+  const sliderIdx = customMode ? PULSE_CUSTOM_INDEX : presetIdx;
+  const quietValid = PULSE_TIME_RE.test(pulse.quietHours.start) && PULSE_TIME_RE.test(pulse.quietHours.end);
+  const intervalValid = Number.isFinite(pulse.intervalMinutes) && pulse.intervalMinutes >= 1 && pulse.intervalMinutes <= 1440;
+  const dirty = original != null && (
+    pulse.enabled !== original.enabled ||
+    pulse.intervalMinutes !== original.intervalMinutes ||
+    pulse.quietHours.start !== original.quietHours.start ||
+    pulse.quietHours.end !== original.quietHours.end
+  );
+  const canSave = dirty && intervalValid && quietValid && !saving;
+
+  const patch = (p: Partial<PulseConfig>) => {
+    if (saved) setSaved(false);
+    if (saveError) setSaveError('');
+    setPulse({ ...pulse, ...p });
+  };
+
+  const onSlider = (idx: number) => {
+    if (idx === PULSE_CUSTOM_INDEX) {
+      setCustomMode(true);
+      // Keep the current value when already custom; seed 45 only when entering from a preset.
+      const seed = (customMode || presetIdx === PULSE_CUSTOM_INDEX) ? pulse.intervalMinutes : 45;
+      patch({ intervalMinutes: seed });
+    } else {
+      setCustomMode(false);
+      patch({ intervalMinutes: PULSE_STOPS[idx].mins });
+    }
+  };
+
+  const handleSave = async () => {
+    if (!canSave) return;
+    setSaving(true); setSaveError(''); setSaved(false);
+    try {
+      const res = await authFetch('/api/pulse', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled: pulse.enabled, intervalMinutes: pulse.intervalMinutes, quietHours: pulse.quietHours }),
+      });
+      if (!res.ok) { const d = await res.json().catch(() => ({ error: 'Save failed' })); throw new Error(d.error || 'Save failed'); }
+      onPulseSaved(pulse);
+      setSaved(true);
+      setSaving(false);
+    } catch (err: any) {
+      setSaveError(err?.message || 'Save failed');
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-xl bg-[#0069FE]/10 flex items-center justify-center shrink-0">
+          <Activity className="h-[18px] w-[18px] text-[#0069FE]" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h2 className="text-[15px] font-bold text-white tracking-tight">Pulse</h2>
+        </div>
+        <button
+          type="button" role="switch" aria-checked={pulse.enabled} aria-label="Enable pulse"
+          onClick={() => patch({ enabled: !pulse.enabled })}
+          className={`w-10 h-[22px] rounded-full transition-colors duration-200 flex items-center px-0.5 shrink-0 ${pulse.enabled ? 'bg-gradient-brand' : 'bg-white/[0.08]'}`}
+        >
+          <div className={`w-[18px] h-[18px] rounded-full bg-white shadow-sm transition-transform duration-200 ${pulse.enabled ? 'translate-x-[18px]' : 'translate-x-0'}`} />
+        </button>
+      </div>
+
+      <p className="text-white/40 text-[13px] mt-2 leading-relaxed">
+        Pulse periodically wakes the agent inside the main session, letting it surface anything that needs attention without spamming you.
+      </p>
+
+      <div className={`mt-5 transition-opacity duration-200 ${pulse.enabled ? '' : 'opacity-50 pointer-events-none select-none'}`} aria-disabled={!pulse.enabled}>
+        <div className="flex items-center justify-between mb-2.5">
+          <span className="text-[12px] font-semibold text-white/70 uppercase tracking-wide">Frequency</span>
+          <span className="text-[11px] font-medium text-[#0069FE] bg-[#0069FE]/10 rounded-full px-2.5 py-1">
+            {onCustom ? 'Custom interval' : humanizeInterval(pulse.intervalMinutes)}
+          </span>
+        </div>
+
+        <input
+          type="range" min={0} max={PULSE_CUSTOM_INDEX} step={1} value={sliderIdx}
+          onChange={(e) => onSlider(Number(e.target.value))} aria-label="Pulse interval"
+          className="w-full h-1.5 appearance-none rounded-full bg-white/[0.08] accent-[#0069FE] cursor-pointer
+                     [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4
+                     [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
+                     [&::-webkit-slider-thumb]:shadow-[0_0_0_3px_rgba(0,105,254,0.35)] [&::-webkit-slider-thumb]:cursor-pointer
+                     [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full
+                     [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-[0_0_0_3px_rgba(0,105,254,0.35)]"
+        />
+
+        <div className="flex justify-between mt-2 px-[1px]">
+          {PULSE_STOPS.map((s, i) => (
+            <button
+              key={s.label} type="button" onClick={() => onSlider(i)}
+              className={`text-[10px] leading-none transition-colors ${i === sliderIdx ? 'text-[#0069FE] font-semibold' : 'text-white/30 hover:text-white/55'}`}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+
+        {onCustom && (
+          <div className="mt-3 flex items-center gap-2.5">
+            <input
+              type="number" min={1} max={1440}
+              value={Number.isFinite(pulse.intervalMinutes) ? pulse.intervalMinutes : ''}
+              onChange={(e) => { const n = parseInt(e.target.value, 10); patch({ intervalMinutes: Number.isFinite(n) ? n : NaN }); }}
+              placeholder="45"
+              className="w-28 bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none focus:border-[#0069FE]/30 transition-colors placeholder:text-white/20 font-mono"
+            />
+            <span className="text-[12px] text-white/40">minutes between pulses</span>
+          </div>
+        )}
+        {onCustom && !intervalValid && (
+          <p className="text-amber-400/80 text-[11px] mt-1.5">Enter a whole number of minutes (1–1440).</p>
+        )}
+
+        <div className="flex items-center gap-2 mt-6 mb-2.5">
+          <Moon className="h-3.5 w-3.5 text-[#0069FE]/70" />
+          <span className="text-[12px] font-semibold text-white/70 uppercase tracking-wide">Quiet hours</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex-1">
+            <label className="text-[11px] text-white/40 mb-1 block">Start</label>
+            <input
+              type="time" value={pulse.quietHours.start}
+              onChange={(e) => patch({ quietHours: { ...pulse.quietHours, start: e.target.value } })}
+              className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none focus:border-[#0069FE]/30 transition-colors [color-scheme:dark]"
+            />
+          </div>
+          <ArrowRight className="h-4 w-4 text-white/25 mt-5 shrink-0" />
+          <div className="flex-1">
+            <label className="text-[11px] text-white/40 mb-1 block">End</label>
+            <input
+              type="time" value={pulse.quietHours.end}
+              onChange={(e) => patch({ quietHours: { ...pulse.quietHours, end: e.target.value } })}
+              className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none focus:border-[#0069FE]/30 transition-colors [color-scheme:dark]"
+            />
+          </div>
+        </div>
+        <p className="text-white/35 text-[12px] mt-2 leading-relaxed">
+          No pulses fire between these times (your computer's local time). Spanning midnight is fine — e.g. 22:00 → 07:00.
+        </p>
+      </div>
+
+      {saved && !dirty && (
+        <div className="mt-4 flex items-center gap-2.5 bg-emerald-500/[0.06] border border-emerald-500/20 rounded-xl px-4 py-3">
+          <Check className="h-4 w-4 text-emerald-400 shrink-0" />
+          <p className="text-emerald-300/90 text-[12px]">Saved — the scheduler picks this up within a minute.</p>
+        </div>
+      )}
+      {saveError && (
+        <div className="mt-3 flex items-center gap-1.5 text-[12px] text-red-400">
+          <TriangleAlert className="h-3.5 w-3.5 shrink-0" />{saveError}
+        </div>
+      )}
+      {dirty && (
+        <button
+          type="button" onClick={handleSave} disabled={!canSave}
+          className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          {saving ? (<><LoaderCircle className="h-4 w-4 animate-spin" />Saving...</>) : (<><Save className="h-4 w-4" />Save pulse settings</>)}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function CronsSection({ crons, onChanged, onLocalUpdate }: {
+  crons: CronView[];
+  onChanged: () => void;
+  onLocalUpdate: (fn: (prev: CronView[]) => CronView[]) => void;
+}) {
+  const [busy, setBusy] = useState<Record<string, 'pause' | 'delete' | undefined>>({});
+  const [confirmId, setConfirmId] = useState<string | null>(null);
+  const [downloading, setDownloading] = useState<Record<string, boolean>>({});
+  const [actionError, setActionError] = useState('');
+
+  const setRowBusy = (id: string, v: 'pause' | 'delete' | undefined) => setBusy((p) => ({ ...p, [id]: v }));
+
+  const handleTogglePause = async (c: CronView) => {
+    if (busy[c.id]) return;
+    setActionError(''); setRowBusy(c.id, 'pause');
+    try {
+      const res = await authFetch('/api/crons/pause', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: c.id, paused: !c.paused }),
+      });
+      if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || 'Failed to update'); }
+      // Optimistic: reflect the change immediately so a failed background refetch can't leave a
+      // stale row; onChanged() then reconciles against the on-disk truth.
+      onLocalUpdate((prev) => prev.map((x) => (x.id === c.id ? { ...x, paused: !c.paused } : x)));
+      onChanged();
+    } catch (err: any) {
+      setActionError(err.message || 'Failed to update');
+    } finally {
+      setRowBusy(c.id, undefined);
+    }
+  };
+
+  const handleDelete = async (c: CronView) => {
+    if (busy[c.id]) return;
+    setActionError(''); setRowBusy(c.id, 'delete');
+    try {
+      const res = await authFetch('/api/crons/delete', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: c.id }),
+      });
+      if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || 'Failed to delete'); }
+      setConfirmId(null);
+      onLocalUpdate((prev) => prev.filter((x) => x.id !== c.id));
+      onChanged();
+    } catch (err: any) {
+      setActionError(err.message || 'Failed to delete');
+    } finally {
+      setRowBusy(c.id, undefined);
+    }
+  };
+
+  // Authed download: the endpoint requires a Bearer token, so a plain <a href> would 401.
+  const handleDownloadTask = async (c: CronView) => {
+    if (downloading[c.id]) return;
+    setActionError(''); setDownloading((p) => ({ ...p, [c.id]: true }));
+    try {
+      const res = await authFetch(`/api/crons/task?id=${encodeURIComponent(c.id)}`);
+      if (!res.ok) throw new Error('Could not download task file');
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url; a.download = `${c.id}.md`;
+      document.body.appendChild(a); a.click(); a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err: any) {
+      setActionError(err.message || 'Download failed');
+    } finally {
+      setDownloading((p) => ({ ...p, [c.id]: false }));
+    }
+  };
+
+  return (
+    <div className="mt-8">
+      <div className="flex items-center gap-2">
+        <CalendarClock className="h-4 w-4 text-[#0069FE]/70 shrink-0" />
+        <h2 className="text-[15px] font-bold text-white tracking-tight">Crons</h2>
+      </div>
+      <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+        Crons let your agent schedule tasks inside the main session, running them daily, hourly, or on any schedule you choose. They can also be one-shot tasks that run once at a specific time.
+      </p>
+      <div className="mt-2 flex items-start gap-1.5 text-white/30 text-[12px] leading-relaxed">
+        <Info className="h-3.5 w-3.5 mt-0.5 shrink-0" />
+        <span>To change or add a cron, just ask your agent. To delete or pause, use the buttons below.</span>
+      </div>
+
+      {actionError && (
+        <div className="mt-3 flex items-center gap-1.5 text-[12px] text-red-400">
+          <TriangleAlert className="h-3.5 w-3.5 shrink-0" />{actionError}
+        </div>
+      )}
+
+      <div className="mt-4 space-y-2.5">
+        {crons.length === 0 ? (
+          <div className="rounded-xl border border-white/[0.06] bg-white/[0.02] px-4 py-7 text-center">
+            <CalendarClock className="h-5 w-5 text-white/25 mx-auto mb-2" />
+            <p className="text-white/40 text-[13px]">No scheduled tasks yet.</p>
+            <p className="text-white/25 text-[12px] mt-1">Ask your agent to schedule something.</p>
+          </div>
+        ) : (
+          crons.map((c) => {
+            const paused = !!c.paused;
+            const disabled = c.enabled === false;
+            const parked = paused || disabled;
+            const rowBusy = busy[c.id];
+            const nextStr = formatNextRun(c.nextRun);
+            return (
+              <div key={c.id} className={`rounded-xl border p-3.5 transition-colors ${parked ? 'border-white/[0.05] bg-white/[0.015] opacity-60' : 'border-white/[0.06] bg-white/[0.02]'}`}>
+                <div className="flex items-start gap-3">
+                  <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${c.oneShot ? 'bg-amber-500/10' : 'bg-[#0069FE]/10'}`}>
+                    {c.oneShot ? <Zap className="h-[18px] w-[18px] text-amber-400" /> : <Clock className="h-[18px] w-[18px] text-[#0069FE]" />}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-2">
+                      <p className="text-[13px] text-white leading-snug">{c.task}</p>
+                      <div className="flex items-center gap-1 shrink-0">
+                        {c.oneShot && (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-300/90 text-[10px] font-medium px-2 py-0.5">
+                            <Zap className="h-2.5 w-2.5" />One-time
+                          </span>
+                        )}
+                        {paused && (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] border border-white/[0.08] text-white/50 text-[10px] font-medium px-2 py-0.5">
+                            <Pause className="h-2.5 w-2.5" />Paused
+                          </span>
+                        )}
+                        {disabled && !paused && (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] border border-white/[0.08] text-white/50 text-[10px] font-medium px-2 py-0.5">
+                            Disabled
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="mt-1.5 flex items-center gap-1.5 text-[12px] text-white/45">
+                      <Clock className="h-3 w-3 shrink-0 text-white/30" />
+                      <span className="truncate">{c.description}</span>
+                    </div>
+
+                    <div className="mt-1.5">
+                      {parked ? (
+                        <span className="text-[11px] text-white/30">{paused ? "Paused — won't run" : "Disabled — won't run"}</span>
+                      ) : nextStr ? (
+                        <span className="inline-flex items-center gap-1 rounded-md bg-[#0069FE]/[0.08] border border-[#0069FE]/15 text-[#4AA8FF] text-[11px] font-medium px-2 py-0.5">
+                          Next: {nextStr}
+                        </span>
+                      ) : (
+                        <span className="text-[11px] text-white/30">No upcoming run</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-3 flex items-center justify-between gap-2">
+                  {c.hasTaskFile ? (
+                    <button
+                      type="button" onClick={() => handleDownloadTask(c)} disabled={downloading[c.id]}
+                      className="group inline-flex items-center gap-1.5 rounded-md bg-white/[0.04] hover:bg-white/[0.07] border border-white/[0.06] hover:border-white/[0.12] text-white/50 hover:text-white/80 text-[11px] font-mono px-2 py-1 transition-colors disabled:opacity-50"
+                      title="Download task instructions"
+                    >
+                      {downloading[c.id] ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <FileText className="h-3 w-3 shrink-0" />}
+                      {c.id}.md
+                      <Download className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </button>
+                  ) : (<span />)}
+
+                  {confirmId === c.id ? (
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[11px] text-white/50 mr-0.5">Delete?</span>
+                      <button
+                        type="button" onClick={() => handleDelete(c)} disabled={rowBusy === 'delete'}
+                        className="inline-flex items-center gap-1 rounded-md bg-red-500/15 hover:bg-red-500/25 border border-red-500/30 text-red-300 text-[11px] font-medium px-2.5 py-1 transition-colors disabled:opacity-50"
+                      >
+                        {rowBusy === 'delete' ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}
+                        Delete
+                      </button>
+                      <button
+                        type="button" onClick={() => setConfirmId(null)} disabled={rowBusy === 'delete'}
+                        className="rounded-md text-white/40 hover:text-white/70 text-[11px] px-2 py-1 transition-colors"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button" onClick={() => handleTogglePause(c)} disabled={!!rowBusy}
+                        className="inline-flex items-center gap-1 rounded-md text-white/45 hover:text-white/80 hover:bg-white/[0.04] text-[11px] font-medium px-2 py-1 transition-colors disabled:opacity-50"
+                      >
+                        {rowBusy === 'pause' ? <LoaderCircle className="h-3 w-3 animate-spin" /> : paused ? <Play className="h-3 w-3" /> : <Pause className="h-3 w-3" />}
+                        {paused ? 'Resume' : 'Pause'}
+                      </button>
+                      <button
+                        type="button" onClick={() => setConfirmId(c.id)} disabled={!!rowBusy}
+                        className="inline-flex items-center gap-1 rounded-md text-white/30 hover:text-red-400 hover:bg-red-500/[0.06] text-[11px] font-medium px-2 py-1 transition-colors disabled:opacity-50"
+                      >
+                        <Trash2 className="h-3 w-3" />Delete
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Settings-only screen (step 7). Owns the single GET /api/schedule load; caches working state in a
+// parent ref so edits survive the per-step remount (the wizard keys each step's motion.div by step).
+function PulseCronSettings({ cacheRef }: { cacheRef: MutableRefObject<PulseCronCache | null> }) {
+  const hadCache = useRef(cacheRef.current != null).current;
+  const cached = cacheRef.current;
+  const [loading, setLoading] = useState(!hadCache);
+  const [loadError, setLoadError] = useState('');
+  const [pulse, setPulse] = useState<PulseConfig>(cached?.pulse ?? DEFAULT_PULSE);
+  const [originalPulse, setOriginalPulse] = useState<PulseConfig | null>(cached?.original ?? null);
+  const [crons, setCrons] = useState<CronView[]>(cached?.crons ?? []);
+
+  const fetchSchedule = async (withPulse: boolean) => {
+    const res = await authFetch('/api/schedule');
+    if (!res.ok) throw new Error('Failed to load schedule');
+    const d = await res.json();
+    setCrons(Array.isArray(d.crons) ? d.crons : []);
+    if (withPulse) {
+      const p: PulseConfig = {
+        enabled: !!d.pulse?.enabled,
+        intervalMinutes: Number(d.pulse?.intervalMinutes) || 60,
+        quietHours: { start: d.pulse?.quietHours?.start ?? '22:00', end: d.pulse?.quietHours?.end ?? '07:00' },
+      };
+      setPulse(p);
+      setOriginalPulse(p);
+    }
+  };
+
+  useEffect(() => {
+    if (hadCache) return;
+    let cancelled = false;
+    fetchSchedule(true)
+      .then(() => { if (!cancelled) setLoading(false); })
+      .catch((err) => { if (!cancelled) { setLoadError(err.message || 'Failed to load'); setLoading(false); } });
+    return () => { cancelled = true; };
+  }, [hadCache]);
+
+  // Persist working state so navigating away and back doesn't lose pulse edits.
+  useEffect(() => {
+    if (loading) return;
+    cacheRef.current = { pulse, original: originalPulse, crons };
+  });
+
+  return (
+    <div>
+      <h1 className="text-xl font-bold text-white tracking-tight">Pulse &amp; Crons</h1>
+      <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+        Background wake-ups and scheduled tasks your agent runs on its own.
+      </p>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12 text-white/40"><LoaderCircle className="h-5 w-5 animate-spin" /></div>
+      ) : loadError ? (
+        <div className="mt-5 flex items-center gap-2 text-[13px] text-red-400"><TriangleAlert className="h-4 w-4 shrink-0" />{loadError}</div>
+      ) : (
+        <div className="mt-6 max-h-[50vh] overflow-y-auto pr-1 -mr-1">
+          <PulseSection pulse={pulse} original={originalPulse} setPulse={setPulse} onPulseSaved={(saved) => setOriginalPulse(saved)} />
+          <CronsSection crons={crons} onLocalUpdate={(fn) => setCrons(fn)} onChanged={() => { fetchSchedule(false).catch(() => {}); }} />
+        </div>
+      )}
+    </div>
+  );
+}
+
 /* ── Component ── */
 
 interface Props {
@@ -686,6 +1205,17 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   // Environment Variables screen working-state cache (settings mode). Survives the per-step
   // remount so edits aren't lost when navigating between settings screens; dies with the wizard.
   const envCacheRef = useRef<EnvCache | null>(null);
+  // Same pattern for the Pulse & Crons screen (step 7).
+  const pulseCacheRef = useRef<PulseCronCache | null>(null);
+
+  // Settings mode (hub-and-spoke): each screen saves itself. `settingsOrig` is the last-saved
+  // snapshot used both to show a Save button only when a screen actually changed, and to build a
+  // payload that touches only the active screen's fields (the worker's /api/onboard is a full
+  // overwrite, so other screens' fields must be sent at their saved values).
+  const [settingsOrig, setSettingsOrig] = useState({ userName: '', botName: '', provider: '', model: '', whisperEnabled: false, whisperKey: '' });
+  const [settingsSaving, setSettingsSaving] = useState(false);
+  const [settingsSaved, setSettingsSaved] = useState(false);
+  const [settingsSaveError, setSettingsSaveError] = useState('');
 
   const isConnected = authState[provider] === 'connected';
 
@@ -737,6 +1267,9 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
           setExistingHandle({ username: data.handle.username, tier: data.handle.tier, url: data.handle.url });
           setRegistered(true);
           setRegisteredUrl(data.handle.url);
+        } else if (data.agentName) {
+          // Private-network mode has no handle — prefill the agent name so it isn't blank.
+          setBotName(data.agentName);
         }
         if (data.portalUser) setPortalUser(data.portalUser);
         if (data.portalConfigured) setPortalExists(true);
@@ -749,6 +1282,16 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
         if (data.tunnelUrl) setTunnelUrl(data.tunnelUrl);
         // If user has existing handle, default to 'relay'; otherwise default to 'tunnel'
         if (!data.handle) setHandleChoice('tunnel');
+        // Snapshot the saved values so settings-mode per-screen Save buttons can detect changes
+        // and so a single-screen save never clobbers another screen's saved value.
+        setSettingsOrig({
+          userName: data.userName || '',
+          botName: (data.handle && data.handle.username) || data.agentName || '',
+          provider: data.provider || '',
+          model: data.model || '',
+          whisperEnabled: !!data.whisperEnabled,
+          whisperKey: data.whisperKey || '',
+        });
         prefillDone.current = true;
 
         // Restore TOTP setup state if returning from authenticator app
@@ -1316,18 +1859,88 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
       }
       case 4: return !!(provider && model && isConnected);
       case 5: return true;
-      case 6: return true; // Environment Variables (settings) — self-saving, last screen
+      case 6: return true; // Environment Variables (settings) — self-saving
+      case 7: return true; // Pulse & Crons (settings) — self-saving
       default: return false;
     }
   })();
 
-  const next = () => { if (canNext && step < TOTAL_STEPS - 1) setStep((s) => s + 1); };
+  // Sequential advance is onboarding-only. Settings mode is hub-and-spoke: the user navigates via
+  // the header dropdown / "Go to" menu and each screen saves itself, so there is no "Continue".
+  const next = () => { if (isInitialSetup && canNext && step < TOTAL_STEPS - 1) setStep((s) => s + 1); };
   const back = () => { if (step > 0) setStep((s) => s - 1); };
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter' && canNext) next();
   };
 
+  // ── Settings mode: per-screen change detection + save ──
+  // Only the currently-shown settings screen reports "dirty"; the footer Save appears only then.
+  const settingsScreenDirty = (() => {
+    if (isInitialSetup) return false;
+    switch (step) {
+      case 1: return userName.trim() !== settingsOrig.userName;
+      case 2: return botName.trim() !== settingsOrig.botName;
+      case 3: return step3Phase === 'password' && portalPass.length > 0 && portalValid && (portalExists ? portalOldPassVerified : true);
+      case 4: return (provider !== settingsOrig.provider || model !== settingsOrig.model) && isConnected && !!model;
+      case 5: return (whisperEnabled !== settingsOrig.whisperEnabled || (whisperEnabled && whisperKey !== settingsOrig.whisperKey))
+        && !(whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20));
+      default: return false; // 0 = hub, 6 = env (self-saving)
+    }
+  })();
+
+  // Clear the transient saved/error banners whenever the user moves to another settings screen.
+  useEffect(() => { setSettingsSaved(false); setSettingsSaveError(''); }, [step]);
+
+  const saveSettings = async () => {
+    if (!settingsScreenDirty || settingsSaving) return;
+    setSettingsSaving(true); setSettingsSaveError(''); setSettingsSaved(false);
+    // Base the payload on the last-saved values, then override ONLY the active screen's fields —
+    // so saving one screen never persists another screen's unsaved, in-progress edits.
+    const payload: any = {
+      userName: settingsOrig.userName,
+      agentName: settingsOrig.botName || 'Bloby',
+      provider: settingsOrig.provider,
+      model: settingsOrig.model,
+      apiKey: '',
+      whisperEnabled: settingsOrig.whisperEnabled,
+      whisperKey: settingsOrig.whisperEnabled ? settingsOrig.whisperKey : '',
+      portalUser: portalUser.trim(),
+      portalPass: '',
+    };
+    switch (step) {
+      case 1: payload.userName = userName.trim(); break;
+      case 2: payload.agentName = botName.trim() || 'Bloby'; break;
+      case 3: payload.portalPass = portalPass; break;
+      case 4: payload.provider = provider; payload.model = model; break;
+      case 5: payload.whisperEnabled = whisperEnabled; payload.whisperKey = whisperEnabled ? whisperKey : ''; break;
+    }
+    try {
+      if (onSave) await onSave(payload);
+      else await fetch('/api/onboard', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+      // Advance the saved snapshot so the Save button hides (screen no longer dirty).
+      setSettingsOrig((o) => {
+        switch (step) {
+          case 1: return { ...o, userName: userName.trim() };
+          case 2: return { ...o, botName: botName.trim() };
+          case 4: return { ...o, provider, model };
+          case 5: return { ...o, whisperEnabled, whisperKey };
+          default: return o;
+        }
+      });
+      if (step === 3) {
+        // Password persisted — reset the change-password UI so it's no longer dirty.
+        setPortalPass(''); setPortalPassConfirm(''); setPortalOldPass(''); setPortalOldPassVerified(false); setPortalChangeMode(false);
+        setPortalExists(true);
+      }
+      setSettingsSaved(true);
+      setSettingsSaving(false);
+    } catch (err: any) {
+      setSettingsSaveError(err.message || 'Save failed');
+      setSettingsSaving(false);
+    }
+  };
+
   const handleComplete = async () => {
     setSaving(true);
     const payload = {
@@ -1477,13 +2090,6 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                     onChange={(id) => setStep(Number(id))}
                   />
                 </div>
-                <button
-                  onClick={next}
-                  className="mt-4 px-7 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center gap-2"
-                >
-                  Continue
-                  <ArrowRight className="h-4 w-4" />
-                </button>
               </div>
             )}
 
@@ -1509,6 +2115,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                     data-lpignore="true"
                     className={inputCls + ' flex-1'}
                   />
+                  {isInitialSetup && (
                   <button
                     onClick={next}
                     disabled={!canNext}
@@ -1516,6 +2123,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   >
                     <ArrowRight className="h-5 w-5" />
                   </button>
+                  )}
                 </div>
               </div>
             )}
@@ -1632,6 +2240,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   </div>
                 )}
 
+                {isInitialSetup && (
                 <button
                   onClick={next}
                   disabled={!canNext}
@@ -1640,6 +2249,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   Continue
                   <ArrowRight className="h-4 w-4" />
                 </button>
+                )}
               </div>
             )}
 
@@ -1710,6 +2320,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                       <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
                     </div>
                     <div className="flex gap-2 mt-4">
+                      {isInitialSetup && (
                       <button
                         onClick={next}
                         className="flex-1 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
@@ -1717,6 +2328,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                         Continue
                         <ArrowRight className="h-4 w-4" />
                       </button>
+                      )}
                       <button
                         onClick={() => {
                           setShowChangeConfirm(true);
@@ -1971,8 +2583,8 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                       </button>
                     )}
 
-                    {/* Continue after claim */}
-                    {registered && (
+                    {/* Continue after claim (onboarding only — settings is hub-and-spoke) */}
+                    {isInitialSetup && registered && (
                       <button
                         onClick={next}
                         className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
@@ -2419,6 +3031,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                         )}
                       </div>
 
+                      {isInitialSetup && (
                       <button
                         onClick={next}
                         disabled={!canNext}
@@ -2427,6 +3040,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                         Continue
                         <ArrowRight className="h-4 w-4" />
                       </button>
+                      )}
                     </motion.div>
                   )}
 
@@ -3148,7 +3762,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   </>
                 )}
 
-                {isConnected && (
+                {isInitialSetup && isConnected && (
                   <button
                     onClick={next}
                     disabled={!canNext}
@@ -3242,17 +3856,19 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   </div>
                 )}
 
-                <button
-                  onClick={handleComplete}
-                  disabled={saving || (whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20))}
-                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
-                >
-                  {saving ? (
-                    <><LoaderCircle className="h-4 w-4 animate-spin" />{isInitialSetup ? 'Setting up...' : 'Saving...'}</>
-                  ) : (
-                    <>{isInitialSetup ? 'Complete Setup' : 'Save Changes'}<ArrowRight className="h-4 w-4" /></>
-                  )}
-                </button>
+                {isInitialSetup && (
+                  <button
+                    onClick={handleComplete}
+                    disabled={saving || (whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20))}
+                    className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                  >
+                    {saving ? (
+                      <><LoaderCircle className="h-4 w-4 animate-spin" />Setting up...</>
+                    ) : (
+                      <>Complete Setup<ArrowRight className="h-4 w-4" /></>
+                    )}
+                  </button>
+                )}
 
                 {!whisperEnabled && (
                   <p className="text-center text-white/20 text-[11px] mt-2.5">
@@ -3373,6 +3989,9 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
 
             {/* ── Step 6: Environment Variables (settings re-run only) ── */}
             {step === 6 && !isInitialSetup && <EnvSettings cacheRef={envCacheRef} />}
+
+            {/* ── Step 7: Pulse & Crons (settings re-run only) ── */}
+            {step === 7 && !isInitialSetup && <PulseCronSettings cacheRef={pulseCacheRef} />}
           </motion.div>
         </AnimatePresence>
 
@@ -3387,6 +4006,35 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             </button>
           </div>
         )}
+
+        {/* Settings mode: per-screen Save — shown only when the current screen has changes.
+            (Env screen, step 6, saves itself inside EnvSettings.) */}
+        {!isInitialSetup && step >= 1 && step <= 5 && (settingsScreenDirty || settingsSaving || settingsSaved || settingsSaveError) && (
+          <div className="px-8 pb-6 -mt-2">
+            {settingsSaveError && (
+              <p className="text-red-400 text-[12px] mb-2 flex items-center gap-1.5">
+                <TriangleAlert className="h-3.5 w-3.5 shrink-0" />{settingsSaveError}
+              </p>
+            )}
+            {settingsSaved && !settingsScreenDirty ? (
+              <div className="flex items-center justify-center gap-2 py-3 text-emerald-400 text-[13px] font-medium">
+                <Check className="h-4 w-4" /> Saved
+              </div>
+            ) : (
+              <button
+                onClick={saveSettings}
+                disabled={settingsSaving || !settingsScreenDirty}
+                className="w-full py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {settingsSaving ? (
+                  <><LoaderCircle className="h-4 w-4 animate-spin" />Saving...</>
+                ) : (
+                  <><Check className="h-4 w-4" />Save changes</>
+                )}
+              </button>
+            )}
+          </div>
+        )}
       </motion.div>
     </div>
   );