${JSON.stringify(data, null, 2)}

`);\n\n // const object = {\n // status: \"connected\",\n // message: \"Successfully connected to Notion API\",\n // endpoint: c.req.url, // API enpoint that renders this output\n // fileURL: import.meta.url, // location of this file on val.town\n // databases: response.results.map((db) => ({\n // title: db.title?.[0]?.plain_text || \"Untitled\",\n // id: db.id,\n // };\n\n // const data = await object();\n // return c.html(`\n //

\n    //   {data}\n    //

\n // `);\n } catch (error) {\n return c.json(\n {\n status: \"error\",\n message: \"Failed to connect to Notion API\",\n error: error.message,\n },\n 500\n );\n }\n});\n\nexport default app;\n",[],[172,289,479],[172,289],{"_103":487,"_95":488,"_145":489,"_147":173,"_148":133,"_149":132,"_150":151,"_105":490,"_100":31,"_153":491,"_155":492,"_156":27,"_157":-5,"_158":493,"_98":494},"76a24dda-3c81-11f0-970a-9e149126039e","index.ts","97548d12-da21-4651-b0a1-cbe34592e635",["D",1748518718683],"http","import {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\n// Import route modules\nimport api from \"./routes/api/api.ts\";\nimport auth from \"./routes/auth.ts\";\nimport root from \"./routes/root.ts\";\nimport tasks from \"./routes/tasks/tasks.ts\";\nimport demo from \"./routes/views/demo/demo.ts\";\n\n// Create main app\nconst app = new Hono();\n\n// Apply authentication middleware to all routes\napp.use(\"*\", auth);\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve all /utils files\napp.get(\"/utils/**/*\", async (c) => {\n // console.log(c.req.path);\n // console.log(import.meta.url);\n return await serveFile(\"/shared\" + c.req.path, import.meta.url);\n});\n\n// Mount root route\napp.route(\"/\", root);\n\n// Mount route modules\napp.route(\"/api\", api);\napp.route(\"/tasks\", tasks);\napp.route(\"/demo\", demo);\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[],[172,488],[172],{"_103":497,"_95":498,"_145":499,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":500,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":501,"_98":573},"76a282b4-3c81-11f0-970a-9e149126039e","frontend","54f644c6-7564-4181-8bb2-f1a650925c81",["D",1748518718683],[502,541,549,557,565],{"_103":503,"_95":504,"_145":505,"_147":499,"_148":133,"_149":132,"_150":151,"_105":506,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":507,"_98":540},"76a2744a-3c81-11f0-970a-9e149126039e","components","9b44606b-c6b8-4af9-81cc-e96ef0e292b5",["D",1748518718683],[508,516,524,532],{"_103":509,"_95":510,"_145":511,"_147":505,"_148":133,"_149":132,"_150":151,"_105":512,"_100":31,"_153":195,"_155":513,"_156":27,"_157":-5,"_158":514,"_98":515},"76a25140-3c81-11f0-970a-9e149126039e","App.tsx","cae37540-d24c-4241-ac8d-b9d9d80266b4",["D",1748518718683],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { DemoData, isApiError, isNotionPage } from \"../index.tsx\";\nimport { WhackAGhostEmbedIframe } from \"./iframe.tsx\";\nimport { Form } from \"./form.tsx\";\nimport { Checkout } from \"./checkout.tsx\";\n\ninterface AppProps {\n initialData: {\n demoData: DemoData | null;\n loading: boolean;\n error: string | null;\n demoId: string | null;\n };\n}\n// Simple hook for mobile menu toggle\nfunction useMobileMenu() {\n const [isOpen, setIsOpen] = useState(false);\n const toggleMenu = () => setIsOpen(!isOpen);\n const closeMenu = () => setIsOpen(false);\n return { isOpen, toggleMenu, closeMenu };\n}\n\n// Simple hook for tracking current hash for active nav styling\nfunction useCurrentHash() {\n const [currentHash, setCurrentHash] = useState(() =>\n window.location.hash.slice(1)\n );\n\n useEffect(() => {\n const handleHashChange = () => {\n setCurrentHash(window.location.hash.slice(1));\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n return () => window.removeEventListener(\"hashchange\", handleHashChange);\n }, []);\n\n return currentHash;\n}\n\nexport function App({ initialData }: AppProps) {\n // initialData\n const { demoData, loading, error } = initialData;\n // mobile menu\n const { isOpen, toggleMenu, closeMenu } = useMobileMenu();\n // current hash for nav styling\n const currentHash = useCurrentHash();\n // a little light logging so we can see that React is connecting the /frontend and the /backend\n console.log(\"Current path:\", location.pathname);\n console.log(\"Demo data:\", demoData);\n\n // renderDemoData puts the page elements together\n const renderDemoData = () => {\n if (loading) return

Loading demo data...

;\n if (error) return

Error loading data: {error}

;\n if (!demoData) return

No demo data available

;\n\n // Handle error responses from the API\n if (isApiError(demoData)) {\n return (\n

API Response:

\n Status: {demoData.status}\n

\n Message: {demoData.message}\n

\n );\n }\n\n // Render successful Notion page data\n if (isNotionPage(demoData)) {\n // extract values from demoData\n // use Name if present, otherwise use email\n const getDemoTitle = (demoData) => {\n return (\n demoData.properties?.Name?.title?.[0]?.plain_text ||\n demoData.properties?.Email?.email ||\n `{\"untitled\": \"no Name or Email address provided\"}`\n );\n };\n const demoTitle = getDemoTitle(demoData);\n\n const getAgentInfo = (demoData) => {\n return (\n demoData.properties?.[\"Agent email\"]?.formula?.string ||\n demoData.properties?.[\"Agent name\"]?.formula?.string ||\n `{\"untitled\": \"no Name or Email provided\"}`\n );\n };\n const agent = getAgentInfo(demoData);\n\n const preference = demoData.properties?.Preference.multi_select;\n console.log(\"Preference: \", JSON.stringify(preference));\n\n const pageTitle =\n demoData.properties?.Name?.title?.[0]?.plain_text || \"Untitled\";\n const setupStatus =\n demoData.properties?.[\"Setup status\"]?.select?.name || \"Unknown\";\n const cobrowsingEnabled =\n demoData.properties?.Cobrowse?.checkbox || false;\n const demoUrl = demoData.properties?.URL?.url;\n\n return (\n

\n \n

Glance cobrowse demo

\n \n

\n\n

