\n \n \n\n`;\n}\n\n// =============================================================================\n// REACT APPLICATION CODE\n// =============================================================================\n\n/**\n * Generates the complete React application code.\n * This is embedded directly in the HTML as a Babel-compiled script.\n *\n * @returns React application JavaScript code\n */\nfunction generateReactApp(): string {\n return `\n// =============================================================================\n// 🏆 THE PLAYBOOK - React Application\n// =============================================================================\n\nconst { useState, useEffect, useCallback, useMemo, createContext, useContext } = React;\n\n// =============================================================================\n// CONTEXT & INITIAL DATA\n// =============================================================================\n\nconst AppContext = createContext(null);\n\nconst useApp = () => {\n const context = useContext(AppContext);\n if (!context) throw new Error('useApp must be used within AppProvider');\n return context;\n};\n\nconst INITIAL_DATA = window.__PLAYBOOK_DATA__;\nconst API_BASE = '/api';\n\n// =============================================================================\n// API HELPERS\n// =============================================================================\n\nasync function apiCall(endpoint, options = {}) {\n const response = await fetch(\\`\\${API_BASE}\\${endpoint}\\`, {\n headers: { 'Content-Type': 'application/json', ...options.headers },\n ...options,\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw { status: response.status, ...data };\n }\n \n return data;\n}\n\n// =============================================================================\n// UTILITY FUNCTIONS\n// =============================================================================\n\nconst formatScore = (score) => Math.round(score);\n\nconst getScoreColor = (score) => {\n if (score >= 80) return 'var(--emerald)';\n if (score >= 60) return 'var(--phoenix)';\n if (score >= 40) return 'var(--fortress)';\n return 'var(--rose)';\n};\n\nconst getScoreLabel = (score) => {\n if (score >= 90) return 'Elite';\n if (score >= 80) return 'Excellent';\n if (score >= 70) return 'Strong';\n if (score >= 60) return 'Good';\n if (score >= 50) return 'Fair';\n return 'Needs Work';\n};\n\nconst renderMarkdown = (md) => {\n if (!md) return { __html: '' };\n return { __html: marked.parse(md) };\n};\n\n// =============================================================================\n// COMPONENTS: Toast Notification\n// =============================================================================\n\nconst Toast = ({ message, type = 'success', visible, onClose }) => {\n useEffect(() => {\n if (visible) {\n const timer = setTimeout(onClose, 4000);\n return () => clearTimeout(timer);\n }\n }, [visible, onClose]);\n\n const colors = {\n success: { bg: 'rgba(16, 185, 129, 0.1)', border: 'var(--emerald)', icon: '✓' },\n error: { bg: 'rgba(244, 63, 94, 0.1)', border: 'var(--rose)', icon: '✕' },\n warning: { bg: 'rgba(245, 158, 11, 0.1)', border: 'var(--phoenix)', icon: '⚠' },\n info: { bg: 'rgba(14, 165, 233, 0.1)', border: 'var(--fortress)', icon: 'ℹ' },\n };\n\n const style = colors[type] || colors.success;\n\n return (\n

\n {style.icon}\n {message}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Loading Spinner\n// =============================================================================\n\nconst Spinner = ({ size = 20, color = 'currentColor' }) => (\n

\n);\n\n// =============================================================================\n// COMPONENTS: Score Badge\n// =============================================================================\n\nconst ScoreBadge = ({ score, size = 'medium', showLabel = false }) => {\n const sizeClasses = { small: 'score-sm', medium: 'score-md', large: 'score-lg' };\n \n return (\n

\n {formatScore(score)}\n {showLabel && {getScoreLabel(score)}}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Mascot Card\n// =============================================================================\n\nconst MascotCard = ({ mascot, active = false, onClick, disabled = false, locked = false }) => (\n \n);\n\n// =============================================================================\n// COMPONENTS: Lens Button\n// =============================================================================\n\nconst LensButton = ({ lens, active = false, onClick, disabled = false, locked = false }) => (\n \n {lens.emoji}\n

\n {lens.name}\n \"{lens.bias}\"\n

\n {locked && 🔒}\n \n);\n\n// =============================================================================\n// COMPONENTS: Document Card\n// =============================================================================\n\nconst DocumentCard = ({ doc, active = false, onClick }) => (\n \n);\n\n// =============================================================================\n// COMPONENTS: Empty State\n// =============================================================================\n\nconst EmptyState = ({ icon, title, message, action }) => (\n

