clay-server 2.7.2 → 2.8.0

package/lib/public/app.js

@@ -1,6 +1,6 @@
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
-import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal } from './modules/markdown.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal, parseEmojis } from './modules/markdown.js';
 import { initSidebar, renderSessionList, handleSearchResults, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, populateCliSessionList, renderIconStrip, initIconStrip, getEmojiCategories } from './modules/sidebar.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid, addRewindButton } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
@@ -14,6 +14,11 @@ 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, resetScheduler, handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, openSchedulerToTab, isSchedulerOpen, closeScheduler, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles, getUpcomingSchedules } from './modules/scheduler.js';
+import { initAsciiLogo, startLogoAnimation, stopLogoAnimation } from './modules/ascii-logo.js';
+import { initPlaybook, openPlaybook, getPlaybooks, getPlaybookForTip, isCompleted as isPlaybookCompleted } from './modules/playbook.js';
+import { initSTT } from './modules/stt.js';
+import { initProfile } from './modules/profile.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -43,6 +48,532 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   var imagePreviewBar = $("image-preview-bar");
   var connectOverlay = $("connect-overlay");
 
+  // --- Home Hub ---
+  var homeHub = $("home-hub");
+  var homeHubVisible = false;
+  var hubSchedules = [];
+
+  var hubTips = [
+    "Sticky notes let you pin important info that persists across sessions.",
+    "You can run terminal commands directly from the terminal tab — no need to switch windows.",
+    "Rename your sessions to keep conversations organized and easy to find later.",
+    "The file browser lets you explore and open any file in your project.",
+    "Paste images from your clipboard into the chat to include them in your message.",
+    "Use /commands (slash commands) for quick access to common actions.",
+    "You can resize the sidebar by dragging its edge.",
+    "Click the session info button in the header to see token usage and costs.",
+    "You can switch between projects without losing your conversation history.",
+    "The status dot on project icons shows whether Claude is currently processing.",
+    "Right-click on a project icon for quick actions like rename or delete.",
+    "Push notifications can alert you when Claude finishes a long task.",
+    "You can search through your conversation history within a session.",
+    "Session history is preserved — come back anytime to continue where you left off.",
+    "Use the rewind feature to go back to an earlier point in your conversation.",
+    "You can open multiple terminal tabs for parallel command execution.",
+    "Clay works offline as a PWA — install it from your browser for quick access.",
+    "Schedule recurring tasks with cron expressions to automate your workflow.",
+    "Use Ralph Loops to run autonomous coding sessions while you're away.",
+    "Right-click a project icon to set a custom emoji — make each project instantly recognizable.",
+    "Multiple people can connect to the same project at once — great for pair programming.",
+    "Drag and drop project icons to reorder them in the sidebar.",
+    "Drag a project icon to the trash to delete it.",
+    "Honey never spoils. 🍯",
+    "The Earth is round. 🌍",
+    "Computers use electricity. 🔌",
+    "Christmas is in summer in some countries. 🎄",
+  ];
+  // Fisher-Yates shuffle
+  for (var _si = hubTips.length - 1; _si > 0; _si--) {
+    var _sj = Math.floor(Math.random() * (_si + 1));
+    var _tmp = hubTips[_si];
+    hubTips[_si] = hubTips[_sj];
+    hubTips[_sj] = _tmp;
+  }
+  var hubTipIndex = 0;
+  var hubTipTimer = null;
+
+  var DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  var WEEKDAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+  // --- Weather (hidden detail) ---
+  var weatherEmoji = null;   // null = not yet fetched, "" = failed
+  var weatherCondition = "";  // e.g. "Light rain, Auckland"
+  var weatherFetchedAt = 0;
+  var WEATHER_CACHE_MS = 60 * 60 * 1000; // 1 hour
+  // WMO weather code → emoji + description
+  var WMO_MAP = {
+    0: ["☀️", "Clear sky"], 1: ["🌤", "Mainly clear"], 2: ["⛅", "Partly cloudy"], 3: ["☁️", "Overcast"],
+    45: ["🌫", "Fog"], 48: ["🌫", "Depositing rime fog"],
+    51: ["🌦", "Light drizzle"], 53: ["🌦", "Moderate drizzle"], 55: ["🌧", "Dense drizzle"],
+    56: ["🌧", "Light freezing drizzle"], 57: ["🌧", "Dense freezing drizzle"],
+    61: ["🌧", "Slight rain"], 63: ["🌧", "Moderate rain"], 65: ["🌧", "Heavy rain"],
+    66: ["🌧", "Light freezing rain"], 67: ["🌧", "Heavy freezing rain"],
+    71: ["🌨", "Slight snow"], 73: ["🌨", "Moderate snow"], 75: ["❄️", "Heavy snow"],
+    77: ["🌨", "Snow grains"],
+    80: ["🌦", "Slight rain showers"], 81: ["🌧", "Moderate rain showers"], 82: ["🌧", "Violent rain showers"],
+    85: ["🌨", "Slight snow showers"], 86: ["❄️", "Heavy snow showers"],
+    95: ["⛈", "Thunderstorm"], 96: ["⛈", "Thunderstorm with slight hail"], 99: ["⛈", "Thunderstorm with heavy hail"],
+  };
+
+  function fetchWeather() {
+    // Use cache if we have a successful result within the last hour
+    if (weatherEmoji && weatherFetchedAt && (Date.now() - weatherFetchedAt < WEATHER_CACHE_MS)) return;
+    // Try localStorage cache
+    if (!weatherEmoji) {
+      try {
+        var cached = JSON.parse(localStorage.getItem("clay-weather") || "null");
+        if (cached && cached.emoji && (Date.now() - cached.ts < WEATHER_CACHE_MS)) {
+          weatherEmoji = cached.emoji;
+          weatherCondition = cached.condition || "";
+          weatherFetchedAt = cached.ts;
+          if (homeHubVisible) updateGreetingWeather();
+          return;
+        }
+      } catch (e) {}
+    }
+    if (weatherFetchedAt && (Date.now() - weatherFetchedAt < 30000)) return; // don't retry within 30s
+    weatherFetchedAt = Date.now();
+    // Step 1: IP geolocation → lat/lon + city
+    fetch("https://ipapi.co/json/", { signal: AbortSignal.timeout(4000) })
+      .then(function (res) { return res.ok ? res.json() : Promise.reject(); })
+      .then(function (geo) {
+        var lat = geo.latitude;
+        var lon = geo.longitude;
+        var city = geo.city || geo.region || "";
+        var country = geo.country_name || "";
+        var locationStr = city + (country ? ", " + country : "");
+        // Step 2: Open-Meteo → current weather
+        var meteoUrl = "https://api.open-meteo.com/v1/forecast?latitude=" + lat + "&longitude=" + lon + "&current=weather_code&timezone=auto";
+        return fetch(meteoUrl, { signal: AbortSignal.timeout(4000) })
+          .then(function (res) { return res.ok ? res.json() : Promise.reject(); })
+          .then(function (data) {
+            var code = data && data.current && data.current.weather_code;
+            if (code === undefined || code === null) return;
+            var mapped = WMO_MAP[code] || WMO_MAP[0];
+            weatherEmoji = mapped[0];
+            weatherCondition = mapped[1] + (locationStr ? " in " + locationStr : "");
+            weatherFetchedAt = Date.now();
+            try {
+              localStorage.setItem("clay-weather", JSON.stringify({
+                emoji: weatherEmoji, condition: weatherCondition, ts: weatherFetchedAt
+              }));
+            } catch (e) {}
+            if (homeHubVisible) updateGreetingWeather();
+          });
+      })
+      .catch(function () {
+        if (!weatherEmoji) weatherEmoji = "";
+      });
+  }
+
+  var SLOT_EMOJIS = ["☀️", "🌤", "⛅", "☁️", "🌧", "🌦", "⛈", "🌨", "❄️", "🌫", "🌙", "✨"];
+  var weatherSlotPlayed = false;
+
+  function updateGreetingWeather() {
+    var greetEl = $("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) {
+      weatherSlotPlayed = true;
+      playWeatherSlot(greetEl);
+      return;
+    }
+    // Normal update (no animation)
+    greetEl.textContent = getGreeting();
+    parseEmojis(greetEl);
+    applyWeatherTooltip(greetEl);
+  }
+
+  function applyWeatherTooltip(greetEl) {
+    if (!weatherCondition) return;
+    var emojis = greetEl.querySelectorAll("img.emoji");
+    var lastEmoji = emojis.length > 0 ? emojis[emojis.length - 1] : null;
+    if (lastEmoji) {
+      lastEmoji.title = weatherCondition;
+      lastEmoji.style.cursor = "default";
+    }
+  }
+
+  function playWeatherSlot(greetEl) {
+    var h = new Date().getHours();
+    var prefix;
+    if (h < 6) prefix = "Good night";
+    else if (h < 12) prefix = "Good morning";
+    else if (h < 18) prefix = "Good afternoon";
+    else prefix = "Good evening";
+
+    // Build schedule: fast ticks → slow ticks → land (~3s total)
+    var intervals = [50, 50, 50, 60, 70, 80, 100, 120, 150, 190, 240, 300, 370, 450, 530, 640];
+    var totalSteps = intervals.length;
+    var step = 0;
+    var startIdx = Math.floor(Math.random() * SLOT_EMOJIS.length);
+
+    function tick() {
+      if (step < totalSteps) {
+        var idx = (startIdx + step) % SLOT_EMOJIS.length;
+        greetEl.textContent = prefix + " " + SLOT_EMOJIS[idx];
+        parseEmojis(greetEl);
+        step++;
+        setTimeout(tick, intervals[step - 1]);
+      } else {
+        // Final: land on actual weather
+        greetEl.textContent = prefix + " " + weatherEmoji;
+        parseEmojis(greetEl);
+        applyWeatherTooltip(greetEl);
+      }
+    }
+    tick();
+  }
+
+  function getGreeting() {
+    var h = new Date().getHours();
+    var emoji = weatherEmoji || "";
+    // Fallback to time-based emoji if weather not available
+    if (!emoji) {
+      if (h < 6) emoji = "✨";
+      else if (h < 12) emoji = "☀️";
+      else if (h < 18) emoji = "🌤";
+      else emoji = "🌙";
+    }
+    var prefix;
+    if (h < 6) prefix = "Good night";
+    else if (h < 12) prefix = "Good morning";
+    else if (h < 18) prefix = "Good afternoon";
+    else prefix = "Good evening";
+    return prefix + " " + emoji;
+  }
+
+  function getFormattedDate() {
+    var now = new Date();
+    return WEEKDAY_NAMES[now.getDay()] + ", " + MONTH_NAMES[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear();
+  }
+
+  function formatScheduleTime(ts) {
+    var d = new Date(ts);
+    var now = new Date();
+    var todayStr = now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0") + "-" + String(now.getDate()).padStart(2, "0");
+    var schedStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+    var h = d.getHours();
+    var m = String(d.getMinutes()).padStart(2, "0");
+    var ampm = h >= 12 ? "PM" : "AM";
+    var h12 = h % 12 || 12;
+    var timeStr = h12 + ":" + m + " " + ampm;
+    if (schedStr === todayStr) return timeStr;
+    // Tomorrow check
+    var tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    var tomStr = tomorrow.getFullYear() + "-" + String(tomorrow.getMonth() + 1).padStart(2, "0") + "-" + String(tomorrow.getDate()).padStart(2, "0");
+    if (schedStr === tomStr) return "Tomorrow";
+    return DAY_NAMES[d.getDay()] + " " + timeStr;
+  }
+
+  function renderHomeHub(projects) {
+    // Greeting + weather tooltip
+    updateGreetingWeather();
+
+    // Date
+    var dateEl = $("hub-greeting-date");
+    if (dateEl) dateEl.textContent = getFormattedDate();
+
+    // --- Upcoming tasks ---
+    var upcomingList = $("hub-upcoming-list");
+    var upcomingCount = $("hub-upcoming-count");
+    if (upcomingList) {
+      var now = Date.now();
+      var upcoming = hubSchedules.filter(function (s) {
+        return s.enabled && s.nextRunAt && s.nextRunAt > now;
+      }).sort(function (a, b) {
+        return a.nextRunAt - b.nextRunAt;
+      });
+      // Show up to next 48 hours
+      var cutoff = now + 48 * 60 * 60 * 1000;
+      var filtered = upcoming.filter(function (s) { return s.nextRunAt <= cutoff; });
+
+      if (upcomingCount) {
+        upcomingCount.textContent = filtered.length > 0 ? filtered.length : "";
+      }
+
+      upcomingList.innerHTML = "";
+      if (filtered.length === 0) {
+        // Empty state with CTA
+        var emptyDiv = document.createElement("div");
+        emptyDiv.className = "hub-upcoming-empty";
+        emptyDiv.innerHTML = '<div class="hub-upcoming-empty-icon">📋</div>' +
+          '<div class="hub-upcoming-empty-text">No upcoming tasks</div>' +
+          '<button class="hub-upcoming-cta" id="hub-upcoming-cta">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>' +
+          'Create a schedule</button>';
+        upcomingList.appendChild(emptyDiv);
+        var ctaBtn = emptyDiv.querySelector("#hub-upcoming-cta");
+        if (ctaBtn) {
+          ctaBtn.addEventListener("click", function () {
+            hideHomeHub();
+            openSchedulerToTab("calendar");
+          });
+        }
+      } else {
+        var maxShow = 5;
+        var shown = filtered.slice(0, maxShow);
+        for (var i = 0; i < shown.length; i++) {
+          (function (sched) {
+            var item = document.createElement("div");
+            item.className = "hub-upcoming-item";
+            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">' + escapeHtml(sched.name || "Untitled") + '</span>' +
+              '<span class="hub-upcoming-project">' + escapeHtml(sched.projectTitle || "") + '</span>';
+            item.addEventListener("click", function () {
+              if (sched.projectSlug) {
+                switchProject(sched.projectSlug);
+                setTimeout(function () {
+                  openSchedulerToTab("library");
+                }, 300);
+              }
+            });
+            upcomingList.appendChild(item);
+          })(shown[i]);
+        }
+        if (filtered.length > maxShow) {
+          var moreEl = document.createElement("div");
+          moreEl.className = "hub-upcoming-more";
+          moreEl.textContent = "+" + (filtered.length - maxShow) + " more";
+          upcomingList.appendChild(moreEl);
+        }
+      }
+    }
+
+    // --- Projects summary ---
+    var projectsList = $("hub-projects-list");
+    if (projectsList && projects) {
+      projectsList.innerHTML = "";
+      for (var p = 0; p < projects.length; p++) {
+        (function (proj) {
+          var item = document.createElement("div");
+          item.className = "hub-project-item";
+          var dotClass = "hub-project-dot" + (proj.isProcessing ? " processing" : "");
+          var iconHtml = proj.icon ? '<span class="hub-project-icon">' + proj.icon + '</span>' : '';
+          var sessionsLabel = typeof proj.sessions === "number" ? proj.sessions : "";
+          item.innerHTML = '<span class="' + dotClass + '"></span>' +
+            iconHtml +
+            '<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 () {
+            switchProject(proj.slug);
+          });
+          projectsList.appendChild(item);
+        })(projects[p]);
+      }
+      // Render emoji icons
+      parseEmojis(projectsList);
+    }
+
+    // --- Week strip ---
+    var weekStrip = $("hub-week-strip");
+    if (weekStrip) {
+      weekStrip.innerHTML = "";
+      var today = new Date();
+      var todayDate = today.getDate();
+      var todayMonth = today.getMonth();
+      var todayYear = today.getFullYear();
+      // Find Monday of current week
+      var dayOfWeek = today.getDay();
+      var mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+      var monday = new Date(today);
+      monday.setDate(today.getDate() + mondayOffset);
+
+      // Build set of dates that have events
+      var eventDates = {};
+      for (var si = 0; si < hubSchedules.length; si++) {
+        var sched = hubSchedules[si];
+        if (!sched.enabled) continue;
+        if (sched.nextRunAt) {
+          var sd = new Date(sched.nextRunAt);
+          var key = sd.getFullYear() + "-" + sd.getMonth() + "-" + sd.getDate();
+          eventDates[key] = (eventDates[key] || 0) + 1;
+        }
+        if (sched.date) {
+          var parts = sched.date.split("-");
+          var dateKey = parseInt(parts[0], 10) + "-" + (parseInt(parts[1], 10) - 1) + "-" + parseInt(parts[2], 10);
+          eventDates[dateKey] = (eventDates[dateKey] || 0) + 1;
+        }
+      }
+
+      for (var d = 0; d < 7; d++) {
+        var dayDate = new Date(monday);
+        dayDate.setDate(monday.getDate() + d);
+        var isToday = dayDate.getDate() === todayDate && dayDate.getMonth() === todayMonth && dayDate.getFullYear() === todayYear;
+        var dateKey = dayDate.getFullYear() + "-" + dayDate.getMonth() + "-" + dayDate.getDate();
+        var eventCount = eventDates[dateKey] || 0;
+
+        var cell = document.createElement("div");
+        cell.className = "hub-week-day" + (isToday ? " today" : "");
+        var dotsHtml = '<div class="hub-week-dots">';
+        var dotCount = Math.min(eventCount, 3);
+        for (var di = 0; di < dotCount; di++) {
+          dotsHtml += '<span class="hub-week-dot"></span>';
+        }
+        dotsHtml += '</div>';
+        cell.innerHTML = '<span class="hub-week-label">' + DAY_NAMES[(dayDate.getDay())] + '</span>' +
+          '<span class="hub-week-num">' + dayDate.getDate() + '</span>' +
+          dotsHtml;
+        weekStrip.appendChild(cell);
+      }
+    }
+
+    // --- Playbooks ---
+    var pbGrid = $("hub-playbooks-grid");
+    var pbSection = $("hub-playbooks");
+    if (pbGrid) {
+      var pbs = getPlaybooks();
+      if (pbs.length === 0) {
+        if (pbSection) pbSection.style.display = "none";
+      } else {
+        if (pbSection) pbSection.style.display = "";
+        pbGrid.innerHTML = "";
+        for (var pi = 0; pi < pbs.length; pi++) {
+          (function (pb) {
+            var card = document.createElement("div");
+            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">' + 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 () {
+              openPlaybook(pb.id, function () {
+                // Re-render hub after playbook closes to update completion state
+                renderHomeHub(cachedProjects);
+              });
+            });
+            pbGrid.appendChild(card);
+          })(pbs[pi]);
+        }
+        parseEmojis(pbGrid);
+      }
+    }
+
+
+    // --- Tip ---
+    var currentTip = hubTips[hubTipIndex % hubTips.length];
+    var tipEl = $("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 = getPlaybookForTip(currentTip);
+    if (linkedPb && tipEl) {
+      var tryBtn = document.createElement("button");
+      tryBtn.className = "hub-tip-try";
+      tryBtn.textContent = "Try it →";
+      tryBtn.addEventListener("click", function () {
+        openPlaybook(linkedPb, function () {
+          renderHomeHub(cachedProjects);
+        });
+      });
+      tipEl.appendChild(tryBtn);
+    }
+
+    // Tip prev/next buttons
+    var prevBtn = $("hub-tip-prev");
+    if (prevBtn && !prevBtn._hubWired) {
+      prevBtn._hubWired = true;
+      prevBtn.addEventListener("click", function () {
+        hubTipIndex = (hubTipIndex - 1 + hubTips.length) % hubTips.length;
+        renderHomeHub(cachedProjects);
+        startTipRotation();
+      });
+    }
+    var nextBtn = $("hub-tip-next");
+    if (nextBtn && !nextBtn._hubWired) {
+      nextBtn._hubWired = true;
+      nextBtn.addEventListener("click", function () {
+        hubTipIndex = (hubTipIndex + 1) % hubTips.length;
+        renderHomeHub(cachedProjects);
+        startTipRotation();
+      });
+    }
+
+    // Render twemoji for all emoji in the hub
+    parseEmojis(homeHub);
+  }
+
+  function handleHubSchedules(msg) {
+    if (msg.schedules) {
+      hubSchedules = msg.schedules;
+      if (homeHubVisible) renderHomeHub(cachedProjects);
+    }
+  }
+
+  function startTipRotation() {
+    stopTipRotation();
+    hubTipTimer = setInterval(function () {
+      hubTipIndex = (hubTipIndex + 1) % hubTips.length;
+      renderHomeHub(cachedProjects);
+    }, 15000);
+  }
+
+  function stopTipRotation() {
+    if (hubTipTimer) {
+      clearInterval(hubTipTimer);
+      hubTipTimer = null;
+    }
+  }
+
+  var hubCloseBtn = document.getElementById("home-hub-close");
+
+  function showHomeHub() {
+    homeHubVisible = true;
+    homeHub.classList.remove("hidden");
+    // Show close button only if there's a project to return to
+    if (hubCloseBtn) {
+      if (currentSlug) hubCloseBtn.classList.remove("hidden");
+      else hubCloseBtn.classList.add("hidden");
+    }
+    // Fetch weather silently (once)
+    fetchWeather();
+    // Request cross-project schedules
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "hub_schedules_list" }));
+    }
+    renderHomeHub(cachedProjects);
+    startTipRotation();
+    history.pushState(null, "", "/");
+    // Update icon strip active state
+    var homeIcon = document.querySelector(".icon-strip-home");
+    if (homeIcon) homeIcon.classList.add("active");
+    var activeProj = document.querySelector("#icon-strip-projects .icon-strip-item.active");
+    if (activeProj) activeProj.classList.remove("active");
+    // Mobile home button active
+    var mobileHome = document.getElementById("mobile-home-btn");
+    if (mobileHome) mobileHome.classList.add("active");
+  }
+
+  if (hubCloseBtn) {
+    hubCloseBtn.addEventListener("click", function () {
+      hideHomeHub();
+      if (currentSlug) {
+        history.pushState(null, "", "/p/" + currentSlug + "/");
+        // Restore icon strip active state
+        var homeIcon = document.querySelector(".icon-strip-home");
+        if (homeIcon) homeIcon.classList.remove("active");
+        renderProjectList();
+      }
+    });
+  }
+
+  function hideHomeHub() {
+    if (!homeHubVisible) return;
+    homeHubVisible = false;
+    homeHub.classList.add("hidden");
+    stopTipRotation();
+    var mobileHome = document.getElementById("mobile-home-btn");
+    if (mobileHome) mobileHome.classList.remove("active");
+  }
+
   // --- Project List ---
   var projectListSection = $("project-list-section");
   var projectListEl = $("project-list");
