fix(web): omit plan transcript rows

web/src/structured.ts

@@ -152,7 +152,7 @@ export function createStructuredConnection(
     }
   }
 
-  function buildRowElement(row: TranscriptRow): HTMLElement {
+  function buildRowElement(row: TranscriptRow): HTMLElement | null {
     const el = buildTranscriptRow(
       row,
       approvalStateFor(row),
@@ -162,16 +162,27 @@ export function createStructuredConnection(
         else expandedRowIds.delete(row.id);
       },
     );
+    if (!el) return null;
     if (el.querySelector(".st-tool-head")?.getAttribute("aria-expanded") !== "true") {
       expandedRowIds.delete(row.id);
     }
     return el;
   }
 
+  function insertRowElement(row: TranscriptRow, el: HTMLElement): void {
+    const index = rowIndex.get(row.id) ?? rows.length - 1;
+    let next: HTMLElement | null = null;
+    for (let i = index + 1; i < rows.length; i++) {
+      next = rowEls.get(rows[i].id) ?? null;
+      if (next) break;
+    }
+    rowEls.set(row.id, el);
+    rowsEl.insertBefore(el, next);
+  }
+
   function mountRow(row: TranscriptRow): void {
     const el = buildRowElement(row);
-    rowEls.set(row.id, el);
-    rowsEl.appendChild(el);
+    if (el) insertRowElement(row, el);
   }
 
   function remountRow(row: TranscriptRow): void {
@@ -179,9 +190,18 @@ export function createStructuredConnection(
     const oldToolHead = old?.querySelector<HTMLButtonElement>(".st-tool-head") ?? null;
     const restoreFocus = document.activeElement === oldToolHead;
     const el = buildRowElement(row);
-    rowEls.set(row.id, el);
-    if (old) old.replaceWith(el);
-    else rowsEl.appendChild(el);
+    if (!el) {
+      old?.remove();
+      rowEls.delete(row.id);
+      expandedRowIds.delete(row.id);
+      return;
+    }
+    if (old) {
+      rowEls.set(row.id, el);
+      old.replaceWith(el);
+    } else {
+      insertRowElement(row, el);
+    }
     const newToolHead = el.querySelector<HTMLButtonElement>(".st-tool-head");
     if (restoreFocus) newToolHead?.focus();
   }