@lasso-ai/cli 1.1.0 → 1.1.1

package/ARCHITECTURE.md

@@ -68,10 +68,10 @@ Three parties, all coordinating around one shared filesystem:
 ```
 
 Everything except the coding agent call runs locally. Edit proposals are never written to
-disk without an explicit accept from the user. The manual New Page workflow is a separate
-explicit write path: it creates only the filename/content the user confirms. The agent is
-the only party that ever leaves the machine, and only with the exact context the CLI
-assembled for it.
+disk without an explicit accept from the user. The New Page workflow is a separate explicit
+write path: it creates only the file at the folder the user selected in the project
+explorer. The agent is the only party that ever leaves the machine, and only with the
+exact context the CLI assembled for it.
 
 ## 4. Browser layer (capture only)
 
@@ -91,10 +91,13 @@ Responsibilities, and _only_ these:
   actions; acceptance is the transition that completes an edit task.
 - Keep a stable component conversation identity so repeated prompts reuse conversation
   and change history across DOM replacement during HMR.
-- Render the secondary toolbar, custom tooltips, and the manual New Page form with a
-  project-folder explorer.
+- Render the secondary toolbar, custom tooltips, and the New Page dialog with a lazy
+  project-folder tree. The tree is populated per-directory on expand; the CLI never
+  sends the whole project at once. Selecting a folder sets the write target, and a
+  new nested folder is created inline through its own bridge message.
 - Render task-scoped permission/input prompts and send explicit responses back over
-  the bridge.
+  the bridge. The prompt must re-enable pointer events on its panel, because the
+  overlay host disables them to keep the toolbar click-through.
 - **Never mutate the DOM.** All visual changes the user sees post-edit come from the
   framework's own HMR reload, not from this layer.
 
@@ -121,10 +124,17 @@ A Node process that wraps the user's existing dev server. Entry: `src/cli/index.
    on receipt.
 6. On accept: snapshot the file's prior content (for undo), then apply the diff.
 7. On undo: restore the snapshot, full stop — no re-generation needed, so retries are free.
-8. For New Page: list project-relative folders, validate the requested target against
-   the project root, and create the file only after the user confirms the form.
+8. For New Page: answer `list_page_folders` one directory at a time so the overlay can
+   build its tree lazily, skipping dot-entries and build/vendor directories. Every
+   request resolves against the project root, so `..` and absolute paths are refused.
+   Create a file only after the user confirms, and refuse to overwrite. Nested folder
+   creation arrives separately as `create_page_folder` and never accepts a slash or a
+   dotted name.
 9. For local agents: keep child-process stdin attached to its task and forward explicit
-   overlay responses when the agent requests permission or input.
+   overlay responses when the agent requests permission or input. Classify stderr
+   before prompting: a filesystem or transport failure is reported as an error with a
+   suggested fix, because Allow/Deny cannot resolve it. Only a genuine approval or
+   sign-in request becomes a prompt, and the text is cleaned of log prefixes first.
 
 ### 5.2 Source resolution strategies
 

package/CHANGELOG.md

@@ -20,6 +20,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   overlay prompt with Allow, Deny, or custom text.
 - **Secondary overlay toolbar**: added a New Page workflow with a project-folder
   explorer, filename/content form, path validation, and explicit file creation.
+- **Redesigned New Page dialog**: replaced the flat folder dropdown with a
+  VS Code-style lazy tree of the project. You type only a page name and pick a
+  folder; nested folders are created inline with a `+` button, folders load on
+  demand, a filter box narrows deep trees, and clicking a file reuses its name.
+  Selecting a folder no longer collapses it, and the starter file is generated
+  from the extension (`.tsx`, `.ts`, `.css`, `.json`, `.md`).
+- **Readable agent permission prompts**: the prompt no longer dumps raw local-agent
+  log lines. Filesystem failures such as `EACCES: permission denied` and
+  `Cause([Die([…])])` now surface as errors with a suggested fix, because
+  Allow/Deny can never resolve them. Only genuine approval and sign-in requests
+  open the Allow/Deny prompt.
+- **Clickable agent prompt**: the prompt panel opts back into pointer events, so
+  Allow, Deny, and custom options respond to clicks again; Enter submits typed
+  input and Escape sends Deny, matching the close button.
 - **Custom toolbar tooltips**: toolbar labels now use an accessible Lasso-styled
   tooltip on hover and keyboard focus instead of browser-native title popovers.
 - **Filtered agent progress**: useful tool/progress events remain visible while

