shared terminal: align row icons via a shared grid, not offsets

Per mara's screenshot report (agent-terminal icons not aligned in the
first column) — and her explicit follow-up steer on the first version of
this fix: 'dont do it by offsets at all, it should be part of the layout
that they align.'

Root cause traced first, not guessed: .row-glyph relied on inheriting
text-indent: -1.4em from .live .row to paint its glyph in the reserved
prefix slot; details.row > summary separately reset text-indent: 0 for
its own hanging-caret needs, which also zeroed the inherited value for
the icon nested inside it (indent inherits by computed value, not by
rule). Two independently-computed offsets that had to agree by hand,
and silently didn't.

Replaced the whole offset scheme with a real structural fix: every row
is a 2-column CSS grid (icon column, width from one shared
--row-icon-col custom property, then content column), and a details
row grids its own <summary> with the exact same grid-template-columns
value instead of griding itself (so its <pre> body still stacks full
width below, not squeezed into column 2). Icon and content are placed
by explicit grid-column, not auto-placement inference, so an icon-less
row's lone child still lands in the content column. .row-content is a
new wrapper class (Row.tsx, terminal.js's row()/mutableRow()/
placeholder()) giving that content an element the grid can target by
class - a DocumentFragment (what linkify() returns) doesn't persist as
a node once appended, so without an explicit wrapper there was nothing
for the grid to place.

Caught and fixed a second real bug while building this for real (not
just reasoning about the CSS): the first draft's details.row { display:
block } had lower specificity than .live .row's display: grid and never
actually applied, squeezing <summary> into the row's own 1.4em icon
column and wrapping its text one character per line. Needed
.live details.row to out-specify it.

Verified with a headless-chromium render of all 6 row shapes (flat
icon / flat icon-less / flat markdown-body / details icon / details
icon-less / a long-wrapping flat row) - all align and wrap correctly.
Also verified via the earlier Range.getBoundingClientRect() measurement
(glyph paint position, not just the element's own box): diff 0.00 for
both this and the previous fix, but only this one is structural rather
than two numbers that happen to still agree today.

frontend/packages/shared/src/terminal/terminal.js

@@ -185,7 +185,7 @@ export function create(opts) {
     clearPlaceholder();
     const e = document.createElement("div");
     e.className = "row note";
-    e.textContent = text;
+    e.appendChild(contentSpan(document.createTextNode(text)));
     log.appendChild(e);
     placeholderEl = e;
   }
@@ -200,6 +200,19 @@ export function create(opts) {
     g.textContent = icon;
     return g;
   }
+  // Wraps a flat row's actual content (text/links, or the mutable-row
+  // text node) in a real element the row's own grid can place by class
+  // (`grid-column: 2` in terminal.css) — `linkify()` returns a
+  // `DocumentFragment`, which doesn't persist as a node once appended,
+  // so without this wrapper an icon-less row's content has no element of
+  // its own for the grid to target and would auto-place into the icon
+  // column instead (see terminal.css's own comment on why that matters).
+  function contentSpan(node) {
+    const c = document.createElement("span");
+    c.className = "row-content";
+    c.appendChild(node);
+    return c;
+  }
   // Build a <summary> whose icon (if any) sits in the shared `.row-glyph`
   // column and whose text lives in a `.summary-text` span — the disclosure
   // caret (CSS `.summary-text::before`) then leads the text, not the icon,
@@ -219,7 +232,7 @@ export function create(opts) {
     const e = document.createElement("div");
     e.className = "row " + (cls || "") + (currentNoAnim ? " no-anim" : "");
     if (icon != null && icon !== "") e.appendChild(glyphSpan(icon));
-    e.appendChild(linkify(text));
+    e.appendChild(contentSpan(linkify(text)));
     log.appendChild(e);
     afterAppend(wasNearBottom);
     return e;
@@ -235,7 +248,7 @@ export function create(opts) {
     e.className = "row " + (cls || "") + (currentNoAnim ? " no-anim" : "");
     if (icon != null && icon !== "") e.appendChild(glyphSpan(icon));
     const tn = document.createTextNode(text == null ? "" : String(text));
-    e.appendChild(tn);
+    e.appendChild(contentSpan(tn));
     log.appendChild(e);
     afterAppend(wasNearBottom);
     return [e, tn];