Features PageCopy Anchor Link

One page that outlines every user-facing surface in the app: each feature's name, a one-line description, its route, and a link to its long-form doc, grouped into seven categories and filtered by a search box.

• Route: /practice/features
• Panel: apps/debate-ai.com/lib/ui/features/FeaturesPanel.tsx (catalog data lives in debate-webview's src/lib/feature-catalog.ts)

Why this existsCopy Anchor Link

Nothing in the app listed everything it does — the dock's Settings menu is a flat list of forty-odd items, /research and /coaching each tab across one package's panels, and the feature catalog deliberately omits core workspaces and standings. This page is the map.

What it showsCopy Anchor Link

The same banner and badge rows as the repository's root README.md, a header count line, a strip of the five workspace screenshots from the README (CARDS, FIAT, LEARN, STREAM, REASON) each linking to its route, the CARDS overview and seven-point vision (anchored at #cards-vision), a Downloads section under the badges (the Chrome extension install button, which used to sit on the card search's empty state), a search box (matching title/description/route/hidden tags), and a tab bar of the feature categories (Core Workspaces, Evidence & Research, Team Collaboration, Flowing & Round Analysis, Pre-Round Intelligence, Practice & Coaching, Recognition & Progress), each tab showing its feature count. One category is shown at a time: the first tab is selected on load, clicking a tab shows only that category's feature cards, and a #<category> link (for example /features#practice) opens on that tab. Searching narrows every tab's count, and if the selected tab has no matches the first tab that does is shown. Each feature card links to its route and docs page.

Pointing at a card lights it up — a gradient that follows the cursor, a glowing border and a coloured title — in a shade of its own, so neighbouring cards never come up the same colour.

How it worksCopy Anchor Link

debate-webview's src/lib/feature-catalog.ts holds the pure data (APP_FEATURES, buildFeatureSections, searchFeatures); FeaturesPanel.tsx renders it. Titles/descriptions are copied from each route's own metadata. The README's banner, badges and imgur screenshots are mirrored in features/readme-media.ts; a test compares it against README.md and fails when the two drift, so edit the README first and then the mirror.

Known gapsCopy Anchor Link

The catalog is a hand-maintained registry — a new route has to be added to it separately.