R1+R2: shell and chat restyled to the reference system

Shell (main-chat-shell-spec): rail rebuilt around a 48px squircle claw
avatar stack with a 2px coral active ring + name beneath + online dot,
dashed 'New claw' tile, lucide-icon nav pills with the live credits
balance shown inline (coral when negative, aria-hidden so the nav link
name stays 'Credits'); 80px transparent chat header with 36px round
sessions/new-session icon buttons and the 42px coral-glow Computer
launcher; 768px centered content rail. RosterList computes the active
claw from the pathname so AgentRosterItem stays presentational.

Chat (chat-message-components): asymmetric layout — user pill #1A1A1A
radius 24/24/4 with inset white ring + dual shadow, capped 75%, vs the
bubble-less assistant message (50px squircle avatar, 15px gap, plain
14px/1.7 text); messageSlideIn entrance; 126px welcome avatar with the
24px/600/-0.6px heading (claw name in coral) and lucide-led suggestion
chips; floating 24px-radius neutral-800 composer card with the cream
Send pill; StepTrace rows restyled to the system.

Brand marks (Chrome, Slack) vendored to public/services from the bundle.
83 unit tests, full 29-journey functional E2E green.

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

frontend/src/components/chat/ChatWorkspace.tsx

@@ -72,18 +72,24 @@ export function ChatWorkspace({
       </SlidePanel>
       <section className="flex min-w-0 flex-1 flex-col">
         <ChatHeader agent={agent} onNewSession={newSession} />
-        {state.messages.length === 0 ? (
-          <WelcomeState agent={agent} onPick={setDraft} />
-        ) : (
-          <MessageList messages={state.messages} agent={agent} onDecide={decide} />
-        )}
-        <Composer
-          agentName={agent.name}
-          disabled={state.streaming}
-          onSend={send}
-          draft={draft}
-          onDraftChange={setDraft}
-        />
+        <div className="mx-auto flex w-full max-w-3xl min-w-0 flex-1 flex-col overflow-hidden px-4">
+          {state.messages.length === 0 ? (
+            <WelcomeState agent={agent} onPick={setDraft} />
+          ) : (
+            <MessageList
+              messages={state.messages}
+              agent={agent}
+              onDecide={decide}
+            />
+          )}
+          <Composer
+            agentName={agent.name}
+            disabled={state.streaming}
+            onSend={send}
+            draft={draft}
+            onDraftChange={setDraft}
+          />
+        </div>
       </section>
       <DevicePanel agent={agent} />
     </div>