clay-server 2.6.0 → 2.7.1

package/lib/public/app.js

@@ -6,14 +6,15 @@ import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid, add
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
 import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands, sendMessage } from './modules/input.js';
 import { initQrCode } from './modules/qrcode.js';
-import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer } from './modules/filebrowser.js';
+import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer, resetFileBrowser } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
-import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted } from './modules/sticky-notes.js';
+import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, openArchive, closeArchive, isArchiveOpen } from './modules/sticky-notes.js';
 import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme } from './modules/theme.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, updateSubagentProgress, initSubagentStop, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
-import { initServerSettings, updateSettingsStats, updateSettingsModels, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleGlobalClaudeMdRead, handleGlobalClaudeMdWrite } from './modules/server-settings.js';
+import { initServerSettings, updateSettingsStats, updateSettingsModels, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleRestartResult, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleGlobalClaudeMdRead, handleGlobalClaudeMdWrite } from './modules/server-settings.js';
 import { initProjectSettings, handleInstructionsRead, handleInstructionsWrite, handleProjectEnv, handleProjectEnvSaved, isProjectSettingsOpen, handleProjectSharedEnv, handleProjectSharedEnvSaved } from './modules/project-settings.js';
 import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modules/skills.js';
+import { initScheduler, handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, openSchedulerToTab, isSchedulerOpen, closeScheduler, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './modules/scheduler.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -172,6 +173,16 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   var highlightTimer = null;
   var activeSessionId = null;
   var sessionDrafts = {};
+  var loopActive = false;
+  var loopAvailable = false;
+  var loopIteration = 0;
+  var loopMaxIterations = 0;
+  var ralphPhase = "idle"; // idle | wizard | crafting | approval | executing | done
+  var ralphCraftingSessionId = null;
+  var wizardStep = 1;
+  var wizardData = { name: "", task: "", maxIterations: 25, cron: null };
+  var ralphFilesReady = { promptReady: false, judgeReady: false, bothReady: false };
+  var ralphPreviewContent = { prompt: "", judge: "" };
   var slashCommands = [];
   // slashActiveIdx, slashFiltered, pendingImages, pendingPastes -> modules/input.js
   // pendingPermissions -> modules/tools.js
@@ -550,7 +561,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     } else if (status === "processing") {
       if (dot) { dot.classList.add("connected"); dot.classList.add("processing"); }
       processing = true;
-      setSendBtnMode("stop");
+      setSendBtnMode(inputEl.value.trim() ? "send" : "stop");
     } else {
       connected = false;
       sendBtn.disabled = true;
@@ -981,11 +992,12 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   };
 
   function resolveContextWindow(model, sdkValue) {
+    if (sdkValue) return sdkValue;
     var lc = (model || "").toLowerCase();
     for (var key in KNOWN_CONTEXT_WINDOWS) {
-      if (lc.includes(key)) return Math.max(sdkValue || 0, KNOWN_CONTEXT_WINDOWS[key]);
+      if (lc.includes(key)) return KNOWN_CONTEXT_WINDOWS[key];
     }
-    return sdkValue || 200000;
+    return 200000;
   }
 
   function contextPctClass(pct) {
@@ -994,8 +1006,8 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
 
   function updateContextPanel() {
     if (!contextUsedEl) return;
-    // Context window usage = input tokens (includes cache read/write) + output tokens
-    var used = contextData.input + contextData.output;
+    // Context window usage = input tokens only (includes cache read/write)
+    var used = contextData.input;
     var win = contextData.contextWindow;
     var pct = win > 0 ? Math.min(100, (used / win) * 100) : 0;
     var cls = contextPctClass(pct);
@@ -1041,13 +1053,21 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     contextTurnsEl.textContent = String(contextData.turns);
   }
 
-  function accumulateContext(cost, usage, modelUsage) {
+  function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens) {
     if (cost != null) contextData.cost += cost;
     // Use latest turn values (not cumulative) since each turn's input_tokens
     // already includes the full conversation context up to that point
     if (usage) {
-      contextData.input = (usage.input_tokens || usage.inputTokens || 0)
-          + (usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0);
+      // Prefer per-call input_tokens from the last stream message_start event
+      // when available — result.usage.input_tokens sums all API calls in a turn,
+      // inflating context usage when tools are involved.
+      // Falls back to the summed value for setups that don't emit message_start.
+      if (lastStreamInputTokens) {
+        contextData.input = lastStreamInputTokens;
+      } else {
+        contextData.input = (usage.input_tokens || usage.inputTokens || 0)
+            + (usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0);
+      }
       contextData.output = usage.output_tokens || usage.outputTokens || 0;
       contextData.cacheRead = usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0;
       contextData.cacheWrite = usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
@@ -1194,7 +1214,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     setActivity: function(text) { setActivity(text); },
     stopUrgentBlink: function() { stopUrgentBlink(); },
     getContextPercent: function() {
-      var used = contextData.input + contextData.output;
+      var used = contextData.input;
       var win = contextData.contextWindow;
       return win > 0 ? Math.round((used / win) * 100) : 0;
     },
@@ -1723,6 +1743,9 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   // --- Project switching (no full reload) ---
   function switchProject(slug) {
     if (!slug || slug === currentSlug) return;
+    resetFileBrowser();
+    closeArchive();
+    if (isSchedulerOpen()) closeScheduler();
     currentSlug = slug;
     basePath = "/p/" + slug + "/";
     wsPath = "/p/" + slug + "/ws";
@@ -1735,6 +1758,9 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     var m = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
     var newSlug = m ? m[1] : null;
     if (newSlug && newSlug !== currentSlug) {
+      resetFileBrowser();
+      closeArchive();
+      if (isSchedulerOpen()) closeScheduler();
       currentSlug = newSlug;
       basePath = "/p/" + newSlug + "/";
       wsPath = "/p/" + newSlug + "/ws";
@@ -1865,7 +1891,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           replayingHistory = false;
           // Restore accurate context data from the last result in full history
           if (msg.lastUsage || msg.lastModelUsage) {
-            accumulateContext(msg.lastCost, msg.lastUsage, msg.lastModelUsage);
+            accumulateContext(msg.lastCost, msg.lastUsage, msg.lastModelUsage, msg.lastStreamInputTokens);
           }
           updateContextPanel();
           updateUsagePanel();
@@ -2020,12 +2046,42 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
 
         case "skill_installed":
           handleSkillInstalled(msg);
+          // Advance ralph wizard if we were installing clay-ralph
+          if (msg.skill === "clay-ralph" && ralphSkillInstalling) {
+            ralphSkillInstalling = false;
+            ralphSkillInstalled = true;
+            if (msg.success) {
+              wizardStep = 2;
+              updateWizardStep();
+            } else {
+              var rNextBtn = document.getElementById("ralph-wizard-next");
+              if (rNextBtn) { rNextBtn.disabled = false; rNextBtn.textContent = "Get Started"; }
+              var rStatusEl = document.getElementById("ralph-install-status");
+              if (rStatusEl) { rStatusEl.innerHTML = "Failed to install skill. Try again."; }
+            }
+          }
           break;
 
         case "skill_uninstalled":
           handleSkillUninstalled(msg);
           break;
 
+        case "loop_registry_updated":
+          handleLoopRegistryUpdated(msg);
+          break;
+
+        case "schedule_run_started":
+          handleScheduleRunStarted(msg);
+          break;
+
+        case "schedule_run_finished":
+          handleScheduleRunFinished(msg);
+          break;
+
+        case "loop_scheduled":
+          handleLoopScheduled(msg);
+          break;
+
         case "input_sync":
           handleInputSync(msg.text);
           break;
@@ -2056,6 +2112,8 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           activeSessionId = msg.id;
           cliSessionId = msg.cliSessionId || null;
           resetClientState();
+          updateRalphBars();
+          updateLoopInputVisibility(msg.loop);
           // Restore draft for incoming session
           var draft = sessionDrafts[activeSessionId] || "";
           inputEl.value = draft;
@@ -2271,7 +2329,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           finalizeAssistantBlock();
           addTurnMeta(msg.cost, msg.duration);
           accumulateUsage(msg.cost, msg.usage);
-          accumulateContext(msg.cost, msg.usage, msg.modelUsage);
+          accumulateContext(msg.cost, msg.usage, msg.modelUsage, msg.lastStreamInputTokens);
           break;
 
         case "done":
@@ -2500,9 +2558,117 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           handleKeepAwakeChanged(msg);
           break;
 
+        case "restart_server_result":
+          handleRestartResult(msg);
+          break;
+
         case "shutdown_server_result":
           handleShutdownResult(msg);
           break;
+
+        // --- Ralph Loop ---
+        case "loop_available":
+          loopAvailable = msg.available;
+          loopActive = msg.active;
+          loopIteration = msg.iteration || 0;
+          loopMaxIterations = msg.maxIterations || 20;
+          updateLoopButton();
+          if (loopActive) {
+            showLoopBanner(true);
+            if (loopIteration > 0) {
+              updateLoopBanner(loopIteration, loopMaxIterations, "running");
+            }
+          }
+          break;
+
+        case "loop_started":
+          loopActive = true;
+          ralphPhase = "executing";
+          loopIteration = 0;
+          loopMaxIterations = msg.maxIterations;
+          showLoopBanner(true);
+          updateLoopButton();
+          addSystemMessage("Ralph Loop started (max " + msg.maxIterations + " iterations)", false);
+          break;
+
+        case "loop_iteration":
+          loopIteration = msg.iteration;
+          loopMaxIterations = msg.maxIterations;
+          updateLoopBanner(msg.iteration, msg.maxIterations, "running");
+          updateLoopButton();
+          addSystemMessage("Ralph Loop iteration #" + msg.iteration + " started", false);
+          break;
+
+        case "loop_judging":
+          updateLoopBanner(loopIteration, loopMaxIterations, "judging");
+          addSystemMessage("Judging iteration #" + msg.iteration + "...", false);
+          break;
+
+        case "loop_verdict":
+          addSystemMessage("Judge: " + msg.verdict.toUpperCase() + " - " + (msg.summary || ""), false);
+          break;
+
+        case "loop_stopping":
+          updateLoopBanner(loopIteration, loopMaxIterations, "stopping");
+          break;
+
+        case "loop_finished":
+          loopActive = false;
+          ralphPhase = "done";
+          showLoopBanner(false);
+          updateLoopButton();
+          var finishMsg = msg.reason === "pass"
+            ? "Ralph Loop completed successfully after " + msg.iterations + " iteration(s)."
+            : msg.reason === "max_iterations"
+              ? "Ralph Loop reached maximum iterations (" + msg.iterations + ")."
+              : msg.reason === "stopped"
+                ? "Ralph Loop stopped."
+                : "Ralph Loop ended with error.";
+          addSystemMessage(finishMsg, false);
+          break;
+
+        case "loop_error":
+          addSystemMessage("Ralph Loop error: " + msg.text, true);
+          break;
+
+        // --- Ralph Wizard / Crafting ---
+        case "ralph_phase":
+          ralphPhase = msg.phase || "idle";
+          if (msg.craftingSessionId) ralphCraftingSessionId = msg.craftingSessionId;
+          updateLoopButton();
+          updateRalphBars();
+          break;
+
+        case "ralph_crafting_started":
+          ralphPhase = "crafting";
+          ralphCraftingSessionId = msg.sessionId || activeSessionId;
+          updateLoopButton();
+          updateRalphBars();
+          enterCraftingMode(ralphCraftingSessionId, msg.taskId || null);
+          break;
+
+        case "ralph_files_status":
+          ralphFilesReady = {
+            promptReady: msg.promptReady,
+            judgeReady: msg.judgeReady,
+            bothReady: msg.bothReady,
+          };
+          if (msg.bothReady && (ralphPhase === "crafting" || ralphPhase === "approval")) {
+            ralphPhase = "approval";
+            showRalphApprovalBar(true);
+            if (isSchedulerOpen()) exitCraftingMode(msg.taskId || null);
+          }
+          updateRalphApprovalStatus();
+          break;
+
+        case "loop_registry_files_content":
+          handleLoopRegistryFiles(msg);
+          break;
+
+        case "ralph_files_content":
+          ralphPreviewContent = { prompt: msg.prompt || "", judge: msg.judge || "" };
+          openRalphPreviewModal();
+          break;
       }
   }
 
@@ -2648,6 +2814,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     resetContextData: resetContextData,
     showImageModal: showImageModal,
     hideSuggestionChips: hideSuggestionChips,
+    setSendBtnMode: setSendBtnMode,
   });
 
   // --- Notifications module (viewport, banners, notifications, debug, service worker) ---
@@ -2718,6 +2885,678 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     get connected() { return connected; },
   });
 