@@ -86,9 +617,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           var pIcon = cachedProjects[pi].icon || null;
           if (pIcon) {
             tbIcon.textContent = pIcon;
-            if (typeof twemoji !== "undefined") {
-              twemoji.parse(tbIcon, { folder: "svg", ext: ".svg" });
-            }
+            parseEmojis(tbIcon);
             tbIcon.classList.add("has-icon");
             try { localStorage.setItem("clay-project-icon-" + (currentSlug || "default"), pIcon); } catch (e) {}
           } else {
@@ -118,6 +647,10 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
 
   document.addEventListener("keydown", function (e) {
     if (e.key === "Escape") {
+      if (homeHubVisible && currentSlug) {
+        hubCloseBtn.click();
+        return;
+      }
       closeImageModal();
     }
   });
@@ -179,7 +712,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: 3, cron: null };
   var ralphFilesReady = { promptReady: false, judgeReady: false, bothReady: false };
   var ralphPreviewContent = { prompt: "", judge: "" };
   var slashCommands = [];
@@ -203,9 +736,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
       var _tbi = $("title-bar-project-icon");
       if (_tbi) {
         _tbi.textContent = _cachedProjectIcon;
-        if (typeof twemoji !== "undefined") {
-          twemoji.parse(_tbi, { folder: "svg", ext: ".svg" });
-        }
+        parseEmojis(_tbi);
         _tbi.classList.add("has-icon");
       }
     }
