P1 exit: chat UI, sessions column, agent create — 11 E2E journeys green

- Stream layer: incremental SSE parser tested against bytes captured from
  the REAL gateway (chunking-independent, UTF-8-safe, heartbeat-tolerant);
  Zod gateway event schemas; pure transcript reducer (optimistic send,
  delta streaming, step traces, resume dedupe, error states)
- Same-origin /api proxy route: httpOnly cookie -> bearer, unbuffered SSE
  passthrough; NuqsAdapter in root layout
- Chat workspace: route /claws/{id}/chat/{key} (RSC history + settings),
  WelcomeState with suggested prompts, MessageList (right user bubbles,
  left agent messages, blink caret), collapsible StepTrace, Composer
  (Enter sends, Shift+Enter newline)
- SessionsColumn in 208px SlidePanel (?sessions=1): search, relative
  times, active coral border, new session; /claws/{id} resumes latest or
  opens fresh; minimal create-claw form; rail + button and roster links
- P1 exit E2E: scripted reply streams, tool step trace survives reload,
  separate transcripts across sessions with column switching, create claw
  and chat immediately

83 Rust + 56 frontend unit/component tests + 11 Playwright journeys.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/components/chat/MessageList.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import type { UiMessage } from "@/lib/gateway/transcript";
+import type { Agent } from "@/lib/api/schemas";
+import { Avatar } from "@/components/ui/Avatar";
+import { StepTrace } from "./steps/StepTrace";
+
+function UserBubble({ message }: { message: UiMessage }) {
+  return (
+    <div className="flex justify-end">
+      <p
+        className={`max-w-[70%] whitespace-pre-wrap rounded-(--radius) bg-surface-warm-muted px-3 py-2 text-sm shadow-(--shadow-bubble) ${
+          message.status === "sending" ? "opacity-60" : ""
+        }`}
+      >
+        {message.text}
+      </p>
+    </div>
+  );
+}
+
+function AgentMessage({ message, agent }: { message: UiMessage; agent: Agent }) {
+  return (
+    <div className="flex gap-2">
+      <Avatar name={agent.name} accent={agent.accent} size="sm" />
+      <div className="min-w-0 flex-1">
+        <p className="whitespace-pre-wrap text-sm leading-relaxed">
+          {message.text}
+          {message.status === "streaming" && (
+            <span
+              aria-hidden
+              className="ml-0.5 inline-block h-4 w-0.5 translate-y-0.5 bg-accent motion-safe:animate-[caret-blink_1s_steps(1)_infinite]"
+            />
+          )}
+        </p>
+        {message.status === "error" && (
+          <p role="alert" className="pt-1 text-xs text-accent">
+            Something went wrong with this reply.
+          </p>
+        )}
+        <StepTrace steps={message.steps} />
+      </div>
+    </div>
+  );
+}
+
+/** The transcript (§5b): user bubbles right, agent messages left. */
+export function MessageList({
+  messages,
+  agent,
+}: {
+  messages: UiMessage[];
+  agent: Agent;
+}) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const tailText = messages.at(-1)?.text;
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [messages.length, tailText]);
+
+  return (
+    <div
+      aria-live="polite"
+      className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-6"
+    >
+      {messages.map((message) =>
+        message.role === "user" ? (
+          <UserBubble key={message.id} message={message} />
+        ) : (
+          <AgentMessage key={message.id} message={message} agent={agent} />
+        ),
+      )}
+      <div ref={bottomRef} />
+    </div>
+  );
+}