@lasso-ai/cli 1.0.29 → 1.1.1

package/dist/overlay.js

@@ -4609,7 +4609,7 @@
           }(ElementContainer)
         );
         var LIST_OWNERS = ["OL", "UL", "MENU"];
-        var parseNodeTree = function(context, node, parent, root) {
+        var parseNodeTree = function(context, node, parent, root2) {
           for (var childNode = node.firstChild, nextNode = void 0; childNode; childNode = nextNode) {
             nextNode = childNode.nextSibling;
             if (isTextNode(childNode) && childNode.data.trim().length > 0) {
@@ -4617,12 +4617,12 @@
             } else if (isElementNode(childNode)) {
               if (isSlotElement(childNode) && childNode.assignedNodes) {
                 childNode.assignedNodes().forEach(function(childNode2) {
-                  return parseNodeTree(context, childNode2, parent, root);
+                  return parseNodeTree(context, childNode2, parent, root2);
                 });
               } else {
                 var container = createContainer(context, childNode);
                 if (container.styles.isVisible()) {
-                  if (createsRealStackingContext(childNode, container, root)) {
+                  if (createsRealStackingContext(childNode, container, root2)) {
                     container.flags |= 4;
                   } else if (createsStackingContext(container.styles)) {
                     container.flags |= 2;
@@ -4633,9 +4633,9 @@
                   parent.elements.push(container);
                   childNode.slot;
                   if (childNode.shadowRoot) {
-                    parseNodeTree(context, childNode.shadowRoot, container, root);
+                    parseNodeTree(context, childNode.shadowRoot, container, root2);
                   } else if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) {
-                    parseNodeTree(context, childNode, container, root);
+                    parseNodeTree(context, childNode, container, root2);
                   }
                 }
               }
@@ -4678,8 +4678,8 @@
           parseNodeTree(context, element, container, container);
           return container;
         };
-        var createsRealStackingContext = function(node, container, root) {
-          return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
+        var createsRealStackingContext = function(node, container, root2) {
+          return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || container.styles.isTransformed() || isBodyElement(node) && root2.styles.isTransparent();
         };
         var createsStackingContext = function(styles) {
           return styles.isPositioned() || styles.isFloating();
@@ -6263,11 +6263,11 @@
         };
         var parseStackingContexts = function(container) {
           var paintContainer = new ElementPaint(container, null);
-          var root = new StackingContext(paintContainer);
+          var root2 = new StackingContext(paintContainer);
           var listItems = [];
-          parseStackTree(paintContainer, root, root, listItems);
+          parseStackTree(paintContainer, root2, root2, listItems);
           processListItems(paintContainer.container, listItems);
-          return root;
+          return root2;
         };
         var parsePathForBorder = function(curves, borderSide) {
           switch (borderSide) {
@@ -7711,7 +7711,7 @@
         }
         var renderElement = function(element, opts) {
           return __awaiter(void 0, void 0, void 0, function() {
-            var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a, width, height, left, top, backgroundColor2, renderOptions, canvas, renderer, root, renderer;
+            var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a, width, height, left, top, backgroundColor2, renderOptions, canvas, renderer, root2, renderer;
             var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             return __generator(this, function(_u) {
               switch (_u.label) {
@@ -7780,13 +7780,13 @@
                 case 3:
                   context.logger.debug("Document cloned, element located at " + left + "," + top + " with size " + width + "x" + height + " using computed rendering");
                   context.logger.debug("Starting DOM parsing");
-                  root = parseTree(context, clonedElement);
-                  if (backgroundColor2 === root.styles.backgroundColor) {
-                    root.styles.backgroundColor = COLORS.TRANSPARENT;
+                  root2 = parseTree(context, clonedElement);
+                  if (backgroundColor2 === root2.styles.backgroundColor) {
+                    root2.styles.backgroundColor = COLORS.TRANSPARENT;
                   }
                   context.logger.debug("Starting renderer for element at " + renderOptions.x + "," + renderOptions.y + " with size " + renderOptions.width + "x" + renderOptions.height);
                   renderer = new CanvasRenderer(context, renderOptions);
-                  return [4, renderer.render(root)];
+                  return [4, renderer.render(root2)];
                 case 4:
                   canvas = _u.sent();
                   _u.label = 5;
@@ -8092,6 +8092,97 @@
       display: none !important;
     }
 
+    .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;
+    }
+    .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
+       ========================================================== */
+    .lasso-page-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 9, 11, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; }
+    .lasso-page-backdrop[hidden] { display: none; }
+    .lasso-page-panel { display: flex; flex-direction: column; width: min(400px, 100%); max-height: calc(100vh - 32px); padding: 16px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-xl); background: var(--lo-surface); color: var(--lo-text); box-shadow: var(--lo-shadow-lg); pointer-events: auto; animation: lasso-page-in 170ms cubic-bezier(0.16, 1, 0.3, 1); }
+    @keyframes lasso-page-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
+    .lasso-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+    .lasso-page-title-row { display: flex; align-items: center; gap: 7px; color: var(--lo-text); }
+    .lasso-page-title { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
+    .lasso-page-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--lo-text-3); cursor: pointer; transition: background 120ms, color 120ms; }
+    .lasso-page-close:hover { background: var(--lo-surface-hover); color: var(--lo-text); }
+    .lasso-page-field { display: block; margin-bottom: 13px; }
+    .lasso-page-label-text { display: block; margin-bottom: 6px; color: var(--lo-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
+    .lasso-page-name { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-md); background: var(--lo-surface-2); color: var(--lo-text); font: inherit; font-size: 12.5px; }
+    .lasso-page-name::placeholder, .lasso-page-filter::placeholder, .lasso-page-inline-input::placeholder { color: var(--lo-text-3); }
+    .lasso-page-name:focus, .lasso-page-filter:focus, .lasso-page-inline-input:focus { outline: none; border-color: var(--lo-primary); box-shadow: 0 0 0 3px var(--lo-primary-soft); }
+    .lasso-page-name.invalid { border-color: var(--lo-error); }
+    .lasso-page-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+    .lasso-page-field-head .lasso-page-label-text { margin-bottom: 0; }
+    .lasso-page-field-tools { display: flex; align-items: center; gap: 5px; }
+    .lasso-page-filter { width: 96px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-full); background: var(--lo-surface-2); color: var(--lo-text); font: inherit; font-size: 11px; }
+    .lasso-page-new-folder { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--lo-border); border-radius: 6px; background: var(--lo-surface-2); color: var(--lo-text-2); cursor: pointer; transition: background 120ms, color 120ms; }
+    .lasso-page-new-folder:hover { background: var(--lo-surface-hover); color: var(--lo-text); }
+    .lasso-page-tree { max-height: 240px; overflow: auto; padding: 5px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-md); background: var(--lo-surface-2); }
+    .lasso-page-row { display: flex; align-items: center; gap: 4px; min-height: 24px; padding-left: calc(4px + var(--lasso-page-depth, 0) * 13px); padding-right: 4px; border-radius: 5px; color: var(--lo-text-2); font: inherit; font-size: 12px; cursor: pointer; user-select: none; }
+    .lasso-page-row:hover { background: var(--lo-surface-hover); color: var(--lo-text); }
+    .lasso-page-row.selected { background: var(--lo-primary-soft); color: var(--lo-text); box-shadow: inset 2px 0 0 var(--lo-primary); }
+    .lasso-page-row.muted { color: var(--lo-text-3); font-size: 11px; font-style: italic; cursor: default; }
+    .lasso-page-row.muted:hover { background: transparent; color: var(--lo-text-3); }
+    .lasso-page-row.creating { cursor: default; }
+    .lasso-page-row.creating:hover { background: transparent; }
+    .lasso-page-twisty { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; color: var(--lo-text-3); transition: transform 120ms ease; }
+    .lasso-page-twisty.open { transform: rotate(90deg); }
+    .lasso-page-twisty svg { width: 11px; height: 11px; }
+    .lasso-page-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; }
+    .lasso-page-icon svg { width: 14px; height: 14px; }
+    .lasso-page-icon.folder { color: var(--lo-primary); }
+    .lasso-page-icon.file { color: var(--lo-text-3); }
+    .lasso-page-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .lasso-page-inline-input { min-width: 0; flex: 1; padding: 3px 6px; border: 1px solid var(--lo-primary); border-radius: 5px; background: var(--lo-surface); color: var(--lo-text); font: inherit; font-size: 12px; }
+    .lasso-page-inline-confirm, .lasso-page-inline-cancel { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 5px; cursor: pointer; }
+    .lasso-page-inline-confirm { background: var(--lo-primary-soft); color: var(--lo-primary); }
+    .lasso-page-inline-cancel { background: transparent; color: var(--lo-text-3); }
+    .lasso-page-inline-confirm:hover, .lasso-page-inline-cancel:hover { filter: brightness(1.2); }
+    .lasso-page-inline-confirm svg, .lasso-page-inline-cancel svg { width: 12px; height: 12px; }
+    .lasso-page-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .lasso-page-status { min-width: 0; flex: 1; color: var(--lo-text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .lasso-page-status.error { color: var(--lo-error); }
+    .lasso-page-create { flex: 0 0 auto; padding: 8px 15px; 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: filter 120ms, opacity 120ms; }
+    .lasso-page-create:disabled { opacity: 0.45; cursor: not-allowed; }
+    .lasso-page-create:not(:disabled):hover { filter: brightness(1.08); }
+    @media (max-width: 600px) { .lasso-page-panel { width: 100%; } }
+
     .lasso-tb-sep {
       width: 1px;
       height: 20px;
@@ -8138,6 +8229,24 @@
       transform: scale(0.96);
     }
 
+    .lasso-toolbar-tooltip {
+      position: fixed;
+      z-index: 100;
+      transform: translateX(-50%);
+      max-width: 220px;
+      padding: 6px 9px;
+      border: 1px solid var(--lo-border);
+      border-radius: 7px;
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      box-shadow: 0 8px 24px rgba(0,0,0,.28);
+      font-size: 11px;
+      line-height: 1.2;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+    .lasso-toolbar-tooltip[hidden] { display: none; }
+
     /* Animated label transition */
     .lasso-tool-label {
       max-width: 0;
@@ -8306,6 +8415,11 @@
       color: #ffffff;
     }
 
+    @media (max-width: 760px) {
+      .lasso-toolbar-mini { left: 50%; bottom: 82px; transform: translateX(-50%); }
+      .lasso-new-page-panel { left: 50%; transform: translateX(-50%); }
+    }
+
     /* Presence Avatars in toolbar with color outlines */
     .lasso-presence {
       display: flex;
@@ -10943,6 +11057,26 @@
     .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-agent-prompt-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 9, 11, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; }
+    .lasso-agent-prompt-backdrop[hidden] { display: none; }
+    .lasso-agent-prompt { display: flex; flex-direction: column; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-lg); background: var(--lo-surface); color: var(--lo-text); box-shadow: var(--lo-shadow-lg); pointer-events: auto; animation: lasso-agent-prompt-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
+    @keyframes lasso-agent-prompt-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+    .lasso-agent-prompt-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
+    .lasso-agent-prompt-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: var(--lo-primary-soft); color: var(--lo-primary); }
+    .lasso-agent-prompt-mark svg { width: 15px; height: 15px; }
+    .lasso-agent-prompt-headings { min-width: 0; flex: 1; }
+    .lasso-agent-prompt-title { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
+    .lasso-agent-prompt-subtitle { margin-top: 2px; color: var(--lo-text-3); font-size: 11px; }
+    .lasso-agent-prompt-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--lo-text-3); cursor: pointer; transition: background 120ms, color 120ms; }
+    .lasso-agent-prompt-close:hover { background: var(--lo-surface-hover); color: var(--lo-text); }
+    .lasso-agent-prompt-message { max-height: 220px; margin-bottom: 14px; padding: 10px 11px; overflow: auto; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-md); background: var(--lo-surface-2); color: var(--lo-text-2); font: inherit; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: text; }
+    .lasso-agent-prompt-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-md); background: var(--lo-surface-2); color: var(--lo-text); font: inherit; font-size: 12px; }
+    .lasso-agent-prompt-input[hidden] { display: none; }
+    .lasso-agent-prompt-actions { display: flex; justify-content: flex-end; gap: 7px; }
+    .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); }
+    .lasso-agent-prompt-actions button.primary { background: var(--lo-primary); color: #111214; font-weight: 600; }
 
     .lasso-todo-header {
       display: flex;
@@ -12129,7 +12263,6 @@
   // src/overlay/tasks/tasks.ts
   var panel = null;
   var list = null;
-  var detail = null;
   var badge = null;
   var selectionListeners = /* @__PURE__ */ new Set();
   var reviewListeners = /* @__PURE__ */ new Set();
@@ -12160,6 +12293,17 @@
       (task) => task.status !== "complete" && task.status !== "error" && task.status !== "stopped" && normalizedInstruction(task.instruction) === normalized && task.element === (element || void 0)
     );
   }
+  function getComponentConversation(selectionId) {
+    const task = state.agentTasks.find((candidate) => candidate.selectionId === selectionId);
+    if (!task) return { messages: [], changesHistory: [] };
+    return {
+      messages: task.messages.map((message) => ({ ...message })),
+      changesHistory: task.changesHistory.map((entry) => ({
+        ...entry,
+        changes: entry.changes.map((change) => ({ ...change }))
+      }))
+    };
+  }
   function onAgentTaskSelected(listener) {
     selectionListeners.add(listener);
     return () => selectionListeners.delete(listener);
@@ -12274,12 +12418,10 @@
     </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));
     panel.querySelectorAll(".lasso-task-tab").forEach((tab) => {
@@ -12296,15 +12438,15 @@
     return panel;
   }
   function renderTasks() {
-    const panelEl = panel;
-    if (!panelEl || !list || !detail || !badge) return;
+    const panelEl2 = panel;
+    if (!panelEl2 || !list || !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();
-    const activeTab = panelEl.querySelector(".lasso-task-tab.active")?.dataset.taskTab || "active";
+    const activeTab = panelEl2.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>`;
@@ -12326,49 +12468,6 @@
         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 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);
-      }
-    }
   }
 
   // src/overlay/notifications.ts
@@ -17735,7 +17834,7 @@
     const textarea = el.querySelector(".lasso-notepad-textarea");
     const preview = el.querySelector(".lasso-notepad-preview");
     const countEl = el.querySelector(".lasso-notepad-count");
-    const statusEl = el.querySelector(".lasso-notepad-status");
+    const statusEl2 = el.querySelector(".lasso-notepad-status");
     textarea.value = initialContent;
     collabEmit("note:get", {}, (response) => {
       if (response.ok && typeof response.body === "string") {
@@ -17757,7 +17856,7 @@
         voiceBtn.classList.remove("recording");
         voiceBtn.classList.add("transcribing");
         voiceBtn.title = "Transcribing\u2026";
-        statusEl.textContent = "Transcribing\u2026";
+        statusEl2.textContent = "Transcribing\u2026";
         try {
           const result = await stopVoiceRecording();
           if (result.text) {
@@ -17771,20 +17870,20 @@
             textarea.setSelectionRange(cursor, cursor);
             textarea.dispatchEvent(new Event("input"));
             textarea.focus();
-            statusEl.textContent = "Transcribed";
+            statusEl2.textContent = "Transcribed";
             window.setTimeout(() => {
-              statusEl.textContent = "Autosaved";
+              statusEl2.textContent = "Autosaved";
             }, 2e3);
           } else {
-            statusEl.textContent = "No speech detected";
+            statusEl2.textContent = "No speech detected";
             window.setTimeout(() => {
-              statusEl.textContent = "Autosaved";
+              statusEl2.textContent = "Autosaved";
             }, 1500);
           }
         } catch (err) {
-          statusEl.textContent = err?.message || "Transcription failed";
+          statusEl2.textContent = err?.message || "Transcription failed";
           window.setTimeout(() => {
-            statusEl.textContent = "Autosaved";
+            statusEl2.textContent = "Autosaved";
           }, 2500);
         } finally {
           voiceBtn.classList.remove("transcribing");
@@ -17795,11 +17894,11 @@
           await startVoiceRecording();
           voiceBtn.classList.add("recording");
           voiceBtn.title = "Recording\u2026 click again to stop & transcribe";
-          statusEl.textContent = "Listening\u2026";
+          statusEl2.textContent = "Listening\u2026";
         } catch (err) {
-          statusEl.textContent = err?.message || "Microphone access denied";
+          statusEl2.textContent = err?.message || "Microphone access denied";
           window.setTimeout(() => {
-            statusEl.textContent = "Autosaved";
+            statusEl2.textContent = "Autosaved";
           }, 3e3);
         }
       }
@@ -17823,11 +17922,11 @@
     textarea.addEventListener("input", () => {
       const text = textarea.value;
       updateCounts(text.length, countEl);
-      statusEl.textContent = "Saving\u2026";
+      statusEl2.textContent = "Saving\u2026";
       if (saveTimer) window.clearTimeout(saveTimer);
       saveTimer = window.setTimeout(() => {
         saveNote(text);
-        statusEl.textContent = "Autosaved";
+        statusEl2.textContent = "Autosaved";
       }, 400);
     });
     copyBtn.addEventListener("click", async () => {
@@ -17847,12 +17946,12 @@
             ta.remove();
           }
         }
-        statusEl.textContent = "Copied!";
+        statusEl2.textContent = "Copied!";
         setTimeout(() => {
-          statusEl.textContent = "Autosaved";
+          statusEl2.textContent = "Autosaved";
         }, 1500);
       } catch {
-        statusEl.textContent = "Copy failed";
+        statusEl2.textContent = "Copy failed";
       }
     });
     return el;
@@ -18494,6 +18593,8 @@
   var agentLogLines = [];
   var agentLogExpanded = false;
   var reviewPanel = null;
+  var agentPromptPanel = null;
+  var agentPromptTaskId = null;
   var modelBtn = null;
   var modelName = null;
   var modelMenu = null;
@@ -18519,6 +18620,17 @@
     const icon = providerIcons[provider];
     return `<span class="${active ? "lasso-model-active-icon" : "lasso-model-item-icon"} provider-${provider}" aria-hidden="true"><svg viewBox="0 0 ${icon.width} ${icon.height}" xmlns="http://www.w3.org/2000/svg" focusable="false">${icon.body}</svg></span>`;
   }
+  function componentConversationId(element) {
+    const source = element.getAttribute("data-source") || element.getAttribute("data-lasso-source") || getSourceHint(element);
+    return `component:${source || elementKey(element)}`;
+  }
+  function loadComponentConversation(element) {
+    const selectionId = componentConversationId(element);
+    const conversation = getComponentConversation(selectionId);
+    state.selectionId = selectionId;
+    state.chatHistory = conversation.messages;
+    state.changesHistory = conversation.changesHistory;
+  }
   function buildPrompt() {
     const dom = getDOM();
     const el = document.createElement("div");
@@ -18610,6 +18722,58 @@
   `;
     dom.shadow.appendChild(el);
     promptEl = el;
+    const agentPrompt = document.createElement("div");
+    agentPrompt.className = "lasso-agent-prompt-backdrop";
+    agentPrompt.hidden = true;
+    agentPrompt.innerHTML = `
+    <div class="lasso-agent-prompt" role="dialog" aria-modal="true" aria-labelledby="lasso-agent-prompt-title">
+      <div class="lasso-agent-prompt-head">
+        <span class="lasso-agent-prompt-mark" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3l7.5 3.2v5.1c0 4.4-3 8.4-7.5 9.7-4.5-1.3-7.5-5.3-7.5-9.7V6.2z"/>
+            <path d="M9.4 12.1l1.9 1.9 3.4-3.7"/>
+          </svg>
+        </span>
+        <div class="lasso-agent-prompt-headings">
+          <div class="lasso-agent-prompt-title" id="lasso-agent-prompt-title">Agent needs your input</div>
+          <div class="lasso-agent-prompt-subtitle"></div>
+        </div>
+        <button class="lasso-agent-prompt-close" type="button" aria-label="Deny and continue">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div class="lasso-agent-prompt-message" tabindex="0"></div>
+      <input class="lasso-agent-prompt-input" type="text" placeholder="Type a response\u2026" hidden />
+      <div class="lasso-agent-prompt-actions"></div>
+    </div>
+  `;
+    dom.shadow.appendChild(agentPrompt);
+    agentPromptPanel = agentPrompt;
+    agentPrompt.addEventListener("pointerdown", (event) => {
+      if (event.target === agentPrompt) respondToAgentPrompt("Deny");
+    });
+    agentPrompt.addEventListener("keydown", (event) => {
+      const key = event.key;
+      if (key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        respondToAgentPrompt("Deny");
+      }
+    });
+    agentPrompt.querySelector(".lasso-agent-prompt-close").addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      respondToAgentPrompt("Deny");
+    });
+    agentPrompt.querySelector(".lasso-agent-prompt-input").addEventListener("keydown", (event) => {
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      event.stopPropagation();
+      const value2 = agentPrompt.querySelector(".lasso-agent-prompt-input")?.value.trim();
+      if (value2) respondToAgentPrompt(value2);
+    });
     promptInput = el.querySelector(".lasso-prompt-input");
     promptElement = el.querySelector(".lasso-prompt-element-name");
     sendButton = el.querySelector(".lasso-prompt-send");
@@ -18686,9 +18850,9 @@
     });
     modelMenu.addEventListener("click", (event) => {
       event.stopPropagation();
-      const filter = event.target.closest(".lasso-model-filter");
-      if (filter?.dataset.providerFilter) {
-        state.modelFilter = filter.dataset.providerFilter;
+      const filter2 = event.target.closest(".lasso-model-filter");
+      if (filter2?.dataset.providerFilter) {
+        state.modelFilter = filter2.dataset.providerFilter;
         refreshModelMenu();
         return;
       }
@@ -18809,18 +18973,75 @@
     });
     return { prompt: el, review: rev };
   }
