@lasso-ai/cli 1.0.28 → 1.1.0

package/ARCHITECTURE.md

@@ -67,9 +67,11 @@ Three parties, all coordinating around one shared filesystem:
                                    └──────────────────────┘
 ```
 
-Everything except the coding agent call runs locally. Nothing is ever written to disk
-without an explicit accept from the user. The agent is the only party that ever leaves the
-machine, and only with the exact context the CLI assembled for it.
+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.
 
 ## 4. Browser layer (capture only)
 
@@ -85,6 +87,14 @@ Responsibilities, and _only_ these:
   edit quality even when the AI has the source.
 - Show the inline prompt box anchored to the selection (never a blocking `prompt()`).
 - Render the diff/accept/undo UI once the CLI streams a proposed change back.
+- Render concurrent Agent Tasks with In progress/Completed tabs and task-level review
+  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 task-scoped permission/input prompts and send explicit responses back over
+  the bridge.
 - **Never mutate the DOM.** All visual changes the user sees post-edit come from the
   framework's own HMR reload, not from this layer.
 
@@ -111,6 +121,10 @@ 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.
+9. For local agents: keep child-process stdin attached to its task and forward explicit
+   overlay responses when the agent requests permission or input.
 
 ### 5.2 Source resolution strategies
 

package/CHANGELOG.md

@@ -9,6 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Agent task workflow**: concurrent prompts now appear in In progress and
+  Completed tabs. Review-ready tasks expose a Review action, and accepted changes
+  move the task to Completed.
+- **Component conversation continuity**: prompts reuse the latest conversation and
+  change history for a stable component identity across repeated prompts and DOM
+  replacement during HMR.
+- **Interactive local-agent prompts**: Claude Code, Codex, and OpenCode run with
+  piped stdin. Permission or input requests can be answered from a task-scoped
+  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.
+- **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
+  process IDs, startup messages, and heartbeat logs are hidden.
 - Open-source documentation: `CONTRIBUTING.md`, `CODE_OF_CONDUCT.md`,
   `SECURITY.md`, `SUPPORT.md`, `LICENSE` (ISC), and this changelog.
 - **Lasso Host** (`src/cli/host/`) — a user-level local domain server + runtime
@@ -99,4 +114,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Notes
 
 - Version 0.1.0 was developed as an internal prototype. This changelog records
-  behavior from that point forward. The project uses the product name **Lasso**.
+  behavior from that point forward. The project uses the product name **Lasso**.

package/README.md

@@ -87,6 +87,14 @@ Turn on Lasso Mode and interact with your application normally.
 - Hover to see what will be selected
 - Select empty space to insert new UI
 
+### 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.
+
 ### Source-aware editing
 
 Lasso doesn't stop at the DOM.
@@ -133,6 +141,20 @@ Accept ────────→ Write to source
 
 Accepted changes are written to the filesystem and your framework's normal development workflow takes over.
 
+### Agent tasks and review
+
+Multiple prompts can run concurrently from the **Agent Tasks** panel. Tasks are
+separated into **In progress** and **Completed** tabs. Edit tasks expose a Review
+action when a proposal is ready; accepting the diff applies the changes and moves
+the task to Completed. Conversation and change history are retained for the same
+component during the overlay session, including when the framework replaces its DOM
+node during HMR.
+
+Local CLI agents stream useful tool/progress events while they work. Infrastructure
+noise such as process IDs and heartbeat messages is hidden. If a local agent needs
+permission or input, Lasso presents a task-scoped prompt with Allow, Deny, or a
+custom response field.
+
 ### Bring your own agent
 
 Lasso's editing pipeline is agent-agnostic.
@@ -145,8 +167,8 @@ Use:
 
 Your selection and project context stay inside the Lasso pipeline while the actual coding agent can be swapped independently.
 
-When installed, Lasso automatically detects the `claude` and `codex` commands
-on your PATH and adds **Claude Code · Local** and **Codex · Local** to the
+When installed, Lasso automatically detects the `claude`, `codex`, and
+`opencode` commands on your PATH and adds the available local agents to the
 prompt model menu. Local agents run in read-only/planning mode and return a
 reviewable proposal; Lasso remains the only process that writes accepted
 changes to your source files.
@@ -336,6 +358,13 @@ Undo   → restore the previous snapshot
 
 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
+inside the project and refuses to overwrite an existing file.
+
 ---
 
 ## Agent configuration
@@ -462,6 +491,9 @@ 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 goal is simple:
 
 **Your development environment stays yours.**
@@ -504,6 +536,11 @@ The core visual editing pipeline is being built around:
 - Explicit accept/reject
 - Undo
 - Pluggable coding agents
+- Concurrent agent tasks with review/completed states
+- Component-scoped conversation and change history
+- Manual page creation with project-folder selection
+- Interactive permission/input prompts for local agents
+- Custom toolbar tooltips and filtered agent progress
 
 Expect breaking changes before `1.0`.
 

package/dist/cli/agent.d.ts

@@ -4,6 +4,7 @@ export type SourceChange = {
     newString: string;
 };
 type AgentInput = {
+    taskId?: string;
     instruction: string;
     model: string;
     messages?: Array<{
@@ -45,17 +46,25 @@ export type AgentConfig = {
 };
 export type LocalAgent = "claude-code" | "codex" | "opencode";
 export type AgentProgress = (message: string, detail?: string) => void;
+export type AgentPrompt = {
+    message: string;
+    kind: "permission" | "input";
+    options?: string[];
+};
+export type AgentPromptHandler = (prompt: AgentPrompt) => void;
 export type AgentAnswer = {
+    taskId?: string;
     question: string;
     context?: AgentInput["context"];
     element: AgentInput["element"];
     messages?: AgentInput["messages"];
 };
+export declare function respondToAgentPrompt(taskId: string, value: string): boolean;
 export declare function detectLocalAgents(): Promise<Set<LocalAgent>>;
-export declare function proposeChanges(cwd: string, input: AgentInput, config: AgentConfig, signal?: AbortSignal, onProgress?: AgentProgress): Promise<{
+export declare function proposeChanges(cwd: string, input: AgentInput, config: AgentConfig, signal?: AbortSignal, onProgress?: AgentProgress, onPrompt?: AgentPromptHandler): Promise<{
     summary: string;
     changes: SourceChange[];
 }>;
-export declare function answerQuestion(cwd: string, input: AgentAnswer, config: AgentConfig, signal?: AbortSignal, onProgress?: AgentProgress): Promise<string>;
+export declare function answerQuestion(cwd: string, input: AgentAnswer, config: AgentConfig, signal?: AbortSignal, onProgress?: AgentProgress, onPrompt?: AgentPromptHandler): Promise<string>;
 export declare function generateCommitMessage(cwd: string, status: string[], config: AgentConfig, signal?: AbortSignal, onProgress?: AgentProgress): Promise<string>;
 export {};

package/dist/cli/agent.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.respondToAgentPrompt = respondToAgentPrompt;
 exports.detectLocalAgents = detectLocalAgents;
 exports.proposeChanges = proposeChanges;
 exports.answerQuestion = answerQuestion;
@@ -12,6 +13,14 @@ const node_path_1 = __importDefault(require("node:path"));
 const node_child_process_1 = require("node:child_process");
 const node_util_1 = require("node:util");
 const execFileAsync = (0, node_util_1.promisify)(node_child_process_1.execFile);
+const activeAgentInputs = new Map();
+function respondToAgentPrompt(taskId, value) {
+    const respond = activeAgentInputs.get(taskId);
+    if (!respond)
+        return false;
+    respond(value);
+    return true;
+}
 async function detectLocalAgents() {
     const found = new Set();
     for (const [name, command] of [["claude-code", "claude"], ["codex", "codex"], ["opencode", "opencode"]]) {
@@ -202,9 +211,47 @@ function extractLocalAgentText(raw, provider) {
     }
     return texts.at(-1) || raw;
 }
+function collectTextFields(value, fields = new Set(["text", "output_text", "result", "content", "message", "output", "value"]), depth = 0) {
+    if (depth > 8 || value == null)
+        return [];
+    if (typeof value === "string")
+        return [value];
+    if (Array.isArray(value))
+        return value.flatMap((entry) => collectTextFields(entry, fields, depth + 1));
+    if (typeof value !== "object")
+        return [];
+    const output = [];
+    for (const [key, entry] of Object.entries(value)) {
+        if (fields.has(key) && typeof entry === "string")
+            output.push(entry);
+        if (typeof entry === "object" && entry !== null)
+            output.push(...collectTextFields(entry, fields, depth + 1));
+    }
+    return output;
+}
+function findStructuredProposals(value, depth = 0) {
+    if (depth > 8 || value == null || typeof value !== "object")
+        return [];
+    if (!Array.isArray(value)) {
+        const record = value;
+        if (Array.isArray(record.changes))
+            return [JSON.stringify(record)];
+        return Object.values(record).flatMap((entry) => findStructuredProposals(entry, depth + 1));
+    }
+    return value.flatMap((entry) => findStructuredProposals(entry, depth + 1));
+}
 function extractLocalAgentProposal(raw, provider) {
     const outputs = [];
-    for (const line of raw.split(/\r?\n/)) {
+    const lines = raw.split(/\r?\n/).filter((line) => line.trim());
+    const streamObjects = jsonObjectCandidates(raw).flatMap((candidate) => {
+        try {
+            return [JSON.parse(candidate)];
+        }
+        catch {
+            return [];
+        }
+    });
+    for (const line of lines) {
         try {
             const event = JSON.parse(line);
             const item = event.item;
@@ -212,7 +259,7 @@ function extractLocalAgentProposal(raw, provider) {
             const values = provider === "claude-code"
                 ? [event.result, ...(event.message?.content || []).map((entry) => entry.text)]
                 : provider === "opencode"
-                    ? [part?.type === "text" ? part.text : undefined, event.text, event.output_text]
+                    ? [...collectTextFields(event), part?.type === "text" ? part.text : undefined]
                     : [event.text, event.output_text, item?.text, item?.output_text, item?.message];
             for (const value of values)
                 if (typeof value === "string" && value.trim())
@@ -223,6 +270,23 @@ function extractLocalAgentProposal(raw, provider) {
                 outputs.push(line);
         }
     }
+    // OpenCode can emit multiple JSON records on one physical line. The
+    // line-based pass above cannot see those records, so inspect each balanced
+    // JSON object as well and collect text nested in its final response event.
+    for (const event of streamObjects) {
+        outputs.push(...collectTextFields(event));
+        const part = event.part;
+        if (part?.type === "text" && typeof part.text === "string")
+            outputs.push(part.text);
+    }
+    for (const proposal of streamObjects.flatMap((event) => findStructuredProposals(event)).reverse()) {
+        try {
+            return jsonFrom(proposal);
+        }
+        catch {
+            // Continue through text candidates below.
+        }
+    }
     // Tool events are interleaved with the final answer. Try text events in
     // reverse order, then the complete stream as a final fallback.
     for (const output of [...outputs.reverse(), raw]) {
@@ -233,7 +297,7 @@ function extractLocalAgentProposal(raw, provider) {
             // Keep looking; this output may only be a progress or tool event.
         }
     }
-    throw new Error("The agent returned no valid reviewable changes. Progress output may have been mixed with the final JSON.");
+    throw new Error(`${provider === "opencode" ? "OpenCode" : "The agent"} did not return a reviewable proposal. It produced progress/tool events but no final JSON containing file changes.`);
 }
 function snippet(value, max = 80) {
     const s = String(value ?? "").trim().replace(/\s+/g, " ");
@@ -329,8 +393,26 @@ function progressFromLine(raw, provider) {
     }
     return null;
 }
+function progressEventsFromRaw(raw, provider) {
+    const records = (() => {
+        try {
+            JSON.parse(raw);
+            return [raw];
+        }
+        catch {
+            return jsonObjectCandidates(raw);
+        }
+    })();
+    return records.flatMap((record) => {
+        const progress = progressFromLine(record, provider);
+        return progress ? [progress] : [];
+    });
+}
 function localAgentError(command, stderr, exitCode) {
     const output = stderr.trim();
+    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.";
+    }
     if (command === "codex" && output.includes("missing field `base_instructions`")) {
         return "Codex could not read its models cache because it uses an older cache format. Update Codex, then retry. Lasso already bypasses the repository trust check.";
     }
@@ -351,13 +433,13 @@ function localCommand(provider, model, prompt) {
         return { command: "claude", args: ["-p", prompt || "", "--output-format", "stream-json", "--verbose", "--permission-mode", "plan", "--max-turns", "3", ...(selectedModel ? ["--model", selectedModel] : [])] };
     }
     if (provider === "opencode") {
-        return { command: "opencode", args: ["run", "--format", "json", "--agent", "plan", ...(selectedModel ? ["--model", selectedModel] : []), prompt || ""] };
+        return { command: "opencode", args: ["run", "--format", "json", "--print-logs", "--log-level", "INFO", "--agent", "plan", ...(selectedModel ? ["--model", selectedModel] : []), prompt || ""] };
     }
     return { command: "codex", args: ["exec", "--json", "--sandbox", "read-only", "--skip-git-repo-check", ...(selectedModel ? ["--model", selectedModel] : []), prompt || ""] };
 }
-function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
+function runLocalCommand(cwd, command, args, provider, signal, onProgress, taskId, onPrompt) {
     return new Promise((resolve, reject) => {
-        const child = (0, node_child_process_1.spawn)(command, args, { cwd, stdio: ["ignore", "pipe", "pipe"] });
+        const child = (0, node_child_process_1.spawn)(command, args, { cwd, stdio: ["pipe", "pipe", "pipe"] });
         const label = provider === "opencode" ? "OpenCode" : provider === "codex" ? "Codex" : "Claude Code";
         let stdout = "";
         let stderr = "";
@@ -365,9 +447,20 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
         let pendingStderr = "";
         let settled = false;
         let timedOut = false;
+        let promptShown = false;
+        const sendPrompt = (message, kind = "permission") => {
+            if (!taskId || promptShown)
+                return;
+            promptShown = true;
+            activeAgentInputs.set(taskId, (value) => {
+                promptShown = false;
+                activeAgentInputs.delete(taskId);
+                child.stdin.write(`${value}\n`);
+            });
+            onPrompt?.({ message, kind, options: kind === "permission" ? ["Allow", "Deny"] : undefined });
+        };
         const timeout = setTimeout(() => {
             timedOut = true;
-            onProgress?.(`${label} did not respond; stopping this task…`);
             child.kill("SIGTERM");
             setTimeout(() => child.kill("SIGKILL"), 3000).unref();
         }, 5 * 60 * 1000);
@@ -390,10 +483,13 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
             else
                 pendingStderr = remainder;
             for (const line of lines) {
-                const progress = progressFromLine(line, provider);
-                if (progress)
+                for (const progress of progressEventsFromRaw(line, provider)) {
                     onProgress?.(progress.message, progress.detail);
-                else if (stream === "stderr" && line.trim()) {
+                }
+                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());
+                }
+                if (stream === "stderr" && line.trim()) {
                     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");
@@ -403,12 +499,6 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
         };
         child.stdout.on("data", (chunk) => consume(chunk, "stdout"));
         child.stderr.on("data", (chunk) => consume(chunk, "stderr"));
-        child.once("spawn", () => onProgress?.(`${label} process started${child.pid ? ` · PID ${child.pid}` : ""}`));
-        const heartbeat = setInterval(() => {
-            if (!signal?.aborted)
-                onProgress?.(`${label} is still running${child.pid ? ` · PID ${child.pid}` : ""}…`);
-        }, 15000);
-        heartbeat.unref();
         const abort = () => child.kill("SIGTERM");
         if (signal?.aborted)
             abort();
@@ -419,7 +509,8 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
                 return;
             settled = true;
             clearTimeout(timeout);
-            clearInterval(heartbeat);
+            if (taskId)
+                activeAgentInputs.delete(taskId);
             signal?.removeEventListener("abort", abort);
             reject(error);
         });
@@ -428,7 +519,8 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
                 return;
             settled = true;
             clearTimeout(timeout);
-            clearInterval(heartbeat);
+            if (taskId)
+                activeAgentInputs.delete(taskId);
             signal?.removeEventListener("abort", abort);
             if (timedOut) {
                 reject(new Error(`${label} did not finish within 5 minutes. Check its login or approval prompt, then retry.`));
@@ -438,34 +530,35 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress) {
             const stderrTail = pendingStderr.trim();
             if (stdoutTail) {
                 stdout += pendingStdout;
-                const progress = progressFromLine(stdoutTail, provider);
-                if (progress)
+                for (const progress of progressEventsFromRaw(stdoutTail, provider)) {
                     onProgress?.(progress.message, progress.detail);
+                }
             }
             if (stderrTail) {
-                const progress = progressFromLine(stderrTail, provider);
-                if (progress)
+                for (const progress of progressEventsFromRaw(stderrTail, provider)) {
                     onProgress?.(progress.message, progress.detail);
+                }
+                if (provider === "opencode" && /quota exceeded|authentication failed|invalid api key|unauthorized|forbidden/i.test(stderrTail)) {
+                    onProgress?.("OpenCode · provider rejected the request; stopping this task…");
+                }
             }
             resolve({ stdout, stderr, exitCode: code ?? 1 });
         });
     });
 }
-async function proposeWithLocalAgent(cwd, instruction, context, config, signal, onProgress) {
+async function proposeWithLocalAgent(cwd, instruction, context, config, signal, onProgress, taskId, onPrompt) {
     const outputContract = `Return ONLY valid JSON in this exact shape: {"summary":"short explanation","changes":[{"filePath":"relative/path","oldString":"exact existing text","newString":"replacement text"}]}. Treat the supplied source context as read-only. Before returning, verify every oldString against that context. Use project-relative paths only. Do not edit files, run write commands, commit, or produce markdown fences.`;
     const prompt = `${instruction}\n\n${outputContract}\n\nLasso has already assembled this source context:\n${context || "No matching source context was found."}`;
     const local = localCommand(config.provider, config.model, prompt);
     const command = local.command;
     const args = local.args;
-    const result = await runLocalCommand(cwd, command, args, config.provider, signal, onProgress);
+    const result = await runLocalCommand(cwd, command, args, config.provider, signal, onProgress, taskId, onPrompt);
     if (result.exitCode !== 0)
         throw new Error(localAgentError(command, result.stderr, result.exitCode));
     return extractLocalAgentProposal(result.stdout, config.provider);
 }
-async function proposeChanges(cwd, input, config, signal, onProgress) {
-    onProgress?.("Reading source context…");
+async function proposeChanges(cwd, input, config, signal, onProgress, onPrompt) {
     const context = await contextFor(cwd, input.element);
-    onProgress?.("Starting the coding agent…");
     const visualContext = input.context ? { ...input.context, screenshots: undefined } : undefined;
     const history = input.messages?.map((message) => `${message.role}: ${message.content}`).join("\n") || input.instruction;
     const priorChanges = input.changesHistory?.length ? JSON.stringify(input.changesHistory, null, 2) : "None";
@@ -474,7 +567,7 @@ async function proposeChanges(cwd, input, config, signal, onProgress) {
         : "";
     const instruction = `Selection context:\n${JSON.stringify(input.element, null, 2)}\n${JSON.stringify(visualContext, null, 2)}\n\nConversation history:\n${history}\n\nPrevious change history for this selection:\n${priorChanges}\n\nRelevant source context:\n${context || "No matching source context was found. Ask for a more specific selection rather than inventing a file."}${dragHint}\n\nReturn ONLY JSON: {"summary":"short explanation","changes":[{"filePath":"relative/path","oldString":"exact text","newString":"replacement text"}]}`;
     if (config.provider === "claude-code" || config.provider === "codex" || config.provider === "opencode") {
-        return proposeWithLocalAgent(cwd, instruction, context, config, signal, onProgress);
+        return proposeWithLocalAgent(cwd, instruction, context, config, signal, onProgress, input.taskId, onPrompt);
     }
     const system = "You are Lasso, a careful source-code editing agent. Return only valid JSON. Each oldString must occur exactly once in its file. Never rewrite whole files. Keep changes focused on the request.";
     const model = config.model || (config.provider === "google" ? "gemini-2.5-flash" : config.provider === "openai" ? "gpt-4.1-mini" : config.provider === "ollama" ? "llama3.2" : "claude-sonnet-4-20250514");
@@ -525,13 +618,13 @@ async function proposeChanges(cwd, input, config, signal, onProgress) {
         throw new Error("The agent returned an empty response.");
     return jsonFrom(text);
 }
-async function answerQuestion(cwd, input, config, signal, onProgress) {
+async function answerQuestion(cwd, input, config, signal, onProgress, onPrompt) {
     const context = await contextFor(cwd, input.element);
     const history = input.messages?.map((message) => `${message.role}: ${message.content}`).join("\n") || "None";
     const prompt = `Answer the user's question conversationally and directly. Do not propose file changes and do not return JSON. If the question is about the selected UI, use the selection and source context below.\n\nUser question:\n${input.question}\n\nSelected element:\n${JSON.stringify(input.element, null, 2)}\n\nVisual context:\n${JSON.stringify({ ...input.context, screenshots: undefined }, null, 2)}\n\nConversation:\n${history}\n\nRelevant source context:\n${context || "No matching source context was found."}`;
     if (config.provider === "claude-code" || config.provider === "codex" || config.provider === "opencode") {
         const local = localCommand(config.provider, config.model, prompt);
-        const result = await runLocalCommand(cwd, local.command, local.args, config.provider, signal, onProgress);
+        const result = await runLocalCommand(cwd, local.command, local.args, config.provider, signal, onProgress, input.taskId, onPrompt);
         if (result.exitCode !== 0)
             throw new Error(localAgentError(local.command, result.stderr, result.exitCode));
         return extractLocalAgentText(result.stdout, config.provider).trim();

package/dist/cli/bridge.d.ts

@@ -1,4 +1,4 @@
-import { type SourceChange } from "./agent";
+import { type SourceChange, type AgentPrompt } from "./agent";
 import type { CollabConfig } from "./project";
 export declare const DEFAULT_BRIDGE_PORT = 3056;
 type GitState = {
@@ -91,6 +91,17 @@ export type BridgeMessage = {
 } | {
     type: "stop";
     taskId?: string;
+} | {
+    type: "agent_prompt_response";
+    taskId: string;
+    response: string;
+} | {
+    type: "list_page_folders";
+} | {
+    type: "create_page";
+    folder: string;
+    fileName: string;
+    content: string;
 } | {
     type: "git_status";
 } | {
@@ -148,6 +159,17 @@ export type ServerBridgeMessage = {
     message: string;
     detail?: string;
     changes?: SourceChange[];
+} | {
+    type: "agent_prompt";
+    taskId: string;
+    prompt: AgentPrompt;
+} | {
+    type: "page_folders";
+    folders: string[];
+} | {
+    type: "page_created";
+    path: string;
+    error?: string;
 } | {
     type: "assistant_message";
     taskId?: string;

package/dist/cli/bridge.js

@@ -181,6 +181,23 @@ 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)
+            return [];
+        const folders = [relative || "."];
+        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("."))
+                    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));
+            }
+        }
+        catch {
+            // Ignore folders that cannot be read.
+        }
+        return folders;
+    };
     bridgeServer.on("request", (req, res) => {
         if (req.method !== "POST" || req.url?.split("?", 1)[0] !== "/__lasso/bridge/restart")
             return;
@@ -278,12 +295,16 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             const controller = new AbortController();
             taskControllers.set(request.taskId, controller);
             if (socket.readyState === socket.OPEN) {
-                socket.send(JSON.stringify({ type: "agent_status", taskId: request.taskId, status: "working", message: statusMessage || "Starting agent…" }));
+                socket.send(JSON.stringify({ type: "agent_status", taskId: request.taskId, status: "working", message: statusMessage || "Working…" }));
             }
             void (0, agent_1.proposeChanges)(cwd, request, config, controller.signal, (message, detail) => {
                 if (!controller.signal.aborted && socket.readyState === socket.OPEN) {
                     socket.send(JSON.stringify({ type: "agent_status", taskId: request.taskId, status: "working", message, detail }));
                 }
+            }, (prompt) => {
+                if (!controller.signal.aborted && socket.readyState === socket.OPEN) {
+                    socket.send(JSON.stringify({ type: "agent_prompt", taskId: request.taskId, prompt }));
+                }
             })
                 .then((proposal) => {
                 if (controller.signal.aborted || socket.readyState !== socket.OPEN)
@@ -319,6 +340,28 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             else {
                 console.log("[lasso] received from overlay:", msg);
             }
+            if (msg.type === "list_page_folders") {
+                socket.send(JSON.stringify({ type: "page_folders", folders: pageFolders(cwd).sort() }));
+                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)) {
+                    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.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) }));
+                }
+                catch (error) {
+                    socket.send(JSON.stringify({ type: "page_created", path: node_path_1.default.relative(root, target), error: error instanceof Error && error.message.includes("EEXIST") ? "A file with that name already exists." : "The page could not be created." }));
+                }
+                return;
+            }
             if (msg.type === "ask") {
                 const localProvider = msg.provider === "cli";
                 const cliProvider = msg.model.startsWith("claude-code:") ? "claude-code" : msg.model.startsWith("opencode:") ? "opencode" : "codex";
@@ -336,10 +379,13 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                 const selectedConfig = localProvider
                     ? { provider: cliProvider, model: msg.model }
                     : { ...agentConfig, provider: (msg.provider || agentConfig.provider), model: msg.model };
-                socket.send(JSON.stringify({ type: "agent_status", taskId: msg.taskId, status: "working", message: "Starting agent…" }));
-                void (0, agent_1.answerQuestion)(cwd, { question: msg.question, context: msg.context, element: msg.element, messages: msg.messages }, selectedConfig, controller.signal, (message, detail) => {
+                socket.send(JSON.stringify({ type: "agent_status", taskId: msg.taskId, status: "working", message: "Working…" }));
+                void (0, agent_1.answerQuestion)(cwd, { taskId: msg.taskId, question: msg.question, context: msg.context, element: msg.element, messages: msg.messages }, selectedConfig, controller.signal, (message, detail) => {
                     if (!controller.signal.aborted && socket.readyState === socket.OPEN)
                         socket.send(JSON.stringify({ type: "agent_status", taskId: msg.taskId, status: "working", message, detail }));
+                }, (prompt) => {
+                    if (!controller.signal.aborted && socket.readyState === socket.OPEN)
+                        socket.send(JSON.stringify({ type: "agent_prompt", taskId: msg.taskId, prompt }));
                 }).then((answer) => {
                     if (!controller.signal.aborted)
                         socket.send(JSON.stringify({ type: "assistant_message", taskId: msg.taskId, message: answer }));
@@ -370,6 +416,9 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                 reviewRefreshAttempts.set(msg.taskId, 0);
                 runEditReview(msg, selectedConfig);
             }
+            else if (msg.type === "agent_prompt_response") {
+                (0, agent_1.respondToAgentPrompt)(msg.taskId, msg.response);
+            }
             else if (msg.type === "stop") {
                 if (msg.taskId)
                     taskControllers.get(msg.taskId)?.abort();

package/dist/overlay.js

@@ -8092,6 +8092,57 @@
       display: none !important;
     }
 
+    .lasso-toolbar-mini {
+      position: fixed;
+      left: calc(50% + 280px);
+      bottom: 24px;
+      display: inline-flex;
+      align-items: center;
+      min-height: 48px;
+      padding: 6px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-full);
+      background: rgba(22, 23, 27, 0.94);
+      box-shadow: var(--lo-shadow-lg);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      pointer-events: auto;
+      z-index: 10;
+    }
+    .lasso-toolbar-mini.dismissed { display: none; }
+    .lasso-new-page-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 34px;
+      padding: 0 11px;
+      border: 0;
+      border-radius: var(--lo-radius-full);
+      background: var(--lo-primary);
+      color: #111214;
+      font: inherit;
+      font-size: 12px;
+      font-weight: 650;
+      cursor: pointer;
+      transition: transform 150ms ease, filter 150ms ease;
+    }
+    .lasso-new-page-btn 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; }
+
     .lasso-tb-sep {
       width: 1px;
       height: 20px;
@@ -8138,6 +8189,24 @@
       transform: scale(0.96);
     }
 
+    .lasso-toolbar-tooltip {
+      position: fixed;
+      z-index: 100;
+      transform: translateX(-50%);
+      max-width: 220px;
+      padding: 6px 9px;
+      border: 1px solid var(--lo-border);
+      border-radius: 7px;
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      box-shadow: 0 8px 24px rgba(0,0,0,.28);
+      font-size: 11px;
+      line-height: 1.2;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+    .lasso-toolbar-tooltip[hidden] { display: none; }
+
     /* Animated label transition */
     .lasso-tool-label {
       max-width: 0;
@@ -8306,6 +8375,11 @@
       color: #ffffff;
     }
 
+    @media (max-width: 760px) {
+      .lasso-toolbar-mini { left: 50%; bottom: 82px; transform: translateX(-50%); }
+      .lasso-new-page-panel { left: 50%; transform: translateX(-50%); }
+    }
+
     /* Presence Avatars in toolbar with color outlines */
     .lasso-presence {
       display: flex;
@@ -10943,6 +11017,14 @@
     .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-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-todo-header {
       display: flex;
@@ -12129,7 +12211,6 @@
   // src/overlay/tasks/tasks.ts
   var panel = null;
   var list = null;
-  var detail = null;
   var badge = null;
   var selectionListeners = /* @__PURE__ */ new Set();
   var reviewListeners = /* @__PURE__ */ new Set();
@@ -12160,6 +12241,17 @@
       (task) => task.status !== "complete" && task.status !== "error" && task.status !== "stopped" && normalizedInstruction(task.instruction) === normalized && task.element === (element || void 0)
     );
   }
+  function getComponentConversation(selectionId) {
+    const task = state.agentTasks.find((candidate) => candidate.selectionId === selectionId);
+    if (!task) return { messages: [], changesHistory: [] };
+    return {
+      messages: task.messages.map((message) => ({ ...message })),
+      changesHistory: task.changesHistory.map((entry) => ({
+        ...entry,
+        changes: entry.changes.map((change) => ({ ...change }))
+      }))
+    };
+  }
   function onAgentTaskSelected(listener) {
     selectionListeners.add(listener);
     return () => selectionListeners.delete(listener);
@@ -12274,12 +12366,10 @@
     </div>
     <div class="lasso-task-body">
       <div class="lasso-task-list"></div>
-      <div class="lasso-task-detail" hidden></div>
     </div>
   `;
     dom.shadow.appendChild(panel);
     list = panel.querySelector(".lasso-task-list");
-    detail = panel.querySelector(".lasso-task-detail");
     badge = panel.querySelector(".lasso-task-badge");
     panel.querySelector(".lasso-task-close").addEventListener("click", () => toggleTaskPanel(false));
     panel.querySelectorAll(".lasso-task-tab").forEach((tab) => {
@@ -12297,7 +12387,7 @@
   }
   function renderTasks() {
     const panelEl = panel;
-    if (!panelEl || !list || !detail || !badge) return;
+    if (!panelEl || !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);
@@ -12326,49 +12416,6 @@
         list.appendChild(button);
       }
     }
-    const selected = getAgentTask(state.activeTaskId);
-    if (!selected) {
-      detail.hidden = true;
-      return;
-    }
-    detail.hidden = false;
-    detail.replaceChildren();
-    const heading = document.createElement("div");
-    heading.className = "lasso-task-detail-heading";
-    heading.innerHTML = `<span class="lasso-task-detail-status ${selected.status}">${statusLabel[selected.status]}</span><button type="button" class="lasso-task-back">All tasks</button>`;
-    heading.querySelector("button").addEventListener("click", () => selectAgentTask(null));
-    const prompt = document.createElement("p");
-    prompt.className = "lasso-task-prompt";
-    prompt.textContent = selected.instruction;
-    const activity = document.createElement("p");
-    activity.className = "lasso-task-message";
-    activity.textContent = selected.response || selected.message;
-    detail.append(heading, prompt, activity);
-    if (selected.activity.length) {
-      const activityList = document.createElement("div");
-      activityList.className = "lasso-task-activity";
-      for (const entry of selected.activity.slice(-8)) {
-        const line = document.createElement("div");
-        line.textContent = entry;
-        activityList.appendChild(line);
-      }
-      detail.appendChild(activityList);
-    }
-    const pendingChanges = selected.pendingChanges.length ? selected.pendingChanges : selected.changes || [];
-    if (pendingChanges.length) {
-      const changes = document.createElement("div");
-      changes.className = "lasso-task-changes";
-      changes.textContent = `${pendingChanges.length} proposed file change${pendingChanges.length === 1 ? "" : "s"}`;
-      detail.appendChild(changes);
-      if (selected.status === "review") {
-        const review = document.createElement("button");
-        review.type = "button";
-        review.className = "lasso-task-apply";
-        review.textContent = "Review changes";
-        review.addEventListener("click", () => requestAgentTaskReview(selected.id));
-        detail.appendChild(review);
-      }
-    }
   }
 
   // src/overlay/notifications.ts
@@ -18494,6 +18541,8 @@
   var agentLogLines = [];
   var agentLogExpanded = false;
   var reviewPanel = null;
+  var agentPromptPanel = null;
+  var agentPromptTaskId = null;
   var modelBtn = null;
   var modelName = null;
   var modelMenu = null;
@@ -18519,6 +18568,17 @@
     const icon = providerIcons[provider];
     return `<span class="${active ? "lasso-model-active-icon" : "lasso-model-item-icon"} provider-${provider}" aria-hidden="true"><svg viewBox="0 0 ${icon.width} ${icon.height}" xmlns="http://www.w3.org/2000/svg" focusable="false">${icon.body}</svg></span>`;
   }
+  function componentConversationId(element) {
+    const source = element.getAttribute("data-source") || element.getAttribute("data-lasso-source") || getSourceHint(element);
+    return `component:${source || elementKey(element)}`;
+  }
+  function loadComponentConversation(element) {
+    const selectionId = componentConversationId(element);
+    const conversation = getComponentConversation(selectionId);
+    state.selectionId = selectionId;
+    state.chatHistory = conversation.messages;
+    state.changesHistory = conversation.changesHistory;
+  }
   function buildPrompt() {
     const dom = getDOM();
     const el = document.createElement("div");
@@ -18610,6 +18670,31 @@
   `;
     dom.shadow.appendChild(el);
     promptEl = el;
+    const agentPrompt = document.createElement("div");
+    agentPrompt.className = "lasso-agent-prompt";
+    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>
+  `;
+    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;
+      });
+    });
     promptInput = el.querySelector(".lasso-prompt-input");
     promptElement = el.querySelector(".lasso-prompt-element-name");
     sendButton = el.querySelector(".lasso-prompt-send");
@@ -18809,6 +18894,21 @@
     });
     return { prompt: el, review: rev };
   }
+  function showAgentPrompt(taskId2, prompt) {
+    if (!agentPromptPanel) return;
+    agentPromptTaskId = taskId2;
+    const message = agentPromptPanel.querySelector(".lasso-agent-prompt-message");
+    const input = agentPromptPanel.querySelector(".lasso-agent-prompt-input");
+    if (message) message.textContent = prompt.message;
+    if (input) {
+      input.value = "";
+      input.hidden = prompt.kind === "permission";
+    }
+    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();
+  }
   function refreshModelMenu() {
     if (!modelMenu) return;
     const filters = document.createElement("div");
@@ -19035,15 +19135,15 @@
       container.append(document.createTextNode(text.slice(lastIndex)));
     }
   }
-  function setAgentStatus(status, message, detail2, taskId2 = state.promptTaskId, appendMessage = true) {
+  function setAgentStatus(status, message, detail, taskId2 = state.promptTaskId, appendMessage = true) {
     if (!agentStatusElement || !agentStatusMessage || !sendButton) return;
-    const logMessage = detail2?.trim() || message.trim();
+    const logMessage = detail?.trim() || message.trim();
     const lastLog = agentLogLines[agentLogLines.length - 1];
     if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (!logMessage || lastLog === logMessage)) return;
     appendAgentLog(logMessage);
     if (taskId2) recordTaskActivity(taskId2, logMessage);
     const running = status === "thinking" || status === "working";
-    agentStatusElement.hidden = status === "review";
+    agentStatusElement.hidden = status === "review" || status === "complete";
     agentStatusElement.dataset.status = status;
     agentStatusMessage.textContent = message;
     const badgeEl = agentStatusElement.querySelector(".lasso-agent-status-badge");
@@ -19074,18 +19174,9 @@
   }
   function resetAgentState() {
     state.agentRunning = false;
-    const hasLog = agentLogLines.length > 0;
     if (agentStatusElement) {
-      agentStatusElement.hidden = !hasLog;
-      agentStatusElement.dataset.status = hasLog ? "complete" : "idle";
-    }
-    if (hasLog && agentStatusMessage) agentStatusMessage.textContent = "Agent complete";
-    if (hasLog) {
-      const badgeEl = agentStatusElement?.querySelector(".lasso-agent-status-badge");
-      if (badgeEl) {
-        badgeEl.textContent = "done";
-        badgeEl.className = "lasso-agent-status-badge complete";
-      }
+      agentStatusElement.hidden = true;
+      agentStatusElement.dataset.status = "idle";
     }
     if (sendButton) {
       sendButton.classList.remove("loading");
@@ -19101,13 +19192,17 @@
   function hideReview() {
     if (reviewPanel) reviewPanel.hidden = true;
   }
-  function resetPromptSession() {
+  function resetPromptSession(element = state.selected) {
     state.promptTaskId = null;
-    state.chatHistory = [];
-    state.changesHistory = [];
     state.pendingChanges = [];
     state.lastInstruction = "";
-    state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    if (element) {
+      loadComponentConversation(element);
+    } else {
+      state.chatHistory = [];
+      state.changesHistory = [];
+      state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    }
     state.screenshotPromise = Promise.resolve({});
     hideReview();
     clearAgentLog();
@@ -19280,7 +19375,7 @@
     const changesHistory = state.changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) }));
     const task = createAgentTask(instruction, messages, changesHistory, selectedElement, selectionId);
     updateAgentTask(task.id, { status: "thinking", message: "Thinking\u2026", activity: [...task.activity, "Thinking\u2026"] });
-    resetPromptSession();
+    resetPromptSession(selectedElement);
     state.promptTaskId = task.id;
     state.lastInstruction = instruction;
     const rect = selectedElement.getBoundingClientRect();
@@ -19350,7 +19445,7 @@
   }
   function openPromptForSelected(selected) {
     if (!promptEl || !promptElement) return;
-    resetPromptSession();
+    resetPromptSession(selected);
     promptElement.textContent = getElementLabel(selected);
     positionPrompt(selected);
     promptEl.classList.add("visible");
@@ -20667,7 +20762,65 @@
       </svg>
     </button>
   `;
-    dom.shadow.append(toolbar, toolbarReopen, voiceBar);
+    const miniToolbar = document.createElement("div");
+    miniToolbar.className = "lasso-toolbar-mini";
+    miniToolbar.innerHTML = `
+    <button class="lasso-new-page-btn" type="button" aria-label="Create a new page" title="New page">
+      <span aria-hidden="true">+</span>
+      <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);
+    const tooltip = document.createElement("div");
+    tooltip.className = "lasso-toolbar-tooltip";
+    tooltip.hidden = true;
+    tooltip.setAttribute("role", "tooltip");
+    dom.shadow.appendChild(tooltip);
+    let tooltipTarget = null;
+    const showTooltip = (target) => {
+      const label = target.dataset.tooltip || target.getAttribute("title") || target.getAttribute("aria-label");
+      if (!label) return;
+      target.removeAttribute("title");
+      tooltipTarget = target;
+      tooltip.textContent = label;
+      tooltip.hidden = false;
+      const rect = target.getBoundingClientRect();
+      tooltip.style.left = `${rect.left + rect.width / 2}px`;
+      tooltip.style.top = `${rect.bottom + 8}px`;
+    };
+    const hideTooltip = (target) => {
+      if (!target || tooltipTarget === target) {
+        tooltip.hidden = true;
+        tooltipTarget = null;
+      }
+    };
+    toolbar.querySelectorAll("[title]").forEach((target) => {
+      target.dataset.tooltip = target.getAttribute("title") || "";
+      target.addEventListener("pointerenter", () => showTooltip(target));
+      target.addEventListener("pointerleave", () => hideTooltip(target));
+      target.addEventListener("focusin", () => showTooltip(target));
+      target.addEventListener("focusout", () => hideTooltip(target));
+    });
+    miniToolbar.querySelectorAll("[title]").forEach((target) => {
+      target.dataset.tooltip = target.getAttribute("title") || "";
+      target.addEventListener("pointerenter", () => showTooltip(target));
+      target.addEventListener("pointerleave", () => hideTooltip(target));
+      target.addEventListener("focusin", () => showTooltip(target));
+      target.addEventListener("focusout", () => hideTooltip(target));
+    });
     const selectBtn = toolbar.querySelector(".select-tool");
     const dragBtn = toolbar.querySelector(".drag-tool");
     const previewBtn = toolbar.querySelector(".preview-tool");
@@ -20679,6 +20832,67 @@
     const clipboardBtn = toolbar.querySelector(".clipboard-tool");
     const voiceBtn = toolbar.querySelector(".voice-tool");
     const dismissBtn = toolbar.querySelector(".lasso-toolbar-dismiss");
+    const newPageBtn = miniToolbar.querySelector(".lasso-new-page-btn");
+    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 }));
+    });
     selectBtn.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -20737,10 +20951,12 @@
     });
     dismissBtn.addEventListener("click", () => {
       toolbar.classList.add("dismissed");
+      miniToolbar.classList.add("dismissed");
       toolbarReopen.classList.add("visible");
     });
     toolbarReopen.addEventListener("click", () => {
       toolbar.classList.remove("dismissed");
+      miniToolbar.classList.remove("dismissed");
       toolbarReopen.classList.remove("visible");
     });
     voiceBar.querySelector(".mute-toggle").addEventListener("click", () => {
@@ -20813,6 +21029,18 @@
           if (message.type === "git_progress" && message.message) {
             setGitMessage(message.message);
           }
+          if (message.type === "agent_prompt" && message.taskId && message.prompt) {
+            showAgentPrompt(message.taskId, message.prompt);
+            return;
+          }
+          if (message.type === "page_folders") {
+            window.dispatchEvent(new CustomEvent("lasso-page-folders", { detail: message.folders || [] }));
+            return;
+          }
+          if (message.type === "page_created") {
+            window.dispatchEvent(new CustomEvent("lasso-page-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lasso-ai/cli",
-  "version": "1.0.28",
+  "version": "1.1.0",
   "description": "Select any part of your running app, describe a change, and let AI edit the real source code.",
   "type": "commonjs",
   "main": "dist/cli/index.js",