@@ -402,66 +933,104 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     onFilesTabOpen: function () { loadRootDirectory(); },
     switchProject: function (slug) { switchProject(slug); },
     openTerminal: function () { openTerminal(); },
+    showHomeHub: function () { showHomeHub(); },
+    openRalphWizard: function () { openRalphWizard(); },
+    getUpcomingSchedules: getUpcomingSchedules,
   };
   initSidebar(sidebarCtx);
   initIconStrip(sidebarCtx);
 
-  // --- Connect overlay (logo + wordmark only) ---
-  function startVerbCycle() {}
-  function stopVerbCycle() {}
+  // --- Connect overlay (animated ASCII logo) ---
+  var asciiLogoCanvas = $("ascii-logo-canvas");
+  initAsciiLogo(asciiLogoCanvas);
+  startLogoAnimation();
+  function startVerbCycle() { startLogoAnimation(); }
+  function stopVerbCycle() { stopLogoAnimation(); }
 
-  // Reset favicon cache when theme changes (variant may switch light ↔ dark)
+  // Reset favicon cache when theme changes
   onThemeChange(function () {
-    faviconSvgLight = null;
-    faviconSvgDark = null;
     faviconOrigHref = null;
   });
 
   function startPixelAnim() {}
   function stopPixelAnim() {}
 
