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

@@ -0,0 +1,25 @@
+import { fetchCredits } from "@/lib/api/team";
+
+// Credits page (§8.4): available balance; purchase and usage land in P5.
+export default async function CreditsPage() {
+  const credits = await fetchCredits();
+  return (
+    <section className="mx-auto max-w-3xl px-8 py-12">
+      <h1 className="text-2xl font-semibold tracking-tight">Credits</h1>
+      <p className="pt-1 text-sm text-muted-foreground">
+        Manage balance, subscriptions, and usage
+      </p>
+      <div className="mt-8 rounded-(--radius) border border-border bg-surface-warm p-6 shadow-(--shadow-card)">
+        <p className="text-xs uppercase tracking-wide text-muted-foreground">
+          Available credits
+        </p>
+        <p className="pt-2 font-mono text-xxxl font-semibold">
+          {credits.available.toLocaleString("en-US")}
+        </p>
+        <p className="pt-2 text-xs text-muted-foreground">
+          All credits never expire.
+        </p>
+      </div>
+    </section>
+  );
+}

frontend/src/app/(workspace)/layout.tsx

@@ -0,0 +1,29 @@
+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";
+
+// Every workspace page shares the persistent rail (§4). This layout reads
+// only path-level data — search params stay client-side (see panel-params).
+export default async function WorkspaceLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  let user: User;
+  let roster: Agent[];
+  try {
+    [user, roster] = await Promise.all([fetchMe(), fetchClaws()]);
+  } catch (error) {
+    if (error instanceof ApiAuthError) {
+      redirect("/login");
+    }
+    throw error;
+  }
+  return (
+    <div className="flex min-h-dvh">
+      <LeftRail user={user} roster={roster} />
+      <main className="min-w-0 flex-1">{children}</main>
+    </div>
+  );
+}

frontend/src/app/(workspace)/page.tsx

@@ -0,0 +1,11 @@
+// Workspace home: the empty-shell landing until agent chat arrives (P1).
+export default function WorkspaceHome() {
+  return (
+    <section className="flex h-dvh flex-col items-center justify-center gap-2 motion-safe:animate-[route-fade-in_var(--duration-normal)_var(--ease-app)]">
+      <h1 className="text-xxxl font-semibold tracking-tight">TeamClaw</h1>
+      <p className="text-sm text-muted-foreground">
+        Pick a claw from the rail, or create one to get started.
+      </p>
+    </section>
+  );
+}

frontend/src/app/(workspace)/team/page.tsx

@@ -0,0 +1,44 @@
+import { fetchMembers } from "@/lib/api/team";
+
+// Team page (§8.3): members table.
+export default async function TeamPage() {
+  const members = await fetchMembers();
+  return (
+    <section className="mx-auto max-w-3xl px-8 py-12">
+      <h1 className="text-2xl font-semibold tracking-tight">Team</h1>
+      <p className="pt-1 text-sm text-muted-foreground">
+        {members.length} {members.length === 1 ? "member" : "members"} in your
+        workspace
+      </p>
+      <table className="mt-8 w-full text-left text-sm">
+        <thead>
+          <tr className="border-b border-border text-xs text-muted-foreground">
+            <th className="py-2 font-medium">Name</th>
+            <th className="py-2 font-medium">Email</th>
+            <th className="py-2 font-medium">Joined</th>
+          </tr>
+        </thead>
+        <tbody>
+          {members.map((member) => (
+            <tr key={member.id} className="border-b border-border/50">
+              <td className="py-3">
+                {member.display_name}
+                {member.role === "owner" && (
+                  <span className="ml-2 rounded-(--radius-button) bg-surface-warm-muted px-2 py-0.5 text-xxs text-muted-foreground">
+                    Owner
+                  </span>
+                )}
+              </td>
+              <td className="py-3 text-muted-foreground">{member.email}</td>
+              <td className="py-3 text-muted-foreground">
+                {new Date(member.created_at).toLocaleDateString("en-US", {
+                  dateStyle: "medium",
+                })}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+}