clay-server 2.31.0 → 2.32.0-beta.2

package/lib/public/modules/app-home-hub.js

@@ -1,7 +1,16 @@
 // app-home-hub.js - Home hub rendering, weather, tips
 // Extracted from app.js (PR-25)
 
-var _ctx = null;
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+import { switchProject, getCachedProjects, renderProjectList } from './app-projects.js';
+import { openSchedulerToTab } from './scheduler.js';
+import { getPlaybooks, openPlaybook, getPlaybookForTip } from './playbook.js';
+import { mateAvatarUrl } from './avatar.js';
+import { openDm, exitDmMode } from './app-dm.js';
+
+function $hub(id) { return document.getElementById(id); }
 
 var homeHub = null;
 var homeHubVisible = false;
@@ -75,24 +84,23 @@ var weatherSlotPlayed = false;
 
 var hubCloseBtn = null;
 
-export function initHomeHub(ctx) {
-  _ctx = ctx;
+export function initHomeHub() {
   homeHub = document.getElementById("home-hub");
   hubCloseBtn = document.getElementById("home-hub-close");
 
   if (hubCloseBtn) {
     hubCloseBtn.addEventListener("click", function () {
       hideHomeHub();
-      if (_ctx.currentSlug) {
+      if (store.get('currentSlug')) {
         if (document.documentElement.classList.contains("pwa-standalone")) {
-          history.replaceState(null, "", "/p/" + _ctx.currentSlug + "/");
+          history.replaceState(null, "", "/p/" + store.get('currentSlug') + "/");
         } else {
-          history.pushState(null, "", "/p/" + _ctx.currentSlug + "/");
+          history.pushState(null, "", "/p/" + store.get('currentSlug') + "/");
         }
         // Restore icon strip active state
         var homeIcon = document.querySelector(".icon-strip-home");
         if (homeIcon) homeIcon.classList.remove("active");
-        _ctx.renderProjectList();
+        renderProjectList();
       }
     });
   }
@@ -152,7 +160,7 @@ function fetchWeather() {
 }
 
 function updateGreetingWeather() {
-  var greetEl = _ctx.$("hub-greeting-text");
+  var greetEl = $hub("hub-greeting-text");
   if (!greetEl) return;
   // If we have real weather and haven't played the slot yet, do the reel
   if (weatherEmoji && !weatherSlotPlayed && homeHubVisible) {
@@ -254,12 +262,12 @@ export function renderHomeHub(projects) {
   updateGreetingWeather();
 
   // Date
-  var dateEl = _ctx.$("hub-greeting-date");
+  var dateEl = $hub("hub-greeting-date");
   if (dateEl) dateEl.textContent = getFormattedDate();
 
   // --- Upcoming tasks ---
-  var upcomingList = _ctx.$("hub-upcoming-list");
-  var upcomingCount = _ctx.$("hub-upcoming-count");
+  var upcomingList = $hub("hub-upcoming-list");
+  var upcomingCount = $hub("hub-upcoming-count");
   if (upcomingList) {
     var now = Date.now();
     var upcoming = hubSchedules.filter(function (s) {
@@ -290,7 +298,7 @@ export function renderHomeHub(projects) {
       if (ctaBtn) {
         ctaBtn.addEventListener("click", function () {
           hideHomeHub();
-          _ctx.openSchedulerToTab("calendar");
+          openSchedulerToTab("calendar");
         });
       }
     } else {
@@ -303,13 +311,13 @@ export function renderHomeHub(projects) {
           var dotColor = sched.color || "";
           item.innerHTML = '<span class="hub-upcoming-dot"' + (dotColor ? ' style="background:' + dotColor + '"' : '') + '></span>' +
             '<span class="hub-upcoming-time">' + formatScheduleTime(sched.nextRunAt) + '</span>' +
-            '<span class="hub-upcoming-name">' + _ctx.escapeHtml(sched.name || "Untitled") + '</span>' +
-            '<span class="hub-upcoming-project">' + _ctx.escapeHtml(sched.projectTitle || "") + '</span>';
+            '<span class="hub-upcoming-name">' + escapeHtml(sched.name || "Untitled") + '</span>' +
+            '<span class="hub-upcoming-project">' + escapeHtml(sched.projectTitle || "") + '</span>';
           item.addEventListener("click", function () {
             if (sched.projectSlug) {
-              _ctx.switchProject(sched.projectSlug);
+              switchProject(sched.projectSlug);
               setTimeout(function () {
-                _ctx.openSchedulerToTab("library");
+                openSchedulerToTab("library");
               }, 300);
             }
           });
@@ -326,7 +334,7 @@ export function renderHomeHub(projects) {
   }
 
   // --- Projects summary (exclude mate projects) ---
-  var projectsList = _ctx.$("hub-projects-list");
+  var projectsList = $hub("hub-projects-list");
   if (projectsList && projects) {
     projectsList.innerHTML = "";
     var hubProjects = projects.filter(function (p) { return !p.isMate; });
@@ -339,10 +347,10 @@ export function renderHomeHub(projects) {
         var sessionsLabel = typeof proj.sessions === "number" ? proj.sessions : "";
         item.innerHTML = '<span class="' + dotClass + '"></span>' +
           iconHtml +
-          '<span class="hub-project-name">' + _ctx.escapeHtml(proj.title || proj.project || proj.slug) + '</span>' +
+          '<span class="hub-project-name">' + escapeHtml(proj.title || proj.project || proj.slug) + '</span>' +
           (sessionsLabel !== "" ? '<span class="hub-project-sessions">' + sessionsLabel + '</span>' : '');
         item.addEventListener("click", function () {
-          _ctx.switchProject(proj.slug);
+          switchProject(proj.slug);
         });
         projectsList.appendChild(item);
       })(hubProjects[p]);
@@ -352,7 +360,7 @@ export function renderHomeHub(projects) {
   }
 
   // --- Week strip ---
-  var weekStrip = _ctx.$("hub-week-strip");
+  var weekStrip = $hub("hub-week-strip");
   if (weekStrip) {
     weekStrip.innerHTML = "";
     var today = new Date();
@@ -405,10 +413,10 @@ export function renderHomeHub(projects) {
   }
 
   // --- Playbooks ---
-  var pbGrid = _ctx.$("hub-playbooks-grid");
-  var pbSection = _ctx.$("hub-playbooks");
+  var pbGrid = $hub("hub-playbooks-grid");
+  var pbSection = $hub("hub-playbooks");
   if (pbGrid) {
-    var pbs = _ctx.getPlaybooks();
+    var pbs = getPlaybooks();
     if (pbs.length === 0) {
       if (pbSection) pbSection.style.display = "none";
     } else {
@@ -420,14 +428,14 @@ export function renderHomeHub(projects) {
           card.className = "hub-playbook-card" + (pb.completed ? " completed" : "");
           card.innerHTML = '<span class="hub-playbook-card-icon">' + pb.icon + '</span>' +
             '<div class="hub-playbook-card-body">' +
-            '<div class="hub-playbook-card-title">' + _ctx.escapeHtml(pb.title) + '</div>' +
-            '<div class="hub-playbook-card-desc">' + _ctx.escapeHtml(pb.description) + '</div>' +
+            '<div class="hub-playbook-card-title">' + escapeHtml(pb.title) + '</div>' +
+            '<div class="hub-playbook-card-desc">' + escapeHtml(pb.description) + '</div>' +
             '</div>' +
             (pb.completed ? '<span class="hub-playbook-card-check">✓</span>' : '');
           card.addEventListener("click", function () {
-            _ctx.openPlaybook(pb.id, function () {
+            openPlaybook(pb.id, function () {
               // Re-render hub after playbook closes to update completion state
-              renderHomeHub(_ctx.cachedProjects);
+              renderHomeHub(getCachedProjects());
             });
           });
           pbGrid.appendChild(card);
@@ -440,41 +448,41 @@ export function renderHomeHub(projects) {
 
   // --- Tip ---
   var currentTip = hubTips[hubTipIndex % hubTips.length];
-  var tipEl = _ctx.$("hub-tip-text");
+  var tipEl = $hub("hub-tip-text");
   if (tipEl) tipEl.textContent = currentTip;
 
   // "Try it" button if tip has a linked playbook
   var existingTry = homeHub.querySelector(".hub-tip-try");
   if (existingTry) existingTry.remove();
-  var linkedPb = _ctx.getPlaybookForTip(currentTip);
+  var linkedPb = getPlaybookForTip(currentTip);
   if (linkedPb && tipEl) {
     var tryBtn = document.createElement("button");
     tryBtn.className = "hub-tip-try";
     tryBtn.textContent = "Try it →";
     tryBtn.addEventListener("click", function () {
-      _ctx.openPlaybook(linkedPb, function () {
-        renderHomeHub(_ctx.cachedProjects);
+      openPlaybook(linkedPb, function () {
+        renderHomeHub(getCachedProjects());
       });
     });
     tipEl.appendChild(tryBtn);
   }
 
   // Tip prev/next buttons
-  var prevBtn = _ctx.$("hub-tip-prev");
+  var prevBtn = $hub("hub-tip-prev");
   if (prevBtn && !prevBtn._hubWired) {
     prevBtn._hubWired = true;
     prevBtn.addEventListener("click", function () {
       hubTipIndex = (hubTipIndex - 1 + hubTips.length) % hubTips.length;
-      renderHomeHub(_ctx.cachedProjects);
+      renderHomeHub(getCachedProjects());
       startTipRotation();
     });
   }
-  var nextBtn = _ctx.$("hub-tip-next");
+  var nextBtn = $hub("hub-tip-next");
   if (nextBtn && !nextBtn._hubWired) {
     nextBtn._hubWired = true;
     nextBtn.addEventListener("click", function () {
       hubTipIndex = (hubTipIndex + 1) % hubTips.length;
-      renderHomeHub(_ctx.cachedProjects);
+      renderHomeHub(getCachedProjects());
       startTipRotation();
     });
   }
@@ -486,7 +494,7 @@ export function renderHomeHub(projects) {
 export function handleHubSchedules(msg) {
   if (msg.schedules) {
     hubSchedules = msg.schedules;
-    if (homeHubVisible) renderHomeHub(_ctx.cachedProjects);
+    if (homeHubVisible) renderHomeHub(getCachedProjects());
   }
 }
 
@@ -494,7 +502,7 @@ function startTipRotation() {
   stopTipRotation();
   hubTipTimer = setInterval(function () {
     hubTipIndex = (hubTipIndex + 1) % hubTips.length;
-    renderHomeHub(_ctx.cachedProjects);
+    renderHomeHub(getCachedProjects());
   }, 15000);
 }
 
@@ -509,12 +517,12 @@ function renderHomeHubMates() {
   var container = document.getElementById("home-hub-mates");
   if (!container) return;
   container.innerHTML = "";
-  if (!_ctx.cachedMatesList || _ctx.cachedMatesList.length === 0) {
+  if (!store.get('cachedMatesList') || store.get('cachedMatesList').length === 0) {
     container.classList.add("hidden");
     return;
   }
   container.classList.remove("hidden");
-  for (var i = 0; i < _ctx.cachedMatesList.length; i++) {
+  for (var i = 0; i < store.get('cachedMatesList').length; i++) {
     (function (mate) {
       var item = document.createElement("div");
       item.className = "home-hub-mate-item" + (mate.primary ? " home-hub-mate-primary" : "");
@@ -523,7 +531,7 @@ function renderHomeHubMates() {
       avatarWrap.className = "home-hub-mate-avatar-wrap";
 
       var mp = mate.profile || {};
-      var mateAvUrl = _ctx.mateAvatarUrl(mate, 48);
+      var mateAvUrl = mateAvatarUrl(mate, 48);
       var avatar = document.createElement("img");
       avatar.className = "home-hub-mate-avatar";
       avatar.src = mateAvUrl;
@@ -549,30 +557,30 @@ function renderHomeHubMates() {
       item.appendChild(nameEl);
 
       item.addEventListener("click", function () {
-        _ctx.openDm(mate.id);
+        openDm(mate.id);
       });
 
       container.appendChild(item);
-    })(_ctx.cachedMatesList[i]);
+    })(store.get('cachedMatesList')[i]);
   }
 }
 
 export function showHomeHub() {
-  if (_ctx.dmMode) _ctx.exitDmMode();
+  if (store.get('dmMode')) exitDmMode();
   homeHubVisible = true;
   homeHub.classList.remove("hidden");
   // Show close button only if there's a project to return to
   if (hubCloseBtn) {
-    if (_ctx.currentSlug) hubCloseBtn.classList.remove("hidden");
+    if (store.get('currentSlug')) hubCloseBtn.classList.remove("hidden");
     else hubCloseBtn.classList.add("hidden");
   }
   // Fetch weather silently (once)
   fetchWeather();
   // Request cross-project schedules
-  if (_ctx.ws && _ctx.ws.readyState === 1) {
-    _ctx.ws.send(JSON.stringify({ type: "hub_schedules_list" }));
+  if (getWs() && getWs().readyState === 1) {
+    getWs().send(JSON.stringify({ type: "hub_schedules_list" }));
   }
-  renderHomeHub(_ctx.cachedProjects);
+  renderHomeHub(getCachedProjects());
   renderHomeHubMates();
   startTipRotation();
   if (document.documentElement.classList.contains("pwa-standalone")) {

package/lib/public/modules/app-loop-ui.js

@@ -19,6 +19,22 @@ var pendingIterations = 20;
 // ========================================================
 export function initLoopUi() {
 
+  // --- Reactive UI sync for loop state ---
+  store.subscribe(function (state, prev) {
+    if (state.loopActive !== prev.loopActive ||
+        state.ralphPhase !== prev.ralphPhase ||
+        state.loopIteration !== prev.loopIteration ||
+        state.loopMaxIterations !== prev.loopMaxIterations) {
+      updateLoopButton();
+    }
+    if (state.ralphPhase !== prev.ralphPhase ||
+        state.ralphCraftingSessionId !== prev.ralphCraftingSessionId ||
+        state.ralphCraftingSource !== prev.ralphCraftingSource ||
+        state.activeSessionId !== prev.activeSessionId) {
+      updateRalphBars();
+    }
+  });
+
   // --- Preview modal listeners ---
   // Backdrop click intentionally does NOT close the modal (no way to reopen it)
 
@@ -75,7 +91,7 @@ export function initLoopUi() {
 // ========================================================
 
 function syncIterationsUi() {
-  var wizData = store.getState().wizardData || {};
+  var wizData = store.get('wizardData') || {};
   var isSimple = wizData.loopMode === "simple";
   var label = isSimple ? ("Run x" + pendingIterations) : ("Start (max " + pendingIterations + ")");
 
@@ -101,7 +117,7 @@ function syncIterationsUi() {
 // ========================================================
 
 function startLoopFromUi() {
-  var basePath = store.getState().basePath;
+  var basePath = store.get('basePath');
   var stickyEl = document.getElementById("ralph-sticky");
 
   fetch(basePath + "api/git-dirty")
@@ -155,7 +171,7 @@ export function updateLoopButton() {
   var section = document.getElementById("ralph-loop-section");
   if (!section) return;
 
-  var s = store.getState();
+  var s = store.snap();
   var busy = s.loopActive || s.ralphPhase === "executing";
   var phase = busy ? "executing" : s.ralphPhase;
 
@@ -233,7 +249,7 @@ export function showLoopBanner(show) {
     return;
   }
 
-  var bannerLabel = store.getState().loopBannerName || "Loop";
+  var bannerLabel = store.get('loopBannerName') || "Loop";
   stickyEl.innerHTML =
     '<div class="ralph-sticky-inner">' +
       '<div class="ralph-sticky-header">' +
@@ -275,7 +291,7 @@ export function updateLoopBanner(iteration, maxIterations, phase) {
 
 export function updateRalphBars() {
   // Task source uses the scheduler panel, not the sticky bar
-  var s = store.getState();
+  var s = store.snap();
   var isTaskSource = s.ralphCraftingSource !== "ralph";
   var onCraftingSession = s.ralphCraftingSessionId && s.activeSessionId === s.ralphCraftingSessionId;
   // If approval phase but no craftingSessionId (recovered after server restart), show bar anyway
@@ -299,7 +315,7 @@ export function updateRalphBars() {
   }
 
   // Restore debate sticky on session switch
-  var debateStickyState = store.getState().debateStickyState;
+  var debateStickyState = store.get('debateStickyState');
   if (debateStickyState && debateStickyState.phase) {
     showDebateSticky(debateStickyState.phase, debateStickyState.msg);
   } else {
@@ -318,10 +334,10 @@ function toggleLoopPopover() {
     return;
   }
 
-  var wizData = store.getState().wizardData || {};
+  var wizData = store.get('wizardData') || {};
   var taskPreview = wizData.task || "\u2014";
   if (taskPreview.length > 120) taskPreview = taskPreview.substring(0, 120) + "\u2026";
-  var _s = store.getState();
+  var _s = store.snap();
   var statusText = "Iteration #" + _s.loopIteration + " / " + _s.loopMaxIterations;
 
   var modal = document.createElement("div");
@@ -361,7 +377,7 @@ function toggleLoopPopover() {
   modal.querySelector(".loop-status-dialog-stop").addEventListener("click", function(e) {
     e.stopPropagation();
     closeModal();
-    showConfirm("Stop the running " + (store.getState().loopBannerName || "loop") + "?", function() {
+    showConfirm("Stop the running " + (store.get('loopBannerName') || "loop") + "?", function() {
       var w = getWs();
       if (w && w.readyState === 1) {
         w.send(JSON.stringify({ type: "loop_stop" }));
@@ -413,14 +429,14 @@ export function showRalphApprovalBar(show) {
   if (!stickyEl) return;
   if (!show) {
     // Only clear if we're in approval mode (don't clobber crafting)
-    if (store.getState().ralphPhase !== "crafting") {
+    if (store.get('ralphPhase') !== "crafting") {
       stickyEl.classList.add("hidden");
       stickyEl.innerHTML = "";
     }
     return;
   }
 
-  var wizData = store.getState().wizardData || {};
+  var wizData = store.get('wizardData') || {};
   var isSimple = wizData.loopMode === "simple";
   var defaultIter = isSimple ? 5 : 20;
   pendingIterations = defaultIter;
@@ -486,9 +502,9 @@ export function updateRalphApprovalStatus() {
   var startBtn = document.querySelector(".ralph-sticky-start");
   if (!statusEl) return;
 
-  var wizData = store.getState().wizardData || {};
+  var wizData = store.get('wizardData') || {};
   var isSimple = wizData.loopMode === "simple";
-  var _rf = store.getState().ralphFilesReady;
+  var _rf = store.get('ralphFilesReady');
   var ready = isSimple ? _rf.promptReady : _rf.bothReady;
 
   if (ready) {
@@ -513,7 +529,7 @@ export function updateRalphApprovalStatus() {
 // ========================================================
 
 export function showExecModal() {
-  store.setState({ execModalShown: true });
+  store.set({ execModalShown: true });
   // Open the preview modal immediately, then request file content to fill in
   openRalphPreviewModal();
   var ws = getWs();
@@ -532,7 +548,7 @@ export function updateExecModalStatus() {
 
 export function openRalphPreviewModal() {
   // Only show for loop (ralph) source, not scheduled tasks
-  var st = store.getState();
+  var st = store.snap();
   if (st.ralphCraftingSource !== "ralph") return;
 
   var modal = document.getElementById("ralph-preview-modal");
@@ -564,7 +580,7 @@ export function openRalphPreviewModal() {
   if (comboLabel) comboLabel.textContent = isSimple ? "Run x" : "Start max";
 
   var runBtn = document.getElementById("ralph-preview-run");
-  if (runBtn) runBtn.disabled = !store.getState().ralphFilesReady.bothReady;
+  if (runBtn) runBtn.disabled = !store.get('ralphFilesReady').bothReady;
 
   _previewLoopSettings = {};
   showRalphPreviewTab("prompt");
@@ -600,7 +616,7 @@ function showRalphPreviewTab(tab) {
     return;
   }
 
-  var _rpc = store.getState().ralphPreviewContent;
+  var _rpc = store.get('ralphPreviewContent');
   var content = tab === "prompt" ? _rpc.prompt : _rpc.judge;
   if (typeof marked !== "undefined" && marked.parse) {
     body.innerHTML = '<div class="md-content">' + DOMPurify.sanitize(marked.parse(content)) + '</div>';
@@ -610,7 +626,7 @@ function showRalphPreviewTab(tab) {
 }
 
 function renderPreviewModelTab(bodyEl) {
-  var s = store.getState();
+  var s = store.snap();
 
   bodyEl.innerHTML =
     '<div class="scheduler-model-settings">' +

package/lib/public/modules/app-loop-wizard.js

@@ -131,7 +131,7 @@ function requireClayRalph(cb) {
 export function openRalphWizard(source) {
   requireClayRalph(function () {
     wizardSource = source || "ralph";
-    store.setState({ wizardData: { name: "", task: "", maxIterations: null } });
+    store.set({ wizardData: { name: "", task: "", maxIterations: null } });
     loopModeChoice = "judge";
     promptAuthor = "clay";
     judgeAuthor = "clay";
@@ -186,7 +186,7 @@ export function openRalphWizard(source) {
     if (statusEl) { statusEl.classList.add("hidden"); statusEl.innerHTML = ""; }
 
     // Reset exec modal flag
-    store.setState({ execModalShown: false });
+    store.set({ execModalShown: false });
 
     updateModePreview();
     updateWizardStep();
@@ -300,7 +300,7 @@ function collectWizardData() {
     wd.judgeText = null;
   }
 
-  store.setState({ wizardData: wd });
+  store.set({ wizardData: wd });
 }
 
 function buildWizardCron() {
@@ -357,7 +357,7 @@ function cronToHumanText(cron) {
 var LAST_STEP = 3;
 
 function validateLastStep() {
-  var wd = store.getState().wizardData;
+  var wd = store.get('wizardData');
   if (promptAuthor === "clay") {
     var taskEl = document.getElementById("ralph-task");
     if (!wd.task) {
@@ -412,9 +412,9 @@ function wizardSkip() {
 
 function wizardSubmit() {
   collectWizardData();
-  var wd = Object.assign({}, store.getState().wizardData);
+  var wd = Object.assign({}, store.get('wizardData'));
   wd.source = wizardSource === "task" ? "task" : undefined;
-  store.setState({ wizardData: wd });
+  store.set({ wizardData: wd });
   closeRalphWizard();
   var ws = getWs();
   if (ws && ws.readyState === 1) {