feat: Created useDocumentTitle hook and wired descriptive, route-specif…

- "frontend/src/hooks/useDocumentTitle.ts"
- "frontend/src/pages/Home.tsx"
- "frontend/src/pages/TopicsBrowse.tsx"
- "frontend/src/pages/SubTopicPage.tsx"
- "frontend/src/pages/CreatorsBrowse.tsx"
- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/pages/SearchResults.tsx"

GSD-Task: S04/T02

.gsd/milestones/M011/slices/S04/S04-PLAN.md

@@ -14,7 +14,7 @@
   - Estimate: 30m
   - Files: frontend/src/App.tsx, frontend/src/App.css, frontend/src/pages/Home.tsx, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/CreatorsBrowse.tsx, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/pages/AdminReports.tsx, frontend/src/pages/AdminPipeline.tsx
   - Verify: cd frontend && npx tsc --noEmit && npm run build
-- [ ] **T02: Add useDocumentTitle hook and wire descriptive titles into all pages** — Create a `useDocumentTitle` custom hook and call it from every page component so browser tabs show descriptive, route-specific titles.
+- [x] **T02: Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components** — Create a `useDocumentTitle` custom hook and call it from every page component so browser tabs show descriptive, route-specific titles.
 
 1. Create `frontend/src/hooks/useDocumentTitle.ts` with a hook that sets `document.title` on mount and when the title string changes. Reset to 'Chrysopedia' on unmount (cleanup).
 

.gsd/milestones/M011/slices/S04/tasks/T01-VERIFY.json

@@ -0,0 +1,30 @@
+{
+  "schemaVersion": 1,
+  "taskId": "T01",
+  "unitId": "M011/S04/T01",
+  "timestamp": 1774947168021,
+  "passed": false,
+  "discoverySource": "task-plan",
+  "checks": [
+    {
+      "command": "cd frontend",
+      "exitCode": 0,
+      "durationMs": 6,
+      "verdict": "pass"
+    },
+    {
+      "command": "npx tsc --noEmit",
+      "exitCode": 1,
+      "durationMs": 822,
+      "verdict": "fail"
+    },
+    {
+      "command": "npm run build",
+      "exitCode": 254,
+      "durationMs": 88,
+      "verdict": "fail"
+    }
+  ],
+  "retryAttempt": 1,
+  "maxRetries": 2
+}

.gsd/milestones/M011/slices/S04/tasks/T02-SUMMARY.md

