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)/apps/page.tsx

@@ -0,0 +1,29 @@
+import { z } from "zod";
+
+import { AppsDirectory } from "@/components/global/AppsDirectory";
+import { PageChrome } from "@/components/global/PageChrome";
+import { apiFetch } from "@/lib/api/http";
+
+const DirectoryAppSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string(),
+  category: z.string(),
+  connected: z.boolean(),
+});
+
+// The global Apps directory (§8.2): workspace-wide connections.
+export default async function AppsPage() {
+  const apps = await apiFetch(
+    z.array(DirectoryAppSchema),
+    "/api/apps?workspace=true",
+  );
+  return (
+    <PageChrome
+      title="Apps"
+      description="Connect the tools your claws can use. Connections here are available to your whole workspace."
+    >
+      <AppsDirectory apps={apps} />
+    </PageChrome>
+  );
+}

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

@@ -1,8 +1,12 @@
+import { Sparkles } from "lucide-react";
 import { z } from "zod";
 
+import { BuyCredits } from "@/components/global/BuyCredits";
+import { PageChrome } from "@/components/global/PageChrome";
 import { PromoRedeem } from "@/components/global/PromoRedeem";
 import { apiFetch } from "@/lib/api/http";
 import { fetchCredits } from "@/lib/api/team";
