@lasso-ai/cli 1.0.18 → 1.0.20

package/dist/overlay.js

@@ -7878,6 +7878,9 @@
     chatHistory = [];
     changesHistory = [];
     pendingChanges = [];
+    agentTasks = [];
+    activeTaskId = null;
+    promptTaskId = null;
     runtimeErrors = [];
     screenshotPromise = Promise.resolve({});
     // Agent State
@@ -7902,7 +7905,7 @@
     myUser = null;
     presenceUsers = /* @__PURE__ */ new Map();
     lockMap = /* @__PURE__ */ new Map();
-    heldLockElement = "";
+    heldLockElements = /* @__PURE__ */ new Set();
     spotlightUserId = null;
     // Comments
     commentThreads = /* @__PURE__ */ new Map();
@@ -10882,6 +10885,61 @@
       display: none;
     }
 
+    .lasso-task-panel {
+      position: fixed;
+      right: 12px;
+      bottom: 82px;
+      width: 390px;
+      max-width: calc(100vw - 24px);
+      max-height: min(560px, calc(100vh - 104px));
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: var(--lo-text);
+      background: var(--lo-surface);
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-xl);
+      box-shadow: 0 18px 50px rgba(0,0,0,.35);
+      z-index: 30;
+      opacity: 0;
+      transform: translateY(8px) scale(.98);
+      transition: opacity 150ms ease, transform 150ms ease;
+      pointer-events: auto;
+    }
+
+    .lasso-task-panel.visible { opacity: 1; transform: translateY(0) scale(1); }
+    .lasso-task-panel[hidden] { display: none; }
+    .lasso-task-header, .lasso-task-title-row, .lasso-task-detail-heading { display: flex; align-items: center; }
+    .lasso-task-header { justify-content: space-between; }
+    .lasso-task-title-row { gap: 7px; font-size: 13px; font-weight: 600; }
+    .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-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; }
+    .lasso-task-row:hover, .lasso-task-row.active { background: var(--lo-surface-hover); }
+    .lasso-task-status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--lo-text-3); }
+    .lasso-task-status.thinking, .lasso-task-status.working { background: var(--lo-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lo-primary) 18%, transparent); }
+    .lasso-task-status.review { background: #fbbf24; }
+    .lasso-task-status.complete { background: #34d399; }
+    .lasso-task-status.error { background: #f87171; }
+    .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-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; }
+    .lasso-task-detail-status { color: var(--lo-primary); font-size: 11px; font-weight: 600; }
+    .lasso-task-prompt { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
+    .lasso-task-message { margin: 0 0 12px; line-height: 1.45; }
+    .lasso-task-activity { display: flex; flex-direction: column; gap: 4px; max-height: 130px; margin: 0 0 12px; padding: 8px; overflow: auto; border-radius: var(--lo-radius-md); background: var(--lo-surface-2); color: var(--lo-text-3); font-size: 10.5px; line-height: 1.35; }
+    .lasso-task-changes { margin-bottom: 10px; color: var(--lo-text-2); font-size: 11px; }
+    .lasso-task-apply { padding: 7px 11px; border: 0; border-radius: var(--lo-radius-full); background: var(--lo-primary); color: #111214; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
+
+    .lasso-agent-tasks-badge { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--lo-primary); }
+
     .lasso-todo-header {
       display: flex;
       align-items: center;
@@ -12064,6 +12122,208 @@
   };
   var terminal_default = data4;
 
+  // src/overlay/tasks/tasks.ts
+  var panel = null;
+  var list = null;
+  var detail = null;
+  var badge = null;
+  var selectionListeners = /* @__PURE__ */ new Set();
+  var statusLabel = {
+    queued: "Queued",
+    thinking: "Thinking",
+    working: "Working",
+    review: "Review",
+    complete: "Complete",
+    error: "Error",
+    stopped: "Stopped"
+  };
+  function taskId() {
+    return `task-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+  }
+  function sameChangeList(left, right) {
+    return left.length === right.length && left.every((change, index) => {
+      const other = right[index];
+      return Boolean(other) && change.filePath === other.filePath && change.oldString === other.oldString && change.newString === other.newString;
+    });
+  }
+  function onAgentTaskSelected(listener) {
+    selectionListeners.add(listener);
+    return () => selectionListeners.delete(listener);
+  }
+  function notifyTaskSelection(task) {
+    for (const listener of selectionListeners) 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 = {
+      id: taskId(),
+      instruction,
+      status: "queued",
+      message: "Queued",
+      pendingChanges: [],
+      messages: messages.map((message) => ({ ...message })),
+      changesHistory: changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) })),
+      activity: ["Queued"],
+      lastInstruction: instruction,
+      selectionId,
+      element: element || void 0,
+      createdAt: now,
+      updatedAt: now
+    };
+    state.agentTasks.unshift(task);
+    state.activeTaskId = task.id;
+    renderTasks();
+    return task;
+  }
+  function getAgentTask(id) {
+    return id ? state.agentTasks.find((task) => task.id === id) : void 0;
+  }
+  function updateAgentTask(id, patch) {
+    if (!id) return;
+    const task = getAgentTask(id);
+    if (!task) return;
+    Object.assign(task, patch, { updatedAt: (/* @__PURE__ */ new Date()).toISOString() });
+    renderTasks();
+  }
+  function recordTaskActivity(id, text) {
+    const task = getAgentTask(id);
+    const value2 = text.trim();
+    if (!task || !value2 || task.activity[task.activity.length - 1] === value2) return;
+    updateAgentTask(id, { activity: [...task.activity, value2].slice(-200) });
+  }
+  function recordTaskChangeHistory(id, summary, changes) {
+    const task = getAgentTask(id);
+    if (!task) return;
+    const previous = task.changesHistory[task.changesHistory.length - 1];
+    if (previous?.summary === summary && sameChangeList(previous.changes, changes)) return;
+    updateAgentTask(id, {
+      changesHistory: [...task.changesHistory, { summary, changes: changes.map((change) => ({ ...change })), createdAt: (/* @__PURE__ */ new Date()).toISOString() }]
+    });
+  }
+  function appendTaskMessage(id, role, text) {
+    const task = getAgentTask(id);
+    const content = text.trim();
+    if (!task || !content) return;
+    const previous = task.messages[task.messages.length - 1];
+    if (previous?.role === role && previous.content === content) return;
+    const message = {
+      role,
+      content,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      contextId: task.selectionId || void 0
+    };
+    updateAgentTask(task.id, { messages: [...task.messages, message] });
+    return message;
+  }
+  function selectAgentTask(id) {
+    const task = getAgentTask(id);
+    state.activeTaskId = task?.id || null;
+    state.promptTaskId = task?.id || null;
+    notifyTaskSelection(task || null);
+    renderTasks();
+  }
+  function toggleTaskPanel(force) {
+    if (!panel) return;
+    panel.hidden = force === void 0 ? !panel.hidden : !force;
+    panel.classList.toggle("visible", !panel.hidden);
+    if (!panel.hidden) renderTasks();
+  }
+  function buildTaskPanel() {
+    const dom = getDOM();
+    panel = document.createElement("div");
+    panel.className = "lasso-task-panel";
+    panel.hidden = true;
+    panel.innerHTML = `
+    <div class="lasso-task-header">
+      <div class="lasso-task-title-row">
+        <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"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M7 8h10M7 12h6M7 16h8"/></svg>
+        <span>Agent tasks</span><span class="lasso-task-badge" hidden>0</span>
+      </div>
+      <button class="lasso-task-close" type="button" aria-label="Close tasks">\xD7</button>
+    </div>
+    <div class="lasso-task-body">
+      <div class="lasso-task-list"></div>
+      <div class="lasso-task-detail" hidden></div>
+    </div>
+  `;
+    dom.shadow.appendChild(panel);
+    list = panel.querySelector(".lasso-task-list");
+    detail = panel.querySelector(".lasso-task-detail");
+    badge = panel.querySelector(".lasso-task-badge");
+    panel.querySelector(".lasso-task-close").addEventListener("click", () => toggleTaskPanel(false));
+    renderTasks();
+    return panel;
+  }
+  function renderTasks() {
+    if (!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) {
+      list.innerHTML = `<div class="lasso-task-empty">Prompt an element to start a task.</div>`;
+    } else {
+      for (const task of state.agentTasks) {
+        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.querySelector("strong").textContent = task.instruction;
+        button.addEventListener("click", () => selectAgentTask(task.id));
+        list.appendChild(button);
+      }
+    }
+    const selected = getAgentTask(state.activeTaskId);
+    if (!selected) {
+      detail.hidden = true;
+      return;
+    }
+    detail.hidden = false;
+    detail.replaceChildren();
+    const heading = document.createElement("div");
+    heading.className = "lasso-task-detail-heading";
+    heading.innerHTML = `<span class="lasso-task-detail-status ${selected.status}">${statusLabel[selected.status]}</span><button type="button" class="lasso-task-back">All tasks</button>`;
+    heading.querySelector("button").addEventListener("click", () => selectAgentTask(null));
+    const prompt = document.createElement("p");
+    prompt.className = "lasso-task-prompt";
+    prompt.textContent = selected.instruction;
+    const activity = document.createElement("p");
+    activity.className = "lasso-task-message";
+    activity.textContent = selected.response || selected.message;
+    detail.append(heading, prompt, activity);
+    if (selected.activity.length) {
+      const activityList = document.createElement("div");
+      activityList.className = "lasso-task-activity";
+      for (const entry of selected.activity.slice(-8)) {
+        const line = document.createElement("div");
+        line.textContent = entry;
+        activityList.appendChild(line);
+      }
+      detail.appendChild(activityList);
+    }
+    const pendingChanges = selected.pendingChanges.length ? selected.pendingChanges : selected.changes || [];
+    if (pendingChanges.length) {
+      const changes = document.createElement("div");
+      changes.className = "lasso-task-changes";
+      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);
+      }
+    }
+  }
+
   // src/overlay/notifications.ts
   var permissionRequest = null;
   function requestAgentNotificationPermission() {
@@ -16841,11 +17101,11 @@
   }
   function updateCommentsBadge() {
     const dom = getDOM();
-    const badge = dom.shadow.querySelector(".lasso-comments-badge");
-    if (!badge) return;
+    const badge2 = dom.shadow.querySelector(".lasso-comments-badge");
+    if (!badge2) return;
     const openCount = threadsInScope().filter((t) => t.root.status === "OPEN").length;
-    badge.classList.toggle("visible", openCount > 0);
-    badge.textContent = String(openCount);
+    badge2.classList.toggle("visible", openCount > 0);
+    badge2.textContent = String(openCount);
   }
   function commentPosition(thread) {
     const saved = thread.root.meta?.position;
@@ -17596,7 +17856,7 @@
       ta.remove();
     }
   }
-  var panel = null;
+  var panel2 = null;
   var items = [];
   var scope = "private";
   var PRIVATE_STORAGE_KEY = "lasso:clipboard:private";
@@ -17655,7 +17915,7 @@
     <div class="lasso-clipboard-list"></div>
   `;
     getDOM().shadow.appendChild(el);
-    panel = el;
+    panel2 = el;
     el.querySelector(".lasso-clipboard-close").addEventListener("click", () => toggleClipboardPanel(false));
     el.querySelectorAll(".lasso-clipboard-tab").forEach((button) => {
       button.addEventListener("click", () => {
@@ -17762,14 +18022,14 @@
     return TYPE_COLORS[type] ?? TYPE_COLORS.text;
   }
   function render() {
-    const list = panel?.querySelector(".lasso-clipboard-list");
-    if (!list) return;
+    const list2 = panel2?.querySelector(".lasso-clipboard-list");
+    if (!list2) return;
     const visible = items.filter((item) => item.scope === scope);
     if (!visible.length) {
-      list.innerHTML = `<div class="lasso-clipboard-empty">${scope === "shared" && !state.collabJoined ? "Join a collaboration session to share items." : "No saved items yet."}</div>`;
+      list2.innerHTML = `<div class="lasso-clipboard-empty">${scope === "shared" && !state.collabJoined ? "Join a collaboration session to share items." : "No saved items yet."}</div>`;
       return;
     }
-    list.innerHTML = visible.map((item) => {
+    list2.innerHTML = visible.map((item) => {
       const color = typeColor(item.type);
       const icon = typeIcon(item.type);
       const preview = escapeHtml3(item.content).slice(0, 220);
@@ -17793,7 +18053,7 @@
         </div>
       </div>`;
     }).join("");
-    list.querySelectorAll(".lasso-clipboard-item").forEach((row) => {
+    list2.querySelectorAll(".lasso-clipboard-item").forEach((row) => {
       const item = visible.find((candidate) => candidate.uid === row.dataset.id);
       if (!item) return;
       const copyBtn = row.querySelector(".lasso-clipboard-copy-item");
@@ -17828,7 +18088,7 @@
     });
   }
   function setStatus(message) {
-    const sub = panel?.querySelector(".lasso-clipboard-subtitle");
+    const sub = panel2?.querySelector(".lasso-clipboard-subtitle");
     if (!sub) return;
     const previous = sub.textContent;
     sub.textContent = message;
@@ -17837,10 +18097,10 @@
     }, 1800);
   }
   function toggleClipboardPanel(force) {
-    if (!panel) return;
-    const next = force === void 0 ? Boolean(panel.hidden) : force;
-    panel.hidden = !next;
-    panel.classList.toggle("visible", next);
+    if (!panel2) return;
+    const next = force === void 0 ? Boolean(panel2.hidden) : force;
+    panel2.hidden = !next;
+    panel2.classList.toggle("visible", next);
     if (next) requestItems();
   }
   function escapeHtml3(value2) {
@@ -18048,10 +18308,10 @@
         state: "online",
         selection: currentSelectionPayload()
       });
-      if (state.heldLockElement) {
+      for (const elementId of state.heldLockElements) {
         collabEmit("lock:extend", {
           sessionId: state.collabProjectId,
-          elementId: state.heldLockElement
+          elementId
         });
       }
     }, 3e4);
@@ -18104,7 +18364,7 @@
     }
     const key = elementKey(state.selected);
     const lock = state.lockMap.get(key);
-    const mine = state.heldLockElement === key;
+    const mine = state.heldLockElements.has(key);
     if (lock) {
       dom.heldLockChip.hidden = false;
       dom.heldLockChip.classList.toggle("held", mine);
@@ -18139,7 +18399,7 @@
         },
         (res) => {
           if (res.ok && res.lock) {
-            state.heldLockElement = key;
+            state.heldLockElements.add(key);
             state.lockMap.set(key, res.lock);
             updateLockChip();
             resolve(true);
@@ -18158,14 +18418,16 @@
       );
     });
   }
-  function releaseHeldLock() {
-    if (!state.heldLockElement) return;
-    const elementId = state.heldLockElement;
-    state.heldLockElement = "";
-    updateLockChip();
-    if (state.collabSocket?.connected && state.collabJoined) {
-      collabEmit("lock:release", { sessionId: state.collabProjectId, elementId });
+  function releaseHeldLock(elementId) {
+    const elementIds = elementId ? [elementId] : Array.from(state.heldLockElements);
+    for (const id of elementIds) {
+      if (!state.heldLockElements.delete(id)) continue;
+      state.lockMap.delete(id);
+      if (state.collabSocket?.connected && state.collabJoined) {
+        collabEmit("lock:release", { sessionId: state.collabProjectId, elementId: id });
+      }
     }
+    updateLockChip();
   }
 
   // src/overlay/icons/lasso.ts
@@ -18334,6 +18596,10 @@
   `;
     dom.shadow.appendChild(rev);
     reviewPanel = rev;
+    onAgentTaskSelected((task) => {
+      if (task) restoreTaskPrompt(task);
+      else resetPromptSession();
+    });
     const promptTop = el.querySelector(".lasso-prompt-top");
     let dragState = null;
     promptTop.addEventListener("pointerdown", (event) => {
@@ -18395,10 +18661,19 @@
     stopButton.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
+      const taskId2 = state.promptTaskId || void 0;
+      const task = taskId2 ? getAgentTask(taskId2) : void 0;
       if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
-        state.bridgeSocket.send(JSON.stringify({ type: "stop" }));
+        state.bridgeSocket.send(JSON.stringify({ type: "stop", taskId: taskId2 }));
+      }
+      if (taskId2) {
+        appendChat("assistant", "Agent stopped.", taskId2);
+        if (task) {
+          updateAgentTask(task.id, { status: "stopped", message: "Agent stopped." });
+          recordTaskActivity(task.id, "Agent stopped.");
+        }
       }
-      appendChat("assistant", "Agent stopped.");
+      if (task?.element) releaseHeldLock(elementKey(task.element));
       resetAgentState();
     });
     const voiceBtn = el.querySelector(".lasso-prompt-voice");
@@ -18455,20 +18730,22 @@
     });
     rev.querySelector(".lasso-review-close").addEventListener("click", closeReview);
     rev.querySelector(".lasso-review-undo").addEventListener("click", () => {
+      const taskId2 = state.promptTaskId || void 0;
       if (state.pendingChanges.length && rev.querySelector(".lasso-review-apply").hidden) {
         if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
-          state.bridgeSocket.send(JSON.stringify({ type: "undo" }));
+          state.bridgeSocket.send(JSON.stringify({ type: "undo", taskId: taskId2 }));
         }
         return;
       }
       closeReview();
-      appendChat("assistant", "Kept as a proposal. Nothing was changed.");
+      appendChat("assistant", "Kept as a proposal. Nothing was changed.", taskId2);
     });
     rev.querySelector(".lasso-review-apply").addEventListener("click", () => {
-      if (!state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN || !state.pendingChanges.length) return;
+      const taskId2 = state.promptTaskId;
+      if (!taskId2 || !state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN || !state.pendingChanges.length) return;
       requestAgentNotificationPermission();
-      state.bridgeSocket.send(JSON.stringify({ type: "apply", changes: state.pendingChanges }));
-      appendChat("assistant", "Applying the reviewed change\u2026");
+      state.bridgeSocket.send(JSON.stringify({ type: "apply", taskId: taskId2, changes: state.pendingChanges }));
+      appendChat("assistant", "Applying the reviewed change\u2026", taskId2);
     });
     return { prompt: el, review: rev };
   }
@@ -18637,29 +18914,50 @@
       text.textContent = value2;
       line.append(prefix, text);
       agentLogElement.append(line);
-      if (agentLogExpanded) agentLogElement.scrollTop = agentLogElement.scrollHeight;
+      agentLogElement.scrollTop = agentLogElement.scrollHeight;
     }
     if (agentLogToggle) agentLogToggle.hidden = false;
   }
-  function appendChat(role, text) {
+  function loadAgentLog(lines) {
+    clearAgentLog();
+    for (const line of lines) appendAgentLog(line);
+  }
+  function renderChatThread() {
     const thread = promptEl?.querySelector(".lasso-chat-thread");
-    if (!thread || !text.trim()) return;
-    const previous = thread.lastElementChild;
-    if (previous?.classList.contains(role) && previous.dataset.rawText === text) return;
-    state.chatHistory.push({
-      role,
-      content: text,
-      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-      contextId: state.selectionId || void 0
-    });
-    const item = document.createElement("div");
-    item.className = `lasso-chat-message ${role}`;
-    item.dataset.rawText = text;
-    renderChatText(item, text);
-    thread.appendChild(item);
-    while (thread.children.length > 6) thread.firstElementChild?.remove();
+    if (!thread) return;
+    thread.replaceChildren();
+    for (const message of state.chatHistory.slice(-6)) {
+      const item = document.createElement("div");
+      item.className = `lasso-chat-message ${message.role}`;
+      item.dataset.rawText = message.content;
+      renderChatText(item, message.content);
+      thread.appendChild(item);
+    }
     thread.scrollTop = thread.scrollHeight;
   }
+  function appendChat(role, text, taskId2 = state.promptTaskId) {
+    const content = text.trim();
+    if (!content) return;
+    const task = taskId2 ? getAgentTask(taskId2) : void 0;
+    if (taskId2 && !task) return;
+    if (task) {
+      const previous = task.messages[task.messages.length - 1];
+      if (previous?.role === role && previous.content === content) return;
+      const message = appendTaskMessage(task.id, role, content);
+      if (!message || state.promptTaskId !== task.id) return;
+      state.chatHistory = [...task.messages];
+    } else {
+      const previous = state.chatHistory[state.chatHistory.length - 1];
+      if (previous?.role === role && previous.content === content) return;
+      state.chatHistory.push({
+        role,
+        content,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        contextId: state.selectionId || void 0
+      });
+    }
+    renderChatThread();
+  }
   function renderChatText(container, text) {
     const codePattern = /(`+)([\s\S]*?)\1/g;
     let lastIndex = 0;
@@ -18677,40 +18975,42 @@
       container.append(document.createTextNode(text.slice(lastIndex)));
     }
   }
-  function setAgentStatus(status, message, detail) {
+  function setAgentStatus(status, message, detail2, taskId2 = state.promptTaskId, appendMessage = true) {
     if (!agentStatusElement || !agentStatusMessage || !sendButton) return;
-    const logMessage = detail?.trim() || message.trim();
+    const logMessage = detail2?.trim() || message.trim();
     const lastLog = agentLogLines[agentLogLines.length - 1];
-    if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (status === "thinking" || status === "working") && (!logMessage || lastLog === logMessage)) return;
+    if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (!logMessage || lastLog === logMessage)) return;
     appendAgentLog(logMessage);
+    if (taskId2) recordTaskActivity(taskId2, logMessage);
+    const running = status === "thinking" || status === "working";
     agentStatusElement.hidden = status === "review";
     agentStatusElement.dataset.status = status;
     agentStatusMessage.textContent = message;
     const badgeEl = agentStatusElement.querySelector(".lasso-agent-status-badge");
     if (badgeEl) {
-      badgeEl.textContent = status === "thinking" ? "thinking" : status === "working" ? "executing" : status;
+      badgeEl.textContent = status === "thinking" ? "thinking" : status === "working" ? "executing" : status === "complete" ? "done" : status;
       badgeEl.className = `lasso-agent-status-badge ${status}`;
     }
-    state.agentRunning = status === "thinking" || status === "working";
-    sendButton.classList.toggle("loading", state.agentRunning);
-    if (stopButton) stopButton.hidden = !state.agentRunning;
-    if (promptInput) promptInput.disabled = state.agentRunning;
+    state.agentRunning = running;
+    sendButton.classList.toggle("loading", running);
+    if (stopButton) stopButton.hidden = !running;
+    if (promptInput) promptInput.disabled = false;
     const label = sendButton.querySelector("span");
     if (label) {
-      label.textContent = status === "review" ? "Review" : status === "error" ? "Retry" : state.agentRunning ? "" : "Send";
+      label.textContent = status === "review" ? "Review" : status === "error" ? "Retry" : running ? "" : "Send";
     }
-    sendButton.setAttribute("aria-label", state.agentRunning ? "Agent is working" : status === "error" ? "Retry request" : "Send request");
-    sendButton.dataset.state = status === "error" ? "retry" : state.agentRunning ? "working" : status;
+    sendButton.setAttribute("aria-label", running ? "Agent is working" : status === "error" ? "Retry request" : "Send request");
+    sendButton.dataset.state = status === "error" ? "retry" : running ? "working" : status;
     syncSendButtonState();
-    if (status === "review" || status === "error" || status === "stopped") {
-      appendChat(status === "error" ? "error" : "assistant", message);
+    if (appendMessage && (status === "review" || status === "error" || status === "stopped")) {
+      appendChat(status === "error" ? "error" : "assistant", message, taskId2);
     }
   }
   function syncSendButtonState() {
     if (!promptInput || !sendButton) return;
     const hasInstruction = Boolean(promptInput.value.trim()) || sendButton.dataset.state === "retry" && Boolean(state.lastInstruction?.trim());
     const isReviewAction = sendButton.dataset.state === "review";
-    sendButton.disabled = state.agentRunning || !hasInstruction && !isReviewAction;
+    sendButton.disabled = !hasInstruction && !isReviewAction;
   }
   function resetAgentState() {
     state.agentRunning = false;
@@ -18738,6 +19038,64 @@
     if (stopButton) stopButton.hidden = true;
     if (promptInput) promptInput.disabled = false;
   }
+  function hideReview() {
+    if (reviewPanel) reviewPanel.hidden = true;
+  }
+  function resetPromptSession() {
+    state.promptTaskId = null;
+    state.chatHistory = [];
+    state.changesHistory = [];
+    state.pendingChanges = [];
+    state.lastInstruction = "";
+    state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    state.screenshotPromise = Promise.resolve({});
+    hideReview();
+    clearAgentLog();
+    resetAgentState();
+    renderChatThread();
+    if (promptInput) {
+      promptInput.value = "";
+      syncSendButtonState();
+    }
+  }
+  function restoreTaskPrompt(task) {
+    state.activeTaskId = task.id;
+    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.lastInstruction = task.lastInstruction;
+    state.selectionId = task.selectionId;
+    state.screenshotPromise = Promise.resolve({});
+    hideReview();
+    clearAgentLog();
+    loadAgentLog(task.activity);
+    renderChatThread();
+    const dom = getDOM();
+    if (task.element?.isConnected) {
+      state.selected = task.element;
+      state.elementRegistry.set(elementKey(task.element), task.element);
+      updateSelectedVisual();
+      updateLockChip();
+      if (promptElement) promptElement.textContent = getElementLabel(task.element);
+      positionPrompt(task.element);
+    } else {
+      state.selected = null;
+      dom.selectedBox.style.display = "none";
+      dom.label.style.display = "none";
+      if (promptElement) promptElement.textContent = "Agent task";
+      if (promptEl) {
+        promptEl.style.left = `${Math.max(12, (window.innerWidth - 360) / 2)}px`;
+        promptEl.style.top = `${Math.max(12, (window.innerHeight - 200) / 2)}px`;
+      }
+      updateLockChip();
+    }
+    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());
+  }
   function showReview(changes, summary) {
     if (!reviewPanel) return;
     const subtitle = reviewPanel.querySelector(".lasso-review-subtitle");
@@ -18771,7 +19129,7 @@
     reviewPanel.style.top = `${top}px`;
   }
   function closeReview() {
-    if (reviewPanel) reviewPanel.hidden = true;
+    hideReview();
     resetAgentState();
   }
   function positionPrompt(el) {
@@ -18802,11 +19160,10 @@
     promptEl.classList.remove("visible");
     if (promptInput) promptInput.value = "";
     sendPresenceUpdate({ selection: null });
-    if (state.heldLockElement) releaseHeldLock();
-    updateLockChip();
     renderRemoteBoxes();
     renderComments();
     state.selected = null;
+    updateLockChip();
     getDOM().selectedBox.style.display = "none";
     getDOM().label.style.display = "none";
     if (reenter) {
@@ -18816,18 +19173,19 @@
   async function handleSend(event) {
     event.preventDefault();
     event.stopPropagation();
-    if (!state.selected || !promptInput || !sendButton) return;
+    const selectedElement = state.selected;
+    if (!selectedElement || !promptInput || !sendButton) return;
     const instruction = promptInput.value.trim() || (sendButton.dataset.state === "retry" ? state.lastInstruction : "");
     if (!instruction) {
       promptInput.focus();
       return;
     }
-    clearAgentLog();
     requestAgentNotificationPermission();
     const isQuestion = /^(hi|hello|hey|thanks|thank you|what|why|how|when|where|who|which|is|are|does|do|can|could|would|should|tell me|explain|describe)\b/i.test(instruction) || /\?$/.test(instruction);
     const isExplicitEdit = /\b(change|edit|update|make|add|remove|delete|fix|replace|turn|convert|style|restyle|move|rename|implement|build|create|increase|decrease|hide|show|align|resize|set|enable|disable)\b/i.test(instruction);
     const wantsAnswer = isQuestion && !/\b(can|could|would|please)\s+you\s+(change|edit|update|add|fix|make)\b/i.test(instruction) || !isExplicitEdit && !isQuestion;
-    if (!state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN) {
+    const bridgeSocket = state.bridgeSocket;
+    if (!bridgeSocket || bridgeSocket.readyState !== WebSocket.OPEN) {
       setAgentStatus(
         "error",
         "The Lasso agent bridge is not connected. Start Lasso with your dev server and try again."
@@ -18835,39 +19193,54 @@
       return;
     }
     if (!wantsAnswer) {
-      const ownershipGranted = await acquireOwnership(state.selected);
+      const ownershipGranted = await acquireOwnership(selectedElement);
       if (!ownershipGranted) return;
     }
     if (!wantsAnswer && state.collabSocket?.connected && state.collabJoined) {
       collabEmit("collab:action", {
         sessionId: state.collabProjectId,
         status: "preparing",
-        elementId: elementKey(state.selected),
+        elementId: elementKey(selectedElement),
         summary: `Edits for ${instruction.slice(0, 80)}`
       });
     }
+    const selectionId = state.selectionId;
+    const model = state.selectedModel;
+    const screenshotPromise = state.screenshotPromise;
     appendChat("user", instruction);
-    setAgentStatus("thinking", "Thinking\u2026");
+    const messages = state.chatHistory.map((message) => ({ ...message }));
+    const changesHistory = state.changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) }));
+    const task = createAgentTask(instruction, messages, changesHistory, selectedElement, selectionId);
+    updateAgentTask(task.id, { status: "thinking", message: "Thinking\u2026", activity: [...task.activity, "Thinking\u2026"] });
+    resetPromptSession();
+    state.promptTaskId = task.id;
     state.lastInstruction = instruction;
-    promptInput.value = "";
-    const rect = state.selected.getBoundingClientRect();
-    const computed = getComputedStyle(state.selected);
+    const rect = selectedElement.getBoundingClientRect();
+    const computed = getComputedStyle(selectedElement);
     const attributes = Object.fromEntries(
-      Array.from(state.selected.attributes).map((attr) => [attr.name, attr.value])
+      Array.from(selectedElement.attributes).map((attr) => [attr.name, attr.value])
     );
     const needsVisualContext = /\b(look|visual|appearance|color|colour|background|image|icon|spacing|layout|position|align|responsive|style|restyle|font|size)\b/i.test(instruction);
-    const screenshots = needsVisualContext && state.selected ? await captureElementScreenshot(state.selected) : await state.screenshotPromise;
-    state.bridgeSocket.send(
+    const screenshots = needsVisualContext ? await captureElementScreenshot(selectedElement) : await screenshotPromise;
+    if (bridgeSocket.readyState !== WebSocket.OPEN) {
+      const message = "The Lasso agent bridge disconnected before the task could start.";
+      updateAgentTask(task.id, { status: "error", message });
+      appendChat("error", message, task.id);
+      if (!wantsAnswer) releaseHeldLock(elementKey(selectedElement));
+      return;
+    }
+    bridgeSocket.send(
       JSON.stringify({
         type: wantsAnswer ? "ask" : "edit",
+        taskId: task.id,
         question: wantsAnswer ? instruction : void 0,
         instruction,
-        messages: state.chatHistory,
-        changesHistory: state.changesHistory,
-        model: state.selectedModel.id,
-        provider: state.selectedModel.provider,
+        messages,
+        changesHistory,
+        model: model.id,
+        provider: model.provider,
         context: {
-          selectionId: state.selectionId,
+          selectionId,
           position: {
             top: rect.top,
             left: rect.left,
@@ -18898,18 +19271,18 @@
           screenshots
         },
         element: {
-          tag: state.selected.tagName.toLowerCase(),
-          group: getElementGroup(state.selected),
-          label: getElementLabel(state.selected),
-          html: state.selected.outerHTML.slice(0, 6e3),
-          sourceHint: state.selected.getAttribute("data-source") || state.selected.getAttribute("data-lasso-source") || getSourceHint(state.selected)
+          tag: selectedElement.tagName.toLowerCase(),
+          group: getElementGroup(selectedElement),
+          label: getElementLabel(selectedElement),
+          html: selectedElement.outerHTML.slice(0, 6e3),
+          sourceHint: selectedElement.getAttribute("data-source") || selectedElement.getAttribute("data-lasso-source") || getSourceHint(selectedElement)
         }
       })
     );
   }
   function openPromptForSelected(selected) {
     if (!promptEl || !promptElement) return;
-    clearAgentLog();
+    resetPromptSession();
     promptElement.textContent = getElementLabel(selected);
     positionPrompt(selected);
     promptEl.classList.add("visible");
@@ -19648,7 +20021,7 @@
     state.hovered = el;
     updateHoverVisual(state.hovered);
   }
-  function updateSelectedVisual2() {
+  function updateSelectedVisual() {
     const dom = getDOM();
     if (!state.selected) {
       dom.selectedBox.style.display = "none";
@@ -19711,25 +20084,25 @@
       const parts2 = filePath.split("/");
       const name = parts2.pop() || filePath;
       const dir = parts2.length ? parts2.join("/") + "/" : "";
-      let badge = "M";
+      let badge2 = "M";
       let badgeClass = "mod";
       if (code.includes("A")) {
-        badge = "A";
+        badge2 = "A";
         badgeClass = "add";
       } else if (code.includes("D")) {
-        badge = "D";
+        badge2 = "D";
         badgeClass = "del";
       } else if (code.includes("R")) {
-        badge = "R";
+        badge2 = "R";
         badgeClass = "ren";
       } else if (code === "??" || code.includes("?")) {
-        badge = "U";
+        badge2 = "U";
         badgeClass = "unt";
       } else if (code.includes("M")) {
-        badge = "M";
+        badge2 = "M";
         badgeClass = "mod";
       }
-      return { code, badge, badgeClass, path: filePath, dir, name };
+      return { code, badge: badge2, badgeClass, path: filePath, dir, name };
     });
   }
   function escapeHtml4(text) {
@@ -19940,7 +20313,7 @@
     const uninitView = gitPanelEl.querySelector(".lasso-git-uninit-view");
     const repoView = gitPanelEl.querySelector(".lasso-git-repo-view");
     const filesList = gitPanelEl.querySelector(".lasso-git-files-list");
-    const badge = gitPanelEl.querySelector(".lasso-git-changes-badge");
+    const badge2 = gitPanelEl.querySelector(".lasso-git-changes-badge");
     const commitBtn = gitPanelEl.querySelector(".lasso-git-commit-btn");
     const commitBtnText = gitPanelEl.querySelector(".lasso-git-commit-btn-text");
     const pushBtn = gitPanelEl.querySelector(".lasso-git-push-btn");
@@ -19963,12 +20336,12 @@
       uninitView.hidden = next.isRepo;
       repoView.hidden = !next.isRepo;
     }
-    if (filesList && badge && next.isRepo) {
+    if (filesList && badge2 && next.isRepo) {
       const rawStatus = next.status || [];
       const parsed = parseGitStatus(rawStatus);
       const count = parsed.length;
-      badge.textContent = count > 0 ? String(count) : "Clean";
-      badge.className = `lasso-git-changes-badge${count > 0 ? " has-changes" : " clean"}`;
+      badge2.textContent = count > 0 ? String(count) : "Clean";
+      badge2.className = `lasso-git-changes-badge${count > 0 ? " has-changes" : " clean"}`;
       if (count === 0) {
         filesList.innerHTML = `
         <div class="lasso-git-clean-state">
@@ -20153,6 +20526,11 @@
       </svg>
     </button>
 
+    <button class="lasso-tool-btn agent-tasks-tool" type="button" aria-label="Agent tasks" title="Agent tasks">
+      <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"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M7 8h10M7 12h6M7 16h8"/></svg>
+      <i class="lasso-agent-tasks-badge" hidden></i>
+    </button>
+
     <button class="lasso-tool-btn notepad-tool" type="button" aria-label="Notepad" title="Scratchpad & Notes">
       <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="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8l-5-5z"/>
@@ -20228,6 +20606,7 @@
     const commentBtn = toolbar.querySelector(".comment-tool");
     const gitBtn = toolbar.querySelector(".git-tool");
     const todoBtn = toolbar.querySelector(".todo-tool");
+    const agentTasksBtn = toolbar.querySelector(".agent-tasks-tool");
     const notepadBtn = toolbar.querySelector(".notepad-tool");
     const clipboardBtn = toolbar.querySelector(".clipboard-tool");
     const voiceBtn = toolbar.querySelector(".voice-tool");
@@ -20264,6 +20643,11 @@
       e.stopPropagation();
       toggleTodoPanel();
     });
+    agentTasksBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleTaskPanel();
+    });
     notepadBtn.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -20359,39 +20743,81 @@
             setGeneratedCommitMessage(message.message || "", message.error);
           }
           if (message.type === "agent_status" && message.status && message.message) {
-            setAgentStatus(message.status, message.message, message.detail);
+            const taskId2 = message.taskId;
+            const task = taskId2 ? getAgentTask(taskId2) : void 0;
+            const taskStatus = message.status === "error" ? "error" : message.status === "stopped" ? "stopped" : message.status;
+            if (task) {
+              const patch = {
+                status: taskStatus,
+                message: message.message,
+                detail: message.detail
+              };
+              if (message.status === "review" && message.changes) {
+                patch.changes = message.changes;
+                patch.pendingChanges = message.changes;
+                recordTaskChangeHistory(task.id, message.message, message.changes);
+              }
+              updateAgentTask(task.id, patch);
+              recordTaskActivity(task.id, message.detail || message.message);
+            }
+            if (message.status === "review") {
+              appendChat("assistant", message.message, taskId2);
+              if (message.changes?.length) void notifyAgent("Review requested", message.message);
+            } else if (message.status === "error" || message.status === "stopped") {
+              appendChat(message.status === "error" ? "error" : "assistant", message.message, taskId2);
+              if (task?.element) releaseHeldLock(elementKey(task.element));
+              void notifyAgent(message.status === "error" ? "Agent error" : "Agent stopped", message.message);
+            }
+            if (taskId2 && taskId2 !== state.promptTaskId) return;
+            setAgentStatus(message.status, message.message, message.detail, taskId2, false);
             setDragCardStatus(message.status, message.message);
             if (message.status === "review" && message.changes?.length) {
-              void notifyAgent("Review requested", message.message);
-              state.pendingChanges = message.changes;
-              state.changesHistory.push({
-                summary: message.message,
-                changes: message.changes,
-                createdAt: (/* @__PURE__ */ new Date()).toISOString()
-              });
+              if (task) state.changesHistory = task.changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) }));
+              state.pendingChanges = [...message.changes];
               showReview(message.changes, message.message);
             }
           }
           if (message.type === "assistant_message" && message.message) {
+            const taskId2 = message.taskId;
+            const task = taskId2 ? getAgentTask(taskId2) : void 0;
+            if (task) {
+              updateAgentTask(task.id, { status: "complete", message: "Complete", response: message.message });
+              recordTaskActivity(task.id, "Agent complete");
+            }
+            appendChat("assistant", message.message, taskId2);
+            if (taskId2 && taskId2 !== state.promptTaskId) {
+              void notifyAgent("Agent complete", message.message);
+              return;
+            }
             void notifyAgent("Agent complete", message.message);
-            appendChat("assistant", message.message);
             resetAgentState();
           }
           if (message.type === "applied" || message.type === "undone") {
-            void notifyAgent(message.type === "applied" ? "Changes applied" : "Change undone", message.message || "Done.");
-            appendChat("assistant", message.message || "Done.");
-            releaseHeldLock();
+            const taskId2 = message.taskId;
+            const task = taskId2 ? getAgentTask(taskId2) : void 0;
+            if (task) {
+              updateAgentTask(task.id, { status: "complete", message: message.message || "Done.", changes: [], pendingChanges: [] });
+              recordTaskActivity(task.id, message.message || "Done.");
+            }
+            const isPromptTask = !taskId2 || taskId2 === state.promptTaskId;
+            const result = message.message || "Done.";
+            void notifyAgent(message.type === "applied" ? "Changes applied" : "Change undone", result);
+            appendChat("assistant", result, taskId2);
+            if (task?.element) releaseHeldLock(elementKey(task.element));
+            else if (isPromptTask && state.selected) releaseHeldLock(elementKey(state.selected));
             if (state.collabSocket?.connected && state.collabJoined) {
               collabEmit("collab:action", {
                 sessionId: state.collabProjectId,
                 status: "idle",
-                elementId: state.selected ? elementKey(state.selected) : void 0,
-                summary: message.message || (message.type === "undone" ? "Undid the last change" : "Applied the change")
+                elementId: task?.element ? elementKey(task.element) : state.selected ? elementKey(state.selected) : void 0,
+                summary: result || (message.type === "undone" ? "Undid the last change" : "Applied the change")
               });
             }
-            closeReview();
-            resetDrag(false);
-            state.pendingChanges = [];
+            if (isPromptTask) {
+              closeReview();
+              resetDrag(false);
+              state.pendingChanges = [];
+            }
           }
         } catch {
           console.warn("[lasso] Invalid bridge message");
@@ -20417,6 +20843,7 @@
     buildTodoPanel();
     buildNotepadPanel();
     buildClipboardPanel();
+    buildTaskPanel();
     buildPrompt();
     buildDrag();
     initErrorListeners();
@@ -20432,7 +20859,7 @@
         renderCommentPins();
       }
       if (state.selected) {
-        updateSelectedVisual2();
+        updateSelectedVisual();
         if (!state.promptDragged) {
           positionPrompt(state.selected);
         }
@@ -20474,13 +20901,8 @@
         updateLockChip();
         sendPresenceUpdate({});
         state.promptDragged = false;
-        state.lastInstruction = "";
-        state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-        state.chatHistory = [];
-        state.changesHistory = [];
-        state.screenshotPromise = Promise.resolve({});
         dom.hoverBox.style.display = "none";
-        updateSelectedVisual2();
+        updateSelectedVisual();
         openPromptForSelected(target);
       },
       true