Invalid presentation ID

\", 400);\n }\n\n // Serve the participant view HTML\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n // Inject the presentation ID into the page\n const script = ``;\n html = html.replace(\"\", `${script}`);\n return c.html(html);\n });\n\n // Presenter route\n app.get(\"/present/:presentationId\", async (c) => {\n const presentationId = parseInt(c.req.param(\"presentationId\"));\n if (isNaN(presentationId)) {\n return c.html(\"

Invalid presentation ID

\", 400);\n }\n\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n const script = ``;\n html = html.replace(\"\", `${script}`);\n return c.html(html);\n });\n\n // Management route\n app.get(\"/manage\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n });\n\n // Step management route\n app.get(\"/manage/:presentationId/steps\", async (c) => {\n const presentationId = parseInt(c.req.param(\"presentationId\"));\n if (isNaN(presentationId)) {\n return c.html(\"

Invalid presentation ID

\", 400);\n }\n\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n });\n\n return app;\n}\n\n",[],[150,291],{"_102":299,"_95":300,"_151":301,"_153":152,"_154":136,"_155":302,"_157":158,"_104":303,"_99":304,"_160":181,"_162":305,"_163":22,"_164":-5,"_165":306,"_98":307},"cd0db5cc-c51d-11f0-b9b3-42dde27851f2","index.ts","351c9514-c516-11f0-9cfd-42dde27851f2",190,["D",1763539223331],9,"import { createApp } from \"./app.ts\";\n\n// Detect environment and use appropriate file utilities\nconst isValTown = Deno.env.get(\"valtown\") !== undefined;\n\nlet readFile: (path: string, importMetaUrl: string) => Promise;\nlet serveFile: (path: string, importMetaUrl: string) => Promise;\n\nif (isValTown) {\n // Use Val Town utilities\n const valTownUtils = await import(\n \"https://esm.town/v/std/utils@85-main/index.ts\"\n );\n readFile = valTownUtils.readFile;\n serveFile = valTownUtils.serveFile;\n} else {\n // Use local Deno utilities\n const localUtils = await import(\"./utils/localFiles.ts\");\n readFile = localUtils.readLocalFile;\n serveFile = localUtils.serveLocalFile;\n}\n\n// Create app with all routes registered in one place\nconst app = await createApp({\n fileUtils: { readFile, serveFile },\n runMigrationsOnStartup: true,\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n",[],[150,300],[150],{"_102":310,"_95":311,"_151":312,"_153":-5,"_154":136,"_155":313,"_157":158,"_104":314,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":315,"_98":512},"2ec631e8-c516-11f0-b86e-42dde27851f2","frontend","2ec63292-c516-11f0-b86e-42dde27851f2",18,["D",1763535951270],[316,468,493,503],{"_102":317,"_95":318,"_151":319,"_153":312,"_154":136,"_155":320,"_157":158,"_104":321,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":322,"_98":467},"2f4d8f12-c516-11f0-9a1a-42dde27851f2","components","2f4d8fee-c516-11f0-9a1a-42dde27851f2",21,["D",1763535952200],[323,405,414,423,432,441,449,458],{"_102":324,"_95":325,"_151":326,"_153":319,"_154":136,"_155":327,"_157":158,"_104":328,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":329,"_98":404},"89942e58-c517-11f0-8508-42dde27851f2","widgets","89942f84-c517-11f0-8508-42dde27851f2",82,["D",1763536533152],[330,339,348,357,367,377,386,395],{"_102":331,"_95":332,"_151":333,"_153":326,"_154":136,"_155":334,"_157":158,"_104":335,"_99":191,"_160":181,"_162":336,"_163":22,"_164":-5,"_165":337,"_98":338},"d4a96c94-c523-11f0-adce-42dde27851f2","ChatPresenter.tsx","1b538dbc-c51c-11f0-9a42-42dde27851f2",237,["D",1763541813078],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponsesForStep, getResponseForSessionAndStep, getUserAttribute, setUserAttribute, deleteResponsesForStep } from \"../../utils/api.ts\";\nimport type { ChatWidgetConfig, ChatResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface ChatPresenterProps {\n config: ChatWidgetConfig;\n responses: Response[];\n sessionId: string;\n stepId: number;\n onMessageSent?: () => void;\n}\n\ninterface ChatMessage {\n id: number;\n message: string;\n userName: string;\n createdAt: string;\n}\n\nexport function ChatPresenter({ config, responses, sessionId, stepId, onMessageSent }: ChatPresenterProps) {\n const [userName, setUserName] = useState(null);\n const [nameInput, setNameInput] = useState(\"\");\n const [nameLoading, setNameLoading] = useState(false);\n const [loadingName, setLoadingName] = useState(true);\n const [messageInput, setMessageInput] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [clearing, setClearing] = useState(false);\n\n useEffect(() => {\n // Check if presenter has a name\n getUserAttribute(sessionId, \"name\").then((name) => {\n setUserName(name);\n setLoadingName(false);\n });\n }, [sessionId]);\n\n useEffect(() => {\n // Poll for new messages\n if (!userName) return;\n\n const loadMessages = async () => {\n try {\n const resps = await getResponsesForStep(stepId);\n // Update parent component's responses through a callback or just refresh\n // For now, we'll use the responses prop which should be updated by parent\n } catch (err) {\n console.error(\"Failed to load messages:\", err);\n }\n };\n\n const interval = setInterval(loadMessages, 2000);\n return () => clearInterval(interval);\n }, [stepId, userName]);\n\n // Disable auto-scroll in presenter mode to prevent input box from causing scroll\n // useEffect(() => {\n // // Scroll to bottom when new messages arrive\n // messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n // }, [responses]);\n\n const handleSetName = async () => {\n if (!nameInput.trim()) return;\n \n setNameLoading(true);\n try {\n await setUserAttribute(sessionId, \"name\", nameInput.trim());\n setUserName(nameInput.trim());\n setNameInput(\"\");\n } catch (err) {\n console.error(\"Failed to set name:\", err);\n alert(\"Failed to set name. Please try again.\");\n } finally {\n setNameLoading(false);\n }\n };\n\n const handleSubmitMessage = async () => {\n if (!messageInput.trim() || !userName) return;\n \n setSubmitting(true);\n try {\n // Get existing response for this user/step\n const existingResponse = await getResponseForSessionAndStep(sessionId, stepId);\n let existingMessages: Array<{ message: string; timestamp: string }> = [];\n \n if (existingResponse) {\n try {\n const existingData = JSON.parse(existingResponse.response_data) as ChatResponse;\n if (existingData.messages && Array.isArray(existingData.messages)) {\n existingMessages = existingData.messages;\n } else if ((existingData as any).message) {\n // Migrate old format to new format\n existingMessages = [{\n message: (existingData as any).message,\n timestamp: existingResponse.created_at,\n }];\n }\n } catch {\n // Invalid existing data, start fresh\n }\n }\n \n // Add new message\n const newMessage = {\n message: messageInput.trim(),\n timestamp: new Date().toISOString(),\n };\n existingMessages.push(newMessage);\n \n // Submit updated response\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n messages: existingMessages,\n userName: userName,\n } as ChatResponse,\n });\n \n setMessageInput(\"\");\n // Notify parent to reload responses\n onMessageSent?.();\n } catch (err) {\n console.error(\"Failed to submit message:\", err);\n alert(\"Failed to send message. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n const handleClearMessages = async () => {\n if (!confirm(\"Are you sure you want to clear all messages? This cannot be undone.\")) {\n return;\n }\n \n setClearing(true);\n try {\n await deleteResponsesForStep(stepId);\n // Notify parent to reload responses\n onMessageSent?.();\n } catch (err) {\n console.error(\"Failed to clear messages:\", err);\n alert(\"Failed to clear messages. Please try again.\");\n } finally {\n setClearing(false);\n }\n };\n\n const messages = useMemo(() => {\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n // Handle both old format (single message) and new format (array of messages)\n if (data.messages && Array.isArray(data.messages)) {\n // New format: array of messages\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n // Old format: single message (for backwards compatibility)\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Invalid response data, skip\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n return chatMessages;\n }, [responses]);\n\n if (loadingName) {\n return (\n

\n );\n }\n\n // Show name prompt if presenter doesn't have a name\n if (!userName) {\n return (\n

\n {config.title || \"Chat\"}\n

\n \n Please enter your name to participate in the chat\n \n setNameInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !nameLoading) {\n handleSetName();\n }\n }}\n placeholder=\"Your name\"\n className=\"w-full px-4 py-3 glass-input text-gray-800\"\n autoFocus\n />\n

\n \n {nameLoading ? \"Setting name...\" : \"Continue\"}\n \n

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

\n {config.title || \"Chat\"}\n

\n {messages.length > 0 && (\n \n {clearing ? \"Clearing...\" : \"Clear\"}\n \n )}\n

\n {messages.length} {messages.length === 1 ? \"message\" : \"messages\"}\n

\n \n

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

💬

No messages yet

Be the first to say something!

\n ) : (\n messages.map((msg, idx) => (\n \n

\n {msg.userName === userName ? \"You\" : msg.userName}\n

\n {new Date(msg.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}\n

{msg.message}

\n ))\n )}\n

\n\n {/* Input area */}\n

\n setMessageInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !submitting && messageInput.trim()) {\n handleSubmitMessage();\n }\n }}\n placeholder={config.placeholder || \"Type your message...\"}\n className=\"flex-1 px-4 py-3 glass-input text-gray-800\"\n disabled={submitting}\n />\n \n {submitting ? \"...\" : \"Send\"}\n \n

\n \n );\n}\n\n",[],[311,318,325,332],{"_102":340,"_95":341,"_151":342,"_153":326,"_154":136,"_155":343,"_157":158,"_104":344,"_99":284,"_160":181,"_162":345,"_163":22,"_164":-5,"_165":346,"_98":347},"165b918a-c524-11f0-8b46-42dde27851f2","ChatWidget.tsx","1b7e9eee-c51c-11f0-be28-42dde27851f2",239,["D",1763541923285],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponsesForStep, getResponseForSessionAndStep, getUserAttribute, setUserAttribute } from \"../../utils/api.ts\";\nimport type { ChatWidgetConfig, ChatResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface ChatWidgetProps {\n stepId: number;\n config: ChatWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\ninterface ChatMessage {\n id: number;\n message: string;\n userName: string;\n createdAt: string;\n}\n\nexport function ChatWidget({ stepId, config, sessionId }: ChatWidgetProps) {\n const [userName, setUserName] = useState(null);\n const [nameInput, setNameInput] = useState(\"\");\n const [nameLoading, setNameLoading] = useState(false);\n const [messages, setMessages] = useState([]);\n const [messageInput, setMessageInput] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [loadingName, setLoadingName] = useState(true);\n const messagesEndRef = useRef(null);\n\n useEffect(() => {\n // Check if user has a name\n getUserAttribute(sessionId, \"name\").then((name) => {\n setUserName(name);\n setLoadingName(false);\n });\n }, [sessionId]);\n\n useEffect(() => {\n // Load messages and poll for updates\n if (!userName) return;\n\n const loadMessages = async () => {\n try {\n const responses = await getResponsesForStep(stepId);\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n // Handle both old format (single message) and new format (array of messages)\n if (data.messages && Array.isArray(data.messages)) {\n // New format: array of messages\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n // Old format: single message (for backwards compatibility)\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Invalid response data, skip\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n setMessages(chatMessages);\n } catch (err) {\n console.error(\"Failed to load messages:\", err);\n }\n };\n\n loadMessages();\n const interval = setInterval(loadMessages, 2000);\n return () => clearInterval(interval);\n }, [stepId, userName]);\n\n useEffect(() => {\n // Scroll to bottom when new messages arrive\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSetName = async () => {\n if (!nameInput.trim()) return;\n \n setNameLoading(true);\n try {\n await setUserAttribute(sessionId, \"name\", nameInput.trim());\n setUserName(nameInput.trim());\n setNameInput(\"\");\n } catch (err) {\n console.error(\"Failed to set name:\", err);\n alert(\"Failed to set name. Please try again.\");\n } finally {\n setNameLoading(false);\n }\n };\n\n const handleSubmitMessage = async () => {\n if (!messageInput.trim() || !userName) return;\n \n setSubmitting(true);\n try {\n // Get existing response for this user/step\n const existingResponse = await getResponseForSessionAndStep(sessionId, stepId);\n let existingMessages: Array<{ message: string; timestamp: string }> = [];\n \n if (existingResponse) {\n try {\n const existingData = JSON.parse(existingResponse.response_data) as ChatResponse;\n if (existingData.messages && Array.isArray(existingData.messages)) {\n existingMessages = existingData.messages;\n } else if ((existingData as any).message) {\n // Migrate old format to new format\n existingMessages = [{\n message: (existingData as any).message,\n timestamp: existingResponse.created_at,\n }];\n }\n } catch {\n // Invalid existing data, start fresh\n }\n }\n \n // Add new message\n const newMessage = {\n message: messageInput.trim(),\n timestamp: new Date().toISOString(),\n };\n existingMessages.push(newMessage);\n \n // Submit updated response\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n messages: existingMessages,\n userName: userName,\n } as ChatResponse,\n });\n \n setMessageInput(\"\");\n \n // Reload messages to show the new one\n const responses = await getResponsesForStep(stepId);\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n if (data.messages && Array.isArray(data.messages)) {\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Skip invalid responses\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n setMessages(chatMessages);\n } catch (err) {\n console.error(\"Failed to submit message:\", err);\n alert(\"Failed to send message. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n if (loadingName) {\n return (\n

\n );\n }\n\n // Show name prompt if user doesn't have a name\n if (!userName) {\n return (\n

\n {config.title || \"Welcome to the Chat\"}\n

\n \n Please enter your name to continue\n \n setNameInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !nameLoading) {\n handleSetName();\n }\n }}\n placeholder=\"Your name\"\n className=\"w-full px-4 py-3 glass-input text-gray-800\"\n autoFocus\n />\n

\n \n {nameLoading ? \"Setting name...\" : \"Continue\"}\n \n

\n );\n }\n\n // Show chat interface\n return (\n

\n {config.title || \"Chat\"}\n

\n \n {/* Messages area */}\n

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

💬

No messages yet

Be the first to say something!

\n ) : (\n messages.map((msg) => (\n \n

\n {msg.userName === userName ? \"You\" : msg.userName}\n

{msg.message}

\n ))\n )}\n

\n\n {/* Input area */}\n

