@lasso-ai/cli 1.1.0 → 1.1.2

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
 
@@ -160,38 +170,46 @@ context (source + screenshot + instruction)
   │ Agent adapter  │   interface: given context, return old/new string pairs
   └───────┬───────┘
           │
-   ┌──────┼───────────────────┬─────────────────────┐
-   ▼      ▼                   ▼                      ▼
- Built-in   Claude Code        User's own CLI coding   Any future
- agent      (headless/         agent (Cursor CLI,      adapter
- (default)  `claude -p`)       Aider, etc.)
+   ┌──────┼──────────────┬─────────────────┐
+   ▼      ▼              ▼                 ▼
+ Hosted   Claude Code     Codex             OpenCode
+ model    `claude -p`     `codex exec`      `opencode run`
 ```
 
-- **Built-in agent** (`agent: "builtin"`): default path, zero setup, calls a hosted model
-  directly (`@anthropic-ai/sdk`) with the assembled context and the old/new-string contract
-  from §5.3.
-- **Claude Code passthrough** (`agent: "claude-code"`): the CLI shells out to Claude Code
-  in headless/print mode (`claude -p`), passing the assembled context as the prompt and
-  parsing its file edits back into the same diff-preview pipeline. This lets a user keep
-  using their existing Claude Code setup (subscription, project memory, MCP tools) while
-  still getting the point-and-select UX.
-- **Bring-your-own-agent** (`agent: "custom"`): define the adapter interface once (context
-  in, old/new-string pairs out) and let power users wire in whatever CLI coding tool they
-  already trust. Lasso's value in this mode is entirely the capture + context-assembly
-  pipeline (§4–5), not the model itself.
-
-Selection is a config choice, not an either/or product decision:
+- **Hosted model** (`anthropic` | `openai` | `google` | `ollama`): the default path when
+  no local CLI is selected. Lasso calls the provider SDK directly (`@anthropic-ai/sdk`)
+  with the assembled context and the old/new-string contract from §5.3. The provider and
+  key come from `LASSO_AGENT_PROVIDER` plus the matching `*_API_KEY`, read from the
+  process environment or the project `.env`.
+- **Claude Code passthrough** (`claude-code`): the CLI shells out to Claude Code in
+  headless/print mode (`claude -p … --permission-mode plan --output-format
+stream-json --max-turns 3`), passing the assembled context as the prompt and parsing
+  its output back into the same diff-preview pipeline. This lets a user keep using their
+  existing Claude Code setup (subscription, project memory, MCP tools) while still
+  getting the point-and-select UX.
+- **Codex passthrough** (`codex`): `codex exec --json --sandbox read-only
+--skip-git-repo-check`. Lasso passes the repository trust check itself, so Codex's own
+  check is skipped, and the read-only sandbox keeps it from writing.
+- **OpenCode passthrough** (`opencode`): `opencode run --format json --print-logs
+--log-level INFO --agent plan`. The `plan` agent is read-only; `--print-logs` is why
+  diagnostics reach the bridge, which classifies them rather than surfacing raw output.
+
+Every local agent is invoked read-only, so it can only propose a patch. Lasso writes
+nothing until the user accepts the diff. If an agent asks for approval or input, the
+child's stdin stays attached and the request is surfaced as a task-scoped overlay prompt.
+
+Availability is detected rather than configured: at bridge start Lasso runs `which` for
+`claude`, `codex`, and `opencode`, and only detected agents appear in the model picker.
+OpenCode's model list is discovered with `opencode models`.
+
+Selection happens in the overlay model picker, not in `lasso.config.json`. That file
+carries only the project `id` and local `domain`:
 
 ```json
-// lasso.config.json (before `lasso init`)
+// lasso.config.json — the only project fields
 {
-  "agent": "builtin" // | "claude-code" | "custom"
-}
-
-// lasso.config.json (after `lasso init` — id is the only project field)
-{
-  "agent": "builtin",
-  "id": "proj_3f2a9c…" // workspace-scoped; commit it so teammates share the session
+  "id": "proj_3f2a9c…", // workspace-scoped; commit it so teammates share the session
+  "domain": "my-project.lasso"
 }
 ```
 

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,60 +363,58 @@ 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.
 
 ---
 
 ## Agent configuration
 
-Create `lasso.config.json` in your project root:
+You choose the coding agent in the overlay's model picker, not in a config file.
+`lasso.config.json` only records your project `id` and local `domain` — it has no
+agent field.
 
-```json
-{
-  "agent": "builtin"
-}
-```
+### Local CLI agents
 
-### Built-in agent
+Lasso shells out to a coding CLI installed on your machine. Each one appears as its own
+group in the model picker **only when its binary is on the `PATH` that `lasso dev`
+sees**, so install it before starting the dev server (or restart afterwards):
 
-```json
-{
-  "agent": "builtin"
-}
-```
+| Agent                                                        | Binary     | Lasso runs                                                                     |
+| ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------- |
+| [Claude Code](https://lasso.byorello.space/docs/claude-code) | `claude`   | `claude -p … --permission-mode plan --output-format stream-json --max-turns 3` |
+| [Codex](https://lasso.byorello.space/docs/codex)             | `codex`    | `codex exec --json --sandbox read-only --skip-git-repo-check`                  |
+| [OpenCode](https://lasso.byorello.space/docs/opencode)       | `opencode` | `opencode run --format json --print-logs --agent plan`                         |
 
-Uses Lasso's built-in agent through the Anthropic SDK.
+All three run read-only, so the agent proposes a patch and never writes to your project.
+Sign each CLI in once in a real terminal; Lasso inherits the credentials it stores for
+your user.
 
-Requires:
+### Hosted agents
+
+To use a hosted model instead, set the provider and key in your shell or in the project
+`.env` before running `lasso dev`:
 
 ```bash
+export LASSO_AGENT_PROVIDER=anthropic   # or openai, google, ollama
 export ANTHROPIC_API_KEY=your_key
+export LASSO_AGENT_MODEL=...            # optional
 ```
 
-### Claude Code
-
-```json
-{
-  "agent": "claude-code"
-}
-```
-
-Lasso can delegate the coding task to Claude Code in headless mode while keeping the same selection → context → diff → accept workflow.
+Supported keys are `ANTHROPIC_API_KEY`, `OPENAI_API_KEY`,
+`GOOGLE_GENERATIVE_AI_API_KEY` (or `GEMINI_API_KEY`), and `OLLAMA_BASE_URL` with
+`OLLAMA_MODEL`. If `LASSO_AGENT_PROVIDER` is unset, Lasso picks a provider from whichever
+key it finds, defaulting to `anthropic`.
 
-### Custom agent
-
-```json
-{
-  "agent": "custom"
-}
-```
+Hosted agents additionally require your Lasso key from `lasso auth login`, and the
+credentials are never written to `lasso.config.json`.
 
-Build your own adapter for another coding agent.
+### The adapter contract
 
-The adapter contract is intentionally simple:
+Whichever agent runs, the contract is the same:
 
 ```text
 Lasso context
@@ -491,8 +492,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) }));
                 }