@lasso-ai/cli 1.2.1 → 1.2.3

package/dist/overlay.js

@@ -8093,41 +8093,8 @@
     }
 
     .lasso-toolbar-mini {
-      position: fixed;
-      left: calc(50% + 280px);
-      bottom: 24px;
-      display: inline-flex;
-      align-items: center;
-      min-height: 48px;
-      padding: 6px;
-      border: 1px solid var(--lo-border);
-      border-radius: var(--lo-radius-full);
-      background: rgba(22, 23, 27, 0.94);
-      box-shadow: var(--lo-shadow-lg);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      pointer-events: auto;
-      z-index: 10;
-    }
-    .lasso-toolbar-mini.dismissed { display: none; }
-    .lasso-new-page-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: 34px;
-      padding: 0 12px;
-      border: 0;
-      border-radius: var(--lo-radius-full);
-      background: var(--lo-primary);
-      color: #111214;
-      font: inherit;
-      font-size: 12px;
-      font-weight: 650;
-      cursor: pointer;
-      transition: transform 150ms ease, filter 150ms ease;
+      display: none;
     }
-    .lasso-new-page-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
-    .lasso-new-page-btn:active { transform: scale(.97); }
 
     /* ==========================================================
        NEW PAGE \u2014 nested project explorer
@@ -8343,6 +8310,26 @@
       color: var(--lo-error);
     }
 
+    /* Command button */
+    .lasso-tool-btn.command-tool {
+      color: var(--lo-text-2);
+    }
+
+    .lasso-tool-btn.command-tool:hover {
+      color: var(--lo-primary);
+      background: rgba(129, 201, 149, 0.16);
+    }
+
+    /* Page button */
+    .lasso-tool-btn.page-tool {
+      color: var(--lo-text-2);
+    }
+
+    .lasso-tool-btn.page-tool:hover {
+      color: var(--lo-primary);
+      background: rgba(129, 201, 149, 0.16);
+    }
+
     /* Badge on comment button */
     .lasso-comments-badge {
       display: none;
@@ -8416,7 +8403,6 @@
     }
 
     @media (max-width: 760px) {
-      .lasso-toolbar-mini { left: 50%; bottom: 82px; transform: translateX(-50%); }
       .lasso-new-page-panel { left: 50%; transform: translateX(-50%); }
     }
 
@@ -9841,6 +9827,15 @@
       background: var(--lo-surface-hover);
     }
 
