nexo-brain 5.3.20 → 5.3.21

package/src/dashboard/templates/operations 2.html

@@ -0,0 +1,608 @@
+{% extends "base.html" %}
+
+{% block title %}Operations{% endblock %}
+{% block page_title %}Operations{% endblock %}
+
+{% block head %}
+<style>
+  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+  .toast-enter { animation: slideIn 0.2s ease-out; }
+  .modal-backdrop { backdrop-filter: blur(4px); }
+</style>
+{% endblock %}
+
+{% block header_actions %}
+<input
+  type="text"
+  id="ops-search"
+  placeholder="Search..."
+  oninput="filterOps()"
+  class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-slate-200 w-48 focus:outline-none focus:ring-1 focus:ring-violet-500 placeholder-slate-500"
+>
+<select
+  id="ops-status"
+  onchange="loadOpsData()"
+  class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500"
+>
+  <option value="PENDING">Pending</option>
+  <option value="all">All</option>
+  <option value="completed">Completed</option>
+  <option value="deleted">Deleted</option>
+  <option value="history">History</option>
+</select>
+{% endblock %}
+
+{% block content %}
+<div class="grid grid-cols-2 gap-6">
+
+  <!-- LEFT: User's Items (Reminders) -->
+  <div>
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <div class="w-2 h-2 rounded-full bg-violet-400"></div>
+        <h2 class="text-sm font-display font-semibold text-slate-100">User</h2>
+        <span id="reminder-count" class="text-xs px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-400 font-mono">0</span>
+      </div>
+      <button onclick="openCreate('reminder')" class="text-xs px-2 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
+        + Add
+      </button>
+    </div>
+    <div id="reminders-list" class="space-y-2">
+      <div class="text-xs text-slate-600 font-mono py-4 text-center">Loading...</div>
+    </div>
+  </div>
+
+  <!-- RIGHT: NEXO's Items (Followups) -->
+  <div>
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <div class="w-2 h-2 rounded-full bg-pink-400"></div>
+        <h2 class="text-sm font-display font-semibold text-slate-100">NEXO</h2>
+        <span id="followup-count" class="text-xs px-1.5 py-0.5 rounded-full bg-pink-500/20 text-pink-400 font-mono">0</span>
+      </div>
+      <button onclick="openCreate('followup')" class="text-xs px-2 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
+        + Add
+      </button>
+    </div>
+    <div id="followups-list" class="space-y-2">
+      <div class="text-xs text-slate-600 font-mono py-4 text-center">Loading...</div>
+    </div>
+  </div>
+
+</div>
+
+<!-- CREATE/EDIT MODAL -->
+<div id="ops-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
+  <div class="absolute inset-0 bg-black/60 modal-backdrop" onclick="closeModal()"></div>
+  <div class="relative bg-slate-900 border border-slate-700/50 rounded-xl shadow-2xl w-full max-w-md mx-4">
+    <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800">
+      <h2 id="modal-title" class="text-sm font-display font-semibold text-slate-100">New Item</h2>
+      <button onclick="closeModal()" class="w-6 h-6 rounded-md flex items-center justify-center text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors text-lg leading-none">&times;</button>
+    </div>
+    <form id="modal-form" onsubmit="submitForm(event)" class="px-5 py-4 space-y-4">
+      <div>
+        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Description</label>
+        <textarea
+          name="description"
+          rows="3"
+          required
+          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
+          placeholder="Describe the item..."
+        ></textarea>
+      </div>
+      <div>
+        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Date <span class="text-slate-600">(optional)</span></label>
+        <input
+          type="date"
+          name="date"
+          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500"
+        >
+      </div>
+      <div id="category-group" class="hidden">
+        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Category</label>
+        <select name="category" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
+          <option value="general">General</option>
+          <option value="ideas">Ideas</option>
+          <option value="my-project">My Project</option>
+          <option value="project-a">Project A</option>
+          <option value="server">Server</option>
+        </select>
+      </div>
+      <div id="verification-group" class="hidden">
+        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Verification</label>
+        <textarea
+          name="verification"
+          rows="2"
+          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
+          placeholder="How to verify this is done..."
+        ></textarea>
+      </div>
+      <div id="reasoning-group" class="hidden">
+        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Reasoning</label>
+        <textarea
+          name="reasoning"
+          rows="2"
+          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
+          placeholder="Why this followup exists..."
+        ></textarea>
+      </div>
+      <input type="hidden" name="type" id="modal-type">
+      <input type="hidden" name="edit_id" id="modal-edit-id">
+      <input type="hidden" name="read_token" id="modal-read-token">
+      <div class="flex items-center justify-end gap-2 pt-1">
+        <button type="button" onclick="closeModal()" class="text-xs px-3 py-1.5 rounded-lg bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
+          Cancel
+        </button>
+        <button type="submit" id="modal-submit-btn" class="text-xs px-3 py-1.5 rounded-lg bg-violet-600 text-white hover:bg-violet-500 transition-colors font-medium">
+          Create
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- CONFIRM MODAL -->
+<div id="confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
+  <div class="absolute inset-0 bg-black/60 modal-backdrop" onclick="closeConfirm()"></div>
+  <div class="relative bg-slate-900 border border-slate-700/50 rounded-xl shadow-2xl w-full max-w-sm mx-4">
+    <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800">
+      <h2 class="text-sm font-display font-semibold text-slate-100">Confirm</h2>
+      <button onclick="closeConfirm()" class="w-6 h-6 rounded-md flex items-center justify-center text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors text-lg leading-none">&times;</button>
+    </div>
+    <div class="px-5 py-4">
+      <p id="confirm-message" class="text-xs text-slate-300 mb-4">Are you sure?</p>
+      <div class="flex items-center justify-end gap-2">
+        <button onclick="closeConfirm()" class="text-xs px-3 py-1.5 rounded-lg bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
+          Cancel
+        </button>
+        <button id="confirm-btn" onclick="confirmAction()" class="text-xs px-3 py-1.5 rounded-lg bg-red-600 text-white hover:bg-red-500 transition-colors font-medium">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- OPS TOAST (separate from base toast) -->
+<div id="ops-toast" class="hidden fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl border shadow-lg text-xs font-medium toast-enter max-w-xs">
+  <span id="ops-toast-icon" class="flex-shrink-0"></span>
+  <span id="ops-toast-message"></span>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// -----------------------------------------------------------------------
+// State
+// -----------------------------------------------------------------------
+let allReminders = [];
+let allFollowups = [];
+let pendingConfirmAction = null;
+
+// -----------------------------------------------------------------------
+// Ops Toast (uses its own element to avoid conflict with base toast)
+// -----------------------------------------------------------------------
+function opsToast(message, type = 'success') {
+  const toast = document.getElementById('ops-toast');
+  const msg = document.getElementById('ops-toast-message');
+  const icon = document.getElementById('ops-toast-icon');
+  msg.textContent = message;
+
+  const styles = {
+    success: { bg: 'bg-slate-800', border: 'border-emerald-500/30', text: 'text-emerald-400', iconSvg: '\u2713' },
+    error:   { bg: 'bg-slate-800', border: 'border-red-500/30',     text: 'text-red-400',     iconSvg: '\u2715' },
+    info:    { bg: 'bg-slate-800', border: 'border-violet-500/30',  text: 'text-violet-400',  iconSvg: '\u00b7' },
+  };
+  const s = styles[type] || styles.info;
+  toast.className = `fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl border shadow-lg text-xs font-medium toast-enter max-w-xs ${s.bg} ${s.border}`;
+  icon.className = s.text;
+  icon.textContent = s.iconSvg;
+  msg.className = 'text-slate-200';
+  toast.classList.remove('hidden');
+  clearTimeout(toast._timer);
+  toast._timer = setTimeout(() => { toast.classList.add('hidden'); }, 3000);
+}
+
+// -----------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------
+function getToday() {
+  return new Date().toISOString().split('T')[0];
+}
+
+function getWeekEnd() {
+  const d = new Date();
+  d.setDate(d.getDate() + 7);
+  return d.toISOString().split('T')[0];
+}
+
+function opsRelativeDate(dateStr) {
+  if (!dateStr) return '';
+  const d = new Date(dateStr + 'T00:00:00'), now = new Date();
+  now.setHours(0,0,0,0);
+  const diff = Math.round((d - now) / 86400000);
+  if (diff < -1) return Math.abs(diff) + 'd ago';
+  if (diff === -1) return 'yesterday';
+  if (diff === 0) return 'today';
+  if (diff === 1) return 'tomorrow';
+  if (diff <= 7) return diff + 'd';
+  return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
+}
+
+async function fetchItemDetail(id, type) {
+  const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
+  const data = await fetchJSON(url);
+  if (!data || !data.success) {
+    throw new Error((data && (data.error || data.detail)) || 'Failed to read item history');
+  }
+  return type === 'reminder' ? data.reminder : data.followup;
+}
+
+async function fetchReadToken(id, type) {
+  const item = await fetchItemDetail(id, type);
+  const token = item.read_token;
+  if (!token) {
+    throw new Error('Missing read token for ' + id);
+  }
+  return { item, token };
+}
+
+// -----------------------------------------------------------------------
+// Grouping
+// -----------------------------------------------------------------------
+function groupItems(items) {
+  const today = getToday();
+  const weekEnd = getWeekEnd();
+  return {
+    overdue:  items.filter(i => i.date && i.date < today && i.status !== 'COMPLETED'),
+    today:    items.filter(i => i.date === today),
+    week:     items.filter(i => i.date && i.date > today && i.date <= weekEnd),
+    upcoming: items.filter(i => i.date && i.date > weekEnd),
+    noDate:   items.filter(i => !i.date),
+  };
+}
+
+// -----------------------------------------------------------------------
+// Rendering
+// -----------------------------------------------------------------------
+function renderItem(item, type) {
+  const today = getToday();
+  const isOverdue  = item.date && item.date < today && item.status !== 'COMPLETED';
+  const isToday    = item.date === today;
+  const isCompleted = item.status === 'COMPLETED';
+
+  const dotColor   = isCompleted ? 'bg-emerald-400' : isOverdue ? 'bg-red-400' : isToday ? 'bg-amber-400' : 'bg-slate-500';
+  const dateLabel  = opsRelativeDate(item.date);
+  const dateClass  = isOverdue ? 'text-red-400' : isToday ? 'text-amber-400' : 'text-slate-500';
+
+  const desc = escapeHtml(item.description || '');
+  const idLabel = escapeHtml(item.id || '');
+  const category = type === 'reminder' && item.category ? escapeHtml(item.category) : '';
+
+  const moveLabel  = type === 'reminder' ? '\u2192 NEXO' : '\u2190 User';
+  const moveDir    = type === 'reminder' ? 'to_followup' : 'to_reminder';
+
+  const runBtn = type === 'followup'
+    ? `<button onclick="executeItem('${item.id}')" class="text-xs px-2.5 py-1 rounded bg-pink-500/10 text-pink-400 hover:bg-pink-500/20 transition-colors">\u25b6 Run</button>`
+    : '';
+
+  const completedOpacity = isCompleted ? 'opacity-50' : '';
+
+  return `
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-lg p-4 group hover:border-slate-700 transition-colors ${completedOpacity}" data-id="${idLabel}">
+      <div class="flex items-start gap-2">
+        <div class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${dotColor}"></div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm text-slate-200 leading-relaxed line-clamp-2">${desc}</p>
+          <div class="flex items-center gap-2 mt-1.5 flex-wrap">
+            <span class="text-xs font-mono text-slate-600">${idLabel}</span>
+            ${dateLabel ? `<span class="text-xs font-mono ${dateClass}">${dateLabel}</span>` : ''}
+            ${category ? `<span class="text-xs px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${category}</span>` : ''}
+            ${isCompleted ? `<span class="text-xs px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-500">done</span>` : ''}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        ${!isCompleted ? `<button onclick="completeItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 transition-colors">Done</button>` : ''}
+        <button onclick="editItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded bg-slate-800 text-slate-400 hover:bg-slate-700 transition-colors">Edit</button>
+        <button onclick="moveItem('${item.id}','${moveDir}')" class="text-xs px-2.5 py-1 rounded bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 transition-colors">${moveLabel}</button>
+        ${runBtn}
+        <button onclick="deleteItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded text-red-400/60 hover:bg-red-500/10 hover:text-red-400 transition-colors ml-auto">\u2715</button>
+      </div>
+    </div>
+  `;
+}
+
+function renderGroupedItems(items, type, containerId) {
+  const container = document.getElementById(containerId);
+  const g = groupItems(items);
+
+  const groups = [
+    { key: 'overdue',  label: 'Overdue',     color: 'text-red-400' },
+    { key: 'today',    label: 'Today',        color: 'text-amber-400' },
+    { key: 'week',     label: 'This Week',    color: 'text-violet-400' },
+    { key: 'upcoming', label: 'Upcoming',     color: 'text-slate-400' },
+    { key: 'noDate',   label: 'No Date',      color: 'text-slate-600' },
+  ];
+
+  let html = '';
+  let first = true;
+  groups.forEach(({ key, label, color }) => {
+    const list = g[key];
+    if (!list || list.length === 0) return;
+    const marginClass = first ? '' : 'mt-4';
+    html += `<div class="text-xs uppercase tracking-wider ${color} font-medium mb-2 ${marginClass}">${label} <span class="opacity-50">(${list.length})</span></div>`;
+    html += '<div class="space-y-2">' + list.map(i => renderItem(i, type)).join('') + '</div>';
+    first = false;
+  });
+
+  if (!html) {
+    html = '<div class="text-xs text-slate-600 font-mono py-8 text-center">No items</div>';
+  }
+
+  container.innerHTML = html;
+}
+
+// -----------------------------------------------------------------------
+// Data loading
+// -----------------------------------------------------------------------
+async function loadOpsData() {
+  const status = document.getElementById('ops-status').value;
+  const statusParam = status ? '?status=' + encodeURIComponent(status) : '';
+
+  const [remData, fupData] = await Promise.all([
+    fetchJSON('/api/reminders' + statusParam),
+    fetchJSON('/api/followups' + statusParam),
+  ]);
+
+  if (remData) {
+    allReminders = remData.reminders || [];
+    document.getElementById('reminder-count').textContent = allReminders.length;
+  }
+  if (fupData) {
+    allFollowups = fupData.followups || [];
+    document.getElementById('followup-count').textContent = allFollowups.length;
+  }
+
+  filterOps();
+}
+
+function filterOps() {
+  const search = (document.getElementById('ops-search').value || '').toLowerCase();
+
+  const filteredReminders = allReminders.filter(r =>
+    !search ||
+    (r.description || '').toLowerCase().includes(search) ||
+    (r.id || '').toLowerCase().includes(search) ||
+    (r.category || '').toLowerCase().includes(search)
+  );
+  const filteredFollowups = allFollowups.filter(f =>
+    !search ||
+    (f.description || '').toLowerCase().includes(search) ||
+    (f.id || '').toLowerCase().includes(search)
+  );
+
+  renderGroupedItems(filteredReminders, 'reminder', 'reminders-list');
+  renderGroupedItems(filteredFollowups, 'followup', 'followups-list');
+}
+
+// -----------------------------------------------------------------------
+// Actions
+// -----------------------------------------------------------------------
+async function completeItem(id, type) {
+  try {
+    const { token } = await fetchReadToken(id, type);
+    const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
+    const res = await fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: 'COMPLETED', read_token: token })
+    });
+    const data = await res.json();
+    if (data.success) {
+      opsToast('Completed ' + id);
+      loadOpsData();
+    } else {
+      opsToast(data.error || data.detail || 'Complete failed (HTTP ' + res.status + ')', 'error');
+    }
+  } catch (err) {
+    opsToast('Complete error: ' + err.message, 'error');
+  }
+}
+
+async function moveItem(id, direction) {
+  try {
+    const type = direction === 'to_followup' ? 'reminder' : 'followup';
+    const { token } = await fetchReadToken(id, type);
+    const res = await fetch('/api/ops/move', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, direction, read_token: token })
+    });
+    const data = await res.json();
+    if (data.success) {
+      opsToast('Moved ' + id + ' to ' + (direction === 'to_followup' ? 'NEXO' : 'User'));
+      loadOpsData();
+    } else {
+      opsToast(data.error || data.detail || 'Move failed (HTTP ' + res.status + ')', 'error');
+    }
+  } catch (err) {
+    opsToast('Move error: ' + err.message, 'error');
+  }
+}
+
+async function executeItem(id) {
+  try {
+    const res = await fetch('/api/ops/execute/' + id, { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      opsToast('Executing ' + id, 'info');
+    } else {
+      opsToast(data.error || data.detail || 'Execute failed (HTTP ' + res.status + ')', 'error');
+    }
+  } catch (err) {
+    opsToast('Execute error: ' + err.message, 'error');
+  }
+}
+
+function deleteItem(id, type) {
+  pendingConfirmAction = async () => {
+    try {
+      const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
+      const { token } = await fetchReadToken(id, type);
+      const res = await fetch(url + '?read_token=' + encodeURIComponent(token), { method: 'DELETE' });
+      const data = await res.json();
+      if (data.success) {
+        opsToast('Marked ' + id + ' as deleted');
+        loadOpsData();
+      } else {
+        opsToast(data.error || data.detail || 'Delete failed (HTTP ' + res.status + ')', 'error');
+      }
+    } catch (err) {
+      opsToast('Delete error: ' + err.message, 'error');
+    }
+  };
+  document.getElementById('confirm-message').textContent = 'Delete ' + id + '? This marks it as DELETED and keeps its history.';
+  document.getElementById('confirm-modal').classList.remove('hidden');
+}
+
+function closeConfirm() {
+  document.getElementById('confirm-modal').classList.add('hidden');
+  pendingConfirmAction = null;
+}
+
+function confirmAction() {
+  if (pendingConfirmAction) pendingConfirmAction();
+  closeConfirm();
+}
+
+// -----------------------------------------------------------------------
+// Modal
+// -----------------------------------------------------------------------
+function openCreate(type) {
+  const form = document.getElementById('modal-form');
+  form.reset();
+  document.getElementById('modal-type').value = type;
+  document.getElementById('modal-edit-id').value = '';
+  document.getElementById('modal-read-token').value = '';
+  document.getElementById('modal-title').textContent = type === 'reminder' ? 'New Reminder' : 'New Followup';
+  document.getElementById('modal-submit-btn').textContent = 'Create';
+  document.getElementById('category-group').classList.toggle('hidden', type !== 'reminder');
+  document.getElementById('verification-group').classList.toggle('hidden', type !== 'followup');
+  document.getElementById('reasoning-group').classList.toggle('hidden', type !== 'followup');
+  document.getElementById('ops-modal').classList.remove('hidden');
+}
+
+async function editItem(id, type) {
+  let item;
+  try {
+    const detail = await fetchReadToken(id, type);
+    item = detail.item;
+    document.getElementById('modal-read-token').value = detail.token;
+  } catch (err) {
+    opsToast('Read history failed: ' + err.message, 'error');
+    return;
+  }
+  const form = document.getElementById('modal-form');
+  form.reset();
+  document.getElementById('modal-type').value = type;
+  document.getElementById('modal-edit-id').value = id;
+  document.getElementById('modal-title').textContent = 'Edit ' + id;
+  document.getElementById('modal-submit-btn').textContent = 'Save';
+  document.getElementById('modal-read-token').value = item.read_token || '';
+  document.getElementById('category-group').classList.toggle('hidden', type !== 'reminder');
+  document.getElementById('verification-group').classList.toggle('hidden', type !== 'followup');
+  document.getElementById('reasoning-group').classList.toggle('hidden', type !== 'followup');
+
+  form.elements.description.value = item.description || '';
+  form.elements.date.value = item.date || '';
+  if (type === 'reminder' && item.category) {
+    form.elements.category.value = item.category;
+  }
+  if (type === 'followup') {
+    form.elements.verification.value = item.verification || '';
+    form.elements.reasoning.value = item.reasoning || '';
+  }
+
+  document.getElementById('ops-modal').classList.remove('hidden');
+}
+
+function closeModal() {
+  document.getElementById('ops-modal').classList.add('hidden');
+  document.getElementById('modal-read-token').value = '';
+}
+
+async function submitForm(e) {
+  e.preventDefault();
+  const form = document.getElementById('modal-form');
+  const fd = new FormData(form);
+  const type = fd.get('type');
+  const editId = fd.get('edit_id');
+  const isEdit = !!editId;
+  const readToken = fd.get('read_token');
+
+  let url, method, body;
+
+  if (type === 'reminder') {
+    url = isEdit ? '/api/reminders/' + editId : '/api/reminders';
+    method = isEdit ? 'PUT' : 'POST';
+    body = {
+      description: fd.get('description'),
+      date: fd.get('date') || null,
+      category: fd.get('category') || 'general'
+    };
+  } else {
+    url = isEdit ? '/api/followups/' + editId : '/api/followups';
+    method = isEdit ? 'PUT' : 'POST';
+    body = {
+      description: fd.get('description'),
+      date: fd.get('date') || null,
+      verification: fd.get('verification') || null,
+      reasoning: fd.get('reasoning') || null
+    };
+  }
+  if (isEdit) {
+    body.read_token = readToken || '';
+  }
+
+  try {
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json();
+    if (data.success) {
+      opsToast(isEdit ? 'Updated ' + editId : 'Created successfully');
+      closeModal();
+      loadOpsData();
+    } else {
+      opsToast(data.error || data.detail || 'Save failed (HTTP ' + res.status + ')', 'error');
+    }
+  } catch (err) {
+    opsToast('Save error: ' + err.message, 'error');
+  }
+}
+
+// -----------------------------------------------------------------------
+// Keyboard shortcuts
+// -----------------------------------------------------------------------
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    closeModal();
+    closeConfirm();
+  }
+  if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') {
+    if (e.key === 'r') openCreate('reminder');
+    if (e.key === 'f') openCreate('followup');
+  }
+});
+
+// -----------------------------------------------------------------------
+// Init
+// -----------------------------------------------------------------------
+loadOpsData();
+setInterval(loadOpsData, 60000);
+</script>
+{% endblock %}