\n );\n}\n\n",[],[311,318,325,341],{"_102":349,"_95":350,"_151":351,"_153":326,"_154":136,"_155":352,"_157":158,"_104":353,"_99":284,"_160":181,"_162":354,"_163":22,"_164":-5,"_165":355,"_98":356},"63c798c8-c53e-11f0-bb10-42dde27851f2","MultivotePresenter.tsx","6e4088ec-c53d-11f0-826e-42dde27851f2",292,["D",1763553220106],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { deleteResponsesForStep } from \"../../utils/api.ts\";\nimport type { MultivoteWidgetConfig, MultivoteResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface MultivotePresenterProps {\n config: MultivoteWidgetConfig;\n responses: Response[];\n stepId: number;\n onClear?: () => void;\n}\n\ninterface OptionCount {\n option: string;\n count: number;\n}\n\nexport function MultivotePresenter({ config, responses, stepId, onClear }: MultivotePresenterProps) {\n const [clearing, setClearing] = useState(false);\n\n const handleClearAll = async () => {\n if (!confirm(\"Are you sure you want to clear all votes? This cannot be undone.\")) {\n return;\n }\n \n setClearing(true);\n try {\n await deleteResponsesForStep(stepId);\n // Notify parent to reload responses\n onClear?.();\n } catch (err) {\n console.error(\"Failed to clear votes:\", err);\n alert(\"Failed to clear votes. Please try again.\");\n } finally {\n setClearing(false);\n }\n };\n\n const results = useMemo(() => {\n const optionCounts = new Map();\n let totalVotes = 0;\n let totalParticipants = 0;\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n if (data.selectedOptions && Array.isArray(data.selectedOptions)) {\n totalParticipants++;\n data.selectedOptions.forEach((option) => {\n if (option && option.trim()) {\n const trimmed = option.trim();\n optionCounts.set(trimmed, (optionCounts.get(trimmed) || 0) + 1);\n totalVotes++;\n }\n });\n }\n } catch {\n // Invalid response data\n }\n });\n\n // Convert to array and sort by count (descending), then alphabetically\n const sortedOptions: OptionCount[] = Array.from(optionCounts.entries())\n .map(([option, count]) => ({ option, count }))\n .sort((a, b) => {\n // First sort by count (descending)\n if (b.count !== a.count) {\n return b.count - a.count;\n }\n // Then alphabetically\n return a.option.localeCompare(b.option);\n });\n\n return { sortedOptions, totalVotes, totalParticipants };\n }, [responses]);\n\n const maxCount = results.sortedOptions.length > 0 \n ? Math.max(...results.sortedOptions.map(o => o.count), 1)\n : 1;\n\n return (\n

{config.question}

