agent: LiveStream/Row/DetailsRow — Preact live event pane

Ports the row taxonomy in docs/terminal-rendering.md (app.js's
renderStream/renderRichToolUse/renderToolResult/renderTaskEvent) to
real Preact components + hooks:

- lib/streamRow.ts: plain-data StreamRow model (one row = one line/
  panel), lib/classifyEvent.ts: raw stream-json event -> StreamRow[],
  almost entirely dispatching on the backend's precomputed _icon/
  _summary/_category/_body/_body_type fields, same as the old client.
- lib/markdown.ts, lib/linkify.tsx: sanitized-markdown + auto-link
  helpers, same behavior as app.js's mdNode/terminal.js's linkify.
- hooks/useLiveStream.ts: backfill + SSE + seq-dedupe + coalescing,
  reduced to a plain StreamRow[] — deliberately has no opinion on
  scroll position, only on what rows exist.
- components/Row.tsx: renders one StreamRow (flat or details).
- components/LiveStream.tsx: owns the scrollable DOM node + a from-
  scratch sticky-bottom implementation — not the old MutationObserver
  + rAF snap-animation + smoothScrollingUntil gate. stickToBottom is
  plain state driven by the scroll handler; snapping is an instant
  scrollTop write in a useLayoutEffect that runs after Preact has
  already committed the new rows, so it always sees the real
  scrollHeight. A load-older prepend is told apart from a normal
  append via an explicit ref set right before calling loadMore(),
  rather than inferred from DOM mutation shape after the fact.

Wired into Root.tsx below Header/StatusChips; turn_start/turn_end
also nudge useAgentState's refresh() for a snappier badge update than
the plain poll interval.

Reuses @hive/shared/terminal.css's existing row-kind classes as-is —
the taxonomy's visual language isn't what changed, the component
model underneath it is.

frontend/packages/agent/src/components/LiveStream.tsx

@@ -0,0 +1,113 @@
+// Live event pane — Preact owner of the DOM node `useLiveStream`'s rows
+// get rendered into. Deliberately NOT the old MutationObserver + rAF
+// snap-animation + `smoothScrollingUntil` gate machinery
+// (@hive/shared/terminal.js) — mara explicitly flagged that the old
+// page's autoscroll breaks when new events land while the operator has
+// scrolled up, and not to copy it 1:1. This is the "do it properly the
+// preact way" version:
+//
+//   - `stickToBottom` is plain state, updated synchronously from the
+//     scroll handler (near-bottom → true, scrolled away → false). No
+//     separate "am I mid-animation" gate to fight with it — there's no
+//     animation to fight, snapping is an instant `scrollTop` write in a
+//     `useLayoutEffect` that runs once after Preact has already
+//     committed the new rows to the DOM, so it always sees the real
+//     `scrollHeight`, never a stale pre-mutation one.
+//   - A "load older" prepend is told apart from a normal append via
+//     `prependingRef` (set immediately before calling `loadMore()`) so
+//     the effect can choose the right response: viewport-preserving
+//     scrollTop compensation for a prepend, stick-to-bottom-or-count-
+//     unseen for an append. The old code inferred this from DOM
+//     mutation shape after the fact; here the caller already knows
+//     which one it did, so there's nothing to infer.
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useLiveStream } from '../hooks/useLiveStream.js';
+import { Row } from './Row.js';
+
+const NEAR_BOTTOM_PX = 48;
+const LOAD_MORE_SCROLL_PX = 80;
+
+export interface LiveStreamProps {
+  /** Forwarded to useLiveStream — fires on live turn_start/turn_end so
+   * the caller can refresh `/api/state` sooner than its poll interval. */
+  onLiveTurnBoundary?: () => void;
+}
+
+export function LiveStream({ onLiveTurnBoundary }: LiveStreamProps) {
+  const { rows, hasMore, loadingMore, loadMore } = useLiveStream({ onLiveTurnBoundary });
+  const logRef = useRef<HTMLDivElement>(null);
+  const [stickToBottom, setStickToBottom] = useState(true);
+  const [unseen, setUnseen] = useState(0);
+  const prevRowCount = useRef(0);
+  const prependingRef = useRef(false);
+  const preScrollHeightRef = useRef(0);
+
+  function isNearBottom(el: HTMLDivElement): boolean {
+    return el.scrollHeight - el.scrollTop - el.clientHeight <= NEAR_BOTTOM_PX;
+  }
+
+  function handleScroll() {
+    const el = logRef.current;
+    if (!el) return;
+    const nearBottom = isNearBottom(el);
+    setStickToBottom(nearBottom);
+    if (nearBottom) setUnseen(0);
+    if (el.scrollTop <= LOAD_MORE_SCROLL_PX && hasMore && !loadingMore) startLoadMore();
+  }
+
+  function startLoadMore() {
+    const el = logRef.current;
+    if (!el || loadingMore || !hasMore) return;
+    prependingRef.current = true;
+    preScrollHeightRef.current = el.scrollHeight;
+    loadMore();
+  }
+
+  function jumpToBottom() {
+    const el = logRef.current;
+    if (el) el.scrollTop = el.scrollHeight - el.clientHeight;
+    setStickToBottom(true);
+    setUnseen(0);
+  }
+
+  // Runs after every commit that changed `rows` — i.e. after the browser
+  // has already laid out the new/coalesced content, so `scrollHeight`
+  // below is always current.
+  useLayoutEffect(() => {
+    const el = logRef.current;
+    if (!el) return;
+    const added = rows.length - prevRowCount.current;
+    prevRowCount.current = rows.length;
+
+    if (prependingRef.current) {
+      prependingRef.current = false;
+      el.scrollTop += el.scrollHeight - preScrollHeightRef.current;
+      return;
+    }
+    if (stickToBottom) {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    } else if (added > 0) {
+      setUnseen((n) => n + added);
+    }
+  }, [rows, stickToBottom]);
+
+  return (
+    <div className="terminal-wrap">
+      <div className="live terminal" ref={logRef} onScroll={handleScroll}>
+        {hasMore && (
+          <button type="button" className="load-more-pill" disabled={loadingMore} onClick={startLoadMore}>
+            {loadingMore ? '↑ loading…' : '↑ load older'}
+          </button>
+        )}
+        {rows.map((row) => (
+          <Row key={row.key} row={row} />
+        ))}
+      </div>
+      {unseen > 0 && (
+        <button type="button" className="tail-pill visible" onClick={jumpToBottom}>
+          ↓ {unseen} new
+        </button>
+      )}
+    </div>
+  );
+}

