Chat welcome + active conversation: composer controls, layout, header

Measured welcome-screen + active-conversation feedback:

Composer redesigned with two variants (no Send button — Enter to send,
Shift+Enter for newline; attach + screenshot icon affordances on the
left). 'welcome' = short single-row 672px-capped pill, icons inline;
'active' = taller two-row card (textarea on top, 36px icon-button row
below), placeholder switches to 'Type your message…'. A cream Stop pill
appears while the agent is generating, wired to a real useChat.stop()
that aborts the SSE and finalizes the partial reply (new 'stopped'
reducer action).

Empty state un-pinned: the composer is now part of the centered welcome
stack (avatar → heading → subtitle → composer → chips) instead of being
pinned to the viewport bottom. Subtitle dropped to 12px. Hero avatar
kept at 126px but with a proportional 40px squircle radius (a flat 17px
read as square at that size).

Chat header sized up to match: 58px avatar (new Avatar 'header' size),
name 18px/600 neutral-200, role 14px. The neutral-500 role/subtitle tone
nudged to #7d7d7d to clear AA contrast on #0a0a0a.

84 unit + 31 functional E2E green; verified both states live.

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

frontend/src/components/ui/Avatar.tsx

@@ -2,7 +2,7 @@ interface AvatarProps {
   name: string;
   /** Per-agent accent hex; defaults to the brand coral. */
   accent?: string;
-  size?: "sm" | "md" | "lg" | "rail" | "chat" | "welcome";
+  size?: "sm" | "md" | "lg" | "rail" | "chat" | "header" | "welcome";
   /** Circle (people) or 17px-radius squircle (claws, measured). */
   shape?: "circle" | "squircle";
   /** Green presence dot overlay (rail + chat headers). */
@@ -15,9 +15,17 @@ const SIZES = {
   lg: "size-16 text-xl",
   rail: "size-12 text-base" /* 48px claw rail tile */,
   chat: "size-[50px] text-base" /* assistant message avatar */,
+  header: "size-[58px] text-2xl" /* chat-header identity */,
   welcome: "size-[126px] text-4xl" /* empty-state hero */,
 };
 
+/* Squircle radius scales with the tile so big avatars read as rounded as
+   the 48px rail tile (a flat 17px looks square at 126px). */
+const SQUIRCLE_RADIUS: Partial<Record<keyof typeof SIZES, string>> = {
+  header: "rounded-[20px]",
+  welcome: "rounded-[40px]",
+};
+
 /** Initials avatar used until generated art assets land (excluded by spec). */
 export function Avatar({
   name,
@@ -33,7 +41,9 @@ export function Avatar({
     .map((part) => part[0]!.toUpperCase())
     .join("");
   const radius =
-    shape === "squircle" ? "rounded-[17px]" : "rounded-full";
+    shape === "squircle"
+      ? (SQUIRCLE_RADIUS[size] ?? "rounded-[17px]")
+      : "rounded-full";
   return (
     <span className="relative inline-flex">
       <span