@lasso-ai/cli 1.0.25 → 1.0.27

package/dist/overlay.js

@@ -10916,6 +10916,9 @@
     .lasso-task-badge { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--lo-indigo); color: #fff; font-size: 10px; text-align: center; }
     .lasso-task-close, .lasso-task-back { border: 0; background: transparent; color: var(--lo-text-3); cursor: pointer; }
     .lasso-task-close { font-size: 20px; line-height: 20px; }
+    .lasso-task-tabs { display: flex; gap: 4px; margin: 10px 0 8px; padding: 3px; border-radius: var(--lo-radius-md); background: var(--lo-surface-2); }
+    .lasso-task-tab { flex: 1; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--lo-text-3); font: inherit; font-size: 11px; cursor: pointer; }
+    .lasso-task-tab.active { background: var(--lo-surface); color: var(--lo-text); box-shadow: 0 1px 3px rgba(0,0,0,.16); }
     .lasso-task-body { min-height: 90px; max-height: 470px; overflow: auto; }
     .lasso-task-list { display: flex; flex-direction: column; gap: 3px; }
     .lasso-task-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px; border: 0; border-radius: var(--lo-radius-md); background: transparent; color: var(--lo-text); text-align: left; cursor: pointer; }
@@ -10928,6 +10931,7 @@
     .lasso-task-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
     .lasso-task-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
     .lasso-task-row-copy small, .lasso-task-message { color: var(--lo-text-3); font-size: 11px; }
