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/Root.tsx

@@ -5,6 +5,7 @@
 import type { BadgeTone } from '@hive/shared/badge.js';
 import { Header } from './components/Header.js';
 import { StatusChips } from './components/StatusChips.js';
+import { LiveStream } from './components/LiveStream.js';
 import { useAgentState } from './hooks/useAgentState.js';
 import { fmtAge, fmtTokens } from './lib/format.js';
 import { resolveDashboardBase } from './lib/dashboardBase.js';
@@ -43,22 +44,27 @@ export function Root() {
 
   if (!state) {
     return (
-      <Header label="…">
-        <StatusChips
-          aliveLabel="… connecting"
-          aliveTone="neutral"
-          stateLabel="… booting"
-          stateTone="neutral"
-          model=""
-          availableModels={[]}
-          onSelectModel={() => {}}
-          effort=""
-          availableEfforts={[]}
-          onSelectEffort={() => {}}
-          paused={false}
-          onTogglePause={() => {}}
-        />
-      </Header>
+      <>
+        <Header label="…">
+          <StatusChips
+            aliveLabel="… connecting"
+            aliveTone="neutral"
+            stateLabel="… booting"
+            stateTone="neutral"
+            model=""
+            availableModels={[]}
+            onSelectModel={() => {}}
+            effort=""
+            availableEfforts={[]}
+            onSelectEffort={() => {}}
+            paused={false}
+            onTogglePause={() => {}}
+          />
+        </Header>
+        <main className="agent-main">
+          <LiveStream />
+        </main>
+      </>
     );
   }
 
@@ -74,30 +80,35 @@ export function Root() {
   const cost = tokenTotal(state.cost_usage);
 
   return (
-    <Header label={state.label} hiveLabel={[state.swarm_name, state.hive_name].filter(Boolean).join(' / ') || null}>
-      <StatusChips
-        aliveLabel={`${alive.glyph} ${alive.text}`}
-        aliveTone={alive.tone}
-        stateLabel={`${turnDef.glyph} ${turnDef.text} · ${stateAge}`}
-        stateTone={turnDef.tone}
-        stateTooltip={STATE_TOOLTIPS[effectiveTurnState]}
-        model={state.model}
-        availableModels={state.available_models}
-        onSelectModel={(name) => {
-          postModel(name).then(() => refresh());
-        }}
-        effort={state.effort}
-        availableEfforts={state.available_efforts}
-        onSelectEffort={(level) => {
-          postEffort(level).then(() => refresh());
-        }}
-        ctxLabel={ctx !== null ? fmtTokens(ctx) : undefined}
-        costLabel={cost !== null ? fmtTokens(cost) : undefined}
-        paused={state.paused}
-        onTogglePause={() => {
-          submitPauseResume(resolveDashboardBase(state.dashboard_port), state.label, state.paused ? 'resume' : 'pause');
-        }}
-      />
-    </Header>
+    <>
+      <Header label={state.label} hiveLabel={[state.swarm_name, state.hive_name].filter(Boolean).join(' / ') || null}>
+        <StatusChips
+          aliveLabel={`${alive.glyph} ${alive.text}`}
+          aliveTone={alive.tone}
+          stateLabel={`${turnDef.glyph} ${turnDef.text} · ${stateAge}`}
+          stateTone={turnDef.tone}
+          stateTooltip={STATE_TOOLTIPS[effectiveTurnState]}
+          model={state.model}
+          availableModels={state.available_models}
+          onSelectModel={(name) => {
+            postModel(name).then(() => refresh());
+          }}
+          effort={state.effort}
+          availableEfforts={state.available_efforts}
+          onSelectEffort={(level) => {
+            postEffort(level).then(() => refresh());
+          }}
+          ctxLabel={ctx !== null ? fmtTokens(ctx) : undefined}
+          costLabel={cost !== null ? fmtTokens(cost) : undefined}
+          paused={state.paused}
+          onTogglePause={() => {
+            submitPauseResume(resolveDashboardBase(state.dashboard_port), state.label, state.paused ? 'resume' : 'pause');
+          }}
+        />
+      </Header>
+      <main className="agent-main">
+        <LiveStream onLiveTurnBoundary={refresh} />
+      </main>
+    </>
   );
 }