\n \n

AI Features Disabled

\n Add OPENAI_API_KEY to enable AI-powered persona detection, HXC profiles, and smart recommendations. \n PMF scoring works without it.\n

\n {hasResponses && (\n

\n After adding your API key, POST to /reprocess to analyze existing responses.\n

\n )}\n

\n );\n}\n\nfunction PMFScoreCard({\n score,\n label,\n benchmark = 40,\n}: {\n score: number;\n label: string;\n benchmark?: number;\n}) {\n const isGood = score >= benchmark;\n const color = isGood ? \"green\" : score >= benchmark * 0.75 ? \"yellow\" : \"red\";\n const bgColors: Record = {\n green: \"bg-green-50 border-green-200\",\n yellow: \"bg-yellow-50 border-yellow-200\",\n red: \"bg-red-50 border-red-200\",\n };\n const textColors: Record = {\n green: \"text-green-700\",\n yellow: \"text-yellow-700\",\n red: \"text-red-700\",\n };\n\n return (\n

{label}

{score.toFixed(1)}%

\n Benchmark: {benchmark}%{\" \"}\n {isGood ? (\n ✓ Above\n ) : (\n Below\n )}\n

\n );\n}\n\nfunction StatCard({ value, label }: { value: number | string; label: string }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction ResponseBreakdown({\n very,\n somewhat,\n not,\n total,\n}: {\n very: number;\n somewhat: number;\n not: number;\n total: number;\n}) {\n const veryPct = total > 0 ? (very / total) * 100 : 0;\n const somewhatPct = total > 0 ? (somewhat / total) * 100 : 0;\n const notPct = total > 0 ? (not / total) * 100 : 0;\n\n return (\n

Response Breakdown

\n Very Disappointed\n \n {very} ({veryPct.toFixed(1)}%)\n \n

\n Somewhat Disappointed\n \n {somewhat} ({somewhatPct.toFixed(1)}%)\n \n

\n Not Disappointed\n \n {not} ({notPct.toFixed(1)}%)\n \n

\n );\n}\n\nfunction WordCloud({ words, title }: { words: string[]; title: string }) {\n if (words.length === 0) {\n return (\n

{title}

No data yet

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

{title}

\n {words.map((word, i) => {\n const sizes = [\"text-lg\", \"text-base\", \"text-sm\"];\n const size = sizes[Math.min(i, sizes.length - 1)];\n return (\n \n {word}\n \n );\n })}\n

\n );\n}\n\nfunction RoadmapSection({\n items,\n title,\n description,\n color,\n}: {\n items: string[];\n title: string;\n description: string;\n color: \"green\" | \"blue\";\n}) {\n const colors = {\n green: {\n bg: \"bg-green-50\",\n border: \"border-green-200\",\n bullet: \"bg-green-500\",\n text: \"text-green-800\",\n },\n blue: {\n bg: \"bg-blue-50\",\n border: \"border-blue-200\",\n bullet: \"bg-blue-500\",\n text: \"text-blue-800\",\n },\n };\n const c = colors[color];\n\n return (\n

{title}

{description}

\n {items.length === 0 ? (\n

No recommendations yet

\n ) : (\n

\n \n {item}\n

\n )}\n

\n );\n}\n\nfunction ResponseRow({ response }: { response: SurveyResponse }) {\n const colors: Record = {\n very: { bg: \"bg-green-500\", text: \"text-green-700\" },\n somewhat: { bg: \"bg-yellow-500\", text: \"text-yellow-700\" },\n not: { bg: \"bg-gray-400\", text: \"text-gray-500\" },\n };\n const c = colors[response.disappointment];\n const date = new Date(response.timestamp).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n return (\n \n \n \n {response.persona || \"Unprocessed\"}\n \n {response.disappointment}\n {date}\n \n );\n}\n\napp.get(\"/dashboard\", async (c) => {\n const responses = await getAllResponses();\n const counts = await getResponseCounts();\n const insights = await getLatestInsights();\n const surveyUrl = new URL(c.req.url).origin + \"/survey\";\n\n // Calculate PMF score from raw data if no insights yet\n const rawPmfScore = counts.total > 0 ? (counts.very / counts.total) * 100 : 0;\n\n // Parse JSON fields from insights\n let topBenefits: string[] = [];\n let topImprovements: string[] = [];\n let doubleDown: string[] = [];\n let addressGaps: string[] = [];\n let personas: string[] = [];\n\n if (insights) {\n try {\n topBenefits = JSON.parse(insights.top_benefits || \"[]\");\n topImprovements = JSON.parse(insights.top_improvements || \"[]\");\n doubleDown = JSON.parse(insights.roadmap_double_down || \"[]\");\n addressGaps = JSON.parse(insights.roadmap_address_gaps || \"[]\");\n personas = JSON.parse(insights.personas_in_segment || \"[]\");\n } catch {\n // Keep defaults\n }\n }\n\n return c.html(\n \n

\n {/* Header */}\n

PMF Survey Dashboard

\n Track your product-market fit using the Superhuman framework\n

\n\n {/* AI Status Banner */}\n 0} />\n\n {/* Survey Link */}\n

Share Your Survey

{surveyUrl}

\n this.textContent = 'Copy Link', 2000)`}\n class=\"px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors\"\n >\n Copy Link\n \n

\n\n {responses.length === 0 ? (\n

\n \n \n \n

No responses yet

\n Share your survey link to start collecting feedback\n

\n \n Preview Survey\n \n

\n ) : (\n <>\n {/* PMF Scores */}\n

\n \n \n \n \n

\n\n {/* Response Breakdown */}\n

\n \n

\n Personas in \"Very Disappointed\" Segment\n

\n {personas.length === 0 ? (\n

\n {hasAIEnabled() \n ? \"No personas identified yet\" \n : \"Add OPENAI_API_KEY for persona detection\"}\n

\n ) : (\n

\n {personas.map((persona) => (\n \n {persona}\n \n ))}\n

\n )}\n

\n These are the personas that appear in your \"very disappointed\" group. The\n segmented PMF score filters to only include these personas.\n

\n\n {/* HXC Profile */}\n {insights?.hxc_profile && (\n

\n High-Expectation Customer (HXC) Profile\n

\n Built from \"very disappointed\" users describing who would benefit most\n

\n {insights.hxc_profile.split(\"\\n\\n\").map((paragraph) => (\n

{paragraph}

\n ))}\n

\n )}\n\n {/* Word Clouds */}\n

\n \n \n

\n\n {/* Roadmap Recommendations */}\n

Roadmap Recommendations

\n Split 50/50 between doubling down on what users love and addressing what holds\n others back\n

\n \n \n

\n\n {/* Responses List */}\n

\n All Responses ({responses.length})\n

\n {responses.map((response) => (\n \n ))}\n

\n \n )}\n\n {/* Footer */}\n

\n Built with the{\" \"}\n \n Superhuman PMF Framework\n \n

\n ,\n );\n});\n\napp.get(\"/response/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n const response = await getResponseById(id);\n\n if (!response) {\n return c.html(\n \n

Response Not Found

\n \n ← Back to Dashboard\n \n

\n ,\n 404,\n );\n }\n\n const colors: Record = {\n very: { bg: \"bg-green-50\", border: \"border-green-200\", text: \"text-green-700\" },\n somewhat: { bg: \"bg-yellow-50\", border: \"border-yellow-200\", text: \"text-yellow-700\" },\n not: { bg: \"bg-gray-50\", border: \"border-gray-200\", text: \"text-gray-600\" },\n };\n const c2 = colors[response.disappointment];\n\n let analysis = null;\n if (response.analysis) {\n try {\n analysis = JSON.parse(response.analysis);\n } catch {\n // Keep null\n }\n }\n\n return c.html(\n \n

\n \n ← Back to Dashboard\n \n\n

{response.persona || \"Unprocessed\"}

\n {new Date(response.timestamp).toLocaleString()}\n

\n\n {/* Disappointment Level */}\n

\n \n \n {response.disappointment} Disappointed\n \n

\n\n {/* Survey Responses */}\n

\n Survey Responses\n

\n What type of people would benefit most?\n

{response.user_type}

Main benefit received

{response.main_benefit}

How to improve

{response.improvement}

\n {response.email && (\n

{response.email}

\n )}\n

\n\n {/* Analysis */}\n {analysis && (\n

\n Analysis {!hasAIEnabled() && (Basic)}\n

Assigned Persona

{analysis.persona}

\n {analysis.themes?.benefits?.length > 0 && (\n

Benefit Themes

\n {analysis.themes.benefits.map((b: string) => (\n \n {b}\n \n ))}\n

\n )}\n {analysis.themes?.improvements?.length > 0 && (\n

Improvement Themes

\n {analysis.themes.improvements.map((i: string) => (\n \n {i}\n \n ))}\n

\n )}\n {analysis.sentiment_notes && (\n

Sentiment Notes

{analysis.sentiment_notes}

\n )}\n

\n ,\n );\n});\n\nexport default app.fetch;\n","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/pmf-survey/code/dashboard.tsx","extension","actionData","errors"]