osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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]>
This commit is contained in:
Omar Sobh
2026-06-10 20:04:34 -05:00
co-authored by Claude Fable 5
parent f3f08a8edd
commit 1bfbccf172
11 changed files with 552 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/(workspace)/credits/page.tsx
+66 -39
View File
@@ -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">
<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>
<PageChrome
title="Credits"
description="Manage your balance, subscriptions, and usage history."
>
<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)">
<p className="text-xs uppercase tracking-wide text-muted-foreground">
Available credits
</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.
<Card>
<p className="text-xs tracking-wide text-muted-foreground uppercase">
Usage · last 7 days
</p>
)}
</div>
<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>
)}
</Card>
<PromoRedeem />
</section>
<PromoRedeem />
<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>
);
}