Improve Slack bot setup instructions with step-by-step guidance

Detail page and create dialog now walk users through enabling Event
Subscriptions, setting the Request URL, subscribing to bot events,
verifying OAuth scopes, and inviting the bot to a channel.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/app/src/components/workflow/widgets/input/slack-bot-create-dialog.tsx

@@ -240,23 +240,48 @@ export function SlackBotCreateDialog({
                   <Copy className="h-4 w-4" />
                 </Button>
               </div>
-              <p className="text-xs text-muted-foreground">
-                Paste this URL as the{" "}
-                <span className="font-medium">Request URL</span> under{" "}
-                <a
-                  href="https://api.slack.com/apps"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline inline-flex items-center gap-0.5"
-                >
-                  Event Subscriptions
-                  <ExternalLink className="w-2.5 h-2.5" />
-                </a>{" "}
-                in your Slack app. Subscribe to{" "}
-                <span className="font-mono text-xs">message.channels</span> and{" "}
-                <span className="font-mono text-xs">message.groups</span> bot
-                events.
-              </p>
+              <ol className="text-xs text-muted-foreground list-decimal list-inside space-y-1.5 mt-2">
+                <li>
+                  Go to{" "}
+                  <a
+                    href="https://api.slack.com/apps"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline inline-flex items-center gap-0.5"
+                  >
+                    Event Subscriptions
+                    <ExternalLink className="w-2.5 h-2.5" />
+                  </a>{" "}
+                  in your Slack app and toggle{" "}
+                  <span className="font-medium text-foreground">
+                    Enable Events
+                  </span>{" "}
+                  to On.
+                </li>
+                <li>
+                  Paste the Webhook URL above as the{" "}
+                  <span className="font-medium text-foreground">
+                    Request URL
+                  </span>
+                  . Slack will verify it automatically.
+                </li>
+                <li>
+                  Under{" "}
+                  <span className="font-medium text-foreground">
+                    Subscribe to bot events
+                  </span>
+                  , add{" "}
+                  <span className="font-mono">message.channels</span> and{" "}
+                  <span className="font-mono">message.groups</span>, then save.
+                </li>
+                <li>
+                  Invite the bot to a channel and create a workflow with a{" "}
+                  <span className="font-medium text-foreground">
+                    Receive Slack Message
+                  </span>{" "}
+                  trigger.
+                </li>
+              </ol>
             </div>
 
             <div className="flex justify-end">

apps/app/src/pages/bot-slack-detail-page.tsx

@@ -130,26 +130,63 @@ export function BotSlackDetailPage() {
               <span className="font-medium text-foreground">
                 Event Subscriptions
               </span>
-              , enable events and paste the Webhook URL above as the Request
-              URL.
+              , toggle{" "}
+              <span className="font-medium text-foreground">Enable Events</span>{" "}
+              to On, then paste the{" "}
+              <span className="font-medium text-foreground">Webhook URL</span>{" "}
+              above as the{" "}
+              <span className="font-medium text-foreground">Request URL</span>.
+              Slack will verify the URL automatically.
             </li>
             <li>
-              Subscribe to the{" "}
+              Under{" "}
               <span className="font-medium text-foreground">
+                Subscribe to bot events
+              </span>
+              , add{" "}
+              <span className="font-mono text-xs text-foreground">
                 message.channels
               </span>{" "}
-              and{" "}
-              <span className="font-medium text-foreground">
+              (public channels) and{" "}
+              <span className="font-mono text-xs text-foreground">
                 message.groups
               </span>{" "}
-              bot events.
+              (private channels), then click{" "}
+              <span className="font-medium text-foreground">Save Changes</span>.
+            </li>
+            <li>
+              Under{" "}
+              <span className="font-medium text-foreground">
+                OAuth &amp; Permissions
+              </span>
+              , verify that the{" "}
+              <span className="font-mono text-xs text-foreground">
+                channels:history
+              </span>
+              ,{" "}
+              <span className="font-mono text-xs text-foreground">
+                groups:history
+              </span>
+              , and{" "}
+              <span className="font-mono text-xs text-foreground">
+                chat:write
+              </span>{" "}
+              scopes are present. If you added new scopes, reinstall the app to
+              your workspace.
+            </li>
+            <li>
+              Invite the bot to a Slack channel by typing{" "}
+              <span className="font-mono text-xs text-foreground">
+                /invite @{slackBot.name}
+              </span>{" "}
+              in the channel.
             </li>
             <li>
-              Invite the bot to a Slack channel, then create a workflow with a{" "}
+              Create a workflow with a{" "}
               <span className="font-medium text-foreground">
                 Receive Slack Message
               </span>{" "}
-              trigger node.
+              trigger node, select this bot, and enable the workflow.
             </li>
           </ol>
         </div>