From 337d933fe24e7b14207d2a8606d4d332d6af1183 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 8 Mar 2026 01:49:52 -0500
Subject: [PATCH] feat: add PageMeta to 16 pages for SEO and proper browser tab
 titles

Public pages (Login, Register, Forgot/Reset Password, Verify Email,
Survey Thank You) get descriptions for SEO. Authenticated pages
(Dashboard, Flow Library, My Flows, Session History, AI Assistant,
Account Settings, Step Library, My Shares, Feedback, Guides) get
proper tab titles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/AccountSettingsPage.tsx | 4 ++++
 frontend/src/pages/AssistantChatPage.tsx   | 4 ++++
 frontend/src/pages/FeedbackPage.tsx        | 4 ++++
 frontend/src/pages/ForgotPasswordPage.tsx  | 4 ++++
 frontend/src/pages/GuidesHubPage.tsx       | 4 ++++
 frontend/src/pages/LoginPage.tsx           | 4 ++++
 frontend/src/pages/MySharesPage.tsx        | 4 ++++
 frontend/src/pages/MyTreesPage.tsx         | 4 ++++
 frontend/src/pages/QuickStartPage.tsx      | 4 ++++
 frontend/src/pages/RegisterPage.tsx        | 4 ++++
 frontend/src/pages/ResetPasswordPage.tsx   | 4 ++++
 frontend/src/pages/SessionHistoryPage.tsx  | 4 ++++
 frontend/src/pages/StepLibraryPage.tsx     | 4 ++++
 frontend/src/pages/SurveyThankYouPage.tsx  | 4 ++++
 frontend/src/pages/TreeLibraryPage.tsx     | 4 ++++
 frontend/src/pages/VerifyEmailPage.tsx     | 4 ++++
 16 files changed, 64 insertions(+)

diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 51bd8bdb..cbdd444f 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText, UserCog, AlertTriangle, Clock } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
 import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
@@ -159,6 +160,8 @@ export function AccountSettingsPage() {
   const sub = subscription?.subscription
 
   return (
+    <>
+    <PageMeta title="Account Settings" />
     <div>
       <div className="mb-8">
         <div className="flex items-center gap-3">
@@ -678,6 +681,7 @@ export function AccountSettingsPage() {
         <DeleteAccountModal onClose={() => setShowDeleteModal(false)} />
       )}
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index 5ce40c80..ccdceba0 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Sparkles, Send, Loader2, Flag } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { assistantChatApi } from '@/api/assistantChat'
 import { toast } from '@/lib/toast'
 import { ChatSidebar } from '@/components/assistant/ChatSidebar'
