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/components/global/TeamTabs.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import type { User } from "@/lib/api/schemas";
+import type { LeaderboardRow, OrgChartNode } from "@/lib/api/team";
+import { Avatar } from "@/components/ui/Avatar";
+import { Card } from "@/components/ui/Card";
+import { SegmentedTabs } from "@/components/ui/SegmentedTabs";
+
+const TABS = ["Members", "Claw org chart", "Leaderboard"] as const;
+
+export function TeamTabs({
+  members,
+  orgchart,
+  leaderboard,
+}: {
+  members: User[];
+  orgchart: OrgChartNode[];
+  leaderboard: LeaderboardRow[];
+}) {
+  const [tab, setTab] = useState<(typeof TABS)[number]>("Members");
+  return (
+    <div className="flex flex-col gap-6">
+      <SegmentedTabs
+        tabs={TABS}
+        active={tab}
+        onChange={(t) => setTab(t as (typeof TABS)[number])}
+        label="Team views"
+      />
+      {tab === "Members" && <MembersTable members={members} />}
+      {tab === "Claw org chart" && <OrgChart nodes={orgchart} />}
+      {tab === "Leaderboard" && <Leaderboard rows={leaderboard} />}
+    </div>
+  );
+}
+
+function MembersTable({ members }: { members: User[] }) {
+  return (
+    <table className="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-divider-subtle">
+            <td className="flex items-center gap-2 py-3">
+              <Avatar name={member.display_name} size="sm" />
+              {member.display_name}
+              {member.role === "owner" && (
+                <span className="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>
+  );
+}
+
+function OrgChart({ nodes }: { nodes: OrgChartNode[] }) {
+  if (nodes.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No claws have been created yet.
+      </p>
+    );
+  }
+  return (
+    <div className="flex flex-col gap-4">
+      {nodes.map((node) => (
+        <Card key={node.user.id}>
+          <div className="flex items-center gap-2">
+            <Avatar name={node.user.display_name} size="md" />
+            <div>
+              <p className="text-sm font-medium">{node.user.display_name}</p>
+              <p className="text-xxs text-muted-foreground">
+                {node.claws.length}{" "}
+                {node.claws.length === 1 ? "claw" : "claws"}
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2 pt-4">
+            {node.claws.map((claw) => (
+              <Link
+                key={claw.id}
+                href={`/claws/${claw.id}`}
+                className="flex items-center gap-2 rounded-radius-button bg-surface-warm px-3 py-1.5 text-xs transition-colors duration-normal ease-app hover:bg-surface-warm-muted"
+              >
+                <Avatar
+                  name={claw.name}
+                  accent={claw.accent}
+                  size="sm"
+                  shape="squircle"
+                />
+                {claw.name}
+              </Link>
+            ))}
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function Leaderboard({ rows }: { rows: LeaderboardRow[] }) {
+  const max = Math.max(1, ...rows.map((r) => r.credits));
+  return (
+    <table className="w-full text-left text-sm">
+      <thead>
+        <tr className="border-b border-border text-xs text-muted-foreground">
+          <th className="py-2 font-medium">Claw</th>
+          <th className="py-2 text-right font-medium">Runs</th>
+          <th className="py-2 text-right font-medium">Tokens</th>
+          <th className="py-2 text-right font-medium">Credits</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, i) => (
+          <tr key={row.id} className="border-b border-divider-subtle">
+            <td className="flex items-center gap-2 py-3">
+              <span className="w-4 text-xs text-muted-foreground">
+                {i + 1}
+              </span>
+              <Avatar
+                name={row.name}
+                accent={row.accent}
+                size="sm"
+                shape="squircle"
+              />
+              {row.name}
+            </td>
+            <td className="py-3 text-right text-muted-foreground">{row.runs}</td>
+            <td className="py-3 text-right text-muted-foreground">
+              {row.tokens.toLocaleString("en-US")}
+            </td>
+            <td className="py-3 text-right">
+              <span className="inline-flex items-center gap-2">
+                <span
+                  aria-hidden
+                  className="h-1.5 rounded-full bg-coral"
+                  style={{ width: `${(row.credits / max) * 48 + 4}px` }}
+                />
+                {row.credits.toLocaleString("en-US")}
+              </span>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}