fix(web): stop tool-group flashing and config-menu closure on updates

Reuse existing tool-group DOM elements in rebuildTranscript instead of
tearing them down — preserves CSS transition state and focus. Defer
config-menu DOM rebuild while the menu is open so <select> dropdowns
survive background state updates.

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

web/src/structured.ts

@@ -486,6 +486,7 @@ 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[] = [];
@@ -504,23 +505,37 @@ export function createStructuredConnection(
           rowEls.set(memberRow.id, memberEl);
           return [memberEl];
         });
-        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");
+
+        // 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);
         }
-        groupEls.set(groupId, groupEl);
-        children.push(groupEl);
         continue;
       }
       // Resolved approvals not absorbed into a tool group are hidden — the
@@ -635,12 +650,14 @@ 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) => {
@@ -654,6 +671,15 @@ 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");
@@ -785,6 +811,7 @@ 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,16 +223,15 @@ function buildDiffBlock(diff: { path: string; oldText?: string | null; newText:
   wrap.appendChild(label);
   const scroller = el("div", "st-diff");
   const pre = document.createElement("pre");
-  const lines = computeDiffLines(diff.oldText, diff.newText);
-  const prefixes: Record<string, string> = { add: "+ ", del: "- ", ctx: "  ", hunk: "", eof: "" };
-  for (const line of lines) {
+  for (const line of computeDiffLines(diff.oldText, diff.newText)) {
     const span = document.createElement("span");
     span.className = `st-ln st-ln-${line.kind}`;
-    span.textContent = (prefixes[line.kind] ?? "") + line.text;
+    span.textContent = line.text;
     pre.appendChild(span);
+    pre.appendChild(document.createTextNode("\n"));
   }
   scroller.appendChild(pre);
-  makeCopyable(scroller, lines.map((l) => (prefixes[l.kind] ?? "") + l.text).join("\n"), "diff");
+  makeCopyable(scroller, pre.textContent ?? "", "diff");
   wrap.appendChild(scroller);
   return wrap;
 }

web/src/styles.css

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