Your Connected Accounts

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

\n No connected accounts yet. Connect an app above to get started.\n

\n )\n : (\n

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

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

\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 \n ))}\n \n )}\n

\n );\n}",[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":233,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_169":236,"_98":237},"1dca340c-4889-11f0-9c41-76b3cceeab13","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",["D",1749841419590],60,"/** @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 \"./AccountsList.tsx\";\n\nexport function Dashboard(\n { user, pipedreamToken, onLogout, onError },\n) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\n \"action\",\n );\n const [configuredProps, setConfiguredProps] = useState({});\n // console.log(\n // accounts,\n // selectedApp,\n // selectedComponent,\n // componentType,\n // );\n\n const frontendClient = createFrontendClient({\n environment: \"development\", // TODO: Make this configurable\n externalUserId: user.id,\n tokenCallback: () => Promise.resolve({ token: pipedreamToken }),\n });\n\n useEffect(() => {\n loadAccounts();\n }, []);\n\n const loadAccounts = async () => {\n try {\n // Load user's connected accounts\n const accountsResponse = await fetch(\"/api/pipedream/accounts\");\n const accountsData = await accountsResponse.json();\n if (accountsData.accounts && Array.isArray(accountsData.accounts)) {\n setAccounts(accountsData.accounts);\n } else {\n console.warn(\"Accounts data is not an array:\", accountsData);\n setAccounts([]);\n }\n } catch (err) {\n console.error(\"Failed to load accounts:\", err);\n onError(\"Failed to load accounts. Please try refreshing the page.\");\n setAccounts([]);\n }\n };\n\n const handleComponentTypeChange = (newType: \"action\" | \"trigger\") => {\n setComponentType(newType);\n setSelectedComponent(null); // Reset component when type changes\n };\n\n const handleComponentSubmit = async (ctx) => {\n try {\n if (componentType === \"action\") {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent.key,\n configuredProps: {\n ...ctx.configuredProps,\n include_sent_via_pipedream_flag: false,\n },\n });\n }\n // TODO trigger\n } catch (error) {\n console.error(`Failed to execute ${componentType}:`, error);\n onError(`Failed to execute ${componentType}: ${error.message}`);\n }\n };\n\n return (\n

\n \n

Pipedream Connect

Welcome, {user?.username}!

\n \n Logout\n \n \n\n \n

Connect Apps & Build Workflows

\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 Component Type:\n \n \n handleComponentTypeChange(\n e.target.value as \"action\" | \"trigger\",\n )}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n >\n \n \n \n

\n )}\n\n {selectedApp && (\n

\n \n 3. Select{\" \"}\n {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n }}\n />\n

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

\n \n 4. Configure{\" \"}\n {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n \n

\n                { 'import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\"\\n'}\n                const result = await actionRun(\n                {JSON.stringify({\n                    actionId: selectedComponent.key,\n                    configuredProps,\n                  }, null, 2)}\n                 )\n

\n )}\n \n \n\n \n \n );\n}",[],[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":243,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_169":246,"_98":247},"16374962-487c-11f0-9910-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",141,["D",1749835823421],4,"/** @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}",[],[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":253,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_169":256,"_98":257},"be031d5e-487e-11f0-b4e3-76b3cceeab13","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e",192,["D",1749836963933],23,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\n\nexport function Home({ user, pipedreamToken }) {\n const [error, setError] = useState(\"\");\n\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.href = \"/\";\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (!user) {\n return (\n <>\n \n console.log(x)} onError={handleError} />\n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":263,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_169":266,"_98":267},"134fed94-4881-11f0-b890-76b3cceeab13","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e",202,["D",1749837966038],12,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\n\nexport function LoginForm({ onLogin, onError }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\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

Please enter your Val Town API key to get started.

\n\n

\n );\n}",[],[207,214,260],[207,214],{"_104":270,"_95":271,"_154":272,"_156":208,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":276,"_166":277,"_167":22,"_168":-5,"_169":278,"_98":279},"fa61b890-3817-11f0-972c-9e149126039e","index.html","8f915482-34e6-11f0-b615-9e149126039e",52,["D",1748033608415],5,"file","\n\n \n \n \n Val Town + Pipedream Connect\n \n \n

\n \n \n \n",[],[207,271],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":216,"_164":178,"_166":286,"_167":22,"_168":-5,"_169":287,"_98":288},"5d544fc0-4881-11f0-902b-76b3cceeab13","index.tsx","8855cee6-34e6-11f0-a974-9e149126039e",207,["D",1749838090218],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?\";\nimport { Home } from \"./components/Home.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n ,\n);",[],[207,282],[207],{"_104":291,"_95":292,"_154":293,"_156":-5,"_157":139,"_158":294,"_160":161,"_106":295,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":296,"_98":307},"c2d03472-4886-11f0-b731-76b3cceeab13","sdk","c1ed1228-4886-11f0-afbd-76b3cceeab13",231,["D",1749840407963],[297],{"_104":298,"_95":299,"_154":300,"_156":293,"_157":139,"_158":301,"_160":22,"_106":302,"_100":303,"_164":178,"_166":304,"_167":22,"_168":-5,"_169":305,"_98":306},"88e5c37a-4887-11f0-8700-76b3cceeab13","sdk.ts","c3e5afc2-4886-11f0-a69d-76b3cceeab13",241,["D",1749840740288],9,"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}",[],[292,299],[292],{"_104":309,"_95":310,"_154":311,"_156":-5,"_157":139,"_158":312,"_160":22,"_106":313,"_100":314,"_164":276,"_166":315,"_167":22,"_168":-5,"_169":316,"_98":317},"8ce1da98-487a-11f0-acd2-76b3cceeab13","README.md","fa619964-3817-11f0-972c-9e149126039e",128,["D",1749835163518],14,"# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external services via Pipedream Connect.\n\n## Pipedream Actions\n\nFor example, send a Slack or Discord message, create a Linear ticket, or update a row in Google Sheets.\n\n1. Select the app (Slack, Discord, Linear, Google, Sheets, 2k+ others)\n2. Select \"Action\" type\n3. Select which action (\"Send a message\", \"Make a ticket\", etc)\n4. Connfigure the action's parameters\n5. Test-run the action\n6. Copy the code provided to trigger that action from any Val Town server-side code\n - TODO: build proxy\n - TODO: write sdk\n - TODO: provide copyable code\n - Maybe TODO: create a database of actions that were performed for debugging?\n\n## Pipedream Triggers\n\n- TODO: list existing triggers\n- TODO: list trigger & endpoint\n- TODO: Let triggers be updated\n- TODO: Let trigger be deleted\n- TODO: Help users connect trigger to val more directly than copying endpoint (via val town sdk)\n\n## Connected Apps\n\n- TODO: put these on their own page\n\n## Custom OAuth clients\n\n- Docs: 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\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.",[],[310],"files",[151,171,182,194,205,212,219,229,238,248,258,269,280,290,297,308],"counts",{"_322":32,"_323":225,"_324":32,"_325":244},"pulls","branches","forks","envVars","contents",[],{"_104":270,"_95":271,"_154":272,"_156":208,"_157":139,"_158":273,"_160":22,"_106":329,"_100":275,"_164":276,"_166":277,"_167":22,"_168":-5,"_98":330},["D",1748033608415],[207,271],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":339,"_149":344,"_318":393,"_276":394,"_326":397,"_398":-5,"_399":22,"_400":-5,"_401":-5,"_402":-5,"_403":404},{"_104":105,"_95":96,"_106":340,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":341,"_133":342,"_136":343,"_148":22},["D",1747682234550],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[345,357,384,390],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":346,"_98":356},[347,350,353],{"_104":172,"_95":173,"_154":174,"_156":155,"_157":139,"_158":175,"_160":22,"_106":176,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_169":348,"_98":349},[],[153,173],{"_104":183,"_95":184,"_154":185,"_156":155,"_157":139,"_158":186,"_160":22,"_106":187,"_100":188,"_164":189,"_166":190,"_167":22,"_168":191,"_169":351,"_98":352},[],[153,184],{"_104":195,"_95":196,"_154":197,"_156":155,"_157":139,"_158":198,"_160":22,"_106":199,"_100":200,"_164":178,"_166":201,"_167":22,"_168":-5,"_169":354,"_98":355},[],[153,196],[153],{"_104":206,"_95":207,"_154":208,"_156":-5,"_157":139,"_158":209,"_160":161,"_106":210,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":358,"_98":383},[359,377,380],{"_104":213,"_95":214,"_154":215,"_156":208,"_157":139,"_158":216,"_160":161,"_106":217,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":360,"_98":376},[361,364,367,370,373],{"_104":220,"_95":221,"_154":222,"_156":215,"_157":139,"_158":223,"_160":22,"_106":224,"_100":225,"_164":178,"_166":226,"_167":22,"_168":-5,"_169":362,"_98":363},[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":233,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_169":365,"_98":366},[],[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":243,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_169":368,"_98":369},[],[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":253,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_169":371,"_98":372},[],[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":263,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_169":374,"_98":375},[],[207,214,260],[207,214],{"_104":270,"_95":271,"_154":272,"_156":208,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":276,"_166":277,"_167":22,"_168":-5,"_169":378,"_98":379},[],[207,271],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":216,"_164":178,"_166":286,"_167":22,"_168":-5,"_169":381,"_98":382},[],[207,282],[207],{"_104":291,"_95":292,"_154":293,"_156":-5,"_157":139,"_158":294,"_160":161,"_106":295,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":385,"_98":389},[386],{"_104":298,"_95":299,"_154":300,"_156":293,"_157":139,"_158":301,"_160":22,"_106":302,"_100":303,"_164":178,"_166":304,"_167":22,"_168":-5,"_169":387,"_98":388},[],[292,299],[292],{"_104":309,"_95":310,"_154":311,"_156":-5,"_157":139,"_158":312,"_160":22,"_106":313,"_100":314,"_164":276,"_166":315,"_167":22,"_168":-5,"_169":391,"_98":392},[],[310],[345,347,350,353,357,359,361,364,367,370,373,377,380,384,386,390],{"_104":270,"_157":139,"_154":272,"_95":271,"_166":277,"_164":276,"_100":275,"_156":208,"_106":395,"_158":273,"_168":-5,"_98":396},["D",1748033608415],[207,271],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]