@lasso-ai/cli 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -7,8 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- **One-shot mode as sidebar panel**: Changed one-shot mode from a centered modal to a right-side sidebar panel that only appears during one-shot mode. When users exit one-shot mode, they return to the normal edit mode with just the toolbar. This provides a cleaner, more integrated experience similar to modern AI editors.
+- **Mini toolbar positioning**: Adjusted the mini toolbar position to `left: calc(50% + 140px)` (reduced from 280px) to reduce overlap with the main toolbar. Added smooth transition and centered positioning when the main toolbar is dismissed. Mini toolbar is now hidden when one-shot sidebar is open to avoid UI clutter.
+
 ### Added
 
+- **Multiple access points for one-shot mode**: Added a Command button to the toolbar (⌘ icon) for opening the one-shot sidebar, in addition to the existing ⌘K keyboard shortcut. The sidebar includes a model selector dropdown allowing users to choose their AI model before submitting a one-shot request.
+- **Model selector in command sidebar**: The one-shot sidebar now displays the currently selected model with a dropdown to switch between available models. The selector is organized by provider (Anthropic, OpenAI, Google, Local Agents) for easy navigation.
+- **Cursor CLI support**: Added Cursor as a local agent option alongside Claude Code, Codex, and OpenCode. Users can now select Cursor models in the model dropdown if Cursor is installed on their system. Cursor uses similar output parsing to Claude Code with progress tracking and error handling.
+- **Model locking based on API key configuration**: Models are now locked with a lock icon in the dropdown when the user hasn't configured the provider's API key in their dashboard. Free plan users can only use models from providers with configured keys. Paid plan users have all models unlocked. CLI agents (Claude Code, Codex, OpenCode, Cursor) are always unlocked since users manage their own credentials.
 - **One-shot mode with global command bar**: Press ⌘K to open a command interface
   anywhere in your app. Describe what you want to build (e.g., "Build a complete billing
   system with invoices and payment tracking") and Lasso will plan, execute, and

package/README.md

@@ -200,7 +200,7 @@ 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`, `codex`, and
+When installed, Lasso automatically detects the `claude`, `codex`, `cursor`, 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
@@ -444,9 +444,10 @@ sees**, so install it before starting the dev server (or restart afterwards):
 | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------- |
 | [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`                  |
+| [Cursor](https://lasso.byorello.space/docs/cursor)           | `cursor`   | `cursor agent run --non-interactive --model "<model>"`                         |
 | [OpenCode](https://lasso.byorello.space/docs/opencode)       | `opencode` | `opencode run --format json --print-logs --agent plan`                         |
 
-All three run read-only, so the agent proposes a patch and never writes to your project.
+All four 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.
 

package/dist/cli/agent.d.ts

@@ -39,12 +39,12 @@ type AgentInput = {
     };
 };
 export type AgentConfig = {
-    provider: "anthropic" | "openai" | "google" | "ollama" | "claude-code" | "codex" | "opencode";
+    provider: "anthropic" | "openai" | "google" | "ollama" | "claude-code" | "codex" | "opencode" | "cursor";
     apiKey?: string;
     model?: string;
     baseUrl?: string;
 };
-export type LocalAgent = "claude-code" | "codex" | "opencode";
+export type LocalAgent = "claude-code" | "codex" | "opencode" | "cursor";
 export type AgentProgressLevel = "working" | "error";
 export type AgentProgress = (message: string, detail?: string, level?: AgentProgressLevel) => void;
 export type AgentPrompt = {

package/dist/cli/agent.js

@@ -23,7 +23,7 @@ function respondToAgentPrompt(taskId, value) {
 }
 async function detectLocalAgents() {
     const found = new Set();
-    for (const [name, command] of [["claude-code", "claude"], ["codex", "codex"], ["opencode", "opencode"]]) {
+    for (const [name, command] of [["claude-code", "claude"], ["codex", "codex"], ["opencode", "opencode"], ["cursor", "cursor"]]) {
         try {
             await execFileAsync(process.platform === "win32" ? "where.exe" : "which", [command]);
             found.add(name);
@@ -229,6 +229,33 @@ function extractLocalAgentText(raw, provider) {
         }
         return results.at(-1) || raw;
     }
+    if (provider === "cursor") {
+        // Cursor uses similar output format to claude-code
+        try {
+            const payload = JSON.parse(raw);
+            if (payload.result)
+                return payload.result;
+        }
+        catch {
+            // Stream-json output is handled below.
+        }
+        const results = [];
+        for (const line of raw.split(/\r?\n/)) {
+            try {
+                const event = JSON.parse(line);
+                if (typeof event.result === "string")
+                    results.push(event.result);
+                const message = event.message;
+                for (const part of message?.content || [])
+                    if (part.type === "text" && part.text)
+                        results.push(part.text);
+            }
+            catch {
+                // Ignore progress lines that are not JSON.
+            }
+        }
+        return results.at(-1) || raw;
+    }
     const texts = [];
     for (const line of raw.split(/\r?\n/)) {
         try {
@@ -294,7 +321,7 @@ function extractLocalAgentProposal(raw, provider) {
             const event = JSON.parse(line);
             const item = event.item;
             const part = event.part;
-            const values = provider === "claude-code"
+            const values = provider === "claude-code" || provider === "cursor"
                 ? [event.result, ...(event.message?.content || []).map((entry) => entry.text)]
                 : provider === "opencode"
                     ? [...collectTextFields(event), part?.type === "text" ? part.text : undefined]
@@ -335,7 +362,7 @@ function extractLocalAgentProposal(raw, provider) {
             // Keep looking; this output may only be a progress or tool event.
         }
     }
-    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.`);
+    throw new Error(`${provider === "opencode" ? "OpenCode" : provider === "cursor" ? "Cursor" : "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, " ");
@@ -413,9 +440,10 @@ function progressFromLine(raw, provider) {
     try {
         const event = JSON.parse(raw);
         const item = event.item;
-        if (provider === "claude-code") {
+        if (provider === "claude-code" || provider === "cursor") {
+            const agentName = provider === "cursor" ? "Cursor" : "Claude Code";
             if (event.type === "system")
-                return progressEvent("Claude Code connected");
+                return progressEvent(`${agentName} connected`);
             // tool_use blocks inside assistant messages
             const toolBlock = event.message?.content?.find?.((p) => p.type === "tool_use");
             if (toolBlock) {
@@ -423,13 +451,13 @@ function progressFromLine(raw, provider) {
                 const inp = toolBlock.input;
                 const detail = inp?.file_path ?? inp?.path ?? inp?.command ?? inp?.query ?? inp?.url ?? "";
                 return progressEvent(detail
-                    ? `Claude Code · ${toolName}  ${snippet(detail)}`
-                    : `Claude Code · ${toolName}`, detail);
+                    ? `${agentName} · ${toolName}  ${snippet(detail)}`
+                    : `${agentName} · ${toolName}`, detail);
             }
             // thinking blocks inside assistant messages
             const thinkBlock = event.message?.content?.find?.((p) => p.type === "thinking");
             if (thinkBlock?.thinking) {
-                return progressEvent(`Claude Code · ${snippet(thinkBlock.thinking)}`, thinkBlock.thinking);
+                return progressEvent(`${agentName} · ${snippet(thinkBlock.thinking)}`, thinkBlock.thinking);
             }
             // top-level tool event fields (stream-json verbose format)
             const tool = event.tool_name || event.name || event.tool?.name;
@@ -437,14 +465,14 @@ function progressFromLine(raw, provider) {
                 const inp = event.tool_input;
                 const detail = inp?.file_path ?? inp?.path ?? inp?.command ?? inp?.query ?? inp?.url ?? "";
                 return progressEvent(detail
-                    ? `Claude Code · ${tool}  ${snippet(detail)}`
-                    : `Claude Code · ${tool}`, detail);
+                    ? `${agentName} · ${tool}  ${snippet(detail)}`
+                    : `${agentName} · ${tool}`, detail);
             }
             if (event.type === "result" || event.result) {
-                return progressEvent("Claude Code · preparing the proposal");
+                return progressEvent(`${agentName} · preparing the proposal`);
             }
             if (event.type === "assistant")
-                return progressEvent("Claude Code · reasoning about the change");
+                return progressEvent(`${agentName} · reasoning about the change`);
         }
         else if (provider === "codex") {
             const type = item?.type || event.type || "";
@@ -514,10 +542,13 @@ function localAgentError(command, stderr, exitCode) {
     const output = stderr.trim();
     const hint = agentFailureHint(output);
     if (hint)
-        return `${command === "opencode" ? "OpenCode" : command} could not finish: ${hint}`;
+        return `${command === "opencode" ? "OpenCode" : command === "cursor" ? "Cursor" : 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.";
     }
+    if (command === "cursor" && /waiting for permission or authentication/i.test(output)) {
+        return "Cursor needs permission or authentication. Run Cursor 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.";
     }
@@ -537,6 +568,9 @@ function localCommand(provider, model, prompt) {
     if (provider === "claude-code") {
         return { command: "claude", args: ["-p", prompt || "", "--output-format", "stream-json", "--verbose", "--permission-mode", "plan", "--max-turns", "3", ...(selectedModel ? ["--model", selectedModel] : [])] };
     }
+    if (provider === "cursor") {
+        return { command: "cursor", args: ["agent", "run", "--non-interactive", ...(selectedModel ? ["--model", selectedModel] : []), prompt || ""] };
+    }
     if (provider === "opencode") {
         return { command: "opencode", args: ["run", "--format", "json", "--print-logs", "--log-level", "INFO", "--agent", "plan", ...(selectedModel ? ["--model", selectedModel] : []), prompt || ""] };
     }
@@ -545,7 +579,7 @@ function localCommand(provider, model, prompt) {
 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: ["pipe", "pipe", "pipe"] });
-        const label = provider === "opencode" ? "OpenCode" : provider === "codex" ? "Codex" : "Claude Code";
+        const label = provider === "opencode" ? "OpenCode" : provider === "codex" ? "Codex" : provider === "cursor" ? "Cursor" : "Claude Code";
         let stdout = "";
         let stderr = "";
         let pendingStdout = "";
@@ -653,6 +687,9 @@ function runLocalCommand(cwd, command, args, provider, signal, onProgress, taskI
                 if (provider === "opencode" && /quota exceeded|authentication failed|invalid api key|unauthorized|forbidden/i.test(stderrTail)) {
                     onProgress?.("OpenCode · provider rejected the request; stopping this task…", undefined, "error");
                 }
+                if (provider === "cursor" && /quota exceeded|authentication failed|invalid api key|unauthorized|forbidden/i.test(stderrTail)) {
+                    onProgress?.("Cursor · provider rejected the request; stopping this task…", undefined, "error");
+                }
             }
             resolve({ stdout, stderr, exitCode: code ?? 1 });
         });
@@ -678,7 +715,7 @@ async function proposeChanges(cwd, input, config, signal, onProgress, onPrompt)
         ? `\n\nDRAG REPOSITIONING TASK:\nThe user dragged this element by dx: ${input.context.drag.delta?.dx ?? 0}px, dy: ${input.context.drag.delta?.dy ?? 0}px to target coordinates (left: ${input.context.drag.targetRect?.left ?? 0}px, top: ${input.context.drag.targetRect?.top ?? 0}px). Modify the source code (CSS classes, Tailwind classes, flex/grid alignment, margin offsets, or positioning properties) so the element is accurately rendered at this target position.`
         : "";
     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\nCRITICAL: You MUST return ONLY JSON with actual file changes. Do NOT explain what you see or describe the code. Always propose concrete edits when given an instruction. Return JSON format: {"summary":"brief action taken","changes":[{"filePath":"relative/path","oldString":"exact existing text","newString":"replacement text"}]}`;
-    if (config.provider === "claude-code" || config.provider === "codex" || config.provider === "opencode") {
+    if (config.provider === "claude-code" || config.provider === "codex" || config.provider === "opencode" || config.provider === "cursor") {
         return proposeWithLocalAgent(cwd, instruction, context, config, signal, onProgress, input.taskId, onPrompt);
     }
     const system = "You are Lasso, a source-code editing agent. Your ONLY job is to propose concrete file changes. NEVER explain, describe, or analyze code without proposing edits. ALWAYS return valid JSON with at least one change when the user requests a modification. Each oldString must occur exactly once in its file. Never rewrite whole files. Keep changes focused and minimal. If you cannot find the exact text to change, look harder at the provided context - do not give up and explain instead.";
@@ -734,7 +771,7 @@ 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") {
+    if (config.provider === "claude-code" || config.provider === "codex" || config.provider === "opencode" || config.provider === "cursor") {
         const local = localCommand(config.provider, config.model, prompt);
         const result = await runLocalCommand(cwd, local.command, local.args, config.provider, signal, onProgress, input.taskId, onPrompt);
         if (result.exitCode !== 0)

package/dist/cli/bridge.js

@@ -263,15 +263,39 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             return [];
         }
     }
-    const availableModels = async () => {
+    async function cursorModels() {
+        if (!localAgents.has("cursor"))
+            return [];
+        try {
+            const result = await execFileAsync("cursor", ["model", "list"], { maxBuffer: 1024 * 1024 });
+            return result.stdout
+                .split(/\r?\n/)
+                .map((line) => line.trim())
+                .filter((line) => line && !line.startsWith("Available models"))
+                .map((line) => {
+                const parts = line.split(/\s+/);
+                const id = parts[0]?.trim();
+                const name = parts.slice(1).join(" ").trim();
+                return id ? { id: `cursor:${id}`, label: `Cursor · ${name}`, provider: "cli" } : null;
+            })
+                .filter((model) => model !== null);
+        }
+        catch {
+            return [];
+        }
+    }
+    const availableModels = async (collabConfig = null) => {
         localAgents = await (0, agent_1.detectLocalAgents)();
         const locals = await localModels();
         const discoveredOpenCodeModels = await openCodeModels();
+        const discoveredCursorModels = await cursorModels();
         if (locals.length && !agentConfig) {
             const base = process.env.OLLAMA_BASE_URL || fileEnv.OLLAMA_BASE_URL || "http://localhost:11434/api";
             agentConfig = { provider: "ollama", apiKey: "ollama", model: process.env.OLLAMA_MODEL || fileEnv.OLLAMA_MODEL, baseUrl: `${base.replace(/\/api\/?$/, "")}/v1` };
         }
-        return [
+        const isPaidPlan = collabConfig?.plan && collabConfig.plan !== "free";
+        const configuredProviders = collabConfig?.configuredProviders || [];
+        const allModels = [
             { id: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5", provider: "anthropic" },
             { id: "claude-opus-4-1-20250805", label: "Claude Opus 4.1", provider: "anthropic" },
             { id: "gpt-4.1", label: "GPT-4.1", provider: "openai" },
@@ -298,17 +322,57 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                 { id: "opencode:anthropic/claude-sonnet-4-5", label: "OpenCode · Claude Sonnet", provider: "cli" },
                 { id: "opencode:openai/gpt-5", label: "OpenCode · GPT-5", provider: "cli" },
             ] : []),
+            ...(localAgents.has("cursor") ? [
+                { id: "cursor:claude-sonnet-4.5", label: "Cursor · Claude Sonnet 4.5", provider: "cli" },
+                { id: "cursor:claude-opus-4", label: "Cursor · Claude Opus 4", provider: "cli" },
+                { id: "cursor:claude-3.5-sonnet", label: "Cursor · Claude 3.5 Sonnet", provider: "cli" },
+                { id: "cursor:gpt-4o", label: "Cursor · GPT-4o", provider: "cli" },
+                { id: "cursor:gpt-4o-mini", label: "Cursor · GPT-4o mini", provider: "cli" },
+            ] : []),
             ...discoveredOpenCodeModels,
+            ...discoveredCursorModels,
             ...locals,
         ];
+        // Lock models based on provider API key configuration
+        // Paid plans have all models unlocked
+        // Free plans only have models unlocked for providers with configured API keys
+        const providerKeyMapping = {
+            anthropic: "ANTHROPIC_API_KEY",
+            openai: "OPENAI_API_KEY",
+            google: "GOOGLE_GENERATIVE_AI_API_KEY",
+            ollama: "OLLAMA_BASE_URL",
+        };
+        return allModels.map((model) => {
+            if (model.provider === "cli") {
+                // CLI agents are always unlocked (user manages their own credentials)
+                return model;
+            }
+            if (isPaidPlan) {
+                // Paid plans have all hosted models unlocked
+                return model;
+            }
+            // Free plans: check if provider is configured
+            const envKey = providerKeyMapping[model.provider];
+            const isConfigured = configuredProviders.includes(model.provider) ||
+                Boolean(process.env[envKey]) ||
+                Boolean(fileEnv[envKey]);
+            if (!isConfigured) {
+                return {
+                    ...model,
+                    locked: true,
+                    lockedReason: "Configure your API key in the dashboard to use this model",
+                };
+            }
+            return model;
+        });
     };
     wss.on("connection", (socket) => {
         overlaySocket = socket;
         console.log(chalk_1.default.green("✓") + " Overlay connected");
-        socket.send(JSON.stringify({ type: "config", apiKeyConfigured: lassoKeyConfigured, agentConfigured: Boolean(agentConfig) || localAgents.size > 0, models: [], collab: collabConfig?.registered ? collabConfig : null }));
-        void availableModels().then((models) => {
+        socket.send(JSON.stringify({ type: "config", apiKeyConfigured: lassoKeyConfigured, agentConfigured: Boolean(agentConfig) || localAgents.size > 0, models: [], collab: collabConfig?.registered ? { ...collabConfig, plan: collabConfig.plan, configuredProviders: collabConfig.configuredProviders } : null }));
+        void availableModels(collabConfig).then((models) => {
             if (socket.readyState === socket.OPEN)
-                socket.send(JSON.stringify({ type: "config", apiKeyConfigured: lassoKeyConfigured, agentConfigured: Boolean(agentConfig) || localAgents.size > 0, models, collab: collabConfig?.registered ? collabConfig : null }));
+                socket.send(JSON.stringify({ type: "config", apiKeyConfigured: lassoKeyConfigured, agentConfigured: Boolean(agentConfig) || localAgents.size > 0, models, collab: collabConfig?.registered ? { ...collabConfig, plan: collabConfig.plan, configuredProviders: collabConfig.configuredProviders } : null }));
         });
         void getGitState(cwd).then((git) => {
             if (socket.readyState === socket.OPEN)
@@ -438,7 +502,7 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             }
             if (msg.type === "ask") {
                 const localProvider = msg.provider === "cli";
-                const cliProvider = msg.model.startsWith("claude-code:") ? "claude-code" : msg.model.startsWith("opencode:") ? "opencode" : "codex";
+                const cliProvider = msg.model?.startsWith("claude-code:") ? "claude-code" : msg.model?.startsWith("opencode:") ? "opencode" : msg.model?.startsWith("cursor:") ? "cursor" : "codex";
                 if (!lassoKeyConfigured && !localProvider) {
                     socket.send(JSON.stringify({ type: "agent_status", taskId: msg.taskId, status: "error", message: "Set your Lasso API key before asking the hosted agent a question." }));
                     return;
@@ -473,7 +537,7 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             }
             else if (msg.type === "edit") {
                 const localProvider = msg.provider === "cli";
-                const cliProvider = msg.model.startsWith("claude-code:") ? "claude-code" : msg.model.startsWith("opencode:") ? "opencode" : "codex";
+                const cliProvider = msg.model?.startsWith("claude-code:") ? "claude-code" : msg.model?.startsWith("opencode:") ? "opencode" : msg.model?.startsWith("cursor:") ? "cursor" : "codex";
                 if (!lassoKeyConfigured && !localProvider) {
                     socket.send(JSON.stringify({ type: "agent_status", taskId: msg.taskId, status: "error", message: "Set VITE_LASSO_API_KEY or NEXT_LASSO_API_KEY in your app environment before sending an edit." }));
                     return;
@@ -509,7 +573,7 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
             }
             else if (msg.type === "git_generate_message") {
                 const localProvider = msg.provider === "cli";
-                const cliProvider = msg.model.startsWith("claude-code:") ? "claude-code" : msg.model.startsWith("opencode:") ? "opencode" : "codex";
+                const cliProvider = msg.model?.startsWith("claude-code:") ? "claude-code" : msg.model?.startsWith("opencode:") ? "opencode" : msg.model?.startsWith("cursor:") ? "cursor" : "codex";
                 if (!agentConfig && !localProvider) {
                     socket.send(JSON.stringify({ type: "git_commit_message", error: "No AI provider is configured." }));
                     return;
@@ -605,7 +669,7 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                     return;
                 }
                 const localProvider = msg.provider === "cli";
-                const cliProvider = msg.model?.startsWith("claude-code:") ? "claude-code" : msg.model?.startsWith("opencode:") ? "opencode" : "codex";
+                const cliProvider = msg.model?.startsWith("claude-code:") ? "claude-code" : msg.model?.startsWith("opencode:") ? "opencode" : msg.model?.startsWith("cursor:") ? "cursor" : "codex";
                 const selectedConfig = localProvider
                     ? { provider: cliProvider, model: msg.model || "claude-code:sonnet" }
                     : { ...agentConfig, provider: (msg.provider || agentConfig.provider), model: msg.model || agentConfig.model };

package/dist/cli/create.js

@@ -63,8 +63,9 @@ async function runCreateCommand(projectName, framework, typescript, packageManag
         let args;
         if (framework === "next") {
             const tsFlag = typescript ? "--ts" : "--js";
+            const pmFlag = packageManager === "pnpm" ? "--use-pnpm" : packageManager === "yarn" ? "--use-yarn" : "--use-npm";
             command = "npx";
-            args = ["create-next-app@latest", projectName, tsFlag, "--tailwind", "--eslint", "--app", "--src-dir", "--import-alias", "@/*", "--no-git"];
+            args = ["create-next-app@latest", projectName, tsFlag, "--tailwind", "--eslint", "--app", "--src-dir", "--import-alias", "@/*", "--no-git", pmFlag];
         }
         else if (framework === "react") {
             command = "npx";
@@ -172,16 +173,17 @@ async function createProject(options) {
     }
     if (!packageManager) {
         const detected = await detectPackageManager();
+        const choices = [
+            { title: "pnpm", value: "pnpm" },
+            { title: "npm", value: "npm" },
+            { title: "yarn", value: "yarn" },
+        ];
         const response = await (0, prompts_1.default)({
             type: "select",
             name: "packageManager",
             message: "Package manager:",
-            choices: [
-                { title: "pnpm", value: "pnpm" },
-                { title: "npm", value: "npm" },
-                { title: "yarn", value: "yarn" },
-            ],
-            initial: detected,
+            choices,
+            initial: Math.max(0, choices.findIndex((c) => c.value === detected)),
         });
         packageManager = response.packageManager;
     }

package/dist/cli/project.d.ts

@@ -11,6 +11,8 @@ export interface CollabConfig {
     workspaceId?: string;
     token?: string;
     apiKey?: string;
+    plan?: string;
+    configuredProviders?: string[];
 }
 export interface InitResult {
     ok: boolean;

package/dist/cli/project.js

@@ -292,6 +292,8 @@ async function resolveCollabSession(cwd, fileEnv, projectId) {
         config.registered = true;
         config.claimed = Boolean(body.session?.id);
         config.registeredAt = new Date().toISOString();
+        config.plan = body.project?.plan || "free";
+        config.configuredProviders = body.project?.configuredProviders || [];
         console.log(chalk_1.default.green("✓") +
             " Project session opened " +
             chalk_1.default.cyan(config.name || projectId) +

package/dist/overlay.js

@@ -8094,7 +8094,7 @@
 
     .lasso-toolbar-mini {
       position: fixed;
-      left: calc(50% + 280px);
+      left: calc(50% + 140px);
       bottom: 24px;
       display: inline-flex;
       align-items: center;
@@ -8108,8 +8108,21 @@
       -webkit-backdrop-filter: blur(20px);
       pointer-events: auto;
       z-index: 10;
+      transition: left 200ms ease, opacity 200ms ease;
     }
+
+    .lasso-toolbar.dismissed + .lasso-toolbar-mini {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
     .lasso-toolbar-mini.dismissed { display: none; }
+
+    /* Hide mini toolbar when one-shot sidebar is open */
+    .lasso-command-sidebar:not([hidden]) ~ .lasso-toolbar-mini {
+      opacity: 0;
+      pointer-events: none;
+    }
     .lasso-new-page-btn {
       display: inline-flex;
       align-items: center;
@@ -8343,6 +8356,16 @@
       color: var(--lo-error);
     }
 
+    /* Command button */
+    .lasso-tool-btn.command-tool {
+      color: var(--lo-text-2);
+    }
+
+    .lasso-tool-btn.command-tool:hover {
+      color: var(--lo-primary);
+      background: rgba(129, 201, 149, 0.16);
+    }
+
     /* Badge on comment button */
     .lasso-comments-badge {
       display: none;
@@ -9841,6 +9864,15 @@
       background: var(--lo-surface-hover);
     }
 
+    .lasso-prompt-model-item.locked {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .lasso-prompt-model-item.locked:hover {
+      background: transparent;
+    }
+
     .lasso-prompt-model-item .lasso-prompt-model-check {
       flex-shrink: 0;
       color: var(--lo-primary);
@@ -9851,6 +9883,11 @@
       opacity: 1;
     }
 
+    .lasso-prompt-model-item .lasso-prompt-model-lock {
+      flex-shrink: 0;
+      color: var(--lo-text-3);
+    }
+
     .lasso-prompt-element {
       min-width: 0;
       margin-left: auto;
@@ -11080,47 +11117,19 @@
     .lasso-agent-prompt-actions button:active { transform: scale(0.97); }
 
     /* ==========================================================
-       COMMAND BAR (One-Shot Build Mode)
+       COMMAND SIDEBAR (One-Shot Build Mode)
        ========================================================== */
 
-    .lasso-command-backdrop {
+    .lasso-command-sidebar {
       position: fixed;
-      inset: 0;
-      z-index: 100;
-      background: rgba(8, 9, 11, 0.6);
-      backdrop-filter: blur(4px);
-      -webkit-backdrop-filter: blur(4px);
-      pointer-events: auto;
-    }
-
-    .lasso-command-backdrop[hidden] {
-      display: none;
-    }
-
-    .lasso-command-bar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 101;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      pointer-events: none;
-    }
-
-    .lasso-command-bar[hidden] {
-      display: none;
-    }
-
-    .lasso-command-card {
-      width: min(600px, calc(100vw - 48px));
-      max-height: calc(100vh - 48px);
+      top: 16px;
+      right: 16px;
+      bottom: 16px;
+      width: 380px;
+      max-width: calc(100vw - 32px);
       display: flex;
       flex-direction: column;
-      padding: 20px;
+      padding: 0;
       border: 1px solid var(--lo-border);
       border-radius: var(--lo-radius-xl);
       background: rgba(24, 25, 29, 0.98);
@@ -11130,12 +11139,17 @@
       box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
       pointer-events: auto;
       animation: lasso-command-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+      z-index: 100;
+    }
+
+    .lasso-command-sidebar[hidden] {
+      display: none;
     }
 
     @keyframes lasso-command-in {
       from {
         opacity: 0;
-        transform: translateY(12px) scale(0.98);
+        transform: translateX(12px);
       }
       to {
         opacity: 1;
@@ -11143,11 +11157,12 @@
       }
     }
 
-    .lasso-command-header {
+    .lasso-command-sidebar-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 16px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--lo-border);
     }
 
     .lasso-command-brand {
@@ -11157,12 +11172,12 @@
     }
 
     .lasso-command-brand-logo {
-      width: 28px;
-      height: 28px;
+      width: 24px;
+      height: 24px;
     }
 
     .lasso-command-brand-title {
-      font-size: 15px;
+      font-size: 14px;
       font-weight: 600;
       letter-spacing: -0.01em;
     }
@@ -11186,10 +11201,124 @@
       color: var(--lo-text);
     }
 
-    .lasso-command-body {
+    .lasso-command-sidebar-body {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 20px;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .lasso-command-model-select {
+      position: relative;
+    }
+
+    .lasso-command-model-btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-md);
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease;
+    }
+
+    .lasso-command-model-btn:hover {
+      border-color: var(--lo-primary);
+      background: var(--lo-surface-hover);
+    }
+
+    .lasso-command-model-icon {
+      flex: 0 0 auto;
+    }
+
+    .lasso-command-model-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .lasso-command-model-chevron {
+      flex: 0 0 auto;
+      transition: transform 200ms ease;
+    }
+
+    .lasso-command-model-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      max-height: 320px;
+      overflow-y: auto;
+      padding: 8px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-lg);
+      background: rgba(24, 25, 29, 0.98);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      color: var(--lo-text);
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+      z-index: 10;
+    }
+
+    .lasso-command-model-section {
+      margin-bottom: 8px;
+    }
+
+    .lasso-command-model-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .lasso-command-model-section-header {
+      padding: 4px 8px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--lo-text-3);
+    }
+
+    .lasso-command-model-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      border: 0;
+      border-radius: var(--lo-radius-md);
+      background: transparent;
+      color: var(--lo-text);
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 450;
+      text-align: left;
+      cursor: pointer;
+      transition: background 120ms ease;
+    }
+
+    .lasso-command-model-item:hover {
+      background: var(--lo-surface-hover);
+    }
+
+    .lasso-command-model-item.selected {
+      background: rgba(129, 201, 149, 0.16);
+      color: var(--lo-primary);
+    }
+
+    .lasso-command-input-wrapper {
+      flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 12px;
     }
 
     .lasso-command-input {
@@ -17378,8 +17507,8 @@
       const pin = document.createElement("button");
       pin.type = "button";
       const isResolved = thread.root.status === "RESOLVED";
-      const isOpen2 = state.openThreadUid === thread.root.uid;
-      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen2 ? " active" : ""}`;
+      const isOpen = state.openThreadUid === thread.root.uid;
+      pin.className = `lasso-comment-pin${isResolved ? " resolved" : ""}${isOpen ? " active" : ""}`;
       pin.dataset.commentUid = thread.root.uid;
       const authorColor = userNameColor(thread.root.author?.id || "");
       const authorInitials = initials(thread.root.author?.name || "");
@@ -19019,8 +19148,17 @@
           }
           if (message.type === "config" && message.models?.length) {
             state.MODELS = message.models;
-            state.selectedModel = state.MODELS.find((m) => m.id === storedModelId()) || state.MODELS[0];
-            rememberModel(state.selectedModel);
+            const currentLocked = state.selectedModel?.locked;
+            if (currentLocked) {
+              const firstUnlocked = state.MODELS.find((m) => !m.locked);
+              if (firstUnlocked) {
+                state.selectedModel = firstUnlocked;
+                rememberModel(state.selectedModel);
+              }
+            } else {
+              state.selectedModel = state.MODELS.find((m) => m.id === storedModelId()) || state.MODELS.find((m) => !m.locked) || state.MODELS[0];
+              rememberModel(state.selectedModel);
+            }
             refreshModelMenu();
           }
           if (message.type === "git_state" && message.git) {
@@ -19649,7 +19787,7 @@
         return;
       }
       const item = event.target.closest(".lasso-prompt-model-item");
-      if (!item) return;
+      if (!item || item.classList.contains("locked")) return;
       const found = state.MODELS.find((m) => m.id === item.dataset.model);
       if (!found) return;
       state.selectedModel = found;
@@ -19889,6 +20027,7 @@
     if (key === "claude-code") return "Claude Code";
     if (key === "codex") return "Codex";
     if (key === "opencode") return "OpenCode";
+    if (key === "cursor") return "Cursor";
     return key;
   }
   function modelItem(model) {
@@ -19896,7 +20035,15 @@
     item.type = "button";
     item.className = "lasso-prompt-model-item";
     item.dataset.model = model.id;
-    item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>`;
+    if (model.locked) {
+      item.classList.add("locked");
+      item.disabled = true;
+      item.setAttribute("aria-disabled", "true");
+      item.setAttribute("title", model.lockedReason || "This model is locked");
+      item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-lock" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
+    } else {
+      item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span><svg class="lasso-prompt-model-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>`;
+    }
     return item;
   }
   function syncModelMenu2() {
@@ -21640,6 +21787,254 @@
     return panelEl ? !panelEl.hidden : false;
   }
 
+  // src/overlay/commandbar/commandbar.ts
+  var commandBarEl = null;
+  var commandInput = null;
+  var commandSubmit = null;
+  var commandVoice = null;
+  var commandClose = null;
+  var commandModelBtn = null;
+  var commandModelMenu = null;
+  var commandModelIcon = null;
+  var commandModelLabel = null;
+  var isOneShotMode = false;
+  function buildCommandBar() {
+    const dom = getDOM();
+    const el = document.createElement("div");
+    el.className = "lasso-command-sidebar";
+    el.hidden = true;
+    el.innerHTML = `
+    <div class="lasso-command-sidebar-header">
+      <div class="lasso-command-brand">
+        <img class="lasso-command-brand-logo" src="${LASSO_ICON_DATA_URL}" alt="Lasso" />
+        <span class="lasso-command-brand-title">Build with AI</span>
+      </div>
+      <button class="lasso-command-close" type="button" aria-label="Close">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="lasso-command-sidebar-body">
+      <div class="lasso-command-model-select">
+        <button class="lasso-command-model-btn" type="button" aria-label="Select model">
+          <span class="lasso-command-model-icon"></span>
+          <span class="lasso-command-model-label"></span>
+          <svg class="lasso-command-model-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+        <div class="lasso-command-model-menu" hidden></div>
+      </div>
+
+      <div class="lasso-command-input-wrapper">
+        <textarea 
+          class="lasso-command-input" 
+          placeholder="Describe what you want to build...&#10;&#10;Examples:&#10;\u2022 Build a settings page with profile, notifications and security sections&#10;\u2022 Add authentication with login and signup&#10;\u2022 Create a dashboard with customer table and analytics"
+          rows="6"
+        ></textarea>
+      </div>
+      
+      <div class="lasso-command-actions">
+        <button class="lasso-command-voice" type="button" aria-label="Voice input" title="Voice input (speech-to-text)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="3" width="6" height="11" rx="3"/>
+            <path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/>
+          </svg>
+        </button>
+
+        <button class="lasso-command-submit primary" type="button" aria-label="Build">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+          <span>Build</span>
+        </button>
+      </div>
+
+      <div class="lasso-command-shortcuts">
+        <span class="lasso-command-shortcut">
+          <kbd>\u2318</kbd><kbd>K</kbd>
+          <span>Toggle one-shot mode</span>
+        </span>
+        <span class="lasso-command-shortcut">
+          <kbd>\u2318</kbd><kbd>\u21B5</kbd>
+          <span>Submit</span>
+        </span>
+      </div>
+    </div>
+  `;
+    dom.shadow.appendChild(el);
+    commandBarEl = el;
+    commandInput = el.querySelector(".lasso-command-input");
+    commandSubmit = el.querySelector(".lasso-command-submit");
+    commandVoice = el.querySelector(".lasso-command-voice");
+    commandClose = el.querySelector(".lasso-command-close");
+    commandModelBtn = el.querySelector(".lasso-command-model-btn");
+    commandModelMenu = el.querySelector(".lasso-command-model-menu");
+    commandModelIcon = el.querySelector(".lasso-command-model-icon");
+    commandModelLabel = el.querySelector(".lasso-command-model-label");
+    commandModelBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (commandModelMenu) commandModelMenu.hidden = !commandModelMenu.hidden;
+    });
+    commandModelMenu.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const item = event.target.closest(".lasso-command-model-item");
+      if (!item) return;
+      const found = state.MODELS.find((m) => m.id === item.dataset.model);
+      if (!found) return;
+      state.selectedModel = found;
+      if (commandModelIcon && commandModelLabel) {
+        commandModelIcon.innerHTML = providerIcon(found.provider, true);
+        commandModelLabel.textContent = found.label;
+      }
+      if (commandModelMenu) commandModelMenu.hidden = true;
+    });
+    document.addEventListener("click", (event) => {
+      if (!commandModelMenu || commandModelMenu.hidden) return;
+      const path = event.composedPath ? event.composedPath() : [];
+      if (path.includes(commandModelBtn) || path.includes(commandModelMenu)) return;
+      const target = event.target;
+      if (commandModelBtn?.contains(target) || commandModelMenu?.contains(target)) return;
+      commandModelMenu.hidden = true;
+    });
+    commandClose.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closeCommandBar();
+    });
+    commandVoice.addEventListener("click", async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (isRecordingVoice()) {
+        commandVoice.classList.remove("recording");
+        commandVoice.classList.add("transcribing");
+        commandVoice.title = "Transcribing\u2026";
+        try {
+          const result = await stopVoiceRecording();
+          if (result.text && commandInput) {
+            const prev = commandInput.value.trim();
+            commandInput.value = prev ? `${prev} ${result.text}` : result.text;
+            commandInput.focus();
+            autoResizeTextarea(commandInput);
+            showActivity("Transcribed", "#81c995");
+          } else {
+            showActivity("No speech detected.", "#fdd663");
+          }
+        } catch (err) {
+          showActivity(err?.message || "Transcription failed", "#f28b82");
+        } finally {
+          commandVoice.classList.remove("transcribing");
+          commandVoice.title = "Voice input";
+        }
+      } else {
+        try {
+          await startVoiceRecording();
+          commandVoice.classList.add("recording");
+          commandVoice.title = "Recording\u2026 Click again to stop";
+          showActivity("Listening\u2026 speak now", "#ea4335");
+        } catch (err) {
+          showActivity(err?.message || "Microphone access denied", "#f28b82");
+        }
+      }
+    });
+    commandInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    });
+    commandSubmit.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      handleSubmit();
+    });
+    commandInput.addEventListener("input", () => {
+      if (commandInput) autoResizeTextarea(commandInput);
+    });
+    commandInput.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeCommandBar();
+      }
+    });
+  }
+  function autoResizeTextarea(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }
+  function openCommandBar() {
+    if (!commandBarEl) return;
+    commandBarEl.hidden = false;
+    isOneShotMode = true;
+    if (commandInput) {
+      commandInput.value = "";
+      commandInput.focus();
+      autoResizeTextarea(commandInput);
+    }
+    if (commandModelIcon && commandModelLabel && state.selectedModel) {
+      commandModelIcon.innerHTML = providerIcon(state.selectedModel.provider, true);
+      commandModelLabel.textContent = state.selectedModel.label;
+    }
+    populateModelMenu();
+  }
+  function closeCommandBar() {
+    if (!commandBarEl) return;
+    commandBarEl.hidden = true;
+    isOneShotMode = false;
+    if (commandInput) {
+      commandInput.value = "";
+    }
+  }
+  function isCommandBarOpen() {
+    return isOneShotMode;
+  }
+  function populateModelMenu() {
+    if (!commandModelMenu) return;
+    commandModelMenu.innerHTML = "";
+    const providers = ["all", ...Array.from(new Set(state.MODELS.map((m) => m.provider)))];
+    for (const provider of providers) {
+      const section = document.createElement("div");
+      section.className = "lasso-command-model-section";
+      if (provider !== "all") {
+        const header = document.createElement("div");
+        header.className = "lasso-command-model-section-header";
+        header.textContent = provider === "anthropic" ? "Anthropic" : provider === "openai" ? "OpenAI" : provider === "google" ? "Google" : provider === "ollama" ? "Ollama" : provider === "cli" ? "Local Agents" : provider;
+        section.appendChild(header);
+      }
+      const models = provider === "all" ? state.MODELS : state.MODELS.filter((m) => m.provider === provider);
+      for (const model of models) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "lasso-command-model-item";
+        item.dataset.model = model.id;
+        item.innerHTML = `${providerIcon(model.provider)}<span>${model.label}</span>`;
+        if (model.id === state.selectedModel.id) {
+          item.classList.add("selected");
+        }
+        section.appendChild(item);
+      }
+      commandModelMenu.appendChild(section);
+    }
+  }
+  async function handleSubmit() {
+    if (!commandInput) return;
+    const prompt = commandInput.value.trim();
+    if (!prompt) return;
+    closeCommandBar();
+    if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
+      state.bridgeSocket.send(JSON.stringify({
+        type: "oneshot",
+        prompt,
+        scope: "project",
+        model: state.selectedModel.id,
+        provider: state.selectedModel.provider === "cli" ? "cli" : void 0
+      }));
+    }
+  }
+
   // src/overlay/toolbar/toolbar.ts
   var COMMENT_CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32"><defs><filter id="s" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="rgba(0,0,0,0.5)"/></filter></defs><g filter="url(#s)"><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="#7C3AED"/><path d="M4 2h16a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H10l-6 6V5a3 3 0 0 1 3-3z" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/><line x1="12" y1="7" x2="12" y2="15" stroke="white" stroke-width="1.8" stroke-linecap="round"/><line x1="8" y1="11" x2="16" y2="11" stroke="white" stroke-width="1.8" stroke-linecap="round"/></g></svg>`;
   var COMMENT_CURSOR_URL = `url("data:image/svg+xml,${encodeURIComponent(COMMENT_CURSOR_SVG)}") 4 2, crosshair`;
@@ -21767,6 +22162,14 @@
       </svg>
     </button>
 
+    <button class="lasso-tool-btn command-tool" type="button" aria-label="Command bar" title="Command bar (\u2318K)">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 2v20M2 12h20"/>
+        <circle cx="12" cy="12" r="9"/>
+      </svg>
+      <span class="lasso-tool-label">Command</span>
+    </button>
+
     <div class="lasso-presence" style="display: none;">
       <div class="lasso-presence-avatars"></div>
       <span class="lasso-presence-count"></span>
@@ -21871,6 +22274,7 @@
     const notepadBtn = toolbar.querySelector(".notepad-tool");
     const clipboardBtn = toolbar.querySelector(".clipboard-tool");
     const voiceBtn = toolbar.querySelector(".voice-tool");
+    const commandBtn = toolbar.querySelector(".command-tool");
     const dismissBtn = toolbar.querySelector(".lasso-toolbar-dismiss");
     const newPageBtn = miniToolbar.querySelector(".lasso-new-page-btn");
     newPageBtn.addEventListener("click", (event) => {
@@ -21934,6 +22338,11 @@
       e.preventDefault();
       if (state.voiceOn) setVoiceMuted(!state.voiceMuted);
     });
+    commandBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      openCommandBar();
+    });
     dismissBtn.addEventListener("click", () => {
       toolbar.classList.add("dismissed");
       miniToolbar.classList.add("dismissed");
@@ -21953,190 +22362,6 @@
     return { toolbar, voiceBar };
   }
 
-  // src/overlay/commandbar/commandbar.ts
-  var commandBarEl = null;
-  var commandInput = null;
-  var commandBackdrop = null;
-  var commandSubmit = null;
-  var commandVoice = null;
-  var commandClose = null;
-  var isOpen = false;
-  function buildCommandBar() {
-    const dom = getDOM();
-    const backdrop = document.createElement("div");
-    backdrop.className = "lasso-command-backdrop";
-    backdrop.hidden = true;
-    backdrop.innerHTML = ``;
-    dom.shadow.appendChild(backdrop);
-    commandBackdrop = backdrop;
-    const el = document.createElement("div");
-    el.className = "lasso-command-bar";
-    el.hidden = true;
-    el.innerHTML = `
-    <div class="lasso-command-card">
-      <div class="lasso-command-header">
-        <div class="lasso-command-brand">
-          <img class="lasso-command-brand-logo" src="${LASSO_ICON_DATA_URL}" alt="Lasso" />
-          <span class="lasso-command-brand-title">What do you want to build?</span>
-        </div>
-        <button class="lasso-command-close" type="button" aria-label="Close">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-
-      <div class="lasso-command-body">
-        <textarea 
-          class="lasso-command-input" 
-          placeholder="Describe what you want to build...&#10;&#10;Examples:&#10;\u2022 Build a settings page with profile, notifications and security sections&#10;\u2022 Add authentication with login and signup&#10;\u2022 Create a dashboard with customer table and analytics"
-          rows="3"
-        ></textarea>
-        
-        <div class="lasso-command-actions">
-          <div class="lasso-command-icon-group">
-            <button class="lasso-command-voice" type="button" aria-label="Voice input" title="Voice input (speech-to-text)">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="9" y="3" width="6" height="11" rx="3"/>
-                <path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/>
-              </svg>
-            </button>
-          </div>
-
-          <button class="lasso-command-submit primary" type="button" aria-label="Build">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M5 12h14M12 5l7 7-7 7"/>
-            </svg>
-            <span>Build</span>
-          </button>
-        </div>
-
-        <div class="lasso-command-shortcuts">
-          <span class="lasso-command-shortcut">
-            <kbd>\u2318</kbd><kbd>K</kbd>
-            <span>Open command bar</span>
-          </span>
-          <span class="lasso-command-shortcut">
-            <kbd>\u2318</kbd><kbd>\u21B5</kbd>
-            <span>Submit</span>
-          </span>
-          <span class="lasso-command-shortcut">
-            <kbd>Esc</kbd>
-            <span>Close</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  `;
-    dom.shadow.appendChild(el);
-    commandBarEl = el;
-    commandInput = el.querySelector(".lasso-command-input");
-    commandSubmit = el.querySelector(".lasso-command-submit");
-    commandVoice = el.querySelector(".lasso-command-voice");
-    commandClose = el.querySelector(".lasso-command-close");
-    backdrop.addEventListener("click", closeCommandBar);
-    commandClose.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      closeCommandBar();
-    });
-    commandVoice.addEventListener("click", async (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (isRecordingVoice()) {
-        commandVoice.classList.remove("recording");
-        commandVoice.classList.add("transcribing");
-        commandVoice.title = "Transcribing\u2026";
-        try {
-          const result = await stopVoiceRecording();
-          if (result.text && commandInput) {
-            const prev = commandInput.value.trim();
-            commandInput.value = prev ? `${prev} ${result.text}` : result.text;
-            commandInput.focus();
-            autoResizeTextarea(commandInput);
-            showActivity("Transcribed", "#81c995");
-          } else {
-            showActivity("No speech detected.", "#fdd663");
-          }
-        } catch (err) {
-          showActivity(err?.message || "Transcription failed", "#f28b82");
-        } finally {
-          commandVoice.classList.remove("transcribing");
-          commandVoice.title = "Voice input";
-        }
-      } else {
-        try {
-          await startVoiceRecording();
-          commandVoice.classList.add("recording");
-          commandVoice.title = "Recording\u2026 Click again to stop";
-          showActivity("Listening\u2026 speak now", "#ea4335");
-        } catch (err) {
-          showActivity(err?.message || "Microphone access denied", "#f28b82");
-        }
-      }
-    });
-    commandInput.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        handleSubmit();
-      }
-    });
-    commandSubmit.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      handleSubmit();
-    });
-    commandInput.addEventListener("input", () => {
-      if (commandInput) autoResizeTextarea(commandInput);
-    });
-    commandInput.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        closeCommandBar();
-      }
-    });
-  }
-  function autoResizeTextarea(textarea) {
-    textarea.style.height = "auto";
-    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-  }
-  function openCommandBar() {
-    if (!commandBarEl || !commandBackdrop) return;
-    commandBarEl.hidden = false;
-    commandBackdrop.hidden = false;
-    isOpen = true;
-    if (commandInput) {
-      commandInput.value = "";
-      commandInput.focus();
-      autoResizeTextarea(commandInput);
-    }
-  }
-  function closeCommandBar() {
-    if (!commandBarEl || !commandBackdrop) return;
-    commandBarEl.hidden = true;
-    commandBackdrop.hidden = true;
-    isOpen = false;
-    if (commandInput) {
-      commandInput.value = "";
-    }
-  }
-  function isCommandBarOpen() {
-    return isOpen;
-  }
-  async function handleSubmit() {
-    if (!commandInput) return;
-    const prompt = commandInput.value.trim();
-    if (!prompt) return;
-    closeCommandBar();
-    if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
-      state.bridgeSocket.send(JSON.stringify({
-        type: "oneshot",
-        prompt,
-        scope: "project"
-      }));
-    }
-  }
-
   // src/overlay/index.ts
   console.log("[lasso] overlay initializing");
   function init() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lasso-ai/cli",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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",