+  // --- Sticky Notes sidebar button (archive view) ---
+  var stickyNotesSidebarBtn = $("sticky-notes-sidebar-btn");
+  if (stickyNotesSidebarBtn) {
+    stickyNotesSidebarBtn.addEventListener("click", function () {
+      if (isSchedulerOpen()) closeScheduler();
+      if (isArchiveOpen()) {
+        closeArchive();
+      } else {
+        openArchive();
+      }
+    });
+  }
+
+  // Close archive / scheduler panel when switching to other sidebar panels
+  var fileBrowserBtn = $("file-browser-btn");
+  var terminalSidebarBtn = $("terminal-sidebar-btn");
+  if (fileBrowserBtn) fileBrowserBtn.addEventListener("click", function () { if (isArchiveOpen()) closeArchive(); if (isSchedulerOpen()) closeScheduler(); });
+  if (terminalSidebarBtn) terminalSidebarBtn.addEventListener("click", function () { if (isArchiveOpen()) closeArchive(); if (isSchedulerOpen()) closeScheduler(); });
+
+  // --- Ralph Loop UI ---
+  function updateLoopInputVisibility(loop) {
+    var inputArea = document.getElementById("input-area");
+    if (!inputArea) return;
+    if (loop && loop.active) {
+      inputArea.style.display = "none";
+    } else {
+      inputArea.style.display = "";
+    }
+  }
+
+  function updateLoopButton() {
+    var section = document.getElementById("ralph-loop-section");
+    if (!section) return;
+
+    var busy = loopActive || ralphPhase === "executing";
+    var phase = busy ? "executing" : ralphPhase;
+
+    var statusHtml = "";
+    var statusClass = "";
+    var clickAction = "wizard"; // default
+
+    if (phase === "crafting") {
+      statusHtml = '<span class="ralph-section-status crafting">' + iconHtml("loader", "icon-spin") + ' Crafting\u2026</span>';
+      clickAction = "none";
+    } else if (phase === "approval") {
+      statusHtml = '<span class="ralph-section-status ready">Ready</span>';
+      statusClass = "ralph-section-ready";
+      clickAction = "none";
+    } else if (phase === "executing") {
+      var iterText = loopIteration > 0 ? "Running \u00b7 iteration " + loopIteration + "/" + loopMaxIterations : "Starting\u2026";
+      statusHtml = '<span class="ralph-section-status running">' + iconHtml("loader", "icon-spin") + ' ' + iterText + '</span>';
+      statusClass = "ralph-section-running";
+      clickAction = "popover";
+    } else if (phase === "done") {
+      statusHtml = '<span class="ralph-section-status done">\u2713 Done</span>';
+      statusHtml += '<a href="#" class="ralph-section-tasks-link">View in Scheduled Tasks</a>';
+      statusClass = "ralph-section-done";
+      clickAction = "wizard";
+    } else {
+      // idle
+      statusHtml = '<span class="ralph-section-hint">Start a new loop</span>';
+    }
+
+    section.className = "ralph-loop-section" + (statusClass ? " " + statusClass : "");
+    section.innerHTML =
+      '<div class="ralph-section-inner">' +
+        '<div class="ralph-section-header">' +
+          '<span class="ralph-section-icon">' + iconHtml("repeat") + '</span>' +
+          '<span class="ralph-section-label">Ralph Loop</span>' +
+          '<span class="loop-experimental"><i data-lucide="flask-conical"></i> experimental</span>' +
+        '</div>' +
+        '<div class="ralph-section-body">' + statusHtml + '</div>' +
+      '</div>';
+
+    refreshIcons();
+
+    // Click handler on header
+    var header = section.querySelector(".ralph-section-header");
+    if (header) {
+      header.style.cursor = clickAction === "none" ? "default" : "pointer";
+      header.addEventListener("click", function() {
+        if (clickAction === "popover") {
+          toggleLoopPopover();
+        } else if (clickAction === "wizard") {
+          openRalphWizard();
+        }
+      });
+    }
+
+    // "View in Scheduled Tasks" link
+    var tasksLink = section.querySelector(".ralph-section-tasks-link");
+    if (tasksLink) {
+      tasksLink.addEventListener("click", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        openSchedulerToTab("library");
+      });
+    }
+  }
+
+  function toggleLoopPopover() {
+    var existing = document.getElementById("loop-status-modal");
+    if (existing) {
+      existing.remove();
+      return;
+    }
+
+    var taskPreview = wizardData.task || "—";
+    if (taskPreview.length > 120) taskPreview = taskPreview.substring(0, 120) + "\u2026";
+    var statusText = "Iteration #" + loopIteration + " / " + loopMaxIterations;
+
+    var modal = document.createElement("div");
+    modal.id = "loop-status-modal";
+    modal.className = "loop-status-modal";
+    modal.innerHTML =
+      '<div class="loop-status-backdrop"></div>' +
+      '<div class="loop-status-dialog">' +
+        '<div class="loop-status-dialog-header">' +
+          '<span class="loop-status-dialog-icon">' + iconHtml("repeat") + '</span>' +
+          '<span class="loop-status-dialog-title">Ralph Loop</span>' +
+          '<button class="loop-status-dialog-close" title="Close">' + iconHtml("x") + '</button>' +
+        '</div>' +
+        '<div class="loop-status-dialog-body">' +
+          '<div class="loop-status-dialog-row">' +
+            '<span class="loop-status-dialog-label">Progress</span>' +
+            '<span class="loop-status-dialog-value">' + escapeHtml(statusText) + '</span>' +
+          '</div>' +
+          '<div class="loop-status-dialog-row">' +
+            '<span class="loop-status-dialog-label">Task</span>' +
+            '<span class="loop-status-dialog-value loop-status-dialog-task">' + escapeHtml(taskPreview) + '</span>' +
+          '</div>' +
+        '</div>' +
+        '<div class="loop-status-dialog-footer">' +
+          '<button class="loop-status-dialog-stop">' + iconHtml("square") + ' Stop loop</button>' +
+        '</div>' +
+      '</div>';
+
+    document.body.appendChild(modal);
+    refreshIcons();
+
+    function closeModal() { modal.remove(); }
+
+    modal.querySelector(".loop-status-backdrop").addEventListener("click", closeModal);
+    modal.querySelector(".loop-status-dialog-close").addEventListener("click", closeModal);
+
+    modal.querySelector(".loop-status-dialog-stop").addEventListener("click", function(e) {
+      e.stopPropagation();
+      closeModal();
+      showConfirm("Stop the running Ralph Loop?", function() {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "loop_stop" }));
+        }
+      });
+    });
+  }
+
+  function showLoopBanner(show) {
+    var stickyEl = document.getElementById("ralph-sticky");
+    if (!stickyEl) { updateLoopButton(); return; }
+    if (!show) {
+      stickyEl.classList.add("hidden");
+      stickyEl.classList.remove("ralph-running");
+      stickyEl.innerHTML = "";
+      updateLoopButton();
+      return;
+    }
+
+    stickyEl.innerHTML =
+      '<div class="ralph-sticky-inner">' +
+        '<div class="ralph-sticky-header">' +
+          '<span class="ralph-sticky-icon">' + iconHtml("repeat") + '</span>' +
+          '<span class="ralph-sticky-label">Ralph Loop</span>' +
+          '<span class="ralph-sticky-status" id="loop-status">Starting\u2026</span>' +
+          '<button class="ralph-sticky-action ralph-sticky-stop" title="Stop loop">' + iconHtml("square") + '</button>' +
+        '</div>' +
+      '</div>';
+    stickyEl.classList.remove("hidden", "ralph-ready");
+    stickyEl.classList.add("ralph-running");
+    refreshIcons();
+
+    stickyEl.querySelector(".ralph-sticky-stop").addEventListener("click", function(e) {
+      e.stopPropagation();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "loop_stop" }));
+      }
+    });
+    updateLoopButton();
+  }
+
+  function updateLoopBanner(iteration, maxIterations, phase) {
+    var statusEl = document.getElementById("loop-status");
+    if (!statusEl) return;
+    var text = "#" + iteration + "/" + maxIterations;
+    if (phase === "judging") text += " judging\u2026";
+    else if (phase === "stopping") text = "Stopping\u2026";
+    else text += " running";
+    statusEl.textContent = text;
+  }
+
+  function updateRalphBars() {
+    var onCraftingSession = ralphCraftingSessionId && activeSessionId === ralphCraftingSessionId;
+    if (ralphPhase === "crafting" && onCraftingSession) {
+      showRalphCraftingBar(true);
+    } else {
+      showRalphCraftingBar(false);
+    }
+    if (ralphPhase === "approval" && onCraftingSession) {
+      showRalphApprovalBar(true);
+    } else {
+      showRalphApprovalBar(false);
+    }
+  }
+
+  // --- Ralph Wizard ---
+  var ralphSkillInstalled = false;
+  var ralphSkillInstalling = false;
+
+  function checkRalphSkillInstalled(cb) {
+    fetch(basePath + "api/installed-skills")
+      .then(function (res) { return res.json(); })
+      .then(function (data) {
+        var installed = data.installed || {};
+        ralphSkillInstalled = !!installed["clay-ralph"];
+        cb(ralphSkillInstalled);
+      })
+      .catch(function () { cb(false); });
+  }
+
+  function openRalphWizard() {
+    wizardData = { name: "", task: "", maxIterations: 25 };
+    ralphSkillInstalling = false;
+    var el = document.getElementById("ralph-wizard");
+    if (!el) return;
+
+    var nameEl = document.getElementById("ralph-name");
+    if (nameEl) nameEl.value = "";
+    var taskEl = document.getElementById("ralph-task");
+    if (taskEl) taskEl.value = "";
+    var iterEl = document.getElementById("ralph-max-iterations");
+    if (iterEl) iterEl.value = "25";
+
+    // Check if clay-ralph skill is installed — skip onboarding if so
+    checkRalphSkillInstalled(function (installed) {
+      wizardStep = installed ? 2 : 1;
+      el.classList.remove("hidden");
+      var statusEl = document.getElementById("ralph-install-status");
+      if (statusEl) { statusEl.classList.add("hidden"); statusEl.innerHTML = ""; }
+      updateWizardStep();
+    });
+  }
+
+  function closeRalphWizard() {
+    var el = document.getElementById("ralph-wizard");
+    if (el) el.classList.add("hidden");
+  }
+
+  function updateWizardStep() {
+    var steps = document.querySelectorAll(".ralph-step");
+    for (var i = 0; i < steps.length; i++) {
+      var stepNum = parseInt(steps[i].getAttribute("data-step"), 10);
+      if (stepNum === wizardStep) {
+        steps[i].classList.add("active");
+      } else {
+        steps[i].classList.remove("active");
+      }
+    }
+    var dots = document.querySelectorAll(".ralph-dot");
+    for (var j = 0; j < dots.length; j++) {
+      var dotStep = parseInt(dots[j].getAttribute("data-step"), 10);
+      dots[j].classList.remove("active", "done");
+      if (dotStep === wizardStep) dots[j].classList.add("active");
+      else if (dotStep < wizardStep) dots[j].classList.add("done");
+    }
+
+    var backBtn = document.getElementById("ralph-wizard-back");
+    var skipBtn = document.getElementById("ralph-wizard-skip");
+    var nextBtn = document.getElementById("ralph-wizard-next");
+    if (backBtn) backBtn.style.visibility = wizardStep === 1 ? "hidden" : "visible";
+    if (skipBtn) skipBtn.style.display = "none";
+    if (nextBtn) nextBtn.textContent = wizardStep === 2 ? "Launch" : "Get Started";
+  }
+
+  function collectWizardData() {
+    var nameEl = document.getElementById("ralph-name");
+    var taskEl = document.getElementById("ralph-task");
+    var iterEl = document.getElementById("ralph-max-iterations");
+    wizardData.name = nameEl ? nameEl.value.replace(/[^a-zA-Z0-9_-]/g, "").trim() : "";
+    wizardData.task = taskEl ? taskEl.value.trim() : "";
+    wizardData.maxIterations = iterEl ? parseInt(iterEl.value, 10) || 25 : 25;
+    wizardData.cron = null;
+  }
+
+  function buildWizardCron() {
+    var repeatEl = document.getElementById("ralph-repeat");
+    if (!repeatEl) return null;
+    var preset = repeatEl.value;
+    if (preset === "none") return null;
+
+    var timeEl = document.getElementById("ralph-time");
+    var timeVal = timeEl ? timeEl.value : "09:00";
+    var timeParts = timeVal.split(":");
+    var hour = parseInt(timeParts[0], 10) || 9;
+    var minute = parseInt(timeParts[1], 10) || 0;
+
+    if (preset === "daily") return minute + " " + hour + " * * *";
+    if (preset === "weekdays") return minute + " " + hour + " * * 1-5";
+    if (preset === "weekly") return minute + " " + hour + " * * " + new Date().getDay();
+    if (preset === "monthly") return minute + " " + hour + " " + new Date().getDate() + " * *";
+
+    if (preset === "custom") {
+      var unitEl = document.getElementById("ralph-repeat-unit");
+      var unit = unitEl ? unitEl.value : "day";
+      if (unit === "day") return minute + " " + hour + " * * *";
+      if (unit === "month") return minute + " " + hour + " " + new Date().getDate() + " * *";
+      // week: collect selected days
+      var dowBtns = document.querySelectorAll("#ralph-custom-repeat .sched-dow-btn.active");
+      var days = [];
+      for (var i = 0; i < dowBtns.length; i++) {
+        days.push(dowBtns[i].dataset.dow);
+      }
+      if (days.length === 0) days.push(String(new Date().getDay()));
+      return minute + " " + hour + " * * " + days.join(",");
+    }
+    return null;
+  }
+
+  function cronToHumanText(cron) {
+    if (!cron) return "";
+    var parts = cron.trim().split(/\s+/);
+    if (parts.length !== 5) return cron;
+    var m = parts[0], h = parts[1], dom = parts[2], dow = parts[4];
+    var pad = function(n) { return (parseInt(n,10) < 10 ? "0" : "") + parseInt(n,10); };
+    var t = pad(h) + ":" + pad(m);
+    var dayNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+    if (dow === "*" && dom === "*") return "Every day at " + t;
+    if (dow === "1-5" && dom === "*") return "Weekdays at " + t;
+    if (dom !== "*" && dow === "*") return "Monthly on day " + dom + " at " + t;
+    if (dow !== "*" && dom === "*") {
+      var ds = dow.split(",").map(function(d) { return dayNames[parseInt(d,10)] || d; });
+      return "Every " + ds.join(", ") + " at " + t;
+    }
+    return cron;
+  }
+
+  function wizardNext() {
+    collectWizardData();
+
+    // Step 1: install clay-ralph skill if needed, otherwise just advance
+    if (wizardStep === 1) {
+      if (ralphSkillInstalled) {
+        wizardStep++;
+        updateWizardStep();
+        return;
+      }
+      if (ralphSkillInstalling) return;
+      ralphSkillInstalling = true;
+      var nextBtn = document.getElementById("ralph-wizard-next");
+      if (nextBtn) {
+        nextBtn.disabled = true;
+        nextBtn.textContent = "Installing...";
+      }
+      var statusEl = document.getElementById("ralph-install-status");
+      if (statusEl) {
+        statusEl.classList.remove("hidden");
+        statusEl.innerHTML = '<div class="skills-spinner small"></div> Installing clay-ralph skill...';
+      }
+      fetch(basePath + "api/install-skill", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: "https://github.com/chadbyte/clay-ralph", skill: "clay-ralph", scope: "global" }),
+      })
+        .then(function () {
+          // Wait for skill_installed websocket message to advance
+        })
+        .catch(function () {
+          ralphSkillInstalling = false;
+          if (nextBtn) { nextBtn.disabled = false; nextBtn.textContent = "Get Started"; }
+          if (statusEl) { statusEl.innerHTML = "Failed to install skill. Try again."; }
+        });
+      return;
+    }
+
+    if (wizardStep === 2) {
+      var nameEl = document.getElementById("ralph-name");
+      var taskEl = document.getElementById("ralph-task");
+      if (!wizardData.name) {
+        if (nameEl) { nameEl.focus(); nameEl.style.borderColor = "#e74c3c"; setTimeout(function() { nameEl.style.borderColor = ""; }, 2000); }
+        return;
+      }
+      if (!wizardData.task) {
+        if (taskEl) { taskEl.focus(); taskEl.style.borderColor = "#e74c3c"; setTimeout(function() { taskEl.style.borderColor = ""; }, 2000); }
+        return;
+      }
+      wizardSubmit();
+      return;
+    }
+    wizardStep++;
+    updateWizardStep();
+  }
+
+  function wizardBack() {
+    if (wizardStep > 1) {
+      collectWizardData();
+      wizardStep--;
+      updateWizardStep();
+    }
+  }
+
+  function wizardSkip() {
+    if (wizardStep < 2) {
+      wizardStep++;
+      updateWizardStep();
+    }
+  }
+
+  function wizardSubmit() {
+    collectWizardData();
+    closeRalphWizard();
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "ralph_wizard_complete", data: wizardData }));
+    }
+  }
+
+  // Wizard button listeners
+  var wizardCloseBtn = document.getElementById("ralph-wizard-close");
+  var wizardBackdrop = document.querySelector(".ralph-wizard-backdrop");
+  var wizardBackBtn = document.getElementById("ralph-wizard-back");
+  var wizardSkipBtn = document.getElementById("ralph-wizard-skip");
+  var wizardNextBtn = document.getElementById("ralph-wizard-next");
+
+  if (wizardCloseBtn) wizardCloseBtn.addEventListener("click", closeRalphWizard);
+  if (wizardBackdrop) wizardBackdrop.addEventListener("click", closeRalphWizard);
+  if (wizardBackBtn) wizardBackBtn.addEventListener("click", wizardBack);
+  if (wizardSkipBtn) wizardSkipBtn.addEventListener("click", wizardSkip);
+  if (wizardNextBtn) wizardNextBtn.addEventListener("click", wizardNext);
+
+  // Enforce alphanumeric + hyphens + underscores on name input
+  var wizardNameEl = document.getElementById("ralph-name");
+  if (wizardNameEl) {
+    wizardNameEl.addEventListener("input", function() {
+      this.value = this.value.replace(/[^a-zA-Z0-9_-]/g, "");
+    });
+  }
+
+  // --- Repeat picker handlers ---
+  var repeatSelect = document.getElementById("ralph-repeat");
+  var repeatTimeRow = document.getElementById("ralph-time-row");
+  var repeatCustom = document.getElementById("ralph-custom-repeat");
+  var repeatUnitSelect = document.getElementById("ralph-repeat-unit");
+  var repeatDowRow = document.getElementById("ralph-custom-dow-row");
+  var cronPreview = document.getElementById("ralph-cron-preview");
+
+  function updateRepeatUI() {
+    if (!repeatSelect) return;
+    var val = repeatSelect.value;
+    var isScheduled = val !== "none";
+    if (repeatTimeRow) repeatTimeRow.style.display = isScheduled ? "" : "none";
+    if (repeatCustom) repeatCustom.style.display = val === "custom" ? "" : "none";
+    if (cronPreview) cronPreview.style.display = isScheduled ? "" : "none";
+    if (isScheduled) {
+      var cron = buildWizardCron();
+      var humanEl = document.getElementById("ralph-cron-human");
+      var cronEl = document.getElementById("ralph-cron-expr");
+      if (humanEl) humanEl.textContent = cronToHumanText(cron);
+      if (cronEl) cronEl.textContent = cron || "";
+    }
+  }
+
+  if (repeatSelect) {
+    repeatSelect.addEventListener("change", updateRepeatUI);
+  }
+  if (repeatUnitSelect) {
+    repeatUnitSelect.addEventListener("change", function () {
+      if (repeatDowRow) repeatDowRow.style.display = this.value === "week" ? "" : "none";
+      updateRepeatUI();
+    });
+  }
+
+  var timeInput = document.getElementById("ralph-time");
+  if (timeInput) timeInput.addEventListener("change", updateRepeatUI);
+
+  // DOW buttons in custom repeat
+  var customDowBtns = document.querySelectorAll("#ralph-custom-repeat .sched-dow-btn");
+  for (var di = 0; di < customDowBtns.length; di++) {
+    customDowBtns[di].addEventListener("click", function () {
+      this.classList.toggle("active");
+      updateRepeatUI();
+    });
+  }
+
+  // --- Ralph Sticky (title-bar island) ---
+  function showRalphCraftingBar(show) {
+    var stickyEl = document.getElementById("ralph-sticky");
+    if (!stickyEl) return;
+    if (!show) {
+      stickyEl.classList.add("hidden");
+      stickyEl.innerHTML = "";
+      return;
+    }
+    stickyEl.innerHTML =
+      '<div class="ralph-sticky-inner">' +
+        '<div class="ralph-sticky-header">' +
+          '<span class="ralph-sticky-icon">' + iconHtml("repeat") + '</span>' +
+          '<span class="ralph-sticky-label">Ralph</span>' +
+          '<span class="ralph-sticky-status">' + iconHtml("loader", "icon-spin") + ' Preparing\u2026</span>' +
+          '<button class="ralph-sticky-cancel" title="Cancel">' + iconHtml("x") + '</button>' +
+        '</div>' +
+      '</div>';
+    stickyEl.classList.remove("hidden");
+    refreshIcons();
+
+    var cancelBtn = stickyEl.querySelector(".ralph-sticky-cancel");
+    if (cancelBtn) {
+      cancelBtn.addEventListener("click", function(e) {
+        e.stopPropagation();
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "ralph_cancel_crafting" }));
+        }
+        showRalphCraftingBar(false);
+        showRalphApprovalBar(false);
+      });
+    }
+  }
+
+  // --- Ralph Approval Bar (also uses sticky island) ---
+  function showRalphApprovalBar(show) {
+    var stickyEl = document.getElementById("ralph-sticky");
+    if (!stickyEl) return;
+    if (!show) {
+      // Only clear if we're in approval mode (don't clobber crafting)
+      if (ralphPhase !== "crafting") {
+        stickyEl.classList.add("hidden");
+        stickyEl.innerHTML = "";
+      }
+      return;
+    }
+
+    stickyEl.innerHTML =
+      '<div class="ralph-sticky-inner">' +
+        '<div class="ralph-sticky-header" id="ralph-sticky-header">' +
+          '<span class="ralph-sticky-icon">' + iconHtml("repeat") + '</span>' +
+          '<span class="ralph-sticky-label">Ralph</span>' +
+          '<span class="ralph-sticky-status" id="ralph-sticky-status">Ready</span>' +
+          '<button class="ralph-sticky-action ralph-sticky-preview" title="Preview files">' + iconHtml("eye") + '</button>' +
+          '<button class="ralph-sticky-action ralph-sticky-start" title="' + (wizardData.cron ? 'Schedule' : 'Start loop') + '">' + iconHtml(wizardData.cron ? "calendar-clock" : "play") + '</button>' +
+          '<button class="ralph-sticky-action ralph-sticky-dismiss" title="Cancel and discard">' + iconHtml("x") + '</button>' +
+        '</div>' +
+      '</div>';
+    stickyEl.classList.remove("hidden");
+    refreshIcons();
+
+    stickyEl.querySelector(".ralph-sticky-preview").addEventListener("click", function(e) {
+      e.stopPropagation();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "ralph_preview_files" }));
+      }
+    });
+
+    stickyEl.querySelector(".ralph-sticky-start").addEventListener("click", function(e) {
+      e.stopPropagation();
+      // Check for uncommitted changes before starting
+      fetch(basePath + "api/git-dirty")
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+          if (data.dirty) {
+            showConfirm("You have uncommitted changes. Ralph Loop uses git diff to track progress \u2014 uncommitted files may cause unexpected results.\n\nStart anyway?", function () {
+              if (ws && ws.readyState === 1) {
+                ws.send(JSON.stringify({ type: "loop_start" }));
+              }
+              stickyEl.classList.add("hidden");
+              stickyEl.innerHTML = "";
+            });
+          } else {
+            if (ws && ws.readyState === 1) {
+              ws.send(JSON.stringify({ type: "loop_start" }));
+            }
+            stickyEl.classList.add("hidden");
+            stickyEl.innerHTML = "";
+          }
+        })
+        .catch(function () {
+          // If check fails, just start
+          if (ws && ws.readyState === 1) {
+            ws.send(JSON.stringify({ type: "loop_start" }));
+          }
+          stickyEl.classList.add("hidden");
+          stickyEl.innerHTML = "";
+        });
+    });
+
+    stickyEl.querySelector(".ralph-sticky-dismiss").addEventListener("click", function(e) {
+      e.stopPropagation();
+      showConfirm("Discard this Ralph Loop setup?", function() {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "ralph_wizard_cancel" }));
+        }
+        stickyEl.classList.add("hidden");
+        stickyEl.classList.remove("ralph-ready");
+        stickyEl.innerHTML = "";
+      });
+    });
+
+    updateRalphApprovalStatus();
+  }
+
+  function updateRalphApprovalStatus() {
+    var stickyEl = document.getElementById("ralph-sticky");
+    var statusEl = document.getElementById("ralph-sticky-status");
+    var startBtn = document.querySelector(".ralph-sticky-start");
+    if (!statusEl) return;
+
+    if (ralphFilesReady.bothReady) {
+      statusEl.textContent = "Ready";
+      if (startBtn) startBtn.disabled = false;
+      if (stickyEl) stickyEl.classList.add("ralph-ready");
+    } else if (ralphFilesReady.promptReady || ralphFilesReady.judgeReady) {
+      statusEl.textContent = "Partial\u2026";
+      if (startBtn) startBtn.disabled = true;
+      if (stickyEl) stickyEl.classList.remove("ralph-ready");
+    } else {
+      statusEl.textContent = "Waiting\u2026";
+      if (startBtn) startBtn.disabled = true;
+      if (stickyEl) stickyEl.classList.remove("ralph-ready");
+    }
+  }
+
+  // --- Ralph Preview Modal ---
+  function openRalphPreviewModal() {
+    var modal = document.getElementById("ralph-preview-modal");
+    if (!modal) return;
+    modal.classList.remove("hidden");
+    showRalphPreviewTab("prompt");
+  }
+
+  function closeRalphPreviewModal() {
+    var modal = document.getElementById("ralph-preview-modal");
+    if (modal) modal.classList.add("hidden");
+  }
+
+  function showRalphPreviewTab(tab) {
+    var tabs = document.querySelectorAll(".ralph-tab");
+    for (var i = 0; i < tabs.length; i++) {
+      if (tabs[i].getAttribute("data-tab") === tab) {
+        tabs[i].classList.add("active");
+      } else {
+        tabs[i].classList.remove("active");
+      }
+    }
+    var body = document.getElementById("ralph-preview-body");
+    if (!body) return;
+    var content = tab === "prompt" ? ralphPreviewContent.prompt : ralphPreviewContent.judge;
+    if (typeof marked !== "undefined" && marked.parse) {
+      body.innerHTML = DOMPurify.sanitize(marked.parse(content));
+    } else {
+      body.textContent = content;
+    }
+  }
+
+  // Preview modal listeners
+  var previewCloseBtn = document.getElementById("ralph-preview-close");
+  if (previewCloseBtn) previewCloseBtn.addEventListener("click", closeRalphPreviewModal);
+
+  var previewBackdrop = document.querySelector("#ralph-preview-modal .confirm-backdrop");
+  if (previewBackdrop) previewBackdrop.addEventListener("click", closeRalphPreviewModal);
+
+  var previewTabs = document.querySelectorAll(".ralph-tab");
+  for (var ti = 0; ti < previewTabs.length; ti++) {
+    previewTabs[ti].addEventListener("click", function() {
+      showRalphPreviewTab(this.getAttribute("data-tab"));
+    });
+  }
+
   // --- Skills ---
   initSkills({
     get ws() { return ws; },
@@ -2727,6 +3566,15 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     sendTerminalCommand: function (cmd) { sendTerminalCommand(cmd); },
   });
 
+  // --- Scheduler ---
+  initScheduler({
+    get ws() { return ws; },
+    get connected() { return connected; },
+    get activeSessionId() { return activeSessionId; },
+    basePath: basePath,
+    openRalphWizard: function () { openRalphWizard(); },
+  });
+
   // --- Remove project ---
   function confirmRemoveProject(slug, name) {
     showConfirm("Remove project \"" + name + "\"?", function () {