[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_225":226,"_227":228},"routes/_app.x.$handle.$name",{"_103":102,"_37":48,"_111":93,"_32":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":30,"_126":127,"_128":62,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":30},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","79f8adb4-bb66-44b4-a8d5-841d31da0e86","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","207d4342-3514-11f1-8436-42b51c65c3df","name","fileType","content","# 🔀 Remixable Integration Template Demo\n\n**A tour of the pattern**: how a startup can ship a Val Town template that bridges their product with a user's GitHub repos.\n\n> ⚠️ This is a **demo with mock data** — no real API calls are made. It shows the architecture, UX flow, and code patterns that a real integration would use.\n\n## The Idea\n\nA startup (\"AcmeStartup\") wants users to be able to push events from their product to GitHub (issues, PRs, file syncs, etc). Instead of building a full GitHub integration into their backend, they ship a **remixable Val Town template**.\n\nThe user remixes it, adds their tokens, and the val acts as a personal bridge between the two services.\n\n## Architecture\n\n```mermaid\nsequenceDiagram\n participant User\n participant AcmeStartup\n participant ValTown as This Val (user's remix)\n participant GitHub\n\n User->>ValTown: 1. Remix template\n User->>ValTown: 2. Add GITHUB_TOKEN env var\n User->>ValTown: 3. Add STARTUP_API_TOKEN env var\n User->>AcmeStartup: 4. Set webhook URL → val endpoint\n\n Note over AcmeStartup,GitHub: Later, when an event happens...\n\n AcmeStartup->>ValTown: POST /api/webhook (event payload)\n ValTown->>ValTown: Verify webhook signature\n ValTown->>AcmeStartup: GET /api/events/:id (full details)\n ValTown->>GitHub: POST /repos/:owner/:repo/issues\n ValTown->>AcmeStartup: PATCH /events/:id/mark-synced\n ValTown->>AcmeStartup: 200 OK { synced: true }\n```\n\n## Why This Pattern Works\n\n| For the Startup | For the User |\n|---|---|\n| No GitHub integration to build/maintain | Full control over the code |\n| No user tokens to store | Can customize behavior, add filters |\n| Ship a template, not infrastructure | Tokens stay in their own account |\n| Users self-serve setup | Can inspect and audit everything |\n\n## Files\n\n- `index.ts` — Hono HTTP backend with mock API routes\n- `frontend/index.html` — Shell HTML\n- `frontend/index.tsx` — React app with 3 tabs: Demo, Architecture, How It Works\n- `frontend/style.css` — Dark theme GitHub-inspired styles\n\n## Try It\n\nVisit the live demo and click through the three tabs. Hit \"Push to GitHub\" to see the step-by-step API calls that would happen in production.\n","createdAt",["D",1775849598571],"branchVersion","branchId","1ae9cc44-3513-11f1-9d9f-42b51c65c3df","id","1ae8d5c8-3513-11f1-9d9f-42b51c65c3df","remixable-integration-demo",["D",1775849159730],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Demo: remixable template for startup + GitHub integrations","imageUrl","692ed020-0d91-11f0-a027-a973a7805c27","pinnedFileId","c5944912-3513-11f1-8b46-42b51c65c3df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9c7a30de-d50c-484d-8048-00c4d2857bea","tursoName","1ae8d5c8351311f19d9f42b51c65c3df","tursoHostname","1ae8d5c8351311f19d9f42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789509672838],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_110":106},"org",{"_103":102,"_104":-5,"_105":106,"_19":58,"_107":108,"_109":30},"branch",{"_13":92,"_37":93,"_46":45,"_94":47,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":48,"_101":102},"isOwned",12,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","sahar","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydjJ5emk0MWJLd3hWMW1iWHZSOVFGdnBiRjYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_46":47,"_37":48,"_41":220,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":221,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":222,"_87":223,"_89":224,"_91":30},"tree",[176,180,181,182],"files",[176,177,178,179,180,181,182],"counts",{"_166":66,"_167":144,"_168":66,"_169":170,"_171":172},"contents",[133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_46":159,"_37":160,"_35":161,"_140":-5,"_44":45,"_43":162,"_142":62,"_41":163,"_13":66,"_38":164,"_39":-5,"_29":30,"_147":-5,"_32":165},{"_46":156,"_37":33,"_35":36,"_140":-5,"_44":45,"_43":14,"_142":62,"_41":157,"_13":66,"_38":26,"_39":40,"_29":30,"_147":-5,"_32":158},{"_46":149,"_37":150,"_35":60,"_140":-5,"_44":45,"_43":151,"_142":30,"_41":152,"_13":66,"_38":153,"_39":154,"_29":30,"_147":-5,"_32":155},{"_46":137,"_37":138,"_35":139,"_140":-5,"_44":45,"_43":141,"_142":62,"_41":143,"_13":144,"_38":145,"_39":146,"_29":30,"_147":-5,"_32":148},"b6d57ac2-3513-11f1-b978-42b51c65c3df","main.ts","1aecfe46-3513-11f1-9d9f-42b51c65c3df","parentId",3,"latest",["D",1775849421295],1,"script","// This file is intentionally left as a placeholder.\n// The HTTP entrypoint is index.ts.\n","label",[138],"c5944868-3513-11f1-8b46-42b51c65c3df","index.ts",4,["D",1775849446058],"http","/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ──────────────────────────────────────────────────\n// MOCK DATA — In a real template, these would be live\n// ──────────────────────────────────────────────────\nconst MOCK_GITHUB_USER = {\n login: \"octocat\",\n avatar_url: \"https://avatars.githubusercontent.com/u/583231?v=4\",\n name: \"The Octocat\",\n repos: [\"my-cool-project\", \"startup-integration\", \"hello-world\"],\n};\n\nconst MOCK_STARTUP_USER = {\n id: \"usr_abc123\",\n email: \"octocat@example.com\",\n plan: \"pro\",\n workspace: \"Octocat's Workspace\",\n};\n\nconst DEMO_EVENTS = [\n {\n id: 1,\n type: \"issue_created\",\n title: \"Fix auth redirect loop\",\n description: \"Users report being stuck in a redirect loop after OAuth\",\n repo: \"my-cool-project\",\n status: \"pending\",\n },\n {\n id: 2,\n type: \"deploy_triggered\",\n title: \"Deploy v2.3.1 to production\",\n description: \"Auto-deploy triggered by merged PR #142\",\n repo: \"startup-integration\",\n status: \"pending\",\n },\n {\n id: 3,\n type: \"file_sync\",\n title: \"Sync config.yaml to repo\",\n description: \"Push latest config from startup dashboard to GitHub\",\n repo: \"my-cool-project\",\n status: \"pending\",\n },\n];\n\n// ──────────────────────────────────────────────────\n// API ROUTES\n// ──────────────────────────────────────────────────\n\n// Auth status (mocked)\napp.get(\"/api/auth/status\", (c) => {\n return c.json({\n github: {\n connected: true,\n user: MOCK_GITHUB_USER,\n note: \"🎭 DEMO: In production, this uses GitHub OAuth to get a real token\",\n },\n startup: {\n connected: true,\n user: MOCK_STARTUP_USER,\n note: \"🎭 DEMO: In production, user provides their API key or goes through startup's OAuth\",\n },\n });\n});\n\n// List pending actions from the startup\napp.get(\"/api/events\", (c) => {\n return c.json({\n events: DEMO_EVENTS,\n note: \"🎭 DEMO: These would come from the startup's API using the stored auth token\",\n });\n});\n\n// \"Push to GitHub\" — the core action\napp.post(\"/api/push/:eventId\", async (c) => {\n const eventId = parseInt(c.req.param(\"eventId\"));\n const event = DEMO_EVENTS.find((e) => e.id === eventId);\n\n if (!event) return c.json({ error: \"Event not found\" }, 404);\n\n // In production, this is where the magic happens:\n // 1. Use startup API token to fetch full event details\n // 2. Use GitHub token to create issue/commit/PR/etc.\n // 3. Mark event as processed in startup's API\n\n return c.json({\n success: true,\n message: `✅ Would push \"${event.title}\" to github.com/${MOCK_GITHUB_USER.login}/${event.repo}`,\n whatWouldHappen: {\n step1: `GET startup-api.com/events/${eventId} (using STARTUP_API_TOKEN)`,\n step2: `POST api.github.com/repos/${MOCK_GITHUB_USER.login}/${event.repo}/issues (using GitHub OAuth token)`,\n step3: `PATCH startup-api.com/events/${eventId}/mark-synced (using STARTUP_API_TOKEN)`,\n },\n note: \"🎭 DEMO: No actual API calls were made. In production, this creates real GitHub issues/PRs/commits.\",\n });\n});\n\n// Architecture diagram data\napp.get(\"/api/architecture\", (c) => {\n return c.json({\n flow: [\n \"1. User remixes this template on Val Town\",\n \"2. User connects GitHub (OAuth → stores token in Val Town env vars)\",\n \"3. User adds their Startup API key (env var: STARTUP_API_TOKEN)\",\n \"4. Startup product has a 'Sync to GitHub' button → hits this val's webhook\",\n \"5. Val uses both tokens to bridge the two services\",\n \"6. GitHub repo gets updated (issues, PRs, files, etc.)\",\n ],\n envVarsNeeded: [\n { key: \"GITHUB_CLIENT_ID\", description: \"OAuth App client ID (provided by startup)\" },\n { key: \"GITHUB_CLIENT_SECRET\", description: \"OAuth App client secret (provided by startup)\" },\n { key: \"STARTUP_API_TOKEN\", description: \"User's API token from the startup product\" },\n ],\n });\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ──────────────────────────────────────────────────\n// STATIC FILES\n// ──────────────────────────────────────────────────\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\n// Serve the frontend\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;\n",[150],"207d42a2-3514-11f1-8436-42b51c65c3df",["D",1775849598571],[33],"b4737c66-3513-11f1-bc2f-42b51c65c3df","frontend","b4737d56-3513-11f1-bc2f-42b51c65c3df",2,["D",1775849417321],"directory",[160],"pulls","branches","forks","envVars",{"_173":66,"_175":66},"connections",{"_173":66,"_174":66},"count","unfilledCount","emptyCount",{"_46":159,"_37":160,"_35":161,"_140":-5,"_44":45,"_43":162,"_142":62,"_41":217,"_13":66,"_38":164,"_39":-5,"_29":30,"_147":-5,"_184":218,"_32":219},{"_46":209,"_37":210,"_35":211,"_140":161,"_44":45,"_43":212,"_142":30,"_41":213,"_13":66,"_38":26,"_39":214,"_29":30,"_147":-5,"_184":215,"_32":216},{"_46":201,"_37":202,"_35":203,"_140":161,"_44":45,"_43":204,"_142":30,"_41":205,"_13":66,"_38":26,"_39":206,"_29":30,"_147":-5,"_184":207,"_32":208},{"_46":193,"_37":194,"_35":195,"_140":161,"_44":45,"_43":196,"_142":62,"_41":197,"_13":66,"_38":26,"_39":198,"_29":30,"_147":-5,"_184":199,"_32":200},{"_46":156,"_37":33,"_35":36,"_140":-5,"_44":45,"_43":14,"_142":62,"_41":190,"_13":66,"_38":26,"_39":40,"_29":30,"_147":-5,"_184":191,"_32":192},{"_46":149,"_37":150,"_35":60,"_140":-5,"_44":45,"_43":151,"_142":30,"_41":187,"_13":66,"_38":153,"_39":154,"_29":30,"_147":-5,"_184":188,"_32":189},{"_46":137,"_37":138,"_35":139,"_140":-5,"_44":45,"_43":141,"_142":62,"_41":183,"_13":144,"_38":145,"_39":146,"_29":30,"_147":-5,"_184":185,"_32":186},["D",1775849421295],"children",[],[138],["D",1775849446058],[],[150],["D",1775849598571],[],[33],"de5e1004-3513-11f1-8436-42b51c65c3df","style.css","de5e10ae-3513-11f1-8436-42b51c65c3df",6,["D",1775849487646],":root {\n --bg: #0d1117;\n --surface: #161b22;\n --surface-raised: #1c2129;\n --border: #30363d;\n --border-active: #58a6ff;\n --text: #e6edf3;\n --text-muted: #8b949e;\n --accent: #58a6ff;\n --accent-hover: #79c0ff;\n --green: #3fb950;\n --green-bg: rgba(63, 185, 80, 0.1);\n --orange: #d29922;\n --orange-bg: rgba(210, 153, 34, 0.1);\n --purple: #bc8cff;\n --purple-bg: rgba(188, 140, 255, 0.1);\n --red: #f85149;\n --radius: 8px;\n --radius-lg: 12px;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n min-height: 100vh;\n}\n\n.app {\n max-width: 960px;\n margin: 0 auto;\n padding: 2rem 1.5rem;\n}\n\n/* Header */\n.header {\n text-align: center;\n margin-bottom: 2.5rem;\n padding-bottom: 2rem;\n border-bottom: 1px solid var(--border);\n}\n\n.header h1 {\n font-size: 1.8rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n background: linear-gradient(135deg, var(--accent), var(--purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.header p {\n color: var(--text-muted);\n font-size: 1rem;\n}\n\n.demo-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n background: var(--orange-bg);\n color: var(--orange);\n padding: 0.3rem 0.8rem;\n border-radius: 999px;\n font-size: 0.8rem;\n font-weight: 600;\n margin-top: 1rem;\n border: 1px solid rgba(210, 153, 34, 0.3);\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--border);\n margin-bottom: 2rem;\n overflow-x: auto;\n}\n\n.tab {\n padding: 0.75rem 1.25rem;\n background: none;\n border: none;\n color: var(--text-muted);\n font-size: 0.9rem;\n cursor: pointer;\n border-bottom: 2px solid transparent;\n white-space: nowrap;\n transition: all 0.15s;\n font-family: inherit;\n}\n\n.tab:hover {\n color: var(--text);\n}\n\n.tab.active {\n color: var(--accent);\n border-bottom-color: var(--accent);\n}\n\n/* Cards */\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 1.5rem;\n margin-bottom: 1.25rem;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 1rem;\n}\n\n.card-header h3 {\n font-size: 1rem;\n font-weight: 600;\n}\n\n.card-header .icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1rem;\n flex-shrink: 0;\n}\n\n.icon-github { background: #fff; color: #000; }\n.icon-startup { background: var(--purple-bg); color: var(--purple); }\n.icon-connected { background: var(--green-bg); color: var(--green); }\n\n/* Connection status */\n.connection-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n background: var(--surface-raised);\n border-radius: var(--radius);\n margin-bottom: 0.5rem;\n}\n\n.connection-info {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.connection-info img {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n}\n\n.connection-info .name {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n.connection-info .detail {\n color: var(--text-muted);\n font-size: 0.8rem;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.25rem 0.6rem;\n border-radius: 999px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.status-connected {\n background: var(--green-bg);\n color: var(--green);\n}\n\n/* Events */\n.event-card {\n background: var(--surface-raised);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1rem 1.25rem;\n margin-bottom: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.event-info { flex: 1; }\n\n.event-type {\n font-size: 0.7rem;\n text-transform: uppercase;\n font-weight: 700;\n letter-spacing: 0.05em;\n color: var(--purple);\n margin-bottom: 0.2rem;\n}\n\n.event-title {\n font-weight: 600;\n font-size: 0.95rem;\n margin-bottom: 0.2rem;\n}\n\n.event-desc {\n color: var(--text-muted);\n font-size: 0.8rem;\n}\n\n.event-repo {\n color: var(--accent);\n font-size: 0.8rem;\n font-family: 'SFMono-Regular', Consolas, monospace;\n}\n\n.push-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n padding: 0.5rem 1rem;\n background: var(--green);\n color: #000;\n border: none;\n border-radius: var(--radius);\n font-size: 0.85rem;\n font-weight: 600;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.15s;\n font-family: inherit;\n}\n\n.push-btn:hover {\n filter: brightness(1.1);\n transform: translateY(-1px);\n}\n\n.push-btn:disabled {\n opacity: 0.5;\n cursor: default;\n transform: none;\n}\n\n.push-btn.success {\n background: var(--surface);\n color: var(--green);\n border: 1px solid var(--green);\n}\n\n/* Response modal */\n.response-card {\n background: var(--surface);\n border: 1px solid var(--green);\n border-radius: var(--radius-lg);\n padding: 1.25rem;\n margin-top: 0.75rem;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.response-card h4 {\n color: var(--green);\n font-size: 0.9rem;\n margin-bottom: 0.75rem;\n}\n\n.step {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n padding: 0.5rem 0;\n}\n\n.step-num {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: #000;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.7rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-top: 0.1rem;\n}\n\n.step-text {\n font-family: 'SFMono-Regular', Consolas, monospace;\n font-size: 0.8rem;\n color: var(--text-muted);\n word-break: break-all;\n}\n\n/* Architecture */\n.arch-flow {\n position: relative;\n padding-left: 2rem;\n}\n\n.arch-step {\n position: relative;\n padding: 0.75rem 0 0.75rem 1.25rem;\n border-left: 2px solid var(--border);\n}\n\n.arch-step:last-child {\n border-left-color: transparent;\n}\n\n.arch-step::before {\n content: '';\n position: absolute;\n left: -7px;\n top: 1rem;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--accent);\n}\n\n.arch-step .step-label {\n font-weight: 600;\n font-size: 0.9rem;\n margin-bottom: 0.2rem;\n}\n\n.arch-step .step-detail {\n color: var(--text-muted);\n font-size: 0.85rem;\n}\n\n/* Code block */\n.code-block {\n background: #0d1117;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1rem 1.25rem;\n font-family: 'SFMono-Regular', Consolas, monospace;\n font-size: 0.8rem;\n overflow-x: auto;\n line-height: 1.8;\n margin: 1rem 0;\n}\n\n.code-comment { color: #8b949e; }\n.code-keyword { color: #ff7b72; }\n.code-string { color: #a5d6ff; }\n.code-fn { color: #d2a8ff; }\n\n/* Env var table */\n.env-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 1rem;\n}\n\n.env-table th, .env-table td {\n text-align: left;\n padding: 0.6rem 0.75rem;\n border-bottom: 1px solid var(--border);\n font-size: 0.85rem;\n}\n\n.env-table th {\n color: var(--text-muted);\n font-weight: 600;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.env-table code {\n background: var(--surface-raised);\n padding: 0.15rem 0.4rem;\n border-radius: 4px;\n font-size: 0.8rem;\n color: var(--accent);\n}\n\n/* Footer */\n.footer {\n margin-top: 3rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n text-align: center;\n color: var(--text-muted);\n font-size: 0.85rem;\n}\n\n.footer a {\n color: var(--accent);\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n/* Diagram */\n.diagram {\n background: var(--surface-raised);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 2rem;\n margin: 1.5rem 0;\n text-align: center;\n font-family: 'SFMono-Regular', Consolas, monospace;\n font-size: 0.85rem;\n line-height: 2;\n overflow-x: auto;\n white-space: pre;\n}\n\n.diagram .box {\n display: inline-block;\n border: 2px solid var(--border);\n border-radius: var(--radius);\n padding: 0.5rem 1rem;\n margin: 0.25rem;\n}\n\n.diagram .box-github { border-color: #fff; }\n.diagram .box-val { border-color: var(--accent); }\n.diagram .box-startup { border-color: var(--purple); }\n\n/* Note banner */\n.note {\n background: rgba(88, 166, 255, 0.08);\n border: 1px solid rgba(88, 166, 255, 0.2);\n border-radius: var(--radius);\n padding: 0.75rem 1rem;\n font-size: 0.85rem;\n color: var(--accent);\n margin: 1rem 0;\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .event-card {\n flex-direction: column;\n align-items: flex-start;\n }\n .push-btn {\n align-self: flex-end;\n }\n}\n",[],[160,194],"0e5a093e-3514-11f1-8857-42b51c65c3df","index.tsx","0e5a0a60-3514-11f1-8857-42b51c65c3df",7,["D",1775849568150],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ntype Tab = \"demo\" | \"architecture\" | \"code\";\n\ninterface Event {\n id: number;\n type: string;\n title: string;\n description: string;\n repo: string;\n status: string;\n}\n\ninterface PushResult {\n success: boolean;\n message: string;\n whatWouldHappen: Record;\n note: string;\n}\n\nfunction App() {\n const [tab, setTab] = useState(\"demo\");\n const [authStatus, setAuthStatus] = useState(null);\n const [events, setEvents] = useState([]);\n const [pushResults, setPushResults] = useState>({});\n const [pushing, setPushing] = useState>({});\n\n useEffect(() => {\n fetch(\"/api/auth/status\").then((r) => r.json()).then(setAuthStatus);\n fetch(\"/api/events\").then((r) => r.json()).then((d) => setEvents(d.events));\n }, []);\n\n const handlePush = async (eventId: number) => {\n setPushing((p) => ({ ...p, [eventId]: true }));\n const res = await fetch(`/api/push/${eventId}`, { method: \"POST\" });\n const data = await res.json();\n setPushResults((r) => ({ ...r, [eventId]: data }));\n setPushing((p) => ({ ...p, [eventId]: false }));\n };\n\n return (\n