-  // --- Dynamic favicon ---
+  // --- Dynamic favicon (canvas-based banded C with color flow animation) ---
   var faviconLink = document.querySelector('link[rel="icon"]');
-  var faviconSvgLight = null;
-  var faviconSvgDark = null;
   var faviconOrigHref = null;
+  var faviconCanvas = document.createElement("canvas");
+  faviconCanvas.width = 32;
+  faviconCanvas.height = 32;
+  var faviconCtx = faviconCanvas.getContext("2d");
+  var faviconImg = null;
+  var faviconImgReady = false;
+
+  // Banded colors from the Clay CLI logo gradient
+  var BAND_COLORS = [
+    [0, 235, 160],
+    [0, 200, 220],
+    [30, 100, 255],
+    [88, 50, 255],
+    [200, 60, 180],
+    [255, 90, 50],
+  ];
 
-  // Background fill colors in each favicon variant (terracotta / dark-brown)
-  var LIGHT_BG_FILLS = ["#E3D0CC", "#C0A9A4", "#D6B6B0", "#DAC7C4", "#D4C0BD", "#CBB8B2"];
-  var DARK_BG_FILLS = ["#3A3535", "#252121", "#2E2929", "#332E2E", "#312C2C", "#292525"];
-
-  function getFaviconSvg() {
-    var theme = getCurrentTheme();
-    var isLight = theme.variant === "light";
-    var src = isLight ? "favicon.svg" : "favicon-dark.svg";
-    var cached = isLight ? faviconSvgLight : faviconSvgDark;
-    if (cached) return cached;
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", basePath + src, false);
-    xhr.send();
-    if (xhr.status !== 200) return null;
-    if (isLight) { faviconSvgLight = xhr.responseText; return faviconSvgLight; }
-    faviconSvgDark = xhr.responseText;
-    return faviconSvgDark;
-  }
+  // Load the banded favicon image for masking
+  (function () {
+    faviconImg = new Image();
+    faviconImg.onload = function () { faviconImgReady = true; };
+    faviconImg.src = basePath + "favicon-banded.png";
+  })();
 
   function updateFavicon(bgColor) {
     if (!faviconLink) return;
     if (!bgColor) {
-      // Restore original
       if (faviconOrigHref) { faviconLink.href = faviconOrigHref; faviconOrigHref = null; }
       return;
     }
-    var raw = getFaviconSvg();
-    if (!raw) return;
     if (!faviconOrigHref) faviconOrigHref = faviconLink.href;
-    var theme = getCurrentTheme();
-    var fills = theme.variant === "light" ? LIGHT_BG_FILLS : DARK_BG_FILLS;
-    var svg = raw;
-    for (var i = 0; i < fills.length; i++) {
-      svg = svg.split(fills[i]).join(bgColor);
+    // Simple solid-color favicon for non-animated states
+    faviconCtx.clearRect(0, 0, 32, 32);
+    faviconCtx.fillStyle = bgColor;
+    faviconCtx.beginPath();
+    faviconCtx.arc(16, 16, 14, 0, Math.PI * 2);
+    faviconCtx.fill();
+    faviconCtx.fillStyle = "#fff";
+    faviconCtx.font = "bold 22px Nunito, sans-serif";
+    faviconCtx.textAlign = "center";
+    faviconCtx.textBaseline = "middle";
+    faviconCtx.fillText("C", 16, 17);
+    faviconLink.href = faviconCanvas.toDataURL("image/png");
+  }
+
+  // Animated favicon: banded colors flow top-to-bottom
+  var faviconAnimTimer = null;
+  var faviconAnimFrame = 0;
+
+  function drawFaviconAnimFrame() {
+    if (!faviconImgReady) return;
+    var S = 32;
+    var bands = BAND_COLORS.length;
+    var totalFrames = bands * 2;
+    var offset = faviconAnimFrame % totalFrames;
+
+    // Draw flowing color bands as background
+    faviconCtx.clearRect(0, 0, S, S);
+    var bandH = Math.ceil(S / bands);
+    for (var i = 0; i < bands + totalFrames; i++) {
+      var ci = ((i + offset) % bands + bands) % bands;
+      var c = BAND_COLORS[ci];
+      faviconCtx.fillStyle = "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
+      faviconCtx.fillRect(0, (i - offset) * bandH, S, bandH);
     }
-    faviconLink.href = "data:image/svg+xml," + encodeURIComponent(svg);
+
+    // Use the banded C image as a mask — draw it on top with destination-in
+    faviconCtx.globalCompositeOperation = "destination-in";
+    faviconCtx.drawImage(faviconImg, 0, 0, S, S);
+    faviconCtx.globalCompositeOperation = "source-over";
+
+    faviconLink.href = faviconCanvas.toDataURL("image/png");
+    faviconAnimFrame++;
   }
 
   // --- Status & Activity ---
@@ -523,24 +1092,31 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     crossProjectBlinkTimer = setTimeout(doBlink, 50);
   }
 