\n {results.sortedOptions.length > 0 && (\n \n {clearing ? \"Clearing...\" : \"Clear\"}\n \n )}\n

\n \n

\n {results.totalParticipants} {results.totalParticipants === 1 ? \"participant\" : \"participants\"}\n

\n {results.totalVotes} {results.totalVotes === 1 ? \"vote\" : \"votes\"}\n

\n\n {results.sortedOptions.length === 0 ? (\n

📊

No votes yet

Waiting for participants to submit their votes...

\n ) : (\n

\n {results.sortedOptions.map(({ option, count }) => {\n const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n \n return (\n

\n {option}\n \n {count} {count === 1 ? \"vote\" : \"votes\"}\n \n

\n \n

\n );\n })}\n

\n )}\n \n );\n}\n\n",[],[311,318,325,350],{"_102":358,"_95":359,"_151":360,"_153":326,"_154":136,"_155":361,"_157":158,"_104":362,"_99":363,"_160":181,"_162":364,"_163":22,"_164":-5,"_165":365,"_98":366},"2650dd2e-c53e-11f0-8fc4-42dde27851f2","MultivoteWidget.tsx","6e4e19d0-c53d-11f0-bb9a-42dde27851f2",290,["D",1763553116984],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep, getResponsesForStep } from \"../../utils/api.ts\";\nimport type { MultivoteWidgetConfig, MultivoteResponse } from \"../../../shared/types.ts\";\n\ninterface MultivoteWidgetProps {\n stepId: number;\n config: MultivoteWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function MultivoteWidget({ stepId, config, sessionId, onSubmit }: MultivoteWidgetProps) {\n const [selectedOptions, setSelectedOptions] = useState>(new Set());\n const [newOptionText, setNewOptionText] = useState(\"\");\n const [allOptions, setAllOptions] = useState>(new Set());\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Load existing response and all available options\n useEffect(() => {\n const loadData = async () => {\n // Don't update selectedOptions from server if we're currently submitting\n if (isSubmitting) return;\n \n try {\n // Load user's existing response\n const response = await getResponseForSessionAndStep(sessionId, stepId);\n if (response) {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n const serverSelected = new Set(data.selectedOptions || []);\n setSelectedOptions(serverSelected);\n setHasExistingResponse(true);\n }\n\n // Load all responses to get all available options\n const allResponses = await getResponsesForStep(stepId);\n const optionsSet = new Set();\n allResponses.forEach((resp) => {\n try {\n const data = JSON.parse(resp.response_data) as MultivoteResponse;\n if (data.selectedOptions && Array.isArray(data.selectedOptions)) {\n data.selectedOptions.forEach((opt) => {\n if (opt && opt.trim()) {\n optionsSet.add(opt.trim());\n }\n });\n }\n } catch {\n // Invalid response data\n }\n });\n setAllOptions(optionsSet);\n } catch (err) {\n console.error(\"Failed to load data:\", err);\n }\n };\n\n loadData();\n \n // Poll for new options\n const interval = setInterval(loadData, 2000);\n return () => clearInterval(interval);\n }, [sessionId, stepId, isSubmitting]);\n\n const handleToggleOption = async (option: string) => {\n const newSelected = new Set(selectedOptions);\n if (newSelected.has(option)) {\n newSelected.delete(option);\n } else {\n newSelected.add(option);\n }\n setSelectedOptions(newSelected);\n \n // Immediately submit the updated selection to avoid race conditions\n await handleSubmit(newSelected);\n };\n\n const handleAddOption = async () => {\n const trimmed = newOptionText.trim();\n if (!trimmed) return;\n\n // Add to local options set immediately\n const newOptions = new Set(allOptions);\n newOptions.add(trimmed);\n setAllOptions(newOptions);\n\n // Add to selected options\n const newSelected = new Set(selectedOptions);\n newSelected.add(trimmed);\n setSelectedOptions(newSelected);\n\n // Clear input\n setNewOptionText(\"\");\n\n // Submit response immediately with the new option included\n await handleSubmit(newSelected);\n };\n\n const handleSubmit = async (optionsToSubmit?: Set) => {\n const options = optionsToSubmit || selectedOptions;\n if (options.size === 0) return;\n \n setIsSubmitting(true);\n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n selectedOptions: Array.from(options),\n } as MultivoteResponse,\n });\n setHasExistingResponse(true);\n onSubmit?.();\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n // On error, revert to server state\n try {\n const response = await getResponseForSessionAndStep(sessionId, stepId);\n if (response) {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n setSelectedOptions(new Set(data.selectedOptions || []));\n }\n } catch {\n // Ignore errors when reverting\n }\n } finally {\n setLoading(false);\n setIsSubmitting(false);\n }\n };\n\n // Sort options alphabetically for display\n const sortedOptions = useMemo(() => {\n return Array.from(allOptions).sort((a, b) => a.localeCompare(b));\n }, [allOptions]);\n\n return (\n

{config.question}

\n \n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {/* Add new option input */}\n

\n setNewOptionText(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleAddOption();\n }\n }}\n placeholder=\"Type a new option and press Enter...\"\n className=\"flex-1 px-4 py-3 glass-input rounded-xl text-lg\"\n />\n \n Add\n \n

\n\n {/* Options list */}\n {sortedOptions.length === 0 ? (\n

No options yet

Add an option above to get started

\n ) : (\n

\n {sortedOptions.map((option) => {\n const isSelected = selectedOptions.has(option);\n return (\n handleToggleOption(option)}\n className={`w-full p-4 text-left rounded-xl border-2 transition-all transform duration-200 ${\n isSelected\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {isSelected && (\n ✓\n )}\n

\n \n {option}\n \n

\n \n );\n })}\n

\n )}\n\n {loading && (\n

\n Saving...\n

\n )}\n

\n );\n}\n\n",[],[311,318,325,359],{"_102":368,"_95":369,"_151":370,"_153":326,"_154":136,"_155":371,"_157":158,"_104":372,"_99":373,"_160":181,"_162":374,"_163":22,"_164":-5,"_165":375,"_98":376},"14537692-c53c-11f0-8d43-42dde27851f2","Poll2DPresenter.tsx","aa97afc4-c537-11f0-8556-42dde27851f2",281,["D",1763552227810],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useMemo, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type {\n Poll2DWidgetConfig,\n Poll2DResponse,\n} from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface Poll2DPresenterProps {\n config: Poll2DWidgetConfig;\n responses: Response[];\n}\n\ninterface Point {\n x: number; // Journey stage (0 to stages.length - 1)\n y: number; // Risk aversion (1 to 5)\n}\n\nexport function Poll2DPresenter({ config, responses }: Poll2DPresenterProps) {\n const [viewportHeight, setViewportHeight] = useState(\n typeof window !== \"undefined\" ? window.innerHeight : 800\n );\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n\n window.addEventListener(\"resize\", handleResize);\n // Set initial height\n setViewportHeight(window.innerHeight);\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n const { points, total } = useMemo(() => {\n const parsedPoints: Point[] = [];\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as Poll2DResponse;\n if (\n data.journeyStage >= 0 &&\n data.journeyStage < config.journeyStages.length &&\n data.riskAversion >= config.riskScaleMin &&\n data.riskAversion <= config.riskScaleMax\n ) {\n parsedPoints.push({\n x: data.journeyStage,\n y: data.riskAversion,\n });\n }\n } catch {\n // Invalid response data\n }\n });\n\n return { points: parsedPoints, total: parsedPoints.length };\n }, [responses, config]);\n\n // Create a 2x2 grid by dividing journey stages and risk levels\n const gridData = useMemo(() => {\n const grid: Record = {\n \"top-left\": 0,\n \"top-right\": 0,\n \"bottom-left\": 0,\n \"bottom-right\": 0,\n };\n\n // Use Math.floor to ensure consistent division (early = first half, late = second half)\n const journeyMidpoint = Math.floor(config.journeyStages.length / 2);\n const riskMidpoint = (config.riskScaleMin + config.riskScaleMax) / 2;\n\n points.forEach((point) => {\n // For journey: early = first half (inclusive), late = second half\n const isEarlyJourney = point.x <= journeyMidpoint;\n // For risk: risk averse = at or above midpoint (goes to top), risk taking = below midpoint (goes to bottom)\n // Note: Top row in visualization = risk averse, bottom row = risk taking\n const isRiskAverse = point.y >= riskMidpoint;\n\n if (isEarlyJourney && isRiskAverse) {\n grid[\"top-left\"]++;\n } else if (!isEarlyJourney && isRiskAverse) {\n grid[\"top-right\"]++;\n } else if (isEarlyJourney && !isRiskAverse) {\n grid[\"bottom-left\"]++;\n } else {\n grid[\"bottom-right\"]++;\n }\n });\n\n return grid;\n }, [points, config]);\n\n const maxCount = Math.max(...Object.values(gridData), 1);\n\n // Calculate grid cell dimensions\n const gridSize = 500;\n const cellSize = gridSize / 2;\n const padding = 15;\n const axisLabelSpace = 70; // Space for axis labels\n const categoryLabelSpace = 35; // Space for category labels (numbers are smaller)\n const axisLabelGap = 20; // Gap between category numbers and axis label\n const totalWidth = gridSize + axisLabelSpace + categoryLabelSpace;\n const totalHeight =\n gridSize + axisLabelSpace + categoryLabelSpace + axisLabelGap;\n\n // Detect if we're in a very small embedded view\n const isEmbeddedView = viewportHeight < 1000;\n\n // Calculate scale factor based on viewport height\n // Reserve space for titles (~150px) and legend (~200px) and padding (~100px)\n // For small embedded views, reserve less space since we'll hide header and make titles compact\n // Use only gridSize for scaling calculation (exclude labels) to delay scaling much later\n // Increased reserved space significantly so graph takes up more space by default\n const reservedSpace = isEmbeddedView ? 250 : 800;\n const availableHeight = viewportHeight - reservedSpace;\n const scaleFactor = useMemo(() => {\n // Only scale when availableHeight is significantly less than gridSize\n // Threshold increased by 200px so scaling starts earlier\n const scalingThreshold = gridSize * 0.5 + 200; // 450px (250px + 200px)\n if (availableHeight > 0 && availableHeight < scalingThreshold) {\n return Math.max(0.5, availableHeight / scalingThreshold); // Minimum scale of 0.5\n }\n return 1;\n }, [availableHeight, gridSize]);\n\n // Generate risk labels (use provided labels or default to numbers)\n const riskLabels = useMemo(() => {\n const range = config.riskScaleMax - config.riskScaleMin + 1;\n if (config.riskLabels && config.riskLabels.length === range) {\n return config.riskLabels;\n }\n // Default to numbers if labels not provided\n return Array.from({ length: range }, (_, i) =>\n String(config.riskScaleMin + i)\n );\n }, [config.riskLabels, config.riskScaleMin, config.riskScaleMax]);\n\n return (\n

\n {!isEmbeddedView && (\n

\n {config.question1}\n

\n {config.question2}\n

\n\n

\n {total} {total === 1 ? \"response\" : \"responses\"}\n

\n )}\n\n {isEmbeddedView && (\n

\n \n {config.question1}\n \n •\n \n {config.question2}\n \n \n ({total} {total === 1 ? \"response\" : \"responses\"})\n \n

\n )}\n\n {total === 0 ? (\n

📊

No responses yet

\n Waiting for participants to submit their answers...\n

\n ) : (\n

\n {/* 2x2 Grid Visualization with Axes */}\n \n \n {/* Main grid area */}\n \n {/* Grid lines */}\n \n {/* Vertical line */}\n \n {/* Horizontal line */}\n \n \n\n {/* Grid cells with counts */}\n {[\n {\n key: \"top-left\",\n x: 0,\n y: 0,\n label: \"Early Journey\\nRisk Averse\",\n },\n {\n key: \"top-right\",\n x: cellSize,\n y: 0,\n label: \"Late Journey\\nRisk Averse\",\n },\n {\n key: \"bottom-left\",\n x: 0,\n y: cellSize,\n label: \"Early Journey\\nRisk Taking\",\n },\n {\n key: \"bottom-right\",\n x: cellSize,\n y: cellSize,\n label: \"Late Journey\\nRisk Taking\",\n },\n ].map(({ key, x, y, label }) => {\n const count = gridData[key];\n const percentage =\n maxCount > 0 ? (count / maxCount) * 100 : 0;\n\n return (\n 0\n ? `linear-gradient(135deg, rgba(255, 46, 99, ${\n (percentage / 100) * 0.3\n }), rgba(255, 153, 51, ${\n (percentage / 100) * 0.3\n }))`\n : \"rgba(255, 255, 255, 0.3)\",\n }}\n >\n

\n {count}\n

\n {label}\n

\n );\n })}\n\n {/* Scatter plot overlay */}\n \n {points.map((point, index) => {\n const circleRadius = 6;\n const edgePadding = circleRadius + 2; // Padding to keep circles visible at edges\n\n // Normalize journey stage to 0-1 range\n const normalizedX =\n config.journeyStages.length > 1\n ? point.x / (config.journeyStages.length - 1)\n : 0.5;\n\n // Normalize risk aversion to 0-1 range\n // Low risk (riskScaleMin) should be at top (y=0), High risk (riskScaleMax) at bottom (y=gridSize)\n const riskRange = config.riskScaleMax - config.riskScaleMin;\n const normalizedY =\n riskRange > 0\n ? (point.y - config.riskScaleMin) / riskRange\n : 0.5;\n\n // Map to SVG coordinates with padding to keep circles visible\n // X: 0 to gridSize, with padding\n const x =\n edgePadding + normalizedX * (gridSize - 2 * edgePadding);\n // Y: Invert so low risk (normalizedY=0) is at top, high risk (normalizedY=1) at bottom\n const y =\n edgePadding +\n (1 - normalizedY) * (gridSize - 2 * edgePadding);\n\n // Generate stable offset based on point data to prevent overlapping\n // Use a simple hash function for consistent positioning\n const hash = (point.x * 31 + point.y * 17 + index) % 100;\n const angle = (hash / 100) * Math.PI * 2;\n const radius = (hash % 20) / 2; // Vary radius slightly\n const offsetX = Math.cos(angle) * radius;\n const offsetY = Math.sin(angle) * radius;\n\n return (\n \n );\n })}\n \n

\n\n {/* Y-axis label (Risk Aversion) - positioned to align with grid, accounting for rotation */}\n \n

\n {config.question2}\n

\n \n\n {/* X-axis label (Journey Stage) - positioned below category labels with gap */}\n \n

\n {config.question1}\n

\n \n\n {/* Y-axis category labels (Risk levels) - show numbers only */}\n \n {Array.from(\n { length: config.riskScaleMax - config.riskScaleMin + 1 },\n (_, i) => {\n const value = config.riskScaleMin + i;\n const normalizedY =\n (value - config.riskScaleMin) /\n (config.riskScaleMax - config.riskScaleMin);\n const y = (1 - normalizedY) * gridSize; // Invert for SVG coordinates\n\n return (\n \n {value}\n \n );\n }\n )}\n \n\n {/* X-axis category labels (Journey stages) - show numbers only */}\n \n {config.journeyStages.map((stage, index) => {\n const normalizedX =\n config.journeyStages.length > 1\n ? index / (config.journeyStages.length - 1)\n : 0.5;\n const x = normalizedX * gridSize;\n\n return (\n \n {index + 1}\n \n );\n })}\n \n \n \n\n {/* Legend - Show number to label mapping for both axes */}\n

\n Journey Stages\n

\n {config.journeyStages.map((stage, index) => (\n \n \n {index + 1}\n \n {stage}\n

\n ))}\n

\n Risk Aversion Levels\n

\n {riskLabels.map((label, index) => {\n const value = config.riskScaleMin + index;\n return (\n \n \n {value}\n \n {label}\n

\n );\n })}\n

\n \n \n \n )}\n \n );\n}\n",[],[311,318,325,369],{"_102":378,"_95":379,"_151":380,"_153":326,"_154":136,"_155":381,"_157":158,"_104":382,"_99":32,"_160":181,"_162":383,"_163":22,"_164":-5,"_165":384,"_98":385},"aa875426-c537-11f0-9c84-42dde27851f2","Poll2DWidget.tsx","aa8754bc-c537-11f0-9c84-42dde27851f2",248,["D",1763550332330],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep } from \"../../utils/api.ts\";\nimport type { Poll2DWidgetConfig, Poll2DResponse } from \"../../../shared/types.ts\";\n\ninterface Poll2DWidgetProps {\n stepId: number;\n config: Poll2DWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function Poll2DWidget({ stepId, config, sessionId, onSubmit }: Poll2DWidgetProps) {\n const [journeyStage, setJourneyStage] = useState(null);\n const [riskAversion, setRiskAversion] = useState(null);\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [lastSubmitted, setLastSubmitted] = useState(false);\n\n useEffect(() => {\n // Check if user already submitted\n getResponseForSessionAndStep(sessionId, stepId).then((response) => {\n if (response) {\n const data = JSON.parse(response.response_data) as Poll2DResponse;\n setJourneyStage(data.journeyStage);\n setRiskAversion(data.riskAversion);\n setHasExistingResponse(true);\n }\n }).catch(() => {\n // No previous response\n });\n }, [sessionId, stepId]);\n\n const handleSubmit = async () => {\n if (journeyStage === null || riskAversion === null) return;\n \n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n journeyStage,\n riskAversion,\n } as Poll2DResponse,\n });\n setHasExistingResponse(true);\n setLastSubmitted(true);\n onSubmit?.();\n \n // Reset the \"just submitted\" indicator after a short delay\n setTimeout(() => setLastSubmitted(false), 2000);\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n const journeyPercentage = journeyStage !== null \n ? (journeyStage / (config.journeyStages.length - 1)) * 100 \n : 0;\n\n return (\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {/* Journey Stage Question */}\n

{config.question1}

\n \n

\n {/* Timeline track */}\n

\n {/* Progress indicator */}\n {journeyStage !== null && (\n \n

\n )}\n

\n \n {/* Stage labels */}\n

\n {config.journeyStages.map((stage, index) => (\n setJourneyStage(index)}\n className=\"flex flex-col items-center gap-2 transition-all transform duration-200 cursor-pointer hover:scale-110\"\n >\n

\n {journeyStage === index && (\n

\n )}\n

\n \n {stage}\n \n \n ))}\n

\n\n {/* Risk Aversion Question */}\n

{config.question2}

\n \n

\n {Array.from({ length: config.riskScaleMax - config.riskScaleMin + 1 }, (_, i) => {\n const value = config.riskScaleMin + i;\n const label = config.riskLabels && config.riskLabels[i] \n ? config.riskLabels[i] \n : String(value);\n return (\n setRiskAversion(value)}\n className={`flex-1 py-4 px-2 rounded-xl border-2 transition-all transform duration-200 ${\n riskAversion === value\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {value}\n

\n {label}\n

\n \n );\n })}\n

\n\n {lastSubmitted ? (\n

\n ✓ Response {hasExistingResponse ? \"updated\" : \"submitted\"}!\n

\n ) : (\n \n {loading ? (hasExistingResponse ? \"Updating...\" : \"Submitting...\") : (hasExistingResponse ? \"Update Answer\" : \"Submit Answer\")}\n \n )}\n

\n );\n}\n\n",[],[311,318,325,379],{"_102":387,"_95":388,"_151":389,"_153":326,"_154":136,"_155":390,"_157":158,"_104":391,"_99":284,"_160":181,"_162":392,"_163":22,"_164":-5,"_165":393,"_98":394},"1657b948-c524-11f0-8438-42dde27851f2","PollPresenter.tsx","8a09848c-c517-11f0-8427-42dde27851f2",238,["D",1763541923263],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { PollWidgetConfig, PollResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface PollPresenterProps {\n config: PollWidgetConfig;\n responses: Response[];\n}\n\nexport function PollPresenter({ config, responses }: PollPresenterProps) {\n const results = useMemo(() => {\n const counts = new Array(config.options.length).fill(0);\n let total = 0;\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as PollResponse;\n if (data.optionIndex >= 0 && data.optionIndex < config.options.length) {\n counts[data.optionIndex]++;\n total++;\n }\n } catch {\n // Invalid response data\n }\n });\n\n return { counts, total };\n }, [responses, config.options.length]);\n\n const maxCount = Math.max(...results.counts, 1);\n\n return (\n

{config.question}

\n \n

\n {results.total} {results.total === 1 ? \"response\" : \"responses\"}\n

\n\n {results.total === 0 ? (\n

📊

No responses yet

Waiting for participants to submit their answers...

\n ) : (\n

\n {config.options.map((option, index) => {\n const count = results.counts[index];\n const percentage = results.total > 0 ? (count / results.total) * 100 : 0;\n \n return (\n

\n {option}\n \n {count} ({percentage.toFixed(1)}%)\n \n

\n \n

\n );\n })}\n

\n )}\n \n );\n}\n\n",[],[311,318,325,388],{"_102":396,"_95":397,"_151":398,"_153":326,"_154":136,"_155":399,"_157":158,"_104":400,"_99":363,"_160":181,"_162":401,"_163":22,"_164":-5,"_165":402,"_98":403},"aad64004-c537-11f0-a382-42dde27851f2","PollWidget.tsx","8a232ff4-c517-11f0-87d0-42dde27851f2",255,["D",1763550332844],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep } from \"../../utils/api.ts\";\nimport type { PollWidgetConfig, PollResponse } from \"../../../shared/types.ts\";\n\ninterface PollWidgetProps {\n stepId: number;\n config: PollWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function PollWidget({ stepId, config, sessionId, onSubmit }: PollWidgetProps) {\n const [selectedOption, setSelectedOption] = useState(null);\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [lastSubmitted, setLastSubmitted] = useState(false);\n\n useEffect(() => {\n // Check if user already submitted\n getResponseForSessionAndStep(sessionId, stepId).then((response) => {\n if (response) {\n const data = JSON.parse(response.response_data) as PollResponse;\n setSelectedOption(data.optionIndex);\n setHasExistingResponse(true);\n }\n }).catch(() => {\n // No previous response\n });\n }, [sessionId, stepId]);\n\n const handleSubmit = async () => {\n if (selectedOption === null) return;\n \n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n optionIndex: selectedOption,\n } as PollResponse,\n });\n setHasExistingResponse(true);\n setLastSubmitted(true);\n onSubmit?.();\n \n // Reset the \"just submitted\" indicator after a short delay\n setTimeout(() => setLastSubmitted(false), 2000);\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

{config.question}

\n \n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n \n

\n {config.options.map((option, index) => (\n setSelectedOption(index)}\n className={`w-full p-4 text-left rounded-xl border-2 transition-all transform duration-200 ${\n selectedOption === index\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {selectedOption === index && (\n

\n )}\n

\n \n {option}\n \n

\n \n ))}\n

\n\n {lastSubmitted ? (\n

\n ✓ Response {hasExistingResponse ? \"updated\" : \"submitted\"}!\n

\n ) : (\n \n {loading ? (hasExistingResponse ? \"Updating...\" : \"Submitting...\") : (hasExistingResponse ? \"Update Answer\" : \"Submit Answer\")}\n \n )}\n

\n );\n}\n\n",[],[311,318,325,397],[311,318,325],{"_102":406,"_95":407,"_151":408,"_153":319,"_154":136,"_155":409,"_157":158,"_104":410,"_99":363,"_160":181,"_162":411,"_163":22,"_164":-5,"_165":412,"_98":413},"47c53efa-c525-11f0-a0d1-42dde27851f2","App.tsx","89dbaff8-c517-11f0-8427-42dde27851f2",244,["D",1763542435689],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { PresenterMode } from \"./PresenterMode.tsx\";\nimport { ParticipantMode } from \"./ParticipantMode.tsx\";\nimport { ManageMode } from \"./ManageMode.tsx\";\nimport { StepManagement } from \"./StepManagement.tsx\";\nimport { Layout } from \"./Layout.tsx\";\n\ndeclare global {\n interface Window {\n __PRESENTATION_ID__?: number;\n __MODE__?: string;\n }\n}\n\nexport function App() {\n const [presentationId, setPresentationId] = useState(null);\n const [mode, setMode] = useState<\"presenter\" | \"participant\" | \"manage\" | \"steps\">(\"participant\");\n\n useEffect(() => {\n // Get presentation ID from window (injected by server)\n const id = window.__PRESENTATION_ID__;\n const modeFromWindow = window.__MODE__;\n \n if (id) {\n setPresentationId(id);\n }\n \n if (modeFromWindow === \"presenter\") {\n setMode(\"presenter\");\n }\n\n // Check URL for routing\n const path = window.location.pathname;\n const joinMatch = path.match(/^\\/join\\/(\\d+)$/);\n const presentMatch = path.match(/^\\/present\\/(\\d+)$/);\n const manageMatch = path.match(/^\\/manage$/);\n const stepsMatch = path.match(/^\\/manage\\/(\\d+)\\/steps$/);\n \n if (manageMatch) {\n setMode(\"manage\");\n setPresentationId(null);\n } else if (stepsMatch) {\n setMode(\"steps\");\n setPresentationId(parseInt(stepsMatch[1]));\n } else if (joinMatch) {\n setPresentationId(parseInt(joinMatch[1]));\n setMode(\"participant\");\n } else if (presentMatch) {\n setPresentationId(parseInt(presentMatch[1]));\n setMode(\"presenter\");\n } else if (!id && !joinMatch && !presentMatch) {\n // Default to manage mode if no specific route\n setMode(\"manage\");\n }\n }, []);\n\n const renderContent = () => {\n if (mode === \"manage\") {\n return ;\n }\n\n if (mode === \"steps\" && presentationId) {\n return ;\n }\n\n if (!presentationId) {\n return (\n

\n Last Conference\n

Live Talk

Interactive sessions made simple.

\n \n Go to Management\n \n

\n );\n }\n\n return mode === \"presenter\" ? (\n \n ) : (\n \n );\n };\n\n return (\n \n {renderContent()}\n \n );\n}\n",[],[311,318,407],{"_102":415,"_95":416,"_151":417,"_153":319,"_154":136,"_155":418,"_157":158,"_104":419,"_99":32,"_160":181,"_162":420,"_163":22,"_164":-5,"_165":421,"_98":422},"22298f72-c523-11f0-852e-42dde27851f2","Layout.tsx","22298ffe-c523-11f0-852e-42dde27851f2",228,["D",1763541513598],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ReactNode } from \"https://esm.sh/react@18.2.0\";\n\ninterface LayoutProps {\n children: ReactNode;\n}\n\nexport function Layout({ children }: LayoutProps) {\n return (\n

\n {/* Liquid Background */}\n

\n\n {/* Content */}\n

\n {children}\n

\n );\n}\n\n",[],[311,318,416],{"_102":424,"_95":425,"_151":426,"_153":319,"_154":136,"_155":427,"_157":158,"_104":428,"_99":201,"_160":181,"_162":429,"_163":22,"_164":-5,"_165":430,"_98":431},"aac237c6-c537-11f0-955d-42dde27851f2","ManageMode.tsx","67cc70ac-c51a-11f0-b964-42dde27851f2",254,["D",1763550332714],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getPresentations, createPresentation, updatePresentation, deletePresentation, deleteAllPresentations } from \"../utils/api.ts\";\nimport { getOrCreateSessionId } from \"../utils/session.ts\";\nimport type { Presentation } from \"../../shared/types.ts\";\n\nexport function ManageMode() {\n const [presentations, setPresentations] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showCreateForm, setShowCreateForm] = useState(false);\n const [deletingId, setDeletingId] = useState(null);\n const [deletingAll, setDeletingAll] = useState(false);\n\n useEffect(() => {\n // Ensure session_id is set\n getOrCreateSessionId();\n loadPresentations();\n }, []);\n\n const loadPresentations = async () => {\n try {\n setError(null);\n const pres = await getPresentations();\n setPresentations(pres);\n } catch (err) {\n console.error(\"Failed to load presentations:\", err);\n setError(\"Failed to load presentations. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleCreatePresentation = async (data: { name: string; presenter: string; talk_deck_link?: string }) => {\n try {\n setError(null);\n await createPresentation(data);\n setShowCreateForm(false);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to create presentation:\", err);\n setError(\"Failed to create presentation. Please try again.\");\n }\n };\n\n const handleDeletePresentation = async (id: number) => {\n if (!confirm(\"Are you sure you want to delete this presentation? This action cannot be undone.\")) {\n return;\n }\n \n try {\n setError(null);\n setDeletingId(id);\n await deletePresentation(id);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to delete presentation:\", err);\n setError(\"Failed to delete presentation. Please try again.\");\n } finally {\n setDeletingId(null);\n }\n };\n\n const handleDeleteAllPresentations = async () => {\n if (!confirm(\"Are you sure you want to delete ALL your presentations? This action cannot be undone.\")) {\n return;\n }\n \n try {\n setError(null);\n setDeletingAll(true);\n await deleteAllPresentations();\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to delete all presentations:\", err);\n setError(\"Failed to delete all presentations. Please try again.\");\n } finally {\n setDeletingAll(false);\n }\n };\n\n const handleUpdatePresentation = async (id: number, data: { name: string; presenter: string; talk_deck_link?: string }) => {\n try {\n setError(null);\n await updatePresentation(id, data);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to update presentation:\", err);\n setError(\"Failed to update presentation. Please try again.\");\n throw err;\n }\n };\n\n if (loading) {\n return (\n

Loading presentations...

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

Live Talk

Presentation Management

\n Last Conference\n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n

Presentations

\n {presentations.length > 0 && (\n \n {deletingAll ? \"Deleting...\" : \"Delete All\"}\n \n )}\n setShowCreateForm(!showCreateForm)}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ New Presentation\"}\n \n

\n\n {showCreateForm && (\n

\n setShowCreateForm(false)}\n />\n

\n )}\n\n {presentations.length === 0 ? (\n

📊

No presentations yet

Create your first presentation to get started

\n ) : (\n

\n {presentations.map((pres) => (\n \n ))}\n

\n )}\n

\n );\n}\n\ninterface PresentationCardProps {\n presentation: Presentation;\n onUpdate: (id: number, data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onDelete: (id: number) => void;\n deleting: boolean;\n}\n\nfunction PresentationCard({ presentation, onUpdate, onDelete, deleting }: PresentationCardProps) {\n const [isEditing, setIsEditing] = useState(false);\n const [name, setName] = useState(presentation.name);\n const [presenter, setPresenter] = useState(presentation.presenter);\n const [talkDeckLink, setTalkDeckLink] = useState(presentation.talk_deck_link || \"\");\n const [saving, setSaving] = useState(false);\n\n // Sync local state when presentation prop changes\n useEffect(() => {\n if (!isEditing) {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n }\n }, [presentation, isEditing]);\n\n const handleSave = async () => {\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setSaving(true);\n try {\n await onUpdate(presentation.id, {\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setIsEditing(false);\n } catch (err) {\n // Error is handled by parent component\n } finally {\n setSaving(false);\n }\n };\n\n const handleCancel = () => {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n setIsEditing(false);\n };\n\n return (\n

\n {isEditing ? (\n

\n \n Presentation Name *\n \n setName(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"https://example.com/slides\"\n />\n

\n ) : (\n <>\n

{presentation.name}

by {presentation.presenter}

\n \n )}\n

\n \n {!isEditing && presentation.talk_deck_link && (\n \n 📎 View Slides\n \n )}\n\n

\n {isEditing ? (\n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n \n Cancel\n \n

\n ) : (\n <>\n

\n \n Manage Steps\n \n \n Present\n \n

\n setIsEditing(true)}\n className=\"flex-1 text-last-pink hover:text-last-orange hover:bg-pink-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors\"\n >\n Edit\n \n onDelete(presentation.id)}\n disabled={deleting}\n className=\"flex-1 text-red-500 hover:text-red-700 hover:bg-red-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors disabled:opacity-50\"\n >\n {deleting ? \"Deleting...\" : \"Delete\"}\n \n

\n \n )}\n

\n );\n}\n\ninterface PresentationFormProps {\n onSubmit: (data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onCancel: () => void;\n}\n\nfunction PresentationForm({ onSubmit, onCancel }: PresentationFormProps) {\n const [name, setName] = useState(\"\");\n const [presenter, setPresenter] = useState(\"\");\n const [talkDeckLink, setTalkDeckLink] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setLoading(true);\n try {\n await onSubmit({\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setName(\"\");\n setPresenter(\"\");\n setTalkDeckLink(\"\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Create New Presentation

\n \n

\n \n Presentation Name *\n \n setName(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"https://example.com/slides\"\n />\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Presentation\"}\n \n \n Cancel\n \n

\n );\n}\n\n",[],[311,318,425],{"_102":433,"_95":434,"_151":435,"_153":319,"_154":136,"_155":436,"_157":158,"_104":437,"_99":191,"_160":181,"_162":438,"_163":22,"_164":-5,"_165":439,"_98":440},"6e686704-c53d-11f0-9074-42dde27851f2","ParticipantMode.tsx","89f89208-c517-11f0-8427-42dde27851f2",287,["D",1763552808124],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getOrCreateSession, getActiveStep, getResponsesForStep } from \"../utils/api.ts\";\nimport { getOrCreateSessionId } from \"../utils/session.ts\";\nimport { PollWidget } from \"./widgets/PollWidget.tsx\";\nimport { ChatWidget } from \"./widgets/ChatWidget.tsx\";\nimport { Poll2DWidget } from \"./widgets/Poll2DWidget.tsx\";\nimport { MultivoteWidget } from \"./widgets/MultivoteWidget.tsx\";\nimport type { Step, Presentation } from \"../../shared/types.ts\";\nimport type { PollWidgetConfig, ChatWidgetConfig, Poll2DWidgetConfig, MultivoteWidgetConfig } from \"../../shared/types.ts\";\n\ninterface ParticipantModeProps {\n presentationId: number;\n}\n\nexport function ParticipantMode({ presentationId }: ParticipantModeProps) {\n const [sessionId, setSessionId] = useState(null);\n const [activeStep, setActiveStep] = useState(null);\n const [presentation, setPresentation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n // Initialize session\n const localSessionId = getOrCreateSessionId();\n \n getOrCreateSession(localSessionId, presentationId)\n .then(async (session) => {\n setSessionId(session.id);\n // Also load presentation info\n try {\n const pres = await fetch(`/api/presentations/${presentationId}`).then(r => r.json());\n setPresentation(pres);\n } catch {\n // Ignore presentation load errors\n }\n return loadActiveStep();\n })\n .catch((err) => {\n console.error(\"Failed to initialize:\", err);\n setError(\"Failed to join presentation\");\n })\n .finally(() => {\n setLoading(false);\n });\n }, [presentationId]);\n\n useEffect(() => {\n // Poll for active step changes\n if (!sessionId) return;\n \n const interval = setInterval(() => {\n loadActiveStep();\n }, 2000); // Poll every 2 seconds\n\n return () => clearInterval(interval);\n }, [sessionId, presentationId]);\n\n const loadActiveStep = async () => {\n try {\n const step = await getActiveStep(presentationId);\n setActiveStep(step);\n if (step) {\n setError(null);\n }\n } catch (err) {\n console.error(\"Failed to load active step:\", err);\n // Don't set error here - it's expected when no step is active\n }\n };\n\n if (loading) {\n return (\n

Joining presentation...

\n );\n }\n\n if (error) {\n return (\n

Unable to Join

{error}

\n );\n }\n\n if (!activeStep || !sessionId) {\n return (\n

⏳

Waiting for presenter...

The session will start automatically.

\n );\n }\n\n // Render widget based on type\n const widgetConfig = JSON.parse(activeStep.widget_config);\n\n return (\n

\n {presentation && (\n

\n Last Conference\n

{presentation.name}

by {presentation.presenter}

\n )}\n \n

\n {activeStep.widget_type === \"poll\" && (\n \n )}\n \n {activeStep.widget_type === \"chat\" && (\n \n )}\n \n {activeStep.widget_type === \"poll2d\" && (\n \n )}\n \n {activeStep.widget_type === \"multivote\" && (\n \n )}\n

\n );\n}\n\n",[],[311,318,434],{"_102":442,"_95":443,"_151":444,"_153":319,"_154":136,"_155":135,"_157":158,"_104":445,"_99":313,"_160":181,"_162":446,"_163":22,"_164":-5,"_165":447,"_98":448},"63ce7df0-c53e-11f0-a742-42dde27851f2","PresenterMode.tsx","89fce524-c517-11f0-b0f3-42dde27851f2",["D",1763553220113],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getPresentation, getSteps, activateStep, getResponsesForStep, getOrCreateSession, updateStepName } from \"../utils/api.ts\";\nimport { getOrCreateSessionId } from \"../utils/session.ts\";\nimport { QRCode } from \"./QRCode.tsx\";\nimport { PollPresenter } from \"./widgets/PollPresenter.tsx\";\nimport { ChatPresenter } from \"./widgets/ChatPresenter.tsx\";\nimport { Poll2DPresenter } from \"./widgets/Poll2DPresenter.tsx\";\nimport { MultivotePresenter } from \"./widgets/MultivotePresenter.tsx\";\nimport type { Presentation, Step, Response } from \"../../shared/types.ts\";\nimport type { PollWidgetConfig, ChatWidgetConfig, Poll2DWidgetConfig, MultivoteWidgetConfig } from \"../../shared/types.ts\";\n\ninterface PresenterModeProps {\n presentationId: number;\n}\n\nexport function PresenterMode({ presentationId }: PresenterModeProps) {\n const [presentation, setPresentation] = useState(null);\n const [steps, setSteps] = useState([]);\n const [activeStep, setActiveStep] = useState(null);\n const [responses, setResponses] = useState([]);\n const [sessionId, setSessionId] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [editingStepId, setEditingStepId] = useState(null);\n const [editingStepName, setEditingStepName] = useState(\"\");\n const [viewportHeight, setViewportHeight] = useState(\n typeof window !== \"undefined\" ? window.innerHeight : 800\n );\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n\n window.addEventListener(\"resize\", handleResize);\n setViewportHeight(window.innerHeight);\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n // Detect if we're in a small embedded view\n const isEmbeddedView = viewportHeight < 1000;\n\n useEffect(() => {\n // Initialize session for presenter\n const localSessionId = getOrCreateSessionId();\n getOrCreateSession(localSessionId, presentationId)\n .then((session) => {\n setSessionId(session.id);\n return loadPresentation();\n })\n .catch((err) => {\n console.error(\"Failed to initialize session:\", err);\n setError(\"Failed to initialize session\");\n setLoading(false);\n });\n }, [presentationId]);\n\n useEffect(() => {\n if (presentation) {\n loadSteps();\n }\n }, [presentation]);\n\n useEffect(() => {\n if (activeStep) {\n loadResponses();\n // Poll for new responses\n const interval = setInterval(() => {\n loadResponses();\n }, 2000);\n return () => clearInterval(interval);\n }\n }, [activeStep]);\n\n const loadPresentation = async () => {\n try {\n setError(null);\n const pres = await getPresentation(presentationId);\n setPresentation(pres);\n } catch (err) {\n console.error(\"Failed to load presentation:\", err);\n setError(\"Failed to load presentation. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const loadSteps = async () => {\n try {\n const stepList = await getSteps(presentationId);\n setSteps(stepList);\n const active = stepList.find(s => s.is_active === 1);\n if (active) {\n setActiveStep(active);\n }\n } catch (err) {\n console.error(\"Failed to load steps:\", err);\n }\n };\n\n const loadResponses = async () => {\n if (!activeStep) return;\n try {\n const resps = await getResponsesForStep(activeStep.id);\n setResponses(resps);\n } catch (err) {\n console.error(\"Failed to load responses:\", err);\n }\n };\n\n const handleActivateStep = async (step: Step) => {\n try {\n setError(null);\n await activateStep(step.id);\n setActiveStep(step);\n await loadResponses();\n } catch (err) {\n console.error(\"Failed to activate step:\", err);\n setError(\"Failed to activate step. Please try again.\");\n }\n };\n\n const handleStartEditName = (step: Step) => {\n setEditingStepId(step.id);\n setEditingStepName(step.name || \"\");\n };\n\n const handleSaveName = async (stepId: number) => {\n try {\n setError(null);\n const updatedStep = await updateStepName(stepId, editingStepName.trim() || null);\n // Update the step in the steps array\n setSteps(steps.map(s => s.id === stepId ? updatedStep : s));\n setEditingStepId(null);\n setEditingStepName(\"\");\n } catch (err) {\n console.error(\"Failed to update step name:\", err);\n setError(\"Failed to update step name. Please try again.\");\n }\n };\n\n const handleCancelEdit = () => {\n setEditingStepId(null);\n setEditingStepName(\"\");\n };\n\n if (loading) {\n return (\n

Loading presentation...

\n );\n }\n\n if (!presentation) {\n return (\n

Presentation not found

\n );\n }\n\n const joinUrl = typeof window !== \"undefined\" \n ? `${window.location.origin}/join/${presentationId}`\n : \"\";\n\n const widgetConfig = activeStep \n ? JSON.parse(activeStep.widget_config)\n : null;\n\n const getNextStep = () => {\n if (!activeStep) return null;\n const currentStepNumber = activeStep.step_number;\n return steps.find(s => s.step_number === currentStepNumber + 1) || null;\n };\n\n const handleNextStep = async () => {\n const nextStep = getNextStep();\n if (nextStep) {\n await handleActivateStep(nextStep);\n }\n };\n\n const nextStep = getNextStep();\n\n return (\n

\n {!isEmbeddedView && (\n

{presentation.name}

by {presentation.presenter}

\n \n Manage\n \n

\n Last Conference\n

\n )}\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n

\n {/* Left sidebar - QR Code and Steps */}\n

\n {/* QR Code */}\n {activeStep && (\n

Join URL

\n \n

\n {joinUrl.replace(/^https?:\\/\\//, '')}\n

\n )}\n\n {/* Steps */}\n

Steps

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

\n No steps yet. Create steps to begin your presentation.\n

\n ) : (\n steps.map((step) => (\n \n {editingStepId === step.id ? (\n

\n setEditingStepName(e.target.value)}\n onBlur={() => handleSaveName(step.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleSaveName(step.id);\n } else if (e.key === \"Escape\") {\n handleCancelEdit();\n }\n }}\n autoFocus\n className=\"w-full px-2 py-1 border border-gray-300 rounded text-sm font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-last-pink\"\n placeholder={`Step ${step.step_number}`}\n />\n

\n Press Enter to save, Esc to cancel\n

\n ) : (\n handleActivateStep(step)}\n onDoubleClick={(e) => {\n e.stopPropagation();\n handleStartEditName(step);\n }}\n className=\"w-full text-left p-3 group\"\n >\n

\n \n {step.name || `Step ${step.step_number}`}\n \n \n Double-click to edit\n \n

\n \n {step.widget_type}\n

\n \n )}\n

\n ))\n )}\n

\n\n {/* Main content - Widget */}\n

\n {/* Widget Display */}\n {activeStep && widgetConfig && (\n

\n {activeStep.widget_type === \"poll\" && (\n \n )}\n {activeStep.widget_type === \"chat\" && sessionId && (\n \n )}\n {activeStep.widget_type === \"poll2d\" && (\n \n )}\n {activeStep.widget_type === \"multivote\" && (\n \n )}\n

\n {nextStep && (\n

\n \n Next Step →\n \n

\n )}\n

\n )}\n\n {!activeStep && (\n

\n Select a step from the sidebar to begin presenting\n

\n )}\n

\n );\n}\n\n",[],[311,318,443],{"_102":450,"_95":451,"_151":452,"_153":319,"_154":136,"_155":453,"_157":158,"_104":454,"_99":284,"_160":181,"_162":455,"_163":22,"_164":-5,"_165":456,"_98":457},"a869903c-c523-11f0-8481-42dde27851f2","QRCode.tsx","8b2152be-c517-11f0-8508-42dde27851f2",235,["D",1763541738840],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport QRCodeLib from \"https://esm.sh/qrcode@1.5.3\";\n\ninterface QRCodeProps {\n url: string;\n size?: number;\n}\n\nexport function QRCode({ url, size = 256 }: QRCodeProps) {\n const canvasRef = useRef(null);\n const [error, setError] = useState(false);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n setLoading(true);\n setError(false);\n\n // Generate QR code directly on canvas using local library\n QRCodeLib.toCanvas(canvas, url, {\n width: size,\n margin: 2,\n color: {\n dark: \"#000000\",\n light: \"#FFFFFF\",\n },\n })\n .then(() => {\n setError(false);\n setLoading(false);\n })\n .catch((err) => {\n console.error(\"Failed to generate QR code:\", err);\n setError(true);\n setLoading(false);\n const ctx = canvas.getContext(\"2d\");\n if (ctx) {\n ctx.fillStyle = \"#f3f4f6\";\n ctx.fillRect(0, 0, size, size);\n ctx.fillStyle = \"#6b7280\";\n ctx.font = \"16px sans-serif\";\n ctx.textAlign = \"center\";\n ctx.fillText(\"QR Code\", size / 2, size / 2 - 10);\n ctx.fillText(\"Error\", size / 2, size / 2 + 10);\n }\n });\n }, [url, size]);\n\n return (\n

\n );\n}\n\n",[],[311,318,451],{"_102":459,"_95":460,"_151":461,"_153":319,"_154":136,"_155":462,"_157":158,"_104":463,"_99":191,"_160":181,"_162":464,"_163":22,"_164":-5,"_165":465,"_98":466},"6e3b91e8-c53d-11f0-a9ea-42dde27851f2","StepManagement.tsx","7f8de068-c51a-11f0-b0ed-42dde27851f2",284,["D",1763552808136],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getPresentation, getSteps, createStep, updateStep, deleteStep as deleteStepAPI } from \"../utils/api.ts\";\nimport type { Presentation, Step, PollWidgetConfig, ChatWidgetConfig, Poll2DWidgetConfig, MultivoteWidgetConfig } from \"../../shared/types.ts\";\n\ninterface StepManagementProps {\n presentationId: number;\n}\n\nexport function StepManagement({ presentationId }: StepManagementProps) {\n const [presentation, setPresentation] = useState(null);\n const [steps, setSteps] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [editingStep, setEditingStep] = useState(null);\n const [showCreateForm, setShowCreateForm] = useState(false);\n\n useEffect(() => {\n loadData();\n }, [presentationId]);\n\n const loadData = async () => {\n try {\n setError(null);\n const [pres, stepList] = await Promise.all([\n getPresentation(presentationId),\n getSteps(presentationId),\n ]);\n setPresentation(pres);\n setSteps(stepList);\n } catch (err) {\n console.error(\"Failed to load data:\", err);\n setError(\"Failed to load presentation data. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleCreateStep = async (data: { widget_type: string; widget_config: Record; step_number?: number }) => {\n try {\n setError(null);\n await createStep(presentationId, data);\n setShowCreateForm(false);\n await loadData();\n } catch (err) {\n console.error(\"Failed to create step:\", err);\n setError(\"Failed to create step. Please try again.\");\n }\n };\n\n const handleUpdateStep = async (stepId: number, data: { widget_type: string; widget_config: Record }) => {\n try {\n setError(null);\n await updateStep(stepId, data);\n setEditingStep(null);\n await loadData();\n } catch (err) {\n console.error(\"Failed to update step:\", err);\n setError(\"Failed to update step. Please try again.\");\n }\n };\n\n const [deletingStepId, setDeletingStepId] = useState(null);\n\n const handleDeleteStep = async (stepId: number) => {\n setDeletingStepId(stepId);\n };\n\n const confirmDelete = async () => {\n if (!deletingStepId) return;\n\n try {\n setError(null);\n await deleteStepAPI(deletingStepId);\n setDeletingStepId(null);\n await loadData();\n } catch (err) {\n console.error(\"Failed to delete step:\", err);\n setError(\"Failed to delete step. Please try again.\");\n setDeletingStepId(null);\n }\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!presentation) {\n return (\n

Presentation not found

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

{presentation.name}

by {presentation.presenter}

\n \n ← Back\n \n \n Present →\n \n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {deletingStepId && (\n

\n ⚠️\n Are you sure you want to delete this step? This cannot be undone.\n

\n \n Delete\n \n setDeletingStepId(null)}\n className=\"px-4 py-1 bg-white/50 text-gray-700 rounded-lg font-semibold hover:bg-white/80 transition-colors text-sm\"\n >\n Cancel\n \n

\n )}\n\n

Steps

\n {\n setShowCreateForm(!showCreateForm);\n setEditingStep(null);\n }}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ Add Step\"}\n \n

\n\n {(showCreateForm || editingStep) && (\n

\n handleUpdateStep(editingStep.id, data)\n : handleCreateStep\n }\n onCancel={() => {\n setShowCreateForm(false);\n setEditingStep(null);\n }}\n />\n

\n )}\n\n {steps.length === 0 ? (\n

📝

No steps yet

Add steps to create interactive activities for your presentation

\n ) : (\n

\n {steps.map((step) => (\n {\n setEditingStep(step);\n setShowCreateForm(false);\n }}\n onDelete={() => handleDeleteStep(step.id)}\n />\n ))}\n

\n )}\n

\n );\n}\n\ninterface StepCardProps {\n step: Step;\n onEdit: () => void;\n onDelete: () => void;\n}\n\nfunction StepCard({ step, onEdit, onDelete }: StepCardProps) {\n const config = JSON.parse(step.widget_config);\n\n return (\n

\n {step.name || `Step ${step.step_number}`}\n \n {step.widget_type}\n \n {step.is_active === 1 && (\n \n Active\n \n )}\n

\n \n {step.widget_type === \"poll\" && (\n

{(config as PollWidgetConfig).question}

{option}

\n )}\n \n {step.widget_type === \"chat\" && (\n

\n {(config as ChatWidgetConfig).title || \"Chat\"}\n

\n \"{(config as ChatWidgetConfig).placeholder || \"Type your message...\"}\"\n

\n )}\n \n {step.widget_type === \"poll2d\" && (\n

{(config as Poll2DWidgetConfig).question1}

{(config as Poll2DWidgetConfig).question2}

\n Journey stages: {(config as Poll2DWidgetConfig).journeyStages.join(\", \")}\n

\n Risk scale: {(config as Poll2DWidgetConfig).riskScaleMin} - {(config as Poll2DWidgetConfig).riskScaleMax}\n

\n )}\n

\n\n

\n \n Edit\n \n \n Delete\n \n

\n );\n}\n\ninterface StepFormProps {\n step?: Step | null;\n onSubmit: (data: { widget_type: string; widget_config: Record; step_number?: number; name?: string | null }) => Promise;\n onCancel: () => void;\n}\n\nfunction StepForm({ step, onSubmit, onCancel }: StepFormProps) {\n const [widgetType, setWidgetType] = useState(step?.widget_type || \"poll\");\n const [stepName, setStepName] = useState(step?.name || \"\");\n const [question, setQuestion] = useState(\n step && step.widget_type === \"poll\" ? (JSON.parse(step.widget_config) as PollWidgetConfig).question : \"\"\n );\n const [options, setOptions] = useState(\n step && step.widget_type === \"poll\" ? (JSON.parse(step.widget_config) as PollWidgetConfig).options : [\"\"]\n );\n const [chatTitle, setChatTitle] = useState(\n step && step.widget_type === \"chat\" ? (JSON.parse(step.widget_config) as ChatWidgetConfig).title || \"\" : \"\"\n );\n const [chatPlaceholder, setChatPlaceholder] = useState(\n step && step.widget_type === \"chat\" ? (JSON.parse(step.widget_config) as ChatWidgetConfig).placeholder || \"\" : \"\"\n );\n const [poll2dQuestion1, setPoll2dQuestion1] = useState(\n step && step.widget_type === \"poll2d\" ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question1 : \"\"\n );\n const [poll2dQuestion2, setPoll2dQuestion2] = useState(\n step && step.widget_type === \"poll2d\" ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question2 : \"\"\n );\n const [journeyStages, setJourneyStages] = useState(\n step && step.widget_type === \"poll2d\" ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).journeyStages : [\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\"\n ]\n );\n const [riskScaleMin, setRiskScaleMin] = useState(\n step && step.widget_type === \"poll2d\" ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMin : 1\n );\n const [riskScaleMax, setRiskScaleMax] = useState(\n step && step.widget_type === \"poll2d\" ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMax : 5\n );\n const [riskLabels, setRiskLabels] = useState(\n step && step.widget_type === \"poll2d\" && (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels!\n : []\n );\n const [multivoteQuestion, setMultivoteQuestion] = useState(\n step && step.widget_type === \"multivote\" ? (JSON.parse(step.widget_config) as MultivoteWidgetConfig).question : \"\"\n );\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n setLoading(true);\n try {\n if (widgetType === \"poll\") {\n if (!question.trim() || options.filter(o => o.trim()).length < 2) {\n return;\n }\n await onSubmit({\n widget_type: \"poll\",\n widget_config: {\n question: question.trim(),\n options: options.filter(o => o.trim()),\n } as PollWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setQuestion(\"\");\n setOptions([\"\"]);\n setStepName(\"\");\n } else if (widgetType === \"chat\") {\n await onSubmit({\n widget_type: \"chat\",\n widget_config: {\n title: chatTitle.trim() || undefined,\n placeholder: chatPlaceholder.trim() || undefined,\n } as ChatWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setChatTitle(\"\");\n setChatPlaceholder(\"\");\n setStepName(\"\");\n } else if (widgetType === \"poll2d\") {\n if (!poll2dQuestion1.trim() || !poll2dQuestion2.trim() || journeyStages.filter(s => s.trim()).length < 2) {\n return;\n }\n const expectedRiskLabelCount = riskScaleMax - riskScaleMin + 1;\n const validRiskLabels = riskLabels.filter(l => l.trim()).length === expectedRiskLabelCount\n ? riskLabels.filter(l => l.trim())\n : undefined;\n \n await onSubmit({\n widget_type: \"poll2d\",\n widget_config: {\n question1: poll2dQuestion1.trim(),\n question2: poll2dQuestion2.trim(),\n journeyStages: journeyStages.filter(s => s.trim()),\n riskScaleMin,\n riskScaleMax,\n riskLabels: validRiskLabels,\n } as Poll2DWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setPoll2dQuestion1(\"\");\n setPoll2dQuestion2(\"\");\n setJourneyStages([\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\"\n ]);\n setRiskScaleMin(1);\n setRiskScaleMax(5);\n setRiskLabels([]);\n setStepName(\"\");\n } else if (widgetType === \"multivote\") {\n if (!multivoteQuestion.trim()) {\n return;\n }\n await onSubmit({\n widget_type: \"multivote\",\n widget_config: {\n question: multivoteQuestion.trim(),\n } as MultivoteWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setMultivoteQuestion(\"\");\n setStepName(\"\");\n }\n } finally {\n setLoading(false);\n }\n };\n\n const addOption = () => {\n setOptions([...options, \"\"]);\n };\n\n const updateOption = (index: number, value: string) => {\n const newOptions = [...options];\n newOptions[index] = value;\n setOptions(newOptions);\n };\n\n const removeOption = (index: number) => {\n if (options.length > 1) {\n setOptions(options.filter((_, i) => i !== index));\n }\n };\n\n const addJourneyStage = () => {\n setJourneyStages([...journeyStages, \"\"]);\n };\n\n const updateJourneyStage = (index: number, value: string) => {\n const newStages = [...journeyStages];\n newStages[index] = value;\n setJourneyStages(newStages);\n };\n\n const removeJourneyStage = (index: number) => {\n if (journeyStages.length > 1) {\n setJourneyStages(journeyStages.filter((_, i) => i !== index));\n }\n };\n\n // Update risk labels when scale changes\n useEffect(() => {\n if (widgetType === \"poll2d\") {\n const expectedCount = riskScaleMax - riskScaleMin + 1;\n if (riskLabels.length !== expectedCount) {\n // Initialize or adjust risk labels\n const newLabels = Array.from({ length: expectedCount }, (_, i) => {\n if (i < riskLabels.length && riskLabels[i]) {\n return riskLabels[i];\n }\n return \"\";\n });\n setRiskLabels(newLabels);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [riskScaleMin, riskScaleMax, widgetType]);\n\n const updateRiskLabel = (index: number, value: string) => {\n const newLabels = [...riskLabels];\n newLabels[index] = value;\n setRiskLabels(newLabels);\n };\n\n return (\n

\n {step ? \"Edit Step\" : \"Create New Step\"}\n

\n\n

\n \n Step Name (optional)\n \n setStepName(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder={`e.g., Introduction, Q&A, Poll 1`}\n />\n

Leave empty to use default \"Step {step?.step_number || 'N'}\"

\n\n

\n \n Widget Type *\n \n setWidgetType(e.target.value)}\n disabled={!!step}\n className=\"w-full px-4 py-2 glass-input disabled:opacity-50 disabled:bg-gray-50/20\"\n >\n \n \n \n \n \n {step && (\n

Widget type cannot be changed after creation

\n )}\n

\n\n {widgetType === \"poll\" && (\n <>\n

\n \n Question *\n \n setQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What is your favourite programming language?\"\n />\n

\n\n

\n \n Options * (at least 2 required)\n \n

\n {options.map((option, index) => (\n

\n updateOption(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Option ${index + 1}`}\n />\n {options.length > 1 && (\n removeOption(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove option\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Option\n \n

\n \n )}\n\n {widgetType === \"chat\" && (\n <>\n

\n \n Title (optional)\n \n setChatTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Q&A Session\"\n />\n

Leave empty to use default title

\n\n

\n \n Input Placeholder (optional)\n \n setChatPlaceholder(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Ask a question...\"\n />\n

Leave empty to use default placeholder

\n \n )}\n\n {widgetType === \"poll2d\" && (\n <>\n

\n \n Journey Question *\n \n setPoll2dQuestion1(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Where are you on this journey?\"\n />\n

\n\n

\n \n Journey Stages * (at least 2 required)\n \n

\n {journeyStages.map((stage, index) => (\n

\n updateJourneyStage(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Stage ${index + 1}`}\n />\n {journeyStages.length > 1 && (\n removeJourneyStage(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove stage\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Stage\n \n

\n\n

\n \n Risk Aversion Question *\n \n setPoll2dQuestion2(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., How risk averse is your organisation?\"\n />\n

\n\n

\n \n Risk Scale Minimum *\n \n setRiskScaleMin(parseInt(e.target.value) || 1)}\n required\n min=\"1\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n \n Risk Scale Maximum *\n \n setRiskScaleMax(parseInt(e.target.value) || 5)}\n required\n min=\"2\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n\n

\n \n Risk Labels (optional) - One label per risk level\n \n

\n If provided, these labels will be shown instead of numbers. You need {riskScaleMax - riskScaleMin + 1} labels.\n

\n {riskLabels.map((label, index) => {\n const value = riskScaleMin + index;\n return (\n

\n {value}:\n updateRiskLabel(index, e.target.value)}\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Label for ${value} (optional)`}\n />\n

\n );\n })}\n

\n Leave labels empty to use numbers ({riskScaleMin}-{riskScaleMax})\n

\n \n )}\n\n {widgetType === \"multivote\" && (\n <>\n

\n \n Question *\n \n setMultivoteQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What topics would you like to discuss?\"\n />\n

\n Participants can add their own options and vote on multiple options\n

\n \n )}\n\n

\n o.trim()).length < 2)) ||\n (widgetType === \"poll2d\" && (!poll2dQuestion1.trim() || !poll2dQuestion2.trim() || journeyStages.filter(s => s.trim()).length < 2))\n }\n className=\"flex-1 glass-button px-6 py-2 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all\"\n >\n {loading ? (step ? \"Updating...\" : \"Creating...\") : (step ? \"Update Step\" : \"Create Step\")}\n \n \n Cancel\n \n

\n );\n}\n\n",[],[311,318,460],[311,318],{"_102":469,"_95":273,"_151":470,"_153":312,"_154":136,"_155":471,"_157":158,"_104":472,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":473,"_98":492},"8965277a-c517-11f0-9a74-42dde27851f2","89652838-c517-11f0-9a74-42dde27851f2",81,["D",1763536532841],[474,483],{"_102":475,"_95":476,"_151":477,"_153":470,"_154":136,"_155":478,"_157":158,"_104":479,"_99":257,"_160":181,"_162":480,"_163":22,"_164":-5,"_165":481,"_98":482},"abcefc2e-c520-11f0-bf7c-42dde27851f2","api.ts","89c53750-c517-11f0-968d-42dde27851f2",214,["D",1763540456049],"import type {\n Presentation,\n Step,\n Session,\n Response,\n CreatePresentationRequest,\n CreateStepRequest,\n SubmitResponseRequest,\n} from \"../../shared/types.ts\";\n\nconst API_BASE = \"\"; // Relative to current domain\n\nasync function fetchJSON(url: string, options?: RequestInit): Promise {\n const response = await fetch(`${API_BASE}${url}`, options);\n \n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: \"Unknown error\" }));\n throw new Error(error.error || `HTTP ${response.status}`);\n }\n \n return response.json();\n}\n\n// Helper function to get session_id from localStorage\nfunction getSessionId(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(\"live_talk_session_id\");\n}\n\n// Helper function to add session_id to headers\nfunction getHeadersWithSession(options?: RequestInit): RequestInit {\n const sessionId = getSessionId();\n return {\n ...options,\n headers: {\n \"Content-Type\": \"application/json\",\n ...(sessionId ? { \"X-Session-Id\": sessionId } : {}),\n ...options?.headers,\n },\n };\n}\n\n// Presentations\nexport async function getPresentations(): Promise {\n const sessionId = getSessionId();\n const url = sessionId ? `/api/presentations?session_id=${sessionId}` : \"/api/presentations\";\n return fetchJSON(url);\n}\n\nexport async function getPresentation(id: number): Promise {\n return fetchJSON(`/api/presentations/${id}`, getHeadersWithSession());\n}\n\nexport async function createPresentation(data: CreatePresentationRequest): Promise {\n return fetchJSON(\"/api/presentations\", {\n ...getHeadersWithSession(),\n method: \"POST\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updatePresentation(id: number, data: CreatePresentationRequest): Promise {\n return fetchJSON(`/api/presentations/${id}`, {\n ...getHeadersWithSession(),\n method: \"PUT\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function deletePresentation(id: number): Promise {\n return fetchJSON(`/api/presentations/${id}`, {\n ...getHeadersWithSession(),\n method: \"DELETE\",\n });\n}\n\nexport async function deleteAllPresentations(): Promise {\n return fetchJSON(\"/api/presentations\", {\n ...getHeadersWithSession(),\n method: \"DELETE\",\n });\n}\n\n// Steps\nexport async function getSteps(presentationId: number): Promise {\n return fetchJSON(`/api/steps/presentation/${presentationId}`);\n}\n\nexport async function getStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}`);\n}\n\nexport async function getActiveStep(presentationId: number): Promise {\n try {\n return await fetchJSON(`/api/steps/presentation/${presentationId}/active`);\n } catch {\n return null;\n }\n}\n\nexport async function createStep(presentationId: number, data: CreateStepRequest & { step_number?: number }): Promise {\n return fetchJSON(`/api/steps/presentation/${presentationId}`, {\n method: \"POST\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updateStep(id: number, data: CreateStepRequest): Promise {\n return fetchJSON(`/api/steps/${id}`, {\n method: \"PUT\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updateStepName(id: number, name: string | null): Promise {\n return fetchJSON(`/api/steps/${id}/name`, {\n method: \"PUT\",\n body: JSON.stringify({ name }),\n });\n}\n\nexport async function activateStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}/activate`, {\n method: \"PUT\",\n });\n}\n\nexport async function deleteStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}`, {\n method: \"DELETE\",\n });\n}\n\n// Sessions\nexport async function getOrCreateSession(sessionId: string | null, presentationId: number): Promise {\n return fetchJSON(\"/api/sessions\", {\n method: \"POST\",\n body: JSON.stringify({\n session_id: sessionId,\n presentation_id: presentationId,\n }),\n });\n}\n\nexport async function getSession(sessionId: string): Promise {\n return fetchJSON(`/api/sessions/${sessionId}`);\n}\n\n// Responses\nexport async function submitResponse(sessionId: string, data: SubmitResponseRequest): Promise {\n return fetchJSON(\"/api/responses\", {\n method: \"POST\",\n body: JSON.stringify({\n session_id: sessionId,\n ...data,\n }),\n });\n}\n\nexport async function getResponsesForStep(stepId: number): Promise {\n return fetchJSON(`/api/responses/step/${stepId}`);\n}\n\nexport async function getResponseForSessionAndStep(sessionId: string, stepId: number): Promise {\n try {\n return await fetchJSON(`/api/responses/session/${sessionId}/step/${stepId}`);\n } catch {\n return null;\n }\n}\n\nexport async function deleteResponsesForStep(stepId: number): Promise {\n return fetchJSON(`/api/responses/step/${stepId}`, {\n method: \"DELETE\",\n });\n}\n\n// User Attributes\nexport async function getUserAttribute(sessionId: string, attributeKey: string): Promise {\n try {\n const result = await fetchJSON<{ value: string }>(`/api/user-attributes/session/${sessionId}/${attributeKey}`);\n return result.value;\n } catch {\n return null;\n }\n}\n\nexport async function setUserAttribute(sessionId: string, attributeKey: string, value: string): Promise {\n return fetchJSON(`/api/user-attributes/session/${sessionId}/${attributeKey}`, {\n method: \"POST\",\n body: JSON.stringify({ value }),\n });\n}\n\nexport async function getAllUserAttributes(sessionId: string): Promise> {\n return fetchJSON>(`/api/user-attributes/session/${sessionId}`);\n}\n\n",[],[311,273,476],{"_102":484,"_95":485,"_151":486,"_153":470,"_154":136,"_155":487,"_157":158,"_104":488,"_99":219,"_160":181,"_162":489,"_163":22,"_164":-5,"_165":490,"_98":491},"aa916f06-c537-11f0-8569-42dde27851f2","session.ts","89f49e64-c517-11f0-8062-42dde27851f2",250,["D",1763550332349],"const SESSION_STORAGE_KEY = \"live_talk_session_id\";\n\nexport function getSessionId(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(SESSION_STORAGE_KEY);\n}\n\nexport function setSessionId(sessionId: string): void {\n if (typeof window === \"undefined\") return;\n localStorage.setItem(SESSION_STORAGE_KEY, sessionId);\n}\n\nexport function generateSessionId(): string {\n return crypto.randomUUID();\n}\n\nexport function getOrCreateSessionId(): string {\n let sessionId = getSessionId();\n if (!sessionId) {\n sessionId = generateSessionId();\n setSessionId(sessionId);\n }\n return sessionId;\n}\n\n\n",[],[311,273,485],[311,273],{"_102":494,"_95":495,"_151":496,"_153":312,"_154":136,"_155":497,"_157":158,"_104":498,"_99":363,"_160":499,"_162":500,"_163":22,"_164":-5,"_165":501,"_98":502},"aaa8c37c-c537-11f0-98f6-42dde27851f2","index.html","89cf358e-c517-11f0-841c-42dde27851f2",252,["D",1763550332378],"file","\n\n\n \n \n Live Talk - Last Conference\n \n \n \n \n \n\n\n

\n \n\n\n",[],[311,495],{"_102":504,"_95":505,"_151":506,"_153":312,"_154":136,"_155":507,"_157":158,"_104":508,"_99":284,"_160":181,"_162":509,"_163":22,"_164":-5,"_165":510,"_98":511},"aa8cda18-c537-11f0-9ca3-42dde27851f2","index.tsx","368503d2-c516-11f0-a08e-42dde27851f2",249,["D",1763550332361],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n\n\n",[],[311,505],[311],{"_102":514,"_95":515,"_151":516,"_153":-5,"_154":136,"_155":517,"_157":158,"_104":518,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":519,"_98":538},"49788eee-c518-11f0-a08c-42dde27851f2","scripts","49788fac-c518-11f0-a08c-42dde27851f2",123,["D",1763536855088],[520,529],{"_102":521,"_95":522,"_151":523,"_153":516,"_154":136,"_155":524,"_157":158,"_104":525,"_99":32,"_160":181,"_162":526,"_163":22,"_164":-5,"_165":527,"_98":528},"9344aeca-c51f-11f0-b17a-42dde27851f2","clear-db.ts","9344af9c-c51f-11f0-b17a-42dde27851f2",208,["D",1763539985376],"#!/usr/bin/env -S deno run --allow-read --allow-write --allow-net\n\n/**\n * Script to clear the entire database by dropping all tables\n * This allows migrations to create a fresh database\n * \n * Usage:\n * deno run --allow-read --allow-write --allow-net scripts/clear-db.ts\n */\n\nimport { getAdapter } from \"../backend/database/adapter.ts\";\n\nconst sqlite = getAdapter();\n\nasync function getAllTables(): Promise {\n const result = await sqlite.execute(`\n SELECT name FROM sqlite_master \n WHERE type='table' \n AND name NOT LIKE 'sqlite_%'\n ORDER BY name\n `);\n \n return result.rows.map((row: any) => row.name as string);\n}\n\nasync function dropTable(tableName: string): Promise {\n try {\n await sqlite.execute(`DROP TABLE IF EXISTS ${tableName}`);\n console.log(`✓ Dropped table: ${tableName}`);\n } catch (error) {\n console.error(`✗ Failed to drop table ${tableName}:`, error);\n throw error;\n }\n}\n\nasync function main() {\n console.log(\"🔍 Scanning database for tables...\\n\");\n \n const allTables = await getAllTables();\n \n if (allTables.length === 0) {\n console.log(\"✓ No tables found in database. Database is already empty.\");\n return;\n }\n \n console.log(`Found ${allTables.length} table(s):`);\n allTables.forEach(table => console.log(` - ${table}`));\n console.log();\n \n console.log(\"🗑️ Dropping all tables to create a fresh database...\\n\");\n \n for (const table of allTables) {\n await dropTable(table);\n }\n \n console.log();\n \n // Verify all tables are dropped\n const remainingTables = await getAllTables();\n if (remainingTables.length === 0) {\n console.log(\"✅ Database cleared successfully! All tables have been dropped.\");\n console.log(\" Run migrations to create fresh tables.\");\n } else {\n console.log(`⚠️ Warning: ${remainingTables.length} table(s) still remain:`);\n remainingTables.forEach(table => console.log(` - ${table}`));\n }\n}\n\nif (import.meta.main) {\n main().catch((error) => {\n console.error(\"Error:\", error);\n Deno.exit(1);\n });\n}\n\n",[],[515,522],{"_102":530,"_95":531,"_151":532,"_153":516,"_154":136,"_155":533,"_157":158,"_104":534,"_99":219,"_160":499,"_162":535,"_163":22,"_164":-5,"_165":536,"_98":537},"5b073182-c519-11f0-a03c-42dde27851f2","dev.sh","49a488be-c518-11f0-a826-42dde27851f2",145,["D",1763537313959],"#!/bin/bash\n\n# Development server management script\n# Usage: ./scripts/dev.sh [start|stop|status|restart]\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nPROJECT_DIR=\"$(cd \"$SCRIPT_DIR/..\" && pwd)\"\nPID_FILE=\"$PROJECT_DIR/.dev-server.pid\"\nLOG_FILE=\"$PROJECT_DIR/.dev-server.log\"\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m' # No Color\n\n# Function to check if server is running\nis_running() {\n if [ -f \"$PID_FILE\" ]; then\n PID=$(cat \"$PID_FILE\")\n if ps -p \"$PID\" > /dev/null 2>&1; then\n return 0\n else\n # PID file exists but process is dead\n rm -f \"$PID_FILE\"\n return 1\n fi\n fi\n return 1\n}\n\n# Function to start the server\nstart_server() {\n if is_running; then\n echo -e \"${YELLOW}Server is already running (PID: $(cat \"$PID_FILE\"))${NC}\"\n return 1\n fi\n\n echo -e \"${GREEN}Starting development server...${NC}\"\n cd \"$PROJECT_DIR\"\n \n # Start server in background and capture PID\n deno run \\\n --allow-net \\\n --allow-read \\\n --allow-write \\\n --allow-import \\\n --allow-env \\\n --allow-run \\\n --watch \\\n server.ts > \"$LOG_FILE\" 2>&1 &\n \n SERVER_PID=$!\n echo $SERVER_PID > \"$PID_FILE\"\n \n # Wait a moment to see if it starts successfully\n sleep 2\n \n if is_running; then\n echo -e \"${GREEN}✓ Server started successfully (PID: $SERVER_PID)${NC}\"\n echo -e \"${GREEN} Logs: $LOG_FILE${NC}\"\n echo -e \"${GREEN} URL: http://localhost:8000${NC}\"\n return 0\n else\n echo -e \"${RED}✗ Server failed to start. Check logs: $LOG_FILE${NC}\"\n rm -f \"$PID_FILE\"\n return 1\n fi\n}\n\n# Function to stop the server\nstop_server() {\n if ! is_running; then\n echo -e \"${YELLOW}Server is not running${NC}\"\n return 1\n fi\n\n PID=$(cat \"$PID_FILE\")\n echo -e \"${YELLOW}Stopping server (PID: $PID)...${NC}\"\n \n # Kill the process and all its children (deno watch spawns child processes)\n pkill -P \"$PID\" 2>/dev/null\n kill \"$PID\" 2>/dev/null\n \n # Wait a bit for graceful shutdown\n sleep 1\n \n # Force kill if still running\n if ps -p \"$PID\" > /dev/null 2>&1; then\n kill -9 \"$PID\" 2>/dev/null\n sleep 0.5\n fi\n \n # Clean up any remaining deno processes related to this server\n pkill -f \"deno run.*server.ts\" 2>/dev/null\n \n rm -f \"$PID_FILE\"\n \n if ! is_running; then\n echo -e \"${GREEN}✓ Server stopped${NC}\"\n return 0\n else\n echo -e \"${RED}✗ Failed to stop server${NC}\"\n return 1\n fi\n}\n\n# Function to show server status\nshow_status() {\n if is_running; then\n PID=$(cat \"$PID_FILE\")\n echo -e \"${GREEN}✓ Server is running (PID: $PID)${NC}\"\n echo -e \" URL: http://localhost:8000\"\n echo -e \" Logs: $LOG_FILE\"\n \n # Show last few log lines\n if [ -f \"$LOG_FILE\" ]; then\n echo -e \"\\n Last log entries:\"\n tail -n 5 \"$LOG_FILE\" | sed 's/^/ /'\n fi\n return 0\n else\n echo -e \"${RED}✗ Server is not running${NC}\"\n return 1\n fi\n}\n\n# Function to restart the server\nrestart_server() {\n stop_server\n sleep 1\n start_server\n}\n\n# Main command handling\ncase \"${1:-}\" in\n start)\n start_server\n ;;\n stop)\n stop_server\n ;;\n status)\n show_status\n ;;\n restart)\n restart_server\n ;;\n *)\n echo \"Usage: $0 {start|stop|status|restart}\"\n echo \"\"\n echo \"Commands:\"\n echo \" start - Start the development server\"\n echo \" stop - Stop the development server\"\n echo \" status - Show server status\"\n echo \" restart - Restart the development server\"\n exit 1\n ;;\nesac\n\nexit $?\n\n",[],[515,531],[515],{"_102":540,"_95":541,"_151":542,"_153":-5,"_154":136,"_155":543,"_157":158,"_104":544,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":545,"_98":555},"2f243266-c516-11f0-a79d-42dde27851f2","shared","2f24332e-c516-11f0-a79d-42dde27851f2",20,["D",1763535951928],[546],{"_102":547,"_95":548,"_151":549,"_153":542,"_154":136,"_155":550,"_157":158,"_104":551,"_99":201,"_160":181,"_162":552,"_163":22,"_164":-5,"_165":553,"_98":554},"4ef8ca8a-c53d-11f0-b717-42dde27851f2","types.ts","8a92dc78-c517-11f0-8370-42dde27851f2",282,["D",1763552755702],"export interface Presentation {\n id: number;\n name: string;\n presenter: string;\n talk_deck_link: string | null;\n creator_session_id: string;\n created_at: string;\n}\n\nexport interface Step {\n id: number;\n presentation_id: number;\n step_number: number;\n name: string | null;\n widget_type: string;\n widget_config: string; // JSON string\n is_active: number; // 0 or 1\n}\n\nexport interface Session {\n id: string; // UUID\n presentation_id: number;\n created_at: string;\n}\n\nexport interface Response {\n id: number;\n session_id: string;\n step_id: number;\n response_data: string; // JSON string\n created_at: string;\n}\n\nexport interface PollWidgetConfig {\n question: string;\n options: string[];\n}\n\nexport interface PollResponse {\n optionIndex: number;\n}\n\nexport interface ChatWidgetConfig {\n placeholder?: string;\n title?: string;\n}\n\nexport interface ChatResponse {\n messages: Array<{\n message: string;\n timestamp: string;\n }>;\n userName: string;\n}\n\nexport interface Poll2DWidgetConfig {\n question1: string; // Journey question\n journeyStages: string[]; // Array of journey stage labels\n question2: string; // Risk aversion question\n riskScaleMin: number; // Minimum risk scale value (typically 1)\n riskScaleMax: number; // Maximum risk scale value (typically 5)\n riskLabels?: string[]; // Optional labels for risk levels (length should match riskScaleMax - riskScaleMin + 1)\n}\n\nexport interface Poll2DResponse {\n journeyStage: number; // Index into journeyStages array (0-based)\n riskAversion: number; // Risk aversion value (1-5)\n}\n\nexport interface MultivoteWidgetConfig {\n question: string;\n}\n\nexport interface MultivoteResponse {\n selectedOptions: string[]; // Array of selected option texts\n}\n\nexport interface CreatePresentationRequest {\n name: string;\n presenter: string;\n talk_deck_link?: string;\n}\n\nexport interface CreateStepRequest {\n widget_type: string;\n widget_config: Record;\n name?: string | null;\n}\n\nexport interface SubmitResponseRequest {\n step_id: number;\n response_data: Record;\n}\n\n",[],[541,548],[541],{"_102":557,"_95":558,"_151":559,"_153":-5,"_154":136,"_155":560,"_157":158,"_104":561,"_99":229,"_160":499,"_162":562,"_163":22,"_164":-5,"_165":563,"_98":564},"7ab8aca4-c519-11f0-8741-42dde27851f2",".dev-server.log","4fe01b4e-c518-11f0-941c-42dde27851f2",146,["D",1763537367219],"\u001b[0m\u001b[38;5;12mWatcher\u001b[0m Process started.\nServer running at http://localhost:8000\nUsing local SQLite database: ./live_talk.db\nListening on http://0.0.0.0:8000/ (http://localhost:8000/)\n\u001b[0m\u001b[38;5;12mWatcher\u001b[0m \u001b[0m\u001b[38;5;245mRestarting! File change detected: \"/Users/agileben/dev/live-talk/backend/utils/localFiles.ts\"\u001b[0m\nServer running at http://localhost:8000\nUsing local SQLite database: ./live_talk.db\nListening on http://0.0.0.0:8000/ (http://localhost:8000/)\n",[],[558],{"_102":566,"_95":567,"_151":568,"_153":-5,"_154":136,"_155":569,"_157":158,"_104":570,"_99":257,"_160":499,"_162":571,"_163":22,"_164":-5,"_165":572,"_98":573},"f48bb0e2-c539-11f0-a933-42dde27851f2",".dev-server.pid","e7039190-c518-11f0-b5b5-42dde27851f2",266,["D",1763551315501],"44323\n",[],[567],{"_102":575,"_95":576,"_151":577,"_153":-5,"_154":136,"_155":578,"_157":158,"_104":579,"_99":284,"_160":499,"_162":580,"_163":22,"_164":-5,"_165":581,"_98":582},"abdb1a38-c519-11f0-bfe4-42dde27851f2",".gitignore","e48c2784-c517-11f0-9d1d-42dde27851f2",147,["D",1763537449621],"# Database files\n*.db\n*.db-journal\n*.db-wal\n*.db-shm\n\n# Deno\n.deno/\n\n# Environment\n.env\n.env.local\n\n# IDE\n.vscode/\n.idea/\n\n# OS\n.DS_Store\nThumbs.db\n\n# Development server\n.dev-server.pid\n.dev-server.log\n\nnode_modules/\n*.log",[],[576],{"_102":584,"_95":585,"_151":586,"_153":-5,"_154":136,"_155":587,"_157":158,"_104":588,"_99":219,"_160":499,"_162":589,"_163":22,"_164":-5,"_165":590,"_98":591},"dd064290-c519-11f0-a139-42dde27851f2",".vtignore","1835a0c8-c514-11f0-b976-42dde27851f2",148,["D",1763537532138],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\n*.log\n*.db\n",[],[585],{"_102":593,"_95":594,"_151":595,"_153":-5,"_154":136,"_155":596,"_157":158,"_104":597,"_99":219,"_160":499,"_162":598,"_163":22,"_164":-5,"_165":599,"_98":600},"e72fefd8-c518-11f0-89eb-42dde27851f2","AGENTS.md","182baf5a-c514-11f0-a7e2-42dde27851f2",138,["D",1763537119698],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n6. **Development Server Management:**\n - ALWAYS Use the development script to manage the local server lifecycle\n - **Start server:** `./scripts/dev.sh start` or `make dev` or `npm run dev`\n - **Stop server:** `./scripts/dev.sh stop` or `make dev-stop` or `npm run dev:stop`\n - **Check status:** `./scripts/dev.sh status` or `make dev-status` or `npm run dev:status`\n - **Restart server:** `./scripts/dev.sh restart` or `make dev-restart` or `npm run dev:restart`\n - The script handles PID tracking (`.dev-server.pid`) and proper cleanup of all child processes\n - Logs are written to `.dev-server.log`\n - Always use the script to start and stop the server to avoid dangling processes from `deno watch`\n - Server runs on `http://localhost:8000` by default\n - Required Deno permissions: `--allow-net --allow-read --allow-write --allow-import --allow-env`\n\n",[],[594],{"_102":602,"_95":603,"_151":604,"_153":-5,"_154":136,"_155":605,"_157":158,"_104":606,"_99":219,"_160":499,"_162":607,"_163":22,"_164":-5,"_165":608,"_98":609},"bff1e49c-c51f-11f0-b8ae-42dde27851f2","Makefile","657b0f54-c518-11f0-84ae-42dde27851f2",210,["D",1763540060337],".PHONY: dev dev-start dev-stop dev-status dev-restart help\n\nhelp: ## Show this help message\n\t@echo \"Available commands:\"\n\t@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = \":.*?## \"}; {printf \" \\033[36m%-15s\\033[0m %s\\n\", $$1, $$2}'\n\ndev: dev-start ## Alias for dev-start\n\ndev-start: ## Start the development server\n\t@./scripts/dev.sh start\n\ndev-stop: ## Stop the development server\n\t@./scripts/dev.sh stop\n\ndev-status: ## Show development server status\n\t@./scripts/dev.sh status\n\ndev-restart: ## Restart the development server\n\t@./scripts/dev.sh restart\n\nclear-db: ## Clear the entire database (drop all tables)\n\t@deno run --allow-read --allow-write --allow-net scripts/clear-db.ts\n\n",[],[603],{"_102":611,"_95":612,"_151":613,"_153":-5,"_154":136,"_155":614,"_157":158,"_104":615,"_99":229,"_160":499,"_162":616,"_163":22,"_164":-5,"_165":617,"_98":618},"657e8530-c518-11f0-ac25-42dde27851f2","README.md","8ad01228-c517-11f0-81e9-42dde27851f2",132,["D",1763536902098],"# Live Talk - Interactive Presentation Tool\n\nAn interactive presentation tool for Last Conference that allows presenters to embed real-time activities (polls, questions, etc.) throughout their talks. Audience members scan a QR code to participate, and responses are displayed in real-time to the presenter.\n\n## Features\n\n- **Real-time Interaction**: Participants join via QR code and respond to activities\n- **Session Persistence**: Participant sessions are stored in localStorage for consistent experience\n- **Multiple Steps**: Presentations can have multiple steps/activities\n- **Poll Widget**: Built-in poll widget with real-time results visualization\n- **Presenter & Participant Modes**: Separate views for presenter and audience\n- **Modern UI**: Clean, responsive design with TailwindCSS\n\n## Tech Stack\n\n- **Backend**: Hono (Deno-compatible web framework)\n- **Database**: SQLite (Val Town standard library)\n- **Frontend**: React 18.2.0 with TypeScript\n- **Styling**: TailwindCSS\n- **Platform**: Val Town / Deno\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono app entry point\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ └── routes/\n│ ├── presentations.ts # Presentation CRUD\n│ ├── steps.ts # Step management\n│ ├── sessions.ts # Session handling\n│ ├── responses.ts # Response handling\n│ └── admin.ts # Admin/presenter endpoints\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── PresenterMode.tsx # Presenter view\n│ │ ├── ParticipantMode.tsx # Participant view\n│ │ ├── QRCode.tsx # QR code display\n│ │ └── widgets/\n│ │ ├── PollWidget.tsx # Poll participant view\n│ │ └── PollPresenter.tsx # Poll presenter view\n│ └── utils/\n│ ├── session.ts # Session management (localStorage)\n│ └── api.ts # API client functions\n├── shared/\n│ └── types.ts # TypeScript types/interfaces\n└── server.ts # Local development server\n```\n\n## Local Development\n\nThe app automatically detects the environment and uses:\n- **Local SQLite** (`./live_talk.db`) when running locally (using sql.js)\n- **Val Town SQLite** when deployed to Val Town (detected via `valtown` environment variable)\n\n### Quick Start\n\nUse the development script to manage the server:\n\n```bash\n# Start the server\n./scripts/dev.sh start\n# or\nmake dev\n# or\nnpm run dev\n\n# Check server status\n./scripts/dev.sh status\n# or\nmake dev-status\n# or\nnpm run dev:status\n\n# Stop the server\n./scripts/dev.sh stop\n# or\nmake dev-stop\n# or\nnpm run dev:stop\n\n# Restart the server\n./scripts/dev.sh restart\n# or\nmake dev-restart\n# or\nnpm run dev:restart\n```\n\nThe script handles:\n- Starting the server with all required Deno permissions\n- Process management (PID tracking)\n- Proper cleanup of all child processes when stopping\n- Logging to `.dev-server.log`\n\n### Manual Start (Alternative)\n\nIf you prefer to start manually:\n\n```bash\ndeno run --allow-net --allow-read --allow-write --allow-import --allow-env --watch server.ts\n```\n\n### Access the App\n\n- Open `http://localhost:8000` in your browser\n- The server will automatically reload on file changes\n- A local SQLite database file (`live_talk.db`) will be created automatically\n- Database operations work fully locally without Val Town credentials\n\n**Note**: The local SQLite uses sql.js (pure JavaScript SQLite) which loads WASM files. The first request might take a moment to initialize.\n\n## Usage\n\n### Creating a Presentation\n\nUse the API to create a presentation:\n\n```bash\ncurl -X POST http://localhost:8000/api/presentations \\\n -H \"Content-Type: application/json\" \\\n -d '{\n \"name\": \"My Awesome Talk\",\n \"presenter\": \"John Doe\",\n \"talk_deck_link\": \"https://example.com/slides\"\n }'\n```\n\n### Adding Steps\n\nCreate steps (activities) for your presentation:\n\n```bash\ncurl -X POST http://localhost:8000/api/steps/presentation/1 \\\n -H \"Content-Type: application/json\" \\\n -d '{\n \"widget_type\": \"poll\",\n \"widget_config\": {\n \"question\": \"What is your favourite programming language?\",\n \"options\": [\"JavaScript\", \"Python\", \"Rust\", \"Go\"]\n }\n }'\n```\n\n### Presenter View\n\nNavigate to `/present/:presentationId` to access the presenter view:\n- See QR code for participants to join\n- View real-time responses\n- Activate/deactivate steps\n- Navigate between steps\n\nExample: `http://localhost:8000/present/1`\n\n### Participant View\n\nParticipants navigate to `/join/:presentationId`:\n- Automatically assigned a session ID (stored in localStorage)\n- See the currently active step\n- Submit responses\n- Page auto-updates when presenter changes steps\n\nExample: `http://localhost:8000/join/1`\n\n## API Endpoints\n\n### Presentations\n- `GET /api/presentations` - List all presentations\n- `POST /api/presentations` - Create new presentation\n- `GET /api/presentations/:id` - Get presentation details\n- `PUT /api/presentations/:id` - Update presentation\n\n### Steps\n- `GET /api/steps/presentation/:id` - Get all steps for a presentation\n- `POST /api/steps/presentation/:id` - Create new step\n- `GET /api/steps/:id` - Get step details\n- `PUT /api/steps/:id` - Update step\n- `PUT /api/steps/:id/activate` - Activate a step\n- `GET /api/steps/presentation/:id/active` - Get active step\n\n### Sessions\n- `POST /api/sessions` - Create or get existing session\n- `GET /api/sessions/:id` - Get session details\n\n### Responses\n- `POST /api/responses` - Submit a response\n- `GET /api/responses/step/:id` - Get all responses for a step\n\n## Widget System\n\nThe system is designed to be extensible. Currently supports:\n\n- **Poll Widget**: Multiple choice questions with real-time results\n\nFuture widgets can be added by:\n1. Creating participant component in `frontend/components/widgets/`\n2. Creating presenter component in `frontend/components/widgets/`\n3. Adding widget type handling in `ParticipantMode.tsx` and `PresenterMode.tsx`\n\n## Database Schema\n\n- **presentations**: Presentation metadata\n- **steps**: Steps/activities within presentations\n- **sessions**: Participant sessions\n- **responses**: Participant responses to steps\n\nSee `backend/database/migrations.ts` for full schema details.\n\n## Deployment to Val Town\n\n1. Upload all files to a Val Town project\n2. **The HTTP trigger file is `app.http.ts`** - this is the main entry point for Val Town\n3. Val Town will automatically detect `app.http.ts` as an HTTP trigger (because it has `http` in the filename)\n4. Ensure all dependencies are available via esm.sh or Val Town standard libraries\n5. The app will automatically run migrations on startup\n6. Your app will be accessible at the URL provided by Val Town\n\n**Note**: For local development, use `server.ts` which imports from `backend/index.ts`. For Val Town deployment, use `app.http.ts` directly.\n\n## License\n\nBuilt for Last Conference\n\n",[],[612],{"_102":620,"_95":621,"_151":622,"_153":-5,"_154":136,"_155":623,"_157":158,"_104":624,"_99":229,"_160":625,"_162":626,"_163":22,"_164":96,"_165":627,"_98":628},"b3adde36-c51d-11f0-86bc-42dde27851f2","app.http.ts","8ad50288-c517-11f0-9328-42dde27851f2",187,["D",1763539180765],"http","import { createApp } from \"./backend/app.ts\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Create app with all routes registered in one place\nconst app = await createApp({\n fileUtils: { readFile, serveFile },\n runMigrationsOnStartup: true,\n});\n\n// This is the HTTP trigger entry point for Val Town\nexport default app.fetch;\n",[],[621],{"_102":630,"_95":631,"_151":632,"_153":-5,"_154":136,"_155":633,"_157":158,"_104":634,"_99":219,"_160":499,"_162":635,"_163":22,"_164":-5,"_165":636,"_98":637},"e71fe6e2-c518-11f0-90c4-42dde27851f2","deno.json","1830aa96-c514-11f0-bc8a-42dde27851f2",137,["D",1763537119420],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"nodeModulesDir\": \"auto\",\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[631],{"_102":639,"_95":640,"_151":641,"_153":-5,"_154":136,"_155":642,"_157":158,"_104":643,"_99":32,"_160":625,"_162":644,"_163":22,"_164":-5,"_165":645,"_98":646},"8ac93c64-c517-11f0-87d0-42dde27851f2","hello.http.ts","8ac93d0e-c517-11f0-87d0-42dde27851f2",99,["D",1763536535139],"export default async function (req: Request) {\n return new Response(\"Hello World -- GOOD\");\n}\n",[],[640],{"_102":648,"_95":649,"_151":650,"_153":-5,"_154":136,"_155":651,"_157":158,"_104":652,"_99":219,"_160":499,"_162":653,"_163":22,"_164":-5,"_165":654,"_98":655},"ab200446-c537-11f0-8569-42dde27851f2","package.json","4d2bac42-c518-11f0-a4f2-42dde27851f2",262,["D",1763550333328],"{\n \"name\": \"live-talk\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"dev\": \"./scripts/dev.sh start\",\n \"dev:stop\": \"./scripts/dev.sh stop\",\n \"dev:status\": \"./scripts/dev.sh status\",\n \"dev:restart\": \"./scripts/dev.sh restart\"\n }\n}\n\n\n",[],[649],{"_102":657,"_95":658,"_151":659,"_153":-5,"_154":136,"_155":660,"_157":158,"_104":661,"_99":284,"_160":499,"_162":662,"_163":22,"_164":-5,"_165":663,"_98":664},"4e4e5afa-c51a-11f0-8370-42dde27851f2","plan.md","230991f6-c516-11f0-973e-42dde27851f2",152,["D",1763537722036],"# Live Talk - Interactive Presentation Tool\n\n## Overview\nA real-time interactive presentation tool for Last Conference that allows presenters to embed activities (polls, questions, etc.) throughout their talks. Audience members scan a QR code to participate, and responses are displayed in real-time to the presenter.\n\n## Core Features\n\n### For Presenters\n- Create presentations with multiple steps\n- Each step contains a widget (poll, question, etc.)\n- Presenter view shows QR code and live results\n- Switch between steps during the presentation\n- View aggregated responses from participants\n\n### For Participants\n- Scan QR code to join\n- Get assigned a session ID (stored in localStorage)\n- See current step's widget/activity\n- Submit responses (answers, votes, etc.)\n- Responses are tied to their session ID\n\n## Data Model\n\n### Presentations\n- `id` (INTEGER PRIMARY KEY)\n- `name` (TEXT) - Name of the talk\n- `presenter` (TEXT) - Presenter name\n- `talk_deck_link` (TEXT) - Link to presentation slides\n- `created_at` (TEXT) - Timestamp\n\n### Steps\n- `id` (INTEGER PRIMARY KEY)\n- `presentation_id` (INTEGER) - Foreign key to presentations\n- `step_number` (INTEGER) - Order within presentation\n- `widget_type` (TEXT) - Type of widget (poll, question, etc.)\n- `widget_config` (TEXT) - JSON configuration for the widget\n- `is_active` (INTEGER) - Whether this step is currently active (0 or 1)\n\n### Sessions (Participants)\n- `id` (TEXT PRIMARY KEY) - Session ID (UUID)\n- `presentation_id` (INTEGER) - Which presentation they're in\n- `created_at` (TEXT) - Timestamp\n\n### Responses\n- `id` (INTEGER PRIMARY KEY)\n- `session_id` (TEXT) - Foreign key to sessions\n- `step_id` (INTEGER) - Foreign key to steps\n- `response_data` (TEXT) - JSON data of the response\n- `created_at` (TEXT) - Timestamp\n\n## Architecture\n\n### Backend Structure\n```\nbackend/\n├── index.ts # Main Hono app entry point\n├── database/\n│ ├── migrations.ts # Database schema setup\n│ └── queries.ts # Database query functions\n└── routes/\n ├── presentations.ts # Presentation CRUD\n ├── steps.ts # Step management\n ├── sessions.ts # Session handling\n ├── responses.ts # Response handling\n └── admin.ts # Admin/presenter endpoints\n```\n\n### Frontend Structure\n```\nfrontend/\n├── index.html # Main HTML template\n├── index.tsx # Frontend entry point\n├── components/\n│ ├── App.tsx # Main app component\n│ ├── PresenterMode.tsx # Presenter view\n│ ├── ParticipantMode.tsx # Participant view\n│ ├── QRCode.tsx # QR code display\n│ └── widgets/\n│ ├── PollWidget.tsx # Poll widget\n│ ├── PollPresenter.tsx # Poll presenter view\n│ └── [OtherWidgets].tsx # Future widgets\n└── utils/\n ├── session.ts # Session management (localStorage)\n └── api.ts # API client functions\n```\n\n### Shared\n```\nshared/\n└── types.ts # TypeScript types/interfaces\n```\n\n## Widget System\n\n### Widget Types\n1. **Poll** - Multiple choice question with real-time results\n2. **Open Question** - Text input with responses displayed\n3. **Word Cloud** - Collect words/phrases\n4. **Rating** - Star or scale rating\n\n### Widget Interface\nEach widget has:\n- **Participant Component**: What participants see and interact with\n- **Presenter Component**: What presenter sees (results, QR code)\n- **Config Schema**: JSON schema for widget configuration\n- **Response Schema**: JSON schema for response data\n\n## API Endpoints\n\n### Presentations\n- `GET /api/presentations` - List all presentations\n- `POST /api/presentations` - Create new presentation\n- `GET /api/presentations/:id` - Get presentation details\n- `PUT /api/presentations/:id` - Update presentation\n\n### Steps\n- `GET /api/presentations/:id/steps` - Get all steps for a presentation\n- `POST /api/presentations/:id/steps` - Create new step\n- `PUT /api/steps/:id` - Update step\n- `PUT /api/steps/:id/activate` - Activate a step (deactivates others)\n- `GET /api/steps/active` - Get currently active step\n\n### Sessions\n- `POST /api/sessions` - Create or get existing session\n- `GET /api/sessions/:id` - Get session details\n\n### Responses\n- `POST /api/responses` - Submit a response\n- `GET /api/steps/:id/responses` - Get all responses for a step\n\n### Admin/Presenter\n- `GET /present/:presentationId/step/:stepNumber` - Presenter view for a step\n- `GET /join/:presentationId` - Participant view (redirects to active step)\n\n## Implementation Plan\n\n### Phase 1: Foundation ✅\n- [x] Basic HTTP route setup\n- [x] Local development server with watch mode\n\n### Phase 2: Database & Backend Core ✅\n- [x] Set up SQLite database schema\n- [x] Create database migration functions\n- [x] Implement presentation CRUD endpoints\n- [x] Implement step management endpoints\n- [x] Implement session management\n- [x] Implement response handling\n\n### Phase 3: Frontend Core ✅\n- [x] Set up React frontend structure\n- [x] Create session management (localStorage)\n- [x] Build API client utilities\n- [x] Create routing system\n- [x] Build basic UI layout\n\n### Phase 4: Widget System ✅\n- [x] Create widget framework/interface\n- [x] Implement Poll widget (participant + presenter views)\n- [x] Add QR code generation/display\n- [x] Real-time updates (polling or WebSocket if needed)\n\n### Phase 5: Presentation Flow ✅\n- [x] Build presenter mode UI\n- [x] Build participant mode UI\n- [x] Implement step activation/deactivation\n- [x] Add navigation between steps\n\n### Phase 6: Polish ✅\n- [x] Modern UI styling (TailwindCSS)\n- [x] Last Conference branding\n- [x] Error handling\n- [x] Loading states\n- [x] Mobile responsiveness\n\n## Technical Decisions\n\n### Session Management\n- Client-side: UUID stored in localStorage\n- Server-side: Store session with presentation_id\n- If session exists in localStorage, reuse it; otherwise create new\n\n### Real-time Updates\n- Start with polling (simpler, works everywhere)\n- Can upgrade to WebSocket later if needed\n\n### QR Code Generation\n- Use a library like `qrcode` via esm.sh\n- QR code contains URL: `/join/:presentationId`\n- Participant visits URL, gets session ID, redirected to active step\n\n### Widget Configuration\n- Store as JSON in `widget_config` column\n- Each widget type has its own schema\n- Validate on backend before saving\n\n## UI/UX Considerations\n\n### Presenter View\n- Large QR code prominently displayed\n- Current step widget/results\n- Navigation to next/previous step\n- Response count indicator\n- Clean, minimal design\n\n### Participant View\n- Current step's widget\n- Clear call-to-action\n- Loading states\n- Success feedback after submission\n- Mobile-first design\n\n### Design Theme\n- Modern, clean aesthetic\n- Last Conference branding\n- Accessible colour contrast\n- Smooth animations/transitions\n\n## Future Enhancements\n- WebSocket for real-time updates\n- More widget types\n- Export responses as CSV\n- Presentation templates\n- Analytics dashboard\n- Multi-presentation management\n\n",[],[658],{"_102":666,"_95":667,"_151":668,"_153":-5,"_154":136,"_155":669,"_157":158,"_104":670,"_99":257,"_160":181,"_162":671,"_163":22,"_164":-5,"_165":672,"_98":673},"e486fbd8-c517-11f0-bf0c-42dde27851f2","server.ts","9b58f1f8-c514-11f0-8731-42dde27851f2",112,["D",1763536685736],"import handler from \"./backend/index.ts\";\n\nconst port = 8000;\nconsole.log(`Server running at http://localhost:${port}`);\nconsole.log(`Using local SQLite database: ./live_talk.db`);\n\nDeno.serve({ port }, handler);\n",[],[667],"files",[148,167,174,185,195,206,213,223,233,242,251,261,271,278,289,298,309,316,323,330,339,348,357,367,377,386,395,405,414,423,432,441,449,458,468,474,483,493,503,513,520,529,539,546,556,565,574,583,592,601,610,619,629,638,647,656,665],"counts",{"_678":32,"_679":219,"_680":32,"_681":682},"pulls","branches","forks","envVars",{"_683":32,"_684":32},"count","emptyCount","contents",[687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":688,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":689},["D",1763535951632],[150],{"_102":310,"_95":311,"_151":312,"_153":-5,"_154":136,"_155":313,"_157":158,"_104":691,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":692},["D",1763535951270],[311],{"_102":514,"_95":515,"_151":516,"_153":-5,"_154":136,"_155":517,"_157":158,"_104":694,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":695},["D",1763536855088],[515],{"_102":540,"_95":541,"_151":542,"_153":-5,"_154":136,"_155":543,"_157":158,"_104":697,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":698},["D",1763535951928],[541],{"_102":557,"_95":558,"_151":559,"_153":-5,"_154":136,"_155":560,"_157":158,"_104":700,"_99":229,"_160":499,"_162":562,"_163":22,"_164":-5,"_98":701},["D",1763537367219],[558],{"_102":566,"_95":567,"_151":568,"_153":-5,"_154":136,"_155":569,"_157":158,"_104":703,"_99":257,"_160":499,"_162":571,"_163":22,"_164":-5,"_98":704},["D",1763551315501],[567],{"_102":575,"_95":576,"_151":577,"_153":-5,"_154":136,"_155":578,"_157":158,"_104":706,"_99":284,"_160":499,"_162":580,"_163":22,"_164":-5,"_98":707},["D",1763537449621],[576],{"_102":584,"_95":585,"_151":586,"_153":-5,"_154":136,"_155":587,"_157":158,"_104":709,"_99":219,"_160":499,"_162":589,"_163":22,"_164":-5,"_98":710},["D",1763537532138],[585],{"_102":593,"_95":594,"_151":595,"_153":-5,"_154":136,"_155":596,"_157":158,"_104":712,"_99":219,"_160":499,"_162":598,"_163":22,"_164":-5,"_98":713},["D",1763537119698],[594],{"_102":602,"_95":603,"_151":604,"_153":-5,"_154":136,"_155":605,"_157":158,"_104":715,"_99":219,"_160":499,"_162":607,"_163":22,"_164":-5,"_98":716},["D",1763540060337],[603],{"_102":611,"_95":612,"_151":613,"_153":-5,"_154":136,"_155":614,"_157":158,"_104":718,"_99":229,"_160":499,"_162":616,"_163":22,"_164":-5,"_98":719},["D",1763536902098],[612],{"_102":620,"_95":621,"_151":622,"_153":-5,"_154":136,"_155":623,"_157":158,"_104":721,"_99":229,"_160":625,"_162":626,"_163":22,"_164":96,"_98":722},["D",1763539180765],[621],{"_102":630,"_95":631,"_151":632,"_153":-5,"_154":136,"_155":633,"_157":158,"_104":724,"_99":219,"_160":499,"_162":635,"_163":22,"_164":-5,"_98":725},["D",1763537119420],[631],{"_102":639,"_95":640,"_151":641,"_153":-5,"_154":136,"_155":642,"_157":158,"_104":727,"_99":32,"_160":625,"_162":644,"_163":22,"_164":-5,"_98":728},["D",1763536535139],[640],{"_102":648,"_95":649,"_151":650,"_153":-5,"_154":136,"_155":651,"_157":158,"_104":730,"_99":219,"_160":499,"_162":653,"_163":22,"_164":-5,"_98":731},["D",1763550333328],[649],{"_102":657,"_95":658,"_151":659,"_153":-5,"_154":136,"_155":660,"_157":158,"_104":733,"_99":284,"_160":499,"_162":662,"_163":22,"_164":-5,"_98":734},["D",1763537722036],[658],{"_102":666,"_95":667,"_151":668,"_153":-5,"_154":136,"_155":669,"_157":158,"_104":736,"_99":257,"_160":181,"_162":671,"_163":22,"_164":-5,"_98":737},["D",1763536685736],[667],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":746,"_681":751},{"_102":103,"_95":96,"_104":747,"_106":-5,"_107":22,"_108":109,"_110":72,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":748,"_130":749,"_133":750,"_145":22},["D",1763534812047],{"_93":94,"_128":129},{"_93":94,"_132":129,"_14":112},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[],"actionData","errors"]

fwfben

live-talk

Environment variables