package/README.md

@@ -90,10 +90,13 @@ Turn on Lasso Mode and interact with your application normally.
 ### Overlay toolbars
 
 The overlay includes a primary editing toolbar and a compact secondary toolbar.
-The secondary toolbar's **New Page** action opens a manual page-creation form where
-you can choose a project folder, enter a filename, edit starter content, and create
-the file explicitly. Lasso never chooses a source folder or overwrites an existing
-file without confirmation.
+The secondary toolbar's **New Page** action opens a project explorer. You type a page
+name and pick the folder it should live in — the tree loads lazily as you expand
+it, a filter box narrows deep trees, and the `+` button next to **Folder** creates
+a new nested folder inline. Clicking a file in the tree reuses its name so you only
+type the part that is missing. Starter content is generated from the extension, and
+Lasso never chooses a source folder for you or overwrites an existing file without
+confirmation.
 
 ### Source-aware editing
 
@@ -360,9 +363,10 @@ That's it.
 
 ### Create a page manually
 
-Use **New Page** in the secondary toolbar to open the page form. Select the target
-folder in the project explorer, choose a filename, edit the starter content if
-needed, and select **Create page**. The bridge validates that the folder stays
+Use **New Page** in the secondary toolbar to open the project explorer. Type a page
+name, expand the tree to pick the target folder, and select **Create page**. Use the
+`+` button beside **Folder** to create a nested folder without leaving the dialog,
+or the filter box to narrow a large tree. The bridge validates that the folder stays
 inside the project and refuses to overwrite an existing file.
 
 ---
@@ -491,8 +495,8 @@ The CLI:
 8. Shows you the diff
 9. Writes only after you accept
 
-The separate New Page workflow is also explicit: it writes only after you select
-a folder, confirm the filename/content form, and choose **Create page**.
+The separate New Page workflow is also explicit: it writes only after you pick
+a folder in the project explorer, type a name, and choose **Create page**.
 
 The goal is simple:
 

package/dist/cli/agent.js

@@ -303,6 +303,70 @@ function snippet(value, max = 80) {
     const s = String(value ?? "").trim().replace(/\s+/g, " ");
     return s.length > max ? `${s.slice(0, max)}…` : s;
 }