+  function showAgentPrompt(taskId2, prompt) {
+    if (!agentPromptPanel) return;
+    agentPromptTaskId = taskId2;
+    const isPermission = prompt.kind === "permission";
+    const message = agentPromptPanel.querySelector(".lasso-agent-prompt-message");
+    const subtitle = agentPromptPanel.querySelector(".lasso-agent-prompt-subtitle");
+    const input = agentPromptPanel.querySelector(".lasso-agent-prompt-input");
+    const actions = agentPromptPanel.querySelector(".lasso-agent-prompt-actions");
+    agentPromptPanel.dataset.kind = prompt.kind;
+    if (message) {
+      message.textContent = prompt.message.trim() || "The agent is waiting for a response before it can continue.";
+    }
+    if (subtitle) {
+      subtitle.textContent = isPermission ? "Lasso is paused until you choose an option." : "Type your answer and press Enter.";
+    }
+    if (input) {
+      input.value = "";
+      input.hidden = isPermission;
+    }
+    if (actions) {
+      const options = isPermission ? prompt.options?.length ? prompt.options : ["Allow", "Deny"] : ["Send"];
+      actions.replaceChildren(
+        ...options.map((option) => {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.dataset.agentResponse = option;
+          button.textContent = option;
+          button.className = isDenyOption(option) ? "" : "primary";
+          button.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const typed = isPermission ? option : input?.value.trim() || "";
+            if (typed) respondToAgentPrompt(typed);
+          });
+          return button;
+        })
+      );
+    }
+    agentPromptPanel.hidden = false;
+    if (!isPermission) input?.focus();
+    else agentPromptPanel.querySelector(".lasso-agent-prompt-message")?.focus();
+  }
+  function isDenyOption(option) {
+    return /^(deny|decline|no|cancel|reject|stop|abort)$/i.test(option.trim());
+  }
+  function respondToAgentPrompt(response) {
+    const taskId2 = agentPromptTaskId;
+    if (!taskId2 || !agentPromptPanel) return;
+    agentPromptTaskId = null;
+    agentPromptPanel.hidden = true;
+    if (state.bridgeSocket?.readyState !== WebSocket.OPEN) {
+      appendChat("error", "The Lasso agent bridge disconnected before the response was sent.", taskId2);
+      return;
+    }
+    state.bridgeSocket.send(JSON.stringify({ type: "agent_prompt_response", taskId: taskId2, response }));
+    appendChat("assistant", `Responded to the agent: ${response}`, taskId2);
+  }
   function refreshModelMenu() {
     if (!modelMenu) return;
     const filters = document.createElement("div");
     filters.className = "lasso-model-filters";
     const providers = ["all", ...Array.from(new Set(state.MODELS.map((m) => m.provider)))];
     for (const provider of providers) {
-      const filter = document.createElement("button");
-      filter.type = "button";
-      filter.className = `lasso-model-filter${state.modelFilter === provider ? " active" : ""}`;
-      filter.dataset.providerFilter = provider;
-      filter.textContent = provider === "all" ? "All" : providerLabels[provider];
-      filters.appendChild(filter);
+      const filter2 = document.createElement("button");
+      filter2.type = "button";
+      filter2.className = `lasso-model-filter${state.modelFilter === provider ? " active" : ""}`;
+      filter2.dataset.providerFilter = provider;
+      filter2.textContent = provider === "all" ? "All" : providerLabels[provider];
+      filters.appendChild(filter2);
     }
     const children = [filters];
     const visibleProviders = state.modelFilter === "all" ? providers.slice(1) : [state.modelFilter];
@@ -19035,9 +19256,9 @@
       container.append(document.createTextNode(text.slice(lastIndex)));
     }
   }
