@lasso-ai/cli 1.3.1 → 1.3.3

package/dist/overlay.js

@@ -7837,7 +7837,7 @@
     if (!name) return "?";
     return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() || "").join("") || "?";
   }
-  function timeAgo(value2) {
+  function timeAgo2(value2) {
     if (!value2) return "";
     const ms = new Date(value2).getTime();
     if (!Number.isFinite(ms)) return "";
@@ -7945,6 +7945,8 @@
     collabHeartbeat = null;
     activityTimer = null;
     spotlightTimer = null;
+    // Timeline/Snapshot History
+    timelineSnapshots = [];
     constructor() {
       const saved = storedModelId();
       if (saved) {
@@ -10548,6 +10550,276 @@
       background: var(--lo-primary-hover);
     }
 
+    .lasso-review-history {
+      margin-right: auto;
+      font-size: 11px;
+      color: var(--lo-text-2);
+    }
+
+    /* ==========================================================
+       CONFLICT PANEL
+       ========================================================== */
+
+    .lasso-conflict {
+      position: fixed;
+      width: min(540px, calc(100vw - 24px));
+      max-height: min(400px, calc(100vh - 24px));
+      overflow: auto;
+      padding: 18px;
+      border: 1px solid #f59e0b;
+      border-radius: var(--lo-radius-xl);
+      background: rgba(30, 27, 22, 0.98);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      color: var(--lo-text);
+      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.2);
+      pointer-events: auto;
+      font-family: inherit;
+      z-index: 25;
+    }
+
+    .lasso-conflict[hidden] {
+      display: none;
+    }
+
+    .lasso-conflict-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 14px;
+    }
+
+    .lasso-conflict-title {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 700;
+      color: #f59e0b;
+    }
+
+    .lasso-conflict-subtitle {
+      margin: 4px 0 0;
+      color: var(--lo-text-2);
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .lasso-conflict-close {
+      border: 0;
+      background: transparent;
+      color: var(--lo-text-3);
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .lasso-conflict-close:hover {
+      color: var(--lo-text);
+    }
+
+    .lasso-conflict-file {
+      margin-top: 10px;
+      overflow: hidden;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-md);
+    }
+
+    .lasso-conflict-file-name {
+      padding: 8px 10px;
+      background: rgba(245, 158, 11, 0.1);
+      color: #f59e0b;
+      font: 600 11px/1.2 var(--lo-font-mono);
+    }
+
+    .lasso-conflict-details {
+      padding: 10px;
+      font-size: 11px;
+      color: var(--lo-text-2);
+    }
+
+    .lasso-conflict-hash {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-family: var(--lo-font-mono);
+    }
+
+    .lasso-conflict-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 16px;
+    }
+
+    .lasso-conflict-actions button {
+      min-height: 34px;
+      padding: 0 14px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-md);
+      background: var(--lo-surface-2);
+      color: var(--lo-text);
+      font: 600 12px/1 inherit;
+      cursor: pointer;
+      transition: background 120ms ease, transform 120ms ease;
+    }
+
+    .lasso-conflict-actions button:hover {
+      background: var(--lo-surface-hover);
+      transform: translateY(-1px);
+    }
+
+    .lasso-conflict-force {
+      border-color: #f59e0b;
+      background: rgba(245, 158, 11, 0.1);
+      color: #f59e0b;
+    }
+
+    .lasso-conflict-force:hover {
+      background: rgba(245, 158, 11, 0.2);
+    }
+
+    /* ==========================================================
+       TIMELINE PANEL
+       ========================================================== */
+
+    .lasso-timeline {
+      position: fixed;
+      width: min(540px, calc(100vw - 24px));
+      max-height: min(620px, calc(100vh - 24px));
+      overflow: auto;
+      padding: 18px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-xl);
+      background: rgba(22, 23, 27, 0.98);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      color: var(--lo-text);
+      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
+      pointer-events: auto;
+      font-family: inherit;
+      z-index: 30;
+    }
+
+    .lasso-timeline[hidden] {
+      display: none;
+    }
+
+    .lasso-timeline-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 14px;
+    }
+
+    .lasso-timeline-title {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 700;
+    }
+
+    .lasso-timeline-subtitle {
+      margin: 4px 0 0;
+      color: var(--lo-text-2);
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .lasso-timeline-close {
+      border: 0;
+      background: transparent;
+      color: var(--lo-text-3);
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .lasso-timeline-close:hover {
+      color: var(--lo-text);
+    }
+
+    .lasso-timeline-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .lasso-timeline-empty {
+      padding: 20px;
+      text-align: center;
+      color: var(--lo-text-2);
+      font-size: 13px;
+    }
+
+    .lasso-timeline-item {
+      padding: 12px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-md);
+      background: var(--lo-surface-2);
+    }
+
+    .lasso-timeline-item-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+
+    .lasso-timeline-item-summary {
+      font-weight: 600;
+      font-size: 13px;
+    }
+
+    .lasso-timeline-item-time {
+      font-size: 11px;
+      color: var(--lo-text-2);
+    }
+
+    .lasso-timeline-item-files {
+      font-size: 11px;
+      color: var(--lo-text-2);
+      margin-bottom: 8px;
+    }
+
+    .lasso-timeline-item-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .lasso-timeline-item button {
+      padding: 6px 12px;
+      border: 1px solid var(--lo-border);
+      border-radius: var(--lo-radius-sm);
+      background: var(--lo-surface-3);
+      color: var(--lo-text);
+      font-size: 11px;
+      cursor: pointer;
+      transition: background 120ms ease;
+    }
+
+    .lasso-timeline-item button:hover {
+      background: var(--lo-surface-hover);
+    }
+
+    .lasso-timeline-restore {
+      border-color: var(--lo-primary);
+      background: rgba(129, 201, 149, 0.1);
+      color: #86efac;
+    }
+
+    .lasso-timeline-restore:hover {
+      background: rgba(129, 201, 149, 0.2);
+    }
+
+    .lasso-timeline-delete {
+      border-color: #f28b82;
+      background: rgba(242, 139, 130, 0.1);
+      color: #f28b82;
+    }
+
+    .lasso-timeline-delete:hover {
+      background: rgba(242, 139, 130, 0.2);
+    }
+
     /* ==========================================================
        GIT PANEL (Workspace Git Management)
        ========================================================== */
@@ -18323,7 +18595,7 @@
       author.textContent = msg.author?.name || "Unknown";
       const time = document.createElement("span");
       time.className = "lasso-pin-thread-time";
-      time.textContent = timeAgo(msg.createdAt);
+      time.textContent = timeAgo2(msg.createdAt);
       row.append(av, author, time);
       const body = document.createElement("div");
       body.className = "lasso-pin-thread-body";
@@ -21596,7 +21868,22 @@
               if (task) state.changesHistory = task.changesHistory.map((entry) => ({ ...entry, changes: entry.changes.map((change) => ({ ...change })) }));
               state.pendingChanges = [...message.changes];
               showReview(message.changes, message.message);
+            } else if (message.status === "error" || message.status === "stopped") {
+              if (taskId2 === state.promptTaskId) {
+                closeReview();
+              }
+            }
+          }
+          if (message.type === "conflict_detected" && message.conflicts && message.taskId) {
+            const taskId2 = message.taskId;
+            if (taskId2 === state.promptTaskId) {
+              showConflict(message.conflicts, message.message);
             }
+            void notifyAgent("Conflict detected", message.message);
+          }
+          if (message.type === "timeline" && message.snapshots) {
+            state.timelineSnapshots = message.snapshots;
+            showTimeline();
           }
           if (message.type === "assistant_message" && message.message) {
             const taskId2 = message.taskId;
@@ -21640,7 +21927,7 @@
 ${errors.slice(0, 5).join("\n")}${errors.length > 5 ? `
 ...and ${errors.length - 5} more errors` : ""}
 
-You may need to manually fix these errors or undo the change.`;
+The agent is automatically attempting to fix the build errors...`;
               } else if (passed) {
                 result = `${message.message}
 
@@ -21661,6 +21948,7 @@ You may need to manually fix these errors or undo the change.`;
             }
             if (isPromptTask) {
               closeReview();
+              closeConflict();
               resetDrag(false);
               state.pendingChanges = [];
             }
