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)/skills/page.tsx
+23 -24
View File
@@ -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>
);
}