@@ -0,0 +1,95 @@
+---
+id: T02
+parent: S04
+milestone: M011
+provides: []
+requires: []
+affects: []
+key_files: ["frontend/src/hooks/useDocumentTitle.ts", "frontend/src/pages/Home.tsx", "frontend/src/pages/TopicsBrowse.tsx", "frontend/src/pages/SubTopicPage.tsx", "frontend/src/pages/CreatorsBrowse.tsx", "frontend/src/pages/CreatorDetail.tsx", "frontend/src/pages/TechniquePage.tsx", "frontend/src/pages/SearchResults.tsx", "frontend/src/pages/About.tsx", "frontend/src/pages/AdminReports.tsx", "frontend/src/pages/AdminPipeline.tsx"]
+key_decisions: ["Hook resets to previous title on unmount rather than always resetting to 'Chrysopedia', preserving natural navigation behavior"]
+patterns_established: []
+drill_down_paths: []
+observability_surfaces: []
+duration: ""
+verification_result: "TypeScript compilation (`npx tsc --noEmit`) and production build (`npm run build`) both pass cleanly with zero errors."
+completed_at: 2026-03-31T08:56:04.773Z
+blocker_discovered: false
+---
+
+# T02: Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components
+
+> Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components
+
+## What Happened
+---
+id: T02
+parent: S04
+milestone: M011
+key_files:
+  - frontend/src/hooks/useDocumentTitle.ts
+  - frontend/src/pages/Home.tsx
+  - frontend/src/pages/TopicsBrowse.tsx
+  - frontend/src/pages/SubTopicPage.tsx
+  - frontend/src/pages/CreatorsBrowse.tsx
+  - frontend/src/pages/CreatorDetail.tsx
+  - frontend/src/pages/TechniquePage.tsx
+  - frontend/src/pages/SearchResults.tsx
+  - frontend/src/pages/About.tsx
+  - frontend/src/pages/AdminReports.tsx
+  - frontend/src/pages/AdminPipeline.tsx
+key_decisions:
+  - Hook resets to previous title on unmount rather than always resetting to 'Chrysopedia', preserving natural navigation behavior
+duration: ""
+verification_result: passed
+completed_at: 2026-03-31T08:56:04.774Z
+blocker_discovered: false
+---
+
+# T02: Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components
+
+**Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components**
+
+## What Happened
+
+Created `frontend/src/hooks/useDocumentTitle.ts` — a hook that sets document.title and restores the previous title on unmount. Wired it into all 10 pages: 6 with static titles (Home, TopicsBrowse, CreatorsBrowse, About, AdminReports, AdminPipeline) and 4 with dynamic titles that update when async data loads (SubTopicPage, CreatorDetail, TechniquePage, SearchResults).
+
+## Verification
+
+TypeScript compilation (`npx tsc --noEmit`) and production build (`npm run build`) both pass cleanly with zero errors.
+
+## Verification Evidence
+
+| # | Command | Exit Code | Verdict | Duration |
+|---|---------|-----------|---------|----------|
+| 1 | `npx tsc --noEmit` | 0 | ✅ pass | 3400ms |
+| 2 | `npm run build` | 0 | ✅ pass | 2600ms |
+
+
+## Deviations
+
+None.
+
+## Known Issues
+
+None.
+
+## Files Created/Modified
+
+- `frontend/src/hooks/useDocumentTitle.ts`
+- `frontend/src/pages/Home.tsx`
+- `frontend/src/pages/TopicsBrowse.tsx`
+- `frontend/src/pages/SubTopicPage.tsx`
+- `frontend/src/pages/CreatorsBrowse.tsx`
+- `frontend/src/pages/CreatorDetail.tsx`
+- `frontend/src/pages/TechniquePage.tsx`
+- `frontend/src/pages/SearchResults.tsx`
+- `frontend/src/pages/About.tsx`
+- `frontend/src/pages/AdminReports.tsx`
+- `frontend/src/pages/AdminPipeline.tsx`
+
+
+## Deviations
+None.
+
+## Known Issues
+None.

frontend/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+
+const DEFAULT_TITLE = "Chrysopedia";
+
+/**
+ * Sets `document.title` to the given value. Resets to the default
+ * title on unmount so navigating away doesn't leave a stale tab name.
+ */
+export function useDocumentTitle(title: string): void {
+  const prevTitle = useRef(document.title);
+
+  useEffect(() => {
+    document.title = title || DEFAULT_TITLE;
+  }, [title]);
+
+  useEffect(() => {
+    const fallback = prevTitle.current;
+    return () => {
+      document.title = fallback || DEFAULT_TITLE;
+    };
+  }, []);
+}

frontend/src/pages/About.tsx

