@lasso-ai/cli 1.1.5 → 1.2.0

package/dist/overlay.js

@@ -11078,6 +11078,252 @@
     .lasso-agent-prompt-actions button { padding: 7px 13px; border: 0; border-radius: var(--lo-radius-full); background: var(--lo-surface-2); color: var(--lo-text); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: filter 120ms, transform 120ms; }
     .lasso-agent-prompt-actions button:hover { filter: brightness(1.12); }
     .lasso-agent-prompt-actions button:active { transform: scale(0.97); }
+
+    /* ==========================================================
+       COMMAND BAR (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 {
+      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);
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-xl);
+      background: rgba(24, 25, 29, 0.98);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      color: var(--lo-text);
+      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);
+    }
+
+    @keyframes lasso-command-in {
+      from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .lasso-command-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    .lasso-command-brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .lasso-command-brand-logo {
+      width: 28px;
+      height: 28px;
+    }
+
+    .lasso-command-brand-title {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+    }
+
+    .lasso-command-close {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      border-radius: var(--lo-radius-md);
+      background: transparent;
+      color: var(--lo-text-3);
+      cursor: pointer;
+      transition: background 120ms ease, color 120ms ease;
+    }
+
+    .lasso-command-close:hover {
+      background: var(--lo-surface-hover);
+      color: var(--lo-text);
+    }
+
+    .lasso-command-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .lasso-command-input {
+      width: 100%;
+      min-height: 80px;
+      padding: 12px 14px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-lg);
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      font-family: inherit;
+      font-size: 13px;
+      line-height: 1.5;
+      resize: none;
+      outline: none;
+      transition: border-color 140ms ease, box-shadow 140ms ease;
+    }
+
+    .lasso-command-input:focus {
+      border-color: var(--lo-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--lo-primary) 16%, transparent);
+    }
+
+    .lasso-command-input::placeholder {
+      color: var(--lo-text-3);
+    }
+
+    .lasso-command-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    .lasso-command-icon-group {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .lasso-command-voice {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      border-radius: var(--lo-radius-md);
+      background: transparent;
+      color: var(--lo-text-3);
+      cursor: pointer;
+      transition: background 120ms ease, color 120ms ease;
+    }
+
+    .lasso-command-voice:hover {
+      background: var(--lo-surface-hover);
+      color: var(--lo-text);
+    }
+
+    .lasso-command-voice.recording {
+      color: #ea4335 !important;
+      background: rgba(234, 67, 53, 0.16) !important;
+      border: 1px solid rgba(234, 67, 53, 0.45) !important;
+      animation: lasso-pulse-recording 1.2s infinite ease-in-out;
+    }
+
+    .lasso-command-voice.transcribing {
+      color: #fbbc04 !important;
+      background: rgba(251, 188, 4, 0.16) !important;
+      border: 1px solid rgba(251, 188, 4, 0.45) !important;
+      animation: lasso-pulse-transcribing 0.9s infinite alternate ease-in-out;
+    }
+
+    .lasso-command-submit {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 0 20px;
+      border: 0;
+      border-radius: var(--lo-radius-full);
+      background: var(--lo-primary);
+      color: #111214;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 140ms ease;
+    }
+
+    .lasso-command-submit:hover {
+      background: var(--lo-primary-hover);
+      transform: translateY(-1px);
+    }
+
+    .lasso-command-submit:active {
+      transform: scale(0.96);
+    }
+
+    .lasso-command-submit.primary {
+      background: var(--lo-primary);
+    }
+
+    .lasso-command-shortcuts {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding-top: 8px;
+      border-top: 1px solid var(--lo-border-subtle);
+    }
+
+    .lasso-command-shortcut {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--lo-text-3);
+      font-size: 11px;
+    }
+
+    .lasso-command-shortcut kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 5px;
+      border: 1px solid var(--lo-border-subtle);
+      border-radius: 4px;
+      background: var(--lo-surface-2);
+      font-family: var(--lo-font-mono);
+      font-size: 10px;
+      font-weight: 500;
+    }
     .lasso-agent-prompt-actions button.primary { background: var(--lo-primary); color: #111214; font-weight: 600; }
 
     .lasso-todo-header {
@@ -17132,8 +17378,8 @@
       const pin = document.createElement("button");
       pin.type = "button";
       const isResolved = thread.root.status === "RESOLVED";
-      const isOpen = state.openThreadUid === thread.root.uid;
-      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen ? " active" : ""}`;
+      const isOpen2 = state.openThreadUid === thread.root.uid;
+      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen2 ? " active" : ""}`;
       pin.dataset.commentUid = thread.root.uid;
       const authorColor = userNameColor(thread.root.author?.id || "");
       const authorInitials = initials(thread.root.author?.name || "");
@@ -21707,6 +21953,190 @@
     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() {
@@ -21726,6 +22156,7 @@
     buildPagePanel();
     buildPrompt();
     buildDrag();
+    buildCommandBar();
     initErrorListeners();
     connectBridge();
     initCollabPagehide();
@@ -21788,7 +22219,21 @@
       true
     );
     document.addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isCommandBarOpen()) {
+          closeCommandBar();
+        } else {
+          openCommandBar();
+        }
+        return;
+      }
       if (event.key !== "Escape") return;
+      if (isCommandBarOpen()) {
+        closeCommandBar();
+        return;
+      }
       if (isPinComposeOpen()) {
         closePinCompose();
         setCommentMode(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lasso-ai/cli",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Select any part of your running app, describe a change, and let AI edit the real source code.",
   "type": "commonjs",
   "main": "dist/cli/index.js",
@@ -81,6 +81,7 @@
     "commander": "^15.0.0",
     "http-proxy": "^1.18.1",
     "open": "^11.0.4",
+    "prompts": "^2.4.2",
     "socket.io-client": "^4.8.3",
     "vite": "^7.0.0",
     "ws": "^8.21.3"
@@ -96,6 +97,7 @@
   "devDependencies": {
     "@types/http-proxy": "^1.17.17",
     "@types/node": "^26.6.1",
+    "@types/prompts": "^2.4.9",
     "@types/ws": "^8.5.13",
     "esbuild": "^0.24.0",
     "html2canvas": "^1.4.1",