\n \n \n \n \n ,\n );\n\n return new Response(stream, {\n status,\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n ...extraHeaders,\n },\n });\n}",[],[152,204],[152],{"_103":214,"_95":215,"_153":216,"_155":-5,"_156":138,"_157":217,"_159":160,"_105":218,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":219,"_98":342},"3ab12b04-34e6-11f0-9354-9e149126039e","frontend","399a029a-34e6-11f0-a8de-9e149126039e",2,["D",1747682388024],[220,266],{"_103":221,"_95":222,"_153":223,"_155":216,"_156":138,"_157":224,"_159":160,"_105":225,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":226,"_98":265},"48823462-34e6-11f0-afbf-9e149126039e","components","43c67abe-34e6-11f0-ad7f-9e149126039e",10,["D",1747682411203],[227,237,246,256],{"_103":228,"_95":229,"_153":230,"_155":223,"_156":138,"_157":231,"_159":160,"_105":232,"_99":233,"_163":177,"_165":234,"_166":22,"_167":-5,"_168":235,"_98":236},"f61b2c84-4b82-11f0-af65-76b3cceeab13","CodeSnippet.tsx","8144a792-4889-11f0-bd53-76b3cceeab13",635,["D",1750168629517],21,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { toast } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function CodeSnippet({ code }: { code: string }) {\n return (\n

\n {\n navigator.clipboard.writeText(code);\n toast(\"Copied!\");\n }}\n className=\"absolute right-3 top-3 px-3 py-1 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded transition-colors z-10\"\n >\n Copy\n \n

\n        \n          {code}\n        \n

\n );\n}",[],[215,222,229],{"_103":238,"_95":239,"_153":240,"_155":223,"_156":138,"_157":206,"_159":160,"_105":241,"_99":242,"_163":177,"_165":243,"_166":22,"_167":-5,"_168":244,"_98":245},"5994f14c-49de-11f0-9032-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",["D",1749987978287],5,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ErrorMessage({ error, onDismiss }) {\n if (!error) return null;\n\n return (\n

\n {error}\n {onDismiss && (\n \n ×\n \n )}\n

\n );\n}",[],[215,222,239],{"_103":247,"_95":248,"_153":249,"_155":223,"_156":138,"_157":250,"_159":160,"_105":251,"_99":252,"_163":177,"_165":253,"_166":22,"_167":-5,"_168":254,"_98":255},"5c1d0ce4-5210-11f0-bff3-f69ea79377d9","ExperimentalWarning.tsx","3604c37e-4dda-11f0-8f96-76b3cceeab13",726,["D",1750889066669],31,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ExperimentalWarning({ user }: { user: { email: string } }) {\n return (\n

\n ⚠️ Experimental Integration – We'll email you at {user.email} about breaking changes.\n

\n );\n}",[],[215,222,248],{"_103":257,"_95":258,"_153":259,"_155":223,"_156":138,"_157":260,"_159":22,"_105":261,"_99":252,"_163":177,"_165":262,"_166":22,"_167":-5,"_168":263,"_98":264},"1447cc52-520f-11f0-a53c-f69ea79377d9","Layout.tsx","52fcadde-496b-11f0-b5e0-76b3cceeab13",725,["D",1750888516663],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ToastContainer } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nexport function Layout(\n { user, children }: { user: { username: string }; children: React.ReactNode },\n) {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n window.location.href = \"/\";\n };\n\n const toggleMenu = () => {\n setIsMenuOpen(!isMenuOpen);\n };\n\n const toggleCreateMenu = () => {\n setIsCreateMenuOpen(!isCreateMenuOpen);\n };\n\n // Close menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (isMenuOpen && !(event.target as Element).closest(\".profile-menu\")) {\n setIsMenuOpen(false);\n }\n if (isCreateMenuOpen && !(event.target as Element).closest(\".create-menu\")) {\n setIsCreateMenuOpen(false);\n }\n };\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsMenuOpen(false);\n setIsCreateMenuOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n document.addEventListener(\"keydown\", handleEscKey);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n document.removeEventListener(\"keydown\", handleEscKey);\n };\n }, [isMenuOpen, isCreateMenuOpen]);\n\n return (\n

\n \n

