\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

History · setup-page.tsx