+import { Card } from "@/components/ui/Card";
 
 const UsageSchema = z.object({
   tokens_in: z.number(),
@@ -10,57 +14,80 @@ const UsageSchema = z.object({
   credits: z.number(),
 });
 
-// Credits page (§8.4): balance, 7-day usage meter, promo redemption.
+// Credits page (§8.4): balance + usage meter, promo redemption, and the
+// sales card — three cards per the reference layout.
 export default async function CreditsPage() {
   const [credits, usage] = await Promise.all([
     fetchCredits(),
     apiFetch(UsageSchema, "/api/team/usage"),
   ]);
   const burn = usage.credits;
-  // Rough runway: at the current 7-day burn, how long does the balance last?
   const runwayDays =
     burn > 0 ? Math.floor((credits.available / burn) * 7) : null;
 
   return (
-    <section className="mx-auto max-w-3xl px-8 py-12">
+    <PageChrome
-      <h1 className="text-2xl font-semibold tracking-tight">Credits</h1>
+      title="Credits"
-      <p className="pt-1 text-sm text-muted-foreground">
+      description="Manage your balance, subscriptions, and usage history."
-        Manage balance, subscriptions, and usage
+    >
-      </p>
+      <div className="flex flex-col gap-4">
+        <Card className="flex flex-wrap items-end justify-between gap-4 shadow-card">
+          <div>
+            <p className="text-xs tracking-wide text-muted-foreground uppercase">
+              Available credits
+            </p>
+            <p
+              data-testid="credit-balance"
+              className={`pt-2 font-mono text-xxxl font-semibold ${
+                credits.available < 0 ? "text-coral" : ""
+              }`}
+            >
+              {credits.available.toLocaleString("en-US")}
+            </p>
+            <p className="pt-2 text-xs text-muted-foreground">
+              Credits never expire.
+            </p>
+          </div>
+          <BuyCredits />
+        </Card>
 
-      <div className="mt-8 rounded-(--radius) border border-border bg-surface-warm p-6 shadow-(--shadow-card)">
+        <Card>
-        <p className="text-xs uppercase tracking-wide text-muted-foreground">
+          <p className="text-xs tracking-wide text-muted-foreground uppercase">
-          Available credits
+            Usage · last 7 days
-        </p>
-        <p
-          data-testid="credit-balance"
-          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>
-
-      <div className="mt-4 rounded-(--radius) border border-border bg-surface-warm p-6">
-        <p className="text-xs uppercase tracking-wide text-muted-foreground">
-          Usage · last 7 days
-        </p>
-        <p className="pt-2 text-sm">
-          {usage.credits.toLocaleString("en-US")} credits ·{" "}
-          {(usage.tokens_in + usage.tokens_out).toLocaleString("en-US")} tokens
-          ({usage.tokens_in.toLocaleString("en-US")} in /{" "}
-          {usage.tokens_out.toLocaleString("en-US")} out)
-        </p>
-        {runwayDays !== null && (
-          <p className="pt-1 text-xs text-muted-foreground">
-            ~{runwayDays} days of runway at this pace.
           </p>
-        )}
+          <p className="pt-2 text-sm">
-      </div>
+            {usage.credits.toLocaleString("en-US")} credits ·{" "}
+            {(usage.tokens_in + usage.tokens_out).toLocaleString("en-US")}{" "}
+            tokens ({usage.tokens_in.toLocaleString("en-US")} in /{" "}
+            {usage.tokens_out.toLocaleString("en-US")} out)
+          </p>
+          {runwayDays !== null && (
+            <p className="pt-1 text-xs text-muted-foreground">
+              ~{runwayDays} days of runway at this pace.
+            </p>
+          )}
+        </Card>
 
-      <PromoRedeem />
+        <PromoRedeem />
-    </section>
+
+        <Card className="flex items-center gap-4">
+          <span className="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-surface-warm-muted">
+            <Sparkles aria-hidden size={18} className="text-coral" />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium">Scaling beyond self-serve?</p>
+            <p className="text-xs text-muted-foreground">
+              Volume pricing, SSO, and dedicated support for larger teams.
+            </p>
+          </div>
+          <a
+            href="mailto:[email protected]"
+            className="rounded-radius-button border border-border px-4 py-2 text-sm text-foreground transition-colors duration-normal ease-app hover:bg-hover-bg"
+          >
+            Talk to sales
+          </a>
+        </Card>
+      </div>
+    </PageChrome>
   );
 }

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

@@ -1,6 +1,8 @@
 import { z } from "zod";
 
+import { PageChrome } from "@/components/global/PageChrome";
 import { apiFetch } from "@/lib/api/http";
+import { Card } from "@/components/ui/Card";
 
 const SkillSchema = z.object({
   id: z.string().uuid(),
@@ -14,38 +16,35 @@ const SkillSchema = z.object({
 export default async function SkillsPage() {
   const skills = await apiFetch(z.array(SkillSchema), "/api/skills");
   return (
-    <section className="mx-auto max-w-3xl px-8 py-12">
+    <PageChrome
-      <h1 className="text-2xl font-semibold tracking-tight">Skill Library</h1>
+      title="Skill Library"
-      <p className="pt-1 text-sm text-muted-foreground">
+      description="Browse skills published by your team and the catalog. Install them on a claw from its Computer → Skills app."
-        Browse skills published by your team and the catalog. Install them on
+    >
-        a claw from its Computer → Skills app.
-      </p>
       {skills.length === 0 ? (
-        <p className="pt-8 text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground">
           No skills published yet.
         </p>
       ) : (
-        <ul className="grid grid-cols-1 gap-3 pt-6 sm:grid-cols-2">
+        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           {skills.map((skill) => (
-            <li
+            <li key={skill.id}>
-              key={skill.id}
+              <Card className="h-full">
-              className="rounded-(--radius) border border-border bg-surface-warm p-4 shadow-(--shadow-card)"
+                <p className="text-lg font-semibold">{skill.title}</p>
-            >
+                <p className="text-xxs text-muted-foreground">
-              <p className="text-sm font-medium">{skill.title}</p>
+                  by {skill.author}
-              <p className="text-xxs text-muted-foreground">
+                </p>
-                by {skill.author}
+                <p className="pt-3 text-xs text-muted-foreground">
-              </p>
+                  {skill.description}
-              <p className="pt-2 text-xs text-muted-foreground">
+                </p>
-                {skill.description}
+                <p className="pt-4 text-xxs text-muted-foreground">
-              </p>
+                  {skill.installs}{" "}
-              <p className="pt-2 text-xxs text-muted-foreground">
+                  {skill.installs === 1 ? "install" : "installs"} on your team
-                {skill.installs}{" "}
+                </p>
-                {skill.installs === 1 ? "install" : "installs"}
+              </Card>
-              </p>
             </li>
           ))}
         </ul>
       )}
-    </section>
+    </PageChrome>
   );
 }

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">
+    <PageChrome
-      <h1 className="text-2xl font-semibold tracking-tight">Team</h1>
+      title="Team"
-      <p className="pt-1 text-sm text-muted-foreground">
+      description={`${members.length} ${members.length === 1 ? "member" : "members"} in your workspace`}
-        {members.length} {members.length === 1 ? "member" : "members"} in your
+    >
-        workspace
+      <TeamTabs
-      </p>
+        members={members}
-      <table className="mt-8 w-full text-left text-sm">
+        orgchart={orgchart}
-        <thead>
+        leaderboard={leaderboard}
-          <tr className="border-b border-border text-xs text-muted-foreground">
+      />
-            <th className="py-2 font-medium">Name</th>
+    </PageChrome>
-            <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>
   );
 }

frontend/src/components/global/AppsDirectory.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { useState, type FormEvent } from "react";
+
+import { SearchPill } from "@/components/ui/SearchPill";
+
+interface DirectoryApp {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  connected: boolean;
+}
+
+const CATEGORIES = [
+  "All",
+  "Productivity",
+  "Communication",
+  "Dev tools",
+  "Design",
+  "Finance",
+] as const;
+
+/** The global Apps directory (§8.2): workspace-wide connections (no
+ *  clawId), category + search filters, inline API-key connect. */
+export function AppsDirectory({ apps: initial }: { apps: DirectoryApp[] }) {
+  const [apps, setApps] = useState(initial);
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<(typeof CATEGORIES)[number]>("All");
+  const [connecting, setConnecting] = useState<string | null>(null);
+
+  async function connectKeys(event: FormEvent<HTMLFormElement>, appId: string) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const res = await fetch("/api/apps/connect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        provider: appId,
+        authType: "keys",
+        secret: form.get("secret"),
+      }),
+    });
+    if (res.ok) {
+      setApps((prev) =>
+        prev.map((a) => (a.id === appId ? { ...a, connected: true } : a)),
+      );
+    }
+    setConnecting(null);
+  }
+
+  const visible = apps.filter((app) => {
+    const q = `${app.name} ${app.category}`
+      .toLowerCase()
+      .includes(query.toLowerCase());
+    const c =
+      category === "All" ||
+      app.category.toLowerCase().includes(category.toLowerCase());
+    return q && c;
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div role="tablist" aria-label="Categories" className="flex flex-wrap gap-1.5">
+        {CATEGORIES.map((entry) => (
+          <button
+            key={entry}
+            type="button"
+            role="tab"
+            aria-selected={category === entry}
+            onClick={() => setCategory(entry)}
+            className={`rounded-radius-button px-3 py-1 text-xs font-medium transition-colors duration-normal ease-app ${
+              category === entry
+                ? "bg-foreground text-background"
+                : "bg-surface-warm text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {entry}
+          </button>
+        ))}
+      </div>
+      <SearchPill
+        aria-label="Find an app"
+        placeholder="Find an app"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <ul aria-label="App directory" className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        {visible.map((app) => (
+          <li
+            key={app.id}
+            className="rounded-3xl border border-border bg-card p-4"
+          >
+            <div className="flex items-start gap-3">
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">{app.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {app.description}
+                </p>
+              </div>
+              {app.connected ? (
+                <span className="rounded-radius-button border border-border px-2 py-0.5 text-xxs text-muted-foreground">
+                  ✓ Connected
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  aria-label={`Connect ${app.name}`}
+                  onClick={() =>
+                    setConnecting(connecting === app.id ? null : app.id)
+                  }
+                  className="inline-flex size-8 shrink-0 items-center justify-center rounded-radius-button border border-border text-muted-foreground transition-colors duration-normal ease-app hover:border-coral hover:text-foreground"
+                >
+                  <Plus aria-hidden size={15} />
+                </button>
+              )}
+            </div>
+            {connecting === app.id && (
+              <form onSubmit={(e) => connectKeys(e, app.id)} className="flex gap-2 pt-3">
+                <input
+                  name="secret"
+                  type="password"
+                  required
+                  aria-label={`${app.name} API key`}
+                  placeholder="API key / token"
+                  className="min-w-0 flex-1 rounded-xl border border-input bg-subtle px-3 py-1.5 text-xs outline-none transition-colors focus:border-coral"
+                />
+                <button
+                  type="submit"
+                  className="rounded-radius-button bg-coral px-3 py-1.5 text-xs font-medium text-white shadow-cta transition-colors duration-normal ease-app hover:bg-coral-light"
+                >
+                  Connect
+                </button>
+              </form>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/global/BuyCredits.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/Button";
+
+/** Buy-credits button (R4): only renders when Stripe is configured
+ *  server-side (honest degradation); opens a real Checkout Session. */
+export function BuyCredits() {
+  const [enabled, setEnabled] = useState(false);
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/billing/config")
+      .then((res) => res.json())
+      .then((cfg) => setEnabled(Boolean(cfg.buy_credits_enabled)))
+      .catch(() => setEnabled(false));
+  }, []);
+
+  if (!enabled) return null;
+
+  async function buy() {
+    setPending(true);
+    const res = await fetch("/api/credits/checkout", { method: "POST" });
+    if (res.ok) {
+      const { url } = (await res.json()) as { url: string };
+      window.location.href = url;
+    } else {
+      setPending(false);
+    }
+  }
+
+  return (
+    <Button variant="cream" onClick={buy} disabled={pending}>
+      {pending ? "Opening checkout…" : "Buy credits"}
+    </Button>
+  );
+}

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>
+  );
+}

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>
+  );
+}

frontend/src/components/shell/ShellNav.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { CreditCard, ShieldCheck, Users, Zap } from "lucide-react";
+import { Blocks, CreditCard, ShieldCheck, Users, Zap } from "lucide-react";
 
 import { GlobalNavItem } from "./GlobalNavItem";
 
 const NAV_ITEMS = [
   { href: "/skills", label: "Skills", icon: Zap },
+  { href: "/apps", label: "Apps", icon: Blocks },
   { href: "/approvals", label: "Approvals", icon: ShieldCheck },
   { href: "/team", label: "Team", icon: Users },
   { href: "/credits", label: "Credits", icon: CreditCard },

frontend/src/components/wizard/CreateClawForm.tsx

@@ -114,7 +114,7 @@ export function CreateClawForm() {
           <span
             key={s}
             className={`h-1 flex-1 rounded-full ${
-              i <= stepIndex ? "bg-accent" : "bg-surface-warm-muted"
+              i <= stepIndex ? "bg-coral" : "bg-surface-warm-muted"
             }`}
           />
         ))}
@@ -134,7 +134,7 @@ export function CreateClawForm() {
                   aria-label={`Accent ${color}`}
                   onClick={() => setDraft({ ...draft, accent: color })}
                   style={{ backgroundColor: color }}
-                  className={`size-5 rounded-full ${
+                  className={`size-5 rounded-full motion-safe:animate-[create-claw-swatch-enter_var(--duration-fast)_var(--ease-app)] ${
                     draft.accent === color
                       ? "ring-2 ring-foreground ring-offset-2 ring-offset-background"
                       : ""
@@ -152,7 +152,7 @@ export function CreateClawForm() {
                 onChange={(e) => setDraft({ ...draft, name: e.target.value })}
                 aria-label="Name"
                 placeholder="Scout"
-                className="min-w-0 flex-1 rounded-(--radius) border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none focus:border-accent"
+                className="min-w-0 flex-1 rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
               />
               <button
                 type="button"
@@ -171,7 +171,7 @@ export function CreateClawForm() {
               onChange={(e) => setDraft({ ...draft, jobTitle: e.target.value })}
               aria-label="Job title"
               placeholder="Research Analyst"
-              className="rounded-(--radius) border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none focus:border-accent"
+              className="rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
             />
           </label>
           <label className="flex flex-col gap-1 text-xs text-muted-foreground">
@@ -184,7 +184,7 @@ export function CreateClawForm() {
               rows={3}
               aria-label="Job description"
               placeholder="Describe how this claw should think..."
-              className="rounded-(--radius) border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none focus:border-accent"
+              className="rounded-xl border border-input bg-subtle px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-coral"
             />
             <span className="text-xxs">Becomes part of its system prompt.</span>
           </label>
@@ -192,7 +192,7 @@ export function CreateClawForm() {
             type="button"
             disabled={!draft.name || !draft.jobTitle}
             onClick={() => setParams({ step: "access" })}
-            className="rounded-(--radius-button) bg-accent px-4 py-2 text-sm font-medium text-background hover:bg-coral-light disabled:opacity-40"
+            className="rounded-radius-button bg-coral px-4 py-2 text-sm font-medium text-white shadow-cta transition-colors duration-normal ease-app hover:bg-coral-light disabled:opacity-40"
           >
             Continue →
           </button>
@@ -237,7 +237,7 @@ export function CreateClawForm() {
             <button
               type="button"
               onClick={() => setParams({ step: "slack" })}
-              className="rounded-(--radius-button) bg-accent px-4 py-2 text-sm font-medium text-background hover:bg-coral-light"
+              className="rounded-radius-button bg-coral px-4 py-2 text-sm font-medium text-white shadow-cta transition-colors duration-normal ease-app hover:bg-coral-light"
             >
               Continue →
             </button>
@@ -263,7 +263,7 @@ export function CreateClawForm() {
             <button
               type="button"
               onClick={() => setConfirming(true)}
-              className="rounded-(--radius-button) bg-accent px-4 py-2 text-sm font-medium text-background shadow-(--shadow-cta) hover:bg-coral-light"
+              className="rounded-radius-button bg-coral px-4 py-2 text-sm font-medium text-white shadow-cta transition-colors duration-normal ease-app hover:bg-coral-light"
             >
               Review &amp; create
             </button>
@@ -292,7 +292,7 @@ export function CreateClawForm() {
             <button
               type="button"
               onClick={create}
-              className="rounded-(--radius-button) bg-accent px-4 py-1.5 text-xs font-medium text-background shadow-(--shadow-cta) hover:bg-coral-light"
+              className="rounded-radius-button bg-coral px-4 py-1.5 text-xs font-medium text-white shadow-cta transition-colors duration-normal ease-app hover:bg-coral-light"
             >
               Create claw
             </button>

frontend/src/lib/api/team.ts

@@ -31,3 +31,28 @@ export function fetchCredits(): Promise<Credits> {
 export function fetchPermissions(): Promise<Permissions> {
   return apiFetch(PermissionsSchema, "/api/team/permissions");
 }
+
+export interface OrgChartNode {
+  user: { id: string; display_name: string; role: string; email: string };
+  claws: { id: string; name: string; job_title: string; accent: string }[];
+}
+
+export interface LeaderboardRow {
+  id: string;
+  name: string;
+  accent: string;
+  credits: number;
+  tokens: number;
+  runs: number;
+}
+
+export function fetchOrgChart(): Promise<OrgChartNode[]> {
+  return apiFetch(z.array(z.any()) as z.ZodType<OrgChartNode[]>, "/api/team/orgchart");
+}
+
+export function fetchLeaderboard(): Promise<LeaderboardRow[]> {
+  return apiFetch(
+    z.array(z.any()) as z.ZodType<LeaderboardRow[]>,
+    "/api/team/leaderboard",
+  );
+}