-  function setAgentStatus(status, message, detail2, taskId2 = state.promptTaskId, appendMessage = true) {
+  function setAgentStatus(status, message, detail, taskId2 = state.promptTaskId, appendMessage = true) {
     if (!agentStatusElement || !agentStatusMessage || !sendButton) return;
-    const logMessage = detail2?.trim() || message.trim();
+    const logMessage = detail?.trim() || message.trim();
     const lastLog = agentLogLines[agentLogLines.length - 1];
     if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (!logMessage || lastLog === logMessage)) return;
     appendAgentLog(logMessage);
@@ -19092,13 +19313,17 @@
   function hideReview() {
     if (reviewPanel) reviewPanel.hidden = true;
   }
-  function resetPromptSession() {
+  function resetPromptSession(element = state.selected) {
     state.promptTaskId = null;
-    state.chatHistory = [];
-    state.changesHistory = [];
     state.pendingChanges = [];
     state.lastInstruction = "";
-    state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    if (element) {
+      loadComponentConversation(element);
+    } else {
+      state.chatHistory = [];
+      state.changesHistory = [];
+      state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    }
     state.screenshotPromise = Promise.resolve({});
     hideReview();
     clearAgentLog();
@@ -19271,7 +19496,7 @@
     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();
+    resetPromptSession(selectedElement);
     state.promptTaskId = task.id;
     state.lastInstruction = instruction;
     const rect = selectedElement.getBoundingClientRect();
@@ -19341,7 +19566,7 @@
   }
   function openPromptForSelected(selected) {
     if (!promptEl || !promptElement) return;
-    resetPromptSession();
+    resetPromptSession(selected);
     promptElement.textContent = getElementLabel(selected);
     positionPrompt(selected);
     promptEl.classList.add("visible");
@@ -20487,6 +20712,483 @@
     }
   }
 
+  // src/overlay/pages/pages.ts
+  var ROOT_PATH = ".";
+  var DEFAULT_FILE_NAME = "page.tsx";
+  var ICON_FOLDER = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M1.75 4.2c0-.6.5-1.1 1.1-1.1h3.1c.35 0 .68.16.9.45l.7.95h4.4c.6 0 1.1.5 1.1 1.1v6.3c0 .6-.5 1.1-1.1 1.1H2.85c-.6 0-1.1-.5-1.1-1.1z" fill="currentColor" fill-opacity=".16" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/></svg>`;
+  var ICON_FOLDER_OPEN = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M1.75 12.4V4.2c0-.6.5-1.1 1.1-1.1h3.1c.35 0 .68.16.9.45l.7.95h3.9c.5 0 .92.34 1.05.8l.9 3.3H4.4l-1.5 3.1H2.85c-.6 0-1.1-.5-1.1-1.1z" fill="currentColor" fill-opacity=".16" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/><path d="M4.2 12.4l1.6-3.3h8.6l-1.7 3.3z" fill="currentColor" fill-opacity=".16" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/></svg>`;
+  var ICON_FILE = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 2.2h4.6L12 5.6v8.2H4z" fill="currentColor" fill-opacity=".1" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/><path d="M8.4 2.4V5.7H11.7" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/></svg>`;
+  var ICON_CHEVRON = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  var panelEl = null;
+  var treeEl = null;
+  var nameInput = null;
+  var filterInput = null;
+  var statusEl = null;
+  var newFolderBtn = null;
+  var createBtn = null;
+  var root = { name: "Project", path: ROOT_PATH, type: "directory", expanded: true, loaded: false, children: [] };
+  var selectedFolder = ROOT_PATH;
+  var filter = "";
+  var inlineCreate = null;
+  var loadingPaths = /* @__PURE__ */ new Set();
+  function findNode(path, nodes = [root]) {
+    for (const node of nodes) {
+      if (node.path === path) return node;
+      if (node.type === "directory") {
+        const found = findNode(path, node.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+  function toNode(entry) {
+    return { ...entry, expanded: false, loaded: false, children: [] };
+  }
+  function requestChildren(path, force = false) {
+    const node = findNode(path);
+    if (!node || node.type !== "directory") return;
+    if (node.loaded && !force) return;
+    if (state.bridgeSocket?.readyState !== WebSocket.OPEN) {
+      setStatus2("The Lasso agent bridge is not connected.", true);
+      return;
+    }
+    loadingPaths.add(path);
+    render2();
+    state.bridgeSocket.send(JSON.stringify({ type: "list_page_folders", path }));
+  }
+  function revealSelected() {
+    const found = findNode(selectedFolder);
+    if (!found || found === root) return;
+    const chain = [];
+    const collect = (nodes, trail) => {
+      for (const node of nodes) {
+        if (node === found) {
+          chain.push(...trail);
+          return true;
+        }
+        if (node.type === "directory" && collect(node.children, [...trail, node])) return true;
+      }
+      return false;
+    };
+    if (!collect(root.children, [])) return;
+    for (const node of chain) {
+      if (!node.expanded) {
+        node.expanded = true;
+        if (!node.loaded) requestChildren(node.path);
+      }
+    }
+  }
+  function setStatus2(message, isError = false) {
+    if (!statusEl) return;
+    statusEl.textContent = message;
+    statusEl.classList.toggle("error", isError);
+  }
+  function matchesFilter(node, term) {
+    if (node.name.toLowerCase().includes(term)) return true;
+    return node.children.some((child) => child.type === "directory" && child.expanded && matchesFilter(child, term));
+  }
+  function render2() {
+    if (!treeEl) return;
+    const rows = [];
+    const term = filter.trim().toLowerCase();
+    const walk = (nodes, depth) => {
+      for (const node of nodes) {
+        if (term && !matchesFilter(node, term)) continue;
+        rows.push(renderRow(node, depth));
+        if (node.type === "directory" && node.expanded) {
+          if (inlineCreate?.parent === node.path) rows.push(renderInlineCreate(depth + 1));
+          if (loadingPaths.has(node.path)) {
+            rows.push(placeholderRow(depth + 1, "Loading\u2026"));
+            continue;
+          }
+          if (!node.children.length) {
+            if (node.loaded) rows.push(placeholderRow(depth + 1, "Empty"));
+            continue;
+          }
+          walk(node.children, depth + 1);
+        }
+      }
+    };
+    walk([root], 0);
+    if (!rows.length) {
+      rows.push(placeholderRow(0, term ? "No matching folders" : loadingPaths.size ? "Loading folders\u2026" : "No folders to show"));
+    }
+    treeEl.replaceChildren(...rows);
+    syncCreateButton();
+  }
+  function placeholderRow(depth, label) {
+    const row = document.createElement("div");
+    row.className = "lasso-page-row muted";
+    row.style.setProperty("--lasso-page-depth", String(depth));
+    row.textContent = label;
+    return row;
+  }
+  function renderRow(node, depth) {
+    const isDirectory = node.type === "directory";
+    const row = document.createElement("div");
+    row.className = "lasso-page-row";
+    row.dataset.path = node.path;
+    row.dataset.type = node.type;
+    row.style.setProperty("--lasso-page-depth", String(depth));
+    row.setAttribute("role", "treeitem");
+    if (isDirectory) {
+      row.setAttribute("aria-expanded", String(node.expanded));
+    }
+    row.classList.toggle("selected", isDirectory && node.path === selectedFolder);
+    const twisty = document.createElement("span");
+    twisty.className = "lasso-page-twisty";
+    if (isDirectory) {
+      twisty.innerHTML = ICON_CHEVRON;
+      twisty.classList.toggle("open", node.expanded);
+      twisty.title = node.expanded ? "Collapse" : "Expand";
+      twisty.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleDirectory(node);
+      });
+    }
+    const icon = document.createElement("span");
+    icon.className = `lasso-page-icon ${isDirectory ? "folder" : "file"}`;
+    icon.innerHTML = isDirectory && node.expanded ? ICON_FOLDER_OPEN : isDirectory ? ICON_FOLDER : ICON_FILE;
+    const label = document.createElement("span");
+    label.className = "lasso-page-label";
+    label.textContent = node.name;
+    row.append(twisty, icon, label);
+    row.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (isDirectory) {
+        selectFolder(node.path);
+        if (!node.expanded) toggleDirectory(node);
+      } else {
+        selectFolder(node.path.includes("/") ? node.path.slice(0, node.path.lastIndexOf("/")) : ROOT_PATH);
+        if (nameInput && !nameInput.value.trim()) nameInput.value = node.name;
+      }
+    });
+    return row;
+  }
+  function renderInlineCreate(depth) {
+    const row = document.createElement("div");
+    row.className = "lasso-page-row creating";
+    row.style.setProperty("--lasso-page-depth", String(depth));
+    const icon = document.createElement("span");
+    icon.className = "lasso-page-icon folder";
+    icon.innerHTML = ICON_FOLDER;
+    const input = document.createElement("input");
+    input.className = "lasso-page-inline-input";
+    input.type = "text";
+    input.placeholder = "New folder name";
+    input.setAttribute("aria-label", "New folder name");
+    const confirm = document.createElement("button");
+    confirm.type = "button";
+    confirm.className = "lasso-page-inline-confirm";
+    confirm.title = "Create folder";
+    confirm.setAttribute("aria-label", "Create folder");
+    confirm.innerHTML = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.4l3 3 6-6.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "lasso-page-inline-cancel";
+    cancel.title = "Cancel";
+    cancel.setAttribute("aria-label", "Cancel folder creation");
+    cancel.innerHTML = `<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`;
+    const submit = () => {
+      const name = input.value.trim();
+      if (!name) {
+        cancelCreate();
+        return;
+      }
+      if (state.bridgeSocket?.readyState !== WebSocket.OPEN) {
+        setStatus2("The Lasso agent bridge is not connected.", true);
+        return;
+      }
+      const parent = inlineCreate?.parent || selectedFolder;
+      setStatus2(`Creating ${name}\u2026`);
+      state.bridgeSocket.send(JSON.stringify({ type: "create_page_folder", parent, name }));
+      inlineCreate = null;
+      render2();
+    };
+    input.addEventListener("keydown", (event) => {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        event.preventDefault();
+        submit();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        cancelCreate();
+      }
+    });
+    input.addEventListener("click", (event) => event.stopPropagation());
+    confirm.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      submit();
+    });
+    cancel.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      cancelCreate();
+    });
+    row.append(icon, input, confirm, cancel);
+    requestAnimationFrame(() => input.focus());
+    return row;
+  }
+  function cancelCreate() {
+    inlineCreate = null;
+    render2();
+  }
+  function startInlineCreate() {
+    inlineCreate = { parent: selectedFolder };
+    setStatus2("");
+    render2();
+  }
+  function toggleDirectory(node) {
+    node.expanded = !node.expanded;
+    if (node.expanded && !node.loaded) requestChildren(node.path);
+    render2();
+  }
+  function selectFolder(path) {
+    selectedFolder = path;
+    if (nameInput) {
+      nameInput.placeholder = path === ROOT_PATH ? DEFAULT_FILE_NAME : `${path}/page.tsx`;
+    }
+    render2();
+  }
+  function syncCreateButton() {
+    if (!createBtn) return;
+    const name = nameInput?.value.trim() || "";
+    createBtn.disabled = !name;
+    if (nameInput) nameInput.classList.toggle("invalid", Boolean(name) && /(^|\/)(\.|\.\.)$/.test(name));
+  }
+  function selectedTargetLabel() {
+    return selectedFolder === ROOT_PATH ? "project root" : selectedFolder;
+  }
+  function buildPagePanel() {
+    const dom = getDOM();
+    const el = document.createElement("div");
+    el.className = "lasso-page-backdrop";
+    el.hidden = true;
+    el.innerHTML = `
+    <div class="lasso-page-panel" role="dialog" aria-modal="true" aria-labelledby="lasso-page-title">
+      <div class="lasso-page-header">
+        <div class="lasso-page-title-row">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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"/>
+          </svg>
+          <span class="lasso-page-title" id="lasso-page-title">New page</span>
+        </div>
+        <button class="lasso-page-close" type="button" aria-label="Close">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+
+      <label class="lasso-page-field">
+        <span class="lasso-page-label-text">Name</span>
+        <input class="lasso-page-name" type="text" spellcheck="false" autocomplete="off" placeholder="${DEFAULT_FILE_NAME}" />
+      </label>
+
+      <div class="lasso-page-field">
+        <div class="lasso-page-field-head">
+          <span class="lasso-page-label-text">Folder</span>
+          <div class="lasso-page-field-tools">
+            <input class="lasso-page-filter" type="text" spellcheck="false" autocomplete="off" placeholder="Filter" aria-label="Filter folders" />
+            <button class="lasso-page-new-folder" type="button" title="New folder">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 5v14M5 12h14"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="lasso-page-tree" role="tree" aria-label="Project folders"></div>
+      </div>
+
+      <div class="lasso-page-footer">
+        <div class="lasso-page-status" aria-live="polite"></div>
+        <button class="lasso-page-create" type="button">Create page</button>
+      </div>
+    </div>
+  `;
+    dom.shadow.appendChild(el);
+    panelEl = el;
+    treeEl = el.querySelector(".lasso-page-tree");
+    nameInput = el.querySelector(".lasso-page-name");
+    filterInput = el.querySelector(".lasso-page-filter");
+    statusEl = el.querySelector(".lasso-page-status");
+    newFolderBtn = el.querySelector(".lasso-page-new-folder");
+    createBtn = el.querySelector(".lasso-page-create");
+    el.addEventListener("pointerdown", (event) => {
+      if (event.target === el) closePagePanel();
+    });
+    el.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      if (inlineCreate) {
+        cancelCreate();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      closePagePanel();
+    });
+    el.querySelector(".lasso-page-close").addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closePagePanel();
+    });
+    newFolderBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      startInlineCreate();
+    });
+    nameInput.addEventListener("input", syncCreateButton);
+    nameInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        createPage();
+      }
+    });
+    filterInput.addEventListener("input", () => {
+      filter = filterInput?.value || "";
+      render2();
+    });
+    filterInput.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        if (filterInput?.value) {
+          filterInput.value = "";
+          filter = "";
+        } else {
+          closePagePanel();
+        }
+        render2();
+      }
+    });
+    createBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      createPage();
+    });
+    window.addEventListener("lasso-page-folders", (event) => {
+      const detail = event.detail;
+      if (!detail) return;
+      loadingPaths.delete(detail.path);
+      const node = findNode(detail.path);
+      if (detail.error) {
+        setStatus2(detail.error, true);
+      } else if (node) {
+        if (detail.project) root.name = detail.project;
+        node.children = detail.entries.map(toNode);
+        node.loaded = true;
+      }
+      render2();
+    });
+    window.addEventListener("lasso-page-folder-created", (event) => {
+      const detail = event.detail;
+      if (!detail) return;
+      if (detail.error) {
+        setStatus2(detail.error, true);
+        return;
+      }
+      setStatus2(`Created folder ${detail.path}`);
+      requestChildren(detail.path.replace(/\/[^/]+$/, "") || ROOT_PATH, true);
+      selectFolder(detail.path);
+    });
+    window.addEventListener("lasso-page-created", (event) => {
+      const detail = event.detail;
+      if (!detail) return;
+      if (detail.error) {
+        setStatus2(detail.error, true);
+        return;
+      }
+      const parent = detail.path.includes("/") ? detail.path.slice(0, detail.path.lastIndexOf("/")) : ROOT_PATH;
+      requestChildren(parent, true);
+      setStatus2(`Created ${detail.path}`);
+      if (nameInput) {
+        nameInput.value = "";
+        nameInput.focus();
+      }
+      syncCreateButton();
+    });
+    return el;
+  }
+  function createPage() {
+    if (!nameInput || !createBtn) return;
+    const fileName = nameInput.value.trim();
+    if (!fileName) {
+      setStatus2("Enter a name for the new page.", true);
+      nameInput.focus();
+      return;
+    }
+    if (state.bridgeSocket?.readyState !== WebSocket.OPEN) {
+      setStatus2("The Lasso agent bridge is not connected.", true);
+      return;
+    }
+    createBtn.disabled = true;
+    setStatus2(`Creating ${fileName} in ${selectedTargetLabel()}\u2026`);
+    state.bridgeSocket.send(
+      JSON.stringify({
+        type: "create_page",
+        folder: selectedFolder,
+        fileName,
+        content: starterContent(fileName)
+      })
+    );
+  }
+  function starterContent(fileName) {
+    const extension = (fileName.split(".").pop() || "").toLowerCase();
+    const base = (fileName.split("/").pop() || "page").replace(/\.[^.]+$/, "");
+    const component = base.split(/[^A-Za-z0-9]+/).filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join("") || "Page";
+    const className = base.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "page";
+    if (extension === "tsx" || extension === "jsx") {
+      return `export default function ${component}() {
+  return (
+    <main className="${className}">
+      <h1>${component}</h1>
+    </main>
+  );
+}
+`;
+    }
+    if (extension === "ts" || extension === "js") {
+      return `export function ${component.toLowerCase()}() {
+  return null;
+}
+`;
+    }
+    if (extension === "css") return `/* ${base} styles */
+`;
+    if (extension === "json") return "{}\n";
+    if (extension === "md") return `# ${base}
+`;
+    return "";
+  }
+  function openPagePanel() {
+    if (!panelEl) return;
+    panelEl.hidden = false;
+    setStatus2("");
+    if (nameInput) nameInput.value = "";
+    syncCreateButton();
+    render2();
+    requestChildren(ROOT_PATH, true);
+    revealSelected();
+    render2();
+    requestAnimationFrame(() => nameInput?.focus());
+  }
+  function closePagePanel() {
+    if (!panelEl) return;
+    panelEl.hidden = true;
+    inlineCreate = null;
+  }
+  function togglePagePanel() {
+    if (!panelEl) return;
+    if (panelEl.hidden) openPagePanel();
+    else closePagePanel();
+  }
+  function isPagePanelOpen() {
+    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`;
@@ -20658,7 +21360,56 @@
       </svg>
     </button>
   `;
-    dom.shadow.append(toolbar, toolbarReopen, voiceBar);
+    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>
+  `;
+    dom.shadow.append(toolbar, miniToolbar, toolbarReopen, voiceBar);
+    const tooltip = document.createElement("div");
+    tooltip.className = "lasso-toolbar-tooltip";
+    tooltip.hidden = true;
+    tooltip.setAttribute("role", "tooltip");
+    dom.shadow.appendChild(tooltip);
+    let tooltipTarget = null;
+    const showTooltip = (target) => {
+      const label = target.dataset.tooltip || target.getAttribute("title") || target.getAttribute("aria-label");
+      if (!label) return;
+      target.removeAttribute("title");
+      tooltipTarget = target;
+      tooltip.textContent = label;
+      tooltip.hidden = false;
+      const rect = target.getBoundingClientRect();
+      tooltip.style.left = `${rect.left + rect.width / 2}px`;
+      tooltip.style.top = `${rect.bottom + 8}px`;
+    };
+    const hideTooltip = (target) => {
+      if (!target || tooltipTarget === target) {
+        tooltip.hidden = true;
+        tooltipTarget = null;
+      }
+    };
+    toolbar.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));
+    });
+    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");
@@ -20670,6 +21421,12 @@
     const clipboardBtn = toolbar.querySelector(".clipboard-tool");
     const voiceBtn = toolbar.querySelector(".voice-tool");
     const dismissBtn = toolbar.querySelector(".lasso-toolbar-dismiss");
+    const newPageBtn = miniToolbar.querySelector(".lasso-new-page-btn");
+    newPageBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      togglePagePanel();
+    });
     selectBtn.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -20728,10 +21485,12 @@
     });
     dismissBtn.addEventListener("click", () => {
       toolbar.classList.add("dismissed");
+      miniToolbar.classList.add("dismissed");
       toolbarReopen.classList.add("visible");
     });
     toolbarReopen.addEventListener("click", () => {
       toolbar.classList.remove("dismissed");
+      miniToolbar.classList.remove("dismissed");
       toolbarReopen.classList.remove("visible");
     });
     voiceBar.querySelector(".mute-toggle").addEventListener("click", () => {
@@ -20804,6 +21563,26 @@
           if (message.type === "git_progress" && message.message) {
             setGitMessage(message.message);
           }
+          if (message.type === "agent_prompt" && message.taskId && message.prompt) {
+            showAgentPrompt(message.taskId, message.prompt);
+            return;
+          }
+          if (message.type === "page_folders") {
+            window.dispatchEvent(
+              new CustomEvent("lasso-page-folders", {
+                detail: { path: message.path || ".", entries: message.entries || [], project: message.project, error: message.error }
+              })
+            );
+            return;
+          }
+          if (message.type === "page_created") {
+            window.dispatchEvent(new CustomEvent("lasso-page-created", { detail: { path: message.path || "", error: message.error } }));
+            return;
+          }
+          if (message.type === "page_folder_created") {
+            window.dispatchEvent(new CustomEvent("lasso-page-folder-created", { detail: { path: message.path || "", error: message.error } }));
+            return;
+          }
           if (message.type === "agent_status" && message.status && message.message) {
             const taskId2 = message.taskId;
             const task = taskId2 ? getAgentTask(taskId2) : void 0;
@@ -20906,6 +21685,7 @@
     buildNotepadPanel();
     buildClipboardPanel();
     buildTaskPanel();
+    buildPagePanel();
     buildPrompt();
     buildDrag();
     initErrorListeners();
@@ -20980,6 +21760,10 @@
         closePinThread();
         return;
       }
+      if (isPagePanelOpen()) {
+        closePagePanel();
+        return;
+      }
       if (isPromptOpen()) {
         cancelPrompt(true);
         return;