-  // --- Urgent favicon blink (permission / ask user) ---
+  // --- Urgent favicon animation (banded color flow + title blink) ---
   var urgentBlinkTimer = null;
+  var urgentTitleTimer = null;
   var savedTitle = null;
   function startUrgentBlink() {
     if (urgentBlinkTimer) return;
     savedTitle = document.title;
-    var tick = 0;
-    urgentBlinkTimer = setInterval(function () {
-      var on = tick % 2 === 0;
-      updateFavicon(on ? getComputedVar("--error") : null);
-      document.title = on ? "\u26A0 Input needed" : savedTitle;
-      tick++;
-    }, 180);
+    if (!faviconOrigHref && faviconLink) faviconOrigHref = faviconLink.href;
+    faviconAnimFrame = 0;
+    // Color flow animation at ~12fps
+    urgentBlinkTimer = setInterval(drawFaviconAnimFrame, 83);
+    // Title blink separately
+    var titleTick = 0;
+    urgentTitleTimer = setInterval(function () {
+      document.title = titleTick % 2 === 0 ? "\u26A0 Input needed" : savedTitle;
+      titleTick++;
+    }, 500);
   }
   function stopUrgentBlink() {
     if (!urgentBlinkTimer) return;
     clearInterval(urgentBlinkTimer);
+    clearInterval(urgentTitleTimer);
     urgentBlinkTimer = null;
+    urgentTitleTimer = null;
+    faviconAnimFrame = 0;
     updateFavicon(null);
     if (savedTitle) document.title = savedTitle;
     savedTitle = null;
@@ -565,6 +1141,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
       connected = false;
       sendBtn.disabled = true;
       connectOverlay.classList.remove("hidden");
+      startVerbCycle();
     }
   }
 
