@polderlabs/bizar 3.23.0 → 4.0.0

package/bizar-dash/src/web/mobile/views/MobileSchedules.tsx

@@ -0,0 +1,685 @@
+// src/mobile/views/MobileSchedules.tsx — schedules list with detail sheet, edit modal, and a reusable New/Edit modal.
+//
+// v3.9.0 — overhaul:
+//   - PATCH for partial updates (toggle enabled, edit fields) is now
+//     supported by the backend (see routes/schedules.mjs).
+//   - NewScheduleModal accepts an optional `initial` schedule and submits
+//     PUT when editing, POST when creating. The same modal handles both
+//     flows so the operator doesn't context-switch between forms.
+//   - Detail sheet exposes an Edit button so the mobile UI can edit any
+//     schedule, not just toggle it.
+//   - The structured pickers mirror the desktop (DOW, hour, minute,
+//     timezone) but in a more compact layout suited to a phone screen.
+import { useEffect, useState } from 'react';
+import { Clock, Plus, RefreshCw, Trash2, Play, Pencil } from 'lucide-react';
+import { api } from '../../lib/api';
+import type { Schedule, Snapshot } from '../../lib/types';
+import { MobileBottomSheet } from '../components/MobileBottomSheet';
+import { MobileModal } from '../components/MobileModal';
+
+type Props = {
+  snapshot: Snapshot;
+  onBack: () => void;
+};
+
+const TYPES: Array<Schedule['type']> = ['cron', 'interval', 'once'];
+const ACTIONS: Array<Schedule['action']['type']> = ['command', 'agent', 'webhook'];
+
+const TIMEZONES = ['UTC', 'America/New_York', 'America/Los_Angeles', 'Europe/London', 'Europe/Berlin', 'Asia/Tokyo'];
+
+const HOURS = Array.from({ length: 24 }, (_, h) => ({
+  value: h,
+  label: h === 0 ? '12 AM' : h < 12 ? `${h} AM` : h === 12 ? '12 PM' : `${h - 12} PM`,
+}));
+const MINUTES = Array.from({ length: 12 }, (_, i) => i * 5); // 0,5,…,55
+const DOWS = [
+  { value: '*', label: 'Every day' },
+  { value: '0', label: 'Sun' },
+  { value: '1', label: 'Mon' },
+  { value: '2', label: 'Tue' },
+  { value: '3', label: 'Wed' },
+  { value: '4', label: 'Thu' },
+  { value: '5', label: 'Fri' },
+  { value: '6', label: 'Sat' },
+];
+const INTERVAL_UNITS = [
+  { value: 's', label: 'sec' },
+  { value: 'm', label: 'min' },
+  { value: 'h', label: 'hr' },
+  { value: 'd', label: 'day' },
+];
+
+export function MobileSchedules({ snapshot }: Props) {
+  const [schedules, setSchedules] = useState<Schedule[]>(snapshot.schedules || []);
+  const [loading, setLoading] = useState(!snapshot.schedules);
+  const [filter, setFilter] = useState('');
+  const [detailSchedule, setDetailSchedule] = useState<Schedule | null>(null);
+  const [editor, setEditor] = useState<{ open: boolean; initial?: Schedule }>({ open: false });
+
+  const reload = async () => {
+    try {
+      const data = await api.get<{ schedules: Schedule[] }>('/schedules');
+      setSchedules(data.schedules || []);
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (snapshot.schedules) {
+      setSchedules(snapshot.schedules);
+      setLoading(false);
+    } else {
+      reload();
+    }
+  }, [snapshot.schedules]);
+
+  // v3.9.0 — PATCH partial update (toggle enabled, edit name, etc.).
+  // The backend supports PATCH (see routes/schedules.mjs).
+  const toggleSchedule = async (id: string, enabled: boolean) => {
+    try {
+      await api.patch(`/schedules/${encodeURIComponent(id)}`, { enabled });
+      setSchedules((cur) => cur.map((s) => (s.id === id ? { ...s, enabled } : s)));
+      if (detailSchedule?.id === id) {
+        setDetailSchedule((s) => (s ? { ...s, enabled } : s));
+      }
+    } catch {
+      // best-effort
+    }
+  };
+
+  const deleteSchedule = async (id: string) => {
+    if (!confirm('Delete this schedule?')) return;
+    try {
+      await api.del(`/schedules/${encodeURIComponent(id)}`);
+      setSchedules((cur) => cur.filter((s) => s.id !== id));
+      if (detailSchedule?.id === id) setDetailSchedule(null);
+    } catch {
+      // best-effort
+    }
+  };
+
+  // v3.9.0 — backend added /trigger as an alias of /run (mobile uses this).
+  const triggerSchedule = async (id: string) => {
+    try {
+      await api.post(`/schedules/${encodeURIComponent(id)}/trigger`);
+    } catch {
+      // best-effort
+    }
+  };
+
+  const filtered = filter.trim()
+    ? schedules.filter((s) => s.name.toLowerCase().includes(filter.toLowerCase()))
+    : schedules;
+
+  return (
+    <div className="mobile-view">
+      <div className="mobile-tasks-toolbar">
+        <input
+          className="mobile-search-input"
+          type="text"
+          placeholder="Search schedules…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <button type="button" className="mobile-icon-btn" onClick={() => reload()} aria-label="Refresh">
+          <RefreshCw size={16} />
+        </button>
+        <button
+          type="button"
+          className="mobile-icon-btn"
+          onClick={() => setEditor({ open: true })}
+          aria-label="New schedule"
+        >
+          <Plus size={16} />
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="mobile-loading"><p>Loading…</p></div>
+      ) : filtered.length === 0 ? (
+        <div className="mobile-empty">
+          <Clock size={40} />
+          <p>No schedules found.</p>
+        </div>
+      ) : (
+        <div className="mobile-card-list">
+          {filtered.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              className="mobile-list-item mobile-list-item-interactive"
+              onClick={() => setDetailSchedule(s)}
+            >
+              <div className="mobile-list-icon"><Clock size={16} /></div>
+              <div className="mobile-list-content">
+                <span className="mobile-list-title">{s.name}</span>
+                <span className="mobile-list-meta">
+                  {humanizeSchedule(s)} ·{' '}
+                  {s.nextRun ? `next ${formatNextShort(s.nextRun, s.timezone)}` : 'no next run'}
+                </span>
+              </div>
+              <span className={`mobile-list-badge ${s.enabled ? 'badge-on' : 'badge-off'}`}>
+                {s.enabled ? 'on' : 'off'}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {detailSchedule && (
+        <MobileBottomSheet
+          open={true}
+          onClose={() => setDetailSchedule(null)}
+          title={detailSchedule.name}
+          actions={
+            <div className="mobile-task-detail-actions">
+              <button
+                type="button"
+                className="mobile-btn"
+                onClick={() => { if (detailSchedule) triggerSchedule(detailSchedule.id); }}
+              >
+                <Play size={14} /> Trigger now
+              </button>
+              <button
+                type="button"
+                className={`mobile-btn ${!detailSchedule.enabled ? '' : 'mobile-btn-secondary'}`}
+                onClick={() => { if (detailSchedule) toggleSchedule(detailSchedule.id, !detailSchedule.enabled); }}
+              >
+                {detailSchedule.enabled ? 'Disable' : 'Enable'}
+              </button>
+              <button
+                type="button"
+                className="mobile-btn"
+                onClick={() => {
+                  if (!detailSchedule) return;
+                  setEditor({ open: true, initial: detailSchedule });
+                  setDetailSchedule(null);
+                }}
+              >
+                <Pencil size={14} /> Edit
+              </button>
+              <button
+                type="button"
+                className="mobile-btn mobile-btn-danger"
+                onClick={() => { if (detailSchedule) deleteSchedule(detailSchedule.id); }}
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          }
+        >
+          <div className="mobile-agent-detail">
+            <div className="mobile-agent-detail-meta">
+              <div className="mobile-task-detail-row">
+                <span>Type</span>
+                <span>{detailSchedule.type}</span>
+              </div>
+              <div className="mobile-task-detail-row">
+                <span>Schedule</span>
+                <span className="mono">{humanizeSchedule(detailSchedule) || detailSchedule.schedule}</span>
+              </div>
+              {detailSchedule.timezone && (
+                <div className="mobile-task-detail-row">
+                  <span>Timezone</span>
+                  <span className="mono">{detailSchedule.timezone}</span>
+                </div>
+              )}
+              <div className="mobile-task-detail-row">
+                <span>Action</span>
+                <span>{detailSchedule.action.type}: {detailSchedule.action.target}</span>
+              </div>
+              {detailSchedule.action.type === 'agent' && detailSchedule.action.prompt && (
+                <div className="mobile-task-detail-row">
+                  <span>Prompt</span>
+                  <span style={{ fontSize: 12 }}>{detailSchedule.action.prompt}</span>
+                </div>
+              )}
+              {detailSchedule.budgetCheck?.skipIfBudgetLow && (
+                <div className="mobile-task-detail-row">
+                  <span>Budget gate</span>
+                  <span>skip if ≥ {detailSchedule.budgetCheck.maxConcurrent ?? 6} concurrent</span>
+                </div>
+              )}
+              <div className="mobile-task-detail-row">
+                <span>Next run</span>
+                <span>{detailSchedule.nextRun ? formatNextShort(detailSchedule.nextRun, detailSchedule.timezone) : '—'}</span>
+              </div>
+              <div className="mobile-task-detail-row">
+                <span>Last run</span>
+                <span>{detailSchedule.lastRun ? formatRel(detailSchedule.lastRun) : '—'}</span>
+              </div>
+              {detailSchedule.lastResult && (
+                <div className="mobile-task-detail-row">
+                  <span>Last result</span>
+                  <span style={{ fontSize: 12 }}>{detailSchedule.lastResult}</span>
+                </div>
+              )}
+              {detailSchedule.lastError && (
+                <div className="mobile-task-detail-row">
+                  <span>Last error</span>
+                  <span style={{ fontSize: 12 }}>{detailSchedule.lastError}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </MobileBottomSheet>
+      )}
+
+      <ScheduleEditor
+        open={editor.open}
+        initial={editor.initial}
+        onClose={() => setEditor({ open: false })}
+        onSaved={() => {
+          setEditor({ open: false });
+          reload();
+        }}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Reusable mobile editor modal                                      */
+/* ------------------------------------------------------------------ */
+
+type EditorState = {
+  name: string;
+  type: Schedule['type'];
+  cronMinute: number;
+  cronHour: number;
+  cronDow: string;
+  intervalN: number;
+  intervalUnit: string;
+  onceAt: string;
+  timezone: string;
+  actionType: Schedule['action']['type'];
+  actionTarget: string;
+  actionPrompt: string;
+  skipIfBudgetLow: boolean;
+  maxConcurrent: number;
+  enabled: boolean;
+};
+
+function initialEditorState(initial?: Schedule): EditorState {
+  if (!initial) {
+    return {
+      name: '',
+      type: 'cron',
+      cronMinute: 0,
+      cronHour: 13,
+      cronDow: '0',
+      intervalN: 30,
+      intervalUnit: 'm',
+      onceAt: '',
+      timezone: 'UTC',
+      actionType: 'agent',
+      actionTarget: '',
+      actionPrompt: '',
+      skipIfBudgetLow: false,
+      maxConcurrent: 6,
+      enabled: true,
+    };
+  }
+  const parsedCron = initial.type === 'cron' ? parseSimpleCron(initial.schedule) : null;
+  const parsedInterval = initial.type === 'interval' ? parseSimpleInterval(initial.schedule) : null;
+  return {
+    name: initial.name || '',
+    type: initial.type,
+    cronMinute: parsedCron?.minute ?? 0,
+    cronHour: parsedCron?.hour ?? 9,
+    cronDow: parsedCron?.dow ?? '*',
+    intervalN: parsedInterval?.n ?? 30,
+    intervalUnit: parsedInterval?.unit ?? 'm',
+    onceAt: initial.type === 'once' ? toDatetimeLocal(initial.schedule) : '',
+    timezone: initial.timezone || 'UTC',
+    actionType: initial.action.type,
+    actionTarget: initial.action.target || '',
+    actionPrompt: initial.action.prompt || '',
+    skipIfBudgetLow: !!initial.budgetCheck?.skipIfBudgetLow,
+    maxConcurrent: Number.isFinite(initial.budgetCheck?.maxConcurrent)
+      ? initial.budgetCheck!.maxConcurrent!
+      : 6,
+    enabled: initial.enabled !== false,
+  };
+}
+
+function composeScheduleValue(s: EditorState): string {
+  if (s.type === 'cron') return `${s.cronMinute} ${s.cronHour} * * ${s.cronDow}`;
+  if (s.type === 'interval') return `${s.intervalN}${s.intervalUnit}`;
+  if (!s.onceAt) return '';
+  try {
+    return new Date(s.onceAt).toISOString();
+  } catch {
+    return s.onceAt;
+  }
+}
+
+function ScheduleEditor({
+  open,
+  initial,
+  onClose,
+  onSaved,
+}: {
+  open: boolean;
+  initial?: Schedule;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const [state, setState] = useState<EditorState>(() => initialEditorState(initial));
+  const [submitting, setSubmitting] = useState(false);
+
+  // Re-seed state when the modal is reopened with a different initial.
+  useEffect(() => {
+    if (open) setState(initialEditorState(initial));
+  }, [open, initial]);
+
+  const update = <K extends keyof EditorState>(key: K, value: EditorState[K]) => {
+    setState((cur) => ({ ...cur, [key]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!state.name.trim()) return;
+    const schedule = composeScheduleValue(state);
+    if (!schedule) return;
+    setSubmitting(true);
+    try {
+      const payload = {
+        name: state.name.trim(),
+        type: state.type,
+        schedule,
+        timezone: state.timezone,
+        action: {
+          type: state.actionType,
+          target: state.actionTarget.trim(),
+          ...(state.actionType === 'agent' && state.actionPrompt.trim()
+            ? { prompt: state.actionPrompt.trim() }
+            : {}),
+        },
+        budgetCheck: {
+          maxConcurrent: state.maxConcurrent,
+          skipIfBudgetLow: state.skipIfBudgetLow,
+        },
+        enabled: state.enabled,
+      };
+      if (initial) {
+        await api.put(`/schedules/${encodeURIComponent(initial.id)}`, payload);
+      } else {
+        await api.post('/schedules', payload);
+      }
+      onSaved();
+    } catch {
+      // best-effort — modal stays open so the operator can retry.
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <MobileModal
+      open={open}
+      onClose={onClose}
+      title={initial ? `Edit ${initial.name}` : 'New schedule'}
+      actions={
+        <button
+          type="submit"
+          form="mobile-schedule-form"
+          className="mobile-btn"
+          style={{ width: '100%' }}
+          disabled={submitting}
+        >
+          <Plus size={14} /> {initial ? 'Save' : 'Create'}
+        </button>
+      }
+    >
+      <form id="mobile-schedule-form" onSubmit={handleSubmit} className="mobile-task-form">
+        <label className="mobile-field-label">Name *</label>
+        <input
+          className="mobile-input"
+          type="text"
+          placeholder="Weekly review"
+          value={state.name}
+          onChange={(e) => update('name', e.target.value)}
+          autoFocus
+          required
+        />
+
+        <label className="mobile-field-label">Type</label>
+        <select
+          className="mobile-input"
+          value={state.type}
+          onChange={(e) => update('type', e.target.value as Schedule['type'])}
+        >
+          {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+
+        {state.type === 'cron' && (
+          <>
+            <label className="mobile-field-label">Day of week</label>
+            <select
+              className="mobile-input"
+              value={state.cronDow}
+              onChange={(e) => update('cronDow', e.target.value)}
+            >
+              {DOWS.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
+            </select>
+
+            <div className="mobile-form-row">
+              <div style={{ flex: 1 }}>
+                <label className="mobile-field-label">Hour</label>
+                <select
+                  className="mobile-input"
+                  value={String(state.cronHour)}
+                  onChange={(e) => update('cronHour', parseInt(e.target.value, 10))}
+                >
+                  {HOURS.map((h) => <option key={h.value} value={String(h.value)}>{h.label}</option>)}
+                </select>
+              </div>
+              <div style={{ flex: 1 }}>
+                <label className="mobile-field-label">Minute</label>
+                <select
+                  className="mobile-input"
+                  value={String(state.cronMinute)}
+                  onChange={(e) => update('cronMinute', parseInt(e.target.value, 10))}
+                >
+                  {MINUTES.map((m) => <option key={m} value={String(m)}>{String(m).padStart(2, '0')}</option>)}
+                </select>
+              </div>
+            </div>
+          </>
+        )}
+
+        {state.type === 'interval' && (
+          <div className="mobile-form-row">
+            <div style={{ flex: 1 }}>
+              <label className="mobile-field-label">Every</label>
+              <input
+                className="mobile-input"
+                type="number"
+                min={1}
+                value={state.intervalN}
+                onChange={(e) => update('intervalN', parseInt(e.target.value, 10) || 1)}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label className="mobile-field-label">Unit</label>
+              <select
+                className="mobile-input"
+                value={state.intervalUnit}
+                onChange={(e) => update('intervalUnit', e.target.value)}
+              >
+                {INTERVAL_UNITS.map((u) => <option key={u.value} value={u.value}>{u.label}</option>)}
+              </select>
+            </div>
+          </div>
+        )}
+
+        {state.type === 'once' && (
+          <>
+            <label className="mobile-field-label">Run at</label>
+            <input
+              className="mobile-input"
+              type="datetime-local"
+              value={state.onceAt}
+              onChange={(e) => update('onceAt', e.target.value)}
+            />
+          </>
+        )}
+
+        <label className="mobile-field-label">Timezone</label>
+        <select
+          className="mobile-input"
+          value={TIMEZONES.includes(state.timezone) ? state.timezone : 'UTC'}
+          onChange={(e) => update('timezone', e.target.value)}
+        >
+          {TIMEZONES.map((tz) => <option key={tz} value={tz}>{tz}</option>)}
+        </select>
+
+        <label className="mobile-field-label">Action type</label>
+        <select
+          className="mobile-input"
+          value={state.actionType}
+          onChange={(e) => update('actionType', e.target.value as Schedule['action']['type'])}
+        >
+          {ACTIONS.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+
+        <label className="mobile-field-label">Target</label>
+        <input
+          className="mobile-input"
+          type="text"
+          placeholder={
+            state.actionType === 'webhook'
+              ? 'https://...'
+              : state.actionType === 'agent'
+                ? 'agent or task ref'
+                : 'echo hello'
+          }
+          value={state.actionTarget}
+          onChange={(e) => update('actionTarget', e.target.value)}
+        />
+
+        {state.actionType === 'agent' && (
+          <>
+            <label className="mobile-field-label">Prompt</label>
+            <textarea
+              className="mobile-input"
+              rows={3}
+              placeholder="What should the agent do?"
+              value={state.actionPrompt}
+              onChange={(e) => update('actionPrompt', e.target.value)}
+            />
+          </>
+        )}
+
+        <fieldset className="mobile-budget-card">
+          <legend>Budget pre-flight</legend>
+          <label className="mobile-checkbox-row">
+            <input
+              type="checkbox"
+              checked={state.skipIfBudgetLow}
+              onChange={(e) => update('skipIfBudgetLow', e.target.checked)}
+            />
+            <span>Skip if too many bg tasks are running</span>
+          </label>
+          <label className="mobile-field-label">Cap</label>
+          <input
+            className="mobile-input"
+            type="number"
+            min={1}
+            max={64}
+            value={state.maxConcurrent}
+            onChange={(e) => update('maxConcurrent', parseInt(e.target.value, 10) || 6)}
+            disabled={!state.skipIfBudgetLow}
+          />
+        </fieldset>
+
+        <label className="mobile-checkbox-row">
+          <input
+            type="checkbox"
+            checked={state.enabled}
+            onChange={(e) => update('enabled', e.target.checked)}
+          />
+          <span>Enabled</span>
+        </label>
+      </form>
+    </MobileModal>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+
+function formatRel(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  if (diff < 60000) return 'just now';
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+function formatNextShort(iso: string, tz?: string | null): string {
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      timeZone: tz || undefined,
+      weekday: 'short',
+      hour: 'numeric',
+      minute: '2-digit',
+      month: 'short',
+      day: 'numeric',
+    });
+  } catch {
+    return new Date(iso).toLocaleString();
+  }
+}
+
+function parseSimpleCron(expr: string): { minute: number; hour: number; dow: string } | null {
+  if (typeof expr !== 'string') return null;
+  const parts = expr.trim().split(/\s+/);
+  if (parts.length !== 5) return null;
+  const [m, h, , , dow] = parts;
+  const minNum = parseInt(m, 10);
+  const hourNum = parseInt(h, 10);
+  if (!Number.isFinite(minNum) || !Number.isFinite(hourNum)) return null;
+  if (m !== String(minNum) || h !== String(hourNum)) return null;
+  return {
+    minute: minNum,
+    hour: hourNum,
+    dow: dow === '*' ? '*' : (Number.isFinite(parseInt(dow, 10)) ? dow : '*'),
+  };
+}
+
+function parseSimpleInterval(s: string): { n: number; unit: string } | null {
+  if (typeof s !== 'string') return null;
+  const m = /^(\d+)([smhd])$/i.exec(s.trim());
+  if (!m) return null;
+  return { n: parseInt(m[1], 10), unit: m[2].toLowerCase() };
+}
+
+function toDatetimeLocal(iso: string): string {
+  if (!iso) return '';
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  } catch {
+    return '';
+  }
+}
+
+function humanizeSchedule(s: Schedule): string {
+  if (s.type !== 'cron') return s.schedule;
+  const parsed = parseSimpleCron(s.schedule);
+  if (!parsed) return s.schedule;
+  const dow = DOWS.find((d) => d.value === parsed.dow)?.label || parsed.dow;
+  const hourLabel = HOURS.find((h) => h.value === parsed.hour)?.label || `${parsed.hour}`;
+  const minute = String(parsed.minute).padStart(2, '0');
+  if (dow === 'Every day') return `Every day ${hourLabel} :${minute}`;
+  return `Every ${dow} ${hourLabel} :${minute}`;
+}