\n \n Val Town x Pipedream Connect\n \n

\n \n View source\n \n

\n\n

\n \n \n \n \n \n\n {isCreateMenuOpen && (\n

\n \n New Action\n \n \n New Trigger\n \n

\n )}\n

\n\n

\n \n {user?.username}\n \n \n \n \n\n {isMenuOpen && (\n

\n \n My Triggers\n \n \n My Connections\n \n \n Logout\n \n

\n )}\n

\n\n {children}\n

\n );\n}",[],[215,222,258],[215,222],{"_103":267,"_95":268,"_153":269,"_155":216,"_156":138,"_157":270,"_159":160,"_105":271,"_99":217,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":272,"_98":341},"1622eb92-4968-11f0-85d0-76b3cceeab13","pages","67c40202-4967-11f0-b291-76b3cceeab13",342,["D",1749937184518],[273,283,292,302,311,321,331],{"_103":274,"_95":275,"_153":276,"_155":269,"_156":138,"_157":277,"_159":160,"_105":278,"_99":279,"_163":177,"_165":280,"_166":22,"_167":-5,"_168":281,"_98":282},"0c3c12e4-5295-11f0-9fa6-f69ea79377d9","ConnectionsPage.tsx","fa61761e-3817-11f0-972c-9e149126039e",751,["D",1750946055720],16,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ accounts, user }) {\n console.log(accounts);\n return (\n \n

Your Connections

\n \n New connection\n \n

\n {!Array.isArray(accounts) || accounts.length === 0\n ? (\n

\n No connected accounts yet.\n

\n )\n : (\n

\n {accounts.map((account) => (\n \n

\n {account.app?.name || \"Unknown App\"}\n

\n {account.name || \"Connected Account\"}\n

\n Connected: {account.created_at\n ? new Date(account.created_at).toLocaleDateString()\n : \"Unknown\"}\n

\n \n {account.app?.auth_type || \"Unknown\"}\n \n {\n if (\n !confirm(\n `Are you sure you want to delete the connection to ${account.app?.name || \"this app\"}?`,\n )\n ) {\n e.preventDefault();\n }\n }}\n >\n \n Delete\n \n \n

\n ))}\n \n )}\n \n );\n}",[],[215,268,275],{"_103":284,"_95":285,"_153":286,"_155":269,"_156":138,"_157":250,"_159":160,"_105":287,"_99":288,"_163":177,"_165":289,"_166":22,"_167":-5,"_168":290,"_98":291},"5c1d0e56-5210-11f0-bff3-f69ea79377d9","HomePage.tsx","fa617f4c-3817-11f0-972c-9e149126039e",["D",1750889066669],114,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ExperimentalWarning } from \"../components/ExperimentalWarning.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ user }) {\n return (\n \n

\n \n\n {/* Introduction */}\n

\n Connect Val Town to Thousands of Services\n

\n \n Pipedream Connect\n {\" \"}\n provides managed authentication for thousands of services. This application gives Val Town users secure\n access to APIs without managing OAuth flows or API keys yourself.\n

\n\n {/* Actions vs Triggers */}\n

\n {/* Actions */}\n

\n \n

Actions

\n\n

\n Actions let you send data to{\" \"}\n external services from your Val Town code. Perfect for posting to social media, sending emails, creating\n records, or triggering workflows.\n

\n\n

\n Secure by default: Authentication is handled automatically - no API keys to manage\n

\n Copy & paste: Get ready-to-use code snippets for your vals\n

\n Thousands of services: Gmail, Slack, Twitter, Notion, Airtable, and more\n

\n\n

\n \n Create Action\n \n \n

\n\n {/* Triggers */}\n

\n \n

Triggers

\n\n

\n Triggers send data to your vals{\" \"}\n when events happen in external services. Get notified of new emails, form submissions, file uploads, or\n any other event.\n

\n\n

\n Real-time webhooks: Data is sent to your val instantly when events occur\n

\n Any HTTP val: Send data to any Val Town HTTP endpoint you specify\n

\n Event debugging: View all events sent to your triggers for easy debugging\n

\n\n

\n \n Create Trigger\n \n \n

\n\n {/* How it Works */}\n

How It Works

\n\n

\n \n 1\n \n Using Actions\n

• Connect to a service (Gmail, Slack, etc.)
• Configure the action (what data to send)
• Copy the generated code into your val
• Call the action from your val - authentication handled automatically!

\n\n

\n \n 2\n \n Using Triggers\n

• Connect to a service that sends events
• Configure what events to listen for
• Provide your val's HTTP endpoint URL
• Your val receives data automatically when events happen!

\n\n {/* Management */}\n

Manage Your Integrations

\n\n

\n \n

My Connections

Manage connected accounts

\n \n\n \n

\n \n

My Triggers

View & debug your triggers, and the events they've sent

\n \n

\n \n );\n}",[],[215,268,285],{"_103":293,"_95":294,"_153":295,"_155":269,"_156":138,"_157":296,"_159":160,"_105":297,"_99":298,"_163":177,"_165":299,"_166":22,"_167":-5,"_168":300,"_98":301},"ddbb1c4a-5293-11f0-bee2-f69ea79377d9","LoginPage.tsx","fa619216-3817-11f0-972c-9e149126039e",733,["D",1750945548209],45,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { ExperimentalWarning } from \"../components/ExperimentalWarning.tsx\";\n\nexport default function({ onLogin }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, onError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n onError(\"\");\n try {\n const response = await fetch(\"/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apiKey }),\n });\n if (response.ok) window.location.href = \"/\";\n } catch (err) {\n console.error(err);\n onError(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Val Town + Pipedream Connect

\n \n View source\n \n

\n Pipedream Connect{\" \"}\n provides managed authentication for thousands of services, such as Slack, Discord, Google, etc. This app gives\n Val Town users access to Pipedream's OAuth library.\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

To login:

\n 1. Create an API key:{\" \"}\n \n https://www.val.town/settings/api\n \n

2. Give it the \"Users: read-only\" scope.

\n\n

\n );\n}",[],[215,268,294],{"_103":303,"_95":304,"_153":305,"_155":269,"_156":138,"_157":306,"_159":22,"_105":307,"_99":252,"_163":177,"_165":308,"_166":22,"_167":-5,"_168":309,"_98":310},"87757cfe-5130-11f0-aa4c-f69ea79377d9","NewActionPage.tsx","3651b41a-4969-11f0-9fbb-76b3cceeab13",724,["D",1750792932126],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AccountsList } from \"../components/AccountsList.tsx\";\nimport { CodeSnippet } from \"../components/CodeSnippet.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ user }) {\n const [selectedApp, setSelectedApp] = useState();\n const [selectedComponent, setSelectedComponent] = useState();\n const [configuredProps, setConfiguredProps] = useState({});\n const [sdkErrors, setSdkErrors] = useState();\n const [dynamicProps, setDynamicProps] = useState();\n\n const frontendClient = createFrontendClient({\n environment: \"production\",\n externalUserId: user.id,\n tokenCallback: async () => {\n const resp = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n });\n const data = await resp.json();\n return data;\n },\n });\n const handleComponentSubmit = async (ctx) => {\n try {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent!.key,\n configuredProps: ctx.configuredProps,\n dynamicPropsId: dynamicProps?.id,\n });\n } catch (error) {\n setSdkErrors(error);\n }\n };\n\n const code = `import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\";\n\n// Configured at https://pipedream.val.run\nconst result = await actionRun(${\n JSON.stringify(\n {\n actionId: selectedComponent?.key,\n configuredProps,\n dynamicPropsId: dynamicProps?.id,\n },\n null,\n 2,\n )\n });\n\nconsole.log(result);`;\n\n return (\n \n \n

New Action

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select an Action\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 3. Configure Action:\n \n

\n \n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Copy code to use in Val Town:\n \n

\n \n

\n )}\n

\n \n \n );\n}",[],[215,268,304],{"_103":312,"_95":313,"_153":314,"_155":269,"_156":138,"_157":315,"_159":22,"_105":316,"_99":317,"_163":177,"_165":318,"_166":22,"_167":-5,"_168":319,"_98":320},"187abfec-4b83-11f0-a3e3-76b3cceeab13","NewTriggerPage.tsx","d5b87a66-4abd-11f0-ab2f-76b3cceeab13",638,["D",1750168687182],54,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser?deps=react@18.2.0,react-dom@18.2.0\";\nimport { toast } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AccountsList } from \"../components/AccountsList.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ user }: { user: any }) {\n const [selectedApp, setSelectedApp] = useState();\n const [selectedComponent, setSelectedComponent] = useState();\n const [configuredProps, setConfiguredProps] = useState({});\n const [sdkErrors, setSdkErrors] = useState();\n const [dynamicProps, setDynamicProps] = useState();\n const [webhookUrl, setWebhookUrl] = useState(\"\");\n\n const frontendClient = createFrontendClient({\n environment: \"production\",\n externalUserId: user.id,\n tokenCallback: async () => {\n const resp = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n });\n const data = await resp.json();\n return data;\n },\n });\n\n const handleComponentSubmit = async (ctx) => {\n try {\n const result = await frontendClient.deployTrigger({\n externalUserId: user.id,\n triggerId: selectedComponent!.key,\n configuredProps: ctx.configuredProps,\n webhookUrl,\n dynamicPropsId: dynamicProps?.id,\n });\n toast(\"Trigger created! Redirecting to the list of triggers...\");\n window.location.href = \"/triggers\";\n } catch (error) {\n setSdkErrors(error);\n }\n };\n\n return (\n \n \n

New Trigger

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select an Trigger\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 3. Webhook URL to trigger:\n \n setWebhookUrl(e.target.value)}\n autoFocus\n />\n