@@ -21918,6 +22206,8 @@ You may need to manually fix these errors or undo the change.`;
   var reviewPanel = null;
   var agentPromptPanel = null;
   var agentPromptTaskId = null;
+  var conflictPanel = null;
+  var timelinePanel = null;
   var modelBtn = null;
   var modelName = null;
   var modelMenu = null;
@@ -22137,6 +22427,46 @@ You may need to manually fix these errors or undo the change.`;
   `;
     dom.shadow.appendChild(rev);
     reviewPanel = rev;
+    const conflict = document.createElement("div");
+    conflict.className = "lasso-conflict";
+    conflict.hidden = true;
+    conflict.innerHTML = `
+    <div class="lasso-conflict-header">
+      <div>
+        <h3 class="lasso-conflict-title">\u26A0\uFE0F Source conflict detected</h3>
+        <p class="lasso-conflict-subtitle">The file(s) have changed since the suggestion was generated.</p>
+      </div>
+      <button class="lasso-conflict-close" type="button" aria-label="Close conflict panel">\xD7</button>
+    </div>
+    <div class="lasso-conflict-files"></div>
+    <div class="lasso-conflict-actions">
+      <button class="lasso-conflict-retry" type="button">Retry with current content</button>
+      <button class="lasso-conflict-rebase" type="button">Rebase changes</button>
+      <button class="lasso-conflict-force" type="button">Force apply</button>
+    </div>
+  `;
+    dom.shadow.appendChild(conflict);
+    conflictPanel = conflict;
+    conflict.querySelector(".lasso-conflict-close").addEventListener("click", closeConflict2);
+    conflict.querySelector(".lasso-conflict-retry").addEventListener("click", () => resolveConflict("retry"));
+    conflict.querySelector(".lasso-conflict-rebase").addEventListener("click", () => resolveConflict("rebase"));
+    conflict.querySelector(".lasso-conflict-force").addEventListener("click", () => resolveConflict("force"));
+    const timeline = document.createElement("div");
+    timeline.className = "lasso-timeline";
+    timeline.hidden = true;
+    timeline.innerHTML = `
+    <div class="lasso-timeline-header">
+      <div>
+        <h3 class="lasso-timeline-title">Change history</h3>
+        <p class="lasso-timeline-subtitle">Restore previous states of your project</p>
+      </div>
+      <button class="lasso-timeline-close" type="button" aria-label="Close timeline">\xD7</button>
+    </div>
+    <div class="lasso-timeline-list"></div>
+  `;
+    dom.shadow.appendChild(timeline);
+    timelinePanel = timeline;
+    timeline.querySelector(".lasso-timeline-close").addEventListener("click", closeTimeline);
     onAgentTaskSelected((task) => {
       if (task) restoreTaskPrompt(task);
       else resetPromptSession();
@@ -22292,6 +22622,16 @@ You may need to manually fix these errors or undo the change.`;
       closeReview();
       appendChat("assistant", "Kept as a proposal. Nothing was changed.", taskId2);
     });
