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/shell/AgentRosterItem.tsx

@@ -0,0 +1,19 @@
+import type { Agent } from "@/lib/api/schemas";
+import { Avatar } from "@/components/ui/Avatar";
+
+/** One agent row in the left rail (§4): avatar, name, online dot. */
+export function AgentRosterItem({ agent }: { agent: Agent }) {
+  return (
+    <div className="flex items-center gap-2 rounded-(--radius) px-2 py-1.5 text-sm text-foreground hover:bg-surface-warm">
+      <Avatar name={agent.name} accent={agent.accent} size="sm" />
+      <span className="truncate">{agent.name}</span>
+      {agent.status === "online" && (
+        <span
+          role="status"
+          aria-label={`${agent.name} is online`}
+          className="ml-auto size-1.5 shrink-0 rounded-full bg-green-500"
+        />
+      )}
+    </div>
+  );
+}