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/app/(workspace)/layout.tsx

@@ -2,8 +2,8 @@ import { redirect } from "next/navigation";
 
 import { LeftRail } from "@/components/shell/LeftRail";
 import { ApiAuthError } from "@/lib/api/http";
-import { fetchClaws, fetchMe } from "@/lib/api/team";
-import type { Agent, User } from "@/lib/api/schemas";
+import { fetchClaws, fetchCredits, fetchMe } from "@/lib/api/team";
+import type { Agent, Credits, User } from "@/lib/api/schemas";
 
 // Every workspace page shares the persistent rail (§4). This layout reads
 // only path-level data — search params stay client-side (see panel-params).
@@ -12,8 +12,13 @@ export default async function WorkspaceLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   let user: User;
   let roster: Agent[];
+  let credits: Credits;
   try {
-    [user, roster] = await Promise.all([fetchMe(), fetchClaws()]);
+    [user, roster, credits] = await Promise.all([
+      fetchMe(),
+      fetchClaws(),
+      fetchCredits(),
+    ]);
   } catch (error) {
     if (error instanceof ApiAuthError) {
       redirect("/login");
@@ -22,7 +27,11 @@ export default async function WorkspaceLayout({
   }
   return (
     <div className="flex min-h-dvh">
-      <LeftRail user={user} roster={roster} />
+      <LeftRail
+        user={user}
+        roster={roster}
+        creditsBalance={credits.available}
+      />
       <main className="min-w-0 flex-1">{children}</main>
     </div>
   );