@@ -1271,6 +1848,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
       bubble.appendChild(textEl);
     }
 
+    parseEmojis(bubble);
     div.appendChild(bubble);
 
     // Action bar below bubble (icons visible on hover)
@@ -1397,6 +1975,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     if (highlightTimer) clearTimeout(highlightTimer);
     highlightTimer = setTimeout(function () {
       highlightCodeBlocks(contentEl);
+      parseEmojis(contentEl);
     }, 150);
 
     scrollToBottom();
@@ -1417,6 +1996,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
       if (contentEl) {
         contentEl.innerHTML = renderMarkdown(currentFullText);
         highlightCodeBlocks(contentEl);
+        parseEmojis(contentEl);
       }
     }
   }
@@ -1428,6 +2008,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
       if (contentEl) {
         highlightCodeBlocks(contentEl);
         renderMermaidBlocks(contentEl);
+        parseEmojis(contentEl);
       }
       if (currentFullText) {
         addCopyHandler(currentMsgEl, currentFullText);
@@ -1726,7 +2307,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     removeSearchTimeline();
     setActivity(null);
     setStatus("connected");
-    enableMainInput();
+    if (!loopActive) enableMainInput();
     resetUsage();
     resetContext();
     // Clear header indicators
@@ -1741,9 +2322,16 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
 
   // --- Project switching (no full reload) ---
   function switchProject(slug) {
-    if (!slug || slug === currentSlug) return;
+    if (!slug) return;
+    if (homeHubVisible) {
+      hideHomeHub();
+      if (slug === currentSlug) return;
+    }
+    if (slug === currentSlug) return;
     resetFileBrowser();
     closeArchive();
+    if (isSchedulerOpen()) closeScheduler();
+    resetScheduler(slug);
     currentSlug = slug;
     basePath = "/p/" + slug + "/";
     wsPath = "/p/" + slug + "/ws";
@@ -1758,6 +2346,8 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     if (newSlug && newSlug !== currentSlug) {
       resetFileBrowser();
       closeArchive();
+      if (isSchedulerOpen()) closeScheduler();
+      resetScheduler(newSlug);
       currentSlug = newSlug;
       basePath = "/p/" + newSlug + "/";
       wsPath = "/p/" + newSlug + "/ws";
@@ -1947,22 +2537,22 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           if (msg.lanHost) window.__lanHost = msg.lanHost;
           if (msg.dangerouslySkipPermissions) {
             skipPermsEnabled = true;
-            var spBanner = $("skip-perms-banner");
+            var spBanner = $("skip-perms-pill");
             if (spBanner) spBanner.classList.remove("hidden");
           }
           updateProjectList(msg);
           break;
 
         case "update_available":
-          var updateBanner = $("update-banner");
+          var updatePillWrap = $("update-pill-wrap");
           var updateVersion = $("update-version");
-          if (updateBanner && updateVersion && msg.version) {
+          if (updatePillWrap && updateVersion && msg.version) {
             updateVersion.textContent = "v" + msg.version;
-            updateBanner.classList.remove("hidden");
+            updatePillWrap.classList.remove("hidden");
             // Reset button state (may be stuck on "Updating..." after restart)
             var updResetBtn = $("update-now");
             if (updResetBtn) {
-              updResetBtn.textContent = "Update now";
+              updResetBtn.innerHTML = '<i data-lucide="download"></i> Update now';
               updResetBtn.disabled = false;
             }
             refreshIcons();
@@ -1984,8 +2574,11 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
         case "update_started":
           var updNowBtn = $("update-now");
           if (updNowBtn) {
-            updNowBtn.textContent = "Updating...";
+            updNowBtn.innerHTML = '<i data-lucide="loader"></i> Updating...';
             updNowBtn.disabled = true;
+            refreshIcons();
+            var spinIcon = updNowBtn.querySelector(".lucide");
+            if (spinIcon) spinIcon.classList.add("icon-spin-inline");
           }
           // Block the entire screen with the connect overlay
           connectOverlay.classList.remove("hidden");
@@ -2063,6 +2656,38 @@ 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 "schedule_move_result":
+          if (msg.ok) {
+            showToast("Task moved", "success");
+          } else {
+            showToast(msg.error || "Failed to move task", "error");
+          }
+          break;
+
+        case "remove_project_check_result":
+          handleRemoveProjectCheckResult(msg);
+          break;
+
+        case "hub_schedules":
+          handleHubSchedules(msg);
+          break;
+
         case "input_sync":
           handleInputSync(msg.text);
           break;
@@ -2084,6 +2709,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           break;
 
         case "session_switched":
+          hideHomeHub();
           // Save draft from outgoing session
           if (activeSessionId && inputEl.value) {
             sessionDrafts[activeSessionId] = inputEl.value;
@@ -2321,7 +2947,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           finalizeAssistantBlock();
           processing = false;
           setStatus("connected");
-          enableMainInput();
+          if (!loopActive) enableMainInput();
           resetToolState();
           stopUrgentBlink();
           if (document.hidden) {
@@ -2559,6 +3185,8 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
             if (loopIteration > 0) {
               updateLoopBanner(loopIteration, loopMaxIterations, "running");
             }
+            inputEl.disabled = true;
+            inputEl.placeholder = "Ralph Loop is running...";
           }
           break;
 
@@ -2570,17 +3198,25 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           showLoopBanner(true);
           updateLoopButton();
           addSystemMessage("Ralph Loop started (max " + msg.maxIterations + " iterations)", false);
+          inputEl.disabled = true;
+          inputEl.placeholder = "Ralph Loop is running...";
           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);
+          inputEl.disabled = true;
+          inputEl.placeholder = "Ralph Loop is running...";
           break;
 
         case "loop_judging":
           updateLoopBanner(loopIteration, loopMaxIterations, "judging");
           addSystemMessage("Judging iteration #" + msg.iteration + "...", false);
+          inputEl.disabled = true;
+          inputEl.placeholder = "Ralph Loop is judging...";
           break;
 
         case "loop_verdict":
@@ -2596,6 +3232,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           ralphPhase = "done";
           showLoopBanner(false);
           updateLoopButton();
+          enableMainInput();
           var finishMsg = msg.reason === "pass"
             ? "Ralph Loop completed successfully after " + msg.iterations + " iteration(s)."
             : msg.reason === "max_iterations"
@@ -2623,6 +3260,11 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           ralphCraftingSessionId = msg.sessionId || activeSessionId;
           updateLoopButton();
           updateRalphBars();
+          if (msg.source !== "ralph") {
+            // Task sessions open in the scheduler calendar window
+            enterCraftingMode(msg.sessionId, msg.taskId);
+          }
+          // Ralph crafting sessions show in session list as part of the loop group
           break;
 
         case "ralph_files_status":
@@ -2633,15 +3275,28 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
           };
           if (msg.bothReady && (ralphPhase === "crafting" || ralphPhase === "approval")) {
             ralphPhase = "approval";
-            showRalphApprovalBar(true);
+            if (isSchedulerOpen()) {
+              // Task crafting in scheduler: switch from crafting chat to detail view showing files
+              exitCraftingMode(msg.taskId);
+            } else {
+              showRalphApprovalBar(true);
+            }
           }
           updateRalphApprovalStatus();
           break;
 
+        case "loop_registry_files_content":
+          handleLoopRegistryFiles(msg);
+          break;
+
         case "ralph_files_content":
           ralphPreviewContent = { prompt: msg.prompt || "", judge: msg.judge || "" };
           openRalphPreviewModal();
           break;
+
+        case "loop_registry_error":
+          addSystemMessage("Error: " + msg.text, true);
+          break;
       }
   }
 
@@ -2790,6 +3445,17 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     setSendBtnMode: setSendBtnMode,
   });
 