\n \n Remixable Integration Template\n

How a startup can ship a Val Town template that connects their product to GitHub

\n \n Interactive Demo — No real API calls\n

\n\n

\n \n \n \n

\n\n {tab === \"demo\" && }\n {tab === \"architecture\" && }\n {tab === \"code\" && }\n\n \n

\n );\n}\n\nfunction DemoTab({ authStatus, events, pushResults, pushing, onPush }: {\n authStatus: any;\n events: Event[];\n pushResults: Record;\n pushing: Record;\n onPush: (id: number) => void;\n}) {\n return (\n <>\n

\n \n \n This is a simulated demo. In production, the user would connect real accounts.\n Click \"Push to GitHub\" to see what would happen.\n \n

\n\n {/* Connections */}\n

Connected Accounts

\n\n {authStatus && (\n <>\n

\n $\"avatar\"$ \n

{authStatus.github.user.login}

{authStatus.github.user.repos.length} repos accessible

\n \n Connected\n \n

\n\n

\n \n

AcmeStartup

{authStatus.startup.user.workspace} · {authStatus.startup.user.plan} plan

\n \n Connected\n \n

\n \n )}\n

\n\n {/* Events */}\n

Pending Actions from AcmeStartup

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

\n {event.type === \"issue_created\" && <> Issue}\n {event.type === \"deploy_triggered\" && <> Deploy}\n {event.type === \"file_sync\" && <> File Sync}\n

{event.title}

{event.description}

\n \n octocat/{event.repo}\n

\n onPush(event.id)}\n disabled={pushing[event.id] || !!pushResults[event.id]}\n >\n {pushing[event.id]\n ? <> Pushing...\n : pushResults[event.id]\n ? <> Pushed\n : <> Push to GitHub}\n \n

\n\n {pushResults[event.id] && (\n

{pushResults[event.id].message}

\n Here's what would happen with real API tokens:\n

\n {Object.entries(pushResults[event.id].whatWouldHappen).map(([key, val]) => (\n

{key.replace(\"step\", \"\")}

{val}

\n ))}\n

\n )}\n

\n ))}\n

\n \n );\n}\n\nfunction ArchitectureTab() {\n return (\n <>\n

\n \n

How the Pieces Fit Together

\n\n

{\n`┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐\n│ │ │ │ │ │\n│ AcmeStartup │────────▶│ This Val Town │────────▶│ GitHub API │\n│ (Product UI) │ webhook │ Template │ OAuth │ (User's Repos) │\n│ │ │ │ token │ │\n└─────────────────┘ └──────────────────┘ └─────────────────┘\n │\n User clicks \"Sync\" Uses BOTH tokens:\n in AcmeStartup UI • STARTUP_API_TOKEN → read event data\n • GITHUB_TOKEN → create issues/PRs/commits`\n }

\n\n

\n \n

User Journey

\n\n

\n {[\n { label: \"1. Remix the Template\", detail: \"User clicks \\\"Use this template\\\" from the startup's docs. Gets their own copy on Val Town.\" },\n { label: \"2. Connect GitHub\", detail: \"OAuth flow grants the val a token to act on the user's GitHub repos. Token stored as env var.\" },\n { label: \"3. Add Startup API Key\", detail: \"User grabs their API key from AcmeStartup's dashboard, pastes it as an env var.\" },\n { label: \"4. Configure Webhook\", detail: \"User copies this val's endpoint URL into AcmeStartup's webhook settings.\" },\n { label: \"5. It Just Works ✨\", detail: \"When events happen in AcmeStartup, this val bridges them to GitHub automatically.\" },\n ].map((s) => (\n

{s.label}

{s.detail}

\n ))}\n

\n\n

\n \n

Required Environment Variables

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Variable	Source	Purpose
`GITHUB_TOKEN`	GitHub OAuth flow	Create issues, PRs, commits on user's repos
`STARTUP_API_TOKEN`	AcmeStartup dashboard	Read events, mark as synced
`WEBHOOK_SECRET`	Generated at setup	Verify incoming webhooks are legit

\n \n );\n}\n\nfunction CodeTab() {\n return (\n <>\n

\n \n

Why This Pattern is Powerful

For the startup: You ship a template, not infrastructure. No need to build GitHub integration into your core product. Users remix the val and own their own integration — you just document the webhook format.

\n
\n

For the user: Full control. They can see the code, customize the behavior, add filtering logic, route different events to different repos. It's their code running in their Val Town account.

\n
\n

For everyone: Tokens stay with the user. The startup never sees the user's GitHub token. The user never gives the startup write access to their repos.

\n\n

GitHub Auth: Two Approaches

\n\n

\n Option A: GitHub OAuth App (Recommended)\n

\n The startup registers a GitHub OAuth App. Users go through the flow and the val stores the token.\n

\n // Hono route that kicks off GitHub OAuth{\"\\n\"}\n app.get(\"/auth/github\", (c) => {\"{\"}{\"\\n\"}\n {\" \"}const url = `https://github.com/login/oauth/authorize`{\"\\n\"}\n {\" \"}+ `?client_id=${\"${\"}Deno.env.get(\"GITHUB_CLIENT_ID\"){\"}\"}`{\"\\n\"}\n {\" \"}+ `&scope=repo`{\"\\n\"}\n {\" \"}return c.redirect(url);{\"\\n\"}\n {\"}\"});\n

\n\n

\n Option B: Personal Access Token (Simpler)\n

\n User generates a GitHub PAT and pastes it as an env var. Easier setup, less code.\n

\n // Just read it from env vars — user sets it up manually{\"\\n\"}\n const githubToken = Deno.env.get(\"GITHUB_TOKEN\");{\"\\n\"}\n {\"\\n\"}\n // Then use it to create an issue{\"\\n\"}\n await fetch(`https://api.github.com/repos/${\"${\"}owner{\"}\"}/${\"${\"}repo{\"}\"}/issues`, {\"{\"}{\"\\n\"}\n {\" \"}method: \"POST\",{\"\\n\"}\n {\" \"}headers: {\"{\"} Authorization: `Bearer ${\"${\"}githubToken{\"}\"}` {\"}\"},{\" \"}{\"\\n\"}\n {\" \"}body: JSON.stringify({\"{\"} title, body {\"}\"});{\"\\n\"}\n {\"}\"});\n

\n\n

The Webhook Handler (Core Logic)

\n\n

\n This is the heart of the integration. The startup's product sends a webhook when the user clicks a button, and this val bridges it to GitHub.\n

\n\n

\n // POST /api/webhook — called by AcmeStartup{\"\\n\"}\n app.post(\"/api/webhook\", async (c) => {\"{\"}{\"\\n\"}\n {\" \"}// 1. Verify the webhook signature{\"\\n\"}\n {\" \"}const sig = c.req.header(\"x-acme-signature\");{\"\\n\"}\n {\" \"}if (!verifySignature(sig, body)) return c.json({\"{\"} error: \"Invalid\" {\"}\"}, 401);{\"\\n\"}\n {\"\\n\"}\n {\" \"}// 2. Parse the event from the startup{\"\\n\"}\n {\" \"}const event = await c.req.json();{\"\\n\"}\n {\"\\n\"}\n {\" \"}// 3. Use the GitHub token to create an issue{\"\\n\"}\n {\" \"}const ghToken = Deno.env.get(\"GITHUB_TOKEN\");{\"\\n\"}\n {\" \"}await fetch(`https://api.github.com/repos/...`, {\"{\"}{\"\\n\"}\n {\" \"}method: \"POST\",{\"\\n\"}\n {\" \"}headers: {\"{\"} Authorization: `Bearer ${\"${\"}ghToken{\"}\"}` {\"}\"},{\" \"}{\"\\n\"}\n {\" \"}body: JSON.stringify({\"{\"}{\"\\n\"}\n {\" \"}title: event.title,{\"\\n\"}\n {\" \"}body: event.description,{\"\\n\"}\n {\" \"}{\"}\"});{\"\\n\"}\n {\" \"}{\"}\"});{\"\\n\"}\n {\"\\n\"}\n {\" \"}// 4. Confirm back to the startup{\"\\n\"}\n {\" \"}return c.json({\"{\"} synced: true {\"}\"});{\"\\n\"}\n {\"}\"});\n

\n\n

\n \n

What the Startup Ships

The startup publishes this as a public Val Town template. Their docs say:

Go to val.town/x/acme/github-sync and click Remix
Set your STARTUP_API_TOKEN env var (find it in Settings → API)
Set your GITHUB_TOKEN env var (create a PAT at github.com/settings/tokens)
Copy your val's endpoint URL into AcmeStartup → Settings → Webhooks
Done! Events will now sync automatically. Customize the code however you like.

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[160,202],"c86ea3a8-3513-11f1-8b46-42b51c65c3df","index.html","c86ea466-3513-11f1-8b46-42b51c65c3df",5,["D",1775849450846],"\n\n\n \n \n Remixable Integration Demo\n \n \n\n\n

\n \n\n\n",[],[160,210],["D",1775849417321],[177,178,179],[160],["D",1775849159730],["D",1789509672838],{"_103":102,"_110":106},{"_103":102,"_104":-5,"_105":106,"_19":58,"_107":108,"_109":30},{"_13":92,"_37":93,"_46":45,"_94":47,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":48,"_101":102},"ctx",{"_85":-5,"_130":258,"_259":260,"_261":262,"_263":30,"_264":30,"_265":30,"_266":62,"_267":-5,"_268":-7,"_269":-7,"_270":66,"_271":30,"_272":30,"_273":-5,"_274":30,"_275":30,"_276":30,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":93,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8