+    .lasso-prompt-model-item.locked {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .lasso-prompt-model-item.locked:hover {
+      background: transparent;
+    }
+
     .lasso-prompt-model-item .lasso-prompt-model-check {
       flex-shrink: 0;
       color: var(--lo-primary);
@@ -9851,6 +9846,11 @@
       opacity: 1;
     }
 
+    .lasso-prompt-model-item .lasso-prompt-model-lock {
+      flex-shrink: 0;
+      color: var(--lo-text-3);
+    }
+
     .lasso-prompt-element {
       min-width: 0;
       margin-left: auto;
@@ -11080,47 +11080,19 @@
     .lasso-agent-prompt-actions button:active { transform: scale(0.97); }
 
     /* ==========================================================
-       COMMAND BAR (One-Shot Build Mode)
+       COMMAND SIDEBAR (One-Shot Build Mode)
        ========================================================== */
 
-    .lasso-command-backdrop {
-      position: fixed;
-      inset: 0;
-      z-index: 100;
-      background: rgba(8, 9, 11, 0.6);
-      backdrop-filter: blur(4px);
-      -webkit-backdrop-filter: blur(4px);
-      pointer-events: auto;
-    }
-
-    .lasso-command-backdrop[hidden] {
-      display: none;
-    }
-
-    .lasso-command-bar {
+    .lasso-command-sidebar {
       position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 101;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      pointer-events: none;
-    }
-
-    .lasso-command-bar[hidden] {
-      display: none;
-    }
-
-    .lasso-command-card {
-      width: min(600px, calc(100vw - 48px));
-      max-height: calc(100vh - 48px);
+      top: 16px;
+      right: 16px;
+      bottom: 16px;
+      width: 380px;
+      max-width: calc(100vw - 32px);
       display: flex;
       flex-direction: column;
-      padding: 20px;
+      padding: 0;
       border: 1px solid var(--lo-border);
       border-radius: var(--lo-radius-xl);
       background: rgba(24, 25, 29, 0.98);
@@ -11130,12 +11102,17 @@
       box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
       pointer-events: auto;
       animation: lasso-command-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+      z-index: 100;
+    }
+
+    .lasso-command-sidebar[hidden] {
+      display: none;
     }
 
     @keyframes lasso-command-in {
       from {
         opacity: 0;
-        transform: translateY(12px) scale(0.98);
+        transform: translateX(12px);
       }
       to {
         opacity: 1;
@@ -11143,11 +11120,12 @@
       }
     }
 
-    .lasso-command-header {
+    .lasso-command-sidebar-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 16px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--lo-border);
     }
 
     .lasso-command-brand {
@@ -11157,12 +11135,12 @@
     }
 
     .lasso-command-brand-logo {
-      width: 28px;
-      height: 28px;
+      width: 24px;
+      height: 24px;
     }
 
     .lasso-command-brand-title {
-      font-size: 15px;
+      font-size: 14px;
       font-weight: 600;
       letter-spacing: -0.01em;
     }
@@ -11186,10 +11164,124 @@
       color: var(--lo-text);
     }
 
-    .lasso-command-body {
+    .lasso-command-sidebar-body {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 20px;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .lasso-command-model-select {
+      position: relative;
+    }
+
+    .lasso-command-model-btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-md);
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease;
+    }
+
+    .lasso-command-model-btn:hover {
+      border-color: var(--lo-primary);
+      background: var(--lo-surface-hover);
+    }
+
+    .lasso-command-model-icon {
+      flex: 0 0 auto;
+    }
+
+    .lasso-command-model-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .lasso-command-model-chevron {
+      flex: 0 0 auto;
+      transition: transform 200ms ease;
+    }
+
+    .lasso-command-model-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      max-height: 320px;
+      overflow-y: auto;
+      padding: 8px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-lg);
+      background: rgba(24, 25, 29, 0.98);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      color: var(--lo-text);
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+      z-index: 10;
+    }
+
+    .lasso-command-model-section {
+      margin-bottom: 8px;
+    }
+
+    .lasso-command-model-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .lasso-command-model-section-header {
+      padding: 4px 8px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--lo-text-3);
+    }
+
+    .lasso-command-model-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      border: 0;
+      border-radius: var(--lo-radius-md);
+      background: transparent;
+      color: var(--lo-text);
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 450;
+      text-align: left;
+      cursor: pointer;
+      transition: background 120ms ease;
+    }
+
+    .lasso-command-model-item:hover {
+      background: var(--lo-surface-hover);
+    }
+
+    .lasso-command-model-item.selected {
+      background: rgba(129, 201, 149, 0.16);
+      color: var(--lo-primary);
+    }
+
+    .lasso-command-input-wrapper {
+      flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 12px;
     }
 
     .lasso-command-input {
@@ -17378,8 +17470,8 @@
       const pin = document.createElement("button");
       pin.type = "button";
       const isResolved = thread.root.status === "RESOLVED";
-      const isOpen2 = state.openThreadUid === thread.root.uid;
-      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen2 ? " active" : ""}`;
+      const isOpen = state.openThreadUid === thread.root.uid;
+      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen ? " active" : ""}`;
       pin.dataset.commentUid = thread.root.uid;
       const authorColor = userNameColor(thread.root.author?.id || "");
       const authorInitials = initials(thread.root.author?.name || "");
@@ -19019,8 +19111,17 @@
           }
           if (message.type === "config" && message.models?.length) {
             state.MODELS = message.models;
-            state.selectedModel = state.MODELS.find((m) => m.id === storedModelId()) || state.MODELS[0];
-            rememberModel(state.selectedModel);
+            const currentLocked = state.selectedModel?.locked;
+            if (currentLocked) {
+              const firstUnlocked = state.MODELS.find((m) => !m.locked);
+              if (firstUnlocked) {
+                state.selectedModel = firstUnlocked;
+                rememberModel(state.selectedModel);
+              }
+            } else {
+              state.selectedModel = state.MODELS.find((m) => m.id === storedModelId()) || state.MODELS.find((m) => !m.locked) || state.MODELS[0];
+              rememberModel(state.selectedModel);
+            }
             refreshModelMenu();
           }
           if (message.type === "git_state" && message.git) {
@@ -19649,7 +19750,7 @@
         return;
       }
       const item = event.target.closest(".lasso-prompt-model-item");