{icon}

{title}

{message}

\n {action && (\n \n )}\n

\n);\n\n// =============================================================================\n// COMPONENTS: Header\n// =============================================================================\n\nconst Header = ({ user, onLogout, onUpgrade }) => {\n const { appName, appTaglines, tiers } = INITIAL_DATA;\n \n const tierConfig = useMemo(() => {\n if (!user) return null;\n return Object.values(tiers).find(t => t.id === user.tier);\n }, [user, tiers]);\n\n return (\n

⚔️🛡️

\n {appName}\n {appTaglines.primary}\n

\n \n {user ? (\n

\n {tierConfig && (\n \n {tierConfig.badge} {tierConfig.name}\n \n )}\n {user.tier === 'tier_rookie' && (\n \n )}\n \n

\n {(user.name || user.email)[0].toUpperCase()}\n

\n ) : (\n

\n Not logged in\n

\n )}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Login Form\n// =============================================================================\n\nconst LoginForm = ({ onLogin }) => {\n const [email, setEmail] = useState('');\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(null);\n setLoading(true);\n\n try {\n const result = await apiCall('/auth/login', {\n method: 'POST',\n body: JSON.stringify({ email }),\n });\n onLogin(result.user, result.message);\n } catch (err) {\n setError(err.error || 'Login failed');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \n );\n};\n\n// =============================================================================\n// COMPONENTS: Document Upload Form\n// =============================================================================\n\nconst DocumentUploadForm = ({ onUpload, onCancel }) => {\n const [title, setTitle] = useState('');\n const [text, setText] = useState('');\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const wordCount = useMemo(() => {\n return text.trim().split(/\\\\s+/).filter(w => w.length > 0).length;\n }, [text]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(null);\n\n if (wordCount < 50) {\n setError('Document needs at least 50 words for meaningful analysis.');\n return;\n }\n\n setLoading(true);\n\n try {\n const result = await apiCall('/docs', {\n method: 'POST',\n body: JSON.stringify({ title, text }),\n });\n onUpload(result);\n } catch (err) {\n setError(err.error || 'Upload failed');\n setLoading(false);\n }\n };\n\n return (\n

\n Document Title\n setTitle(e.target.value)}\n placeholder=\"e.g., Homepage Messaging V2\"\n disabled={loading}\n required\n maxLength={255}\n />\n

\n \n

\n Positioning Copy\n setText(e.target.value)}\n placeholder=\"Paste your website copy, sales page, pitch deck text, or any positioning content you want analyzed...\"\n disabled={loading}\n required\n rows={12}\n />\n

\n \n {wordCount} words\n \n • Minimum 50 words for analysis\n

\n\n {error &&

{error}

}\n\n

\n \n \n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Beliefs Panel\n// =============================================================================\n\nconst BeliefsPanel = ({ beliefs, score, selectedIndex, onSelect, loading }) => {\n if (loading) {\n return (\n

Core Positioning Beliefs

\n } title=\"Extracting beliefs...\" message=\"Our AI is analyzing your positioning copy.\" />\n

