From 3c5985f01290f99b3f1cc542a17bc0e1ce002428 Mon Sep 17 00:00:00 2001 From: jlightner Date: Fri, 3 Apr 2026 04:29:21 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Homepage=20displays=20a=20stats=20score?= =?UTF-8?q?card=20showing=20live=20article=20and=20crea=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "frontend/src/api/public-client.ts" - "frontend/src/pages/Home.tsx" - "frontend/src/App.css" GSD-Task: S03/T02 --- .gsd/milestones/M015/slices/S03/S03-PLAN.md | 2 +- .../M015/slices/S03/tasks/T01-VERIFY.json | 9 +++ .../M015/slices/S03/tasks/T02-SUMMARY.md | 81 +++++++++++++++++++ frontend/src/App.css | 36 +++++++++ frontend/src/api/public-client.ts | 11 +++ frontend/src/pages/Home.tsx | 33 ++++++++ 6 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 .gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json create mode 100644 .gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md diff --git a/.gsd/milestones/M015/slices/S03/S03-PLAN.md b/.gsd/milestones/M015/slices/S03/S03-PLAN.md index bf5f972..8eede74 100644 --- a/.gsd/milestones/M015/slices/S03/S03-PLAN.md +++ b/.gsd/milestones/M015/slices/S03/S03-PLAN.md @@ -35,7 +35,7 @@ - Estimate: 20m - Files: backend/routers/stats.py, backend/main.py - Verify: curl -s http://ub01:8096/api/v1/stats | python3 -c "import sys,json; d=json.load(sys.stdin); assert d['technique_count']>0 and d['creator_count']>0" -- [ ] **T02: Add homepage stats scorecard section with live counts from /api/v1/stats** — Wire up the frontend to fetch stats from the new endpoint and render a scorecard section on the homepage matching the dark/cyan design. +- [x] **T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design** — Wire up the frontend to fetch stats from the new endpoint and render a scorecard section on the homepage matching the dark/cyan design. ## Steps diff --git a/.gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json b/.gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json new file mode 100644 index 0000000..83fa611 --- /dev/null +++ b/.gsd/milestones/M015/slices/S03/tasks/T01-VERIFY.json @@ -0,0 +1,9 @@ +{ + "schemaVersion": 1, + "taskId": "T01", + "unitId": "M015/S03/T01", + "timestamp": 1775190358375, + "passed": true, + "discoverySource": "none", + "checks": [] +} diff --git a/.gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md b/.gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md new file mode 100644 index 0000000..032195e --- /dev/null +++ b/.gsd/milestones/M015/slices/S03/tasks/T02-SUMMARY.md @@ -0,0 +1,81 @@ +--- +id: T02 +parent: S03 +milestone: M015 +provides: [] +requires: [] +affects: [] +key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/Home.tsx", "frontend/src/App.css"] +key_decisions: ["Used existing --color-* CSS custom properties to match real codebase conventions"] +patterns_established: [] +drill_down_paths: [] +observability_surfaces: [] +duration: "" +verification_result: "npm run build exits 0. API returns 200 with technique_count:21 and creator_count:7. Browser assertion confirms scorecard visible with correct text and selector (.home-stats). All slice-level curl checks pass." +completed_at: 2026-04-03T04:29:08.090Z +blocker_discovered: false +--- + +# T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design + +> Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design + +## What Happened +--- +id: T02 +parent: S03 +milestone: M015 +key_files: + - frontend/src/api/public-client.ts + - frontend/src/pages/Home.tsx + - frontend/src/App.css +key_decisions: + - Used existing --color-* CSS custom properties to match real codebase conventions +duration: "" +verification_result: passed +completed_at: 2026-04-03T04:29:08.090Z +blocker_discovered: false +--- + +# T02: Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design + +**Homepage displays a stats scorecard showing live article and creator counts from /api/v1/stats in cyan-on-dark design** + +## What Happened + +Added StatsResponse interface and fetchStats() to public-client.ts, wired up Home.tsx with state/effect/render for a scorecard section between nav-cards and random button, and added CSS using existing design tokens (--color-accent, --color-bg-surface, --color-border, --color-text-muted). Build passes, container rebuilt on ub01, and browser verification confirms "21 ARTICLES" and "7 CREATORS" rendering correctly. + +## Verification + +npm run build exits 0. API returns 200 with technique_count:21 and creator_count:7. Browser assertion confirms scorecard visible with correct text and selector (.home-stats). All slice-level curl checks pass. + +## Verification Evidence + +| # | Command | Exit Code | Verdict | Duration | +|---|---------|-----------|---------|----------| +| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 3200ms | +| 2 | `curl -s http://ub01:8096/api/v1/stats | python3 assert counts > 0` | 0 | ✅ pass | 200ms | +| 3 | `curl -s -o /dev/null -w '%{http_code}' http://ub01:8096/api/v1/stats` | 0 | ✅ pass | 100ms | +| 4 | `browser_assert: 5 checks (text_visible + selector_visible)` | 0 | ✅ pass | 500ms | + + +## Deviations + +Used real CSS custom property names (--color-accent not --accent). Used correct compose service name (chrysopedia-web not chrysopedia-web-8096). + +## Known Issues + +None. + +## Files Created/Modified + +- `frontend/src/api/public-client.ts` +- `frontend/src/pages/Home.tsx` +- `frontend/src/App.css` + + +## Deviations +Used real CSS custom property names (--color-accent not --accent). Used correct compose service name (chrysopedia-web not chrysopedia-web-8096). + +## Known Issues +None. diff --git a/frontend/src/App.css b/frontend/src/App.css index f4a142f..56ce400 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1451,6 +1451,42 @@ a.app-footer__repo:hover { line-height: 1.4; } +/* ── Stats scorecard ──────────────────────────────────────────────────── */ + +.home-stats { + display: flex; + justify-content: center; + gap: 2.5rem; + max-width: 36rem; + margin: 0 auto 1.5rem; + padding: 1rem 1.5rem; + background: var(--color-bg-surface); + border: 1px solid var(--color-border); + border-radius: 0.625rem; +} + +.home-stats__metric { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.125rem; +} + +.home-stats__number { + font-size: 1.75rem; + font-weight: 700; + color: var(--color-accent); + font-variant-numeric: tabular-nums; + line-height: 1.2; +} + +.home-stats__label { + font-size: 0.75rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + /* ── Recently Added section ───────────────────────────────────────────────── */ /* ── Featured technique spotlight ──────────────────────────────────────── */ diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts index 04c62a5..d1d2572 100644 --- a/frontend/src/api/public-client.ts +++ b/frontend/src/api/public-client.ts @@ -306,6 +306,17 @@ export async function fetchTechniqueVersion( ); } +// ── Stats ───────────────────────────────────────────────────────────────────── + +export interface StatsResponse { + technique_count: number; + creator_count: number; +} + +export async function fetchStats(): Promise { + return request(`${BASE}/stats`); +} + // ── Topics ─────────────────────────────────────────────────────────────────── export async function fetchTopics(): Promise { diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 8dac13e..97fbaa6 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -15,7 +15,9 @@ import { fetchTechniques, fetchTopics, fetchRandomTechnique, + fetchStats, type TechniqueListItem, + type StatsResponse, } from "../api/public-client"; export default function Home() { @@ -26,6 +28,7 @@ export default function Home() { const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([]); const [randomLoading, setRandomLoading] = useState(false); const [randomError, setRandomError] = useState(false); + const [stats, setStats] = useState(null); const navigate = useNavigate(); const handleRandomTechnique = async () => { @@ -96,6 +99,22 @@ export default function Home() { }; }, []); + // Load stats + useEffect(() => { + let cancelled = false; + void (async () => { + try { + const data = await fetchStats(); + if (!cancelled) setStats(data); + } catch { + // optional section — silently ignore + } + })(); + return () => { + cancelled = true; + }; + }, []); + return (
{/* Hero search */} @@ -176,6 +195,20 @@ export default function Home() { + {/* Stats scorecard */} + {stats && ( +
+
+ {stats.technique_count} + Articles +
+
+ {stats.creator_count} + Creators +
+
+ )} + {/* Random technique discovery */}