+  // --- STT module (voice input via Web Speech API) ---
+  initSTT({
+    inputEl: inputEl,
+    addSystemMessage: addSystemMessage,
+  });
+
+  // --- User profile (Discord-style popover on user island) ---
+  initProfile({
+    basePath: basePath,
+  });
+
   // --- Notifications module (viewport, banners, notifications, debug, service worker) ---
   initNotifications({
     $: $,
@@ -2852,6 +3518,9 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     fileViewerEl: $("file-viewer"),
   });
 
+  // --- Playbook Engine ---
+  initPlaybook();
+
   // --- Sticky Notes ---
   initStickyNotes({
     get ws() { return ws; },
@@ -2862,6 +3531,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 {
@@ -2870,17 +3540,17 @@ 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) {
     var inputArea = document.getElementById("input-area");
     if (!inputArea) return;
-    if (loop && loop.active) {
+    if (loop && loop.active && loop.role !== "crafting") {
       inputArea.style.display = "none";
     } else {
       inputArea.style.display = "";
@@ -2888,39 +3558,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");
+      });
     }
   }
 
@@ -3053,13 +3756,11 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   }
 
   function openRalphWizard() {
-    wizardData = { name: "", task: "", maxIterations: 25 };
+    wizardData = { name: "", task: "", maxIterations: 3 };
     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");
@@ -3103,29 +3804,68 @@ 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() {
-    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.name = "";
     wizardData.task = taskEl ? taskEl.value.trim() : "";
-    wizardData.maxIterations = iterEl ? parseInt(iterEl.value, 10) || 25 : 25;
+    wizardData.maxIterations = iterEl ? parseInt(iterEl.value, 10) || 3 : 3;
+    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() {
@@ -3167,18 +3907,11 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     }
 
     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;
       }
-    }
-    if (wizardStep === 3) {
       wizardSubmit();
       return;
     }
@@ -3195,7 +3928,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   }
 
   function wizardSkip() {
-    if (wizardStep < 3) {
+    if (wizardStep < 2) {
       wizardStep++;
       updateWizardStep();
     }
@@ -3222,11 +3955,49 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   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();
     });
   }
 
@@ -3284,7 +4055,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>';
@@ -3371,7 +4142,24 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     var modal = document.getElementById("ralph-preview-modal");
     if (!modal) return;
     modal.classList.remove("hidden");
+
+    // Set name from wizard data
+    var nameEl = document.getElementById("ralph-preview-name");
+    if (nameEl) {
+      var name = (wizardData && wizardData.name) || "Ralph Loop";
+      nameEl.textContent = name;
+    }
+
+    // Update run button label based on cron
+    var runBtn = document.getElementById("ralph-preview-run");
+    if (runBtn) {
+      var hasCron = wizardData && wizardData.cron;
+      runBtn.innerHTML = iconHtml(hasCron ? "calendar-clock" : "play") + " " + (hasCron ? "Schedule" : "Run now");
+      runBtn.disabled = !(ralphFilesReady && ralphFilesReady.bothReady);
+    }
+
     showRalphPreviewTab("prompt");
