@lasso-ai/cli 1.0.12 → 1.0.13

package/dist/cli/agent.d.ts

@@ -44,7 +44,7 @@ export type AgentConfig = {
     baseUrl?: string;
 };
 export type LocalAgent = "claude-code" | "codex" | "opencode";
-export type AgentProgress = (message: string) => void;
+export type AgentProgress = (message: string, detail?: string) => void;
 export type AgentAnswer = {
     question: string;
     context?: AgentInput["context"];

package/dist/cli/agent.js

@@ -27,7 +27,11 @@ async function detectLocalAgents() {
 }
 const ignored = new Set(["node_modules", ".git", ".next", "dist", "build", ".turbo"]);
 const sourceExtensions = /\.(tsx?|jsx?|vue|svelte|css|scss|html)$/i;
+const sourceFileCache = new Map();
 async function sourceFiles(directory) {
+    const cached = sourceFileCache.get(directory);
+    if (cached && cached.expiresAt > Date.now())
+        return cached.files;
     const entries = await promises_1.default.readdir(directory, { withFileTypes: true });
     const files = [];
     for (const entry of entries) {
@@ -38,28 +42,43 @@ async function sourceFiles(directory) {
             files.push(...(await sourceFiles(fullPath)));
         else if (sourceExtensions.test(entry.name))
             files.push(fullPath);
-        if (files.length >= 80)
+        if (files.length >= 40)
             break;
     }
+    sourceFileCache.set(directory, { expiresAt: Date.now() + 5000, files });
     return files;
 }
 async function contextFor(cwd, element) {
-    const files = await sourceFiles(cwd);
     const needle = element.sourceHint || element.label.replace(/^[^.#]+[.#]?/, "");
-    const sourceFile = element.sourceHint ? node_path_1.default.basename(element.sourceHint.split(":")[0]) : "";
+    const hintedPath = element.sourceHint?.split(":")[0];
+    const sourceFile = hintedPath ? node_path_1.default.basename(hintedPath) : "";
+    if (hintedPath) {
+        const candidate = node_path_1.default.isAbsolute(hintedPath) ? hintedPath : node_path_1.default.resolve(cwd, hintedPath);
+        try {
+            const content = await promises_1.default.readFile(candidate, "utf8");
+            return `FILE: ${node_path_1.default.relative(cwd, candidate)}\n${content.slice(0, 16000)}`;
+        }
+        catch {
+            // Fall back to the indexed search when the runtime source hint is stale.
+        }
+    }
+    const files = await sourceFiles(cwd);
     const snippets = [];
-    for (const file of files) {
-        if (snippets.length >= 8)
-            break;
+    const results = await Promise.all(files.map(async (file) => {
         try {
             const content = await promises_1.default.readFile(file, "utf8");
             if (!needle || (sourceFile && file.endsWith(sourceFile)) || content.includes(needle) || content.includes(element.label)) {
-                snippets.push(`FILE: ${node_path_1.default.relative(cwd, file)}\n${content.slice(0, 12000)}`);
+                return `FILE: ${node_path_1.default.relative(cwd, file)}\n${content.slice(0, 8000)}`;
             }
         }
         catch {
             // A file can disappear while a dev server is rebuilding; skip it.
         }
+        return null;
+    }));
+    for (const result of results) {
+        if (result && snippets.length < 6)
+            snippets.push(result);
     }
     return snippets.join("\n\n---\n\n");
 }
@@ -122,86 +141,93 @@ function extractLocalAgentText(raw, provider) {
     }
     return texts.at(-1) || raw;
 }
-/** Truncate a detail string to a readable length. */
 function snippet(value, max = 80) {
     const s = String(value ?? "").trim().replace(/\s+/g, " ");
     return s.length > max ? `${s.slice(0, max)}…` : s;
 }
+function progressEvent(message, detail) {
+    const value = detail == null ? "" : String(detail).trim();
+    return value ? { message, detail: value } : { message };
+}
 function progressFromLine(raw, provider) {
     try {
         const event = JSON.parse(raw);
         const item = event.item;
         if (provider === "claude-code") {
             if (event.type === "system")
-                return "Claude Code connected";
+                return progressEvent("Claude Code connected");
             // tool_use blocks inside assistant messages
             const toolBlock = event.message?.content?.find?.((p) => p.type === "tool_use");
             if (toolBlock) {
                 const toolName = toolBlock.name || "tool";
                 const inp = toolBlock.input;
                 const detail = inp?.file_path ?? inp?.path ?? inp?.command ?? inp?.query ?? inp?.url ?? "";
-                return detail
+                return progressEvent(detail
                     ? `Claude Code · ${toolName}  ${snippet(detail)}`
-                    : `Claude Code · ${toolName}`;
+                    : `Claude Code · ${toolName}`, detail);
             }
             // thinking blocks inside assistant messages
             const thinkBlock = event.message?.content?.find?.((p) => p.type === "thinking");
             if (thinkBlock?.thinking) {
-                return `Claude Code · ${snippet(thinkBlock.thinking, 100)}`;
+                return progressEvent(`Claude Code · ${snippet(thinkBlock.thinking)}`, thinkBlock.thinking);
             }
             // top-level tool event fields (stream-json verbose format)
             const tool = event.tool_name || event.name || event.tool?.name;
             if (tool) {
                 const inp = event.tool_input;
                 const detail = inp?.file_path ?? inp?.path ?? inp?.command ?? inp?.query ?? inp?.url ?? "";
-                return detail
+                return progressEvent(detail
                     ? `Claude Code · ${tool}  ${snippet(detail)}`
-                    : `Claude Code · ${tool}`;
+                    : `Claude Code · ${tool}`, detail);
+            }
+            if (event.type === "result" || event.result) {
+                return progressEvent("Claude Code · preparing the proposal");
             }
-            if (event.type === "result" || event.result)
-                return "Claude Code · preparing the proposal";
             if (event.type === "assistant")
-                return "Claude Code · reasoning about the change";
+                return progressEvent("Claude Code · reasoning about the change");
         }
         else if (provider === "codex") {
             const type = item?.type || event.type || "";
             if (type === "command_execution" || type === "command_execution_output") {
                 const cmd = item?.command || event.command || "";
-                return cmd ? `Codex · Bash  ${snippet(cmd)}` : "Codex · running a command";
+                return progressEvent(cmd ? `Codex · Bash  ${snippet(cmd)}` : "Codex · running a command", cmd);
             }
             if (type === "file_read" || type === "read_file") {
                 const fp = item?.path || event.path || "";
-                return fp ? `Codex · Read  ${snippet(fp)}` : "Codex · reading a file";
+                return progressEvent(fp ? `Codex · Read  ${snippet(fp)}` : "Codex · reading a file", fp);
+            }
+            if (type === "agent_message" || type === "message") {
+                return progressEvent("Codex · drafting the proposal");
             }
-            if (type === "agent_message" || type === "message")
-                return "Codex · drafting the proposal";
             if (type === "reasoning") {
                 const text = item?.content || event.content || "";
-                return text ? `Codex · ${snippet(text, 100)}` : "Codex · reasoning";
+                return progressEvent(text ? `Codex · ${snippet(text)}` : "Codex · reasoning", text);
+            }
+            if (type === "turn.started" || type === "turn_start") {
+                return progressEvent("Codex · starting a turn");
+            }
+            if (type === "turn.completed" || type === "turn_complete") {
+                return progressEvent("Codex · preparing the proposal");
             }
-            if (type === "turn.started" || type === "turn_start")
-                return "Codex · starting a turn";
-            if (type === "turn.completed" || type === "turn_complete")
-                return "Codex · preparing the proposal";
         }
         else if (provider === "opencode") {
             const part = event.part;
             if (event.type === "step-start")
-                return "OpenCode · starting a step";
+                return progressEvent("OpenCode · starting a step");
             if (part?.type === "tool") {
                 const toolName = part.tool || "tool";
                 const inp = part.input;
                 const detail = inp?.file_path ?? inp?.path ?? inp?.command ?? inp?.query ?? inp?.url ?? "";
-                return detail
+                return progressEvent(detail
                     ? `OpenCode · ${toolName}  ${snippet(detail)}`
-                    : `OpenCode · ${toolName}`;
+                    : `OpenCode · ${toolName}`, detail);
             }
             if (part?.type === "text") {
                 const text = part.text || "";
-                return text ? `OpenCode · ${snippet(text, 100)}` : "OpenCode · drafting the response";
+                return progressEvent(text ? `OpenCode · ${snippet(text)}` : "OpenCode · drafting the response", text);
             }
             if (event.type === "step-finish")
-                return "OpenCode · finalizing the response";
+                return progressEvent("OpenCode · finalizing the response");
         }
     }
     catch {
@@ -253,7 +279,7 @@ async function proposeWithLocalAgent(cwd, instruction, context, config, signal,
             stdout += `${line}\n`;
             const progress = progressFromLine(line, config.provider);
             if (progress)
-                onProgress?.(progress);
+                onProgress?.(progress.message, progress.detail);
         }
     };
     child.stdout.on("data", consume);
@@ -273,7 +299,7 @@ async function proposeWithLocalAgent(cwd, instruction, context, config, signal,
         stdout += pending;
         const progress = progressFromLine(pending, config.provider);
         if (progress)
-            onProgress?.(progress);
+            onProgress?.(progress.message, progress.detail);
     }
     if (exitCode !== 0)
         throw new Error(localAgentError(command, stderr, exitCode));
@@ -360,7 +386,7 @@ async function answerQuestion(cwd, input, config, signal, onProgress) {
                 output += `${line}\n`;
                 const progress = progressFromLine(line, config.provider);
                 if (progress)
-                    onProgress?.(progress);
+                    onProgress?.(progress.message, progress.detail);
             }
         };
         child.stdout.on("data", consume);
@@ -371,8 +397,12 @@ async function answerQuestion(cwd, input, config, signal, onProgress) {
             child.once("error", reject);
             child.once("close", (status) => resolve(status ?? 1));
         });
-        if (pending.trim())
+        if (pending.trim()) {
             output += pending;
+            const progress = progressFromLine(pending, config.provider);
+            if (progress)
+                onProgress?.(progress.message, progress.detail);
+        }
         if (code !== 0)
             throw new Error(localAgentError(command, stderr, code));
         return extractLocalAgentText(output, config.provider).trim();

package/dist/cli/bridge.d.ts

@@ -136,6 +136,7 @@ export type ServerBridgeMessage = {
     type: "agent_status";
     status: "thinking" | "working" | "review" | "error" | "stopped";
     message: string;
+    detail?: string;
     changes?: SourceChange[];
 } | {
     type: "assistant_message";

package/dist/cli/bridge.js

@@ -65,13 +65,30 @@ function occurrenceCount(content, needle) {
         from = index + needle.length;
     }
 }
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function whitespaceEquivalentRange(content, oldString) {
+    const trimmed = oldString.trim();
+    if (!trimmed)
+        return null;
+    const pattern = trimmed.split(/\s+/).map(escapeRegExp).join("\\s+");
+    const matches = Array.from(content.matchAll(new RegExp(pattern, "g")));
+    if (matches.length !== 1 || matches[0].index === undefined)
+        return null;
+    const start = matches[0].index;
+    return { start, end: start + matches[0][0].length };
+}
 function prepareChange(content, change) {
     const lineEnding = fileLineEnding(content);
     const oldString = withLineEnding(change.oldString, lineEnding);
     const newString = withLineEnding(change.newString, lineEnding);
     const matches = occurrenceCount(content, oldString);
     if (matches === 0) {
-        throw new Error(`Could not safely apply ${change.filePath}. The source changed after the suggestion was generated.`);
+        const range = whitespaceEquivalentRange(content, oldString);
+        if (range)
+            return { ...range, oldString: content.slice(range.start, range.end), newString };
+        throw new Error(`Could not safely apply ${change.filePath}. The source changed after the suggestion was generated. Regenerate the review so it uses the current source.`);
     }
     if (matches > 1) {
         throw new Error(`Could not safely apply ${change.filePath}. The selected code is not unique (${matches} matches).`);
@@ -244,9 +261,9 @@ 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 };
-                void (0, agent_1.answerQuestion)(cwd, { question: msg.question, context: msg.context, element: msg.element, messages: msg.messages }, selectedConfig, controller.signal, (message) => {
+                void (0, agent_1.answerQuestion)(cwd, { 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", status: "working", message }));
+                        socket.send(JSON.stringify({ type: "agent_status", status: "working", message, detail }));
                 }).then((answer) => {
                     if (!controller.signal.aborted)
                         socket.send(JSON.stringify({ type: "assistant_message", message: answer }));
@@ -275,9 +292,9 @@ 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 };
-                void (0, agent_1.proposeChanges)(cwd, msg, selectedConfig, controller.signal, (message) => {
+                void (0, agent_1.proposeChanges)(cwd, msg, selectedConfig, controller.signal, (message, detail) => {
                     if (!controller.signal.aborted && socket.readyState === socket.OPEN) {
-                        socket.send(JSON.stringify({ type: "agent_status", status: "working", message }));
+                        socket.send(JSON.stringify({ type: "agent_status", status: "working", message, detail }));
                     }
                 })
                     .then((proposal) => {
@@ -320,9 +337,9 @@ function startBridge(cwd = process.cwd(), collabConfig = null, bridgePort = expo
                 activeAgentController?.abort();
                 activeAgentController = controller;
                 socket.send(JSON.stringify({ type: "agent_status", status: "thinking", message: "Generating a commit message…" }));
-                void getGitState(cwd).then((git) => (0, agent_1.generateCommitMessage)(cwd, git.status || [], selectedConfig, controller.signal, (message) => {
+                void getGitState(cwd).then((git) => (0, agent_1.generateCommitMessage)(cwd, git.status || [], selectedConfig, controller.signal, (message, detail) => {
                     if (!controller.signal.aborted && socket.readyState === socket.OPEN)
-                        socket.send(JSON.stringify({ type: "agent_status", status: "working", message }));
+                        socket.send(JSON.stringify({ type: "agent_status", status: "working", message, detail }));
                 })).then((message) => {
                     if (!controller.signal.aborted)
                         socket.send(JSON.stringify({ type: "git_commit_message", message }));

package/dist/overlay.js

@@ -9830,6 +9830,16 @@
       background: rgba(242, 139, 130, 0.12);
     }
 
+    .lasso-chat-message code {
+      padding: 1px 4px;
+      border-radius: 3px;
+      background: var(--lo-surface-2);
+      color: #a5b4fc;
+      font-family: var(--lo-font-mono);
+      font-size: 0.92em;
+      white-space: pre-wrap;
+    }
+
     /* CLI / Terminal Thinking Mode */
     .lasso-agent-status {
       display: flex;
@@ -9906,6 +9916,43 @@
       color: #f87171;
     }
 
+    .lasso-agent-status-badge.complete {
+      background: rgba(16, 185, 129, 0.16);
+      color: #34d399;
+    }
+
+    .lasso-agent-log-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px 5px;
+      border: 0;
+      border-radius: 4px;
+      background: transparent;
+      color: #64748b;
+      font: inherit;
+      font-size: 9.5px;
+      cursor: pointer;
+    }
+
+    .lasso-agent-log-toggle:hover {
+      background: rgba(255, 255, 255, 0.06);
+      color: #cbd5e1;
+    }
+
+    .lasso-agent-log-toggle[hidden] {
+      display: none;
+    }
+
+    .lasso-agent-log-chevron {
+      display: inline-block;
+      transition: transform 140ms ease;
+    }
+
+    .lasso-agent-log-toggle[aria-expanded="true"] .lasso-agent-log-chevron {
+      transform: rotate(180deg);
+    }
+
     .lasso-agent-status-line {
       display: flex;
       align-items: center;
@@ -9921,13 +9968,52 @@
     }
 
     .lasso-agent-status-message {
+      flex: 1;
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    /* The status line is the single latest activity message. */
     .lasso-agent-log {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      max-height: 180px;
+      margin-top: 8px;
+      padding-top: 7px;
+      border-top: 1px solid rgba(255, 255, 255, 0.06);
+      overflow: auto;
+      color: #64748b;
+      font-size: 10px;
+    }
+
+    .lasso-agent-log[hidden] {
+      display: none;
+    }
+
+    .lasso-agent-log-line {
+      display: flex;
+      gap: 5px;
+      line-height: 1.45;
+    }
+
+    .lasso-agent-log-prefix {
+      flex: 0 0 auto;
+      color: #475569;
+    }
+
+    .lasso-agent-log-text {
+      min-width: 0;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
+    .lasso-agent-status[data-status="complete"] .lasso-agent-status-line {
+      animation: none;
+    }
+
+    .lasso-agent-status[data-status="complete"] .lasso-agent-cursor {
       display: none;
     }
 
@@ -9945,40 +10031,11 @@
       50% { opacity: 0; }
     }
 
-    .lasso-agent-log {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      margin-top: 6px;
-      max-height: 80px;
-      overflow-y: auto;
-      font-size: 10px;
-      color: #64748b;
-    }
-
-    .lasso-agent-log-line {
-      display: flex;
-      gap: 5px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      animation: lasso-agent-log-in 180ms ease-out both;
-    }
-
-    .lasso-agent-log-prefix {
-      color: #475569;
-    }
-
     @keyframes lasso-agent-line-pulse {
       0%, 100% { opacity: .72; }
       50% { opacity: 1; }
     }
 
-    @keyframes lasso-agent-log-in {
-      from { opacity: 0; transform: translateY(3px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-
     .lasso-prompt-actions {
       display: flex;
       align-items: center;
@@ -12002,6 +12059,30 @@
   };
   var terminal_default = data4;
 
+  // src/overlay/notifications.ts
+  var permissionRequest = null;
+  function requestAgentNotificationPermission() {
+    if (typeof window === "undefined" || !("Notification" in window)) return;
+    if (Notification.permission !== "default" || permissionRequest) return;
+    permissionRequest = Notification.requestPermission().finally(() => {
+      permissionRequest = null;
+    });
+  }
+  async function notifyAgent(title, body) {
+    if (typeof window === "undefined" || !("Notification" in window)) return;
+    let permission = Notification.permission;
+    if (permission === "default") permission = await (permissionRequest || Notification.requestPermission());
+    if (permission !== "granted") return;
+    try {
+      const notification = new Notification(title, { body: body.slice(0, 240) });
+      notification.onclick = () => {
+        window.focus();
+        notification.close();
+      };
+    } catch {
+    }
+  }
+
   // node_modules/.pnpm/engine.io-parser@5.2.3/node_modules/engine.io-parser/build/esm/commons.js
   var PACKET_TYPES = /* @__PURE__ */ Object.create(null);
   PACKET_TYPES["open"] = "0";
@@ -18095,6 +18176,9 @@
   var agentStatusElement = null;
   var agentStatusMessage = null;
   var agentLogElement = null;
+  var agentLogToggle = null;
+  var agentLogLines = [];
+  var agentLogExpanded = false;
   var reviewPanel = null;
   var modelBtn = null;
   var modelName = null;
@@ -18153,13 +18237,17 @@
           </div>
           <span class="lasso-agent-status-kicker">lasso-agent</span>
           <span class="lasso-agent-status-badge">active</span>
+          <button class="lasso-agent-log-toggle" type="button" aria-label="Show agent activity" aria-expanded="false" hidden>
+            <span>Activity</span>
+            <span class="lasso-agent-log-chevron">\u2304</span>
+          </button>
         </div>
         <div class="lasso-agent-status-line">
           <span class="lasso-agent-terminal-prompt">\u276F</span>
           <span class="lasso-agent-status-message"></span>
           <span class="lasso-agent-cursor"></span>
         </div>
-        <div class="lasso-agent-log" aria-label="Agent activity"></div>
+        <div class="lasso-agent-log" aria-label="Agent activity" hidden></div>
       </div>
 
       <textarea class="lasso-prompt-input" placeholder="Ask anything about this element\u2026" rows="1"></textarea>
@@ -18213,9 +18301,15 @@
     agentStatusElement = el.querySelector(".lasso-agent-status");
     agentStatusMessage = el.querySelector(".lasso-agent-status-message");
     agentLogElement = el.querySelector(".lasso-agent-log");
+    agentLogToggle = el.querySelector(".lasso-agent-log-toggle");
     modelBtn = el.querySelector(".lasso-prompt-model");
     modelName = el.querySelector(".lasso-prompt-model-name");
     modelMenu = el.querySelector(".lasso-prompt-model-menu");
+    agentLogToggle.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setAgentLogExpanded(!agentLogExpanded);
+    });
     const rev = document.createElement("div");
     rev.className = "lasso-review";
     rev.hidden = true;
@@ -18367,6 +18461,7 @@
     });
     rev.querySelector(".lasso-review-apply").addEventListener("click", () => {
       if (!state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN || !state.pendingChanges.length) return;
+      requestAgentNotificationPermission();
       state.bridgeSocket.send(JSON.stringify({ type: "apply", changes: state.pendingChanges }));
       appendChat("assistant", "Applying the reviewed change\u2026");
     });
@@ -18478,11 +18573,74 @@
       return {};
     }
   }
+  async function captureElementScreenshot(el) {
+    const options = {
+      backgroundColor: null,
+      useCORS: true,
+      logging: false,
+      scale: Math.min(window.devicePixelRatio || 1, 1),
+      ignoreElements: (node) => node.id === "lasso-root" || Boolean(node.closest?.("#lasso-root"))
+    };
+    try {
+      const canvas = await (0, import_html2canvas.default)(el, options);
+      return { element: canvas.toDataURL("image/jpeg", 0.78) };
+    } catch (error) {
+      console.warn("[lasso] element screenshot unavailable", error);
+      return {};
+    }
+  }
+  function setAgentLogExpanded(expanded) {
+    agentLogExpanded = expanded && agentLogLines.length > 0;
+    if (agentLogElement) agentLogElement.hidden = !agentLogExpanded;
+    if (agentLogToggle) {
+      agentLogToggle.hidden = agentLogLines.length === 0;
+      agentLogToggle.setAttribute("aria-expanded", String(agentLogExpanded));
+      agentLogToggle.setAttribute("aria-label", agentLogExpanded ? "Hide agent activity" : "Show agent activity");
+    }
+  }
+  function clearAgentLog() {
+    agentLogLines = [];
+    agentLogExpanded = false;
+    if (agentLogElement) {
+      agentLogElement.replaceChildren();
+      agentLogElement.hidden = true;
+    }
+    if (agentLogToggle) {
+      agentLogToggle.hidden = true;
+      agentLogToggle.setAttribute("aria-expanded", "false");
+      agentLogToggle.setAttribute("aria-label", "Show agent activity");
+    }
+    if (agentStatusElement) {
+      agentStatusElement.hidden = true;
+      agentStatusElement.dataset.status = "idle";
+    }
+  }
+  function appendAgentLog(message) {
+    const value2 = message.trim();
+    if (!value2) return;
+    const previous = agentLogLines[agentLogLines.length - 1];
+    if (previous === value2) return;
+    agentLogLines.push(value2);
+    if (agentLogElement) {
+      const line = document.createElement("div");
+      line.className = "lasso-agent-log-line";
+      const prefix = document.createElement("span");
+      prefix.className = "lasso-agent-log-prefix";
+      prefix.textContent = "\u203A";
+      const text = document.createElement("span");
+      text.className = "lasso-agent-log-text";
+      text.textContent = value2;
+      line.append(prefix, text);
+      agentLogElement.append(line);
+      if (agentLogExpanded) agentLogElement.scrollTop = agentLogElement.scrollHeight;
+    }
+    if (agentLogToggle) agentLogToggle.hidden = false;
+  }
   function appendChat(role, text) {
     const thread = promptEl?.querySelector(".lasso-chat-thread");
     if (!thread || !text.trim()) return;
     const previous = thread.lastElementChild;
-    if (previous?.textContent === text && previous.classList.contains(role)) return;
+    if (previous?.classList.contains(role) && previous.dataset.rawText === text) return;
     state.chatHistory.push({
       role,
       content: text,
@@ -18491,15 +18649,36 @@
     });
     const item = document.createElement("div");
     item.className = `lasso-chat-message ${role}`;
-    item.textContent = text;
+    item.dataset.rawText = text;
+    renderChatText(item, text);
     thread.appendChild(item);
     while (thread.children.length > 6) thread.firstElementChild?.remove();
     thread.scrollTop = thread.scrollHeight;
   }
-  function setAgentStatus(status, message) {
+  function renderChatText(container, text) {
+    const codePattern = /(`+)([\s\S]*?)\1/g;
+    let lastIndex = 0;
+    for (const match of text.matchAll(codePattern)) {
+      const index = match.index ?? 0;
+      if (index > lastIndex) {
+        container.append(document.createTextNode(text.slice(lastIndex, index)));
+      }
+      const code = document.createElement("code");
+      code.textContent = match[2] ?? "";
+      container.append(code);
+      lastIndex = index + match[0].length;
+    }
+    if (lastIndex < text.length) {
+      container.append(document.createTextNode(text.slice(lastIndex)));
+    }
+  }
+  function setAgentStatus(status, message, detail) {
     if (!agentStatusElement || !agentStatusMessage || !sendButton) return;
-    if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (status === "thinking" || status === "working")) return;
-    agentStatusElement.hidden = status === "review" || status === "error" || status === "stopped";
+    const logMessage = detail?.trim() || message.trim();
+    const lastLog = agentLogLines[agentLogLines.length - 1];
+    if (agentStatusElement.dataset.status === status && agentStatusMessage.textContent === message && (status === "thinking" || status === "working") && (!logMessage || lastLog === logMessage)) return;
+    appendAgentLog(logMessage);
+    agentStatusElement.hidden = status === "review";
     agentStatusElement.dataset.status = status;
     agentStatusMessage.textContent = message;
     const badgeEl = agentStatusElement.querySelector(".lasso-agent-status-badge");
@@ -18508,12 +18687,6 @@
       badgeEl.className = `lasso-agent-status-badge ${status}`;
     }
     state.agentRunning = status === "thinking" || status === "working";
-    if (state.agentRunning && agentLogElement) {
-      const line = document.createElement("div");
-      line.className = "lasso-agent-log-line";
-      line.innerHTML = `<span class="lasso-agent-log-prefix">\u203A</span> <span class="lasso-agent-log-text">${escapeHtml4(message)}</span>`;
-      agentLogElement.replaceChildren(line);
-    }
     sendButton.classList.toggle("loading", state.agentRunning);
     if (stopButton) stopButton.hidden = !state.agentRunning;
     if (promptInput) promptInput.disabled = state.agentRunning;
@@ -18528,11 +18701,6 @@
       appendChat(status === "error" ? "error" : "assistant", message);
     }
   }
-  function escapeHtml4(text) {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
   function syncSendButtonState() {
     if (!promptInput || !sendButton) return;
     const hasInstruction = Boolean(promptInput.value.trim()) || sendButton.dataset.state === "retry" && Boolean(state.lastInstruction?.trim());
@@ -18541,11 +18709,19 @@
   }
   function resetAgentState() {
     state.agentRunning = false;
+    const hasLog = agentLogLines.length > 0;
     if (agentStatusElement) {
-      agentStatusElement.hidden = true;
-      agentStatusElement.dataset.status = "idle";
+      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";
+      }
     }
-    if (agentLogElement) agentLogElement.replaceChildren();
     if (sendButton) {
       sendButton.classList.remove("loading");
       sendButton.dataset.state = "idle";
@@ -18641,6 +18817,8 @@
       promptInput.focus();
       return;
     }
+    clearAgentLog();
+    requestAgentNotificationPermission();
     const isQuestion = /^(hi|hello|hey|thanks|thank you|what|why|how|when|where|who|which|is|are|does|do|can|could|would|should|tell me|explain|describe)\b/i.test(instruction) || /\?$/.test(instruction);
     const isExplicitEdit = /\b(change|edit|update|make|add|remove|delete|fix|replace|turn|convert|style|restyle|move|rename|implement|build|create|increase|decrease|hide|show|align|resize|set|enable|disable)\b/i.test(instruction);
     const wantsAnswer = isQuestion && !/\b(can|could|would|please)\s+you\s+(change|edit|update|add|fix|make)\b/i.test(instruction) || !isExplicitEdit && !isQuestion;
@@ -18672,7 +18850,8 @@
     const attributes = Object.fromEntries(
       Array.from(state.selected.attributes).map((attr) => [attr.name, attr.value])
     );
-    const screenshots = await state.screenshotPromise;
+    const needsVisualContext = /\b(look|visual|appearance|color|colour|background|image|icon|spacing|layout|position|align|responsive|style|restyle|font|size)\b/i.test(instruction);
+    const screenshots = needsVisualContext && state.selected ? await captureElementScreenshot(state.selected) : await state.screenshotPromise;
     state.bridgeSocket.send(
       JSON.stringify({
         type: wantsAnswer ? "ask" : "edit",
@@ -18725,6 +18904,7 @@
   }
   function openPromptForSelected(selected) {
     if (!promptEl || !promptElement) return;
+    clearAgentLog();
     promptElement.textContent = getElementLabel(selected);
     positionPrompt(selected);
     promptEl.classList.add("visible");
@@ -19547,7 +19727,7 @@
       return { code, badge, badgeClass, path: filePath, dir, name };
     });
   }
-  function escapeHtml5(text) {
+  function escapeHtml4(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
   function buildGitPanel() {
@@ -19802,9 +19982,9 @@
           (f) => `
         <div class="lasso-git-file-row">
           <span class="lasso-git-file-badge ${f.badgeClass}" title="${f.code}">${f.badge}</span>
-          <span class="lasso-git-file-path" title="${escapeHtml5(f.path)}">
-            ${f.dir ? `<span class="lasso-git-file-dir">${escapeHtml5(f.dir)}</span>` : ""}
-            <span class="lasso-git-file-name">${escapeHtml5(f.name)}</span>
+          <span class="lasso-git-file-path" title="${escapeHtml4(f.path)}">
+            ${f.dir ? `<span class="lasso-git-file-dir">${escapeHtml4(f.dir)}</span>` : ""}
+            <span class="lasso-git-file-name">${escapeHtml4(f.name)}</span>
           </span>
         </div>
       `
@@ -20174,9 +20354,10 @@
             setGeneratedCommitMessage(message.message || "", message.error);
           }
           if (message.type === "agent_status" && message.status && message.message) {
-            setAgentStatus(message.status, message.message);
+            setAgentStatus(message.status, message.message, message.detail);
             setDragCardStatus(message.status, message.message);
             if (message.status === "review" && message.changes?.length) {
+              void notifyAgent("Review requested", message.message);
               state.pendingChanges = message.changes;
               state.changesHistory.push({
                 summary: message.message,
@@ -20187,10 +20368,12 @@
             }
           }
           if (message.type === "assistant_message" && message.message) {
+            void notifyAgent("Agent complete", message.message);
             appendChat("assistant", message.message);
             resetAgentState();
           }
           if (message.type === "applied" || message.type === "undone") {
+            void notifyAgent(message.type === "applied" ? "Changes applied" : "Change undone", message.message || "Done.");
             appendChat("assistant", message.message || "Done.");
             releaseHeldLock();
             if (state.collabSocket?.connected && state.collabJoined) {
@@ -20290,7 +20473,7 @@
         state.selectionId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
         state.chatHistory = [];
         state.changesHistory = [];
-        state.screenshotPromise = captureScreenshots(target);
+        state.screenshotPromise = Promise.resolve({});
         dom.hoverBox.style.display = "none";
         updateSelectedVisual2();
         openPromptForSelected(target);

package/package.json

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