-      if (!item) return;
+      if (!item || item.classList.contains("locked")) return;
       const found = state.MODELS.find((m) => m.id === item.dataset.model);
       if (!found) return;
       state.selectedModel = found;
@@ -19889,6 +19990,7 @@
     if (key === "claude-code") return "Claude Code";
     if (key === "codex") return "Codex";
     if (key === "opencode") return "OpenCode";
+    if (key === "cursor") return "Cursor";
     return key;
   }
   function modelItem(model) {
@@ -19896,7 +19998,15 @@
     item.type = "button";
     item.className = "lasso-prompt-model-item";
     item.dataset.model = model.id;
-    item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>`;
+    if (model.locked) {
+      item.classList.add("locked");
+      item.disabled = true;
+      item.setAttribute("aria-disabled", "true");
+      item.setAttribute("title", model.lockedReason || "This model is locked");
+      item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-lock" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
+    } else {
+      item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>`;
+    }
     return item;
   }
   function syncModelMenu2() {
@@ -21640,59 +21750,307 @@
     return panelEl ? !panelEl.hidden : false;
   }
 
-  // src/overlay/toolbar/toolbar.ts
-  var COMMENT_CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32"><defs><filter id="s" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="rgba(0,0,0,0.5)"/></filter></defs><g filter="url(#s)"><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="#7C3AED"/><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/><line x1="12" y1="7" x2="12" y2="15" stroke="white" stroke-width="1.8" stroke-linecap="round"/><line x1="8" y1="11" x2="16" y2="11" stroke="white" stroke-width="1.8" stroke-linecap="round"/></g></svg>`;
-  var COMMENT_CURSOR_URL = `url("data:image/svg+xml,${encodeURIComponent(COMMENT_CURSOR_SVG)}") 4 2, crosshair`;
-  var COMMENT_CURSOR_STYLE_ID = "lasso-comment-cursor-style";
-  function setCommentCursor(active) {
-    let style = document.getElementById(COMMENT_CURSOR_STYLE_ID);
-    if (active) {
-      if (!style) {
-        style = document.createElement("style");
-        style.id = COMMENT_CURSOR_STYLE_ID;
-        document.head.appendChild(style);
-      }
-      style.textContent = `html.lasso-comment-mode, html.lasso-comment-mode * { cursor: ${COMMENT_CURSOR_URL} !important; }`;
-      document.documentElement.classList.add("lasso-comment-mode");
-      document.documentElement.style.setProperty("cursor", COMMENT_CURSOR_URL, "important");
-      document.body.style.setProperty("cursor", COMMENT_CURSOR_URL, "important");
-      return;
-    }
-    document.documentElement.classList.remove("lasso-comment-mode");
-    document.documentElement.style.removeProperty("cursor");
-    document.body.style.removeProperty("cursor");
-    style?.remove();
-  }
-  function setCommentMode(active) {
-    state.commentMode = active;
-    if (active) state.previewMode = false;
-    const dom = getDOM();
-    const commentBtn = dom.shadow.querySelector(".comment-tool");
-    const previewBtn = dom.shadow.querySelector(".preview-tool");
-    if (commentBtn) commentBtn.classList.toggle("active", active);
-    if (previewBtn) previewBtn.classList.toggle("active", state.previewMode);
-    if (active) {
-      setSelectMode(false);
-      setDragMode(false);
-      setCommentCursor(true);
-    } else {
-      setCommentCursor(false);
-      if (state.selectMode) {
-        document.documentElement.style.cursor = "default";
-      }
-    }
-  }
-  function buildToolbar() {
+  // src/overlay/commandbar/commandbar.ts
+  var commandBarEl = null;
+  var commandInput = null;
+  var commandSubmit = null;
+  var commandVoice = null;
+  var commandClose = null;
+  var commandModelBtn = null;
+  var commandModelMenu = null;
+  var commandModelIcon = null;
+  var commandModelLabel = null;
+  var isOneShotMode = false;
+  function buildCommandBar() {
     const dom = getDOM();
-    const toolbar = document.createElement("div");
-    toolbar.className = "lasso-toolbar";
-    toolbar.innerHTML = `
-    <button class="lasso-tool-btn select-tool" type="button" aria-label="Select element" title="Select">
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M4 4l7.07 17 2.51-7.39L21 11.07 4 4z"/>
-      </svg>
-      <span class="lasso-tool-label">Select</span>
-    </button>
+    const el = document.createElement("div");
+    el.className = "lasso-command-sidebar";
+    el.hidden = true;
+    el.innerHTML = `
+    <div class="lasso-command-sidebar-header">
+      <div class="lasso-command-brand">
+        <img class="lasso-command-brand-logo" src="${LASSO_ICON_DATA_URL}" alt="Lasso" />
+        <span class="lasso-command-brand-title">Build with AI</span>
+      </div>
+      <button class="lasso-command-close" type="button" aria-label="Close">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="lasso-command-sidebar-body">
+      <div class="lasso-command-model-select">
+        <button class="lasso-command-model-btn" type="button" aria-label="Select model">
+          <span class="lasso-command-model-icon"></span>
+          <span class="lasso-command-model-label"></span>
+          <svg class="lasso-command-model-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+        <div class="lasso-command-model-menu" hidden></div>
+      </div>
+
+      <div class="lasso-command-input-wrapper">
+        <textarea 
+          class="lasso-command-input" 
+          placeholder="Describe what you want to build...&#10;&#10;Examples:&#10;\u2022 Build a settings page with profile, notifications and security sections&#10;\u2022 Add authentication with login and signup&#10;\u2022 Create a dashboard with customer table and analytics"
+          rows="6"
+        ></textarea>
+      </div>
+      
+      <div class="lasso-command-actions">
+        <button class="lasso-command-voice" type="button" aria-label="Voice input" title="Voice input (speech-to-text)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="3" width="6" height="11" rx="3"/>
+            <path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/>
+          </svg>
+        </button>
+
+        <button class="lasso-command-submit primary" type="button" aria-label="Build">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+          <span>Build</span>
+        </button>
+      </div>
+
+      <div class="lasso-command-shortcuts">
+        <span class="lasso-command-shortcut">
+          <kbd>\u2318</kbd><kbd>K</kbd>
+          <span>Toggle one-shot mode</span>
+        </span>
+        <span class="lasso-command-shortcut">
+          <kbd>\u2318</kbd><kbd>\u21B5</kbd>
+          <span>Submit</span>
+        </span>
+      </div>
+    </div>
+  `;
+    dom.shadow.appendChild(el);
+    commandBarEl = el;
+    commandInput = el.querySelector(".lasso-command-input");
+    commandSubmit = el.querySelector(".lasso-command-submit");
+    commandVoice = el.querySelector(".lasso-command-voice");
+    commandClose = el.querySelector(".lasso-command-close");
+    commandModelBtn = el.querySelector(".lasso-command-model-btn");
+    commandModelMenu = el.querySelector(".lasso-command-model-menu");
+    commandModelIcon = el.querySelector(".lasso-command-model-icon");
+    commandModelLabel = el.querySelector(".lasso-command-model-label");
+    commandModelBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (commandModelMenu) commandModelMenu.hidden = !commandModelMenu.hidden;
+    });
+    commandModelMenu.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const item = event.target.closest(".lasso-command-model-item");
+      if (!item) return;
+      const found = state.MODELS.find((m) => m.id === item.dataset.model);
+      if (!found) return;
+      state.selectedModel = found;
+      if (commandModelIcon && commandModelLabel) {
+        commandModelIcon.innerHTML = providerIcon(found.provider, true);
+        commandModelLabel.textContent = found.label;
+      }
+      if (commandModelMenu) commandModelMenu.hidden = true;
+    });
+    document.addEventListener("click", (event) => {
+      if (!commandModelMenu || commandModelMenu.hidden) return;
+      const path = event.composedPath ? event.composedPath() : [];
+      if (path.includes(commandModelBtn) || path.includes(commandModelMenu)) return;
+      const target = event.target;
+      if (commandModelBtn?.contains(target) || commandModelMenu?.contains(target)) return;
+      commandModelMenu.hidden = true;
+    });
+    commandClose.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closeCommandBar();
+    });
+    commandVoice.addEventListener("click", async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (isRecordingVoice()) {
+        commandVoice.classList.remove("recording");
+        commandVoice.classList.add("transcribing");
+        commandVoice.title = "Transcribing\u2026";
+        try {
+          const result = await stopVoiceRecording();
+          if (result.text && commandInput) {
+            const prev = commandInput.value.trim();
+            commandInput.value = prev ? `${prev} ${result.text}` : result.text;
+            commandInput.focus();
+            autoResizeTextarea(commandInput);
+            showActivity("Transcribed", "#81c995");
+          } else {
+            showActivity("No speech detected.", "#fdd663");
+          }
+        } catch (err) {
+          showActivity(err?.message || "Transcription failed", "#f28b82");
+        } finally {
+          commandVoice.classList.remove("transcribing");
+          commandVoice.title = "Voice input";
+        }
+      } else {
+        try {
+          await startVoiceRecording();
+          commandVoice.classList.add("recording");
+          commandVoice.title = "Recording\u2026 Click again to stop";
+          showActivity("Listening\u2026 speak now", "#ea4335");
+        } catch (err) {
+          showActivity(err?.message || "Microphone access denied", "#f28b82");
+        }
+      }
+    });
+    commandInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    });
+    commandSubmit.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      handleSubmit();
+    });
+    commandInput.addEventListener("input", () => {
+      if (commandInput) autoResizeTextarea(commandInput);
+    });
+    commandInput.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeCommandBar();
+      }
+    });
+  }
+  function autoResizeTextarea(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }
+  function openCommandBar() {
+    if (!commandBarEl) return;
+    commandBarEl.hidden = false;
+    isOneShotMode = true;
+    if (commandInput) {
+      commandInput.value = "";
+      commandInput.focus();
+      autoResizeTextarea(commandInput);
+    }
+    if (commandModelIcon && commandModelLabel && state.selectedModel) {
+      commandModelIcon.innerHTML = providerIcon(state.selectedModel.provider, true);
+      commandModelLabel.textContent = state.selectedModel.label;
+    }
+    populateModelMenu();
+  }
+  function closeCommandBar() {
+    if (!commandBarEl) return;
+    commandBarEl.hidden = true;
+    isOneShotMode = false;
+    if (commandInput) {
+      commandInput.value = "";
+    }
+  }
+  function isCommandBarOpen() {
+    return isOneShotMode;
+  }
+  function populateModelMenu() {
+    if (!commandModelMenu) return;
+    commandModelMenu.innerHTML = "";
+    const providers = ["all", ...Array.from(new Set(state.MODELS.map((m) => m.provider)))];
+    for (const provider of providers) {
+      const section = document.createElement("div");
+      section.className = "lasso-command-model-section";
+      if (provider !== "all") {
+        const header = document.createElement("div");
+        header.className = "lasso-command-model-section-header";
+        header.textContent = provider === "anthropic" ? "Anthropic" : provider === "openai" ? "OpenAI" : provider === "google" ? "Google" : provider === "ollama" ? "Ollama" : provider === "cli" ? "Local Agents" : provider;
+        section.appendChild(header);
+      }
+      const models = provider === "all" ? state.MODELS : state.MODELS.filter((m) => m.provider === provider);
+      for (const model of models) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "lasso-command-model-item";
+        item.dataset.model = model.id;
+        item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span>`;
+        if (model.id === state.selectedModel.id) {
+          item.classList.add("selected");
+        }
+        section.appendChild(item);
+      }
+      commandModelMenu.appendChild(section);
+    }
+  }
+  async function handleSubmit() {
+    if (!commandInput) return;
+    const prompt = commandInput.value.trim();
+    if (!prompt) return;
+    closeCommandBar();
+    if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
+      state.bridgeSocket.send(JSON.stringify({
+        type: "oneshot",
+        prompt,
+        scope: "project",
+        model: state.selectedModel.id,
+        provider: state.selectedModel.provider === "cli" ? "cli" : void 0
+      }));
+    }
+  }
+
+  // src/overlay/toolbar/toolbar.ts
+  var COMMENT_CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32"><defs><filter id="s" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="rgba(0,0,0,0.5)"/></filter></defs><g filter="url(#s)"><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="#7C3AED"/><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/><line x1="12" y1="7" x2="12" y2="15" stroke="white" stroke-width="1.8" stroke-linecap="round"/><line x1="8" y1="11" x2="16" y2="11" stroke="white" stroke-width="1.8" stroke-linecap="round"/></g></svg>`;
+  var COMMENT_CURSOR_URL = `url("data:image/svg+xml,${encodeURIComponent(COMMENT_CURSOR_SVG)}") 4 2, crosshair`;
+  var COMMENT_CURSOR_STYLE_ID = "lasso-comment-cursor-style";
+  function setCommentCursor(active) {
+    let style = document.getElementById(COMMENT_CURSOR_STYLE_ID);
+    if (active) {
+      if (!style) {
+        style = document.createElement("style");
+        style.id = COMMENT_CURSOR_STYLE_ID;
+        document.head.appendChild(style);
+      }
+      style.textContent = `html.lasso-comment-mode, html.lasso-comment-mode * { cursor: ${COMMENT_CURSOR_URL} !important; }`;
+      document.documentElement.classList.add("lasso-comment-mode");
+      document.documentElement.style.setProperty("cursor", COMMENT_CURSOR_URL, "important");
+      document.body.style.setProperty("cursor", COMMENT_CURSOR_URL, "important");
+      return;
+    }
+    document.documentElement.classList.remove("lasso-comment-mode");
+    document.documentElement.style.removeProperty("cursor");
+    document.body.style.removeProperty("cursor");
+    style?.remove();
+  }
+  function setCommentMode(active) {
+    state.commentMode = active;
+    if (active) state.previewMode = false;
+    const dom = getDOM();
+    const commentBtn = dom.shadow.querySelector(".comment-tool");
+    const previewBtn = dom.shadow.querySelector(".preview-tool");
+    if (commentBtn) commentBtn.classList.toggle("active", active);
+    if (previewBtn) previewBtn.classList.toggle("active", state.previewMode);
+    if (active) {
+      setSelectMode(false);
+      setDragMode(false);
+      setCommentCursor(true);
+    } else {
+      setCommentCursor(false);
+      if (state.selectMode) {
+        document.documentElement.style.cursor = "default";
+      }
+    }
+  }
+  function buildToolbar() {
+    const dom = getDOM();
+    const toolbar = document.createElement("div");
+    toolbar.className = "lasso-toolbar";
+    toolbar.innerHTML = `
+    <button class="lasso-tool-btn select-tool" type="button" aria-label="Select element" title="Select">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 4l7.07 17 2.51-7.39L21 11.07 4 4z"/>
+      </svg>
+      <span class="lasso-tool-label">Select</span>
+    </button>
 
     <button class="lasso-tool-btn drag-tool" type="button" aria-label="Drag element to reposition" title="Drag to Reposition">
       <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -21767,6 +22125,23 @@
       </svg>
     </button>
 
+    <button class="lasso-tool-btn command-tool" type="button" aria-label="Command bar" title="Command bar (\u2318K)">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 2v20M2 12h20"/>
+        <circle cx="12" cy="12" r="9"/>
+      </svg>
+      <span class="lasso-tool-label">Command</span>
+    </button>
+
+    <button class="lasso-tool-btn page-tool" type="button" aria-label="Create a new page" title="New page">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <path d="M14 2v6h6"/>
+        <path d="M12 12v6M9 15h6"/>
+      </svg>
+      <span class="lasso-tool-label">New Page</span>
+    </button>
+
     <div class="lasso-presence" style="display: none;">
       <div class="lasso-presence-avatars"></div>
       <span class="lasso-presence-count"></span>
@@ -21813,16 +22188,7 @@
   `;
     const miniToolbar = document.createElement("div");
     miniToolbar.className = "lasso-toolbar-mini";
-    miniToolbar.innerHTML = `
-    <button class="lasso-new-page-btn" type="button" aria-label="Create a new page" title="New page">
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-        <path d="M14 2v6h6"/>
-        <path d="M12 12v6M9 15h6"/>
-      </svg>
-      <span>New Page</span>
-    </button>
-  `;
+    miniToolbar.style.display = "none";
     dom.shadow.append(toolbar, miniToolbar, toolbarReopen, voiceBar);
     const tooltip = document.createElement("div");
     tooltip.className = "lasso-toolbar-tooltip";
@@ -21854,13 +22220,6 @@
       target.addEventListener("focusin", () => showTooltip(target));
       target.addEventListener("focusout", () => hideTooltip(target));
     });