+    const historyBtn = document.createElement("button");
+    historyBtn.type = "button";
+    historyBtn.className = "lasso-review-history";
+    historyBtn.textContent = "View history";
+    historyBtn.addEventListener("click", () => {
+      if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
+        state.bridgeSocket.send(JSON.stringify({ type: "get_timeline" }));
+      }
+    });
+    rev.querySelector(".lasso-review-actions").prepend(historyBtn);
     rev.querySelector(".lasso-review-apply").addEventListener("click", () => {
       const taskId2 = state.promptTaskId;
       if (!taskId2 || !state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN || !state.pendingChanges.length) return;
@@ -22304,6 +22644,11 @@ You may need to manually fix these errors or undo the change.`;
         activity: [...getAgentTask(taskId2)?.activity || [], "Applying accepted changes\u2026"]
       });
       appendChat("assistant", "Applying the reviewed change\u2026", taskId2);
+      const applyBtn = rev.querySelector(".lasso-review-apply");
+      if (applyBtn) {
+        applyBtn.disabled = true;
+        applyBtn.textContent = "Applying...";
+      }
     });
     return { prompt: el, review: rev };
   }
@@ -22732,6 +23077,7 @@ You may need to manually fix these errors or undo the change.`;
   }
   function hideReview() {
     if (reviewPanel) reviewPanel.hidden = true;
+    closeConflict2();
   }
   function resetPromptSession(element = state.selected) {
     state.promptTaskId = null;
@@ -22796,6 +23142,7 @@ You may need to manually fix these errors or undo the change.`;
     if (!reviewPanel) return;
     const subtitle = reviewPanel.querySelector(".lasso-review-subtitle");
     const files = reviewPanel.querySelector(".lasso-review-files");
+    const applyBtn = reviewPanel.querySelector(".lasso-review-apply");
     if (!subtitle || !files) return;
     subtitle.textContent = `${summary} ${changes.length} file${changes.length === 1 ? "" : "s"} proposed.`;
     files.replaceChildren(
@@ -22818,6 +23165,10 @@ You may need to manually fix these errors or undo the change.`;
         return file;
       })
     );
+    if (applyBtn) {
+      applyBtn.disabled = false;
+      applyBtn.textContent = "Accept & apply";
+    }
     reviewPanel.hidden = false;
     const left = Math.max(12, (window.innerWidth - Math.min(520, window.innerWidth - 24)) / 2);
     const top = Math.max(12, (window.innerHeight - Math.min(620, window.innerHeight - 24)) / 2);
