feat: Lifted scroll-spy state from TableOfContents to TechniquePage, cr…

- "frontend/src/components/ReadingHeader.tsx"
- "frontend/src/components/TableOfContents.tsx"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.css"

GSD-Task: S05/T01

frontend/src/App.css

@@ -2029,6 +2029,72 @@ a.app-footer__repo:hover {
   line-height: 1.5;
 }
 
+/* ── Sticky Reading Header ────────────────────────────────────────────────── */
+
+.reading-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 150;
+  transform: translateY(-100%);
+  transition: transform 0.25s ease;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--color-border);
+  pointer-events: none;
+}
+
+.reading-header--visible {
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.reading-header__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.reading-header__title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.reading-header__separator {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.reading-header__section {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+@media (max-width: 600px) {
+  .reading-header__inner {
+    padding: 0.4rem 1rem;
+  }
+  .reading-header__section {
+    display: none;
+  }
+}
+
 /* ── Table of Contents ────────────────────────────────────────────────────── */
 
 .technique-toc {

frontend/src/components/ReadingHeader.tsx

@@ -0,0 +1,34 @@
+/**
+ * Sticky reading header that appears when the article H1 scrolls out of view.
+ *
+ * Shows the article title and current section name in a thin fixed bar
+ * at the top of the viewport. Uses CSS transform for slide-in/out animation.
+ */
+
+interface ReadingHeaderProps {
+  /** Article title */
+  title: string;
+  /** Currently active section heading (from scroll-spy) */
+  currentSection: string;
+  /** Whether the header should be visible (H1 is out of viewport) */
+  visible: boolean;
+}
+
+export default function ReadingHeader({ title, currentSection, visible }: ReadingHeaderProps) {
+  return (
+    <div
+      className={`reading-header${visible ? " reading-header--visible" : ""}`}
+      aria-hidden={!visible}
+    >
+      <div className="reading-header__inner">
+        <span className="reading-header__title">{title}</span>
+        {currentSection && (
+          <>
+            <span className="reading-header__separator">·</span>
+            <span className="reading-header__section">{currentSection}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/TableOfContents.tsx

@@ -3,10 +3,9 @@
  *
  * Renders a nested list of anchor links matching the H2/H3 section structure.
  * Uses slugified headings as IDs for scroll targeting.
- * Tracks the active section via IntersectionObserver and highlights it.
+ * Receives activeId from parent (TechniquePage) which owns the IntersectionObserver.
  */
 
-import { useEffect, useMemo, useState } from "react";
 import type { BodySectionV2 } from "../api/public-client";
 
 export function slugify(text: string): string {
@@ -18,55 +17,10 @@ export function slugify(text: string): string {
 
 interface TableOfContentsProps {
   sections: BodySectionV2[];
+  activeId: string;
 }
 
-export default function TableOfContents({ sections }: TableOfContentsProps) {
-  const [activeId, setActiveId] = useState<string>("");
-
-  // Collect all section/subsection IDs in document order
-  const allIds = useMemo(() => {
-    const ids: string[] = [];
-    for (const section of sections) {
-      const sectionSlug = slugify(section.heading);
-      ids.push(sectionSlug);
-      for (const sub of section.subsections) {
-        ids.push(`${sectionSlug}--${slugify(sub.heading)}`);
-      }
-    }
-    return ids;
-  }, [sections]);
-
-  useEffect(() => {
-    if (allIds.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        // Find the topmost currently-intersecting entry
-        const intersecting = entries
-          .filter((e) => e.isIntersecting)
-          .sort(
-            (a, b) =>
-              a.boundingClientRect.top - b.boundingClientRect.top
-          );
-
-        if (intersecting.length > 0) {
-          setActiveId(intersecting[0]!.target.id);
-        }
-      },
-      {
-        // Trigger when a section enters the top 30% of the viewport
-        rootMargin: "0px 0px -70% 0px",
-      }
-    );
-
-    for (const id of allIds) {
-      const el = document.getElementById(id);
-      if (el) observer.observe(el);
-    }
-
-    return () => observer.disconnect();
-  }, [allIds]);
-
+export default function TableOfContents({ sections, activeId }: TableOfContentsProps) {
   if (sections.length === 0) return null;
 
   return (

frontend/src/pages/TechniquePage.tsx

@@ -6,7 +6,7 @@
  * with pipeline metadata (prompt hashes, model config).
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import {
   fetchTechnique,
@@ -20,6 +20,7 @@ import {
 import ReportIssueModal from "../components/ReportIssueModal";
 import CopyLinkButton from "../components/CopyLinkButton";
 import CreatorAvatar from "../components/CreatorAvatar";
+import ReadingHeader from "../components/ReadingHeader";
 import TableOfContents, { slugify } from "../components/TableOfContents";
 import { parseCitations } from "../utils/citations";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
@@ -223,8 +224,86 @@ export default function TechniquePage() {
   const displayPlugins = overlay?.plugins ?? technique.plugins;
   const displayQuality = overlay?.source_quality ?? technique.source_quality;
 
+  // --- Scroll-spy: activeId for ToC and ReadingHeader ---
+  const [activeId, setActiveId] = useState<string>("");
+  const [h1Visible, setH1Visible] = useState(true);
+  const h1Ref = useRef<HTMLHeadingElement>(null);
+
+  // Build flat list of all section/subsection IDs for observation
+  const allSectionIds = useMemo(() => {
+    if (displayFormat !== "v2" || !Array.isArray(displaySections)) return [];
+    const ids: string[] = [];
+    for (const section of displaySections as BodySectionV2[]) {
+      const sectionSlug = slugify(section.heading);
+      ids.push(sectionSlug);
+      for (const sub of section.subsections) {
+        ids.push(`${sectionSlug}--${slugify(sub.heading)}`);
+      }
+    }
+    return ids;
+  }, [displayFormat, displaySections]);
+
+  // Build a map from slug → heading text for ReadingHeader display
+  const sectionHeadingMap = useMemo(() => {
+    if (displayFormat !== "v2" || !Array.isArray(displaySections)) return new Map<string, string>();
+    const map = new Map<string, string>();
+    for (const section of displaySections as BodySectionV2[]) {
+      const sectionSlug = slugify(section.heading);
+      map.set(sectionSlug, section.heading);
+      for (const sub of section.subsections) {
+        map.set(`${sectionSlug}--${slugify(sub.heading)}`, sub.heading);
+      }
+    }
+    return map;
+  }, [displayFormat, displaySections]);
+
+  // Observe H1 visibility — drives reading header show/hide
+  useEffect(() => {
+    const el = h1Ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setH1Visible(entry?.isIntersecting ?? true);
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [technique]); // re-attach when technique changes
+
+  // Observe section headings — drives activeId for ToC + ReadingHeader
+  useEffect(() => {
+    if (allSectionIds.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const intersecting = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (intersecting.length > 0) {
+          setActiveId(intersecting[0]!.target.id);
+        }
+      },
+      { rootMargin: "0px 0px -70% 0px" }
+    );
+    for (const id of allSectionIds) {
+      const el = document.getElementById(id);
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [allSectionIds]);
+
+  const currentSectionHeading = sectionHeadingMap.get(activeId) ?? "";
+
   return (
     <article className="technique-page">
+      {/* Reading header — v2 pages only */}
+      {displayFormat === "v2" && Array.isArray(displaySections) && (displaySections as BodySectionV2[]).length > 0 && (
+        <ReadingHeader
+          title={displayTitle}
+          currentSection={currentSectionHeading}
+          visible={!h1Visible}
+        />
+      )}
       {/* Back link */}
       <Link to="/" className="back-link">
         ← Back
@@ -256,7 +335,7 @@ export default function TechniquePage() {
       <div className="technique-columns">
         <div className="technique-columns__main">
         <div className="technique-header__title-row">
-            <h1 className="technique-header__title">{displayTitle} <CopyLinkButton /></h1>
+            <h1 className="technique-header__title" ref={h1Ref}>{displayTitle} <CopyLinkButton /></h1>
             {displayCategory && (
               <span className={"badge badge--category badge--cat-" + (displayCategory?.toLowerCase().replace(/\s+/g, "-") ?? "")}>
                 {displayCategory}
@@ -470,7 +549,7 @@ export default function TechniquePage() {
         <div className="technique-columns__sidebar">
           {/* Table of Contents — v2 pages only */}
           {displayFormat === "v2" && Array.isArray(displaySections) && (displaySections as BodySectionV2[]).length > 0 && (
-            <TableOfContents sections={displaySections as BodySectionV2[]} />
+            <TableOfContents sections={displaySections as BodySectionV2[]} activeId={activeId} />
           )}
           {/* Key moments (always from live data — not versioned) */}
       {technique.key_moments.length > 0 && (

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReadingHeader.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}