@sidecar-ai/cli 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/index.js

@@ -1430,7 +1430,8 @@ function renderWidgetHtml(title, javascript, css = "") {
     <style>
       :root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
       html, body, #root { min-height: 100%; margin: 0; background: transparent; }
-      body { color: CanvasText; }
+      html, body { overflow: auto; }
+      body { color: CanvasText; min-width: 0; }
       * { box-sizing: border-box; }
       ${css}
     </style>
@@ -4424,6 +4425,7 @@ function renderDevHarnessHtml(state, options = {}) {
       }
       .message {
         display: grid;
+        flex: 0 0 auto;
         gap: 8px;
         max-width: 100%;
       }
@@ -4515,6 +4517,7 @@ function renderDevHarnessHtml(state, options = {}) {
         background: var(--panel);
         border: 1px solid var(--border);
         border-radius: 14px;
+        flex: 0 0 auto;
         overflow: hidden;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
         margin: 8px 0;
@@ -4545,16 +4548,28 @@ function renderDevHarnessHtml(state, options = {}) {
       :root[data-sidecar-theme="dark"] .tool-head .status {
         background: rgba(255, 255, 255, 0.05);
       }
-      .tool-body { display: grid; gap: 10px; padding: 14px; background: var(--panel); }
+      .tool-body {
+        background: var(--panel);
+        display: grid;
+        gap: 10px;
+        min-width: 0;
+        padding: 14px;
+      }
       
-      iframe {
+      .tool-body iframe {
         background: var(--widget-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
-        min-height: 380px;
+        display: block;
+        height: clamp(360px, 58dvh, 720px);
+        min-height: 360px;
+        overflow: auto;
         width: 100%;
       }
-      :root[data-sidecar-device="mobile"] iframe { min-height: 520px; }
+      :root[data-sidecar-device="mobile"] .tool-body iframe {
+        height: clamp(440px, 70dvh, 680px);
+        min-height: 440px;
+      }
       
       .composer {
         background: var(--bg);
@@ -5477,7 +5492,10 @@ async function streamChat(contentEl) {
         } else if (parsed.event === "tool_start") {
           appendToolStart(parsed.data);
         } else if (parsed.event === "tool_result") {
-          appendToolResult(parsed.data);
+          const toolArticle = appendToolResult(parsed.data);
+          if (parsed.data.tool?.resourceUri) {
+            moveAssistantAfterToolUi(contentEl, toolArticle);
+          }
         } else if (parsed.event === "error") {
           throw new Error(parsed.data.message || "Sidecar dev chat failed.");
         }
@@ -5547,6 +5565,17 @@ function renderAssistantError(element, message) {
   return text;
 }
 
+function moveAssistantAfterToolUi(contentEl, toolArticle) {
+  const assistantArticle = contentEl.closest(".message");
+  if (!assistantArticle || !toolArticle?.parentElement || assistantArticle === toolArticle) {
+    return;
+  }
+  if (toolArticle.nextSibling === assistantArticle) {
+    return;
+  }
+  messagesEl.insertBefore(assistantArticle, toolArticle.nextSibling);
+}
+
 function appendToolStart(tool) {
   const article = document.createElement("article");
   article.className = "tool-card";
@@ -5554,6 +5583,7 @@ function appendToolStart(tool) {
   article.innerHTML = '<div class="tool-head"><div class="tool-title"></div><div class="status">Running</div></div><div class="tool-body"></div>';
   article.querySelector(".tool-title").textContent = tool.title || tool.name;
   messagesEl.append(article);
+  return article;
 }
 
 function appendToolResult(event) {
@@ -5572,6 +5602,7 @@ function appendToolResult(event) {
     const iframe = document.createElement("iframe");
     iframe.src = "/__sidecar/dev/resource?uri=" + encodeURIComponent(event.tool.resourceUri);
     iframe.title = event.tool.title || event.tool.name;
+    iframe.setAttribute("scrolling", "auto");
     frameContexts.set(iframe.contentWindow, {
       result: event.result,
       tool: event.tool,
@@ -5592,6 +5623,7 @@ function appendToolResult(event) {
     body.append(pre);
   }
   article.scrollIntoView({ block: "end" });
+  return article;
 }
 
 function toolText(result) {