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/steps/StepTrace.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useId, useState } from "react";
+
+import type { UiStep } from "@/lib/gateway/transcript";
+
+/** The collapsible "N steps" tool/reasoning trace on agent messages (§5b). */
+export function StepTrace({ steps }: { steps: UiStep[] }) {
+  const [expanded, setExpanded] = useState(false);
+  const regionId = useId();
+  if (steps.length === 0) {
+    return null;
+  }
+  return (
+    <div className="pt-1">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls={regionId}
+        onClick={() => setExpanded((v) => !v)}
+        className="rounded-(--radius) px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-surface-warm hover:text-foreground"
+      >
+        {expanded ? "▾" : "▸"} {steps.length}{" "}
+        {steps.length === 1 ? "step" : "steps"}
+      </button>
+      {expanded && (
+        <ul id={regionId} className="flex flex-col gap-1 pl-3 pt-1">
+          {steps.map((step) => (
+            <li
+              key={step.seq}
+              className="rounded-(--radius) border border-border bg-subtle px-2 py-1.5 font-mono text-xs motion-safe:animate-[toolSlideIn_var(--duration-fast)_var(--ease-app)]"
+            >
+              <span
+                className={
+                  step.status === "error"
+                    ? "text-accent"
+                    : step.status === "running"
+                      ? "text-muted-foreground motion-safe:animate-[pulse_1.5s_ease-in-out_infinite]"
+                      : "text-foreground"
+                }
+              >
+                {step.status === "ok" ? "✓" : step.status === "error" ? "✗" : "…"}{" "}
+                {step.tool}
+              </span>
+              {step.output != null && (
+                <span className="block truncate pt-0.5 text-muted-foreground">
+                  {JSON.stringify(step.output)}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}