@@ -179,6 +180,8 @@ export default function AssistantChatPage() {
   }
 
   return (
+    <>
+    <PageMeta title="AI Assistant" />
     <div className="flex h-[calc(100vh-3.5rem)]">
       {/* Sidebar */}
       <ChatSidebar
@@ -303,5 +306,6 @@ export default function AssistantChatPage() {
         chatTitle={chats.find(c => c.id === activeChatId)?.title ?? 'Chat'}
       />
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx
index 385b17b7..38ba85f6 100644
--- a/frontend/src/pages/FeedbackPage.tsx
+++ b/frontend/src/pages/FeedbackPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { MessageSquareText, Send, CheckCircle2, ChevronDown } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { useAuthStore } from '@/store/authStore'
 import { feedbackApi } from '@/api'
 import { cn } from '@/lib/utils'
@@ -130,6 +131,8 @@ export function FeedbackPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Feedback" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       {/* Page header */}
       <div className="mb-8">
@@ -273,6 +276,7 @@ export function FeedbackPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index 62058a8f..268225e8 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { authApi } from '@/api/auth'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function ForgotPasswordPage() {
@@ -25,6 +26,8 @@ export function ForgotPasswordPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Forgot Password" description="Reset your ResolutionFlow password" />
     <div className="flex min-h-screen items-center justify-center bg-card px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
@@ -109,6 +112,7 @@ export function ForgotPasswordPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/GuidesHubPage.tsx b/frontend/src/pages/GuidesHubPage.tsx
index c4b20b6c..69d3ec97 100644
--- a/frontend/src/pages/GuidesHubPage.tsx
+++ b/frontend/src/pages/GuidesHubPage.tsx
@@ -1,9 +1,12 @@
 import { BookOpen } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { guides } from '@/data/guides'
 import { GuideCard } from '@/components/guides/GuideCard'
 
 export default function GuidesHubPage() {
   return (
+    <>
+    <PageMeta title="Guides" />
     <div className="p-6 max-w-5xl mx-auto">
       {/* Header */}
       <div className="mb-8">
@@ -25,5 +28,6 @@ export default function GuidesHubPage() {
         ))}
       </div>
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index a5ad2cb7..b2e10059 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -3,6 +3,7 @@ import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function LoginPage() {
@@ -40,6 +41,8 @@ export function LoginPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Sign In" description="Sign in to your ResolutionFlow account" />
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       {/* Atmosphere orbs */}
       <div
@@ -164,6 +167,7 @@ export function LoginPage() {
         </form>
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 020f7bfd..259e3dce 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Globe, Users, Copy, Check, Link2, ExternalLink, Trash2, ArrowLeft } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -121,6 +122,8 @@ export default function MySharesPage() {
   }
 
   return (
+    <>
+    <PageMeta title="My Shares" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       {/* Back link */}
       <Link
@@ -241,5 +244,6 @@ export default function MySharesPage() {
         confirmLabel="Revoke"
       />
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 44dabe7f..feb8e50b 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
@@ -116,6 +117,8 @@ export function MyTreesPage() {
   }
 
   return (
+    <>
+    <PageMeta title="My Flows" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
@@ -389,6 +392,7 @@ export function MyTreesPage() {
       )}
 
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index c90a4b9b..09d18670 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem, TreeFilters } from '@/types'
@@ -277,6 +278,8 @@ export function QuickStartPage() {
   ]
 
   return (
+    <>
+    <PageMeta title="Dashboard" />
     <div className="p-6 space-y-6">
       {/* Greeting */}
       <div className="fade-in" style={{ animationDelay: '100ms' }}>
@@ -646,6 +649,7 @@ export function QuickStartPage() {
       )}
 
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 7b2eae0f..9565cffd 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -4,6 +4,7 @@ import { useAuthStore } from '@/store/authStore'
 import { inviteApi } from '@/api/invite'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function RegisterPage() {
@@ -76,6 +77,8 @@ export function RegisterPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Create Account" description="Create your ResolutionFlow account to start building guided troubleshooting flows" />
     <div className="flex min-h-screen items-center justify-center bg-black px-4">
       {/* Subtle radial overlay */}
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
@@ -251,6 +254,7 @@ export function RegisterPage() {
         </form>
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index afeb563b..eb20516d 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -4,6 +4,7 @@ import { authApi } from '@/api/auth'
 import { toast } from '@/lib/toast'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function ResetPasswordPage() {
@@ -72,6 +73,8 @@ export function ResetPasswordPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Reset Password" description="Set a new password for your ResolutionFlow account" />
     <div className="flex min-h-screen items-center justify-center bg-black px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
@@ -180,6 +183,7 @@ export function ResetPasswordPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index ec3d5e4e..e8471f7e 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
+import { PageMeta } from '@/components/common/PageMeta'
 import { sessionsApi } from '@/api/sessions'
 import { treesApi } from '@/api/trees'
 import type { Session, TreeListItem } from '@/types'
@@ -154,6 +155,8 @@ export function SessionHistoryPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Session History" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
         <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
@@ -310,6 +313,7 @@ export function SessionHistoryPage() {
         </div>
       )}
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
index 27daa66a..c5e56aeb 100644
--- a/frontend/src/pages/StepLibraryPage.tsx
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Bookmark, Trash2 } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -87,6 +88,8 @@ export default function StepLibraryPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Step Library" />
     <div className="flex h-full flex-col">
       {/* Page Header */}
       <div className="flex items-center justify-between border-b border-border px-6 py-4">
@@ -167,5 +170,6 @@ export default function StepLibraryPage() {
       )}
 
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx
index 79b795de..eb3527ae 100644
--- a/frontend/src/pages/SurveyThankYouPage.tsx
+++ b/frontend/src/pages/SurveyThankYouPage.tsx
@@ -1,7 +1,10 @@
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PageMeta } from '@/components/common/PageMeta'
 
 export default function SurveyThankYouPage() {
   return (
+    <>
+    <PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
     <div className="min-h-screen bg-background text-foreground">
       {/* Atmosphere orbs */}
       <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
@@ -72,5 +75,6 @@ export default function SurveyThankYouPage() {
         </div>
       </div>
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 1865314c..ce88407e 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useMemo } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { X, RotateCcw, Play, FileUp } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
@@ -265,6 +266,8 @@ export function TreeLibraryPage() {
     selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
 
   return (
+    <>
+    <PageMeta title="Flow Library" />
     <div className="min-h-full">
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
           <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
@@ -596,6 +599,7 @@ export function TreeLibraryPage() {
         />
       )}
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx
index d93175b0..c1b733e2 100644
--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useSearchParams, Link } from 'react-router-dom'
 import { CheckCircle2, XCircle, Loader2 } from 'lucide-react'
 import { authApi } from '@/api/auth'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function VerifyEmailPage() {
@@ -23,6 +24,8 @@ export function VerifyEmailPage() {
   }, [token])
 
   return (
+    <>
+    <PageMeta title="Verify Email" description="Verify your ResolutionFlow email address" />
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <div className="glass-card-static w-full max-w-md p-8 text-center">
         {status === 'loading' && (
@@ -65,6 +68,7 @@ export function VerifyEmailPage() {
         )}
       </div>
     </div>
+    </>
   )
 }