[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_112":113,"_114":115},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","nbbaier","name","townie-slackbot","path","views/setup-page.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":58,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_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":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/nbbaier/townie-slackbot/code/views/setup-page.tsx","extension","id","963ce6b6-2069-40bc-91fb-8b1a3f74f6a5","setup-page.tsx","fileId","01a026ee-4ccc-72a8-897e-a0a1bea66554","parentId","01a026ee-4ccc-72a8-897e-a4bf0375a21e","branchId","c98fe62e-e4a5-4985-a211-8127f69af2d1","branchVersion",1,"latest",true,"createdAt",["D",1787359546508],"version",0,"fileType","script","content","/** @jsxImportSource npm:hono@4.12.0/jsx */\nimport {\n BODY_TEXT,\n BUTTON,\n CARD,\n CODE,\n INPUT,\n LABEL,\n Layout,\n LINK,\n} from \"./layout.tsx\";\nimport { CREATE_APP_PATH } from \"../lib/slack-manifest.ts\";\nimport { VAL_URL } from \"../lib/val-links.ts\";\nimport type { ConfirmResult } from \"../lib/confirm-townie-token.ts\";\n\n/**\n * Townie's avatar, served from the original template's endpoint. We link to it\n * directly rather than this val's own `/townie.png` handler because on a remix\n * the image isn't in the new val's blob storage, so the relative route would\n * 404 and the icon would render broken.\n */\nconst TOWNIE_IMG_URL = \"https://townie-slackbot-template.val.run/townie.png\";\n\nexport interface EnvVarStatus {\n key: string;\n set: boolean;\n}\n\nexport interface ConnectorStatus {\n key: string;\n name: string;\n connected: boolean;\n}\n\nexport interface SetupPageProps {\n /** This val's origin, used to build connector auth links. */\n origin: string;\n /** True only on the original template val, false once someone remixes it. */\n isTemplate: boolean;\n /** This val's env var editor, e.g. `https://www.val.town/x/…/environment-variables`. */\n envVarsUrl: string;\n envVars: EnvVarStatus[];\n connectors: ConnectorStatus[];\n /** Slack app name derived from the owning org, e.g. `Modem Townie`. */\n appName: string;\n /** Slack bot display name derived from the owning handle, e.g. `townie-modem`. */\n botName: string;\n /** Where the owning account creates API tokens (org or personal). */\n tokenUrl: string;\n /** Result of checking TOWNIE_TOKEN (set / prefix / /v1/me) on this load. */\n tokenStatus: ConfirmResult;\n /** How many conversations the bot has actually had (from the SQLite store). */\n threadCount: number;\n /** Whether this val's HTTP endpoints are public (probed on page load). */\n isPublic: boolean;\n /** Result of the last \"make public\" attempt, if any. */\n publicStatus?: \"ok\" | \"error\";\n}\n\nconst check = (ok: boolean) => ok ? \"✅\" : \"⬜\";\n\nconst ROW = \"text-[0.92rem] py-1\";\n\n/** The tagline on the README, linked to the same blog post. First line of the page. */\nconst TAGLINE = \"Create and edit your vals collaboratively, right from Slack.\";\n\n/** CSS for tooltips that appear immediately on hover (the browser's native\n * `title` tooltip waits ~1.5s, which feels sluggish). Elements opt in with a\n * `data-tooltip` attribute holding the text. */\nconst TOOLTIP_CSS = `\n[data-tooltip] { position: relative; }\n[data-tooltip]:hover::after {\n content: attr(data-tooltip);\n position: absolute;\n left: 50%;\n top: calc(100% + 8px);\n transform: translateX(-50%);\n z-index: 50;\n width: max-content;\n max-width: 260px;\n padding: 6px 10px;\n border-radius: 6px;\n background: #0f172a;\n color: #f8fafc;\n font-size: 0.78rem;\n font-weight: 400;\n line-height: 1.4;\n white-space: normal;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n}\n[data-tooltip]:hover::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: calc(100% + 2px);\n transform: translateX(-50%);\n z-index: 50;\n border: 5px solid transparent;\n border-bottom-color: #0f172a;\n border-top-width: 0;\n}\n`;\n\n/** A numbered step that doubles as a checkbox: ✅ done, ⬜ not yet done. */\nfunction Step(\n { num, title, done, children }: {\n num: number;\n title: string;\n done: boolean;\n children?: unknown;\n },\n) {\n return (\n

\n {done ? \"✅\" : \"⬜\"} {num}. {title}\n

\n {children}\n

\n );\n}\n\n/**\n * A colored status box: success (green), warning (amber), or error (red).\n * Shared by every step's success message and the token check / make-public\n * feedback. Success boxes render the ✅ with a small gap before the message so\n * the emoji doesn't crowd the text.\n */\nfunction Status(\n {\n tone,\n children,\n }: {\n tone: \"success\" | \"warning\" | \"error\";\n children?: unknown;\n },\n) {\n const classes = {\n success: \"border-emerald-300 bg-emerald-50 text-emerald-900\",\n warning: \"border-amber-300 bg-amber-50 text-amber-900\",\n error: \"border-red-300 bg-red-50 text-red-900\",\n }[tone];\n if (tone === \"success\") {\n return (\n \n ✅\n

{children}

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

\n {children}\n

\n );\n}\n\n/**\n * The final numbered step on each checklist: reloads `/`, which re-runs every\n * check on a fresh request, so the step's ✅/⬜ and success box update. Shown\n * only while the step is incomplete.\n */\nfunction ConfirmDone() {\n return (\n

\n Click{\" \"}\n \n here to confirm done\n \n .\n

\n );\n}\n\nfunction ConnectorRow(\n { connector, origin }: { connector: ConnectorStatus; origin: string },\n) {\n return (\n

\n {check(connector.connected)} {connector.name}\n {connector.connected ? \" — connected\" : (\n <>\n {\" — \"}\n \n Connect {connector.name} →\n \n \n )}\n

\n );\n}\n\n/**\n * An env var name that doubles as a link into this val's env var editor.\n * The `?key=` param prefills the name, so it's one click from reading about a\n * secret to pasting its value.\n */\nfunction EnvVarLink(\n { envVarsUrl, name }: { envVarsUrl: string; name: string },\n) {\n return (\n \n {name}\n \n );\n}\n\n/** The `/` landing page: one-click Slack app creation plus a live checklist. */\nexport function SetupPage(\n {\n origin,\n isTemplate,\n envVarsUrl,\n envVars,\n connectors,\n appName,\n botName,\n tokenUrl,\n tokenStatus,\n threadCount,\n isPublic,\n publicStatus,\n }: SetupPageProps,\n) {\n const allSet = envVars.every((envVar) => envVar.set);\n const hasConnectors = connectors.length > 0;\n\n const slackToken = !!envVars.find((e) => e.key === \"SLACK_BOT_TOKEN\")?.set;\n const signingSecret = !!envVars.find((e) => e.key === \"SLACK_SIGNING_SECRET\")\n ?.set;\n const townieToken = !!envVars.find((e) => e.key === \"TOWNIE_TOKEN\")?.set;\n const anthropicKey = !!envVars.find((e) => e.key === \"ANTHROPIC_API_KEY\")\n ?.set;\n\n return (\n \n

Townie Slackbot

\n \n View template\n \n

\n {TAGLINE}{\" \"}\n \n Learn more\n \n

\n\n {allSet && threadCount > 0 && (\n

\n All steps are done — your bot is live and you've already chatted with\n it. Nice!\n

\n )}\n\n \n

\n Hit remix{\" \"}\n on this template{\" \"}\n to get your own copy you can edit and set up.\n

\n {isTemplate ? (\n

\n ) : (\n You're on your own copy — ready to set up.\n )}\n \n\n \n

\n Townie needs its own Val Town API token so it can\n create and edit vals on your behalf.\n

\n Open your{\" \"}\n API tokens.\n
Name it Townie.
Set duration to a year.
Set permissions to allow all.
Copy the token.
\n Click{\" \"}\n \n here to set it as TOWNIE_TOKEN\n \n .\n

}\n

\n\n {/* Live result of the token check, run on this page load. Only rendered\n for conclusive outcomes: a green box on success, error boxes on a\n bad prefix or an invalid token. Nothing when the token isn't set. */}\n {tokenStatus.status === \"ok\" && (\n \n Key looks good! It's a valid Val Town token for{\" \"}\n {tokenStatus.account}.\n \n )}\n {tokenStatus.status === \"bad-prefix\" && (\n \n ⚠️ That doesn't look like a Val Town token — they start with{\" \"}\n vtwn_. Make sure you copied it from the\n API tokens page, not something else.\n \n )}\n {tokenStatus.status === \"invalid\" && (\n \n ❌ Couldn't validate that token. Make sure you copied the whole thing\n into TOWNIE_TOKEN and it hasn't expired.\n {tokenStatus.detail && (\n

{tokenStatus.detail}

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

\n Slack posts webhooks to this val's endpoint, so it must be reachable\n by anyone. If your org defaults new vals to restricted access, flip\n it here.\n

\n {!isPublic && (\n \n )}\n {isPublic ? (\n \n This endpoint is public — Slack can reach it.\n \n ) : (\n \n ⚠️ This endpoint is restricted. Click the button above to make it\n public.\n \n )}\n {!isPublic && (\n

\n )}\n {publicStatus === \"error\" && (\n \n ❌ Couldn't make the endpoint public. Make sure TOWNIE_TOKEN is set\n and valid, then try again.\n \n )}\n \n\n \n \n

\n Click{\" \"}\n {isTemplate ? (\n \n this link to create your Slack app\n \n ) : (\n \n this link to create your Slack app\n \n )}\n
Click Next
Pick your company workspace
Click Create
Click Your app credentials
Copy Bot Token.
\n Click{\" \"}\n \n here to set it as SLACK_BOT_TOKEN\n \n .\n
(Ignore App Token. You don't need it.)
Click Go to App Settings
Copy Signing Secret.
\n Click{\" \"}\n \n here to set it as SLACK_SIGNING_SECRET\n \n .\n
\n Click{\" \"}\n \n here to download Townie's picture\n \n .{\" \"}\n \n
\n In your Slack app, go to{\" \"}\n Basic Information → Display Information and upload\n the picture as the App icon.\n

}\n

\n {slackToken && signingSecret && (\n \n Both keys are set — your Slack app is ready.\n \n )}\n \n\n \n

\n Townie uses Anthropic to power its replies. Make a\n key in the Claude console, then paste it here.\n

\n Click{\" \"}\n \n here to open the Claude Console\n \n .\n
Click Create Key.
Name it Townie.
Copy the key.
\n Click{\" \"}\n \n here to set it as ANTHROPIC_API_KEY\n \n .\n

}\n

\n {anthropicKey && (\n \n Your Anthropic key is set — Townie can reply.\n \n )}\n \n\n {/* Only shown when connectors/registry.ts has at least one registered\n service. CONNECTORS is currently empty (see the security note there),\n so this step is hidden rather than rendering an empty box. */}\n {hasConnectors && (\n \n

\n Connect external services to give Townie more superpowers. Click a\n link below to authorize via OAuth — one-time setup.\n

\n {connectors.map((connector) => (\n \n ))}\n

\n \n )}\n\n 0}>\n

\n Tag @{botName} in any channel.\n
\n Click Add them when prompted to invite the bot to\n the channel.\n

}\n

\n {threadCount > 0 && (\n \n You've had {threadCount} conversation{threadCount === 1 ? \"\" : \"s\"} so\n far.\n \n )}\n \n\n