@@ -22828,6 +23179,96 @@ You may need to manually fix these errors or undo the change.`;
     hideReview();
     resetAgentState();
   }
+  function showConflict(conflicts, message) {
+    if (!conflictPanel) return;
+    const subtitle = conflictPanel.querySelector(".lasso-conflict-subtitle");
+    const files = conflictPanel.querySelector(".lasso-conflict-files");
+    if (!subtitle || !files) return;
+    subtitle.textContent = message;
+    files.replaceChildren(
+      ...conflicts.map((conflict) => {
+        const file = document.createElement("div");
+        file.className = "lasso-conflict-file";
+        const name = document.createElement("div");
+        name.className = "lasso-conflict-file-name";
+        name.textContent = conflict.filePath;
+        const details = document.createElement("div");
+        details.className = "lasso-conflict-details";
+        details.innerHTML = `
+        <div class="lasso-conflict-hash">
+          <span>Expected: ${conflict.expectedHash.slice(0, 8)}...</span>
+          <span>Actual: ${conflict.actualHash.slice(0, 8)}...</span>
+        </div>
+      `;
+        file.append(name, details);
+        return file;
+      })
+    );
+    conflictPanel.hidden = false;
+    const left = Math.max(12, (window.innerWidth - Math.min(520, window.innerWidth - 24)) / 2);
+    const top = Math.max(12, (window.innerHeight - Math.min(400, window.innerHeight - 24)) / 2);
+    conflictPanel.style.left = `${left}px`;
+    conflictPanel.style.top = `${top}px`;
+  }
+  function closeConflict2() {
+    if (!conflictPanel) return;
+    conflictPanel.hidden = true;
+  }
+  function resolveConflict(action) {
+    const taskId2 = state.promptTaskId;
+    if (!taskId2 || !state.bridgeSocket || state.bridgeSocket.readyState !== WebSocket.OPEN) return;
+    state.bridgeSocket.send(JSON.stringify({
+      type: "resolve_conflict",
+      taskId: taskId2,
+      action,
+      conflicts: []
+      // Bridge will re-detect conflicts
+    }));
+    closeConflict2();
+    closeReview();
+  }
+  function showTimeline() {
+    if (!timelinePanel) return;
+    const list2 = timelinePanel.querySelector(".lasso-timeline-list");
+    if (!list2) return;
+    list2.replaceChildren(
+      ...state.timelineSnapshots.map((snapshot) => {
+        const item = document.createElement("div");
+        item.className = "lasso-timeline-item";
+        item.innerHTML = `
+        <div class="lasso-timeline-item-header">
+          <span class="lasso-timeline-item-summary">${snapshot.summary}</span>
+          <span class="lasso-timeline-item-time">${timeAgo(snapshot.createdAt)}</span>
+        </div>
+        <div class="lasso-timeline-item-files">${snapshot.files.length} file${snapshot.files.length === 1 ? "" : "s"}</div>
+        <button class="lasso-timeline-restore" type="button">Restore</button>
+        <button class="lasso-timeline-delete" type="button">Delete</button>
+      `;
+        item.querySelector(".lasso-timeline-restore").addEventListener("click", () => {
+          if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
+            state.bridgeSocket.send(JSON.stringify({ type: "restore_snapshot", snapshotId: snapshot.id }));
+          }
+        });
+        item.querySelector(".lasso-timeline-delete").addEventListener("click", () => {
+          if (state.bridgeSocket?.readyState === WebSocket.OPEN) {
+            state.bridgeSocket.send(JSON.stringify({ type: "delete_snapshot", snapshotId: snapshot.id }));
+          }
+        });
+        return item;
+      })
+    );
+    if (state.timelineSnapshots.length === 0) {
+      list2.innerHTML = `<div class="lasso-timeline-empty">No snapshots yet. Changes will be automatically saved.</div>`;
+    }
+    timelinePanel.hidden = false;
+    const left = Math.max(12, (window.innerWidth - Math.min(520, window.innerWidth - 24)) / 2);
+    const top = Math.max(12, (window.innerHeight - Math.min(620, window.innerHeight - 24)) / 2);
+    timelinePanel.style.left = `${left}px`;
+    timelinePanel.style.top = `${top}px`;
+  }
+  function closeTimeline() {
+    if (timelinePanel) timelinePanel.hidden = true;
+  }
   function positionPrompt(el) {
     if (!promptEl) return;
     const rect = el.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lasso-ai/cli",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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",
@@ -77,6 +77,7 @@
     "@iconify-json/logos": "^1.2.14",
     "@iconify/utils": "^3.1.7",
     "@lasso-ai/cli": "link:",
+    "@lasso-ai/layout-intelligence": "file:../layout-intelligence",
     "chalk": "^6.0.0",
     "commander": "^15.0.0",
     "http-proxy": "^1.18.1",