feat: Added technique_section result rendering with Section badge, deep…

- "frontend/src/api/public-client.ts" - "frontend/src/pages/TechniquePage.tsx" - "frontend/src/pages/SearchResults.tsx" - "frontend/src/components/SearchAutocomplete.tsx" GSD-Task: S07/T02
2026-04-03 02:15:07 +00:00 · 2026-04-03 02:15:07 +00:00 · 989ca41162
commit 989ca41162
parent 57b8705e26
7 changed files with 196 additions and 25 deletions
--- a/.gsd/milestones/M014/slices/S07/S07-PLAN.md
+++ b/.gsd/milestones/M014/slices/S07/S07-PLAN.md
@ -48,7 +48,7 @@
  - Estimate: 2h
  - Files: backend/schemas.py, backend/pipeline/stages.py, backend/pipeline/qdrant_client.py, backend/search_service.py, backend/pipeline/test_section_embedding.py
  - Verify: PYTHONPATH=backend python -m pytest backend/pipeline/test_section_embedding.py -v && PYTHONPATH=backend python -c "from pipeline.stages import _slugify_heading; assert _slugify_heading('Grain Position Control') == 'grain-position-control'; print('slugify OK')" && grep -q 'section_anchor' backend/schemas.py && grep -q 'technique_section' backend/search_service.py
