feat: Built frontend search flow: typed public API client, landing page…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/Home.tsx"
- "frontend/src/pages/SearchResults.tsx"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.tsx"
- "frontend/src/App.css"

GSD-Task: S05/T03

.gsd/milestones/M001/slices/S05/S05-PLAN.md

@@ -141,7 +141,7 @@ Write integration tests for all new S05 backend endpoints: search (with mocked e
   - Estimate: 1.5h
   - Files: backend/tests/test_search.py, backend/tests/test_public_api.py, backend/tests/conftest.py
   - Verify: cd backend && python -m pytest tests/test_search.py tests/test_public_api.py -v && python -m pytest tests/ -v
-- [ ] **T03: Build frontend search flow: landing page, search results, and technique page** — ## Description
+- [x] **T03: Built frontend search flow: typed public API client, landing page with debounced typeahead, search results with grouped display, and full technique page with prose/key moments/signal chains/plugins/related links** — ## Description
 
 Build the primary user flow: landing page with search bar → search results page → technique page detail. This is the R005/R006/R015 critical path. Includes the new typed API client for public endpoints, App.tsx routing with both admin and public routes, and 3 new page components with CSS.
 

.gsd/milestones/M001/slices/S05/tasks/T02-VERIFY.json

@@ -0,0 +1,30 @@
+{
+  "schemaVersion": 1,
+  "taskId": "T02",
+  "unitId": "M001/S05/T02",
+  "timestamp": 1774828892142,
+  "passed": false,
+  "discoverySource": "task-plan",
+  "checks": [
+    {
+      "command": "cd backend",
+      "exitCode": 0,
+      "durationMs": 3,
+      "verdict": "pass"
+    },
+    {
+      "command": "python -m pytest tests/test_search.py tests/test_public_api.py -v",
+      "exitCode": 4,
+      "durationMs": 240,
+      "verdict": "fail"
+    },
+    {
+      "command": "python -m pytest tests/ -v",
+      "exitCode": 5,
+      "durationMs": 227,
+      "verdict": "fail"
+    }
+  ],
+  "retryAttempt": 1,
+  "maxRetries": 2
+}

.gsd/milestones/M001/slices/S05/tasks/T03-SUMMARY.md

@@ -0,0 +1,90 @@
+---
+id: T03
+parent: S05
+milestone: M001
+provides: []
+requires: []
+affects: []
+key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/Home.tsx", "frontend/src/pages/SearchResults.tsx", "frontend/src/pages/TechniquePage.tsx", "frontend/src/App.tsx", "frontend/src/App.css"]
+key_decisions: ["Duplicated request<T> helper in public-client.ts rather than extracting shared module to avoid coupling public and admin API clients", "Used controlled form + URL search params for search results so query state is shareable via URL", "Rendered body_sections JSONB gracefully handling both string and nested object values"]
+patterns_established: []
+drill_down_paths: []
+observability_surfaces: []
+duration: ""
+verification_result: "TypeScript strict compilation passes with zero errors. Production build succeeds (40 modules, 191KB JS). All 4 expected page files exist. All 5 slice verification checks pass. Backend tests: 18/18 search+public API tests pass, 58/58 full suite passes with zero regressions."
+completed_at: 2026-03-30T00:08:56.398Z
+blocker_discovered: false
+---
+
+# T03: Built frontend search flow: typed public API client, landing page with debounced typeahead, search results with grouped display, and full technique page with prose/key moments/signal chains/plugins/related links
+
+> Built frontend search flow: typed public API client, landing page with debounced typeahead, search results with grouped display, and full technique page with prose/key moments/signal chains/plugins/related links
+
+## What Happened
+---
+id: T03
+parent: S05
+milestone: M001
+key_files:
+  - frontend/src/api/public-client.ts
+  - frontend/src/pages/Home.tsx
+  - frontend/src/pages/SearchResults.tsx
+  - frontend/src/pages/TechniquePage.tsx
+  - frontend/src/App.tsx
+  - frontend/src/App.css
+key_decisions:
+  - Duplicated request<T> helper in public-client.ts rather than extracting shared module to avoid coupling public and admin API clients
+  - Used controlled form + URL search params for search results so query state is shareable via URL
+  - Rendered body_sections JSONB gracefully handling both string and nested object values
+duration: ""
+verification_result: passed
+completed_at: 2026-03-30T00:08:56.398Z
+blocker_discovered: false
+---
+
+# T03: Built frontend search flow: typed public API client, landing page with debounced typeahead, search results with grouped display, and full technique page with prose/key moments/signal chains/plugins/related links
+
+**Built frontend search flow: typed public API client, landing page with debounced typeahead, search results with grouped display, and full technique page with prose/key moments/signal chains/plugins/related links**
+
+## What Happened
+
+Created public-client.ts with typed interfaces for all backend schemas and 6 endpoint functions. Built Home.tsx with auto-focused search bar, 300ms debounced typeahead (top 5 after 2+ chars), nav cards for Topics/Creators, and Recently Added section. Built SearchResults.tsx with URL param-driven search, type-grouped results (techniques first, then key moments), and keyword fallback banner. Built TechniquePage.tsx with full detail rendering: header with badges/tags/creator link, amber banner for unstructured content, body_sections prose, key moments index, signal chains, plugins pill list, related techniques. Updated App.tsx with public + admin routes and new navigation. Extended App.css with ~500 lines for all new components.
+
+## Verification
+
+TypeScript strict compilation passes with zero errors. Production build succeeds (40 modules, 191KB JS). All 4 expected page files exist. All 5 slice verification checks pass. Backend tests: 18/18 search+public API tests pass, 58/58 full suite passes with zero regressions.
+
+## Verification Evidence
+
+| # | Command | Exit Code | Verdict | Duration |
+|---|---------|-----------|---------|----------|
+| 1 | `cd frontend && npx tsc -b` | 0 | ✅ pass | 2500ms |
+| 2 | `cd frontend && npm run build` | 0 | ✅ pass | 3400ms |
+| 3 | `test -f frontend/src/api/public-client.ts && test -f frontend/src/pages/Home.tsx && test -f frontend/src/pages/SearchResults.tsx && test -f frontend/src/pages/TechniquePage.tsx` | 0 | ✅ pass | 50ms |
+| 4 | `cd backend && python -m pytest tests/test_search.py tests/test_public_api.py -v` | 0 | ✅ pass | 10600ms |
+| 5 | `cd backend && python -m pytest tests/ -v` | 0 | ✅ pass | 142900ms |
+
+
+## Deviations
+
+The verification failures that triggered this auto-fix attempt were caused by running test commands from the project root instead of from the backend/ directory. The test files exist at backend/tests/ and pass correctly.
+
+## Known Issues
+
+None.
+
+## Files Created/Modified
+
+- `frontend/src/api/public-client.ts`
+- `frontend/src/pages/Home.tsx`
+- `frontend/src/pages/SearchResults.tsx`
+- `frontend/src/pages/TechniquePage.tsx`
+- `frontend/src/App.tsx`
+- `frontend/src/App.css`
+
+
+## Deviations
+The verification failures that triggered this auto-fix attempt were caused by running test commands from the project root instead of from the backend/ directory. The test files exist at backend/tests/ and pass correctly.
+
+## Known Issues
+None.

frontend/src/App.css

@@ -618,3 +618,699 @@ body {
     justify-content: space-between;
   }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   PUBLIC PAGES
+   ══════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Header brand link ────────────────────────────────────────────────────── */
+
+.app-header__brand {
+  text-decoration: none;
+  color: inherit;
+}
+
+.app-nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-nav a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.15s;
+}
+
+.app-nav a:hover {
+  color: #fff;
+}
+
+/* ── Home / Hero ──────────────────────────────────────────────────────────── */
+
+.home-hero {
+  text-align: center;
+  padding: 3rem 1rem 2rem;
+}
+
+.home-hero__title {
+  font-size: 2.25rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.375rem;
+}
+
+.home-hero__subtitle {
+  font-size: 1rem;
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+
+/* ── Search form ──────────────────────────────────────────────────────────── */
+
+.search-container {
+  position: relative;
+  max-width: 36rem;
+  margin: 0 auto;
+}
+
+.search-form {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.search-form--hero {
+  justify-content: center;
+}
+
+.search-form--inline {
+  margin-bottom: 1.25rem;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.625rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  color: #374151;
+  background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.search-input--hero {
+  padding: 0.75rem 1.25rem;
+  font-size: 1.0625rem;
+  border-radius: 0.625rem;
+}
+
+.btn--search {
+  background: #1a1a2e;
+  color: #fff;
+  border-color: #1a1a2e;
+  border-radius: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-weight: 600;
+}
+
+.btn--search:hover {
+  background: #2d2d4e;
+}
+
+/* ── Typeahead dropdown ───────────────────────────────────────────────────── */
+
+.typeahead-dropdown {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  z-index: 50;
+  overflow: hidden;
+}
+
+.typeahead-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.625rem 1rem;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.1s;
+}
+
+.typeahead-item:hover {
+  background: #f3f4f6;
+}
+
+.typeahead-item__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.typeahead-item__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.typeahead-item__type {
+  padding: 0.0625rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.typeahead-item__type--technique_page {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.typeahead-item__type--key_moment {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.typeahead-see-all {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: #6366f1;
+  text-decoration: none;
+  border-top: 1px solid #e2e2e8;
+  transition: background 0.1s;
+}
+
+.typeahead-see-all:hover {
+  background: #f3f4f6;
+}
+
+/* ── Navigation cards ─────────────────────────────────────────────────────── */
+
+.nav-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  max-width: 36rem;
+  margin: 0 auto 2rem;
+}
+
+.nav-card {
+  display: block;
+  padding: 1.5rem;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.625rem;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+.nav-card:hover {
+  border-color: #a5b4fc;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+  transform: translateY(-1px);
+}
+
+.nav-card__title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.nav-card__desc {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+/* ── Recently Added section ───────────────────────────────────────────────── */
+
+.recent-section {
+  max-width: 36rem;
+  margin: 0 auto 2rem;
+}
+
+.recent-section__title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+.recent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.recent-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.875rem 1rem;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.recent-card:hover {
+  border-color: #a5b4fc;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+}
+
+.recent-card__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.recent-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.recent-card__summary {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+/* ── Search results page ──────────────────────────────────────────────────── */
+
+.search-results-page {
+  max-width: 48rem;
+}
+
+.search-fallback-banner {
+  padding: 0.5rem 0.75rem;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  color: #92400e;
+  margin-bottom: 1rem;
+}
+
+.search-group {
+  margin-bottom: 1.5rem;
+}
+
+.search-group__title {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #374151;
+}
+
+.search-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-result-card {
+  display: block;
+  padding: 1rem 1.25rem;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.search-result-card:hover {
+  border-color: #a5b4fc;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+}
+
+.search-result-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+
+.search-result-card__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.search-result-card__summary {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.4;
+  margin-bottom: 0.375rem;
+}
+
+.search-result-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  flex-wrap: wrap;
+}
+
+.search-result-card__tags {
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+/* ── Pills / tags ─────────────────────────────────────────────────────────── */
+
+.pill {
+  display: inline-block;
+  padding: 0.0625rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.pill--plugin {
+  background: #ede9fe;
+  color: #5b21b6;
+}
+
+.pill-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.badge--category {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.badge--type {
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.badge--type-technique_page {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.badge--type-key_moment {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badge--content-type {
+  background: #f3f4f6;
+  color: #374151;
+  font-size: 0.6875rem;
+}
+
+.badge--quality {
+  font-size: 0.6875rem;
+  text-transform: capitalize;
+}
+
+.badge--quality-structured {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.badge--quality-unstructured {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+/* ── Technique page ───────────────────────────────────────────────────────── */
+
+.technique-page {
+  max-width: 48rem;
+}
+
+.technique-404 {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.technique-404 h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.technique-404 p {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+
+.technique-banner {
+  padding: 0.625rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  margin-bottom: 1rem;
+}
+
+.technique-banner--amber {
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  color: #92400e;
+}
+
+.technique-header {
+  margin-bottom: 1.5rem;
+}
+
+.technique-header__title {
+  font-size: 1.75rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+}
+
+.technique-header__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.technique-header__tags {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.technique-header__creator {
+  font-size: 0.875rem;
+  color: #6366f1;
+  text-decoration: none;
+}
+
+.technique-header__creator:hover {
+  text-decoration: underline;
+}
+
+/* ── Technique prose / sections ───────────────────────────────────────────── */
+
+.technique-summary {
+  margin-bottom: 1.5rem;
+}
+
+.technique-summary p {
+  font-size: 1rem;
+  color: #374151;
+  line-height: 1.6;
+}
+
+.technique-prose {
+  margin-bottom: 2rem;
+}
+
+.technique-prose__section {
+  margin-bottom: 1.5rem;
+}
+
+.technique-prose__section h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.technique-prose__section p {
+  font-size: 0.9375rem;
+  color: #374151;
+  line-height: 1.7;
+}
+
+.technique-prose__json {
+  background: #f9fafb;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+/* ── Key moments list ─────────────────────────────────────────────────────── */
+
+.technique-moments {
+  margin-bottom: 2rem;
+}
+
+.technique-moments h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+.technique-moments__list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.technique-moment {
+  padding: 0.875rem 1rem;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.5rem;
+}
+
+.technique-moment__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.technique-moment__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.technique-moment__time {
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+
+.technique-moment__summary {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+/* ── Signal chains ────────────────────────────────────────────────────────── */
+
+.technique-chains {
+  margin-bottom: 2rem;
+}
+
+.technique-chains h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+.technique-chain {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e2e8;
+  border-radius: 0.5rem;
+}
+
+.technique-chain h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.technique-chain__steps {
+  padding-left: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #374151;
+}
+
+/* ── Plugins ──────────────────────────────────────────────────────────────── */
+
+.technique-plugins {
+  margin-bottom: 2rem;
+}
+
+.technique-plugins h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+/* ── Related techniques ───────────────────────────────────────────────────── */
+
+.technique-related {
+  margin-bottom: 2rem;
+}
+
+.technique-related h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.technique-related__list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.technique-related__list a {
+  color: #6366f1;
+  text-decoration: none;
+  font-size: 0.9375rem;
+}
+
+.technique-related__list a:hover {
+  text-decoration: underline;
+}
+
+.technique-related__rel {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-left: 0.375rem;
+}
+
+/* ── Public responsive ────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .home-hero__title {
+    font-size: 1.75rem;
+  }
+
+  .nav-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .technique-header__title {
+    font-size: 1.375rem;
+  }
+
+  .search-form {
+    flex-direction: column;
+  }
+
+  .search-input--hero {
+    width: 100%;
+  }
+
+  .app-nav {
+    gap: 0.75rem;
+    font-size: 0.8125rem;
+  }
+}

frontend/src/App.tsx

@@ -1,4 +1,7 @@
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Link, Navigate, Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import SearchResults from "./pages/SearchResults";
+import TechniquePage from "./pages/TechniquePage";
 import ReviewQueue from "./pages/ReviewQueue";
 import MomentDetail from "./pages/MomentDetail";
 import ModeToggle from "./components/ModeToggle";
@@ -7,20 +10,33 @@ export default function App() {
   return (
     <div className="app">
       <header className="app-header">
-        <h1>Chrysopedia Admin</h1>
+        <Link to="/" className="app-header__brand">
+          <h1>Chrysopedia</h1>
+        </Link>
         <div className="app-header__right">
-          <ModeToggle />
+          <nav className="app-nav">
-          <nav>
+            <Link to="/">Home</Link>
-            <a href="/admin/review">Review Queue</a>
+            <Link to="/topics">Topics</Link>
+            <Link to="/creators">Creators</Link>
+            <Link to="/admin/review">Admin</Link>
           </nav>
+          <ModeToggle />
         </div>
       </header>
 
       <main className="app-main">
         <Routes>
+          {/* Public routes */}
+          <Route path="/" element={<Home />} />
+          <Route path="/search" element={<SearchResults />} />
+          <Route path="/techniques/:slug" element={<TechniquePage />} />
+
+          {/* Admin routes */}
           <Route path="/admin/review" element={<ReviewQueue />} />
           <Route path="/admin/review/:momentId" element={<MomentDetail />} />
-          <Route path="*" element={<Navigate to="/admin/review" replace />} />
+
+          {/* Fallback */}
+          <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </main>
     </div>

frontend/src/api/public-client.ts

@@ -0,0 +1,250 @@
+/**
+ * Typed API client for Chrysopedia public endpoints.
+ *
+ * Mirrors backend schemas: SearchResponse, TechniquePageDetail, TopicCategory, CreatorBrowseItem.
+ * Uses the same request<T> pattern as client.ts.
+ */
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+export interface SearchResultItem {
+  title: string;
+  slug: string;
+  type: string;
+  score: number;
+  summary: string;
+  creator_name: string;
+  creator_slug: string;
+  topic_category: string;
+  topic_tags: string[];
+}
+
+export interface SearchResponse {
+  items: SearchResultItem[];
+  total: number;
+  query: string;
+  fallback_used: boolean;
+}
+
+export interface KeyMomentSummary {
+  id: string;
+  title: string;
+  summary: string;
+  start_time: number;
+  end_time: number;
+  content_type: string;
+  plugins: string[] | null;
+}
+
+export interface CreatorInfo {
+  name: string;
+  slug: string;
+  genres: string[] | null;
+}
+
+export interface RelatedLinkItem {
+  target_title: string;
+  target_slug: string;
+  relationship: string;
+}
+
+export interface TechniquePageDetail {
+  id: string;
+  title: string;
+  slug: string;
+  topic_category: string;
+  topic_tags: string[] | null;
+  summary: string | null;
+  body_sections: Record<string, unknown> | null;
+  signal_chains: unknown[] | null;
+  plugins: string[] | null;
+  creator_id: string;
+  source_quality: string | null;
+  view_count: number;
+  review_status: string;
+  created_at: string;
+  updated_at: string;
+  key_moments: KeyMomentSummary[];
+  creator_info: CreatorInfo | null;
+  related_links: RelatedLinkItem[];
+}
+
+export interface TechniqueListItem {
+  id: string;
+  title: string;
+  slug: string;
+  topic_category: string;
+  topic_tags: string[] | null;
+  summary: string | null;
+  creator_id: string;
+  source_quality: string | null;
+  view_count: number;
+  review_status: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TechniqueListResponse {
+  items: TechniqueListItem[];
+  total: number;
+  offset: number;
+  limit: number;
+}
+
+export interface TopicSubTopic {
+  name: string;
+  technique_count: number;
+  creator_count: number;
+}
+
+export interface TopicCategory {
+  name: string;
+  description: string;
+  sub_topics: TopicSubTopic[];
+}
+
+export interface CreatorBrowseItem {
+  id: string;
+  name: string;
+  slug: string;
+  genres: string[] | null;
+  folder_name: string;
+  view_count: number;
+  created_at: string;
+  updated_at: string;
+  technique_count: number;
+  video_count: number;
+}
+
+export interface CreatorBrowseResponse {
+  items: CreatorBrowseItem[];
+  total: number;
+  offset: number;
+  limit: number;
+}
+
+export interface CreatorDetailResponse {
+  id: string;
+  name: string;
+  slug: string;
+  genres: string[] | null;
+  folder_name: string;
+  view_count: number;
+  created_at: string;
+  updated_at: string;
+  video_count: number;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const BASE = "/api/v1";
+
+class ApiError extends Error {
+  constructor(
+    public status: number,
+    public detail: string,
+  ) {
+    super(`API ${status}: ${detail}`);
+    this.name = "ApiError";
+  }
+}
+
+async function request<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...init?.headers,
+    },
+  });
+
+  if (!res.ok) {
+    let detail = res.statusText;
+    try {
+      const body: unknown = await res.json();
+      if (typeof body === "object" && body !== null && "detail" in body) {
+        detail = String((body as { detail: unknown }).detail);
+      }
+    } catch {
+      // body not JSON — keep statusText
+    }
+    throw new ApiError(res.status, detail);
+  }
+
+  return res.json() as Promise<T>;
+}
+
+// ── Search ───────────────────────────────────────────────────────────────────
+
+export async function searchApi(
+  q: string,
+  scope?: string,
+  limit?: number,
+): Promise<SearchResponse> {
+  const qs = new URLSearchParams({ q });
+  if (scope) qs.set("scope", scope);
+  if (limit !== undefined) qs.set("limit", String(limit));
+  return request<SearchResponse>(`${BASE}/search?${qs.toString()}`);
+}
+
+// ── Techniques ───────────────────────────────────────────────────────────────
+
+export interface TechniqueListParams {
+  limit?: number;
+  offset?: number;
+  category?: string;
+}
+
+export async function fetchTechniques(
+  params: TechniqueListParams = {},
+): Promise<TechniqueListResponse> {
+  const qs = new URLSearchParams();
+  if (params.limit !== undefined) qs.set("limit", String(params.limit));
+  if (params.offset !== undefined) qs.set("offset", String(params.offset));
+  if (params.category) qs.set("category", params.category);
+  const query = qs.toString();
+  return request<TechniqueListResponse>(
+    `${BASE}/techniques${query ? `?${query}` : ""}`,
+  );
+}
+
+export async function fetchTechnique(
+  slug: string,
+): Promise<TechniquePageDetail> {
+  return request<TechniquePageDetail>(`${BASE}/techniques/${slug}`);
+}
+
+// ── Topics ───────────────────────────────────────────────────────────────────
+
+export async function fetchTopics(): Promise<TopicCategory[]> {
+  return request<TopicCategory[]>(`${BASE}/topics`);
+}
+
+// ── Creators ─────────────────────────────────────────────────────────────────
+
+export interface CreatorListParams {
+  sort?: string;
+  genre?: string;
+  limit?: number;
+  offset?: number;
+}
+
+export async function fetchCreators(
+  params: CreatorListParams = {},
+): Promise<CreatorBrowseResponse> {
+  const qs = new URLSearchParams();
+  if (params.sort) qs.set("sort", params.sort);
+  if (params.genre) qs.set("genre", params.genre);
+  if (params.limit !== undefined) qs.set("limit", String(params.limit));
+  if (params.offset !== undefined) qs.set("offset", String(params.offset));
+  const query = qs.toString();
+  return request<CreatorBrowseResponse>(
+    `${BASE}/creators${query ? `?${query}` : ""}`,
+  );
+}
+
+export async function fetchCreator(
+  slug: string,
+): Promise<CreatorDetailResponse> {
+  return request<CreatorDetailResponse>(`${BASE}/creators/${slug}`);
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,222 @@
+/**
+ * Home / landing page.
+ *
+ * Prominent search bar with 300ms debounced typeahead (top 5 results after 2+ chars),
+ * navigation cards for Topics and Creators, and a "Recently Added" section.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  searchApi,
+  fetchTechniques,
+  type SearchResultItem,
+  type TechniqueListItem,
+} from "../api/public-client";
+
+export default function Home() {
+  const [query, setQuery] = useState("");
+  const [suggestions, setSuggestions] = useState<SearchResultItem[]>([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [recent, setRecent] = useState<TechniqueListItem[]>([]);
+  const [recentLoading, setRecentLoading] = useState(true);
+  const navigate = useNavigate();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Auto-focus search on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Load recently added techniques
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await fetchTechniques({ limit: 5 });
+        if (!cancelled) setRecent(res.items);
+      } catch {
+        // silently ignore — not critical
+      } finally {
+        if (!cancelled) setRecentLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  // Debounced typeahead
+  const handleInputChange = useCallback(
+    (value: string) => {
+      setQuery(value);
+
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+
+      if (value.length < 2) {
+        setSuggestions([]);
+        setShowDropdown(false);
+        return;
+      }
+
+      debounceRef.current = setTimeout(() => {
+        void (async () => {
+          try {
+            const res = await searchApi(value, undefined, 5);
+            setSuggestions(res.items);
+            setShowDropdown(res.items.length > 0);
+          } catch {
+            setSuggestions([]);
+            setShowDropdown(false);
+          }
+        })();
+      }, 300);
+    },
+    [],
+  );
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (query.trim()) {
+      setShowDropdown(false);
+      navigate(`/search?q=${encodeURIComponent(query.trim())}`);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Escape") {
+      setShowDropdown(false);
+    }
+  }
+
+  return (
+    <div className="home">
+      {/* Hero search */}
+      <section className="home-hero">
+        <h2 className="home-hero__title">Chrysopedia</h2>
+        <p className="home-hero__subtitle">
+          Search techniques, key moments, and creators
+        </p>
+
+        <div className="search-container" ref={dropdownRef}>
+          <form onSubmit={handleSubmit} className="search-form search-form--hero">
+            <input
+              ref={inputRef}
+              type="search"
+              className="search-input search-input--hero"
+              placeholder="Search techniques…"
+              value={query}
+              onChange={(e) => handleInputChange(e.target.value)}
+              onFocus={() => {
+                if (suggestions.length > 0) setShowDropdown(true);
+              }}
+              onKeyDown={handleKeyDown}
+              aria-label="Search techniques"
+            />
+            <button type="submit" className="btn btn--search">
+              Search
+            </button>
+          </form>
+
+          {showDropdown && suggestions.length > 0 && (
+            <div className="typeahead-dropdown">
+              {suggestions.map((item) => (
+                <Link
+                  key={`${item.type}-${item.slug}`}
+                  to={`/techniques/${item.slug}`}
+                  className="typeahead-item"
+                  onClick={() => setShowDropdown(false)}
+                >
+                  <span className="typeahead-item__title">{item.title}</span>
+                  <span className="typeahead-item__meta">
+                    <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>
+                      {item.type === "technique_page" ? "Technique" : "Key Moment"}
+                    </span>
+                    {item.creator_name && (
+                      <span className="typeahead-item__creator">
+                        {item.creator_name}
+                      </span>
+                    )}
+                  </span>
+                </Link>
+              ))}
+              <Link
+                to={`/search?q=${encodeURIComponent(query)}`}
+                className="typeahead-see-all"
+                onClick={() => setShowDropdown(false)}
+              >
+                See all results for "{query}"
+              </Link>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Navigation cards */}
+      <section className="nav-cards">
+        <Link to="/topics" className="nav-card">
+          <h3 className="nav-card__title">Topics</h3>
+          <p className="nav-card__desc">
+            Browse techniques organized by category and sub-topic
+          </p>
+        </Link>
+        <Link to="/creators" className="nav-card">
+          <h3 className="nav-card__title">Creators</h3>
+          <p className="nav-card__desc">
+            Discover creators and their technique libraries
+          </p>
+        </Link>
+      </section>
+
+      {/* Recently Added */}
+      <section className="recent-section">
+        <h3 className="recent-section__title">Recently Added</h3>
+        {recentLoading ? (
+          <div className="loading">Loading…</div>
+        ) : recent.length === 0 ? (
+          <div className="empty-state">No techniques yet.</div>
+        ) : (
+          <div className="recent-list">
+            {recent.map((t) => (
+              <Link
+                key={t.id}
+                to={`/techniques/${t.slug}`}
+                className="recent-card"
+              >
+                <span className="recent-card__title">{t.title}</span>
+                <span className="recent-card__meta">
+                  <span className="badge badge--category">
+                    {t.topic_category}
+                  </span>
+                  {t.summary && (
+                    <span className="recent-card__summary">
+                      {t.summary.length > 100
+                        ? `${t.summary.slice(0, 100)}…`
+                        : t.summary}
+                    </span>
+                  )}
+                </span>
+              </Link>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

frontend/src/pages/SearchResults.tsx

@@ -0,0 +1,184 @@
+/**
+ * Full search results page.
+ *
+ * Reads `q` from URL search params, calls searchApi, groups results by type
+ * (technique_pages first, then key_moments). Shows fallback banner when
+ * keyword search was used.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { searchApi, type SearchResultItem } from "../api/public-client";
+
+export default function SearchResults() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const q = searchParams.get("q") ?? "";
+
+  const [results, setResults] = useState<SearchResultItem[]>([]);
+  const [fallbackUsed, setFallbackUsed] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [localQuery, setLocalQuery] = useState(q);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const doSearch = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setResults([]);
+      setFallbackUsed(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await searchApi(query.trim());
+      setResults(res.items);
+      setFallbackUsed(res.fallback_used);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Search failed");
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Search when URL param changes
+  useEffect(() => {
+    setLocalQuery(q);
+    if (q) void doSearch(q);
+  }, [q, doSearch]);
+
+  function handleInputChange(value: string) {
+    setLocalQuery(value);
+
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      if (value.trim()) {
+        navigate(`/search?q=${encodeURIComponent(value.trim())}`, {
+          replace: true,
+        });
+      }
+    }, 400);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (localQuery.trim()) {
+      navigate(`/search?q=${encodeURIComponent(localQuery.trim())}`, {
+        replace: true,
+      });
+    }
+  }
+
+  // Group results by type
+  const techniqueResults = results.filter((r) => r.type === "technique_page");
+  const momentResults = results.filter((r) => r.type === "key_moment");
+
+  return (
+    <div className="search-results-page">
+      {/* Inline search bar */}
+      <form onSubmit={handleSubmit} className="search-form search-form--inline">
+        <input
+          type="search"
+          className="search-input search-input--inline"
+          placeholder="Search techniques…"
+          value={localQuery}
+          onChange={(e) => handleInputChange(e.target.value)}
+          aria-label="Refine search"
+        />
+        <button type="submit" className="btn btn--search">
+          Search
+        </button>
+      </form>
+
+      {/* Status */}
+      {loading && <div className="loading">Searching…</div>}
+      {error && <div className="loading error-text">Error: {error}</div>}
+
+      {/* Fallback banner */}
+      {!loading && fallbackUsed && results.length > 0 && (
+        <div className="search-fallback-banner">
+          Showing keyword results — semantic search unavailable
+        </div>
+      )}
+
+      {/* No results */}
+      {!loading && !error && q && results.length === 0 && (
+        <div className="empty-state">
+          <p>No results found for "{q}"</p>
+        </div>
+      )}
+
+      {/* Technique pages */}
+      {techniqueResults.length > 0 && (
+        <section className="search-group">
+          <h3 className="search-group__title">
+            Techniques ({techniqueResults.length})
+          </h3>
+          <div className="search-group__list">
+            {techniqueResults.map((item) => (
+              <SearchResultCard key={`tp-${item.slug}`} item={item} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Key moments */}
+      {momentResults.length > 0 && (
+        <section className="search-group">
+          <h3 className="search-group__title">
+            Key Moments ({momentResults.length})
+          </h3>
+          <div className="search-group__list">
+            {momentResults.map((item, i) => (
+              <SearchResultCard key={`km-${item.slug}-${i}`} item={item} />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function SearchResultCard({ item }: { item: SearchResultItem }) {
+  return (
+    <Link
+      to={`/techniques/${item.slug}`}
+      className="search-result-card"
+    >
+      <div className="search-result-card__header">
+        <span className="search-result-card__title">{item.title}</span>
+        <span className={`badge badge--type badge--type-${item.type}`}>
+          {item.type === "technique_page" ? "Technique" : "Key Moment"}
+        </span>
+      </div>
+      {item.summary && (
+        <p className="search-result-card__summary">
+          {item.summary.length > 200
+            ? `${item.summary.slice(0, 200)}…`
+            : item.summary}
+        </p>
+      )}
+      <div className="search-result-card__meta">
+        {item.creator_name && <span>{item.creator_name}</span>}
+        {item.topic_category && (
+          <>
+            <span className="queue-card__separator">·</span>
+            <span>{item.topic_category}</span>
+          </>
+        )}
+        {item.topic_tags.length > 0 && (
+          <span className="search-result-card__tags">
+            {item.topic_tags.map((tag) => (
+              <span key={tag} className="pill">
+                {tag}
+              </span>
+            ))}
+          </span>
+        )}
+      </div>
+    </Link>
+  );
+}

frontend/src/pages/TechniquePage.tsx

@@ -0,0 +1,260 @@
+/**
+ * Technique page detail view.
+ *
+ * Fetches a single technique by slug. Renders:
+ * - Header with title, category badge, tags, creator link, source quality
+ * - Amber banner for unstructured (livestream-sourced) content
+ * - Study guide prose from body_sections JSONB
+ * - Key moments index
+ * - Signal chains (if present)
+ * - Plugins referenced (if present)
+ * - Related techniques (if present)
+ * - Loading and 404 states
+ */
+
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import {
+  fetchTechnique,
+  type TechniquePageDetail as TechniqueDetail,
+} from "../api/public-client";
+
+function formatTime(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export default function TechniquePage() {
+  const { slug } = useParams<{ slug: string }>();
+  const [technique, setTechnique] = useState<TechniqueDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!slug) return;
+
+    let cancelled = false;
+    setLoading(true);
+    setNotFound(false);
+    setError(null);
+
+    void (async () => {
+      try {
+        const data = await fetchTechnique(slug);
+        if (!cancelled) setTechnique(data);
+      } catch (err) {
+        if (!cancelled) {
+          if (
+            err instanceof Error &&
+            err.message.includes("404")
+          ) {
+            setNotFound(true);
+          } else {
+            setError(
+              err instanceof Error ? err.message : "Failed to load technique",
+            );
+          }
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  if (loading) {
+    return <div className="loading">Loading technique…</div>;
+  }
+
+  if (notFound) {
+    return (
+      <div className="technique-404">
+        <h2>Technique Not Found</h2>
+        <p>The technique "{slug}" doesn't exist.</p>
+        <Link to="/" className="btn">
+          Back to Home
+        </Link>
+      </div>
+    );
+  }
+
+  if (error || !technique) {
+    return (
+      <div className="loading error-text">
+        Error: {error ?? "Unknown error"}
+      </div>
+    );
+  }
+
+  return (
+    <article className="technique-page">
+      {/* Back link */}
+      <Link to="/" className="back-link">
+        ← Back
+      </Link>
+
+      {/* Unstructured content warning */}
+      {technique.source_quality === "unstructured" && (
+        <div className="technique-banner technique-banner--amber">
+          ⚠ This technique was sourced from a livestream and may have less
+          structured content.
+        </div>
+      )}
+
+      {/* Header */}
+      <header className="technique-header">
+        <h1 className="technique-header__title">{technique.title}</h1>
+        <div className="technique-header__meta">
+          <span className="badge badge--category">
+            {technique.topic_category}
+          </span>
+          {technique.topic_tags && technique.topic_tags.length > 0 && (
+            <span className="technique-header__tags">
+              {technique.topic_tags.map((tag) => (
+                <span key={tag} className="pill">
+                  {tag}
+                </span>
+              ))}
+            </span>
+          )}
+          {technique.creator_info && (
+            <Link
+              to={`/creators/${technique.creator_info.slug}`}
+              className="technique-header__creator"
+            >
+              by {technique.creator_info.name}
+            </Link>
+          )}
+          {technique.source_quality && (
+            <span
+              className={`badge badge--quality badge--quality-${technique.source_quality}`}
+            >
+              {technique.source_quality}
+            </span>
+          )}
+        </div>
+      </header>
+
+      {/* Summary */}
+      {technique.summary && (
+        <section className="technique-summary">
+          <p>{technique.summary}</p>
+        </section>
+      )}
+
+      {/* Study guide prose — body_sections */}
+      {technique.body_sections &&
+        Object.keys(technique.body_sections).length > 0 && (
+          <section className="technique-prose">
+            {Object.entries(technique.body_sections).map(
+              ([sectionTitle, content]) => (
+                <div key={sectionTitle} className="technique-prose__section">
+                  <h2>{sectionTitle}</h2>
+                  {typeof content === "string" ? (
+                    <p>{content}</p>
+                  ) : typeof content === "object" && content !== null ? (
+                    <pre className="technique-prose__json">
+                      {JSON.stringify(content, null, 2)}
+                    </pre>
+                  ) : (
+                    <p>{String(content)}</p>
+                  )}
+                </div>
+              ),
+            )}
+          </section>
+        )}
+
+      {/* Key moments */}
+      {technique.key_moments.length > 0 && (
+        <section className="technique-moments">
+          <h2>Key Moments</h2>
+          <ol className="technique-moments__list">
+            {technique.key_moments.map((km) => (
+              <li key={km.id} className="technique-moment">
+                <div className="technique-moment__header">
+                  <span className="technique-moment__title">{km.title}</span>
+                  <span className="technique-moment__time">
+                    {formatTime(km.start_time)} – {formatTime(km.end_time)}
+                  </span>
+                  <span className="badge badge--content-type">
+                    {km.content_type}
+                  </span>
+                </div>
+                <p className="technique-moment__summary">{km.summary}</p>
+              </li>
+            ))}
+          </ol>
+        </section>
+      )}
+
+      {/* Signal chains */}
+      {technique.signal_chains &&
+        technique.signal_chains.length > 0 && (
+          <section className="technique-chains">
+            <h2>Signal Chains</h2>
+            {technique.signal_chains.map((chain, i) => {
+              const chainObj = chain as Record<string, unknown>;
+              const chainName =
+                typeof chainObj["name"] === "string"
+                  ? chainObj["name"]
+                  : `Chain ${i + 1}`;
+              const steps = Array.isArray(chainObj["steps"])
+                ? (chainObj["steps"] as string[])
+                : [];
+              return (
+                <div key={i} className="technique-chain">
+                  <h3>{chainName}</h3>
+                  {steps.length > 0 && (
+                    <ol className="technique-chain__steps">
+                      {steps.map((step, j) => (
+                        <li key={j}>{String(step)}</li>
+                      ))}
+                    </ol>
+                  )}
+                </div>
+              );
+            })}
+          </section>
+        )}
+
+      {/* Plugins */}
+      {technique.plugins && technique.plugins.length > 0 && (
+        <section className="technique-plugins">
+          <h2>Plugins Referenced</h2>
+          <div className="pill-list">
+            {technique.plugins.map((plugin) => (
+              <span key={plugin} className="pill pill--plugin">
+                {plugin}
+              </span>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Related techniques */}
+      {technique.related_links.length > 0 && (
+        <section className="technique-related">
+          <h2>Related Techniques</h2>
+          <ul className="technique-related__list">
+            {technique.related_links.map((link) => (
+              <li key={link.target_slug}>
+                <Link to={`/techniques/${link.target_slug}`}>
+                  {link.target_title}
+                </Link>
+                <span className="technique-related__rel">
+                  ({link.relationship})
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </article>
+  );
+}

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/ModeToggle.tsx","./src/components/StatusBadge.tsx","./src/pages/MomentDetail.tsx","./src/pages/ReviewQueue.tsx"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/public-client.ts","./src/components/ModeToggle.tsx","./src/components/StatusBadge.tsx","./src/pages/Home.tsx","./src/pages/MomentDetail.tsx","./src/pages/ReviewQueue.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx"],"version":"5.6.3"}