+const ANSI_PATTERN = /\u001B\[[0-9;?]*[ -/]*[@-~]/g;
+const LOG_FIELD_PATTERN = /([A-Za-z_][\w.-]*)=("(?:[^"\\]|\\.)*"|[^\s]*)/g;
+function cleanAgentText(value) {
+    return value.replace(ANSI_PATTERN, "").replace(/\s+/g, " ").trim();
+}
+/**
+ * Local agents (notably OpenCode) print structured logs such as
+ * `timestamp=… level=ERROR run=… message="Failed to fetch models.dev" cause="…"`.
+ * Those lines are machine diagnostics, never user-facing copy, so they are parsed
+ * into their fields instead of being shown verbatim.
+ */
+function parseAgentLogFields(line) {
+    if (!/^\s*(?:timestamp|time|ts)=\S/.test(line))
+        return null;
+    const fields = {};
+    for (const match of line.matchAll(LOG_FIELD_PATTERN)) {
+        const key = match[1];
+        const raw = match[2] ?? "";
+        fields[key] = raw.startsWith('"')
+            ? raw.slice(1, -1).replace(/\\(["\\])/g, "$1")
+            : raw;
+    }
+    return fields;
+}
+// Filesystem failures that a permission request can never resolve.
+const AGENT_FAILURE_MARKERS = /\b(?:EACCES|EPERM|ENOENT|EEXIST|EISDIR|ENOTDIR|ENOSPC|EMFILE|ENOTEMPTY)\b|\bCause\(\[Die\(/i;
+const AGENT_FAILURE_HINTS = [
+    {
+        pattern: /EACCES: permission denied[\s\S]*(?:locks?|state|storage|\.config|config\/)/i,
+        message: "The local agent cannot write to its own state folder. Fix that folder's ownership (for example `sudo chown -R $(whoami) ~/.local/state/opencode`) and retry.",
+    },
+    {
+        pattern: /EACCES: permission denied/i,
+        message: "The local agent was denied access to a file or folder it needs. Check the permissions on its state directory, then retry.",
+    },
+    {
+        pattern: /failed to fetch models\.dev/i,
+        message: "The local agent could not reach models.dev to refresh its model list. Check the network or proxy it uses, then retry.",
+    },
+];
+function agentFailureHint(line) {
+    return AGENT_FAILURE_HINTS.find((hint) => hint.pattern.test(line))?.message;
+}
+const PERMISSION_PROMPT_PATTERN = /permission\s+(?:is\s+)?(?:required|requested|needed|denied)|needs?\s+(?:your\s+)?permission|permission\s+to\s+(?:run|edit|write|read|execute|create|delete|modify|access|apply)|approve\s+(?:this|the|tool|action|command)|authori[sz]e\s+(?:this|the|tool|action|command)|authentication\s+(?:is\s+)?required|(?:please\s+)?log\s?in|sign\s?in\s+(?:required|to\s+continue)|press\s+.{1,24}?to\s+(?:continue|approve|confirm)|waiting for (?:your )?(?:permission|approval|input|response)/i;
+/**
+ * Returns human-readable copy for a real approval/authentication request, or
+ * `null` when the line is anything else. A structured error log never becomes a
+ * permission prompt: Allow/Deny cannot fix a filesystem failure, and hiding the
+ * error behind those buttons is what made the prompt unreadable.
+ */
+function permissionPromptMessage(raw) {
+    const line = cleanAgentText(raw);
+    if (!line)
+        return null;
+    if (parseAgentLogFields(line) || AGENT_FAILURE_MARKERS.test(line))
+        return null;
+    if (!PERMISSION_PROMPT_PATTERN.test(line))
+        return null;
+    const detail = line
+        .replace(/^[A-Za-z0-9_.-]+:\s*/, "")
+        .replace(/^["'\s]+|["'\s]+$/g, "")
+        .trim();
+    return snippet(detail || line, 240);
+}
 function progressEvent(message, detail) {
     const value = detail == null ? "" : String(detail).trim();
     return value ? { message, detail: value } : { message };
@@ -410,6 +474,9 @@ function progressEventsFromRaw(raw, provider) {
 }
 function localAgentError(command, stderr, exitCode) {
     const output = stderr.trim();
+    const hint = agentFailureHint(output);
+    if (hint)
+        return `${command === "opencode" ? "OpenCode" : command} could not finish: ${hint}`;
     if (command === "opencode" && /waiting for permission or authentication/i.test(output)) {
         return "OpenCode needs permission or authentication. Run OpenCode once in a terminal, approve the requested access or sign in, then retry in Lasso.";
     }
@@ -486,10 +553,14 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress, taskI
                 for (const progress of progressEventsFromRaw(line, provider)) {
                     onProgress?.(progress.message, progress.detail);
                 }
-                if (/permission\s+(required|denied)|approve\s+(this|the|tool)|authentication\s+required|login\s+required|press\s+.+to\s+continue/i.test(line)) {
-                    sendPrompt(line.replace(/\s+/g, " ").trim());
+                const promptMessage = permissionPromptMessage(line);
+                if (promptMessage) {
+                    sendPrompt(promptMessage);
                 }
-                if (stream === "stderr" && line.trim()) {
+                else if (stream === "stderr" && line.trim()) {
+                    const hint = agentFailureHint(line);
+                    if (hint)
+                        onProgress?.(`${label} · ${hint}`);
                     if (provider === "opencode" && /quota exceeded|authentication failed|invalid api key|unauthorized|forbidden/i.test(line)) {
                         onProgress?.("OpenCode · provider rejected the request; stopping this task…");
                         child.kill("SIGTERM");
@@ -538,6 +609,9 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress, taskI
                 for (const progress of progressEventsFromRaw(stderrTail, provider)) {
                     onProgress?.(progress.message, progress.detail);
                 }
+                const hint = agentFailureHint(stderrTail);
+                if (hint)
+                    onProgress?.(`${label} · ${hint}`);
                 if (provider === "opencode" && /quota exceeded|authentication failed|invalid api key|unauthorized|forbidden/i.test(stderrTail)) {
                     onProgress?.("OpenCode · provider rejected the request; stopping this task…");
                 }

package/dist/cli/bridge.d.ts

@@ -97,11 +97,16 @@ export type BridgeMessage = {
     response: string;
 } | {
     type: "list_page_folders";
+    path?: string;
 } | {
     type: "create_page";
     folder: string;
     fileName: string;
     content: string;
+} | {
+    type: "create_page_folder";
+    parent: string;
+    name: string;
 } | {
     type: "git_status";
 } | {
@@ -132,6 +137,11 @@ type ModelOption = {
     label: string;
     provider: "anthropic" | "openai" | "google" | "ollama" | "cli";
 };
+type PageEntry = {
+    name: string;
+    path: string;
+    type: "directory" | "file";
+};
 export type ServerBridgeMessage = {
     type: "config";
     apiKeyConfigured: boolean;
@@ -165,11 +175,18 @@ export type ServerBridgeMessage = {
     prompt: AgentPrompt;
 } | {
     type: "page_folders";
-    folders: string[];
+    path: string;
+    entries: PageEntry[];
+    project?: string;
+    error?: string;
 } | {
     type: "page_created";
     path: string;
     error?: string;
+} | {
+    type: "page_folder_created";
+    path: string;
+    error?: string;
 } | {
     type: "assistant_message";
     taskId?: string;

package/dist/cli/bridge.js

@@ -181,22 +181,33 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
     let activeAgentController = null;
     const taskControllers = new Map();
     let localAgents = new Set();
-    const pageFolders = (directory, relative = "", depth = 0) => {
-        if (depth > 5)
+    const pageIgnoredDirs = new Set(["node_modules", ".git", ".next", "dist", "build", ".turbo", "out", "coverage", ".vercel", ".cache"]);
+    const resolveInsideProject = (root, relative) => {
+        const target = node_path_1.default.resolve(root, relative && relative !== "." ? relative : "");
+        return target === root || target.startsWith(`${root}${node_path_1.default.sep}`) ? target : null;
+    };
+    // Directories are returned first so the overlay can render an explorer-style
+    // tree that mirrors how VS Code orders folders above files.
+    const pageEntries = (root, relative) => {
+        const directory = resolveInsideProject(root, relative);
+        if (!directory)
             return [];
-        const folders = [relative || "."];
+        let entries = [];
         try {
             for (const entry of node_fs_1.default.readdirSync(directory, { withFileTypes: true })) {
-                if (!entry.isDirectory() || ["node_modules", ".git", ".next", "dist", "build", ".turbo"].includes(entry.name) || entry.name.startsWith("."))
+                if (entry.name.startsWith(".") || (entry.isDirectory() && pageIgnoredDirs.has(entry.name)))
                     continue;
-                const nextRelative = relative ? node_path_1.default.join(relative, entry.name) : entry.name;
-                folders.push(...pageFolders(node_path_1.default.join(directory, entry.name), nextRelative, depth + 1));
+                entries.push({
+                    name: entry.name,
+                    path: relative && relative !== "." ? node_path_1.default.join(relative, entry.name) : entry.name,
+                    type: entry.isDirectory() ? "directory" : "file",
+                });
             }
         }
         catch {
-            // Ignore folders that cannot be read.
+            // Folders that cannot be read are treated as empty.
         }
-        return folders;
+        return entries.sort((a, b) => a.type === b.type ? a.name.localeCompare(b.name) : a.type === "directory" ? -1 : 1);
     };
     bridgeServer.on("request", (req, res) => {
         if (req.method !== "POST" || req.url?.split("?", 1)[0] !== "/__lasso/bridge/restart")
@@ -341,19 +352,60 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                 console.log("[lasso] received from overlay:", msg);
             }
             if (msg.type === "list_page_folders") {
-                socket.send(JSON.stringify({ type: "page_folders", folders: pageFolders(cwd).sort() }));
+                const requested = msg.path || ".";
+                const root = node_path_1.default.resolve(cwd);
+                const directory = resolveInsideProject(root, requested);
+                if (!directory) {
+                    socket.send(JSON.stringify({ type: "page_folders", path: requested, entries: [], error: "That folder is outside the current project." }));
+                    return;
+                }
+                socket.send(JSON.stringify({ type: "page_folders", path: requested, entries: pageEntries(root, requested), project: node_path_1.default.basename(root) }));
+                return;
+            }
+            if (msg.type === "create_page_folder") {
+                const root = node_path_1.default.resolve(cwd);
+                const name = node_path_1.default.basename(msg.name || "");
+                const parent = resolveInsideProject(root, msg.parent || ".");
+                if (!parent || !name || name !== msg.name || name === "." || name === "..") {
+                    socket.send(JSON.stringify({ type: "page_folder_created", path: msg.name || "", error: "Enter a folder name without slashes or dots." }));
+                    return;
+                }
+                const target = node_path_1.default.resolve(parent, name);
+                if (!target.startsWith(`${root}${node_path_1.default.sep}`)) {
+                    socket.send(JSON.stringify({ type: "page_folder_created", path: name, error: "Choose a folder inside the current project." }));
+                    return;
+                }
+                try {
+                    node_fs_1.default.mkdirSync(target);
+                    socket.send(JSON.stringify({ type: "page_folder_created", path: node_path_1.default.relative(root, target) }));
+                }
+                catch (error) {
+                    socket.send(JSON.stringify({
+                        type: "page_folder_created",
+                        path: node_path_1.default.relative(root, target),
+                        error: error instanceof Error && error.message.includes("EEXIST") ? "A folder with that name already exists." : "The folder could not be created.",
+                    }));
+                }
                 return;
             }
             if (msg.type === "create_page") {
                 const root = node_path_1.default.resolve(cwd);
-                const folder = msg.folder === "." ? root : node_path_1.default.resolve(root, msg.folder);
-                const fileName = node_path_1.default.basename(msg.fileName);
-                const target = node_path_1.default.resolve(folder, fileName);
-                if (!target.startsWith(`${root}${node_path_1.default.sep}`) || target === root || !fileName || fileName !== msg.fileName || !node_fs_1.default.existsSync(folder)) {
+                const folder = resolveInsideProject(root, msg.folder || ".");
+                // A page name may contain "/" so the overlay can create nested routes in
+                // one step, but every segment is validated and resolved inside the project.
+                const segments = (msg.fileName || "").split("/").map((segment) => segment.trim()).filter(Boolean);
+                const fileName = segments.pop() || "";
+                if (!folder || !fileName || segments.some((segment) => segment === "." || segment === "..") || fileName === "." || fileName === "..") {
+                    socket.send(JSON.stringify({ type: "page_created", path: msg.fileName || "", error: "Choose a valid project folder and file name." }));
+                    return;
+                }
+                const target = node_path_1.default.resolve(folder, ...segments, fileName);
+                if (!target.startsWith(`${root}${node_path_1.default.sep}`)) {
                     socket.send(JSON.stringify({ type: "page_created", path: msg.fileName, error: "Choose a valid project folder and file name." }));
                     return;
                 }
                 try {
+                    node_fs_1.default.mkdirSync(node_path_1.default.dirname(target), { recursive: true });
                     node_fs_1.default.writeFileSync(target, msg.content.slice(0, 200000), { encoding: "utf8", flag: "wx" });
                     socket.send(JSON.stringify({ type: "page_created", path: node_path_1.default.relative(root, target) }));
                 }