\n )}\n\n {webhookUrl && selectedComponent && (\n

\n \n 4. Configure Trigger:\n \n

\n \n

\n )}\n

\n \n \n );\n}",[],[215,268,313],{"_103":322,"_95":323,"_153":324,"_155":269,"_156":138,"_157":325,"_159":160,"_105":326,"_99":327,"_163":177,"_165":328,"_166":22,"_167":-5,"_168":329,"_98":330},"352f50d8-4b85-11f0-8357-76b3cceeab13","TriggerEventsPage.tsx","01cd0916-4ac1-11f0-8f0d-76b3cceeab13",669,["D",1750169594342],36,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ trigger, events, user }) {\n return (\n \n

Trigger

\n {trigger.configurable_props.find(x => x.type === \"app\")?.name || \"Unknown App\"}\n

\n Created at: {trigger.created_at\n ? new Date(trigger.created_at * 1000).toLocaleString(\"en-US\", {\n timeZoneName: \"short\",\n })\n : \"Unknown\"}\n

\n Trigger JSON\n

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

Events

\n {!Array.isArray(events) || events.length === 0\n ? (\n

\n No events yet.\n

\n )\n : (\n

\n {events.map((event) => (\n

\n Event at {new Date(event.ts).toLocaleString(\"en-US\", {\n timeZoneName: \"short\",\n })}\n

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

\n ))}\n

\n )}\n \n );\n}",[],[215,268,323],{"_103":332,"_95":333,"_153":334,"_155":269,"_156":138,"_157":335,"_159":160,"_105":336,"_99":337,"_163":177,"_165":338,"_166":22,"_167":-5,"_168":339,"_98":340},"f21987b6-5294-11f0-a7f4-f69ea79377d9","TriggersPage.tsx","4ecd9554-4ab8-11f0-9937-76b3cceeab13",749,["D",1750946011876],30,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ triggers, user }) {\n return (\n \n

Your Triggers

\n \n New trigger\n \n

\n\n {!Array.isArray(triggers) || triggers.length === 0\n ? (\n

\n No triggers yet.\n

\n )\n : (\n

\n {triggers.map((trigger) => (\n \n

\n {trigger.configurable_props.find(x => x.type === \"app\")?.name || \"Unknown App\"}\n

\n \n View events\n \n

\n Created at: {trigger.created_at\n ? new Date(trigger.created_at * 1000).toLocaleDateString()\n : \"Unknown\"}\n

\n {\n if (\n !confirm(\n `Are you sure you want to delete the triggers ${trigger.app?.name || \"this app\"}?`,\n )\n ) {\n e.preventDefault();\n }\n }}\n >\n \n Delete\n \n \n

\n ))}\n \n )}\n \n );\n}",[],[215,268,333],[215,268],[215],{"_103":344,"_95":345,"_153":346,"_155":-5,"_156":138,"_157":347,"_159":160,"_105":348,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":349,"_98":359},"c2d03472-4886-11f0-b731-76b3cceeab13","sdk","c1ed1228-4886-11f0-afbd-76b3cceeab13",231,["D",1749840407963],[350],{"_103":351,"_95":352,"_153":353,"_155":346,"_156":138,"_157":354,"_159":160,"_105":355,"_99":224,"_163":177,"_165":356,"_166":22,"_167":-5,"_168":357,"_98":358},"33e72f7c-4bba-11f0-bb94-76b3cceeab13","sdk.ts","c3e5afc2-4886-11f0-a69d-76b3cceeab13",679,["D",1750192355510],"export async function actionRun(args: any) {\n const response = await fetch(\n \"https://pipedream.val.run/api/pipedream/action\",\n {\n method: \"POST\",\n body: JSON.stringify(args),\n headers: {\n Cookie: \"vt_api_key=\" + Deno.env.get(\"valtown\"),\n },\n },\n );\n return response.json();\n}\n\nexport async function proxyRun(args: any) {\n const response = await fetch(\n \"https://pipedream.val.run/api/pipedream/proxy\",\n {\n method: \"POST\",\n body: JSON.stringify(args),\n headers: {\n Cookie: \"vt_api_key=\" + Deno.env.get(\"valtown\"),\n },\n },\n );\n return response.json();\n}",[],[345,352],[345],{"_103":361,"_95":362,"_153":363,"_155":-5,"_156":138,"_157":250,"_159":160,"_105":364,"_99":365,"_163":366,"_165":367,"_166":22,"_167":-5,"_168":368,"_98":369},"5c1d0410-5210-11f0-bff3-f69ea79377d9","README.md","fa619964-3817-11f0-972c-9e149126039e",["D",1750889066669],47,"file","# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external services via Pipedream Connect.\n\n## Features\n\n### Actions\n- **Send data to external services** from your Val Town code\n- **Secure authentication** handled automatically - no API keys to manage\n- **Copy & paste code snippets** ready for your vals\n- **Thousands of services** supported: Gmail, Slack, Twitter, Notion, Airtable, and more\n\n### Triggers \n- **Receive data from external services** when events happen\n- **Real-time webhooks** send data to your vals instantly\n- **Any HTTP val** can receive trigger data\n- **Event debugging** to view all events sent to your triggers\n\n### Home Page\nThe home page now provides comprehensive explanations of:\n- What actions vs triggers are and how they differ\n- How authentication is handled securely under the hood\n- Step-by-step guides for using both actions and triggers\n- Quick access to create new integrations and manage existing ones\n\n## Misc todos\n\n- [ ] Automatically include `\"includeSentViaPipedream\": false` for Discord and Slack\n- [ ] Replace Discord & Slack apps with our own https://pipedream.com/docs/connect/managed-auth/oauth-clients/#using-a-custom-oauth-client\n - [ ] I made one for discord, but am struggling to figure out where to supply the `oauthAppId`. I asked Pipedream.\n- [ ] Would be neat if you could scroll more in the list of connections or see a grid of the top 100 connections\n- [ ] How do we teach Townie how to use this?\n - [ ] search for potential actions (maybe their mcp can help?)\n- [ ] (Maybe) Help users connect trigger to val more directly than copying endpoint (via val town sdk)\n\n## Authentication\n\nThis app uses Val Town API tokens for authentication. (Eventually, we'll swap\nthis for Val Town OAuth.)\n\nTo login, create and supply a Val Town API token with the `user:read` scope only. We store it in cookies.\n\nTo run actions on connected apps, you'll also need to supply a Val Town API\ntoken. If you're doing this from within Val Town, you can use\n`process.env.valtown`, which this app's client libraries will use by default.",[],[362],{"_103":371,"_95":372,"_153":373,"_155":-5,"_156":138,"_157":260,"_159":160,"_105":374,"_99":32,"_163":366,"_165":375,"_166":22,"_167":-5,"_168":376,"_98":377},"1447c0d6-520f-11f0-a53c-f69ea79377d9","deno.json","1447c176-520f-11f0-a53c-f69ea79377d9",["D",1750888516663],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\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 \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react@18.2.0\",\n \"jsxImportSourceTypes\": \"https://esm.sh/react@18.2.0\"\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}",[],[372],"files",[150,170,181,192,202,213,220,227,237,246,256,266,273,283,292,302,311,321,331,343,350,360,370],"counts",{"_382":32,"_383":384,"_385":32,"_386":387},"pulls","branches",3,"forks","envVars",4,"contents",[390,393,396,399,402],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_105":391,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":392},["D",1747682399458],[152],{"_103":214,"_95":215,"_153":216,"_155":-5,"_156":138,"_157":217,"_159":160,"_105":394,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":395},["D",1747682388024],[215],{"_103":344,"_95":345,"_153":346,"_155":-5,"_156":138,"_157":347,"_159":160,"_105":397,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":398},["D",1749840407963],[345],{"_103":361,"_95":362,"_153":363,"_155":-5,"_156":138,"_157":250,"_159":160,"_105":400,"_99":365,"_163":366,"_165":367,"_166":22,"_167":-5,"_98":401},["D",1750889066669],[362],{"_103":371,"_95":372,"_153":373,"_155":-5,"_156":138,"_157":260,"_159":160,"_105":403,"_99":32,"_163":366,"_165":375,"_166":22,"_167":-5,"_98":404},["D",1750888516663],[372],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_101":413,"_99":100,"_418":419},{"_103":104,"_95":96,"_105":414,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":415,"_132":416,"_135":417,"_147":22},["D",1747682234550],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},"changes",[420],{"_366":421,"_423":424,"_98":426},{"_153":184,"_95":183,"_163":187,"_165":188,"_105":422,"_157":100,"_156":138},["D",1750946131647],"previous",{"_153":184,"_95":183,"_163":187,"_165":425},"import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { auth, getCurrentUser } from \"./auth.tsx\";\nimport { pd, pipedream } from \"./pipedream.tsx\";\nimport { renderPage } from \"./render-react-page.tsx\";\n\nconst app = new Hono();\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.route(\"/auth\", auth);\napp.route(\"/api/pipedream\", pipedream);\n\nconst title = \"Pipedream x Val Town Connect\";\n\napp.use(\"*\", async (c, next) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return renderPage({\n pageModuleURL: \"/frontend/pages/LoginPage.tsx\",\n title,\n });\n } else {\n c.set(\"user\", user);\n await next();\n }\n});\n\napp.get(\"/\", async (c) => {\n return renderPage({\n pageModuleURL: \"/frontend/pages/HomePage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n },\n });\n});\n\napp.get(\"/actions/new\", async (c) => {\n return renderPage({\n pageModuleURL: \"/frontend/pages/NewActionPage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n },\n });\n});\n\napp.get(\"/triggers-new\", async (c) => {\n return renderPage({\n pageModuleURL: \"/frontend/pages/NewTriggerPage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n },\n });\n});\n\napp.get(\"/triggers\", async (c) => {\n const triggers = await pd.getTriggers({\n externalUserId: c.get(\"user\").id,\n });\n return renderPage({\n pageModuleURL: \"/frontend/pages/TriggersPage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n triggers: triggers.data,\n },\n });\n});\n\napp.get(\"/triggers/:id/events\", async (c) => {\n const [trigger, events] = await Promise.all([\n pd.getTrigger({\n externalUserId: c.get(\"user\").id,\n id: c.req.param(\"id\"),\n }),\n pd.getTriggerEvents({\n externalUserId: c.get(\"user\").id,\n id: c.req.param(\"id\"),\n }),\n ]);\n return renderPage({\n pageModuleURL: \"/frontend/pages/TriggerEventsPage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n trigger: trigger.data,\n events: events.data,\n },\n });\n});\n\napp.get(\"/connections\", async (c) => {\n const accounts = await pd.getAccounts({\n external_user_id: c.get(\"user\").id,\n include_credentials: false, // only works for oauth clients we own\n });\n return renderPage({\n pageModuleURL: \"/frontend/pages/ConnectionsPage.tsx\",\n title,\n props: {\n user: c.get(\"user\"),\n accounts: accounts.data,\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => Promise.reject(err));\nexport default app.fetch;","backend/main.tsx","actionData","errors"]