- [ ] **T02: Frontend — Hash scroll handler + section search result rendering** — Extend TechniquePage hash scrolling to handle section anchors (not just #km-). Update search result components to display and link technique_section results. Add section_anchor and section_heading to the TypeScript SearchResultItem type.
+- [x] **T02: Added technique_section result rendering with Section badge, deep links to page#anchor, and generalized hash scrolling for all anchor types** — Extend TechniquePage hash scrolling to handle section anchors (not just #km-). Update search result components to display and link technique_section results. Add section_anchor and section_heading to the TypeScript SearchResultItem type.

 ## Steps

--- a/.gsd/milestones/M014/slices/S07/tasks/T01-VERIFY.json
+++ b/.gsd/milestones/M014/slices/S07/tasks/T01-VERIFY.json
@ -0,0 +1,28 @@
+{
+  "schemaVersion": 1,
+  "taskId": "T01",
+  "unitId": "M014/S07/T01",
+  "timestamp": 1775182376809,
+  "passed": true,
+  "discoverySource": "task-plan",
+  "checks": [
+    {
+      "command": "PYTHONPATH=backend python -m pytest backend/pipeline/test_section_embedding.py -v",
+      "exitCode": 0,
+      "durationMs": 2237,
+      "verdict": "pass"
+    },
+    {
+      "command": "grep -q 'section_anchor' backend/schemas.py",
+      "exitCode": 0,
+      "durationMs": 7,
+      "verdict": "pass"
+    },
+    {
+      "command": "grep -q 'technique_section' backend/search_service.py",
+      "exitCode": 0,
+      "durationMs": 8,
+      "verdict": "pass"
+    }
+  ]
+}
--- a/.gsd/milestones/M014/slices/S07/tasks/T02-SUMMARY.md
+++ b/.gsd/milestones/M014/slices/S07/tasks/T02-SUMMARY.md
@ -0,0 +1,80 @@
+---
+id: T02
+parent: S07
+milestone: M014
+provides: []
+requires: []
+affects: []
+key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/TechniquePage.tsx", "frontend/src/pages/SearchResults.tsx", "frontend/src/components/SearchAutocomplete.tsx"]
+key_decisions: ["Also fixed autocomplete links for key_moment type which was previously linking incorrectly"]
+patterns_established: []
+drill_down_paths: []
+observability_surfaces: []
+duration: ""
+verification_result: "Frontend TypeScript build passes with zero errors: `cd frontend && npm run build` — 57 modules transformed, built in 925ms."
+completed_at: 2026-04-03T02:15:04.871Z
+blocker_discovered: false
+---
+
+# T02: Added technique_section result rendering with Section badge, deep links to page#anchor, and generalized hash scrolling for all anchor types
+
+> Added technique_section result rendering with Section badge, deep links to page#anchor, and generalized hash scrolling for all anchor types
+
+## What Happened
+---
+id: T02
+parent: S07
+milestone: M014
+key_files:
+  - frontend/src/api/public-client.ts
+  - frontend/src/pages/TechniquePage.tsx
+  - frontend/src/pages/SearchResults.tsx
+  - frontend/src/components/SearchAutocomplete.tsx
+key_decisions:
+  - Also fixed autocomplete links for key_moment type which was previously linking incorrectly
+duration: ""
+verification_result: passed
+completed_at: 2026-04-03T02:15:04.893Z
+blocker_discovered: false
+---
+
+# T02: Added technique_section result rendering with Section badge, deep links to page#anchor, and generalized hash scrolling for all anchor types
+
+**Added technique_section result rendering with Section badge, deep links to page#anchor, and generalized hash scrolling for all anchor types**
+
+## What Happened
+
+Extended four frontend files to support technique_section search results: added section_anchor/section_heading to the TypeScript type, generalized TechniquePage hash scroll from #km- only to any fragment, added technique_section link routing and Section badge to SearchResults and SearchAutocomplete, and fixed a pre-existing autocomplete link bug where all result types linked to /techniques/${slug}.
+
+## Verification
+
+Frontend TypeScript build passes with zero errors: `cd frontend && npm run build` — 57 modules transformed, built in 925ms.
+
+## Verification Evidence
+
+| # | Command | Exit Code | Verdict | Duration |
+|---|---------|-----------|---------|----------|
+| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 3100ms |
+
+
+## Deviations
+
+Fixed pre-existing bug in SearchAutocomplete where all autocomplete result links pointed to /techniques/${item.slug} regardless of type — key_moment and technique_section results now link correctly with hash fragments.
+
+## Known Issues
+
+None.
+
+## Files Created/Modified
+
+- `frontend/src/api/public-client.ts`
+- `frontend/src/pages/TechniquePage.tsx`
+- `frontend/src/pages/SearchResults.tsx`
+- `frontend/src/components/SearchAutocomplete.tsx`
+
+
+## Deviations
+Fixed pre-existing bug in SearchAutocomplete where all autocomplete result links pointed to /techniques/${item.slug} regardless of type — key_moment and technique_section results now link correctly with hash fragments.
+
+## Known Issues
+None.
--- a/frontend/src/api/public-client.ts
+++ b/frontend/src/api/public-client.ts
@ -19,6 +19,8 @@ export interface SearchResultItem {
  topic_tags: string[];
  technique_page_slug?: string;
  match_context?: string;
+  section_anchor?: string;
+  section_heading?: string;
 }

 export interface SearchResponse {
--- a/frontend/src/components/SearchAutocomplete.tsx
+++ b/frontend/src/components/SearchAutocomplete.tsx
@ -163,6 +163,7 @@ export default function SearchAutocomplete({
    creator: "Creator",
    technique_page: "Technique",
    key_moment: "Key Moment",
+    technique_section: "Section",
  };

  return (
@ -215,26 +216,37 @@ export default function SearchAutocomplete({

          {showSearch && (
            <>
-              {searchResults.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}`}>
-                      {typeLabel[item.type] ?? item.type}
-                    </span>
-                    {item.creator_name && (
-                      <span className="typeahead-item__creator">
-                        {item.creator_name}
-                      </span>
+              {searchResults.map((item) => {
+                let linkTo = `/techniques/${item.slug}`;
+                if (item.type === "technique_section" && item.technique_page_slug) {
+                  linkTo = `/techniques/${item.technique_page_slug}${item.section_anchor ? `#${item.section_anchor}` : ""}`;
+                } else if (item.type === "key_moment" && item.technique_page_slug) {
+                  linkTo = `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`;
+                }
+                return (
+                  <Link
+                    key={`${item.type}-${item.slug}-${item.section_anchor ?? ""}`}
+                    to={linkTo}
+                    className="typeahead-item"
+                    onClick={() => setShowDropdown(false)}
+                  >
+                    <span className="typeahead-item__title">{item.title}</span>
+                    {item.type === "technique_section" && item.section_heading && (
+                      <span className="typeahead-item__section">§ {item.section_heading}</span>
                    )}
-                  </span>
-                </Link>
-              ))}
+                    <span className="typeahead-item__meta">
+                      <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>
+                        {typeLabel[item.type] ?? item.type}
+                      </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"
--- a/frontend/src/pages/SearchResults.tsx
+++ b/frontend/src/pages/SearchResults.tsx
@ -66,6 +66,7 @@ export default function SearchResults() {

  // Group results by type
  const techniqueResults = results.filter((r) => r.type === "technique_page");
+  const sectionResults = results.filter((r) => r.type === "technique_section");
  const momentResults = results.filter((r) => r.type === "key_moment");

  return (
@ -124,6 +125,20 @@ export default function SearchResults() {
        </section>
      )}

+      {/* Technique sections */}
+      {sectionResults.length > 0 && (
+        <section className="search-group">
+          <h3 className="search-group__title">
+            Sections ({sectionResults.length})
+          </h3>
+          <div className="search-group__list">
+            {sectionResults.map((item, i) => (
+              <SearchResultCard key={`ts-${item.slug}-${item.section_anchor}-${i}`} item={item} staggerIndex={i} />
+            ))}
+          </div>
+        </section>
+      )}
+
      {/* Key moments */}
      {momentResults.length > 0 && (
        <section className="search-group">
@ -142,6 +157,15 @@ export default function SearchResults() {
 }

 function getSearchResultLink(item: SearchResultItem): string {
+  if (item.type === "technique_section") {
+    if (item.technique_page_slug && item.section_anchor) {
+      return `/techniques/${item.technique_page_slug}#${item.section_anchor}`;
+    }
+    if (item.technique_page_slug) {
+      return `/techniques/${item.technique_page_slug}`;
+    }
+    return `/search?q=${encodeURIComponent(item.title)}`;
+  }
  if (item.type === "key_moment") {
    if (item.technique_page_slug) {
      return `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`;
@ -153,6 +177,12 @@ function getSearchResultLink(item: SearchResultItem): string {
 }

 function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; staggerIndex: number }) {
+  const typeLabels: Record<string, string> = {
+    technique_page: "Technique",
+    key_moment: "Key Moment",
+    technique_section: "Section",
+  };
+
  return (
    <Link
      to={getSearchResultLink(item)}
@ -162,9 +192,14 @@ function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; stag
      <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"}
+          {typeLabels[item.type] ?? item.type}
        </span>
      </div>
+      {item.type === "technique_section" && item.section_heading && (
+        <div className="search-result-card__section-context">
+          § {item.section_heading}
+        </div>
+      )}
      {item.match_context && (
        <div className="search-result-card__match-context">
          <span className="match-context__icon">⚡</span>
@ -198,6 +233,7 @@ function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; stag

 function PartialMatchResults({ items }: { items: SearchResultItem[] }) {
  const techniqueResults = items.filter((r) => r.type === "technique_page");
+  const sectionResults = items.filter((r) => r.type === "technique_section");
  const momentResults = items.filter((r) => r.type === "key_moment");

  return (
@ -219,6 +255,19 @@ function PartialMatchResults({ items }: { items: SearchResultItem[] }) {
        </section>
      )}

+      {sectionResults.length > 0 && (
+        <section className="search-group">
+          <h4 className="search-group__title">
+            Sections ({sectionResults.length})
+          </h4>
+          <div className="search-group__list">
+            {sectionResults.map((item, i) => (
+              <SearchResultCard key={`partial-ts-${item.slug}-${item.section_anchor}-${i}`} item={item} staggerIndex={i} />
+            ))}
+          </div>
+        </section>
+      )}
+
      {momentResults.length > 0 && (
        <section className="search-group">
          <h4 className="search-group__title">
--- a/frontend/src/pages/TechniquePage.tsx
+++ b/frontend/src/pages/TechniquePage.tsx
@ -171,12 +171,12 @@ export default function TechniquePage() {
    };
  }, [slug, selectedVersion]);

-  // Scroll to key moment if URL has a #km- hash fragment
+  // Scroll to hash fragment after technique loads (key moments, section anchors, etc.)
  useEffect(() => {
    if (!technique) return;
-    const hash = window.location.hash;
-    if (hash.startsWith("#km-")) {
-      const el = document.getElementById(hash.slice(1));
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      const el = document.getElementById(hash);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      }