---
estimated_steps: 9
estimated_files: 3
skills_used: []
---

# T02: Fix frontend search result links and add hash-scroll to technique page

Fix the frontend so clicking a key moment search result navigates to the parent technique page and scrolls to the specific moment.

1. **TypeScript interface** (`frontend/src/api/public-client.ts`): Add `technique_page_slug?: string` to the `SearchResultItem` interface (line ~10).

2. **Search result card** (`frontend/src/pages/SearchResults.tsx`): In `SearchResultCard` (~line 145), the `<Link>` currently always goes to `/techniques/${item.slug}`. Change to:
   - If `item.type === 'key_moment'` and `item.technique_page_slug`: link to `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`
   - If `item.type === 'key_moment'` but no `technique_page_slug`: link to `/search?q=${encodeURIComponent(item.title)}` (graceful fallback — don't 404)
   - Otherwise (technique_page): keep `/techniques/${item.slug}`

3. **Key moment anchors** (`frontend/src/pages/TechniquePage.tsx`): The `<li key={km.id}>` at ~line 421 has no `id` attribute. Add `id={`km-${km.id}`}` to the `<li>` element so hash fragments can target specific moments.

4. **Scroll-to-hash** (`frontend/src/pages/TechniquePage.tsx`): Add a `useEffect` that runs after technique data loads. If `window.location.hash` starts with `#km-`, find the element by ID and call `scrollIntoView({ behavior: 'smooth', block: 'start' })`. The effect should depend on `technique` (the loaded data) so it fires after render.

5. **Build verification**: Run `npm run build` in the frontend to ensure no TypeScript errors.

## Inputs

- ``frontend/src/api/public-client.ts` — SearchResultItem interface (line ~10)`
- ``frontend/src/pages/SearchResults.tsx` — SearchResultCard component (line ~145)`
- ``frontend/src/pages/TechniquePage.tsx` — key moments list rendering (line ~421)`
- ``backend/schemas.py` — SearchResultItem with technique_page_slug (from T01)`

## Expected Output

- ``frontend/src/api/public-client.ts` — SearchResultItem includes technique_page_slug`
- ``frontend/src/pages/SearchResults.tsx` — SearchResultCard links key moments to parent technique page with hash anchor`
- ``frontend/src/pages/TechniquePage.tsx` — key moment <li> elements have id attributes; useEffect scrolls to hash on load`

## Verification

cd /home/aux/projects/content-to-kb-automator/frontend && npm run build 2>&1 | tail -20