\n );\n }\n\n if (!beliefs || beliefs.length === 0) {\n return (\n

Core Positioning Beliefs

\n \n

\n );\n }\n\n return (\n

Core Positioning Beliefs

\n \n

\n {beliefs.map((belief, index) => (\n onSelect(belief, index)}\n >\n #{index + 1}\n {belief}\n \n ))}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Analysis Panel\n// =============================================================================\n\nconst AnalysisPanel = ({ user, selectedBelief, documentId, onToast }) => {\n const { offensiveLenses, defensiveLenses, mascots, tiers } = INITIAL_DATA;\n \n const [activeSquad, setActiveSquad] = useState('phoenix');\n const [selectedLens, setSelectedLens] = useState(null);\n const [analysis, setAnalysis] = useState(null);\n const [loading, setLoading] = useState(false);\n\n // Get user's tier limits\n const tierConfig = useMemo(() => {\n return Object.values(tiers).find(t => t.id === user?.tier) || tiers.ROOKIE;\n }, [user, tiers]);\n\n const canAccessLens = useCallback((lens) => {\n if (!user) return false;\n const limits = tierConfig.limits;\n if (lens.squad === 'phoenix') {\n return limits.offensiveLenses === 'ALL' || limits.offensiveLenses.includes(lens.id);\n }\n return limits.defensiveLenses === 'ALL' || limits.defensiveLenses.includes(lens.id);\n }, [user, tierConfig]);\n\n const canAccessPhoenixFortress = useMemo(() => {\n return tierConfig?.limits?.phoenixFortress || false;\n }, [tierConfig]);\n\n // Reset when belief changes\n useEffect(() => {\n setSelectedLens(null);\n setAnalysis(null);\n }, [selectedBelief]);\n\n const runAnalysis = async (lens) => {\n if (!documentId || !lens) return;\n \n setSelectedLens(lens);\n setAnalysis(null);\n setLoading(true);\n\n try {\n const endpoint = lens.squad === 'phoenix' ? '/analyze/offensive' : '/analyze/defensive';\n const result = await apiCall(endpoint, {\n method: 'POST',\n body: JSON.stringify({ documentId, lensId: lens.id }),\n });\n setAnalysis(result.analysis);\n onToast(\\`\\${lens.emoji} \\${lens.name} analysis complete!\\`, 'success');\n } catch (err) {\n onToast(err.error || 'Analysis failed', 'error');\n } finally {\n setLoading(false);\n }\n };\n\n const runPhoenixFortress = async () => {\n if (!documentId) return;\n \n setSelectedLens({ id: 'phoenix_fortress', name: 'Phoenix Fortress', emoji: '⚔️🛡️', squad: 'combined' });\n setAnalysis(null);\n setLoading(true);\n\n try {\n const result = await apiCall('/analyze/phoenix-fortress', {\n method: 'POST',\n body: JSON.stringify({ documentId }),\n });\n setAnalysis(result.analysis);\n onToast('⚔️🛡️ Phoenix Fortress analysis complete!', 'success');\n } catch (err) {\n onToast(err.error || 'Analysis failed', 'error');\n } finally {\n setLoading(false);\n }\n };\n\n const activeLenses = activeSquad === 'phoenix' ? offensiveLenses : defensiveLenses;\n const activeMascot = activeSquad === 'phoenix' ? mascots.PHOENIX : mascots.FORTRESS;\n\n if (!selectedBelief) {\n return (\n

Strategic Analysis

\n \n

\n );\n }\n\n return (\n

Strategic Analysis

\n \n

\n {/* Squad Toggle */}\n

\n \n \n

\n\n {/* Phoenix Fortress Button */}\n \n\n {/* Squad Description */}\n

\n {activeMascot.emoji}\n

{activeMascot.name}

{activeMascot.title}

{activeMascot.description}

\"{activeMascot.battleCry}\"

\n\n {/* Lens Selection */}\n

\n {activeLenses.map((lens) => {\n const isLocked = !canAccessLens(lens);\n return (\n runAnalysis(lens)}\n disabled={loading}\n locked={isLocked}\n />\n );\n })}\n

\n\n {/* Analysis Results */}\n

\n {loading && (\n } \n title={\\`\\${selectedLens?.emoji || '🔍'} Running Analysis...\\`}\n message=\"Our AI strategist is analyzing your positioning.\" \n />\n )}\n\n {!loading && analysis && selectedLens?.id !== 'phoenix_fortress' && (\n

\n {selectedLens?.emoji} {selectedLens?.name}\n \n

\n\n {/* Strengths / Protected */}\n

\n {activeSquad === 'phoenix' ? '✓ Offensive Strengths' : '✓ Well Protected'}\n

{item}

\n\n {/* Gaps / Exposed */}\n

\n {activeSquad === 'phoenix' ? '⚠ Missed Opportunities' : '⚠ Vulnerabilities'}\n

{item}

\n\n {/* Plays / Fortifications */}\n

\n {activeSquad === 'phoenix' ? '🎯 Offensive Plays' : '🛡️ Fortifications'}\n

{item}

\n\n {/* Summary */}\n

📋 Executive Summary

\n )}\n\n {/* Phoenix Fortress Results */}\n {!loading && analysis && selectedLens?.id === 'phoenix_fortress' && (\n

\n {mascots.PHOENIX_FORTRESS.emoji} Phoenix Fortress\n

\n Offense\n \n

\n Defense\n \n

\n Combined\n \n

\n\n {/* Executive Summary */}\n

📋 Executive Summary

\n\n {/* Two Column: Plays & Fortifications */}\n

{mascots.PHOENIX.emoji} Top Offensive Plays

{item}

{mascots.FORTRESS.emoji} Critical Fortifications

{item}

\n\n {/* Ultimate Strategy */}\n

🏆 The Cheat Code

\n {analysis.ultimateStrategy}\n

\n )}\n\n {!loading && !analysis && selectedLens && (\n \n )}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Pricing Modal\n// =============================================================================\n\nconst PricingModal = ({ isOpen, onClose, onUpgrade, currentTier }) => {\n const { tiers } = INITIAL_DATA;\n const [loading, setLoading] = useState(null);\n const [error, setError] = useState(null);\n\n const handleUpgrade = async (tierId) => {\n setLoading(tierId);\n setError(null);\n\n try {\n const result = await apiCall('/billing/upgrade', {\n method: 'POST',\n body: JSON.stringify({ tier: tierId }),\n });\n onUpgrade(result.user, result.message);\n onClose();\n } catch (err) {\n setError(err.error || 'Upgrade failed');\n } finally {\n setLoading(null);\n }\n };\n\n if (!isOpen) return null;\n\n const tierList = Object.values(tiers);\n\n return (\n

