clay-server 3.2.2-beta.3 → 3.3.0-beta.2

package/lib/public/modules/markdown-slides.js

@@ -0,0 +1,292 @@
+import { store } from './store.js';
+import { refreshIcons } from './icons.js';
+
+var levelMenu = null;
+
+function normalizedLevel(level) {
+  var parsed = Number(level);
+  return parsed >= 1 && parsed <= 3 ? parsed : 1;
+}
+
+function directHeadings(markdownEl, level) {
+  if (!markdownEl) return [];
+  var tagName = "H" + normalizedLevel(level);
+  return Array.from(markdownEl.children).filter(function (child) {
+    return child.tagName === tagName;
+  });
+}
+
+export function countMarkdownSlides(markdownEl, level) {
+  return directHeadings(markdownEl, level).length;
+}
+
+export function suggestedMarkdownSlideLevel(markdownEl) {
+  var counts = [0, 1, 2, 3].map(function (level) {
+    return level === 0 ? 0 : countMarkdownSlides(markdownEl, level);
+  });
+  var selected = normalizedLevel(store.get('markdownSlidePreferredLevel') || store.get('markdownSlideLevel'));
+  if (store.get('markdownSlideLevelExplicit') && counts[selected] > 0) return selected;
+  if (counts[1] === 1 && counts[2] > 1) return 2;
+  if (counts[1] > 0) return 1;
+  if (counts[2] > 0) return 2;
+  if (counts[3] > 0) return 3;
+  return selected;
+}
+
+function updateSlideButton(active, available, level) {
+  var button = document.getElementById("file-viewer-slides");
+  var levelButton = document.getElementById("file-viewer-slide-level");
+  var selectedLevel = normalizedLevel(level || store.get('markdownSlideLevel'));
+  if (!button) return;
+  button.classList.toggle("hidden", !available);
+  button.classList.toggle("active", active);
+  button.setAttribute("aria-pressed", active ? "true" : "false");
+  button.setAttribute("aria-label", active ? "Exit slide show" : "Present Markdown by H" + selectedLevel + " headings");
+  button.title = active ? "Exit slide show (Esc)" : "Present by H" + selectedLevel + " sections";
+  if (levelButton) {
+    levelButton.classList.toggle("hidden", !available || active);
+    levelButton.setAttribute("aria-label", "Choose slide heading level. Current: H" + selectedLevel);
+    levelButton.title = "Split slides by heading level";
+    var label = levelButton.querySelector("span");
+    if (label) label.textContent = "H" + selectedLevel;
+  }
+}
+
+export function syncMarkdownSlidesButton(markdownEl) {
+  if (!markdownEl) {
+    closeMarkdownSlideLevelMenu();
+    updateSlideButton(false, false, store.get('markdownSlideLevel'));
+    return 0;
+  }
+  var level = suggestedMarkdownSlideLevel(markdownEl);
+  var count = countMarkdownSlides(markdownEl, level);
+  store.set({ markdownSlideLevel: level });
+  updateSlideButton(false, count > 0, level);
+  return count;
+}
+
+function closeLevelMenuOnOutside(event) {
+  var button = document.getElementById("file-viewer-slide-level");
+  if (levelMenu && (levelMenu.contains(event.target) || (button && button.contains(event.target)))) return;
+  closeMarkdownSlideLevelMenu();
+}
+
+export function closeMarkdownSlideLevelMenu() {
+  if (levelMenu) levelMenu.remove();
+  levelMenu = null;
+  document.removeEventListener("pointerdown", closeLevelMenuOnOutside);
+  var button = document.getElementById("file-viewer-slide-level");
+  if (button) button.setAttribute("aria-expanded", "false");
+}
+
+export function toggleMarkdownSlideLevelMenu(markdownEl) {
+  if (levelMenu) {
+    closeMarkdownSlideLevelMenu();
+    return;
+  }
+  if (!markdownEl) return;
+  var button = document.getElementById("file-viewer-slide-level");
+  if (!button) return;
+  var selected = normalizedLevel(store.get('markdownSlideLevel'));
+  var menu = document.createElement("div");
+  menu.className = "markdown-slide-level-menu";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", "Slide heading level");
+  menu.innerHTML = '<div class="markdown-slide-level-title">Start a new slide at</div>';
+  for (var level = 1; level <= 3; level++) {
+    var count = countMarkdownSlides(markdownEl, level);
+    var option = document.createElement("button");
+    option.type = "button";
+    option.className = "markdown-slide-level-option" + (level === selected ? " selected" : "");
+    option.disabled = count === 0;
+    option.dataset.level = String(level);
+    option.setAttribute("role", "menuitemradio");
+    option.setAttribute("aria-checked", level === selected ? "true" : "false");
+    option.innerHTML = '<span class="markdown-slide-level-name">H' + level + '</span>' +
+      '<code>' + "#".repeat(level) + '</code>' +
+      '<span class="markdown-slide-level-count">' + count + (count === 1 ? " heading" : " headings") + '</span>' +
+      '<i data-lucide="check"></i>';
+    option.addEventListener("click", function () {
+      var nextLevel = normalizedLevel(this.dataset.level);
+      store.set({ markdownSlideLevel: nextLevel, markdownSlidePreferredLevel: nextLevel, markdownSlideLevelExplicit: true });
+      updateSlideButton(false, true, nextLevel);
+      closeMarkdownSlideLevelMenu();
+      refreshIcons();
+    });
+    menu.appendChild(option);
+  }
+  document.body.appendChild(menu);
+  levelMenu = menu;
+  button.setAttribute("aria-expanded", "true");
+  var rect = button.getBoundingClientRect();
+  menu.style.left = Math.max(12, rect.right - menu.offsetWidth) + "px";
+  menu.style.top = Math.min(window.innerHeight - menu.offsetHeight - 12, rect.bottom + 8) + "px";
+  setTimeout(function () { document.addEventListener("pointerdown", closeLevelMenuOnOutside); }, 0);
+  refreshIcons();
+}
+
+function createControls(viewer) {
+  var controls = document.createElement("div");
+  controls.className = "markdown-slide-controls";
+  controls.innerHTML =
+    '<button type="button" class="markdown-slide-nav markdown-slide-prev" aria-label="Previous slide"><i data-lucide="arrow-left"></i></button>' +
+    '<span class="markdown-slide-counter" aria-live="polite"></span>' +
+    '<span class="markdown-slide-progress" aria-hidden="true"><span></span></span>' +
+    '<button type="button" class="markdown-slide-nav markdown-slide-next" aria-label="Next slide"><i data-lucide="arrow-right"></i></button>' +
+    '<button type="button" class="markdown-slide-exit" aria-label="Exit slide show"><i data-lucide="minimize-2"></i><span>Exit slides</span></button>';
+  controls.querySelector(".markdown-slide-prev").addEventListener("click", function () {
+    moveMarkdownSlide(-1);
+  });
+  controls.querySelector(".markdown-slide-next").addEventListener("click", function () {
+    moveMarkdownSlide(1);
+  });
+  controls.querySelector(".markdown-slide-exit").addEventListener("click", function () {
+    exitMarkdownSlides();
+  });
+  viewer.appendChild(controls);
+  return controls;
+}
+
+function showMarkdownSlide(index) {
+  var viewer = document.getElementById("file-viewer");
+  if (!viewer || !store.get('markdownSlidesActive')) return;
+  var slides = viewer.querySelectorAll(".markdown-slide");
+  if (!slides.length) return;
+  var previous = store.get('markdownSlideIndex') || 0;
+  var next = Math.max(0, Math.min(index, slides.length - 1));
+  viewer.dataset.slideDirection = next < previous ? "backward" : "forward";
+  for (var i = 0; i < slides.length; i++) {
+    var active = i === next;
+    slides[i].classList.toggle("active", active);
+    slides[i].setAttribute("aria-hidden", active ? "false" : "true");
+    slides[i].toggleAttribute("inert", !active);
+  }
+  store.set({ markdownSlideIndex: next, markdownSlideCount: slides.length });
+  var counter = viewer.querySelector(".markdown-slide-counter");
+  if (counter) counter.textContent = (next + 1) + " / " + slides.length;
+  var progress = viewer.querySelector(".markdown-slide-progress > span");
+  if (progress) progress.style.width = (((next + 1) / slides.length) * 100) + "%";
+  var prevButton = viewer.querySelector(".markdown-slide-prev");
+  var nextButton = viewer.querySelector(".markdown-slide-next");
+  if (prevButton) prevButton.disabled = next === 0;
+  if (nextButton) nextButton.disabled = next === slides.length - 1;
+  slides[next].scrollTop = 0;
+}
+
+export function moveMarkdownSlide(delta) {
+  showMarkdownSlide((store.get('markdownSlideIndex') || 0) + delta);
+}
+
+export function enterMarkdownSlides(markdownEl, startIndex, requestedLevel) {
+  var level = normalizedLevel(requestedLevel || store.get('markdownSlideLevel'));
+  var headingTag = "H" + level;
+  var headings = directHeadings(markdownEl, level);
+  if (!headings.length) return false;
+  exitMarkdownSlides();
+
+  var viewer = document.getElementById("file-viewer");
+  var deck = document.createElement("div");
+  deck.className = "markdown-slide-deck";
+  var children = Array.from(markdownEl.children);
+  var prelude = [];
+  var slide = null;
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    if (child.tagName === headingTag) {
+      if (!slide && prelude.length) {
+        var cover = document.createElement("section");
+        cover.className = "markdown-slide markdown-slide-cover";
+        cover.setAttribute("role", "group");
+        cover.setAttribute("aria-roledescription", "slide");
+        for (var p = 0; p < prelude.length; p++) cover.appendChild(prelude[p]);
+        deck.appendChild(cover);
+        prelude = [];
+      }
+      slide = document.createElement("section");
+      slide.className = "markdown-slide";
+      slide.setAttribute("role", "group");
+      slide.setAttribute("aria-roledescription", "slide");
+      child.classList.add("markdown-slide-heading");
+      slide.appendChild(child);
+      deck.appendChild(slide);
+    } else if (slide) {
+      slide.appendChild(child);
+    } else {
+      prelude.push(child);
+    }
+  }
+
+  var slides = Array.from(deck.children);
+  for (var j = 0; j < slides.length; j++) {
+    slides[j].setAttribute("aria-label", "Slide " + (j + 1) + " of " + slides.length);
+  }
+  markdownEl.appendChild(deck);
+  viewer.classList.add("markdown-slides-active");
+  viewer.dataset.slideLevel = String(level);
+  createControls(viewer);
+  store.set({ markdownSlidesActive: true, markdownSlideCount: slides.length, markdownSlideIndex: 0, markdownSlideLevel: level });
+  updateSlideButton(true, true, level);
+  showMarkdownSlide(typeof startIndex === "number" ? startIndex : 0);
+  refreshIcons();
+  return true;
+}
+
+export function exitMarkdownSlides() {
+  var viewer = document.getElementById("file-viewer");
+  if (!viewer) return;
+  var markdownEl = viewer.querySelector(".file-viewer-markdown");
+  var deck = markdownEl ? markdownEl.querySelector(":scope > .markdown-slide-deck") : null;
+  if (deck) {
+    var fragment = document.createDocumentFragment();
+    var slides = Array.from(deck.children);
+    for (var i = 0; i < slides.length; i++) {
+      while (slides[i].firstChild) {
+        slides[i].firstChild.classList.remove("markdown-slide-heading");
+        fragment.appendChild(slides[i].firstChild);
+      }
+    }
+    markdownEl.insertBefore(fragment, deck);
+    deck.remove();
+  }
+  var controls = viewer.querySelector(".markdown-slide-controls");
+  if (controls) controls.remove();
+  viewer.classList.remove("markdown-slides-active");
+  delete viewer.dataset.slideDirection;
+  delete viewer.dataset.slideLevel;
+  store.set({ markdownSlidesActive: false, markdownSlideCount: 0, markdownSlideIndex: 0 });
+  closeMarkdownSlideLevelMenu();
+  var level = normalizedLevel(store.get('markdownSlideLevel'));
+  updateSlideButton(false, countMarkdownSlides(markdownEl, level) > 0, level);
+}
+
+export function handleMarkdownSlideKey(event) {
+  if (levelMenu && event.key === "Escape") {
+    event.preventDefault();
+    closeMarkdownSlideLevelMenu();
+    return true;
+  }
+  if (!store.get('markdownSlidesActive')) return false;
+  var key = event.key;
+  if (key === "Escape") {
+    event.preventDefault();
+    exitMarkdownSlides();
+    return true;
+  }
+  if (event.target && event.target.closest && event.target.closest("button, a, input, textarea, select")) return false;
+  if (key === "ArrowRight" || key === "ArrowDown" || key === "PageDown" || key === " ") {
+    event.preventDefault();
+    moveMarkdownSlide(1);
+    return true;
+  }
+  if (key === "ArrowLeft" || key === "ArrowUp" || key === "PageUp") {
+    event.preventDefault();
+    moveMarkdownSlide(-1);
+    return true;
+  }
+  if (key === "Home" || key === "End") {
+    event.preventDefault();
+    showMarkdownSlide(key === "Home" ? 0 : (store.get('markdownSlideCount') || 1) - 1);
+    return true;
+  }
+  return false;
+}