\n \n {\n recordClick(\"cobrowse_request\");\n }}\n className=\"secondary\"\n >\n Ping Glance to enable\n \n

\n \n

\n Thanks, an agent has been contacted and cobrowsing will be\n enabled shortly. Stay here.\n

\n \n Getting Started\n \n {preference.map((item, index) => (\n {\n closeMenu();\n recordClick(`content ${item.name}`);\n }}\n >\n {item.name}\n \n ))}\n {/* \n Dashboard\n \n \n Documentation\n */}\n \n\n

\n {/* 🙂 */}\n

Your agent

\n\n

{agent}

\n \n\n

\n {/* Default sections - always visible when no hash */}\n \n

A Glance cobrowse demo for {demoTitle}

\n This demo environment lets people try Glance's cobrowsing\n technology and provides ready access to documentation for\n implememntation teams.\n

\n \n\n \n

Features

\n {/*

\n {\n closeMenu();\n recordClick(`content ${item.name}`);\n }}\n >\n {item.name}\n \n //

*/}\n \n\n {/* Dynamic sections based on preferences */}\n \n

Embedded iframes

\n Witih Glance, not only do embedded iframes appear in\n cobrowsing sessions, but also the agent can use{\" \"}\n Remote Assist to interact with the content inside\n it. Just ask your agent to turn it on, and then click\n \"Yes\" when prompted in the cobrowsing session.\n

Let's play a game and try to win together!

\n \n

\n
Documentation excerpt
\n
\n Iframes must also include a script tag, unless one of\n the following conditions apply:\n
\n
\n
\n The iframe is dynamically built using JavaScript.\n
\n
\n The hostname and protocol of the iframe match the\n parent. For example, the parent is at\n https://www.mycompany.com, and the iframe is also at\n https://www.mycompany.com.{\" \"}\n
\n
\n
\n In the above listed cases, Glance is able to\n automatically include the iframe in the Cobrowse\n session.\n
\n
\n \n Continue reading on help.glance.cx →\n \n
\n

\n \n\n \n

Cobrowse PDFs

\n Cobrowse with an agent to review PDFs together. Those PDFs\n can even be dynamic, the contents configured on the fly\n while you work.\n

\n \n Try the Glance PDF viewer ↗︎\n \n

\n
Documentation excerpt
\n
\n All browsers have a built-in native PDF viewer which,\n unlike the browser’s HTML page viewer, cannot run\n JavaScript, including the Glance Cobrowse JavaScript.\n The key to making PDF Cobrowse work is to configure\n Glance Cobrowse to instead open PDF files in the Glance\n PDF viewer. When a visitor views a PDF document in the\n Glance PDF viewer, it can be cobrowsed just like any\n other page.\n
\n
\n \n Continue reading on help.glance.cx →\n \n
\n

\n \n\n \n

Form

Intro to the form.

\n
Documentation excerpt
\n
\n Glance cobrowse provides a “hook” function to allow\n customers to customize page and element masking during a\n cobrowse session.\n
\n
\n \n Continue reading on help.glance.cx →\n \n
\n

\n \n\n \n

Checkout

Try out the checkout viewer below:

\n \n

\n
Documentation excerpt
\n
\n Presence enables agents to initiate a Cobrowse session\n with visitors instantly-without requiring the visitor to\n click a link, enter a hotkey sequence, or read a session\n key over the phone.\n
\n
\n To use Presence, the following requirements must be met:\n Agents must be using Glance for Salesforce or a custom\n integration. Add data-presence=\"on\" to the Cobrowse\n script tag.\n
\n
\n \n Continue reading on help.glance.cx →\n \n
\n

\n \n

\n \n\n \n {/* Overlay only renders when menu is open */}\n {isOpen &&

}\n

\n\n

Demo Page: {pageTitle}

\n Page ID: {demoData.id}\n

\n Setup Status:{\" \"}\n \n {setupStatus}\n \n

\n Created:{\" \"}\n {new Date(demoData.created_time).toLocaleString()}\n

\n Last Edited:{\" \"}\n {new Date(demoData.last_edited_time).toLocaleString()}\n

\n {demoUrl && (\n

\n Demo URL:{\" \"}\n \n {demoUrl}\n \n

\n )}\n

\n\n

\n Notion URL:{\" \"}\n \n View in Notion\n \n

\n \n Cobrowsing is on\n \n \n Cobrowsing is off\n \n\n

\n Raw Properties Data\n

\n \n {JSON.stringify(demoData.properties, null, 2)}\n \n

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

Unknown data format

;\n };\n\n // this last return puts the page elements from renderDemoData into a div, which React likes\n return (\n

{renderDemoData()}

\n );\n}\n",[],[498,504,510],{"_103":517,"_95":518,"_145":519,"_147":505,"_148":133,"_149":132,"_150":151,"_105":520,"_100":31,"_153":195,"_155":521,"_156":27,"_157":-5,"_158":522,"_98":523},"76a26252-3c81-11f0-970a-9e149126039e","checkout.tsx","2f00a92b-30ce-41e4-a773-a8fd08ab95c3",["D",1748518718683],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Checkout() {\n const [cardNumber, setCardNumber] = useState(\"\");\n const [expiry, setExpiry] = useState(\"\");\n const [cvc, setCvc] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [address, setAddress] = useState(\"\");\n const [city, setCity] = useState(\"\");\n const [state, setState] = useState(\"\");\n const [zip, setZip] = useState(\"\");\n const [country, setCountry] = useState(\"US\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n console.log(\"Payment submitted\");\n };\n\n const formatCardNumber = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n // Add space after every 4 digits\n const formatted = digits.replace(/(\\d{4})(?=\\d)/g, \"$1 \");\n return formatted.slice(0, 19); // Limit to 16 digits + 3 spaces\n };\n\n const formatExpiry = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n if (digits.length > 2) {\n return `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;\n }\n return digits;\n };\n\n return (\n \n \n \n Checkout\n \n \n $25.00\n \n \n\n \n \n \n Email\n \n setEmail(e.target.value)}\n placeholder=\"email@example.com\"\n required\n style={{\n width: \"100%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n\n \n \n Card information\n \n \n setCardNumber(formatCardNumber(e.target.value))}\n placeholder=\"1234 1234 1234 1234\"\n required\n style={{\n width: \"100%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px 4px 0 0\",\n border: \"1px solid #e4e4e7\",\n borderBottom: \"none\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n setExpiry(formatExpiry(e.target.value))}\n placeholder=\"MM/YY\"\n required\n style={{\n width: \"50%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"0 0 0 4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n setCvc(e.target.value.replace(/\\D/g, \"\").slice(0, 3))\n }\n placeholder=\"CVC\"\n required\n style={{\n width: \"50%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"0 0 4px 0\",\n border: \"1px solid #e4e4e7\",\n borderLeft: \"none\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n \n Name on card\n \n setName(e.target.value)}\n placeholder=\"Full name\"\n required\n style={{\n width: \"100%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n\n \n \n Billing address\n \n setCountry(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n marginBottom: \"8px\",\n boxSizing: \"border-box\",\n backgroundColor: \"#fff\",\n }}\n >\n \n \n \n \n setAddress(e.target.value)}\n placeholder=\"Address\"\n required\n style={{\n width: \"100%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n marginBottom: \"8px\",\n boxSizing: \"border-box\",\n }}\n />\n \n setCity(e.target.value)}\n placeholder=\"City\"\n required\n style={{\n flex: \"1 1 auto\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n setState(e.target.value)}\n placeholder=\"State\"\n required\n style={{\n width: \"80px\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n setZip(e.target.value)}\n placeholder=\"ZIP\"\n required\n style={{\n width: \"80px\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n Pay $25.00\n \n\n \n \n \n \n Your payment information is secure\n \n \n \n );\n}\n",[],[498,504,518],{"_103":525,"_95":526,"_145":527,"_147":505,"_148":133,"_149":132,"_150":151,"_105":528,"_100":31,"_153":195,"_155":529,"_156":27,"_157":-5,"_158":530,"_98":531},"76a269aa-3c81-11f0-970a-9e149126039e","form.tsx","11d18199-f286-464c-9508-72d9ae8e630f",["D",1748518718683],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Form() {\n // Hardcoded current step for display purposes\n const currentStep = 1;\n\n // Styles for the form\n const styles = {\n container: {\n fontFamily: '\"Roboto\", \"Helvetica Neue\", Arial, sans-serif',\n maxWidth: \"800px\",\n margin: \"0 auto\",\n padding: \"30px\",\n color: \"#333\",\n backgroundColor: \"#fff\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n logo: {\n fontSize: \"24px\",\n fontWeight: \"700\",\n color: \"#026666\", // finance-like teal color\n marginBottom: \"20px\",\n },\n tabs: {\n display: \"flex\",\n width: \"100%\",\n borderBottom: \"1px solid #e0e0e0\",\n marginBottom: \"30px\",\n },\n tab: {\n flex: \"1\",\n textAlign: \"center\",\n padding: \"12px 0\",\n position: \"relative\",\n cursor: \"default\",\n },\n activeTab: {\n borderBottom: \"3px solid #026666\",\n fontWeight: \"600\",\n },\n tabNumber: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"24px\",\n height: \"24px\",\n borderRadius: \"50%\",\n backgroundColor: \"#e0e0e0\",\n color: \"#666\",\n marginRight: \"8px\",\n fontSize: \"14px\",\n },\n activeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n completeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n formGroup: {\n marginBottom: \"20px\",\n },\n label: {\n display: \"block\",\n marginBottom: \"6px\",\n fontWeight: \"500\",\n fontSize: \"14px\",\n },\n input: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n boxSizing: \"border-box\",\n },\n select: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n backgroundColor: \"#fff\",\n boxSizing: \"border-box\",\n },\n flexRow: {\n display: \"flex\",\n gap: \"15px\",\n },\n buttonContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n marginTop: \"30px\",\n },\n button: {\n padding: \"12px 24px\",\n fontSize: \"16px\",\n fontWeight: \"600\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n },\n primaryButton: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n secondaryButton: {\n backgroundColor: \"#e0e0e0\",\n color: \"#333\",\n },\n checkboxLabel: {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n cursor: \"pointer\",\n },\n checkbox: {\n marginRight: \"8px\",\n },\n formSection: {\n marginBottom: \"30px\",\n },\n sectionTitle: {\n fontSize: \"18px\",\n fontWeight: \"600\",\n marginBottom: \"15px\",\n color: \"#026666\",\n },\n infoText: {\n fontSize: \"14px\",\n color: \"#666\",\n marginBottom: \"15px\",\n },\n disclaimer: {\n fontSize: \"12px\",\n color: \"#666\",\n marginTop: \"20px\",\n padding: \"15px\",\n backgroundColor: \"#f8f8f8\",\n borderRadius: \"4px\",\n },\n };\n\n // Tabs rendering\n const renderTabs = () => {\n const steps = [\n \"Personal Information\",\n \"Address\",\n \"Employment\",\n \"Investment Profile\",\n \"Account Setup\",\n ];\n\n return (\n

\n {steps.map((step, index) => {\n const stepNumber = index + 1;\n const isActive = currentStep === stepNumber;\n const isComplete = currentStep > stepNumber;\n\n return (\n \n \n {isComplete ? \"✓\" : stepNumber}\n \n {step}\n

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

FINANCIAL INVESTMENTS

\n {renderTabs()}\n

\n\n

\n {/* Personal Information */}\n

Personal Information

\n Please provide your personal details as they appear on your legal\n documents.\n

\n\n

\n \n First Name\n \n \n

\n\n

\n \n Middle Initial\n \n \n

\n\n

\n \n Last Name\n \n \n

\n\n

\n \n Date of Birth\n \n \n

\n\n

\n \n Social Security Number\n \n \n

\n\n

\n \n Email Address\n \n \n

\n\n

\n \n Phone Number\n \n \n

\n\n

\n Your personal information is protected by our security measures and\n privacy policy. We will never share your Social Security Number with\n third parties except as required by law.\n

\n\n {/* Sample of other tabs (normally would be conditionally rendered) */}\n

Residential Address

\n \n Street Address\n \n \n

\n\n

{/* Spacer for the first step */}\n \n Continue\n \n

\n\n {/* Additional elements that would be shown on other steps */}\n

Employment Information

\n \n Employment Status\n \n \n \n \n \n \n \n \n \n

\n\n

Investment Profile

\n \n Investment Goals (Select all that apply)\n \n

\n \n \n Retirement\n \n

\n\n

Account Setup

\n \n Account Type\n \n \n \n \n \n \n \n

\n\n

\n \n \n I agree to the Terms and Conditions, Privacy Policy, and confirm\n that I have reviewed the Account Agreement and Fee Schedule.\n \n

\n );\n}\n",[],[498,504,526],{"_103":533,"_95":534,"_145":535,"_147":505,"_148":133,"_149":132,"_150":151,"_105":536,"_100":31,"_153":195,"_155":537,"_156":27,"_157":-5,"_158":538,"_98":539},"76a272ce-3c81-11f0-970a-9e149126039e","iframe.tsx","8cd80da0-7744-423f-94c9-4e290ade6a99",["D",1748518718683],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport whackaghost from \"https://esm.town/v/Ttt/whackaghost?v=1\";\n\nexport const WhackAGhostEmbedIframe = () => {\n const [html, setHtml] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const loadIframeContent = async () => {\n try {\n const response = await whackaghost(new Request(\"https://example.com\"));\n const htmlContent = await response.text();\n setHtml(htmlContent);\n } catch (error) {\n console.error(\"Error loading iframe content:\", error);\n setHtml(\"

Error loading content

\");\n } finally {\n setLoading(false);\n }\n };\n\n loadIframeContent();\n }, []);\n\n if (loading) {\n return

Loading iframe content...

;\n }\n\n return (\n \n );\n};\n",[],[498,504,534],[498,504],{"_103":542,"_95":543,"_145":544,"_147":499,"_148":133,"_149":132,"_150":151,"_105":545,"_100":31,"_153":165,"_155":546,"_156":27,"_157":-5,"_158":547,"_98":548},"76a27558-3c81-11f0-970a-9e149126039e","favicon.svg","83cf97db-6c92-4016-bd63-a21f8f92fc94",["D",1748518718683],"\n",[],[498,543],{"_103":550,"_95":551,"_145":552,"_147":499,"_148":133,"_149":132,"_150":151,"_105":553,"_100":31,"_153":165,"_155":554,"_156":27,"_157":-5,"_158":555,"_98":556},"76a27738-3c81-11f0-970a-9e149126039e","index.html","61c0a6f9-e901-4a11-a313-a30c9db5dab3",["D",1748518718683],"\n\n \n \n \n Glancer!\n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n\n",[],[498,551],{"_103":558,"_95":559,"_145":560,"_147":499,"_148":133,"_149":132,"_150":151,"_105":561,"_100":31,"_153":195,"_155":562,"_156":27,"_157":-5,"_158":563,"_98":564},"76a27ecc-3c81-11f0-970a-9e149126039e","index.tsx","416ca6cd-958a-4c3c-92b9-1d16df940e00",["D",1748518718683],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\n// Type definitions\ninterface NotionPage {\n object: \"page\";\n id: string;\n created_time: string;\n last_edited_time: string;\n properties: Record;\n url: string;\n}\n\ninterface ApiErrorResponse {\n message: string;\n status: string | number;\n}\n\nexport type DemoData = NotionPage | ApiErrorResponse;\n\n// Type guards\nexport function isApiError(data: DemoData): data is ApiErrorResponse {\n return 'message' in data && 'status' in data;\n}\n\nexport function isNotionPage(data: DemoData): data is NotionPage {\n return 'object' in data && data.object === 'page';\n}\n\n// Extend window to include our injected data\ndeclare global {\n interface Window {\n __INITIAL_DATA__?: DemoData;\n __DEMO_ID__?: string;\n }\n}\n\n// Extract demo ID from URL path\nconst getDemoIdFromPath = () => {\n const pathParts = location.pathname.split('/');\n return pathParts[pathParts.length - 1];\n};\n\n// Prepare initial data\nasync function prepareInitialData(): Promise<{\n demoData: DemoData | null;\n loading: boolean;\n error: string | null;\n demoId: string | null;\n}> {\n // First, try to use initial data injected by the server\n if (window.__INITIAL_DATA__) {\n return {\n demoData: window.__INITIAL_DATA__,\n loading: false,\n error: null,\n demoId: window.__DEMO_ID__ || getDemoIdFromPath()\n };\n }\n\n // If no initial data, fetch it from the API\n const demoId = window.__DEMO_ID__ || getDemoIdFromPath();\n if (demoId && demoId !== 'demo') {\n try {\n const response = await fetch(`/api/demo/${demoId}`);\n const data = await response.json();\n return {\n demoData: data,\n loading: false,\n error: null,\n demoId\n };\n } catch (err) {\n return {\n demoData: null,\n loading: false,\n error: err instanceof Error ? err.message : 'Unknown error',\n demoId\n };\n }\n }\n\n return {\n demoData: null,\n loading: false,\n error: null,\n demoId\n };\n}\n\n// Initialize the app\nasync function initializeApp() {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n\n const initialData = await prepareInitialData();\n \n createRoot(root).render();\n}\n\n// Start the app\ninitializeApp().catch(console.error);",[],[498,559],{"_103":566,"_95":567,"_145":568,"_147":499,"_148":133,"_149":132,"_150":151,"_105":569,"_100":31,"_153":165,"_155":570,"_156":27,"_157":-5,"_158":571,"_98":572},"76a2816a-3c81-11f0-970a-9e149126039e","style.css","36c1f310-7b5e-4bb9-af50-906ef3424d4e",["D",1748518718683],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[498,567],[498],{"_103":575,"_95":576,"_145":577,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":578,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":579,"_98":650},"76a29600-3c81-11f0-970a-9e149126039e","shared","23817f6f-41cf-4d59-b260-90cc583965bf",["D",1748518718683],[580],{"_103":581,"_95":582,"_145":583,"_147":577,"_148":133,"_149":132,"_150":151,"_105":584,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":585,"_98":649},"76a29236-3c81-11f0-970a-9e149126039e","utils","5a5a6cb3-6651-477c-8d4f-26b0d863a4d1",["D",1748518718683],[586,593,601,609,617,625,633,641],{"_103":587,"_95":184,"_145":588,"_147":583,"_148":133,"_149":132,"_150":151,"_105":589,"_100":31,"_153":165,"_155":590,"_156":27,"_157":-5,"_158":591,"_98":592},"76a2852a-3c81-11f0-970a-9e149126039e","9fd525ad-83db-45ce-9d73-1ea3a7dba3ea",["D",1748518718683],"This directory is for scripts that are either front-end scripts called by HTML interfaces, or are simple string manipulators called by the backend. \n\n## Re: /controllers and /utils\nIn this application, we have different directories for /controllers and /utils:\n\n| Aspect | **Controller** | **Util** |\n| ----------------- | --------------------------------------------------- | --------------------------------------------------- |\n| **Purpose** | Orchestrates business logic and workflows | Provides small, stateless helper functions |\n| **Scope** | High-level, often involves services or side effects | Low-level, narrow in focus (e.g., string, date ops) |\n| **State** | Works with application or user-specific data | Stateless – input in, output out |\n| **Output** | Often returns domain-specific result objects | Returns generic, context-agnostic values |\n| **Example Names** | `syncDataToNotion`, `generateUserReport` | `formatDate`, `slugify`, `chunkArray`, `debounce` |\n| **Depends On** | Services, repositories, other controllers | Pure logic, no external dependencies (ideally) |",[],[576,582,184],{"_103":594,"_95":595,"_145":596,"_147":583,"_148":133,"_149":132,"_150":151,"_105":597,"_100":31,"_153":195,"_155":598,"_156":27,"_157":-5,"_158":599,"_98":600},"76a28750-3c81-11f0-970a-9e149126039e","blobKeyForDemoCache.ts","71aca613-59c5-4da0-b7b7-ecbbd799da85",["D",1748518718683],"export async function blobKeyForDemoCache(url: string, id: string) {\n // convert url param to a URL object so we can get the path\n const newURL = new URL(url);\n const path = newURL.pathname;\n console.log(path);\n\n // split the path on the @ symbol, which separates account and app info from version and path info\n let str = path.split(\"@\");\n\n // get app and account stuff\n const metaString = str[0].replace(\"/v/\", \"\");\n const metaArray = metaString.split(\"/\");\n\n // get file from path\n // const fileString = str[1].replace(\".ts\", \"\");\n // const fileName = fileString.split(\"/\").pop();\n\n const blobKey = [\n // fileName, // e.g., demoCache\n \"demoCache\", //\n metaArray[1], // app name; e.g., Glancer\n metaArray[0], // account name; e.g., Glance or lightweight\n id, // .replaceAll(\"-\", \"\"), // page id, with hyphens removed\n ].join(\"--\");\n\n return blobKey;\n}\n",[],[576,582,595],{"_103":602,"_95":603,"_145":604,"_147":583,"_148":133,"_149":132,"_150":151,"_105":605,"_100":31,"_153":195,"_155":606,"_156":27,"_157":-5,"_158":607,"_98":608},"76a289a8-3c81-11f0-970a-9e149126039e","pollEnabledStatus.ts","baf96b4a-79dd-4fe6-8de5-7b6b49b49f21",["D",1748518718683],"export async function pollEnabledStatus() {\n const interval = 1000; // 10000;\n let count = 1;\n const maxCount = 500;\n\n const pinger = setInterval(async () => {\n // check the boolean to see if a Glancer has enabled the link to start a cobrowsing session\n const resp = await fetch(\"/api/cobrowse/\" + window.__DEMO_ID__, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n const data = (await resp.json()) as any;\n console.log(\"Demo cache: \", JSON.stringify(data));\n\n // use the data from the cache to update elements on the page\n const ctaCobrowseEl = document.getElementById(\"cta-cobrowse\");\n const ctaContactEl = document.getElementById(\"cta-contact\");\n const cobrowsingOnEl = document.getElementById(\"cobrowsing-on\");\n const cobrowsingOffEl = document.getElementById(\"cobrowsing-off\");\n\n if (data.cobrowse) {\n ctaCobrowseEl.style.display = \"block\";\n ctaContactEl.style.display = \"none\";\n cobrowsingOnEl.style.display = \"block\";\n cobrowsingOffEl.style.display = \"none\";\n } else {\n ctaCobrowseEl.style.display = \"none\";\n ctaContactEl.style.display = \"block\";\n cobrowsingOnEl.style.display = \"none\";\n cobrowsingOffEl.style.display = \"block\";\n }\n\n count++;\n if (count >= maxCount) {\n clearInterval(pinger);\n // could also show a message in the page telling the user to refresh; page is stale\n }\n }, interval);\n}\nawait pollEnabledStatus();\n",[],[576,582,603],{"_103":610,"_95":611,"_145":612,"_147":583,"_148":133,"_149":132,"_150":151,"_105":613,"_100":31,"_153":195,"_155":614,"_156":27,"_157":-5,"_158":615,"_98":616},"76a28b1a-3c81-11f0-970a-9e149126039e","recordClick.ts","ce7737ce-75ed-4f08-a6ba-26379349732a",["D",1748518718683],"export async function recordClick(action: string) {\n // Create data to store\n const clickData = {\n id: window.__DEMO_ID__,\n action: action, // cobrowse_start, cobrowse_request, content iframe...\n };\n console.log(\"click: \", JSON.stringify(clickData));\n\n fetch(\"/api/action\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(clickData),\n });\n\n if (action == \"cobrowse_request\") {\n document.getElementById(\"cta-cobrowse-request-confirmation\").style.display =\n \"block\";\n // document.getElementById(\"cta-contact\").style.display = \"none\";\n }\n}\nwindow.recordClick = recordClick;\n",[],[576,582,611],{"_103":618,"_95":619,"_145":620,"_147":583,"_148":133,"_149":132,"_150":151,"_105":621,"_100":31,"_153":195,"_155":622,"_156":27,"_157":-5,"_158":623,"_98":624},"76a28cfa-3c81-11f0-970a-9e149126039e","startSession.ts","c6b3b9f0-783d-4ada-af01-49c8770ed0a0",["D",1748518718683],"export async function startSession() {\n GLANCE.Cobrowse.Visitor.startSession(\"GLANCE_KEYTYPE_RANDOM\");\n}\n// If you forget to add functions called by events\n// to the global scope (e.g., `onclick=\"startSession();\"`),\n// then those functions won't be in the global scope,\n// and the onclick will fail with Uncaught ReferenceError.\nwindow.startSession = startSession;\n",[],[576,582,619],{"_103":626,"_95":627,"_145":628,"_147":583,"_148":133,"_149":132,"_150":151,"_105":629,"_100":31,"_153":195,"_155":630,"_156":27,"_157":-5,"_158":631,"_98":632},"76a28e76-3c81-11f0-970a-9e149126039e","test.ts","a4f656a3-74aa-43db-86cb-a016b37a54ae",["D",1748518718683],"console.log(\"hi from test.ts\");\nconsole.log(location.pathname);\n",[],[576,582,627],{"_103":634,"_95":635,"_145":636,"_147":583,"_148":133,"_149":132,"_150":151,"_105":637,"_100":31,"_153":195,"_155":638,"_156":27,"_157":-5,"_158":639,"_98":640},"76a28fc0-3c81-11f0-970a-9e149126039e","toggleContent.ts","09e307a3-914d-48df-a1a0-39cd32cbd05d",["D",1748518718683],"export async function toggleContent(action: string) {\n // handle show/hide embeds\n const embeds = document.getElementsByClassName(\"embed\");\n const embed = document.getElementById(action);\n // id=\"toggle-game\"\n const buttonId = await \"toggle-\" + action;\n\n // change to display: none all of the embeds\n for (let i = 0; i < embeds.length; i++) {\n embeds[i].style.display = \"none\";\n }\n // change to display: block the embed with the id in the action param\n if (embed) {\n embed.style.display = \"block\";\n }\n\n // Remove selected class from all boxes\n await document.querySelectorAll(\".box-option\").forEach(box => {\n box.classList.add(\"bg-gray-50\");\n box.classList.remove(\"bg-amber-100\");\n });\n\n // Add selected class to clicked box\n await document.getElementById(buttonId).classList.remove(\"bg-gray-50\");\n await document.getElementById(buttonId).classList.add(\"bg-amber-100\");\n}\nwindow.toggleContent = toggleContent;",[],[576,582,635],{"_103":642,"_95":643,"_145":644,"_147":583,"_148":133,"_149":132,"_150":151,"_105":645,"_100":31,"_153":195,"_155":646,"_156":27,"_157":-5,"_158":647,"_98":648},"76a29100-3c81-11f0-970a-9e149126039e","toggleHelp.ts","47ccdb38-9801-437d-898f-61734f2fdd25",["D",1748518718683],"export async function toggleHelp() {\n console.log(\"toggleHelp\");\n // var helpContent = document.getElementById(\"helpContent\");\n const helpers = document.getElementsByClassName(\"help\");\n for (let i = 0; i < helpers.length; i++) {\n // helpers[i].style.display = \"none\";\n if (helpers[i].style.display === \"none\") {\n helpers[i].style.display = \"block\";\n } else {\n helpers[i].style.display = \"none\";\n }\n }\n}\nwindow.toggleHelp = toggleHelp;",[],[576,582,643],[576,582],[576],{"_103":652,"_95":99,"_145":653,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":654,"_100":31,"_153":165,"_155":655,"_156":27,"_157":-5,"_158":656,"_98":657},"76a29768-3c81-11f0-970a-9e149126039e","121a44e9-af38-477f-9bf3-b73bd7da44e6",["D",1748518718683],"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\n",[],[99],{"_103":659,"_95":660,"_145":661,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":662,"_100":31,"_153":165,"_155":663,"_156":27,"_157":-5,"_158":664,"_98":665},"76a2a1f4-3c81-11f0-970a-9e149126039e","INSTRUCTIONS.md","f4296521-2cd9-4cca-992a-44aba6e5c310",["D",1748518718683],"This document provides instructions for the development of a README.md at the root of this project.\n\n# Instructions\n\nLook over the entire code base of this project. Once you've taken a look at everything, follow these instructions to develop the README.\n\n## First, explain that this val.town \"val\" (or, project) gives people a way to experience Glance's cobrowing technology\n\nThe project has features that demonstrate Glance's distinctive cobrowsing technology to implementation teams:\n\n- a Glance demo experience at a distinct URL that is personalized to each visitor\n- Glance's cobrowsing javascript, which allows a visitor and an agent to cobrowse together through the browser\n- the Glance PDF viewer, which allows agents and visitors to cobrowse a PDF that is dynamically generated\n- contextual documentation to aid implementation teams who work with the visitor\n- a PDF \"receipt\" of the demo and a durable demo URL, so the visitor has useful take-aways for future reference\n- simple event tracking, so Glance can see which features of the demo get engagement\n\nWhen describing the features above, include brief but specific code examples, so the viewer has context. For example, show some code that includes the feature, like the Hono route for the /demo/:id, the Glance session javascript in the React /frontend, the examplePDF viewer and headers.\n\n## Second, orient the reader to the codebase\n\nInclude:\n\n1. a tree diagram, with a brief explanation of each area of the code base, starting at the highest level with /backend and what it does, /frontend and what it does, and /shared and what it does. Note that this project extends val.town's recommended approach for using Hono and React together, explained at https://www.val.town/x/std/reactHonoStarter\n2. a list of all the framework elements in this project and a short description of each, including but not limited to:\n\n- val.town and Deno\n- the Notion \"client\" (or npm library)\n- Hono for routing\n- caching with blob storage\n- crons to update the cache\n- React/JSX for interface templates and tailwind\n\n## Third, explain the following technical implementation details\n\n- React /frontend\n- Hono /backend/routes, including\n - index.ts and what it does, and the routing strategy it establishes, including\n - /api routes for serving JSON and other content to views\n - /view routes for serving the demo at /demo/:id/\n - /task routes for handling Notion webhooks\n- /shared, for /utils used by both the /backend and the /frontend\n- blob storage for the cache, which enables snappy demos\n- cron(s) that keep the cache up-to-date\n- environment variables, which we use to store connection details for Notion, database ids for essential Notion databases (including the demos and interactions databases)\n- logging features\n\nWhen describing the features above, include brief but specific and relevant code examples, so the viewer has context. For example, show some code related to /route and /controller separation; and show code related to accessing environment variables. While you're reviewing the code base, keep in mind that each directory has a README.md file that should give you more context and may help the reader, in case the code isn't self-explanatory.\n\n## Fourth, explain some of the important conventions in this project\n\nFor example, these conventions should be made clear:\n\n- separation of routes and controllers\n- separate of controllers and utils\n- /route areas do different and specific jobs\n\nSome of this may be explained in the tree diagram above, so don't recreate that. But do explain these important conventions so that someone who is new to this project can understand what's expected in order to understand the project, and contribute.\n\n### Lastly, explain what is not handled by the code in this project\n\nAs an afterthought at the bottom of the README, note that there are features of this app that are not handled by val.town, and are managed by Notion instead. Those features are:\n\n- email and other alerting (e.g., Slack)\n- databases, including:\n - the \"Glancer demos\" database\n - the \"Glancer interactions\" database, which is where certain demo events (e.g., clicks) are warehoused and visualized\n - the \"Glancer agents\" database, which handles agent assignments and management\n\nNote that this app integrates with Notion to extend Notion in important ways; namely, automation and logging. Please be clear about that.\n\n## Closing instructions\n\nAgain, only update the README.md file at the root of this project. Don't update any other code. And please do not use emojis in the README.md file.",[],[660],{"_103":667,"_95":184,"_145":668,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":669,"_100":31,"_153":165,"_155":670,"_156":27,"_157":-5,"_158":671,"_98":672},"76a2a65e-3c81-11f0-970a-9e149126039e","4e29b99c-db5d-4cc2-ae40-0a4af6d0ec86",["D",1748518718683],"# Glance Cobrowsing Demo Platform\n\nThis Val Town project provides a platform from which to demo Glance's cobrowsing technology, designed to showcase key Glance features alongside implementation details relevant to development teams and prospective customers.\n\n## Features\n\nThe platform demonstrates Glance's distinctive cobrowsing technology through several key features:\n\n### Personalized Demo Experience\n\nEach visitor receives a unique demo URL with personalized content:\n\n```typescript\n// Demo route with data injection\napp.get(\"/:id\", async (c) => {\n const id = c.req.param(\"id\");\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n const response = await fetch(`/api/demo/${id}`);\n const initialData = await response.json();\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n```\n\n### Glance Cobrowsing Integration\n\nThe platform includes Glance's cobrowsing JavaScript for real-time screen sharing between visitors and agents:\n\n```html\n\n```\n\n### Dynamic PDF Generation\n\nGenerates personalized PDF receipts with demo interaction history:\n\n```typescript\nexport const examplePDF = async (page: any) => {\n const actionsStr =\n page.properties[\"Interactions string\"]?.formula?.string || null;\n const actionsArray = actionsStr ? actionsStr.split(\",\") : [];\n const interactions = actionsArray.map((event) => {\n const row = event.split(\"--\");\n return {\n event: row[0],\n \"date & time\": row[1],\n };\n });\n\n const invoicePDF = await generatePDF({\n pageId: page.id,\n customerName: page.properties.Name?.title?.[0]?.plain_text,\n agentName: page.properties[\"Agent name\"]?.formula?.string,\n items: interactions,\n });\n\n return new Response(invoicePDF, {\n headers: {\n \"Content-Type\": \"application/pdf\",\n \"Content-Disposition\":\n 'inline; filename=\"glance-cobrowse-demo-receipt.pdf\"',\n },\n });\n};\n```\n\n### Event Tracking\n\nSimple event tracking captures user interactions for analytics:\n\n```typescript\n// Client-side event recording\nwindow.recordClick = function (action) {\n fetch(`/api/setAction`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n pageId: window.__DEMO_ID__,\n action: action,\n }),\n });\n};\n```\n\n## Codebase Structure\n\nThis project extends Val Town's recommended approach for using Hono and React together (https://www.val.town/x/std/reactHonoStarter) with additional enterprise features.\n\n```\n├── backend/ # Server-side logic and API routes\n│ ├── controllers/ # Business logic for Notion integration\n│ ├── crons/ # Scheduled tasks for cache management\n│ ├── routes/ # HTTP route handlers\n│ │ ├── api/ # JSON API endpoints\n│ │ ├── tasks/ # Notion webhook handlers\n│ │ └── views/ # HTML page serving\n│ └── index.ts # Main Hono application entry point\n├── frontend/ # Client-side React application\n│ ├── components/ # React components\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend JavaScript entry point\n└── shared/ # Utilities used by both frontend and backend\n └── utils/ # Shared helper functions\n```\n\n### Backend (`/backend`)\n\nHandles all server-side operations including API routes, Notion integration, and static file serving. Built with Hono for routing and includes authentication middleware.\n\n### Frontend (`/frontend`)\n\nReact-based user interface with Tailwind CSS styling. Includes the main demo interface, cobrowsing integration, and interactive components.\n\n### Shared (`/shared`)\n\nContains utilities and functions that work in both browser and server environments, ensuring code reusability across the application.\n\n## Framework and Technology Stack\n\n- **Val Town & Deno**: Serverless runtime environment with TypeScript support\n- **Notion Client**: Official npm library for Notion API integration\n- **Hono**: Lightweight web framework for routing and middleware\n- **Blob Storage**: Val Town's built-in caching solution for performance optimization\n- **Cron Jobs**: Scheduled tasks to maintain cache freshness\n- **React/JSX**: Frontend interface templates with TypeScript\n- **Tailwind CSS**: Utility-first CSS framework for styling\n\n## Technical Implementation\n\n### React Frontend\n\nThe frontend uses React 18.2.0 with JSX import source configuration:\n\n```typescript\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n```\n\nAll React dependencies are pinned to ensure compatibility across the platform.\n\n### Hono Backend Routes\n\nThe main application (`backend/index.ts`) establishes a clear routing strategy:\n\n```typescript\nconst app = new Hono();\n\n// Authentication middleware\napp.use(\"*\", auth);\n\n// Static file serving\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/utils/**/*\", async (c) => {\n return await serveFile(\"/shared\" + c.req.path, import.meta.url);\n});\n\n// Route modules\napp.route(\"/api\", api); // JSON API endpoints\napp.route(\"/tasks\", tasks); // Notion webhook handlers\napp.route(\"/demo\", demo); // Demo page serving\n```\n\n#### API Routes (`/api`)\n\nServe JSON data and handle CRUD operations for demo management, cobrowsing status, and user interactions.\n\n#### View Routes (`/demo/:id`)\n\nServe personalized demo pages with initial data injection to minimize round-trips.\n\n#### Task Routes (`/tasks`)\n\nHandle incoming Notion webhooks for real-time data synchronization.\n\n### Shared Utilities (`/shared`)\n\nContains helper functions that work in both frontend and backend environments:\n\n```typescript\n// Example: Blob key generation for caching\nexport const blobKeyForDemoCache = async (\n importMetaUrl: string,\n pageId: string\n) => {\n return `demo-cache-${pageId}`;\n};\n```\n\n### Blob Storage Caching\n\nImplements a caching layer to ensure responsive demo experiences:\n\n```typescript\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n// Cache demo data\nawait blob.setJSON(blobKey, {\n id: page.id,\n cobrowse: page.properties.Cobrowse.checkbox,\n});\n```\n\n### Cron Jobs\n\nAutomated cache updates run every minute to maintain data freshness:\n\n```typescript\nexport default async function (interval: Interval) {\n const pages = await notion.databases.query({\n database_id: Deno.env.get(\"GLANCE_DEMOS_DB_ID\"),\n });\n\n for (const page of pages.results) {\n const blobKey = await blobKeyForDemoCache(import.meta.url, page.id);\n blob.setJSON(blobKey, {\n id: page.id,\n cobrowse: page.properties.Cobrowse.checkbox,\n });\n }\n}\n```\n\n### Environment Variables\n\nThe application uses environment variables for secure configuration:\n\n```typescript\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nconst databaseId = Deno.env.get(\"GLANCE_DEMOS_DB_ID\");\n```\n\nRequired environment variables:\n\n- `NOTION_API_KEY`: Notion integration token\n- `GLANCE_DEMOS_DB_ID`: Notion database ID for demo pages\n- `GLANCE_INTERACTIONS_DB_ID`: Notion database ID for interaction tracking\n\n## Project Conventions\n\n### Route and Controller Separation\n\nRoutes handle HTTP concerns while controllers manage business logic:\n\n```typescript\n// Route (thin layer)\napp.post(\"/tasks/setPageID\", async (c) => {\n const body = await c.req.json();\n const result = await setPageID(body.pageId, body.newId);\n return c.json(result);\n});\n\n// Controller (business logic)\nexport const setPageID = async (pageId: string, newId: string) => {\n return await notion.pages.update({\n page_id: pageId,\n properties: { \"Page ID\": { rich_text: [{ text: { content: newId } }] } },\n });\n};\n```\n\n### Controller vs Utility Distinction\n\n| Aspect | Controller | Utility |\n| ------------ | --------------------------------------------- | ------------------------------------------------- |\n| Purpose | Orchestrates business logic and workflows | Provides small, stateless helper functions |\n| Scope | High-level, involves services or side effects | Low-level, narrow focus (string, date operations) |\n| State | Works with application or user-specific data | Stateless - input in, output out |\n| Dependencies | Services, repositories, other controllers | Pure logic, minimal external dependencies |\n\n### Route Area Specialization\n\nDifferent route areas serve specific purposes:\n\n- `/api/*`: JSON data endpoints for frontend consumption\n- `/demo/*`: Personalized demo page serving with data injection\n- `/tasks/*`: Notion webhook processing and database updates\n\n## External Dependencies\n\nThis application integrates with Notion to extend its capabilities through automation and logging. The following features are managed by Notion rather than the Val Town codebase:\n\n### Notion-Managed Features\n\n- **Email and Alerting**: Slack notifications and email alerts are configured within Notion\n- **Database Management**: Three core Notion databases power the application:\n - **Glancer Demos Database**: Stores demo configurations, visitor information, and personalization data\n - **Glancer Interactions Database**: Warehouses demo events, clicks, and user behavior analytics\n - **Glancer Agents Database**: Manages agent assignments, availability, and contact information\n\nThe Val Town application serves as an automation and presentation layer that extends Notion's native capabilities, providing real-time cobrowsing experiences while maintaining all data persistence and workflow management within the Notion ecosystem.",[],[184],{"_103":674,"_95":675,"_145":676,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":677,"_100":31,"_153":165,"_155":678,"_156":27,"_157":-5,"_158":679,"_98":680},"76a2b09a-3c81-11f0-970a-9e149126039e","deno.json","e2b1ca6d-ad35-41b0-838d-25d9c9042cbf",["D",1748518718683],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react@18.2.0\",\n \"jsxImportSourceTypes\": \"https://esm.sh/react@18.2.0\",\n\n \"noImplicitAny\": false,\n \"strict\": false,\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 \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[675],"files",[142,160,170,176,182,190,199,207,215,223,231,239,247,255,264,270,277,287,293,299,306,314,322,330,338,345,353,361,369,375,382,389,396,403,410,417,426,432,438,445,454,462,469,477,486,496,502,508,516,524,532,541,549,557,565,574,580,586,593,601,609,617,625,633,641,651,658,666,673],"counts",{"_685":31,"_686":132,"_687":31,"_688":31},"pulls","branches","forks","envVars","contents",[],{"_103":652,"_95":99,"_145":653,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":692,"_100":31,"_153":165,"_155":655,"_156":27,"_157":-5,"_98":693},["D",1748518718683],[99],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":699,"_140":703,"_681":911,"_165":912,"_689":914,"_694":-5,"_915":27,"_916":-5},{"_103":104,"_95":96,"_105":700,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":27,"_116":-5,"_117":31,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":27,"_21":701,"_130":702},["D",1748518718683],{"_93":94,"_128":129},{"_100":132,"_95":41,"_103":133,"_134":104,"_135":-5,"_136":-5,"_137":138,"_139":113},[704,710,839,869,899,902,905,908],{"_103":143,"_95":144,"_145":146,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":152,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":705,"_98":709},[706],{"_103":161,"_95":162,"_145":163,"_147":146,"_148":133,"_149":132,"_150":151,"_105":164,"_100":31,"_153":165,"_155":166,"_156":27,"_157":-5,"_158":707,"_98":708},[],[144,162],[144],{"_103":171,"_95":172,"_145":173,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":174,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":711,"_98":838},[712,745,754,835],{"_103":177,"_95":178,"_145":179,"_147":173,"_148":133,"_149":132,"_150":151,"_105":180,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":713,"_98":744},[714,717,720,723,726,729,732,735,738,741],{"_103":183,"_95":184,"_145":185,"_147":179,"_148":133,"_149":132,"_150":151,"_105":186,"_100":31,"_153":165,"_155":187,"_156":27,"_157":-5,"_158":715,"_98":716},[],[172,178,184],{"_103":191,"_95":192,"_145":193,"_147":179,"_148":133,"_149":132,"_150":151,"_105":194,"_100":31,"_153":195,"_155":196,"_156":27,"_157":-5,"_158":718,"_98":719},[],[172,178,192],{"_103":200,"_95":201,"_145":202,"_147":179,"_148":133,"_149":132,"_150":151,"_105":203,"_100":31,"_153":195,"_155":204,"_156":27,"_157":-5,"_158":721,"_98":722},[],[172,178,201],{"_103":208,"_95":209,"_145":210,"_147":179,"_148":133,"_149":132,"_150":151,"_105":211,"_100":31,"_153":195,"_155":212,"_156":27,"_157":-5,"_158":724,"_98":725},[],[172,178,209],{"_103":216,"_95":217,"_145":218,"_147":179,"_148":133,"_149":132,"_150":151,"_105":219,"_100":31,"_153":195,"_155":220,"_156":27,"_157":-5,"_158":727,"_98":728},[],[172,178,217],{"_103":224,"_95":225,"_145":226,"_147":179,"_148":133,"_149":132,"_150":151,"_105":227,"_100":31,"_153":195,"_155":228,"_156":27,"_157":-5,"_158":730,"_98":731},[],[172,178,225],{"_103":232,"_95":233,"_145":234,"_147":179,"_148":133,"_149":132,"_150":151,"_105":235,"_100":31,"_153":195,"_155":236,"_156":27,"_157":-5,"_158":733,"_98":734},[],[172,178,233],{"_103":240,"_95":241,"_145":242,"_147":179,"_148":133,"_149":132,"_150":151,"_105":243,"_100":31,"_153":195,"_155":244,"_156":27,"_157":-5,"_158":736,"_98":737},[],[172,178,241],{"_103":248,"_95":249,"_145":250,"_147":179,"_148":133,"_149":132,"_150":151,"_105":251,"_100":31,"_153":195,"_155":252,"_156":27,"_157":-5,"_158":739,"_98":740},[],[172,178,249],{"_103":256,"_95":257,"_145":258,"_147":179,"_148":133,"_149":132,"_150":151,"_105":259,"_100":31,"_153":195,"_155":260,"_156":27,"_157":-5,"_158":742,"_98":743},[],[172,178,257],[172,178],{"_103":265,"_95":266,"_145":267,"_147":173,"_148":133,"_149":132,"_150":151,"_105":268,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":746,"_98":753},[747,750],{"_103":271,"_95":184,"_145":272,"_147":267,"_148":133,"_149":132,"_150":151,"_105":273,"_100":31,"_153":165,"_155":274,"_156":27,"_157":-5,"_158":748,"_98":749},[],[172,266,184],{"_103":278,"_95":279,"_145":280,"_147":267,"_148":133,"_149":132,"_150":151,"_105":281,"_100":31,"_153":282,"_155":283,"_156":27,"_157":-5,"_158":751,"_98":752},[],[172,266,279],[172,266],{"_103":288,"_95":289,"_145":290,"_147":173,"_148":133,"_149":132,"_150":151,"_105":291,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":755,"_98":834},[756,786,810,825,828,831],{"_103":294,"_95":295,"_145":296,"_147":290,"_148":133,"_149":132,"_150":151,"_105":297,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":757,"_98":785},[758,761,764,767,770,773,776,779,782],{"_103":300,"_95":184,"_145":301,"_147":296,"_148":133,"_149":132,"_150":151,"_105":302,"_100":31,"_153":165,"_155":303,"_156":27,"_157":-5,"_158":759,"_98":760},[],[172,289,295,184],{"_103":307,"_95":308,"_145":309,"_147":296,"_148":133,"_149":132,"_150":151,"_105":310,"_100":31,"_153":195,"_155":311,"_156":27,"_157":-5,"_158":762,"_98":763},[],[172,289,295,308],{"_103":315,"_95":316,"_145":317,"_147":296,"_148":133,"_149":132,"_150":151,"_105":318,"_100":31,"_153":195,"_155":319,"_156":27,"_157":-5,"_158":765,"_98":766},[],[172,289,295,316],{"_103":323,"_95":324,"_145":325,"_147":296,"_148":133,"_149":132,"_150":151,"_105":326,"_100":31,"_153":195,"_155":327,"_156":27,"_157":-5,"_158":768,"_98":769},[],[172,289,295,324],{"_103":331,"_95":332,"_145":333,"_147":296,"_148":133,"_149":132,"_150":151,"_105":334,"_100":31,"_153":195,"_155":335,"_156":27,"_157":-5,"_158":771,"_98":772},[],[172,289,295,332],{"_103":339,"_95":201,"_145":340,"_147":296,"_148":133,"_149":132,"_150":151,"_105":341,"_100":31,"_153":195,"_155":342,"_156":27,"_157":-5,"_158":774,"_98":775},[],[172,289,295,201],{"_103":346,"_95":347,"_145":348,"_147":296,"_148":133,"_149":132,"_150":151,"_105":349,"_100":31,"_153":195,"_155":350,"_156":27,"_157":-5,"_158":777,"_98":778},[],[172,289,295,347],{"_103":354,"_95":355,"_145":356,"_147":296,"_148":133,"_149":132,"_150":151,"_105":357,"_100":31,"_153":195,"_155":358,"_156":27,"_157":-5,"_158":780,"_98":781},[],[172,289,295,355],{"_103":362,"_95":225,"_145":363,"_147":296,"_148":133,"_149":132,"_150":151,"_105":364,"_100":31,"_153":195,"_155":365,"_156":27,"_157":-5,"_158":783,"_98":784},[],[172,289,295,225],[172,289,295],{"_103":370,"_95":371,"_145":372,"_147":290,"_148":133,"_149":132,"_150":151,"_105":373,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":787,"_98":809},[788,791,794,797,800,803,806],{"_103":376,"_95":184,"_145":377,"_147":372,"_148":133,"_149":132,"_150":151,"_105":378,"_100":31,"_153":165,"_155":379,"_156":27,"_157":-5,"_158":789,"_98":790},[],[172,289,371,184],{"_103":383,"_95":192,"_145":384,"_147":372,"_148":133,"_149":132,"_150":151,"_105":385,"_100":31,"_153":195,"_155":386,"_156":27,"_157":-5,"_158":792,"_98":793},[],[172,289,371,192],{"_103":390,"_95":233,"_145":391,"_147":372,"_148":133,"_149":132,"_150":151,"_105":392,"_100":31,"_153":195,"_155":393,"_156":27,"_157":-5,"_158":795,"_98":796},[],[172,289,371,233],{"_103":397,"_95":241,"_145":398,"_147":372,"_148":133,"_149":132,"_150":151,"_105":399,"_100":31,"_153":195,"_155":400,"_156":27,"_157":-5,"_158":798,"_98":799},[],[172,289,371,241],{"_103":404,"_95":249,"_145":405,"_147":372,"_148":133,"_149":132,"_150":151,"_105":406,"_100":31,"_153":195,"_155":407,"_156":27,"_157":-5,"_158":801,"_98":802},[],[172,289,371,249],{"_103":411,"_95":257,"_145":412,"_147":372,"_148":133,"_149":132,"_150":151,"_105":413,"_100":31,"_153":195,"_155":414,"_156":27,"_157":-5,"_158":804,"_98":805},[],[172,289,371,257],{"_103":418,"_95":419,"_145":420,"_147":372,"_148":133,"_149":132,"_150":151,"_105":421,"_100":31,"_153":195,"_155":422,"_156":27,"_157":-5,"_158":807,"_98":808},[],[172,289,371,419],[172,289,371],{"_103":427,"_95":428,"_145":429,"_147":290,"_148":133,"_149":132,"_150":151,"_105":430,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":811,"_98":824},[812,821],{"_103":433,"_95":434,"_145":435,"_147":429,"_148":133,"_149":132,"_150":151,"_105":436,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":813,"_98":820},[814,817],{"_103":439,"_95":332,"_145":440,"_147":435,"_148":133,"_149":132,"_150":151,"_105":441,"_100":31,"_153":195,"_155":442,"_156":27,"_157":-5,"_158":815,"_98":816},[],[172,289,428,434,332],{"_103":446,"_95":447,"_145":448,"_147":435,"_148":133,"_149":132,"_150":151,"_105":449,"_100":31,"_153":195,"_155":450,"_156":27,"_157":-5,"_158":818,"_98":819},[],[172,289,428,434,447],[172,289,428,434],{"_103":455,"_95":184,"_145":456,"_147":429,"_148":133,"_149":132,"_150":151,"_105":457,"_100":31,"_153":165,"_155":458,"_156":27,"_157":-5,"_158":822,"_98":823},[],[172,289,428,184],[172,289,428],{"_103":463,"_95":184,"_145":464,"_147":290,"_148":133,"_149":132,"_150":151,"_105":465,"_100":31,"_153":165,"_155":466,"_156":27,"_157":-5,"_158":826,"_98":827},[],[172,289,184],{"_103":470,"_95":471,"_145":472,"_147":290,"_148":133,"_149":132,"_150":151,"_105":473,"_100":31,"_153":195,"_155":474,"_156":27,"_157":-5,"_158":829,"_98":830},[],[172,289,471],{"_103":478,"_95":479,"_145":480,"_147":290,"_148":133,"_149":132,"_150":151,"_105":481,"_100":31,"_153":195,"_155":482,"_156":27,"_157":-5,"_158":832,"_98":833},[],[172,289,479],[172,289],{"_103":487,"_95":488,"_145":489,"_147":173,"_148":133,"_149":132,"_150":151,"_105":490,"_100":31,"_153":491,"_155":492,"_156":27,"_157":-5,"_158":836,"_98":837},[],[172,488],[172],{"_103":497,"_95":498,"_145":499,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":500,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":840,"_98":868},[841,856,859,862,865],{"_103":503,"_95":504,"_145":505,"_147":499,"_148":133,"_149":132,"_150":151,"_105":506,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":842,"_98":855},[843,846,849,852],{"_103":509,"_95":510,"_145":511,"_147":505,"_148":133,"_149":132,"_150":151,"_105":512,"_100":31,"_153":195,"_155":513,"_156":27,"_157":-5,"_158":844,"_98":845},[],[498,504,510],{"_103":517,"_95":518,"_145":519,"_147":505,"_148":133,"_149":132,"_150":151,"_105":520,"_100":31,"_153":195,"_155":521,"_156":27,"_157":-5,"_158":847,"_98":848},[],[498,504,518],{"_103":525,"_95":526,"_145":527,"_147":505,"_148":133,"_149":132,"_150":151,"_105":528,"_100":31,"_153":195,"_155":529,"_156":27,"_157":-5,"_158":850,"_98":851},[],[498,504,526],{"_103":533,"_95":534,"_145":535,"_147":505,"_148":133,"_149":132,"_150":151,"_105":536,"_100":31,"_153":195,"_155":537,"_156":27,"_157":-5,"_158":853,"_98":854},[],[498,504,534],[498,504],{"_103":542,"_95":543,"_145":544,"_147":499,"_148":133,"_149":132,"_150":151,"_105":545,"_100":31,"_153":165,"_155":546,"_156":27,"_157":-5,"_158":857,"_98":858},[],[498,543],{"_103":550,"_95":551,"_145":552,"_147":499,"_148":133,"_149":132,"_150":151,"_105":553,"_100":31,"_153":165,"_155":554,"_156":27,"_157":-5,"_158":860,"_98":861},[],[498,551],{"_103":558,"_95":559,"_145":560,"_147":499,"_148":133,"_149":132,"_150":151,"_105":561,"_100":31,"_153":195,"_155":562,"_156":27,"_157":-5,"_158":863,"_98":864},[],[498,559],{"_103":566,"_95":567,"_145":568,"_147":499,"_148":133,"_149":132,"_150":151,"_105":569,"_100":31,"_153":165,"_155":570,"_156":27,"_157":-5,"_158":866,"_98":867},[],[498,567],[498],{"_103":575,"_95":576,"_145":577,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":578,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":870,"_98":898},[871],{"_103":581,"_95":582,"_145":583,"_147":577,"_148":133,"_149":132,"_150":151,"_105":584,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":872,"_98":897},[873,876,879,882,885,888,891,894],{"_103":587,"_95":184,"_145":588,"_147":583,"_148":133,"_149":132,"_150":151,"_105":589,"_100":31,"_153":165,"_155":590,"_156":27,"_157":-5,"_158":874,"_98":875},[],[576,582,184],{"_103":594,"_95":595,"_145":596,"_147":583,"_148":133,"_149":132,"_150":151,"_105":597,"_100":31,"_153":195,"_155":598,"_156":27,"_157":-5,"_158":877,"_98":878},[],[576,582,595],{"_103":602,"_95":603,"_145":604,"_147":583,"_148":133,"_149":132,"_150":151,"_105":605,"_100":31,"_153":195,"_155":606,"_156":27,"_157":-5,"_158":880,"_98":881},[],[576,582,603],{"_103":610,"_95":611,"_145":612,"_147":583,"_148":133,"_149":132,"_150":151,"_105":613,"_100":31,"_153":195,"_155":614,"_156":27,"_157":-5,"_158":883,"_98":884},[],[576,582,611],{"_103":618,"_95":619,"_145":620,"_147":583,"_148":133,"_149":132,"_150":151,"_105":621,"_100":31,"_153":195,"_155":622,"_156":27,"_157":-5,"_158":886,"_98":887},[],[576,582,619],{"_103":626,"_95":627,"_145":628,"_147":583,"_148":133,"_149":132,"_150":151,"_105":629,"_100":31,"_153":195,"_155":630,"_156":27,"_157":-5,"_158":889,"_98":890},[],[576,582,627],{"_103":634,"_95":635,"_145":636,"_147":583,"_148":133,"_149":132,"_150":151,"_105":637,"_100":31,"_153":195,"_155":638,"_156":27,"_157":-5,"_158":892,"_98":893},[],[576,582,635],{"_103":642,"_95":643,"_145":644,"_147":583,"_148":133,"_149":132,"_150":151,"_105":645,"_100":31,"_153":195,"_155":646,"_156":27,"_157":-5,"_158":895,"_98":896},[],[576,582,643],[576,582],[576],{"_103":652,"_95":99,"_145":653,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":654,"_100":31,"_153":165,"_155":655,"_156":27,"_157":-5,"_158":900,"_98":901},[],[99],{"_103":659,"_95":660,"_145":661,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":662,"_100":31,"_153":165,"_155":663,"_156":27,"_157":-5,"_158":903,"_98":904},[],[660],{"_103":667,"_95":184,"_145":668,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":669,"_100":31,"_153":165,"_155":670,"_156":27,"_157":-5,"_158":906,"_98":907},[],[184],{"_103":674,"_95":675,"_145":676,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":677,"_100":31,"_153":165,"_155":678,"_156":27,"_157":-5,"_158":909,"_98":910},[],[675],[704,706,710,712,714,717,720,723,726,729,732,735,738,741,745,747,750,754,756,758,761,764,767,770,773,776,779,782,786,788,791,794,797,800,803,806,810,812,814,817,821,825,828,831,835,839,841,843,846,849,852,856,859,862,865,869,871,873,876,879,882,885,888,891,894,899,902,905,908],{"_103":652,"_95":99,"_145":653,"_147":-5,"_148":133,"_149":132,"_150":151,"_105":692,"_100":31,"_153":165,"_155":655,"_156":27,"_157":-5,"_98":913},[99],[],"showCompareCallout","pull","routes/_app","actionData","errors"]