frontend/packages/agent/src/components/Row.tsx

@@ -0,0 +1,71 @@
+// Renders one `StreamRow` — flat `<div class="row …">` or expandable
+// `<details class="row …">`, matching @hive/shared/terminal.css's
+// existing row-kind classes exactly (see docs/terminal-rendering.md).
+// Reuses that stylesheet as-is (imported once by LiveStream.tsx) — the
+// taxonomy's visual language isn't what mara asked to change, the
+// component *model* underneath it is.
+import { useEffect, useRef } from 'preact/hooks';
+import type { StreamRow } from '../lib/streamRow.js';
+import { linkifyToNodes } from '../lib/linkify.js';
+import { renderMarkdown } from '../lib/markdown.js';
+
+function MarkdownBody({ text }: { text: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const html = renderMarkdown(text);
+  useEffect(() => {
+    // marked autolinks URLs but leaves them same-tab — open externally
+    // so a click never navigates the terminal away.
+    ref.current?.querySelectorAll('a[href]').forEach((a) => {
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener noreferrer');
+    });
+  }, [html]);
+  // eslint-disable-next-line react/no-danger -- sanitized by DOMPurify in renderMarkdown
+  return <div className="md" ref={ref} dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+function DiffBody({ text }: { text: string }) {
+  const lines = String(text).split('\n');
+  return (
+    <pre className="tool-body diff-body">
+      {lines.map((line, i) => {
+        const cls = line.startsWith('+ ') ? 'diff-add' : line.startsWith('- ') ? 'diff-del' : 'diff-ctx';
+        return (
+          <span key={i} className={cls}>
+            {line}
+            {'\n'}
+          </span>
+        );
+      })}
+    </pre>
+  );
+}
+
+export function Row({ row }: { row: StreamRow }) {
+  if (row.details) {
+    return (
+      <details className={`row ${row.cssClass}`} open={row.defaultOpen || undefined}>
+        <summary>
+          {row.icon != null && row.icon !== '' && <span className="row-glyph">{row.icon}</span>}
+          <span className="summary-text">{row.text}</span>
+        </summary>
+        {row.diffBody != null && <DiffBody text={row.diffBody} />}
+        {row.markdownBody != null && <MarkdownBody text={row.markdownBody} />}
+        {row.plainBody != null && <pre className="tool-body">{linkifyToNodes(row.plainBody)}</pre>}
+      </details>
+    );
+  }
+  return (
+    <div className={`row ${row.cssClass}`}>
+      {row.icon != null && row.icon !== '' && <span className="row-glyph">{row.icon}</span>}
+      {row.text != null && linkifyToNodes(row.text)}
+      {row.meta?.map((m) => (
+        <span key={m.cls} className={m.cls}>
+          {m.text}
+        </span>
+      ))}
+      {row.childText != null && <div className={row.childText.cls}>{row.childText.text}</div>}
+      {row.markdownBody != null && <MarkdownBody text={row.markdownBody} />}
+    </div>
+  );
+}