package/lib/public/modules/mate-sidebar.js

@@ -109,13 +109,6 @@ export function initMateSidebar(wsGetter) {
       if (origBtn) origBtn.click();
     });
   }
-  var mateEmailBtn = document.getElementById("mate-email-btn");
-  if (mateEmailBtn) {
-    mateEmailBtn.addEventListener("click", function () {
-      var origBtn = document.getElementById("email-sidebar-btn");
-      if (origBtn) origBtn.click();
-    });
-  }
   var mateSkillsBtn = document.getElementById("mate-skills-btn");
   if (mateSkillsBtn) {
     mateSkillsBtn.addEventListener("click", function () {

package/lib/public/modules/sidebar.js

@@ -2,6 +2,7 @@ import { closeArchive } from './sticky-notes.js';
 import { closeScheduler } from './scheduler.js';
 import { initSidebarSessions } from './sidebar-sessions.js';
 import { focusFileTree } from './filebrowser.js';
+import { refreshGitStatus } from './git-panel.js';
 import { initSidebarProjects, closeProjectCtxMenu } from './sidebar-projects.js';
 import {
   initSidebarMates,
@@ -118,16 +119,20 @@ export function initSidebar(_ctx) {
 
   // --- Panel switch (sessions / files / projects) ---
   var fileBrowserBtn = ctx.$("file-browser-btn");
+  var gitBtn = ctx.$("git-sidebar-btn");
   var projectsPanel = ctx.$("sidebar-panel-projects");
   var sessionsPanel = ctx.$("sidebar-panel-sessions");
   var filesPanel = ctx.$("sidebar-panel-files");
+  var gitPanel = ctx.$("sidebar-panel-git");
   var sessionsHeaderContent = ctx.$("sessions-header-content");
   var filePanelClose = ctx.$("file-panel-close");
+  var gitPanelClose = ctx.$("git-panel-close");
 
   function hideAllPanels() {
     if (projectsPanel) projectsPanel.classList.add("hidden");
     if (sessionsPanel) sessionsPanel.classList.add("hidden");
     if (filesPanel) filesPanel.classList.add("hidden");
+    if (gitPanel) gitPanel.classList.add("hidden");
     if (sessionsHeaderContent) sessionsHeaderContent.classList.add("hidden");
   }
 
@@ -155,6 +160,16 @@ export function initSidebar(_ctx) {
     requestAnimationFrame(function () { focusFileTree(); });
   }
 
+  function showGitPanel() {
+    hideAllPanels();
+    if (gitPanel) {
+      gitPanel.classList.remove("hidden");
+      gitPanel.classList.remove("fb-exit");
+      gitPanel.classList.add("fb-enter");
+    }
+    refreshGitStatus();
+  }
+
   function hideFilesPanel(cb) {
     if (!filesPanel || filesPanel.classList.contains("hidden")) { if (cb) cb(); return; }
     filesPanel.classList.remove("fb-enter");
@@ -168,6 +183,20 @@ export function initSidebar(_ctx) {
     filesPanel.addEventListener("animationend", onDone);
   }
 
+  function hideGitPanel(cb) {
+    if (!gitPanel || gitPanel.classList.contains("hidden")) { if (cb) cb(); return; }
+    gitPanel.classList.remove("fb-enter");
+    gitPanel.classList.add("fb-exit");
+    function onDone(e) {
+      if (e.target !== gitPanel) return;
+      gitPanel.removeEventListener("animationend", onDone);
+      gitPanel.classList.remove("fb-exit");
+      gitPanel.classList.add("hidden");
+      if (cb) cb();
+    }
+    gitPanel.addEventListener("animationend", onDone);
+  }
+
   if (fileBrowserBtn) {
     // Clicking the tile toggles: open if closed, close (back to sessions)
     // if it's already the visible panel. Same behavior via the Cmd+O
@@ -187,6 +216,19 @@ export function initSidebar(_ctx) {
       });
     });
   }
+  if (gitBtn) {
+    gitBtn.addEventListener("click", function () {
+      if (gitPanel && !gitPanel.classList.contains("hidden")) {
+        hideGitPanel(function () { showSessionsPanel(); });
+      }
+      else showGitPanel();
+    });
+  }
+  if (gitPanelClose) {
+    gitPanelClose.addEventListener("click", function () {
+      hideGitPanel(function () { showSessionsPanel(); });
+    });
+  }
 
   // --- User island width sync ---
   var userIsland = document.getElementById("user-island");

package/lib/public/modules/tool-palette.js

@@ -25,7 +25,7 @@ var SESSION_TOOLS = [
   { id: "sticky-notes-sidebar-btn", icon: "sticky-note",   label: "Sticky Notes",    countId: "sticky-notes-sidebar-count" },
   { id: "scheduler-btn",           icon: "calendar-clock", label: "Scheduled Tasks" },
   { id: "loop-tool-btn",           icon: "repeat",         label: "Loop" },
-  { id: "email-sidebar-btn",       icon: "mail",           label: "Email" },
+  { id: "git-sidebar-btn",         icon: "git-branch",     label: "Git",             countId: "git-sidebar-count" },
   { id: "mcp-btn",                 icon: "cable",          label: "MCP Servers",     countId: "mcp-sidebar-count" },
   { id: "skills-btn",              icon: "puzzle",         label: "Skills" },
 ];
@@ -36,7 +36,6 @@ var MATE_TOOLS = [
   { id: "mate-sticky-notes-btn", icon: "sticky-note",    label: "Sticky Notes" },
   { id: "mate-scheduler-btn",    icon: "calendar-clock", label: "Scheduled Tasks" },
   { id: "mate-debate-btn",       icon: "mic",            label: "Debate" },
-  { id: "mate-email-btn",        icon: "mail",           label: "Email" },
   { id: "mate-mcp-btn",          icon: "cable",          label: "MCP Servers",     countId: "mate-mcp-sidebar-count" },
   { id: "mate-skills-btn",       icon: "puzzle",         label: "Skills" },
 ];

package/lib/public/modules/worker-proposal.js

@@ -0,0 +1,239 @@
+import { getWs } from './ws-ref.js';
+import { addToMessages, scrollToBottom, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { effortLevelsFor, effortDisplayName } from './app-panels.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+function optionValue(entry) {
+  if (typeof entry === "string") return entry;
+  return entry && (entry.value || entry.id) || "";
+}
+
+function optionLabel(entry) {
+  if (typeof entry === "string") return entry;
+  return entry && (entry.displayName || entry.name || entry.value || entry.id) || "";
+}
+
+function findCard(proposalId) {
+  var cards = document.querySelectorAll(".worker-proposal-card");
+  for (var i = 0; i < cards.length; i++) {
+    if (cards[i].dataset.proposalId === proposalId) return cards[i];
+  }
+  return null;
+}
+
+function planSteps(plan) {
+  return String(plan || "").split("\n").map(function (line) {
+    return line.trim().replace(/^\s*(?:\d+[.)]|[-*])\s*/, "");
+  }).filter(Boolean).slice(0, 8);
+}
+
+function buildVendorSelect(msg) {
+  var select = document.createElement("select");
+  select.className = "worker-proposal-select worker-proposal-vendor";
+  var installed = (msg.options && msg.options.installedVendors) || [];
+  for (var i = 0; i < installed.length; i++) {
+    var option = document.createElement("option");
+    option.value = installed[i];
+    option.textContent = VENDOR_NAMES[installed[i]] || installed[i];
+    select.appendChild(option);
+  }
+  if (installed.indexOf(msg.recommendedVendor) !== -1) select.value = msg.recommendedVendor;
+  return select;
+}
+
+function fillModels(select, vendor, msg, preferred) {
+  var models = (msg.options && msg.options.modelsByVendor && msg.options.modelsByVendor[vendor]) || [];
+  select.innerHTML = "";
+  var automatic = document.createElement("option");
+  automatic.value = "";
+  automatic.textContent = "Automatic";
+  select.appendChild(automatic);
+  for (var i = 0; i < models.length; i++) {
+    var option = document.createElement("option");
+    option.value = optionValue(models[i]);
+    option.textContent = optionLabel(models[i]);
+    select.appendChild(option);
+  }
+  select.value = preferred || "";
+  if (select.value !== (preferred || "")) select.value = "";
+}
+
+function fillEffort(card, vendor, model, msg, preferred) {
+  var wrap = card.querySelector(".worker-proposal-effort");
+  var buttons = card.querySelector(".worker-proposal-effort-buttons");
+  var capabilities = (msg.options && msg.options.capabilitiesByVendor && msg.options.capabilitiesByVendor[vendor]) || {};
+  if (capabilities.effort === false) {
+    wrap.classList.add("hidden");
+    buttons.innerHTML = "";
+    return;
+  }
+  wrap.classList.remove("hidden");
+  var models = (msg.options && msg.options.modelsByVendor && msg.options.modelsByVendor[vendor]) || [];
+  var levels = effortLevelsFor(vendor, models, model);
+  buttons.innerHTML = "";
+  var selected = levels.indexOf(preferred) !== -1 ? preferred : (levels.indexOf("medium") !== -1 ? "medium" : levels[0]);
+  for (var i = 0; i < levels.length; i++) {
+    var button = document.createElement("button");
+    button.type = "button";
+    button.className = "worker-proposal-effort-btn" + (levels[i] === selected ? " active" : "");
+    button.dataset.effort = levels[i];
+    button.textContent = effortDisplayName(levels[i]);
+    button.addEventListener("click", function () {
+      buttons.querySelectorAll("button").forEach(function (item) { item.classList.remove("active"); });
+      this.classList.add("active");
+    });
+    buttons.appendChild(button);
+  }
+}
+
+function setControlsDisabled(card, disabled) {
+  var controls = card.querySelectorAll("select, .worker-proposal-effort-btn, .worker-proposal-action");
+  for (var i = 0; i < controls.length; i++) controls[i].disabled = disabled;
+}
+
+function statusLabel(status) {
+  if (status === "starting") return "Starting Worker";
+  if (status === "running") return "Worker running";
+  if (status === "completed") return "Completed";
+  if (status === "declined") return "Continuing here";
+  if (status === "error") return "Needs attention";
+  return "Suggested by Fable";
+}
+
+function applyState(card, msg) {
+  var status = msg.status || "pending";
+  card.dataset.status = status;
+  var badge = card.querySelector(".worker-proposal-status");
+  if (badge) badge.textContent = statusLabel(status);
+  var error = card.querySelector(".worker-proposal-error");
+  if (error) {
+    error.textContent = msg.error || "";
+    error.classList.toggle("hidden", !msg.error);
+  }
+  var preview = card.querySelector(".worker-proposal-result");
+  if (preview && msg.resultPreview) {
+    preview.textContent = msg.resultPreview;
+    preview.classList.remove("hidden");
+  }
+  setControlsDisabled(card, status !== "pending");
+}
+
+function sendDecision(card, accepted) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1 || card.dataset.status !== "pending") return;
+  var vendor = card.querySelector(".worker-proposal-vendor");
+  var model = card.querySelector(".worker-proposal-model");
+  var effort = card.querySelector(".worker-proposal-effort-btn.active");
+  applyState(card, { status: accepted ? "starting" : "declined" });
+  ws.send(JSON.stringify({
+    type: "worker_proposal_response",
+    proposalId: card.dataset.proposalId,
+    accepted: accepted,
+    vendor: vendor ? vendor.value : "",
+    model: model ? model.value : "",
+    effort: effort ? effort.dataset.effort : "",
+  }));
+}
+
+export function renderWorkerProposal(msg) {
+  var existing = findCard(msg.proposalId);
+  if (existing) {
+    applyState(existing, msg);
+    return;
+  }
+  var card = document.createElement("section");
+  card.className = "worker-proposal-card";
+  card.dataset.proposalId = msg.proposalId;
+  card.dataset.status = msg.status || "pending";
+
+  var header = document.createElement("div");
+  header.className = "worker-proposal-header";
+  header.innerHTML = '<div class="worker-proposal-mark">' + iconHtml("git-branch") + '</div><div class="worker-proposal-heading"><span class="worker-proposal-kicker">DRIVER / WORKER</span><strong>Let a Worker handle the execution</strong></div><span class="worker-proposal-status"></span>';
+  card.appendChild(header);
+
+  var summary = document.createElement("p");
+  summary.className = "worker-proposal-summary";
+  summary.textContent = msg.summary || "This task can be planned here and executed in a visible Worker session.";
+  card.appendChild(summary);
+
+  var steps = planSteps(msg.plan);
+  if (steps.length > 0) {
+    var plan = document.createElement("ol");
+    plan.className = "worker-proposal-plan";
+    for (var i = 0; i < steps.length; i++) {
+      var item = document.createElement("li");
+      item.textContent = steps[i];
+      plan.appendChild(item);
+    }
+    card.appendChild(plan);
+  }
+
+  var config = document.createElement("div");
+  config.className = "worker-proposal-config";
+  var vendorField = document.createElement("label");
+  vendorField.className = "worker-proposal-field worker-proposal-vendor-field";
+  vendorField.innerHTML = '<span>Worker</span><span class="worker-proposal-vendor-control"><img alt=""></span>';
+  var vendorSelect = buildVendorSelect(msg);
+  vendorField.querySelector(".worker-proposal-vendor-control").appendChild(vendorSelect);
+  config.appendChild(vendorField);
+  var modelField = document.createElement("label");
+  modelField.className = "worker-proposal-field";
+  modelField.innerHTML = "<span>Model</span>";
+  var modelSelect = document.createElement("select");
+  modelSelect.className = "worker-proposal-select worker-proposal-model";
+  modelField.appendChild(modelSelect);
+  config.appendChild(modelField);
+  var effortField = document.createElement("div");
+  effortField.className = "worker-proposal-field worker-proposal-effort";
+  effortField.innerHTML = '<span>Reasoning</span><div class="worker-proposal-effort-buttons"></div>';
+  config.appendChild(effortField);
+  card.appendChild(config);
+
+  function syncVendor(preferredModel, preferredEffort) {
+    var vendor = vendorSelect.value;
+    var avatar = vendorField.querySelector("img");
+    avatar.src = VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude;
+    fillModels(modelSelect, vendor, msg, preferredModel);
+    fillEffort(card, vendor, modelSelect.value, msg, preferredEffort);
+  }
+  vendorSelect.addEventListener("change", function () { syncVendor("", "medium"); });
+  modelSelect.addEventListener("change", function () {
+    var active = card.querySelector(".worker-proposal-effort-btn.active");
+    fillEffort(card, vendorSelect.value, modelSelect.value, msg, active ? active.dataset.effort : "medium");
+  });
+  syncVendor(msg.recommendedModel || "", msg.recommendedEffort || "medium");
+
+  var error = document.createElement("div");
+  error.className = "worker-proposal-error hidden";
+  card.appendChild(error);
+  var result = document.createElement("div");
+  result.className = "worker-proposal-result hidden";
+  card.appendChild(result);
+
+  var actions = document.createElement("div");
+  actions.className = "worker-proposal-actions";
+  var decline = document.createElement("button");
+  decline.type = "button";
+  decline.className = "worker-proposal-action secondary";
+  decline.textContent = "Continue here";
+  decline.addEventListener("click", function () { sendDecision(card, false); });
+  var accept = document.createElement("button");
+  accept.type = "button";
+  accept.className = "worker-proposal-action primary";
+  accept.innerHTML = iconHtml("panel-right-open") + "<span>Run with Worker</span>";
+  accept.addEventListener("click", function () { sendDecision(card, true); });
+  actions.appendChild(decline);
+  actions.appendChild(accept);
+  card.appendChild(actions);
+
+  addToMessages(card);
+  applyState(card, msg);
+  refreshIcons();
+  scrollToBottom();
+}
+
+export function updateWorkerProposal(msg) {
+  var card = findCard(msg.proposalId);
+  if (!card) return;
+  applyState(card, msg);
+}

package/lib/public/style.css

@@ -2,6 +2,7 @@
 @import url("css/icon-strip.css");
 @import url("css/title-bar.css");
 @import url("css/pane.css");
+@import url("css/worker-proposal.css");
 @import url("css/sidebar.css");
 @import url("css/overlays.css");
 @import url("css/menus.css");
@@ -9,6 +10,7 @@
 @import url("css/rewind.css");
 @import url("css/input.css");
 @import url("css/filebrowser.css");
+@import url("css/git-panel.css");
 @import url("css/diff.css");
 @import url("css/highlight.css");
 @import url("css/server-settings.css");