+    refreshIcons();
   }
 
   function closeRalphPreviewModal() {
@@ -3380,7 +4168,7 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   }
 
   function showRalphPreviewTab(tab) {
-    var tabs = document.querySelectorAll(".ralph-tab");
+    var tabs = document.querySelectorAll("#ralph-preview-modal .ralph-tab");
     for (var i = 0; i < tabs.length; i++) {
       if (tabs[i].getAttribute("data-tab") === tab) {
         tabs[i].classList.add("active");
@@ -3392,19 +4180,44 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
     if (!body) return;
     var content = tab === "prompt" ? ralphPreviewContent.prompt : ralphPreviewContent.judge;
     if (typeof marked !== "undefined" && marked.parse) {
-      body.innerHTML = DOMPurify.sanitize(marked.parse(content));
+      body.innerHTML = '<div class="md-content">' + DOMPurify.sanitize(marked.parse(content)) + '</div>';
     } 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);
 
+  // Run now button in preview modal
+  var previewRunBtn = document.getElementById("ralph-preview-run");
+  if (previewRunBtn) {
+    previewRunBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeRalphPreviewModal();
+      // Trigger the same flow as the sticky start button
+      var stickyStart = document.querySelector(".ralph-sticky-start");
+      if (stickyStart) {
+        stickyStart.click();
+      }
+    });
+  }
+
+  // Delete/cancel button in preview modal
+  var previewDeleteBtn = document.getElementById("ralph-preview-delete");
+  if (previewDeleteBtn) {
+    previewDeleteBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeRalphPreviewModal();
+      // Trigger the same flow as the sticky dismiss button
+      var stickyDismiss = document.querySelector(".ralph-sticky-dismiss");
+      if (stickyDismiss) {
+        stickyDismiss.click();
+      }
+    });
+  }
+
   var previewTabs = document.querySelectorAll(".ralph-tab");
   for (var ti = 0; ti < previewTabs.length; ti++) {
     previewTabs[ti].addEventListener("click", function() {
@@ -3421,12 +4234,103 @@ 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,
+    currentSlug: currentSlug,
+    openRalphWizard: function () { openRalphWizard(); },
+    getProjects: function () { return cachedProjects; },
+  });
+
   // --- Remove project ---
+  var pendingRemoveSlug = null;
+  var pendingRemoveName = null;
+
   function confirmRemoveProject(slug, name) {
-    showConfirm("Remove project \"" + name + "\"?", function () {
+    // First check if the project has tasks/schedules
+    pendingRemoveSlug = slug;
+    pendingRemoveName = name;
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "remove_project_check", slug: slug }));
+    }
+  }
+
+  function handleRemoveProjectCheckResult(msg) {
+    var slug = msg.slug || pendingRemoveSlug;
+    var name = msg.name || pendingRemoveName || slug;
+    if (!slug) return;
+
+    if (msg.count > 0) {
+      // Project has tasks — show dialog with options
+      showRemoveProjectTaskDialog(slug, name, msg.count);
+    } else {
+      // No tasks — simple confirm
+      showConfirm('Remove project "' + name + '"?', function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "remove_project", slug: slug }));
+        }
+      });
+    }
+    pendingRemoveSlug = null;
+    pendingRemoveName = null;
+  }
+
+  function showRemoveProjectTaskDialog(slug, name, taskCount) {
+    // Build list of other projects to move tasks to
+    var otherProjects = cachedProjects.filter(function (p) { return p.slug !== slug; });
+
+    var modal = document.createElement("div");
+    modal.className = "remove-project-task-modal";
+    modal.innerHTML =
+      '<div class="remove-project-task-backdrop"></div>' +
+      '<div class="remove-project-task-dialog">' +
+        '<div class="remove-project-task-title">Remove project "' + (name || slug) + '"</div>' +
+        '<div class="remove-project-task-text">This project has <strong>' + taskCount + '</strong> task' + (taskCount > 1 ? 's' : '') + '/schedule' + (taskCount > 1 ? 's' : '') + '.</div>' +
+        '<div class="remove-project-task-options">' +
+          (otherProjects.length > 0
+            ? '<div class="remove-project-task-label">Move tasks to:</div>' +
+              '<select class="remove-project-task-select" id="rpt-move-target">' +
+                otherProjects.map(function (p) {
+                  return '<option value="' + p.slug + '">' + (p.title || p.project || p.slug) + '</option>';
+                }).join("") +
+              '</select>' +
+              '<button class="remove-project-task-btn move" id="rpt-move-btn">Move &amp; Remove</button>'
+            : '') +
+          '<button class="remove-project-task-btn delete" id="rpt-delete-btn">Delete all &amp; Remove</button>' +
+          '<button class="remove-project-task-btn cancel" id="rpt-cancel-btn">Cancel</button>' +
+        '</div>' +
+      '</div>';
+
+    document.body.appendChild(modal);
+
+    var backdrop = modal.querySelector(".remove-project-task-backdrop");
+    var moveBtn = modal.querySelector("#rpt-move-btn");
+    var deleteBtn = modal.querySelector("#rpt-delete-btn");
+    var cancelBtn = modal.querySelector("#rpt-cancel-btn");
+    var selectEl = modal.querySelector("#rpt-move-target");
+
+    function close() { modal.remove(); }
+    backdrop.addEventListener("click", close);
+    cancelBtn.addEventListener("click", close);
+
+    if (moveBtn) {
+      moveBtn.addEventListener("click", function () {
+        var targetSlug = selectEl ? selectEl.value : null;
+        if (ws && ws.readyState === 1 && targetSlug) {
+          ws.send(JSON.stringify({ type: "remove_project", slug: slug, moveTasksTo: targetSlug }));
+        }
+        close();
+      });
+    }
+
+    deleteBtn.addEventListener("click", function () {
       if (ws && ws.readyState === 1) {
         ws.send(JSON.stringify({ type: "remove_project", slug: slug }));
       }
+      close();
     });
   }
 
@@ -3649,4 +4553,8 @@ import { initSkills, handleSkillInstalled, handleSkillUninstalled } from './modu
   // --- Init ---
   lucide.createIcons();
   connect();
-  inputEl.focus();
+  if (!currentSlug) {
+    showHomeHub();
+  } else {
+    inputEl.focus();
+  }