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/PageChrome.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+/** Shared page chrome (measured): 28px/600 title, muted description, and
+ *  an optional top-right action pill. Used across the global pages. */
+export function PageChrome({
+  title,
+  description,
+  action,
+  children,
+}: {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <section className="mx-auto max-w-4xl px-8 py-12">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-xxl font-semibold tracking-tight">{title}</h1>
+          {description && (
+            <p className="pt-1 text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {action != null && <div className="shrink-0">{action}</div>}
+      </div>
+      <div className="pt-8">{children}</div>
+    </section>
+  );
+}