clay-server 2.7.0 → 2.7.1

package/lib/public/app.js

@@ -14,6 +14,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 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_-]+)/);
@@ -179,7 +180,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   var ralphPhase = "idle"; // idle | wizard | crafting | approval | executing | done
   var ralphCraftingSessionId = null;
   var wizardStep = 1;
-  var wizardData = { name: "", task: "", maxIterations: 25 };
+  var wizardData = { name: "", task: "", maxIterations: 25, cron: null };
   var ralphFilesReady = { promptReady: false, judgeReady: false, bothReady: false };
   var ralphPreviewContent = { prompt: "", judge: "" };
   var slashCommands = [];
@@ -560,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;
@@ -1052,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;
@@ -1736,6 +1745,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     if (!slug || slug === currentSlug) return;
     resetFileBrowser();
     closeArchive();
+    if (isSchedulerOpen()) closeScheduler();
     currentSlug = slug;
     basePath = "/p/" + slug + "/";
     wsPath = "/p/" + slug + "/ws";
@@ -1750,6 +1760,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     if (newSlug && newSlug !== currentSlug) {
       resetFileBrowser();
       closeArchive();
+      if (isSchedulerOpen()) closeScheduler();
       currentSlug = newSlug;
       basePath = "/p/" + newSlug + "/";
       wsPath = "/p/" + newSlug + "/ws";
@@ -1880,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();
@@ -2055,6 +2066,22 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           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;
@@ -2302,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":
@@ -2566,7 +2593,9 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
 
         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;
 
@@ -2615,6 +2644,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           ralphCraftingSessionId = msg.sessionId || activeSessionId;
           updateLoopButton();
           updateRalphBars();
+          enterCraftingMode(ralphCraftingSessionId, msg.taskId || null);
           break;
 
         case "ralph_files_status":
@@ -2626,10 +2656,15 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           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();
@@ -2779,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) ---
@@ -2853,6 +2889,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   var stickyNotesSidebarBtn = $("sticky-notes-sidebar-btn");
   if (stickyNotesSidebarBtn) {
     stickyNotesSidebarBtn.addEventListener("click", function () {
+      if (isSchedulerOpen()) closeScheduler();
       if (isArchiveOpen()) {
         closeArchive();
       } else {
@@ -2861,11 +2898,11 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     });
   }
 
-  // Close archive when switching to other sidebar panels
+  // 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 (terminalSidebarBtn) terminalSidebarBtn.addEventListener("click", function () { if (isArchiveOpen()) closeArchive(); });
+  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) {
@@ -2879,39 +2916,72 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   }
 
   function updateLoopButton() {
-    var existing = document.getElementById("loop-start-btn");
-    if (!existing) {
-      var btn = document.createElement("button");
-      btn.id = "loop-start-btn";
-      btn.innerHTML = '<i data-lucide="repeat"></i> <span>Ralph Loop</span><span class="loop-experimental"><i data-lucide="flask-conical"></i> Experimental</span>';
-      btn.title = "Start a new Ralph Loop";
-      btn.addEventListener("click", function() {
-        var busy = loopActive || ralphPhase === "executing";
-        if (busy) {
+    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 {
+        } else if (clickAction === "wizard") {
           openRalphWizard();
         }
       });
-      var sessionActions = document.getElementById("session-actions");
-      if (sessionActions) sessionActions.appendChild(btn);
-      if (typeof lucide !== "undefined") lucide.createIcons();
-      existing = btn;
     }
-    var busy = loopActive || ralphPhase === "executing";
-    var hint = existing.querySelector(".loop-busy-hint");
-    if (busy) {
-      existing.style.opacity = "";
-      existing.style.pointerEvents = "";
-      if (!hint) {
-        hint = document.createElement("span");
-        hint.className = "loop-busy-hint";
-        hint.innerHTML = iconHtml("loader", "icon-spin");
-        existing.appendChild(hint);
-        refreshIcons();
-      }
-    } else {
-      if (hint) hint.remove();
+
+    // "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");
+      });
     }
   }
 
@@ -3094,20 +3164,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     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 === 3 ? "Launch" : wizardStep === 1 ? "Get Started" : "Next";
-
-    // Build review on step 3
-    if (wizardStep === 3) {
-      collectWizardData();
-      var summary = document.getElementById("ralph-review-summary");
-      if (summary) {
-        summary.innerHTML =
-          '<div class="ralph-review-label">Name</div>' +
-          '<div class="ralph-review-value">' + escapeHtml(wizardData.name || "(empty)") + '</div>' +
-          '<div class="ralph-review-label">Task</div>' +
-          '<div class="ralph-review-value">' + escapeHtml(wizardData.task || "(empty)") + '</div>';
-      }
-    }
+    if (nextBtn) nextBtn.textContent = wizardStep === 2 ? "Launch" : "Get Started";
   }
 
   function collectWizardData() {
@@ -3117,6 +3174,59 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     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() {
@@ -3168,8 +3278,6 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
         if (taskEl) { taskEl.focus(); taskEl.style.borderColor = "#e74c3c"; setTimeout(function() { taskEl.style.borderColor = ""; }, 2000); }
         return;
       }
-    }
-    if (wizardStep === 3) {
       wizardSubmit();
       return;
     }
