P0: Next.js shell — tokens, motion, SlidePanel, LeftRail, auth plumbing

- Tailwind v4 @theme block encoding all spec §2 tokens; full §3 keyframe
  inventory with prefers-reduced-motion handling; Geist vendored (air-gap)
- SlidePanel width-animation primitive (component-tested: exit-transition
  unmount, fixed-width inner content, a11y region semantics)
- session-key.ts mirroring the Rust codec + URL-param encoding; nuqs
  panel-params with spec ?sessions=1 flag shape and routines->scheduled alias
- Zod-typed API client; httpOnly cookie session bridge (/auth/session);
  login page; (workspace) layout with LeftRail roster/nav/user; Team and
  Credits pages on real endpoints (+ GET /api/team/members in tc-api)
- Vitest + Testing Library harness (26 tests); ESLint max-lines 1250 +
  no-warning-comments mirroring the CI gates

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

frontend/src/components/ui/Avatar.tsx

@@ -0,0 +1,27 @@
+interface AvatarProps {
+  name: string;
+  /** Per-agent accent hex; defaults to the brand coral. */
+  accent?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const SIZES = { sm: "size-6 text-xxs", md: "size-8 text-xs", lg: "size-16 text-xl" };
+
+/** Initials avatar used until generated art assets land (excluded by spec). */
+export function Avatar({ name, accent, size = "md" }: AvatarProps) {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]!.toUpperCase())
+    .join("");
+  return (
+    <span
+      aria-hidden
+      className={`inline-flex items-center justify-center rounded-full font-medium text-background ${SIZES[size]}`}
+      style={{ backgroundColor: accent || "var(--color-accent)" }}
+    >
+      {initials}
+    </span>
+  );
+}