fix(maestro): fix diff double-spacing and add +/- markers

Block spans + literal \n text nodes inside <pre> caused empty lines
between every diff line. Drop the text nodes, add unified-diff prefixes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/structured.ts

@@ -486,7 +486,6 @@ export function createStructuredConnection(
     const liveGroupIds = new Set([...groups.keys()]);
     for (const id of expandedGroupIds) if (!liveGroupIds.has(id)) expandedGroupIds.delete(id);
 
-    const prevGroupEls = new Map(groupEls);
     rowEls.clear();
     groupEls.clear();
     const children: HTMLElement[] = [];
@@ -505,37 +504,23 @@ export function createStructuredConnection(
           rowEls.set(memberRow.id, memberEl);
           return [memberEl];
         });
-
-        // Reuse existing group element when possible — avoids tearing down
-        // and recreating the wrapper, which restarts CSS transitions (visible
-        // flash) and destroys keyboard/focus state.
-        const existing = prevGroupEls.get(groupId);
-        if (existing) {
-          const titleEl = existing.querySelector<HTMLElement>(".st-tool-group-title");
-          if (titleEl) titleEl.textContent = `${group.toolCount} tool calls`;
-          const inner = existing.querySelector<HTMLElement>(".st-disclosure-inner");
-          if (inner) inner.replaceChildren(...memberEls);
-          groupEls.set(groupId, existing);
-          children.push(existing);
-        } else {
-          const groupEl = buildToolGroup(
-            groupId,
-            group.rows,
-            memberEls,
-            expandedGroupIds.has(groupId),
-            (expanded) => {
-              if (expanded) expandedGroupIds.add(groupId);
-              else expandedGroupIds.delete(groupId);
-              settleDisclosureLayout();
-            },
-            group.toolCount,
-          );
-          if (group.rows.some((r) => enteringRowIds.has(r.id))) {
-            groupEl.classList.add("st-row-enter");
-          }
-          groupEls.set(groupId, groupEl);
-          children.push(groupEl);
+        const groupEl = buildToolGroup(
+          groupId,
+          group.rows,
+          memberEls,
+          expandedGroupIds.has(groupId),
+          (expanded) => {
+            if (expanded) expandedGroupIds.add(groupId);
+            else expandedGroupIds.delete(groupId);
+            settleDisclosureLayout();
+          },
+          group.toolCount,
+        );
+        if (group.rows.some((r) => enteringRowIds.has(r.id))) {
+          groupEl.classList.add("st-row-enter");
         }
+        groupEls.set(groupId, groupEl);
+        children.push(groupEl);
         continue;
       }
       // Resolved approvals not absorbed into a tool group are hidden — the
@@ -650,14 +635,12 @@ export function createStructuredConnection(
     }
   }
 
-  let configDirty = false;
   function renderConfig(): void {
     const options = sessionConfigOptions();
     configEl.hidden = options.length === 0;
     if (options.length === 0) {
       configMenu.hidden = true;
       configTrigger.setAttribute("aria-expanded", "false");
-      configDirty = false;
       return;
     }
     const ordered = [...options].sort((a, b) => {
@@ -671,15 +654,6 @@ export function createStructuredConnection(
     configTrigger.title = summary;
     configTrigger.setAttribute("aria-label", `Session settings. ${summary.replaceAll("\n", ". ")}`);
     configTrigger.disabled = configBusy;
-
-    // When the menu is open and the user is interacting (not mid-change),
-    // skip the DOM rebuild so open <select> dropdowns aren't destroyed.
-    // Mark dirty so the next open rebuilds with fresh data.
-    if (!configMenu.hidden && !configBusy) {
-      configDirty = true;
-      return;
-    }
-    configDirty = false;
     configMenu.replaceChildren();
     for (const option of ordered) {
       const row = document.createElement("label");
@@ -811,7 +785,6 @@ export function createStructuredConnection(
 
   configTrigger.addEventListener("click", () => {
     const opening = configMenu.hidden;
-    if (opening && configDirty) renderConfig();
     configMenu.hidden = !opening;
     configTrigger.setAttribute("aria-expanded", String(opening));
   });

web/src/structuredRender.test.ts

@@ -315,8 +315,8 @@ describe("buildTranscriptRow: tool diffs", () => {
     (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
     const diff = el.querySelector(".st-diff") as HTMLElement;
     expect(diff).not.toBeNull();
-    expect(diff.querySelector(".st-ln-add")!.textContent).toBe("c");
-    expect(diff.querySelector(".st-ln-del")!.textContent).toBe("b");
+    expect(diff.querySelector(".st-ln-add")!.textContent).toBe("+ c");
+    expect(diff.querySelector(".st-ln-del")!.textContent).toBe("- b");
   });
 
   it("gives the diff its own horizontally-scrolling container", () => {

web/src/structuredRender.ts

@@ -223,15 +223,16 @@ function buildDiffBlock(diff: { path: string; oldText?: string | null; newText:
   wrap.appendChild(label);
   const scroller = el("div", "st-diff");
   const pre = document.createElement("pre");
-  for (const line of computeDiffLines(diff.oldText, diff.newText)) {
+  const lines = computeDiffLines(diff.oldText, diff.newText);
+  const prefixes: Record<string, string> = { add: "+ ", del: "- ", ctx: "  ", hunk: "", eof: "" };
+  for (const line of lines) {
     const span = document.createElement("span");
     span.className = `st-ln st-ln-${line.kind}`;
-    span.textContent = line.text;
+    span.textContent = (prefixes[line.kind] ?? "") + line.text;
     pre.appendChild(span);
-    pre.appendChild(document.createTextNode("\n"));
   }
   scroller.appendChild(pre);
-  makeCopyable(scroller, pre.textContent ?? "", "diff");
+  makeCopyable(scroller, lines.map((l) => (prefixes[l.kind] ?? "") + l.text).join("\n"), "diff");
   wrap.appendChild(scroller);
   return wrap;
 }

web/src/styles.css

@@ -2965,6 +2965,7 @@ input.leaf-rename:focus {
   display: block;
   white-space: pre;
   padding: 0 var(--sp-3);
+  line-height: 1.4;
 }
 
 .st-ln-add {