e.stopPropagation()}>\n \n \n

Upgrade Your Arsenal

Unlock the full power of The Playbook

\n\n {error &&

{error}

}\n\n

\n {tierList.map((tier) => {\n const isCurrent = tier.id === currentTier;\n const isUpgrade = tierList.findIndex(t => t.id === tier.id) > tierList.findIndex(t => t.id === currentTier);\n \n return (\n

{tier.badge}

{tier.name}

{tier.priceDisplay}

{tier.description}

\n \n

{tier.limits.docsPerMonth} documents/month
{tier.limits.offensiveLenses === 'ALL' ? 'All' : tier.limits.offensiveLenses.length} offensive lenses
{tier.limits.defensiveLenses === 'ALL' ? 'All' : tier.limits.defensiveLenses.length} defensive lenses
{tier.limits.phoenixFortress ? '✓' : '✕'} Phoenix Fortress
{tier.limits.exportPdf ? '✓' : '✕'} PDF Export

\n\n handleUpgrade(tier.id)}\n disabled={isCurrent || !isUpgrade || loading === tier.id}\n >\n {loading === tier.id ? (\n <> Processing...\n ) : isCurrent ? (\n 'Current Plan'\n ) : isUpgrade ? (\n \\`Upgrade to \\${tier.name}\\`\n ) : (\n 'Downgrade'\n )}\n \n

\n );\n })}\n

\n );\n};\n\n// =============================================================================\n// COMPONENTS: Landing Page\n// =============================================================================\n\nconst LandingPage = ({ onLogin }) => {\n const { appName, appTaglines, mascots } = INITIAL_DATA;\n\n return (\n

\n\n

⚔️🛡️

{appName}

{appTaglines.primary}

\n\n

\n {mascots.PHOENIX.emoji}\n {mascots.PHOENIX.name}\n {mascots.PHOENIX.title}\n

\n {mascots.PHOENIX_FORTRESS.emoji}\n Combined\n {mascots.PHOENIX_FORTRESS.title}\n

\n {mascots.FORTRESS.emoji}\n {mascots.FORTRESS.name}\n {mascots.FORTRESS.title}\n

\n\n

\n \n

\n\n

\"{appTaglines.secondary}\"

\"{appTaglines.tertiary}\"

\"{appTaglines.quinary}\"