@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 export default function About() {
+  useDocumentTitle("About — Chrysopedia");
   return (
     <div className="about">
       <section className="about-hero">

frontend/src/pages/AdminPipeline.tsx

@@ -5,6 +5,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import {
   fetchPipelineVideos,
   fetchPipelineEvents,
@@ -466,6 +467,7 @@ function StatusFilter({
 // ── Main Page ────────────────────────────────────────────────────────────────
 
 export default function AdminPipeline() {
+  useDocumentTitle("Pipeline Management — Chrysopedia");
   const [searchParams] = useSearchParams();
   const [videos, setVideos] = useState<PipelineVideoItem[]>([]);
   const [loading, setLoading] = useState(true);

frontend/src/pages/AdminReports.tsx

@@ -11,6 +11,7 @@ import {
   updateReport,
   type ContentReport,
 } from "../api/public-client";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 const STATUS_OPTIONS = [
   { value: "", label: "All" },
@@ -49,6 +50,7 @@ function reportTypeLabel(rt: string): string {
 }
 
 export default function AdminReports() {
+  useDocumentTitle("Content Reports — Chrysopedia");
   const [reports, setReports] = useState<ContentReport[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);

frontend/src/pages/CreatorDetail.tsx

@@ -16,6 +16,7 @@ import {
 import CreatorAvatar from "../components/CreatorAvatar";
 import { catSlug } from "../utils/catSlug";
 import TagList from "../components/TagList";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 export default function CreatorDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -25,6 +26,8 @@ export default function CreatorDetail() {
   const [notFound, setNotFound] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useDocumentTitle(creator ? `${creator.name} — Chrysopedia` : "Chrysopedia");
+
   useEffect(() => {
     if (!slug) return;
 

frontend/src/pages/CreatorsBrowse.tsx

@@ -15,6 +15,7 @@ import {
   type CreatorBrowseItem,
 } from "../api/public-client";
 import CreatorAvatar from "../components/CreatorAvatar";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 const GENRES = [
   "Bass music",
@@ -41,6 +42,7 @@ const SORT_OPTIONS: { value: SortMode; label: string }[] = [
 ];
 
 export default function CreatorsBrowse() {
+  useDocumentTitle("Creators — Chrysopedia");
   const [creators, setCreators] = useState<CreatorBrowseItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

frontend/src/pages/Home.tsx

@@ -10,6 +10,7 @@ import SearchAutocomplete from "../components/SearchAutocomplete";
 import TagList from "../components/TagList";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import {
   fetchTechniques,
   fetchTopics,
@@ -18,6 +19,7 @@ import {
 } from "../api/public-client";
 
 export default function Home() {
+  useDocumentTitle("Chrysopedia — Production Knowledge, Distilled");
   const [featured, setFeatured] = useState<TechniqueListItem | null>(null);
   const [recent, setRecent] = useState<TechniqueListItem[]>([]);
   const [recentLoading, setRecentLoading] = useState(true);

frontend/src/pages/SearchResults.tsx

@@ -12,12 +12,15 @@ import { searchApi, type SearchResultItem } from "../api/public-client";
 import { catSlug } from "../utils/catSlug";
 import SearchAutocomplete from "../components/SearchAutocomplete";
 import TagList from "../components/TagList";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const q = searchParams.get("q") ?? "";
 
+  useDocumentTitle(q ? `Search: ${q} — Chrysopedia` : "Search — Chrysopedia");
+
   const [results, setResults] = useState<SearchResultItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);

frontend/src/pages/SubTopicPage.tsx

@@ -13,6 +13,7 @@ import {
 } from "../api/public-client";
 import { catSlug } from "../utils/catSlug";
 import TagList from "../components/TagList";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 /** Convert a URL slug to a display name: replace hyphens with spaces, title-case. */
 function slugToDisplayName(slug: string): string {
@@ -51,6 +52,12 @@ export default function SubTopicPage() {
   const categoryDisplay = category ? slugToDisplayName(category) : "";
   const subtopicDisplay = subtopic ? slugToDisplayName(subtopic) : "";
 
+  useDocumentTitle(
+    subtopicDisplay && categoryDisplay
+      ? `${subtopicDisplay} — ${categoryDisplay} — Chrysopedia`
+      : "Chrysopedia",
+  );
+
   useEffect(() => {
     if (!category || !subtopic) return;
 

frontend/src/pages/TechniquePage.tsx

@@ -19,6 +19,7 @@ import {
 import ReportIssueModal from "../components/ReportIssueModal";
 import CopyLinkButton from "../components/CopyLinkButton";
 import CreatorAvatar from "../components/CreatorAvatar";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 function formatTime(seconds: number): string {
   const m = Math.floor(seconds / 60);
@@ -73,6 +74,8 @@ export default function TechniquePage() {
   const [error, setError] = useState<string | null>(null);
   const [showReport, setShowReport] = useState(false);
 
+  useDocumentTitle(technique ? `${technique.title} — Chrysopedia` : "Chrysopedia");
+
   // Version switching
   const [versions, setVersions] = useState<TechniquePageVersionSummary[]>([]);
   const [selectedVersion, setSelectedVersion] = useState<string>("current");

frontend/src/pages/TopicsBrowse.tsx

@@ -14,10 +14,12 @@ import { Link } from "react-router-dom";
 import { fetchTopics, type TopicCategory } from "../api/public-client";
 import { CATEGORY_ICON } from "../components/CategoryIcons";
 import { catSlug } from "../utils/catSlug";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
 
 
 
 export default function TopicsBrowse() {
+  useDocumentTitle("Topics — Chrysopedia");
   const [categories, setCategories] = useState<TopicCategory[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

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/TagList.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.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"],"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/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.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"],"version":"5.6.3"}