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]>
This commit is contained in:
Omar Sobh
co-authored by
Claude Fable 5
Claude Fable 5
parent
f3f08a8edd
commit
1bfbccf172
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Skill Library</h1>
|
||||
<p className="pt-1 text-sm text-muted-foreground">
|
||||
Browse skills published by your team and the catalog. Install them on
|
||||
a claw from its Computer → Skills app.
|
||||
</p>
|
||||
<PageChrome
|
||||
title="Skill Library"
|
||||
description="Browse skills published by your team and the catalog. Install them on a claw from its Computer → Skills app."
|
||||
>
|
||||
{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
|
||||
key={skill.id}
|
||||
className="rounded-(--radius) border border-border bg-surface-warm p-4 shadow-(--shadow-card)"
|
||||
>
|
||||
<p className="text-sm font-medium">{skill.title}</p>
|
||||
<p className="text-xxs text-muted-foreground">
|
||||
by {skill.author}
|
||||
</p>
|
||||
<p className="pt-2 text-xs text-muted-foreground">
|
||||
{skill.description}
|
||||
</p>
|
||||
<p className="pt-2 text-xxs text-muted-foreground">
|
||||
{skill.installs}{" "}
|
||||
{skill.installs === 1 ? "install" : "installs"}
|
||||
</p>
|
||||
<li key={skill.id}>
|
||||
<Card className="h-full">
|
||||
<p className="text-lg font-semibold">{skill.title}</p>
|
||||
<p className="text-xxs text-muted-foreground">
|
||||
by {skill.author}
|
||||
</p>
|
||||
<p className="pt-3 text-xs text-muted-foreground">
|
||||
{skill.description}
|
||||
</p>
|
||||
<p className="pt-4 text-xxs text-muted-foreground">
|
||||
{skill.installs}{" "}
|
||||
{skill.installs === 1 ? "install" : "installs"} on your team
|
||||
</p>
|
||||
</Card>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</PageChrome>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user