+    .lasso-task-review-label { margin-left: auto; padding: 4px 7px; border-radius: var(--lo-radius-full); background: color-mix(in srgb, #fbbf24 16%, transparent); color: #fbbf24; font-size: 10px; font-weight: 600; cursor: pointer; }
     .lasso-task-empty { padding: 25px 10px; color: var(--lo-text-3); font-size: 12px; text-align: center; }
     .lasso-task-detail { padding: 4px 2px; }
     .lasso-task-detail-heading { justify-content: space-between; margin-bottom: 12px; }
@@ -12128,6 +12132,7 @@
   var detail = null;
   var badge = null;
   var selectionListeners = /* @__PURE__ */ new Set();
+  var reviewListeners = /* @__PURE__ */ new Set();
   var statusLabel = {
     queued: "Queued",
     thinking: "Thinking",
@@ -12150,9 +12155,16 @@
     selectionListeners.add(listener);
     return () => selectionListeners.delete(listener);
   }
+  function onAgentTaskReviewRequested(listener) {
+    reviewListeners.add(listener);
+    return () => reviewListeners.delete(listener);
+  }
   function notifyTaskSelection(task) {
     for (const listener of selectionListeners) listener(task);
   }
+  function notifyTaskReviewRequested(task) {
+    for (const listener of reviewListeners) listener(task);
+  }
   function createAgentTask(instruction, messages = state.chatHistory, changesHistory = state.changesHistory, element = state.selected, selectionId = state.selectionId) {
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const task = {
@@ -12222,6 +12234,12 @@
     notifyTaskSelection(task || null);
     renderTasks();
   }
+  function requestAgentTaskReview(id) {
+    const task = getAgentTask(id);
+    if (!task || task.status !== "review") return;
+    selectAgentTask(task.id);
+    notifyTaskReviewRequested(task);
+  }
   function toggleTaskPanel(force) {
     if (!panel) return;
     panel.hidden = force === void 0 ? !panel.hidden : !force;
@@ -12241,6 +12259,10 @@
       </div>
       <button class="lasso-task-close" type="button" aria-label="Close tasks">\xD7</button>
     </div>
+    <div class="lasso-task-tabs" role="tablist" aria-label="Task status">
+      <button class="lasso-task-tab active" type="button" role="tab" data-task-tab="active" aria-selected="true">In progress</button>
+      <button class="lasso-task-tab" type="button" role="tab" data-task-tab="complete" aria-selected="false">Completed</button>
+    </div>
     <div class="lasso-task-body">
       <div class="lasso-task-list"></div>
       <div class="lasso-task-detail" hidden></div>
@@ -12251,27 +12273,47 @@
     detail = panel.querySelector(".lasso-task-detail");
     badge = panel.querySelector(".lasso-task-badge");
     panel.querySelector(".lasso-task-close").addEventListener("click", () => toggleTaskPanel(false));
+    panel.querySelectorAll(".lasso-task-tab").forEach((tab) => {
+      tab.addEventListener("click", () => {
+        panel?.querySelectorAll(".lasso-task-tab").forEach((item) => {
+          const active = item === tab;
+          item.classList.toggle("active", active);
+          item.setAttribute("aria-selected", String(active));
+        });
+        renderTasks();
+      });
+    });
     renderTasks();
     return panel;
   }
   function renderTasks() {
-    if (!list || !detail || !badge) return;
+    const panelEl = panel;
+    if (!panelEl || !list || !detail || !badge) return;
     const activeCount = state.agentTasks.filter((task) => task.status !== "complete" && task.status !== "error" && task.status !== "stopped").length;
     badge.hidden = state.agentTasks.length === 0;
     badge.textContent = String(activeCount || state.agentTasks.length);
     const navBadge = getDOM().shadow.querySelector(".lasso-agent-tasks-badge");
     if (navBadge) navBadge.hidden = activeCount === 0;
     list.replaceChildren();
-    if (!state.agentTasks.length) {
+    const activeTab = panelEl.querySelector(".lasso-task-tab.active")?.dataset.taskTab || "active";
+    const visibleTasks = state.agentTasks.filter((task) => activeTab === "complete" ? task.status === "complete" : task.status !== "complete");
+    if (!visibleTasks.length) {
       list.innerHTML = `<div class="lasso-task-empty">Prompt an element to start a task.</div>`;
     } else {
-      for (const task of state.agentTasks) {
+      for (const task of visibleTasks) {
         const button = document.createElement("button");
         button.type = "button";
         button.className = `lasso-task-row${task.id === state.activeTaskId ? " active" : ""}`;
-        button.innerHTML = `<span class="lasso-task-status ${task.status}"></span><span class="lasso-task-row-copy"><strong></strong><small>${statusLabel[task.status]}</small></span>`;
+        button.innerHTML = `<span class="lasso-task-status ${task.status}"></span><span class="lasso-task-row-copy"><strong></strong><small>${statusLabel[task.status]}</small></span>${task.status === "review" ? '<span class="lasso-task-review-label">Review</span>' : ""}`;
         button.querySelector("strong").textContent = task.instruction;
         button.addEventListener("click", () => selectAgentTask(task.id));
+        if (task.status === "review") {
+          const review = button.querySelector(".lasso-task-review-label");
+          review.addEventListener("click", (event) => {
+            event.stopPropagation();
+            requestAgentTaskReview(task.id);
+          });
+        }
         list.appendChild(button);
       }
     }
@@ -12310,16 +12352,12 @@
       changes.textContent = `${pendingChanges.length} proposed file change${pendingChanges.length === 1 ? "" : "s"}`;
       detail.appendChild(changes);
       if (selected.status === "review") {
-        const apply = document.createElement("button");
-        apply.type = "button";
-        apply.className = "lasso-task-apply";
-        apply.textContent = "Apply changes";
-        apply.addEventListener("click", () => {
-          if (state.bridgeSocket?.readyState !== WebSocket.OPEN) return;
-          state.bridgeSocket.send(JSON.stringify({ type: "apply", taskId: selected.id, changes: pendingChanges }));
-          updateAgentTask(selected.id, { status: "working", message: "Applying changes\u2026", activity: [...selected.activity, "Applying changes\u2026"] });
-        });
-        detail.appendChild(apply);
+        const review = document.createElement("button");
+        review.type = "button";
+        review.className = "lasso-task-apply";
+        review.textContent = "Review changes";
+        review.addEventListener("click", () => requestAgentTaskReview(selected.id));
+        detail.appendChild(review);
       }
     }
   }
@@ -18591,7 +18629,7 @@
     <div class="lasso-review-files"></div>
     <div class="lasso-review-actions">
       <button class="lasso-review-undo" type="button">Keep editing</button>
-      <button class="lasso-review-apply primary" type="button">Apply changes</button>
+      <button class="lasso-review-apply primary" type="button">Accept &amp; apply</button>
     </div>
   `;
     dom.shadow.appendChild(rev);
@@ -18600,6 +18638,11 @@
       if (task) restoreTaskPrompt(task);
       else resetPromptSession();
     });
+    onAgentTaskReviewRequested((task) => {
+      state.promptTaskId = task.id;
+      state.pendingChanges = [...task.pendingChanges.length ? task.pendingChanges : task.changes || []];
+      showReview(state.pendingChanges, task.message);
+    });
     const promptTop = el.querySelector(".lasso-prompt-top");
     let dragState = null;
     promptTop.addEventListener("pointerdown", (event) => {
@@ -18745,6 +18788,11 @@
       if (!taskId2 || !state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN || !state.pendingChanges.length) return;
       requestAgentNotificationPermission();
       state.bridgeSocket.send(JSON.stringify({ type: "apply", taskId: taskId2, changes: state.pendingChanges }));
+      updateAgentTask(taskId2, {
+        status: "working",
+        message: "Applying accepted changes\u2026",
+        activity: [...getAgentTask(taskId2)?.activity || [], "Applying accepted changes\u2026"]
+      });
       appendChat("assistant", "Applying the reviewed change\u2026", taskId2);
     });
     return { prompt: el, review: rev };
@@ -19063,7 +19111,7 @@
     state.promptTaskId = task.id;
     state.chatHistory = [...task.messages];
     state.changesHistory = task.changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) }));
-    state.pendingChanges = [...task.pendingChanges];
+    state.pendingChanges = [...task.pendingChanges.length ? task.pendingChanges : task.changes || []];
     state.lastInstruction = task.lastInstruction;
     state.selectionId = task.selectionId;
     state.screenshotPromise = Promise.resolve({});
@@ -19092,7 +19140,6 @@
     }
     if (promptEl) promptEl.classList.add("visible");
     setSelectMode(false);
-    if (task.status === "review" && state.pendingChanges.length) showReview(state.pendingChanges, task.message);
     setAgentStatus(task.status, task.message, task.detail, task.id, false);
     requestAnimationFrame(() => promptInput?.focus());
   }
@@ -19173,6 +19220,10 @@
   async function handleSend(event) {
     event.preventDefault();
     event.stopPropagation();
+    if (sendButton?.dataset.state === "review") {
+      if (state.pendingChanges.length) showReview(state.pendingChanges, "Review the proposed source changes.");
+      return;
+    }
     const selectedElement = state.selected;
     if (!selectedElement || !promptInput || !sendButton) return;
     const instruction = promptInput.value.trim() || (sendButton.dataset.state === "retry" ? state.lastInstruction : "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lasso-ai/cli",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "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",