R4 frontend: global pages restyled, Team tabs, /apps page, Buy credits

Shared PageChrome (28px/600 title + muted desc + top-right action pill)
now fronts every global page. Skills → 2-col r24 Card grid with team
install counts. Credits → three-card layout (balance w/ Buy credits;
usage meter w/ runway; promo; Talk-to-sales → mailto). The Stripe Buy
credits button only mounts when /api/billing/config reports it enabled
(honest degradation) and opens a real Checkout Session.

Team page gains the three reference tabs via SegmentedTabs: Members
(restyled), Claw org chart (real /api/team/orgchart — members grouped
with the claws they manage, each a deep link into chat), and Leaderboard
(real /api/team/leaderboard — claws ranked by usage with a coral bar).

New /apps global page (workspace-wide connections via ?workspace=true):
category pills + SearchPill + 2-col rows with inline API-key connect;
Apps added to the rail nav.

Wizard restyled to the system: coral-fill white-text CTAs with the glow
shadow, coral progress bars, swatch enter animation, system inputs —
all step text/behavior preserved.

83 unit + 29 functional E2E + a11y green; contrast fixed (subtle-fg →
muted-fg on cards).

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

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

@@ -1,44 +1,28 @@
-import { fetchMembers } from "@/lib/api/team";
+import { PageChrome } from "@/components/global/PageChrome";
+import { TeamTabs } from "@/components/global/TeamTabs";
+import {
+  fetchLeaderboard,
+  fetchMembers,
+  fetchOrgChart,
+} from "@/lib/api/team";
 
-// Team page (§8.3): members table.
+// Team page (§8.3): members, the claw org chart, and the usage leaderboard.
 export default async function TeamPage() {
-  const members = await fetchMembers();
+  const [members, orgchart, leaderboard] = await Promise.all([
+    fetchMembers(),
+    fetchOrgChart(),
+    fetchLeaderboard(),
+  ]);
   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>
+    <PageChrome
+      title="Team"
+      description={`${members.length} ${members.length === 1 ? "member" : "members"} in your workspace`}
+    >
+      <TeamTabs
+        members={members}
+        orgchart={orgchart}
+        leaderboard={leaderboard}
+      />
+    </PageChrome>
   );
 }