@@ -3186,7 +3294,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   }
 
   function wizardSkip() {
-    if (wizardStep < 3) {
+    if (wizardStep < 2) {
       wizardStep++;
       updateWizardStep();
     }
@@ -3221,6 +3329,52 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     });
   }
 
+  // --- 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");
@@ -3275,7 +3429,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           '<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="Start loop">' + iconHtml("play") + '</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>';
@@ -3412,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 () {

package/lib/public/css/loop.css

@@ -38,7 +38,68 @@
 .loop-stop-btn:hover {
   opacity: 0.85;
 }
-/* .loop-start-btn is now inside #session-actions, inherits sidebar button styles */
+/* Ralph Loop sidebar section */
+#ralph-loop-section {
+  border-left: 3px solid var(--accent);
+  background: rgba(var(--overlay-rgb), 0.03);
+  padding: 8px 12px;
+  margin: 0 8px;
+  border-radius: 6px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+.ralph-section-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ralph-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+.ralph-section-header .ralph-section-icon { display: inline-flex; color: var(--accent); }
+.ralph-section-header .ralph-section-icon .lucide { width: 13px; height: 13px; }
+.ralph-section-header .ralph-section-label { flex: 1; }
+.ralph-section-header .loop-experimental { margin-left: 0; font-size: 9.5px; }
+.ralph-section-body {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  padding-left: 2px;
+  margin-top: 2px;
+}
+.ralph-section-hint {
+  color: var(--text-muted);
+}
+.ralph-section-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ralph-section-status .lucide { width: 11px; height: 11px; }
+.ralph-section-status.crafting { color: var(--accent); }
+.ralph-section-status.ready { color: var(--success, #27ae60); font-weight: 600; }
+.ralph-section-status.running { color: var(--accent); }
+.ralph-section-status.done { color: var(--success, #27ae60); }
+.ralph-section-tasks-link {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+.ralph-section-tasks-link:hover { text-decoration: underline; }
+
+/* Section accent states */
+.ralph-section-ready { border-left-color: var(--success, #27ae60); }
+.ralph-section-running { border-left-color: var(--accent); }
+.ralph-section-done { border-left-color: var(--success, #27ae60); }
+
+/* .loop-start-btn is now inside #ralph-loop-section, inherits sidebar button styles */
 .loop-experimental {
   display: inline-flex;
   align-items: center;

package/lib/public/css/menus.css

@@ -507,6 +507,7 @@
 }
 
 #config-chip .lucide { width: 10px; height: 10px; }
+#config-chip .config-chip-icon { display: none; }
 #config-chip:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }
 #config-chip.active { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }
 
@@ -851,6 +852,10 @@
     width: auto;
     max-height: 60vh;
   }
+
+  /* Config chip: icon-only on mobile */
+  #config-chip .config-chip-icon { display: inline; width: 14px; height: 14px; }
+  #config-chip-label { display: none; }
 }
 
 

package/lib/public/css/mobile-nav.css

@@ -17,11 +17,12 @@
     left: 0;
     right: 0;
     height: calc(56px + var(--safe-bottom));
+    padding-top: 1px;
     padding-bottom: var(--safe-bottom);
     background: var(--bg);
     border-top: 1px solid var(--border);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-around;
     z-index: 200;
   }
@@ -88,33 +89,32 @@
 
   .mobile-tab { position: relative; }
 
-  /* --- Center "+" button (raised) --- */
+  /* --- Center "+" button --- */
   .mobile-tab-new {
-    flex: none;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--accent);
-    color: #fff;
+    flex: 1;
+    height: 100%;
+    background: none;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    margin-top: -12px;
-    box-shadow: 0 2px 12px rgba(var(--shadow-rgb), 0.25);
     -webkit-tap-highlight-color: transparent;
-    transition: transform 0.1s, box-shadow 0.15s;
   }
 
   .mobile-tab-new .lucide {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
+    padding: 8px;
+    box-sizing: content-box;
+    border-radius: 50%;
+    background: var(--border);
+    color: #fff;
+    transition: transform 0.1s;
   }
 
-  .mobile-tab-new:active {
+  .mobile-tab-new:active .lucide {
     transform: scale(0.92);
-    box-shadow: 0 1px 6px rgba(var(--shadow-rgb), 0.2);
   }
 
   /* --- Mobile project list items (inside sidebar) --- */