-    miniToolbar.querySelectorAll("[title]").forEach((target) => {
-      target.dataset.tooltip = target.getAttribute("title") || "";
-      target.addEventListener("pointerenter", () => showTooltip(target));
-      target.addEventListener("pointerleave", () => hideTooltip(target));
-      target.addEventListener("focusin", () => showTooltip(target));
-      target.addEventListener("focusout", () => hideTooltip(target));
-    });
     const selectBtn = toolbar.querySelector(".select-tool");
     const dragBtn = toolbar.querySelector(".drag-tool");
     const previewBtn = toolbar.querySelector(".preview-tool");
@@ -21871,9 +22230,10 @@
     const notepadBtn = toolbar.querySelector(".notepad-tool");
     const clipboardBtn = toolbar.querySelector(".clipboard-tool");
     const voiceBtn = toolbar.querySelector(".voice-tool");
+    const commandBtn = toolbar.querySelector(".command-tool");
+    const pageBtn = toolbar.querySelector(".page-tool");
     const dismissBtn = toolbar.querySelector(".lasso-toolbar-dismiss");
-    const newPageBtn = miniToolbar.querySelector(".lasso-new-page-btn");
-    newPageBtn.addEventListener("click", (event) => {
+    pageBtn.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
       togglePagePanel();
@@ -21934,6 +22294,11 @@
       e.preventDefault();
       if (state.voiceOn) setVoiceMuted(!state.voiceMuted);
     });
