@lasso-ai/cli 1.1.0 → 1.1.2

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;
@@ -8115,7 +8115,7 @@
       align-items: center;
       gap: 6px;
       height: 34px;
-      padding: 0 11px;
+      padding: 0 12px;
       border: 0;
       border-radius: var(--lo-radius-full);
       background: var(--lo-primary);
@@ -8126,22 +8126,62 @@
       cursor: pointer;
       transition: transform 150ms ease, filter 150ms ease;
     }
-    .lasso-new-page-btn span:first-child { font-size: 19px; font-weight: 400; line-height: 1; }
     .lasso-new-page-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
     .lasso-new-page-btn:active { transform: scale(.97); }
-    .lasso-new-page-panel { position: fixed; left: calc(50% + 280px); bottom: 82px; width: 310px; max-width: calc(100vw - 24px); padding: 14px; 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; z-index: 20; }
-    .lasso-new-page-panel[hidden] { display: none; }
-    .lasso-new-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
-    .lasso-new-page-close { border: 0; background: transparent; color: var(--lo-text-3); font-size: 20px; line-height: 1; cursor: pointer; }
-    .lasso-new-page-panel label { display: block; margin: 9px 0; color: var(--lo-text-2); font-size: 11px; }
-    .lasso-new-page-name, .lasso-new-page-content { width: 100%; box-sizing: border-box; margin-top: 5px; padding: 8px; 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-new-page-content { resize: vertical; line-height: 1.4; }
-    .lasso-page-folder-list { display: flex; flex-direction: column; gap: 3px; max-height: 130px; margin-top: 5px; padding: 4px; overflow: auto; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-md); background: var(--lo-surface-2); }
-    .lasso-page-folder-list button { padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--lo-text-2); text-align: left; font: inherit; font-size: 11px; cursor: pointer; }
-    .lasso-page-folder-list button:hover, .lasso-page-folder-list button.selected { background: var(--lo-surface-hover); color: var(--lo-text); }
-    .lasso-new-page-status { min-height: 16px; margin: 7px 0; color: var(--lo-text-3); font-size: 11px; }
-    .lasso-new-page-status.error { color: #f87171; }
-    .lasso-new-page-create { width: 100%; padding: 8px; border: 0; border-radius: var(--lo-radius-full); background: var(--lo-primary); color: #111214; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
+
+    /* ==========================================================
+       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;
@@ -11017,14 +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 { position: fixed; left: 50%; top: 50%; width: min(360px, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 16px; border: 1px solid var(--lo-border); border-radius: var(--lo-radius-lg); background: var(--lo-surface); color: var(--lo-text); box-shadow: 0 18px 60px rgba(0,0,0,.42); z-index: 80; }
-    .lasso-agent-prompt[hidden] { display: none; }
-    .lasso-agent-prompt-title { margin-bottom: 7px; font-size: 13px; font-weight: 700; }
-    .lasso-agent-prompt-message { margin-bottom: 12px; color: var(--lo-text-2); font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
-    .lasso-agent-prompt-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 8px 10px; 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-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 11px; border: 0; border-radius: var(--lo-radius-full); background: var(--lo-surface-2); color: var(--lo-text); font: inherit; font-size: 11px; cursor: pointer; }
-    .lasso-agent-prompt-actions button[data-agent-response="Allow"], .lasso-agent-prompt-actions button[data-agent-response="input"] { background: var(--lo-primary); color: #111214; font-weight: 600; }
+    .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;
@@ -12386,15 +12438,15 @@
     return panel;
   }
   function renderTasks() {
-    const panelEl = panel;
-    if (!panelEl || !list || !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>`;
@@ -17782,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") {
@@ -17804,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) {
@@ -17818,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");
@@ -17842,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);
         }
       }
@@ -17870,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 () => {
@@ -17894,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;
@@ -18671,29 +18723,56 @@
     dom.shadow.appendChild(el);
     promptEl = el;
     const agentPrompt = document.createElement("div");
-    agentPrompt.className = "lasso-agent-prompt";
+    agentPrompt.className = "lasso-agent-prompt-backdrop";
     agentPrompt.hidden = true;
     agentPrompt.innerHTML = `
-    <div class="lasso-agent-prompt-title">Agent needs your input</div>
-    <div class="lasso-agent-prompt-message"></div>
-    <input class="lasso-agent-prompt-input" type="text" placeholder="Type a response\u2026" />
-    <div class="lasso-agent-prompt-actions">
-      <button type="button" data-agent-response="Allow">Allow</button>
-      <button type="button" data-agent-response="Deny">Deny</button>
-      <button type="button" data-agent-response="input">Send</button>
+    <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.querySelectorAll("[data-agent-response]").forEach((button) => {
-      button.addEventListener("click", () => {
-        if (!agentPromptTaskId || state.bridgeSocket?.readyState !== WebSocket.OPEN) return;
-        const response = button.dataset.agentResponse === "input" ? agentPrompt.querySelector(".lasso-agent-prompt-input")?.value.trim() || "" : button.dataset.agentResponse || "";
-        if (!response) return;
-        state.bridgeSocket.send(JSON.stringify({ type: "agent_prompt_response", taskId: agentPromptTaskId, response }));
-        agentPromptTaskId = null;
-        agentPrompt.hidden = true;
-      });
+    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");
@@ -18771,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;
       }
@@ -18897,17 +18976,59 @@
   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");
-    if (message) message.textContent = prompt.message;
+    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 = prompt.kind === "permission";
+      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.querySelector('[data-agent-response="Allow"]').hidden = prompt.kind !== "permission";
-    agentPromptPanel.querySelector('[data-agent-response="Deny"]').hidden = prompt.kind !== "permission";
     agentPromptPanel.hidden = false;
-    if (prompt.kind === "input") input?.focus();
+    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;
@@ -18915,12 +19036,12 @@
     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];
@@ -20591,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`;
@@ -20766,24 +21364,15 @@
     miniToolbar.className = "lasso-toolbar-mini";
     miniToolbar.innerHTML = `
     <button class="lasso-new-page-btn" type="button" aria-label="Create a new page" title="New page">
-      <span aria-hidden="true">+</span>
+      <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>
   `;
-    const pagePanel = document.createElement("div");
-    pagePanel.className = "lasso-new-page-panel";
-    pagePanel.hidden = true;
-    pagePanel.innerHTML = `
-    <div class="lasso-new-page-header"><strong>New page</strong><button type="button" class="lasso-new-page-close" aria-label="Close">\xD7</button></div>
-    <label>File name<input class="lasso-new-page-name" value="page.tsx" /></label>
-    <label>Folder<div class="lasso-page-folder-list"><span>Loading folders\u2026</span></div></label>
-    <label>Starter content<textarea class="lasso-new-page-content" rows="5">export default function Page() {
-  return <main />;
-}</textarea></label>
-    <div class="lasso-new-page-status" aria-live="polite"></div>
-    <button type="button" class="lasso-new-page-create">Create page</button>
-  `;
-    dom.shadow.append(toolbar, miniToolbar, pagePanel, toolbarReopen, voiceBar);
+    dom.shadow.append(toolbar, miniToolbar, toolbarReopen, voiceBar);
     const tooltip = document.createElement("div");
     tooltip.className = "lasso-toolbar-tooltip";
     tooltip.hidden = true;
@@ -20833,65 +21422,10 @@
     const voiceBtn = toolbar.querySelector(".voice-tool");
     const dismissBtn = toolbar.querySelector(".lasso-toolbar-dismiss");
     const newPageBtn = miniToolbar.querySelector(".lasso-new-page-btn");
-    const folderList = pagePanel.querySelector(".lasso-page-folder-list");
-    const pageStatus = pagePanel.querySelector(".lasso-new-page-status");
-    let selectedFolder = ".";
-    const requestFolders = () => {
-      if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
-        folderList.innerHTML = "<span>Loading folders\u2026</span>";
-        state.bridgeSocket.send(JSON.stringify({ type: "list_page_folders" }));
-      } else {
-        folderList.innerHTML = "<span>Bridge is not connected.</span>";
-      }
-    };
-    window.addEventListener("lasso-page-folders", (event) => {
-      const folders = event.detail || [];
-      folderList.replaceChildren();
-      for (const folder of folders) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.textContent = folder === "." ? "Project root" : folder;
-        button.className = folder === selectedFolder ? "selected" : "";
-        button.addEventListener("click", () => {
-          selectedFolder = folder;
-          folderList.querySelectorAll("button").forEach((item) => item.classList.toggle("selected", item === button));
-        });
-        folderList.appendChild(button);
-      }
-      folderList.querySelector("button")?.click();
-    });
-    window.addEventListener("lasso-page-created", (event) => {
-      const result = event.detail;
-      pageStatus.textContent = result.error || `Created ${result.path}`;
-      pageStatus.classList.toggle("error", Boolean(result.error));
-      if (!result.error) pagePanel.hidden = true;
-    });
     newPageBtn.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
-      pagePanel.hidden = false;
-      pageStatus.textContent = "";
-      pageStatus.classList.remove("error");
-      requestFolders();
-    });
-    pagePanel.querySelector(".lasso-new-page-close").addEventListener("click", () => {
-      pagePanel.hidden = true;
-    });
-    pagePanel.querySelector(".lasso-new-page-create").addEventListener("click", () => {
-      const fileName = pagePanel.querySelector(".lasso-new-page-name").value.trim();
-      const content = pagePanel.querySelector(".lasso-new-page-content").value;
-      if (!fileName) {
-        pageStatus.textContent = "Enter a file name.";
-        pageStatus.classList.add("error");
-        return;
-      }
-      if (state.bridgeSocket?.readyState !== WebSocket.OPEN) {
-        pageStatus.textContent = "Bridge is not connected.";
-        pageStatus.classList.add("error");
-        return;
-      }
-      pageStatus.textContent = "Creating\u2026";
-      state.bridgeSocket.send(JSON.stringify({ type: "create_page", folder: selectedFolder, fileName, content }));
+      togglePagePanel();
     });
     selectBtn.addEventListener("click", (e) => {
       e.preventDefault();
@@ -21034,13 +21568,21 @@
             return;
           }
           if (message.type === "page_folders") {
-            window.dispatchEvent(new CustomEvent("lasso-page-folders", { detail: message.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;
@@ -21143,6 +21685,7 @@
     buildNotepadPanel();
     buildClipboardPanel();
     buildTaskPanel();
+    buildPagePanel();
     buildPrompt();
     buildDrag();
     initErrorListeners();
@@ -21217,6 +21760,10 @@
         closePinThread();
         return;
       }
+      if (isPagePanelOpen()) {
+        closePagePanel();
+        return;
+      }
       if (isPromptOpen()) {
         cancelPrompt(true);
         return;