\n );\n};\n\n// =============================================================================\n// MAIN APP COMPONENT\n// =============================================================================\n\nconst App = () => {\n // State\n const [user, setUser] = useState(INITIAL_DATA.user);\n const [documents, setDocuments] = useState([]);\n const [selectedDocId, setSelectedDocId] = useState(null);\n const [beliefs, setBeliefs] = useState({ beliefs: [], score: 0 });\n const [selectedBelief, setSelectedBelief] = useState(null);\n const [selectedBeliefIndex, setSelectedBeliefIndex] = useState(null);\n const [showUpload, setShowUpload] = useState(false);\n const [showPricing, setShowPricing] = useState(false);\n const [loading, setLoading] = useState({ docs: false, beliefs: false });\n const [toast, setToast] = useState({ visible: false, message: '', type: 'success' });\n\n // Toast helper\n const showToast = useCallback((message, type = 'success') => {\n setToast({ visible: true, message, type });\n }, []);\n\n const hideToast = useCallback(() => {\n setToast(prev => ({ ...prev, visible: false }));\n }, []);\n\n // Fetch documents\n const fetchDocuments = useCallback(async () => {\n if (!user) return;\n setLoading(prev => ({ ...prev, docs: true }));\n \n try {\n const docs = await apiCall('/docs');\n setDocuments(docs);\n } catch (err) {\n showToast('Failed to load documents', 'error');\n } finally {\n setLoading(prev => ({ ...prev, docs: false }));\n }\n }, [user, showToast]);\n\n // Fetch beliefs for selected document\n const fetchBeliefs = useCallback(async (docId) => {\n setLoading(prev => ({ ...prev, beliefs: true }));\n setBeliefs({ beliefs: [], score: 0 });\n setSelectedBelief(null);\n setSelectedBeliefIndex(null);\n\n try {\n const data = await apiCall(\\`/docs/\\${docId}/beliefs\\`);\n setBeliefs(data);\n } catch (err) {\n showToast('Failed to load beliefs', 'error');\n } finally {\n setLoading(prev => ({ ...prev, beliefs: false }));\n }\n }, [showToast]);\n\n // Load documents on user change\n useEffect(() => {\n if (user) {\n fetchDocuments();\n } else {\n setDocuments([]);\n setSelectedDocId(null);\n setBeliefs({ beliefs: [], score: 0 });\n }\n }, [user, fetchDocuments]);\n\n // Load beliefs when document selected\n useEffect(() => {\n if (selectedDocId) {\n fetchBeliefs(selectedDocId);\n }\n }, [selectedDocId, fetchBeliefs]);\n\n // Handlers\n const handleLogin = useCallback((userData, message) => {\n setUser(userData);\n showToast(message || 'Welcome to The Playbook!', 'success');\n }, [showToast]);\n\n const handleLogout = useCallback(async () => {\n try {\n await apiCall('/auth/logout', { method: 'POST' });\n setUser(null);\n showToast('Logged out successfully', 'info');\n } catch (err) {\n showToast('Logout failed', 'error');\n }\n }, [showToast]);\n\n const handleUpgrade = useCallback((userData, message) => {\n setUser(userData);\n showToast(message || 'Upgrade successful!', 'success');\n }, [showToast]);\n\n const handleDocumentUpload = useCallback((result) => {\n setDocuments(prev => [result.document, ...prev]);\n setSelectedDocId(result.document.id);\n setBeliefs({ beliefs: result.beliefs, score: result.score });\n setShowUpload(false);\n showToast(\\`\"\\${result.document.title}\" uploaded and analyzed!\\`, 'success');\n }, [showToast]);\n\n const handleSelectBelief = useCallback((belief, index) => {\n setSelectedBelief(belief);\n setSelectedBeliefIndex(index);\n }, []);\n\n // Render landing page if not logged in\n if (!user) {\n return (\n <>\n \n \n \n );\n }\n\n // Render main app\n return (\n

setShowPricing(true)} />\n\n

\n {/* Left Column: Documents */}\n

Documents

\n \n

\n {showUpload ? (\n setShowUpload(false)} \n />\n ) : loading.docs ? (\n } title=\"Loading...\" message=\"Fetching your documents.\" />\n ) : documents.length === 0 ? (\n setShowUpload(true) }}\n />\n ) : (\n

\n {documents.map(doc => (\n setSelectedDocId(doc.id)}\n />\n ))}\n

\n )}\n

\n\n {/* Center Column: Beliefs */}\n

\n \n

\n\n {/* Right Column: Analysis */}\n

\n \n

\n\n {/* Modals */}\n setShowPricing(false)}\n onUpgrade={handleUpgrade}\n currentTier={user.tier}\n />\n\n {/* Toast */}\n \n

\n );\n};\n\n// =============================================================================\n// RENDER\n// =============================================================================\n\nReactDOM.createRoot(document.getElementById('root')).render();\n`;\n}","deleted","label",[175,157],"ui","permalink","https://www.val.town/x/axiom/the-playbook-hono-react/code/ui/pages.ts","extension","actionData","errors"]