+    commandBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      openCommandBar();
+    });
     dismissBtn.addEventListener("click", () => {
       toolbar.classList.add("dismissed");
       miniToolbar.classList.add("dismissed");
@@ -21953,190 +22318,6 @@
     return { toolbar, voiceBar };
   }
 
-  // src/overlay/commandbar/commandbar.ts
-  var commandBarEl = null;
-  var commandInput = null;
-  var commandBackdrop = null;
-  var commandSubmit = null;
-  var commandVoice = null;
-  var commandClose = null;
-  var isOpen = false;
-  function buildCommandBar() {
-    const dom = getDOM();
-    const backdrop = document.createElement("div");
-    backdrop.className = "lasso-command-backdrop";
-    backdrop.hidden = true;
-    backdrop.innerHTML = ``;
-    dom.shadow.appendChild(backdrop);
-    commandBackdrop = backdrop;
-    const el = document.createElement("div");
-    el.className = "lasso-command-bar";
-    el.hidden = true;
-    el.innerHTML = `
-    <div class="lasso-command-card">
-      <div class="lasso-command-header">
-        <div class="lasso-command-brand">
-          <img class="lasso-command-brand-logo" src="${LASSO_ICON_DATA_URL}" alt="Lasso" />
-          <span class="lasso-command-brand-title">What do you want to build?</span>
-        </div>
-        <button class="lasso-command-close" type="button" aria-label="Close">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-
-      <div class="lasso-command-body">
-        <textarea 
-          class="lasso-command-input" 
-          placeholder="Describe what you want to build...&#10;&#10;Examples:&#10;\u2022 Build a settings page with profile, notifications and security sections&#10;\u2022 Add authentication with login and signup&#10;\u2022 Create a dashboard with customer table and analytics"
-          rows="3"
-        ></textarea>
-        
-        <div class="lasso-command-actions">
-          <div class="lasso-command-icon-group">
-            <button class="lasso-command-voice" type="button" aria-label="Voice input" title="Voice input (speech-to-text)">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="9" y="3" width="6" height="11" rx="3"/>
-                <path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/>
-              </svg>
-            </button>
-          </div>
-
-          <button class="lasso-command-submit primary" type="button" aria-label="Build">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M5 12h14M12 5l7 7-7 7"/>
-            </svg>
-            <span>Build</span>
-          </button>
-        </div>
-
-        <div class="lasso-command-shortcuts">
-          <span class="lasso-command-shortcut">
-            <kbd>\u2318</kbd><kbd>K</kbd>
-            <span>Open command bar</span>
-          </span>
-          <span class="lasso-command-shortcut">
-            <kbd>\u2318</kbd><kbd>\u21B5</kbd>
-            <span>Submit</span>
-          </span>
-          <span class="lasso-command-shortcut">
-            <kbd>Esc</kbd>
-            <span>Close</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  `;
-    dom.shadow.appendChild(el);
-    commandBarEl = el;
-    commandInput = el.querySelector(".lasso-command-input");
-    commandSubmit = el.querySelector(".lasso-command-submit");
-    commandVoice = el.querySelector(".lasso-command-voice");
-    commandClose = el.querySelector(".lasso-command-close");
-    backdrop.addEventListener("click", closeCommandBar);
-    commandClose.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      closeCommandBar();
-    });
-    commandVoice.addEventListener("click", async (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (isRecordingVoice()) {
-        commandVoice.classList.remove("recording");
-        commandVoice.classList.add("transcribing");
-        commandVoice.title = "Transcribing\u2026";
-        try {
-          const result = await stopVoiceRecording();
-          if (result.text && commandInput) {
-            const prev = commandInput.value.trim();
-            commandInput.value = prev ? `${prev} ${result.text}` : result.text;
-            commandInput.focus();
-            autoResizeTextarea(commandInput);
-            showActivity("Transcribed", "#81c995");
-          } else {
-            showActivity("No speech detected.", "#fdd663");
-          }
-        } catch (err) {
-          showActivity(err?.message || "Transcription failed", "#f28b82");
-        } finally {
-          commandVoice.classList.remove("transcribing");
-          commandVoice.title = "Voice input";
-        }
-      } else {
-        try {
-          await startVoiceRecording();
-          commandVoice.classList.add("recording");
-          commandVoice.title = "Recording\u2026 Click again to stop";
-          showActivity("Listening\u2026 speak now", "#ea4335");
-        } catch (err) {
-          showActivity(err?.message || "Microphone access denied", "#f28b82");
-        }
-      }
-    });
-    commandInput.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        handleSubmit();
-      }
-    });
-    commandSubmit.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      handleSubmit();
-    });
-    commandInput.addEventListener("input", () => {
-      if (commandInput) autoResizeTextarea(commandInput);
-    });
-    commandInput.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        closeCommandBar();
-      }
-    });
-  }
-  function autoResizeTextarea(textarea) {
-    textarea.style.height = "auto";
-    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-  }
-  function openCommandBar() {
-    if (!commandBarEl || !commandBackdrop) return;
-    commandBarEl.hidden = false;
-    commandBackdrop.hidden = false;
-    isOpen = true;
-    if (commandInput) {
-      commandInput.value = "";
-      commandInput.focus();
-      autoResizeTextarea(commandInput);
-    }
-  }
-  function closeCommandBar() {
-    if (!commandBarEl || !commandBackdrop) return;
-    commandBarEl.hidden = true;
-    commandBackdrop.hidden = true;
-    isOpen = false;
-    if (commandInput) {
-      commandInput.value = "";
-    }
-  }
-  function isCommandBarOpen() {
-    return isOpen;
-  }
-  async function handleSubmit() {
-    if (!commandInput) return;
-    const prompt = commandInput.value.trim();
-    if (!prompt) return;
-    closeCommandBar();
-    if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
-      state.bridgeSocket.send(JSON.stringify({
-        type: "oneshot",
-        prompt,
-        scope: "project"
-      }));
-    }
-  }
-
   // src/overlay/index.ts
   console.log("[lasso] overlay initializing");
   function init() {