chore(ui): drop the disconnect and reconnect changelog entries

The Slack integration ships one changelog entry on the stack's first PR

prowler/changelog.d/ses-multiple-authorization-policies.fixed.md

@@ -0,0 +1 @@
+`ses_identity_not_publicly_accessible` now evaluates every SES identity authorization policy and marks mixed public Allow and Deny statements for manual review

prowler/providers/aws/services/ses/ses_identity_not_publicly_accessible/ses_identity_not_publicly_accessible.py

@@ -1,25 +1,58 @@
+from copy import deepcopy
+
 from prowler.lib.check.models import Check, Check_Report_AWS
 from prowler.providers.aws.services.iam.lib.policy import is_policy_public
 from prowler.providers.aws.services.ses.ses_client import ses_client
 
 
+def _normalize_policy_statements(policy: dict) -> dict:
+    statements = policy.get("Statement", [])
+    if isinstance(statements, dict):
+        return {**policy, "Statement": [statements]}
+    return policy
+
+
+def _has_explicit_deny(policy: dict) -> bool:
+    return any(
+        isinstance(statement, dict) and statement.get("Effect") == "Deny"
+        for statement in _normalize_policy_statements(policy).get("Statement", [])
+    )
+
+
 class ses_identity_not_publicly_accessible(Check):
-    def execute(self):
+    """Ensure SES identities are not publicly accessible through authorization policies."""
+
+    def execute(self) -> list[Check_Report_AWS]:
+        """Evaluate every authorization policy attached to each SES identity.
+
+        Returns:
+            A list of reports containing the public-access result for each identity.
+        """
         findings = []
         for identity in ses_client.email_identities.values():
-            if identity.policy is None:
+            if not identity.policies:
                 continue
             report = Check_Report_AWS(metadata=self.metadata(), resource=identity)
             report.status = "PASS"
             report.status_extended = (
                 f"SES identity {identity.name} is not publicly accessible."
             )
-            if is_policy_public(
-                identity.policy,
-                ses_client.audited_account,
-            ):
-                report.status = "FAIL"
-                report.status_extended = f"SES identity {identity.name} is publicly accessible due to its resource policy."
+            has_public_allow = any(
+                is_policy_public(
+                    _normalize_policy_statements(deepcopy(policy)),
+                    ses_client.audited_account,
+                )
+                for policy in identity.policies.values()
+            )
+            if has_public_allow:
+                if any(
+                    _has_explicit_deny(policy) for policy in identity.policies.values()
+                ):
+                    report.status = "MANUAL"
+                    report.status_extended = f"SES identity {identity.name} has public Allow and explicit Deny statements in its resource policies. Effective public access requires manual review."
+                else:
+                    report.status = "FAIL"
+                    report.status_extended = f"SES identity {identity.name} is publicly accessible due to its resource policies."
 
             findings.append(report)
 

prowler/providers/aws/services/ses/ses_service.py

@@ -1,7 +1,7 @@
 from json import loads
 from typing import Optional
 
-from pydantic.v1 import BaseModel
+from pydantic.v1 import BaseModel, Field
 
 from prowler.lib.logger import logger
 from prowler.lib.scan_filters.scan_filters import is_resource_filtered
@@ -46,8 +46,11 @@ class SES(AWSService):
                 identity_attributes = regional_client.get_email_identity(
                     EmailIdentity=identity.name
                 )
-                for _, content in identity_attributes.get("Policies", {}).items():
-                    identity.policy = loads(content)
+                identity.policies = {
+                    name: loads(content)
+                    for name, content in identity_attributes.get("Policies", {}).items()
+                }
+                identity.policy = next(reversed(identity.policies.values()), None)
                 identity.tags = identity_attributes.get("Tags", [])
                 dkim_attrs = identity_attributes.get("DkimAttributes", {}) or {}
                 identity.dkim_status = dkim_attrs.get("Status")
@@ -72,6 +75,7 @@ class Identity(BaseModel):
     region: str
     type: Optional[str]
     policy: Optional[dict] = None
+    policies: dict[str, dict] = Field(default_factory=dict)
     tags: Optional[list] = []
     dkim_status: Optional[str] = None
     dkim_signing_attributes_origin: Optional[str] = None

tests/providers/aws/services/ses/ses_identity_not_publicly_accessible/ses_identity_not_publicly_accessible_test.py

@@ -1,6 +1,8 @@
+from copy import deepcopy
 from unittest import mock
 
 import botocore
+import pytest
 from boto3 import client
 from moto import mock_aws
 
@@ -54,6 +56,113 @@ def mock_make_api_call_v2(self, operation_name, kwarg):
     return make_api_call(self, operation_name, kwarg)
 
 
+PUBLIC_ALLOW_POLICY = '{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Principal":"*","Action":"ses:SendEmail","Resource":"*"}]}'
+PRIVATE_ALLOW_POLICY = '{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Principal":{"AWS":"arn:aws:iam::123456789012:root"},"Action":"ses:SendEmail","Resource":"*"}]}'
+MATCHING_DENY_POLICY = '{"Version":"2012-10-17","Statement":[{"Effect":"Deny","Principal":"*","Action":"ses:SendEmail","Resource":"*"}]}'
+UNRELATED_DENY_POLICY = '{"Version":"2012-10-17","Statement":[{"Effect":"Deny","Principal":"*","Action":"ses:SendRawEmail","Resource":"*"}]}'
+PUBLIC_ALLOW_AND_DENY_POLICY = '{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Principal":"*","Action":"ses:SendEmail","Resource":"*"},{"Effect":"Deny","Principal":"*","Action":"ses:SendEmail","Resource":"*"}]}'
+PUBLIC_ALLOW_SINGLE_STATEMENT_POLICY = '{"Version":"2012-10-17","Statement":{"Effect":"Allow","Principal":"*","Action":"ses:SendEmail","Resource":"*"}}'
+PRIVATE_ALLOW_SINGLE_STATEMENT_POLICY = '{"Version":"2012-10-17","Statement":{"Effect":"Allow","Principal":{"AWS":"arn:aws:iam::123456789012:root"},"Action":"ses:SendEmail","Resource":"*"}}'
+MATCHING_DENY_SINGLE_STATEMENT_POLICY = '{"Version":"2012-10-17","Statement":{"Effect":"Deny","Principal":"*","Action":"ses:SendEmail","Resource":"*"}}'
+CONDITIONAL_ALLOW_SINGLE_STATEMENT_POLICY = '{"Version":"2012-10-17","Statement":{"Effect":"Allow","Principal":"*","Action":"ses:SendEmail","Resource":"*","Condition":{"StringEquals":{"AWS:SourceAccount":"123456789012"}}}}'
+
+
+def make_multiple_policies_api_mock(policies):
+    def mock_api_call(self, operation_name, kwarg):
+        if operation_name == "ListEmailIdentities":
+            return {
+                "EmailIdentities": [
+                    {
+                        "IdentityType": "DOMAIN",
+                        "IdentityName": "test-email-identity-multiple-policies",
+                    }
+                ],
+            }
+        elif operation_name == "GetEmailIdentity":
+            return {"Policies": policies, "Tags": {}}
+        return make_api_call(self, operation_name, kwarg)
+
+    return mock_api_call
+
+
+mock_make_api_call_multiple_policies = make_multiple_policies_api_mock(
+    {
+        "public-policy": PUBLIC_ALLOW_POLICY,
+        "private-policy": PRIVATE_ALLOW_POLICY,
+    }
+)
+mock_make_api_call_multiple_policies_reversed = make_multiple_policies_api_mock(
+    {
+        "private-policy": PRIVATE_ALLOW_POLICY,
+        "public-policy": PUBLIC_ALLOW_POLICY,
+    }
+)
+mock_make_api_call_public_allow_and_matching_deny = make_multiple_policies_api_mock(
+    {
+        "public-policy": PUBLIC_ALLOW_POLICY,
+        "deny-policy": MATCHING_DENY_POLICY,
+    }
+)
+mock_make_api_call_matching_deny_and_public_allow = make_multiple_policies_api_mock(
+    {
+        "deny-policy": MATCHING_DENY_POLICY,
+        "public-policy": PUBLIC_ALLOW_POLICY,
+    }
+)
+mock_make_api_call_public_allow_and_unrelated_deny = make_multiple_policies_api_mock(
+    {
+        "public-policy": PUBLIC_ALLOW_POLICY,
+        "deny-policy": UNRELATED_DENY_POLICY,
+    }
+)
+mock_make_api_call_same_policy_allow_and_deny = make_multiple_policies_api_mock(
+    {"combined-policy": PUBLIC_ALLOW_AND_DENY_POLICY}
+)
+mock_make_api_call_multiple_private_policies = make_multiple_policies_api_mock(
+    {
+        "private-policy-1": PRIVATE_ALLOW_POLICY,
+        "private-policy-2": PRIVATE_ALLOW_POLICY,
+    }
+)
+mock_make_api_call_public_single_statement = make_multiple_policies_api_mock(
+    {"public-policy": PUBLIC_ALLOW_SINGLE_STATEMENT_POLICY}
+)
+mock_make_api_call_private_single_statement = make_multiple_policies_api_mock(
+    {"private-policy": PRIVATE_ALLOW_SINGLE_STATEMENT_POLICY}
+)
+mock_make_api_call_public_and_deny_single_statements = make_multiple_policies_api_mock(
+    {
+        "public-policy": PUBLIC_ALLOW_SINGLE_STATEMENT_POLICY,
+        "deny-policy": MATCHING_DENY_SINGLE_STATEMENT_POLICY,
+    }
+)
+mock_make_api_call_conditional_single_statement = make_multiple_policies_api_mock(
+    {"conditional-policy": CONDITIONAL_ALLOW_SINGLE_STATEMENT_POLICY}
+)
+
+
+def execute_check_with_api_mock(api_call_mock):
+    with mock.patch("botocore.client.BaseClient._make_api_call", new=api_call_mock):
+        client("sesv2", region_name=AWS_REGION_EU_WEST_1)
+        aws_provider = set_mocked_aws_provider([AWS_REGION_EU_WEST_1])
+
+        with (
+            mock.patch(
+                "prowler.providers.common.provider.Provider.get_global_provider",
+                return_value=aws_provider,
+            ),
+            mock.patch(
+                "prowler.providers.aws.services.ses.ses_identity_not_publicly_accessible.ses_identity_not_publicly_accessible.ses_client",
+                new=SES(aws_provider),
+            ),
+        ):
+            from prowler.providers.aws.services.ses.ses_identity_not_publicly_accessible.ses_identity_not_publicly_accessible import (
+                ses_identity_not_publicly_accessible,
+            )
+
+            return ses_identity_not_publicly_accessible().execute()
+
+
 class Test_ses_identities_not_publicly_accessible:
     @mock_aws
     def test_no_identities(self):
@@ -114,6 +223,114 @@ class Test_ses_identities_not_publicly_accessible:
             assert result[0].resource_tags == {"tag1": "value1", "tag2": "value2"}
             assert result[0].region == AWS_REGION_EU_WEST_1
 
+    @mock_aws
+    @pytest.mark.parametrize(
+        "api_call_mock",
+        [
+            mock_make_api_call_multiple_policies,
+            mock_make_api_call_multiple_policies_reversed,
+        ],
+        ids=["public-policy-first", "public-policy-last"],
+    )
+    def test_email_identity_public_when_any_policy_is_public(self, api_call_mock):
+        result = execute_check_with_api_mock(api_call_mock)
+
+        assert len(result) == 1
+        assert result[0].status == "FAIL"
+        assert (
+            result[0].status_extended
+            == "SES identity test-email-identity-multiple-policies is publicly accessible due to its resource policies."
+        )
+
+    @mock_aws
+    @pytest.mark.parametrize(
+        "api_call_mock",
+        [
+            mock_make_api_call_public_allow_and_matching_deny,
+            mock_make_api_call_matching_deny_and_public_allow,
+            mock_make_api_call_public_allow_and_unrelated_deny,
+            mock_make_api_call_same_policy_allow_and_deny,
+        ],
+        ids=[
+            "matching-deny-last",
+            "matching-deny-first",
+            "unrelated-deny",
+            "same-policy-deny",
+        ],
+    )
+    def test_email_identity_public_allow_with_explicit_deny_is_manual(
+        self, api_call_mock
+    ):
+        result = execute_check_with_api_mock(api_call_mock)
+
+        assert len(result) == 1
+        assert result[0].status == "MANUAL"
+        assert (
+            result[0].status_extended
+            == "SES identity test-email-identity-multiple-policies has public Allow and explicit Deny statements in its resource policies. Effective public access requires manual review."
+        )
+
+    @mock_aws
+    def test_email_identity_multiple_private_policies(self):
+        result = execute_check_with_api_mock(
+            mock_make_api_call_multiple_private_policies
+        )
+
+        assert len(result) == 1
+        assert result[0].status == "PASS"
+        assert (
+            result[0].status_extended
+            == "SES identity test-email-identity-multiple-policies is not publicly accessible."
+        )
+
+    @mock_aws
+    @pytest.mark.parametrize(
+        ("api_call_mock", "expected_status"),
+        [
+            (mock_make_api_call_public_single_statement, "FAIL"),
+            (mock_make_api_call_private_single_statement, "PASS"),
+            (mock_make_api_call_public_and_deny_single_statements, "MANUAL"),
+        ],
+        ids=["public", "private", "public-with-deny"],
+    )
+    def test_email_identity_single_statement_policy(
+        self, api_call_mock, expected_status
+    ):
+        result = execute_check_with_api_mock(api_call_mock)
+
+        assert len(result) == 1
+        assert result[0].status == expected_status
+
+    @mock_aws
+    def test_check_preserves_nested_policy_condition_keys(self):
+        with mock.patch(
+            "botocore.client.BaseClient._make_api_call",
+            new=mock_make_api_call_conditional_single_statement,
+        ):
+            client("sesv2", region_name=AWS_REGION_EU_WEST_1)
+            aws_provider = set_mocked_aws_provider([AWS_REGION_EU_WEST_1])
+            ses_client = SES(aws_provider)
+            identity = next(iter(ses_client.email_identities.values()))
+            policies_before_check = deepcopy(identity.policies)
+
+            with (
+                mock.patch(
+                    "prowler.providers.common.provider.Provider.get_global_provider",
+                    return_value=aws_provider,
+                ),
+                mock.patch(
+                    "prowler.providers.aws.services.ses.ses_identity_not_publicly_accessible.ses_identity_not_publicly_accessible.ses_client",
+                    new=ses_client,
+                ),
+            ):
+                from prowler.providers.aws.services.ses.ses_identity_not_publicly_accessible.ses_identity_not_publicly_accessible import (
+                    ses_identity_not_publicly_accessible,
+                )
+
+                ses_identity_not_publicly_accessible().execute()
+
+            assert identity.policies == policies_before_check
+
     @mock_aws
     @mock.patch("botocore.client.BaseClient._make_api_call", new=mock_make_api_call_v2)
     def test_email_identity_public(self):
@@ -140,7 +357,7 @@ class Test_ses_identities_not_publicly_accessible:
             assert result[0].status == "FAIL"
             assert (
                 result[0].status_extended
-                == "SES identity test-email-identity-public is publicly accessible due to its resource policy."
+                == "SES identity test-email-identity-public is publicly accessible due to its resource policies."
             )
             assert result[0].resource_id == "test-email-identity-public"
             assert (

tests/providers/aws/services/ses/ses_service_test.py

@@ -27,6 +27,7 @@ def mock_make_api_call(self, operation_name, kwarg):
         return {
             "Policies": {
                 "policy1": '{"policy1": "value1"}',
+                "policy2": '{"policy2": "value2"}',
             },
             "Tags": {"tag1": "value1", "tag2": "value2"},
             "DkimAttributes": {
@@ -81,7 +82,11 @@ class Test_SES_Service:
         assert ses.email_identities[arn].type == "EMAIL_ADDRESS"
         assert ses.email_identities[arn].arn == arn
         assert ses.email_identities[arn].region == AWS_REGION_EU_WEST_1
-        assert ses.email_identities[arn].policy == {"policy1": "value1"}
+        assert ses.email_identities[arn].policy == {"policy2": "value2"}
+        assert ses.email_identities[arn].policies == {
+            "policy1": {"policy1": "value1"},
+            "policy2": {"policy2": "value2"},
+        }
         assert ses.email_identities[arn].tags == {"tag1": "value1", "tag2": "value2"}
         assert ses.email_identities[arn].dkim_status == "SUCCESS"
         assert ses.email_identities[arn].dkim_signing_attributes_origin == "AWS_SES"

ui/__tests__/msw/handlers/slack.fixtures.ts

@@ -0,0 +1,481 @@
+/**
+ * Fixture data for the Slack handlers. Shapes follow the API contract in
+ * `openspec/changes/add-slack-integration/design.md`.
+ */
+
+export interface SlackWorkspaceFixture {
+  teamId: string;
+  teamName: string;
+  botUserId: string;
+  /**
+   * Absent from the serialized configuration until a channel is chosen: the API
+   * omits the keys rather than sending nulls.
+   */
+  channelId?: string;
+  channelName?: string;
+}
+
+export interface SlackInstallFixture {
+  id: string;
+  /** `null` until the first connection check runs. */
+  connected: boolean | null;
+  connectionLastCheckedAt: string | null;
+  workspace: SlackWorkspaceFixture;
+}
+
+export const SLACK_EXCHANGE_OUTCOME = {
+  CREATED: "created",
+  /** Same workspace re-installed: the existing row keeps its id. */
+  REINSTALLED: "reinstalled",
+  REFUSED_STATE: "refused-state",
+  SLACK_REFUSED: "slack-refused",
+  /** A `409` named by its `code`: one workspace per tenant. */
+  DIFFERENT_WORKSPACE: "different-workspace",
+  /**
+   * The three below are `2xx`: the install happened, but the answer is
+   * unreadable, so nothing on the failure path sees them.
+   */
+  UNREADABLE_NO_CONTENT: "unreadable-no-content",
+  UNREADABLE_HTML: "unreadable-html",
+  UNREADABLE_NO_DATA: "unreadable-no-data",
+} as const;
+
+export type SlackExchangeOutcome =
+  (typeof SLACK_EXCHANGE_OUTCOME)[keyof typeof SLACK_EXCHANGE_OUTCOME];
+
+export interface SlackConnectionFixture {
+  connected: boolean;
+  error: string | null;
+}
+
+/** A channel the listing endpoint offers for the picker. */
+export interface SlackChannelFixture {
+  id: string;
+  name: string;
+  /** Private channels are listed only where `@Prowler` has been invited. */
+  isPrivate: boolean;
+}
+
+export interface SlackTestMessageFixture {
+  accepted: boolean;
+  /**
+   * Why it did not: the reason `code` would carry, or prose — the contract
+   * leaves the task result's shape open.
+   */
+  error: string | null;
+}
+
+/**
+ * A refusal as the API sends one: the machine-readable reason in `code`, human
+ * copy in `detail`, and — for a `429` — the wait in `Retry-After`.
+ */
+export interface SlackRefusalFixture {
+  status: number;
+  /** Slack's stable reason. `null` for the failures classified by status. */
+  code: string | null;
+  detail: string;
+  /** Seconds `Retry-After` asked for; only a `429` carries one. */
+  retryAfterSeconds: number | null;
+}
+
+/**
+ * What `DELETE /integrations/{id}` reports about revoking the token at Slack.
+ * Revocation is best-effort: the row goes either way, and the outcome travels in
+ * JSON:API `meta` so the UI can say when access still needs removing by hand.
+ *
+ * One boolean is the whole of it. The API sends no reason for a revocation that
+ * did not happen, so modelling one here would let a test prove copy the real
+ * deployment can never produce.
+ */
+export interface SlackRevocationFixture {
+  /** Slack confirmed the token no longer grants Prowler anything. */
+  revoked: boolean;
+}
+
+export interface SlackFixture {
+  /**
+   * The deployment has `SLACK_CLIENT_ID` / `SLACK_CLIENT_SECRET` /
+   * `SLACK_REDIRECT_URI`. Without them every Slack OAuth call answers `503`.
+   */
+  appConfigured: boolean;
+  install: SlackInstallFixture | null;
+  exchangeWorkspace: SlackWorkspaceFixture;
+  exchangeOutcome: SlackExchangeOutcome;
+  connection: SlackConnectionFixture;
+  /** The Slack OAuth calls answer `429` with a `Retry-After`. */
+  rateLimited: boolean;
+  /**
+   * The shared `GET /integrations` read answers `500`, which the UI's own
+   * helper turns into a thrown error rather than a result.
+   */
+  listServerError: boolean;
+  /** The consent-URL call answers `200` with a proxy's HTML page, not JSON. */
+  authorizeUrlUnreadable: boolean;
+  /**
+   * Both Slack OAuth calls answer `502`, the contract's status for upstream and
+   * transport failures. Distinct from `appConfigured: false`, which is a `503`.
+   */
+  oauthUpstreamError: boolean;
+  channels: SlackChannelFixture[];
+  /**
+   * Small on purpose: the default workspace spans two pages, so a UI that
+   * stopped at `data` instead of following `links.next` would lose channels.
+   */
+  channelsPageSize: number;
+  /** Slack refused the listing outright, with the reason named in `code`. */
+  channelsRefusal: SlackRefusalFixture | null;
+  /**
+   * The cursor the refusal starts at. Absent, the whole read fails; a page
+   * size serves the first page and refuses the second — the partial read.
+   */
+  channelsRefusalFromCursor?: number;
+  /**
+   * Slack refused the chosen channel when the `PATCH` validated it — the
+   * listing itself answered fine.
+   */
+  channelSaveRefusal: SlackRefusalFixture | null;
+  testMessage: SlackTestMessageFixture;
+  /** What disconnecting reports about revoking the token at Slack. */
+  revocation: SlackRevocationFixture;
+}
+
+/**
+ * A UUID, as the API's ids are: it travels in the URL of every Slack call and
+ * the actions accept no other shape.
+ */
+export const SLACK_INTEGRATION_ID = "7c9e6a1b-2d3f-4e5a-8b6c-9d0e1f2a3b4c";
+
+/** The scopes the channel picker and the posting need (design D2). */
+export const SLACK_BOT_SCOPES = [
+  "chat:write",
+  "chat:write.public",
+  "channels:read",
+  "groups:read",
+] as const;
+
+export const SLACK_REDIRECT_URI =
+  "https://cloud.prowler.com/integrations/slack/callback";
+
+/** Server-minted, single-use, bound to the tenant and user (design D5). */
+export const SLACK_OAUTH_STATE = "st-2f1c9d7a";
+export const SLACK_OAUTH_CODE = "slack-code-1f4a";
+
+export const SLACK_AUTHORIZE_URL =
+  "https://slack.com/oauth/v2/authorize" +
+  "?client_id=1234567890.0987654321" +
+  `&scope=${encodeURIComponent(SLACK_BOT_SCOPES.join(","))}` +
+  `&state=${SLACK_OAUTH_STATE}` +
+  `&redirect_uri=${encodeURIComponent(SLACK_REDIRECT_URI)}`;
+
+/**
+ * The `detail` strings the implementation sends. Human copy; the
+ * machine-readable reason travels in `code`, which is what the UI maps.
+ */
+export const SLACK_UNCONFIGURED_DETAIL =
+  "Slack integration is not configured or temporarily unavailable.";
+export const SLACK_REFUSED_STATE_DETAIL =
+  "OAuth state is invalid, expired, or already consumed.";
+export const SLACK_INVALID_CODE_DETAIL = "The Slack OAuth code is invalid.";
+export const SLACK_DIFFERENT_WORKSPACE_DETAIL =
+  "This tenant is already connected to a different Slack workspace.";
+export const SLACK_UPSTREAM_DETAIL = "Slack is temporarily unavailable.";
+/**
+ * The `code` on the contract's `502`. The UI maps no copy of its own to it, so
+ * the `detail` is what reaches the user.
+ */
+export const SLACK_UPSTREAM_ERROR_CODE = "service_unavailable";
+/**
+ * Raised as a `ValidationError({"channel_id": ...})` that still points at
+ * `/data` rather than at the attribute.
+ */
+export const SLACK_NO_CHANNEL_DETAIL =
+  "This Slack integration has no channel configured.";
+export const SLACK_RATE_LIMITED_DETAIL =
+  "Slack is rate limiting requests from Prowler.";
+/**
+ * What a `500` from the shared `GET /integrations` read carries. Nothing here
+ * is for the user to act on, so the UI answers a server error in its own words.
+ */
+export const INTEGRATIONS_SERVER_ERROR_DETAIL = "A server error occurred.";
+export const SLACK_MISSING_SCOPE_DETAIL =
+  "Slack refused the request: missing_scope.";
+/**
+ * The API wording a dead grant arrives with. It names the raw reason, the same
+ * way the missing-scope one does — which is what lets a test tell "the UI read
+ * `code` and used its own copy" apart from "the UI echoed `detail`".
+ */
+export const SLACK_TOKEN_EXPIRED_DETAIL =
+  "Slack refused the request: token_expired.";
+/**
+ * The same sentence for "it is gone" and "the app was removed from it": only
+ * `code` separates them, which is why a client must read `code`.
+ */
+export const SLACK_UNKNOWN_CHANNEL_DETAIL =
+  "That channel is not one Prowler can post to.";
+export const SLACK_NO_DEFAULT_CHANNEL_DETAIL =
+  "No default channel is recorded on this integration.";
+/** A task result that reports the refusal as prose instead of as a reason. */
+export const SLACK_TEST_MESSAGE_REFUSED_DETAIL =
+  "Slack rejected the message: the channel is archived.";
+
+/**
+ * A `200` challenge page from a proxy or WAF that took the call instead of the
+ * API. V8 truncates the parser message for this body before the word `html`, so
+ * the UI's own detection (`HTML_ERROR_PATTERN`) cannot recognise it either.
+ */
+export const PROXY_CHALLENGE_PAGE = [
+  "<!DOCTYPE html>",
+  "<html><head><title>Attention Required</title></head>",
+  "<body><h1>Checking your browser before you proceed.</h1></body></html>",
+].join("\n");
+
+/**
+ * The `code` values the refusals below are named by. Wire values, spelled out
+ * rather than imported from the UI's own mapping: a rename on our side must
+ * fail these tests, not quietly agree with itself.
+ */
+export const SLACK_WORKSPACE_CONFLICT_CODE = "slack_workspace_conflict";
+export const SLACK_MISSING_SCOPE_CODE = "missing_scope";
+export const SLACK_CHANNEL_NOT_FOUND_CODE = "channel_not_found";
+export const SLACK_NOT_IN_CHANNEL_CODE = "not_in_channel";
+/**
+ * A reason Slack really sends that the UI's mapping does not cover — the set is
+ * open-ended, so having no copy for one is the ordinary case.
+ */
+export const SLACK_UNMAPPED_REASON_CODE = "is_archived";
+/**
+ * The two dead-grant codes the tests drive with, out of the four the contract
+ * lists. Whichever call surfaces one, the integration is disconnected and the
+ * only way out is connecting the workspace again (contract, Cross-cutting).
+ */
+export const SLACK_TOKEN_REVOKED_CODE = "token_revoked";
+export const SLACK_TOKEN_EXPIRED_CODE = "token_expired";
+
+export const SLACK_RETRY_AFTER_SECONDS = 30;
+
+/** The install never granted a scope the call needs: actionable, so a `400`. */
+export const SLACK_MISSING_SCOPE_REFUSAL: SlackRefusalFixture = {
+  status: 400,
+  code: SLACK_MISSING_SCOPE_CODE,
+  detail: SLACK_MISSING_SCOPE_DETAIL,
+  retryAfterSeconds: null,
+};
+
+/**
+ * Where this really happens is the channel listing: `conversations.list` is
+ * tier 2 and paginated.
+ */
+export const SLACK_RATE_LIMITED_REFUSAL: SlackRefusalFixture = {
+  status: 429,
+  code: null,
+  detail: SLACK_RATE_LIMITED_DETAIL,
+  retryAfterSeconds: SLACK_RETRY_AFTER_SECONDS,
+};
+
+/**
+ * The stored grant is no longer usable. A `400` like any other actionable
+ * refusal — deliberately not a `401`, which would read as "your Prowler session
+ * expired" (contract, Errors) — and the integration is marked disconnected.
+ */
+export const SLACK_TOKEN_EXPIRED_REFUSAL: SlackRefusalFixture = {
+  status: 400,
+  code: SLACK_TOKEN_EXPIRED_CODE,
+  detail: SLACK_TOKEN_EXPIRED_DETAIL,
+  retryAfterSeconds: null,
+};
+
+/** Slack-side or transport failure — a `502` naming no reason at all. */
+export const SLACK_UPSTREAM_REFUSAL: SlackRefusalFixture = {
+  status: 502,
+  code: null,
+  detail: SLACK_UPSTREAM_DETAIL,
+  retryAfterSeconds: null,
+};
+
+/** The chosen channel is archived, deleted, or was never in the workspace. */
+export const SLACK_CHANNEL_NOT_FOUND_REFUSAL: SlackRefusalFixture = {
+  status: 400,
+  code: SLACK_CHANNEL_NOT_FOUND_CODE,
+  detail: SLACK_UNKNOWN_CHANNEL_DETAIL,
+  retryAfterSeconds: null,
+};
+
+/**
+ * The channel is fine, the Prowler app is simply not in it — fixed with
+ * `/invite @Prowler`. Identical `detail` to the refusal above, deliberately.
+ */
+export const SLACK_NOT_IN_CHANNEL_REFUSAL: SlackRefusalFixture = {
+  status: 400,
+  code: SLACK_NOT_IN_CHANNEL_CODE,
+  detail: SLACK_UNKNOWN_CHANNEL_DETAIL,
+  retryAfterSeconds: null,
+};
+
+/**
+ * Two public channels and one private the Prowler app was invited to, ordered
+ * so the private one lands on the second cursor page.
+ */
+export const SLACK_PUBLIC_CHANNEL: SlackChannelFixture = {
+  id: "C0123AB",
+  name: "security",
+  isPrivate: false,
+};
+
+export const SLACK_SECOND_PUBLIC_CHANNEL: SlackChannelFixture = {
+  id: "C0789EF",
+  name: "platform",
+  isPrivate: false,
+};
+
+export const SLACK_PRIVATE_CHANNEL: SlackChannelFixture = {
+  id: "C0456CD",
+  name: "security-alerts",
+  isPrivate: true,
+};
+
+export const SLACK_CHANNELS: SlackChannelFixture[] = [
+  SLACK_PUBLIC_CHANNEL,
+  SLACK_SECOND_PUBLIC_CHANNEL,
+  SLACK_PRIVATE_CHANNEL,
+];
+
+/** Two channels per page, so `SLACK_CHANNELS` spans exactly two pages. */
+export const SLACK_CHANNELS_PAGE_SIZE = 2;
+
+/**
+ * The first channel the picker offers, so an install seeded with it always
+ * points at a channel the listing really has.
+ */
+export const SLACK_DEFAULT_CHANNEL = SLACK_PUBLIC_CHANNEL;
+
+const PROWLER_HQ: SlackWorkspaceFixture = {
+  teamId: "T01PROWLER",
+  teamName: "Prowler HQ",
+  botUserId: "U01PROWLERBOT",
+};
+
+export const slackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture => ({
+  appConfigured: true,
+  install: null,
+  exchangeWorkspace: { ...PROWLER_HQ },
+  exchangeOutcome: SLACK_EXCHANGE_OUTCOME.CREATED,
+  connection: { connected: true, error: null },
+  rateLimited: false,
+  listServerError: false,
+  authorizeUrlUnreadable: false,
+  oauthUpstreamError: false,
+  channels: SLACK_CHANNELS.map((channel) => ({ ...channel })),
+  channelsPageSize: SLACK_CHANNELS_PAGE_SIZE,
+  channelsRefusal: null,
+  channelSaveRefusal: null,
+  testMessage: { accepted: true, error: null },
+  revocation: { revoked: true },
+  ...overrides,
+});
+
+/**
+ * A workspace approved with no destination channel yet. `connected` is `null`,
+ * not `true`: the check runs against the channel, so it has never run
+ * (design.md, "Connection state, in order").
+ */
+export const connectedSlackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  slackFixture({
+    install: {
+      id: SLACK_INTEGRATION_ID,
+      connected: null,
+      connectionLastCheckedAt: null,
+      workspace: { ...PROWLER_HQ },
+    },
+    exchangeOutcome: SLACK_EXCHANGE_OUTCOME.REINSTALLED,
+    ...overrides,
+  });
+
+const configuredInstall = (
+  channel: SlackChannelFixture = SLACK_DEFAULT_CHANNEL,
+): SlackInstallFixture => ({
+  id: SLACK_INTEGRATION_ID,
+  connected: true,
+  connectionLastCheckedAt: "2026-08-10T09:30:00Z",
+  workspace: {
+    ...PROWLER_HQ,
+    channelId: channel.id,
+    channelName: channel.name,
+  },
+});
+
+/**
+ * The same tenant with a destination channel already on record: the state a
+ * second visit starts from.
+ */
+export const slackFixtureWithDefaultChannel = (
+  channel: SlackChannelFixture = SLACK_PUBLIC_CHANNEL,
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  connectedSlackFixture({ install: configuredInstall(channel), ...overrides });
+
+/**
+ * The same finished setup, with a check time no parser can read: a zero date
+ * from a bad write or a serializer change. The contract types the attribute as
+ * a string and rules nothing else out.
+ */
+export const unreadableCheckTimeSlackFixture = (): SlackFixture =>
+  connectedSlackFixture({
+    install: {
+      ...configuredInstall(),
+      connectionLastCheckedAt: "0000-00-00T00:00:00Z",
+    },
+  });
+
+/**
+ * The first cursor page is served and Slack rate limits the second: what is
+ * already read stays usable, the refusal only says why the list is short.
+ */
+export const partiallyReadSlackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  slackFixtureWithDefaultChannel(SLACK_PUBLIC_CHANNEL, {
+    channelsRefusal: SLACK_RATE_LIMITED_REFUSAL,
+    channelsRefusalFromCursor: SLACK_CHANNELS_PAGE_SIZE,
+    ...overrides,
+  });
+
+/**
+ * A workspace connected *and* a channel on record. Anything the API refuses
+ * until a channel exists (the connection check) needs this fixture.
+ */
+export const configuredSlackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  slackFixtureWithDefaultChannel(SLACK_DEFAULT_CHANNEL, overrides);
+
+/**
+ * A connected tenant whose disconnect removes the row but cannot revoke at
+ * Slack — the outcome the user has to finish by hand in the workspace. The API
+ * reports it as `revoked: false` and says no more than that, which is exactly
+ * as much as the UI can honestly tell them.
+ */
+export const revokeFailureSlackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  connectedSlackFixture({
+    revocation: { revoked: false },
+    ...overrides,
+  });
+
+/**
+ * A connected tenant whose token has been revoked at Slack: the row still says
+ * connected until a check runs, and the check is what surfaces it. The check
+ * itself needs a destination channel on record — the API refuses to test one
+ * that has none — so this builds on the finished setup, not the bare install.
+ */
+export const revokedTokenSlackFixture = (
+  overrides: Partial<SlackFixture> = {},
+): SlackFixture =>
+  configuredSlackFixture({
+    connection: { connected: false, error: SLACK_TOKEN_REVOKED_CODE },
+    ...overrides,
+  });

ui/__tests__/msw/handlers/slack.ts

@@ -0,0 +1,382 @@
+/**
+ * MSW handlers for the Slack integration, derived from the API contract in
+ * `openspec/changes/add-slack-integration/design.md` (the API itself lives in
+ * the cloud repository). State is per-call: an exchange creates the install the
+ * subsequent `GET /integrations` returns.
+ *
+ * Wire them per test via `worker.use(...handlersForSlack(fx))`.
+ */
+
+import { http, HttpResponse } from "msw";
+
+import {
+  INTEGRATIONS_SERVER_ERROR_DETAIL,
+  PROXY_CHALLENGE_PAGE,
+  SLACK_AUTHORIZE_URL,
+  SLACK_DIFFERENT_WORKSPACE_DETAIL,
+  SLACK_EXCHANGE_OUTCOME,
+  SLACK_INTEGRATION_ID,
+  SLACK_INVALID_CODE_DETAIL,
+  SLACK_NO_CHANNEL_DETAIL,
+  SLACK_NO_DEFAULT_CHANNEL_DETAIL,
+  SLACK_RATE_LIMITED_REFUSAL,
+  SLACK_REFUSED_STATE_DETAIL,
+  SLACK_UNCONFIGURED_DETAIL,
+  SLACK_UNKNOWN_CHANNEL_DETAIL,
+  SLACK_UPSTREAM_DETAIL,
+  SLACK_UPSTREAM_ERROR_CODE,
+  SLACK_WORKSPACE_CONFLICT_CODE,
+} from "./slack.fixtures";
+import type {
+  SlackExchangeOutcome,
+  SlackFixture,
+  SlackInstallFixture,
+  SlackRefusalFixture,
+} from "./slack.fixtures";
+
+const API = process.env.UI_API_BASE_URL;
+const TS = "2026-08-10T09:00:00Z";
+
+const CONNECTION_TASK_PREFIX = "slack-conn-task-";
+const TEST_MESSAGE_TASK_PREFIX = "slack-test-message-task-";
+
+/** Opaque to the UI, which only ever follows `links.next` (design D6). */
+const CHANNEL_CURSOR_PARAM = "page[cursor]";
+
+/**
+ * `status` is a string, per the JSON:API spec. `source.pointer` is `/data` even
+ * for a field-shaped `ValidationError`: the errors are about the request.
+ */
+const errorBody = (detail: string, status: number, code?: string) => ({
+  errors: [
+    {
+      status: String(status),
+      ...(code ? { code } : {}),
+      detail,
+      source: { pointer: "/data" },
+    },
+  ],
+});
+
+/**
+ * Answer a fixture's refusal as the API would: its own status, its `code`
+ * when it names one, and `Retry-After` only where the status carries a wait.
+ */
+const refuse = (refusal: SlackRefusalFixture) =>
+  HttpResponse.json(
+    errorBody(refusal.detail, refusal.status, refusal.code ?? undefined),
+    {
+      status: refusal.status,
+      ...(refusal.retryAfterSeconds === null
+        ? {}
+        : { headers: { "Retry-After": String(refusal.retryAfterSeconds) } }),
+    },
+  );
+
+const configuration = (workspace: SlackInstallFixture["workspace"]) => ({
+  team_id: workspace.teamId,
+  team_name: workspace.teamName,
+  bot_user_id: workspace.botUserId,
+  // The API omits these keys until a channel is chosen, never sending nulls.
+  ...(workspace.channelId ? { channel_id: workspace.channelId } : {}),
+  ...(workspace.channelName ? { channel_name: workspace.channelName } : {}),
+});
+
+const integrationResource = (install: SlackInstallFixture) => ({
+  id: install.id,
+  type: "integrations",
+  attributes: {
+    inserted_at: TS,
+    updated_at: TS,
+    enabled: true,
+    connected: install.connected,
+    connection_last_checked_at: install.connectionLastCheckedAt,
+    integration_type: "slack",
+    // No credentials: the bot token is encrypted at rest and never serialized.
+    configuration: configuration(install.workspace),
+  },
+  links: { self: `${API}/integrations/${install.id}` },
+});
+
+const collection = (install: SlackInstallFixture | null) => ({
+  data: install ? [integrationResource(install)] : [],
+  meta: {
+    version: "v1",
+    pagination: {
+      page: 1,
+      pages: 1,
+      count: install ? 1 : 0,
+    },
+  },
+});
+
+const taskResource = (id: string, state: string, result: unknown) => ({
+  data: { id, type: "tasks", attributes: { state, result } },
+});
+
+/**
+ * All three are `2xx`: the first two make `response.json()` throw, the third
+ * parses into a body that names no resource.
+ */
+const unreadableExchange = (outcome: SlackExchangeOutcome): Response => {
+  switch (outcome) {
+    case SLACK_EXCHANGE_OUTCOME.UNREADABLE_NO_CONTENT:
+      return new HttpResponse(null, { status: 204 });
+    case SLACK_EXCHANGE_OUTCOME.UNREADABLE_HTML:
+      return HttpResponse.html(PROXY_CHALLENGE_PAGE);
+    default:
+      return HttpResponse.json({ meta: { version: "v1" } });
+  }
+};
+
+export const handlersForSlack = (fx: SlackFixture) => {
+  // Mutable copy: the exchange must not write through to the caller's fixture.
+  let install: SlackInstallFixture | null = fx.install
+    ? { ...fx.install, workspace: { ...fx.install.workspace } }
+    : null;
+
+  const unconfigured = () =>
+    HttpResponse.json(errorBody(SLACK_UNCONFIGURED_DETAIL, 503), {
+      status: 503,
+    });
+
+  const rateLimited = () => refuse(SLACK_RATE_LIMITED_REFUSAL);
+
+  /** A `502` per the contract's taxonomy: a server fault, not a Slack state. */
+  const upstreamError = () =>
+    HttpResponse.json(
+      errorBody(SLACK_UPSTREAM_DETAIL, 502, SLACK_UPSTREAM_ERROR_CODE),
+      { status: 502, statusText: "Bad Gateway" },
+    );
+
+  return [
+    // --- OAuth ------------------------------------------------------------
+    http.post(`${API}/integrations/slack/oauth/authorize-url`, () => {
+      if (!fx.appConfigured) return unconfigured();
+      if (fx.rateLimited) return rateLimited();
+      if (fx.oauthUpstreamError) return upstreamError();
+      if (fx.authorizeUrlUnreadable) {
+        return HttpResponse.html(PROXY_CHALLENGE_PAGE);
+      }
+      // The URL travels in `meta`; the call creates nothing.
+      return HttpResponse.json({
+        meta: { authorize_url: SLACK_AUTHORIZE_URL },
+      });
+    }),
+
+    http.post(`${API}/integrations/slack/oauth/exchange`, () => {
+      if (!fx.appConfigured) return unconfigured();
+      if (fx.rateLimited) return rateLimited();
+      if (fx.oauthUpstreamError) return upstreamError();
+
+      switch (fx.exchangeOutcome) {
+        case SLACK_EXCHANGE_OUTCOME.REFUSED_STATE:
+          return HttpResponse.json(errorBody(SLACK_REFUSED_STATE_DETAIL, 400), {
+            status: 400,
+          });
+        case SLACK_EXCHANGE_OUTCOME.SLACK_REFUSED:
+          return HttpResponse.json(errorBody(SLACK_INVALID_CODE_DETAIL, 400), {
+            status: 400,
+          });
+        case SLACK_EXCHANGE_OUTCOME.DIFFERENT_WORKSPACE:
+          return HttpResponse.json(
+            errorBody(
+              SLACK_DIFFERENT_WORKSPACE_DETAIL,
+              409,
+              SLACK_WORKSPACE_CONFLICT_CODE,
+            ),
+            { status: 409 },
+          );
+        case SLACK_EXCHANGE_OUTCOME.UNREADABLE_NO_CONTENT:
+        case SLACK_EXCHANGE_OUTCOME.UNREADABLE_HTML:
+        case SLACK_EXCHANGE_OUTCOME.UNREADABLE_NO_DATA:
+          // The install still happened: the API upserts before it answers.
+          install = {
+            id: SLACK_INTEGRATION_ID,
+            connected: null,
+            connectionLastCheckedAt: null,
+            workspace: { ...fx.exchangeWorkspace },
+          };
+          return unreadableExchange(fx.exchangeOutcome);
+        case SLACK_EXCHANGE_OUTCOME.REINSTALLED:
+          install = {
+            id: install?.id ?? SLACK_INTEGRATION_ID,
+            connected: null,
+            connectionLastCheckedAt: null,
+            workspace: { ...fx.exchangeWorkspace },
+          };
+          return HttpResponse.json({ data: integrationResource(install) });
+        default:
+          install = {
+            id: SLACK_INTEGRATION_ID,
+            connected: null,
+            connectionLastCheckedAt: null,
+            workspace: { ...fx.exchangeWorkspace },
+          };
+          return HttpResponse.json(
+            { data: integrationResource(install) },
+            { status: 201 },
+          );
+      }
+    }),
+
+    // --- Generic integration endpoints the Slack UI reuses -----------------
+    http.get(`${API}/integrations`, ({ request }) => {
+      if (fx.listServerError) {
+        return HttpResponse.json(
+          errorBody(INTEGRATIONS_SERVER_ERROR_DETAIL, 500),
+          { status: 500 },
+        );
+      }
+
+      const type = new URL(request.url).searchParams.get(
+        "filter[integration_type]",
+      );
+      // An unfiltered read would pull every type into the Slack page.
+      return HttpResponse.json(collection(type === "slack" ? install : null));
+    }),
+
+    http.post<{ id: string }>(
+      `${API}/integrations/:id/connection`,
+      ({ params }) => {
+        // The check posts to the channel, so the API refuses until one exists.
+        if (!install?.workspace.channelId) {
+          return HttpResponse.json(errorBody(SLACK_NO_CHANNEL_DETAIL, 400), {
+            status: 400,
+          });
+        }
+
+        return HttpResponse.json(
+          taskResource(
+            `${CONNECTION_TASK_PREFIX}${params.id}`,
+            "executing",
+            null,
+          ),
+          { status: 202 },
+        );
+      },
+    ),
+
+    http.get<{ taskId: string }>(`${API}/tasks/:taskId`, ({ params }) => {
+      // The test message settles as its own task (design D9).
+      if (params.taskId.startsWith(TEST_MESSAGE_TASK_PREFIX)) {
+        const { accepted, error } = fx.testMessage;
+        return HttpResponse.json(
+          taskResource(params.taskId, accepted ? "completed" : "failed", {
+            error,
+          }),
+        );
+      }
+
+      const { connected, error } = fx.connection;
+      if (install && params.taskId.startsWith(CONNECTION_TASK_PREFIX)) {
+        install.connected = connected;
+        install.connectionLastCheckedAt = TS;
+      }
+      return HttpResponse.json(
+        taskResource(params.taskId, "completed", { connected, error }),
+      );
+    }),
+
+    // --- Channels ----------------------------------------------------------
+    http.get<{ id: string }>(
+      `${API}/integrations/:id/slack/channels`,
+      ({ params, request }) => {
+        // The UI follows `links.next` opaquely, so the cursor's shape is this
+        // fixture's business alone. Read first: the page decides the refusal.
+        const cursor = Number(
+          new URL(request.url).searchParams.get(CHANNEL_CURSOR_PARAM) ?? "0",
+        );
+
+        // An endpoint-specific refusal wins over the blanket rate limiting,
+        // and applies from the named cursor, so a partial read is expressible.
+        if (
+          fx.channelsRefusal &&
+          cursor >= (fx.channelsRefusalFromCursor ?? 0)
+        ) {
+          return refuse(fx.channelsRefusal);
+        }
+        if (fx.rateLimited) return rateLimited();
+
+        const nextCursor = cursor + fx.channelsPageSize;
+        const page = fx.channels.slice(cursor, nextCursor);
+        const hasMore = nextCursor < fx.channels.length;
+
+        return HttpResponse.json({
+          data: page.map((channel) => ({
+            type: "slack-channels",
+            id: channel.id,
+            attributes: { name: channel.name, is_private: channel.isPrivate },
+          })),
+          links: {
+            next: hasMore
+              ? `${API}/integrations/${params.id}/slack/channels` +
+                `?${CHANNEL_CURSOR_PARAM}=${nextCursor}`
+              : null,
+          },
+        });
+      },
+    ),
+
+    /**
+     * The generic PATCH. The UI submits only `channel_id`; the name is derived
+     * from it here, as the API derives it from Slack (design D6).
+     */
+    http.patch(`${API}/integrations/:id`, async ({ request }) => {
+      const body = (await request.json().catch(() => null)) as {
+        data?: { attributes?: { configuration?: { channel_id?: string } } };
+      } | null;
+      const channelId = body?.data?.attributes?.configuration?.channel_id;
+      const channel = fx.channels.find((c) => c.id === channelId);
+
+      if (!install) {
+        return HttpResponse.json(errorBody("Not found.", 404), { status: 404 });
+      }
+      // Checked before the id lookup: the picker did offer this channel, and
+      // Slack refused it anyway when the API validated it.
+      if (fx.channelSaveRefusal) return refuse(fx.channelSaveRefusal);
+      if (!channel) {
+        return HttpResponse.json(errorBody(SLACK_UNKNOWN_CHANNEL_DETAIL, 400), {
+          status: 400,
+        });
+      }
+
+      install.workspace.channelId = channel.id;
+      install.workspace.channelName = channel.name;
+      return HttpResponse.json({ data: integrationResource(install) });
+    }),
+
+    // --- Test message ------------------------------------------------------
+    http.post<{ id: string }>(
+      `${API}/integrations/:id/slack/test-message`,
+      ({ params }) => {
+        if (!install?.workspace.channelId) {
+          return HttpResponse.json(
+            errorBody(SLACK_NO_DEFAULT_CHANNEL_DETAIL, 400),
+            { status: 400 },
+          );
+        }
+        return HttpResponse.json(
+          taskResource(
+            `${TEST_MESSAGE_TASK_PREFIX}${params.id}`,
+            "available",
+            null,
+          ),
+          { status: 202 },
+        );
+      },
+    ),
+
+    // Disconnect. Revocation at Slack is best-effort: the row is removed either
+    // way and the outcome is reported in `meta`, so the UI can tell the user
+    // when access still has to be removed by hand in the workspace.
+    //
+    // `revoked` is the entire outcome. The API sends no reason for a revocation
+    // that failed, and a handler that invented one would let the page grow copy
+    // around a field the deployment never sends.
+    http.delete(`${API}/integrations/:id`, () => {
+      install = null;
+      return HttpResponse.json({ meta: { revoked: fx.revocation.revoked } });
+    }),
+  ];
+};

ui/actions/integrations/integrations.ts

@@ -341,6 +341,7 @@ export const testIntegrationConnection = async (
         revalidatePath("/integrations/amazon-s3");
         revalidatePath("/integrations/aws-security-hub");
         revalidatePath("/integrations/jira");
+        revalidatePath("/integrations/slack");
 
         if ("error" in pollResult) {
           return { success: false, error: pollResult.error };
@@ -387,6 +388,7 @@ export const pollConnectionTestStatus = async (
     revalidatePath("/integrations/amazon-s3");
     revalidatePath("/integrations/aws-security-hub");
     revalidatePath("/integrations/jira");
+    revalidatePath("/integrations/slack");
 
     if ("error" in pollResult) {
       return { success: false, error: pollResult.error };

ui/actions/integrations/slack.test.ts

@@ -0,0 +1,742 @@
+/**
+ * What the Slack actions do off the DOM, which
+ * `slack-page.integration.test.tsx` cannot cover: which failures reach Sentry,
+ * and the URLs the channel listing's cursor pagination follows.
+ */
+
+import { revalidatePath } from "next/cache";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  SLACK_ERROR_CODE,
+  SLACK_ERROR_MESSAGES,
+  SLACK_GENERIC_ERROR_MESSAGE,
+  SLACK_PARTIAL_CHANNEL_LIST_MESSAGE,
+  SLACK_UNREADABLE_RESULT_MESSAGE,
+} from "@/lib/integrations/slack-errors";
+import { SentryErrorSource, SentryErrorType } from "@/sentry";
+
+const { captureExceptionMock, captureMessageMock, fetchMock } = vi.hoisted(
+  () => ({
+    /**
+     * The real SDK marks the exception `__sentry_captured__`, and
+     * `handleApiError` reads that mark to avoid reporting the same throw twice.
+     */
+    captureExceptionMock: vi.fn((exception: unknown, _options?: unknown) => {
+      if (exception !== null && typeof exception === "object") {
+        Object.defineProperty(exception, "__sentry_captured__", {
+          configurable: true,
+          value: true,
+        });
+      }
+    }),
+    captureMessageMock: vi.fn(),
+    fetchMock: vi.fn(),
+  }),
+);
+
+vi.mock("@sentry/nextjs", () => ({
+  captureException: captureExceptionMock,
+  captureMessage: captureMessageMock,
+  // The task poll leaves breadcrumbs on every read it makes.
+  addBreadcrumb: vi.fn(),
+}));
+
+vi.mock("next/cache", () => ({
+  revalidatePath: vi.fn(),
+}));
+
+// The real `handleApiResponse` reads its copy from `lib/helper`, which reaches
+// next-auth through `@/auth.config`; stubbing the session lets that copy load.
+vi.mock("@/auth.config", () => ({
+  auth: vi.fn(() => Promise.resolve({ accessToken: "test-access-token" })),
+}));
+
+vi.mock("@/lib", () => ({
+  apiBaseUrl: "https://api.test/api/v1",
+  getAuthHeaders: vi.fn(() =>
+    Promise.resolve({ Authorization: "Bearer test-token" }),
+  ),
+  parseStringify: (value: unknown) => value,
+}));
+
+import {
+  exchangeSlackOAuthCode,
+  getSlackAuthorizeUrl,
+  getSlackChannels,
+  sendSlackTestMessage,
+  setSlackDefaultChannel,
+} from "./slack";
+
+/** The status the contract reserves for an upstream Slack failure. */
+const UPSTREAM_STATUS = 502;
+const UPSTREAM_DETAIL = "Slack is temporarily unavailable.";
+const GENERIC_SERVER_ERROR_MESSAGE =
+  "Server is temporarily unavailable. Please try again in a few minutes.";
+
+const errorResponse = (status: number, detail: string, code?: string) =>
+  new Response(
+    JSON.stringify({
+      errors: [
+        {
+          status: String(status),
+          ...(code ? { code } : {}),
+          detail,
+          source: { pointer: "/data" },
+        },
+      ],
+    }),
+    { status, headers: { "content-type": "application/vnd.api+json" } },
+  );
+
+const exchange = () =>
+  exchangeSlackOAuthCode({ code: "slack-code-1f4a", state: "st-2f1c9d7a" });
+
+beforeEach(() => {
+  vi.stubGlobal("fetch", fetchMock);
+  vi.spyOn(console, "error").mockImplementation(() => undefined);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe.each([
+  { action: getSlackAuthorizeUrl, name: "getSlackAuthorizeUrl" },
+  { action: exchange, name: "exchangeSlackOAuthCode" },
+])("$name", ({ action }) => {
+  it("reports an upstream Slack failure instead of only turning it into copy", async () => {
+    // 502 covers `internal_error`, `fatal_error`, `service_unavailable` and
+    // transport failures.
+    fetchMock.mockResolvedValue(
+      errorResponse(UPSTREAM_STATUS, UPSTREAM_DETAIL, "service_unavailable"),
+    );
+
+    const result = await action();
+
+    // Once, not twice: `handleApiResponse` reports and throws, and the action's
+    // catch sees the mark.
+    expect(captureExceptionMock).toHaveBeenCalledTimes(1);
+    expect(captureExceptionMock.mock.calls[0]?.[1]).toMatchObject({
+      tags: {
+        api_error: true,
+        error_source: SentryErrorSource.HANDLE_API_RESPONSE,
+        error_type: SentryErrorType.SERVER_ERROR,
+        status_code: String(UPSTREAM_STATUS),
+      },
+    });
+    expect(captureMessageMock).not.toHaveBeenCalled();
+
+    // The throw lands in the action's catch, so the page gets a result to
+    // render rather than a rejection that strands the callback on its spinner.
+    expect(result).toEqual({ error: UPSTREAM_DETAIL });
+  });
+
+  it("answers a 5xx the API described in HTML in Prowler's own words", async () => {
+    fetchMock.mockResolvedValue(
+      new Response("<html><body><h1>502 Bad Gateway</h1></body></html>", {
+        status: UPSTREAM_STATUS,
+        statusText: "Bad Gateway",
+        headers: { "content-type": "text/html" },
+      }),
+    );
+
+    const result = await action();
+
+    expect(result).toEqual({ error: GENERIC_SERVER_ERROR_MESSAGE });
+    expect(captureExceptionMock).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([503, 404])(
+    "reports nothing for a %s: that is the feature being dark, not a fault",
+    async (status) => {
+      // 503 means `SLACK_CLIENT_*` is unset; 404 means no Slack API is served
+      // in this deployment at all.
+      fetchMock.mockResolvedValue(
+        errorResponse(status, "Slack integration is not configured."),
+      );
+
+      const result = await action();
+
+      // Capturing this would report the deliberate ship-dark state from every
+      // tenant on every page load.
+      expect(result).toEqual({ unavailable: true });
+      expect(captureExceptionMock).not.toHaveBeenCalled();
+    },
+  );
+
+  it("reports nothing when Slack is rate limiting: it is a wait, not a fault", async () => {
+    fetchMock.mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          errors: [{ status: "429", detail: "Slack is rate limiting." }],
+        }),
+        {
+          status: 429,
+          headers: {
+            "content-type": "application/vnd.api+json",
+            "Retry-After": "30",
+          },
+        },
+      ),
+    );
+
+    const result = await action();
+
+    expect(result).toMatchObject({ rateLimited: true, retryAfterSeconds: 30 });
+    expect(captureExceptionMock).not.toHaveBeenCalled();
+  });
+});
+
+/**
+ * The URL is rendered as the `Add to Slack` link's `href`, so a value the API
+ * got wrong must not become a redirect to somewhere that is not Slack.
+ */
+describe("getSlackAuthorizeUrl authorize URL", () => {
+  const NO_AUTHORIZE_URL_MESSAGE = "Slack did not return an authorization URL.";
+  const CONSENT_SCREEN_URL =
+    "https://slack.com/oauth/v2/authorize" +
+    "?client_id=1234567890.0987654321&state=st-2f1c9d7a";
+
+  const authorizeUrlResponse = (authorizeUrl: unknown) =>
+    new Response(JSON.stringify({ meta: { authorize_url: authorizeUrl } }), {
+      status: 200,
+      headers: { "content-type": "application/vnd.api+json" },
+    });
+
+  it.each([
+    ["a hostile scheme", "javascript:alert(document.domain)"],
+    ["plain HTTP", "http://slack.com/oauth/v2/authorize?client_id=1"],
+    ["another origin", "https://evil.test/oauth/v2/authorize?client_id=1"],
+    ["a lookalike hostname", "https://slack.com.evil.test/oauth/v2/authorize"],
+    [
+      "another Slack path",
+      "https://slack.com/redirect?to=https%3A%2F%2Fevil.test",
+    ],
+    ["a value that is not a URL", "oauth/v2/authorize"],
+  ])(
+    "refuses %s instead of offering it as the install link",
+    async (_label, authorizeUrl) => {
+      // Given — a 2xx whose `meta.authorize_url` is not Slack's consent screen.
+      fetchMock.mockResolvedValue(authorizeUrlResponse(authorizeUrl));
+
+      // When
+      const result = await getSlackAuthorizeUrl();
+
+      // Then — the answer for no URL at all: nothing here is safe to link to.
+      expect(result).toEqual({ error: NO_AUTHORIZE_URL_MESSAGE });
+    },
+  );
+
+  it("hands over Slack's consent screen with its query untouched", async () => {
+    // Given
+    fetchMock.mockResolvedValue(authorizeUrlResponse(CONSENT_SCREEN_URL));
+
+    // When / Then
+    expect(await getSlackAuthorizeUrl()).toEqual({
+      authorizeUrl: CONSENT_SCREEN_URL,
+    });
+  });
+});
+
+/**
+ * The callback names the workspace and redirects on `integration` alone, so a
+ * `2xx` body it cannot read back as an integration must not reach it.
+ */
+describe("exchangeSlackOAuthCode result shape", () => {
+  const INTEGRATION = {
+    id: "9b1f4c22-5e7a-4c2e-8f0d-6a3b1c9d7e42",
+    type: "integrations",
+    attributes: {
+      integration_type: "slack",
+      configuration: { team_name: "Prowler HQ" },
+    },
+  };
+
+  const exchangeResponse = (data: unknown) =>
+    new Response(JSON.stringify({ data }), {
+      status: 200,
+      headers: { "content-type": "application/vnd.api+json" },
+    });
+
+  it.each<[string, unknown]>([
+    ["an empty object", {}],
+    ["an array", []],
+    ["a bare string", "invalid"],
+    ["a resource with no id", { type: "integrations", attributes: {} }],
+    [
+      "a resource with no attributes",
+      { id: INTEGRATION.id, type: "integrations" },
+    ],
+  ])("cannot confirm the install from %s", async (_label, data) => {
+    // Given — a 2xx whose `data` is truthy but is not an integration resource.
+    fetchMock.mockResolvedValue(exchangeResponse(data));
+
+    // When
+    const result = await exchange();
+
+    // Then — the answer for a body with no `data`: the install happened, only
+    // its result is unknown.
+    expect(result).toEqual({
+      unconfirmed: true,
+      message: SLACK_UNREADABLE_RESULT_MESSAGE,
+    });
+  });
+
+  it("hands over the workspace the API upserted", async () => {
+    // Given
+    fetchMock.mockResolvedValue(exchangeResponse(INTEGRATION));
+
+    // When / Then
+    expect(await exchange()).toEqual({ integration: INTEGRATION });
+  });
+});
+
+/** The shape the API's integration ids have, which is the only shape accepted. */
+const SLACK_INTEGRATION_ID = "b2c7fd0a-3e51-4d8f-9a6c-1f0e2d3c4b5a";
+
+const CHANNELS_URL =
+  `https://api.test/api/v1/integrations/${SLACK_INTEGRATION_ID}` +
+  "/slack/channels";
+
+const FIRST_CHANNEL = { id: "C0123AB", name: "security" };
+const SECOND_CHANNEL = { id: "C0789EF", name: "platform" };
+
+const channelPage = (
+  channel: { id: string; name: string },
+  next: string | null,
+) =>
+  new Response(
+    JSON.stringify({
+      data: [
+        {
+          type: "slack-channels",
+          id: channel.id,
+          attributes: { name: channel.name, is_private: false },
+        },
+      ],
+      links: { next },
+    }),
+    { status: 200, headers: { "content-type": "application/vnd.api+json" } },
+  );
+
+const channelOption = (channel: { id: string; name: string }) => ({
+  id: channel.id,
+  name: channel.name,
+  is_private: false,
+});
+
+const requestedUrls = (): string[] =>
+  fetchMock.mock.calls.map(([url]) => String(url));
+
+/**
+ * `MAX_CHANNEL_PAGES` in the action, which a `"use server"` module cannot
+ * export: only async functions may leave one.
+ */
+const MAX_CHANNEL_PAGES = 20;
+
+const channelOptions = (count: number) =>
+  Array.from({ length: count }, () => channelOption(FIRST_CHANNEL));
+
+/** What a `429` carrying `Retry-After: 30` is turned into. */
+const RATE_LIMITED_MESSAGE =
+  "Slack is rate limiting Prowler right now. Try again in about 30 seconds.";
+
+describe("getSlackChannels", () => {
+  it("follows a cursor-only `next` on the listing's own URL, not on the API root", async () => {
+    // The link is opaque (design D6), so the API may answer with the cursor
+    // alone; resolved against the API root it loses the listing's own path.
+    fetchMock
+      .mockResolvedValueOnce(channelPage(FIRST_CHANNEL, "?page[cursor]=2"))
+      .mockResolvedValueOnce(channelPage(SECOND_CHANNEL, null));
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(requestedUrls()).toEqual([
+      CHANNELS_URL,
+      `${CHANNELS_URL}?page[cursor]=2`,
+    ]);
+    expect(result).toEqual({
+      channels: [channelOption(FIRST_CHANNEL), channelOption(SECOND_CHANNEL)],
+    });
+  });
+
+  it.each([
+    {
+      shape: "an absolute",
+      next: "https://evil.test/api/v1/integrations/x/slack/channels?cursor=2",
+    },
+    { shape: "a protocol-relative", next: "//evil.test/api/v1/channels?c=2" },
+  ])(
+    "stops at $shape off-origin `next` rather than sending the tenant's token to it",
+    async ({ next }) => {
+      // `fetch` strips the tenant's `Authorization` on a redirect that leaves
+      // the origin, but not on a hop the UI makes itself.
+      fetchMock.mockResolvedValueOnce(channelPage(FIRST_CHANNEL, next));
+
+      const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+      expect(requestedUrls()).toEqual([CHANNELS_URL]);
+      expect(result).toEqual({
+        channels: [channelOption(FIRST_CHANNEL)],
+        incomplete: SLACK_PARTIAL_CHANNEL_LIST_MESSAGE,
+      });
+    },
+  );
+
+  it("answers an unreadable page as no channels rather than parser prose", async () => {
+    fetchMock.mockResolvedValueOnce(unreadableOk(HTML_INTERSTITIAL));
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({ channels: [] });
+    expectNoParserProse(result);
+  });
+
+  it("says the list is short of the workspace when the page budget runs out", async () => {
+    // The budget exists because `conversations.list` is tier 2 and a workspace
+    // can outgrow it (design.md, Risks). A fresh `Response` per call: one
+    // instance is already consumed on its second read.
+    fetchMock.mockImplementation(() =>
+      Promise.resolve(channelPage(FIRST_CHANNEL, "?page[cursor]=next")),
+    );
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(fetchMock).toHaveBeenCalledTimes(MAX_CHANNEL_PAGES);
+    expect(result).toEqual({
+      channels: channelOptions(MAX_CHANNEL_PAGES),
+      incomplete: SLACK_PARTIAL_CHANNEL_LIST_MESSAGE,
+    });
+  });
+
+  it("says nothing about a short list for a workspace that just fits the budget", async () => {
+    let page = 0;
+    fetchMock.mockImplementation(() => {
+      page += 1;
+      return Promise.resolve(
+        channelPage(
+          FIRST_CHANNEL,
+          page < MAX_CHANNEL_PAGES ? `?page[cursor]=${page}` : null,
+        ),
+      );
+    });
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(fetchMock).toHaveBeenCalledTimes(MAX_CHANNEL_PAGES);
+    expect(result).toEqual({ channels: channelOptions(MAX_CHANNEL_PAGES) });
+    expect(result).not.toHaveProperty("incomplete");
+  });
+
+  it("keeps the pages it read when a later one is refused, saying why the list stops", async () => {
+    fetchMock
+      .mockResolvedValueOnce(channelPage(FIRST_CHANNEL, "?page[cursor]=2"))
+      .mockResolvedValueOnce(rateLimitedResponse());
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({
+      channels: [channelOption(FIRST_CHANNEL)],
+      incomplete: RATE_LIMITED_MESSAGE,
+    });
+  });
+
+  it("answers a refusal on the first page as a failure, having nothing to show", async () => {
+    fetchMock.mockResolvedValueOnce(rateLimitedResponse());
+
+    const result = await getSlackChannels(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({ error: RATE_LIMITED_MESSAGE });
+  });
+});
+
+/**
+ * A `2xx` whose body is not JSON:API: an empty answer, or the HTML a proxy or
+ * WAF puts in front of one. The raw `SyntaxError` survives
+ * `sanitizeErrorMessage` (V8 truncates the snippet to ten characters, so its
+ * `<!doctype html>` branch never matches) and would be shown verbatim.
+ */
+const HTML_INTERSTITIAL =
+  "<!DOCTYPE html><html><body><h1>Checking your browser</h1></body></html>";
+
+const unreadableOk = (body: string) =>
+  new Response(body, {
+    status: 200,
+    headers: { "content-type": body ? "text/html" : "application/json" },
+  });
+
+/** V8's parser wording, which no user should ever be shown. */
+const PARSER_PROSE = /unexpected (token|end of json)|not valid json/i;
+
+const expectNoParserProse = (result: unknown) => {
+  const message = (result as { error?: string }).error ?? "";
+  expect(message).not.toMatch(PARSER_PROSE);
+};
+
+const INTEGRATION_URL = `https://api.test/api/v1/integrations/${SLACK_INTEGRATION_ID}`;
+
+const saveChannel = () =>
+  setSlackDefaultChannel(SLACK_INTEGRATION_ID, FIRST_CHANNEL.id);
+
+const expectIntegrationsRevalidated = () => {
+  expect(vi.mocked(revalidatePath).mock.calls).toEqual([
+    ["/integrations"],
+    ["/integrations/slack"],
+  ]);
+};
+
+describe("setSlackDefaultChannel", () => {
+  it("returns the saved integration and revalidates the pages listing it", async () => {
+    fetchMock.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({
+          data: {
+            type: "integrations",
+            id: SLACK_INTEGRATION_ID,
+            attributes: {
+              integration_type: "slack",
+              configuration: {
+                channel_id: FIRST_CHANNEL.id,
+                channel_name: FIRST_CHANNEL.name,
+              },
+            },
+          },
+        }),
+        {
+          status: 200,
+          headers: { "content-type": "application/vnd.api+json" },
+        },
+      ),
+    );
+
+    const result = await saveChannel();
+
+    expect(requestedUrls()).toEqual([INTEGRATION_URL]);
+    expect(result).toMatchObject({
+      integration: {
+        attributes: { configuration: { channel_name: FIRST_CHANNEL.name } },
+      },
+    });
+    expectIntegrationsRevalidated();
+  });
+
+  it.each([
+    { shape: "empty", body: "" },
+    { shape: "an HTML interstitial", body: HTML_INTERSTITIAL },
+  ])(
+    "answers a $shape `200` as an unread result, not as a failed save",
+    async ({ body }) => {
+      fetchMock.mockResolvedValueOnce(unreadableOk(body));
+
+      const result = await saveChannel();
+
+      expect(result).toEqual({ error: SLACK_UNREADABLE_RESULT_MESSAGE });
+      expectNoParserProse(result);
+      // The API recorded the channel before answering, so both pages refresh.
+      expectIntegrationsRevalidated();
+    },
+  );
+
+  // The caller reads `integration.attributes.configuration`, so a shallower
+  // guard lets the miss surface later as the manager's generic catch.
+  it.each([
+    { shape: "no `data`", body: {} },
+    { shape: "a null `data`", body: { data: null } },
+    { shape: "a `data` with no configuration", body: { data: {} } },
+  ])(
+    "answers a `200` carrying $shape as an unread result",
+    async ({ body }) => {
+      fetchMock.mockResolvedValueOnce(
+        new Response(JSON.stringify(body), {
+          status: 200,
+          headers: { "content-type": "application/vnd.api+json" },
+        }),
+      );
+
+      const result = await saveChannel();
+
+      expect(result).toEqual({ error: SLACK_UNREADABLE_RESULT_MESSAGE });
+      expectNoParserProse(result);
+      expectIntegrationsRevalidated();
+    },
+  );
+});
+
+/** The `202` that hands back the task the post is reported on (design D9). */
+const TEST_MESSAGE_TASK_ID = "5f8b1c2d-7e64-4a90-8c31-2b7d6e5f4a90";
+
+const testMessageAccepted = () =>
+  new Response(JSON.stringify({ data: { id: TEST_MESSAGE_TASK_ID } }), {
+    status: 202,
+    headers: { "content-type": "application/vnd.api+json" },
+  });
+
+/** The task read the poll makes, already settled on its first look. */
+const settledTask = (state: string, result: unknown) =>
+  new Response(
+    JSON.stringify({
+      data: {
+        type: "tasks",
+        id: TEST_MESSAGE_TASK_ID,
+        attributes: { state, result },
+      },
+    }),
+    { status: 200, headers: { "content-type": "application/vnd.api+json" } },
+  );
+
+describe("sendSlackTestMessage", () => {
+  it("answers an unreadable `202` as no task started, not as parser prose", async () => {
+    fetchMock.mockResolvedValueOnce(
+      new Response(HTML_INTERSTITIAL, {
+        status: 202,
+        headers: { "content-type": "text/html" },
+      }),
+    );
+
+    const result = await sendSlackTestMessage(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({ error: "Slack did not start the test message." });
+    expectNoParserProse(result);
+  });
+
+  it("wraps a reason it has no copy for instead of answering with the bare token", async () => {
+    fetchMock
+      .mockResolvedValueOnce(testMessageAccepted())
+      .mockResolvedValueOnce(settledTask("failed", { error: "is_archived" }));
+
+    const result = await sendSlackTestMessage(SLACK_INTEGRATION_ID);
+
+    const error = (result as { error?: string }).error ?? "";
+    expect(error).toMatch(/Slack refused the message/);
+    expect(error).toContain("is_archived");
+    expect(error).not.toBe("is_archived");
+  });
+
+  it("keeps Prowler's own wording for a reason the mapping covers", async () => {
+    fetchMock
+      .mockResolvedValueOnce(testMessageAccepted())
+      .mockResolvedValueOnce(
+        settledTask("failed", { error: "not_in_channel" }),
+      );
+
+    const result = await sendSlackTestMessage(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({
+      error: SLACK_ERROR_MESSAGES[SLACK_ERROR_CODE.NOT_IN_CHANNEL],
+    });
+  });
+
+  it("shows a reason the task worded itself as the prose it is", async () => {
+    // Not token-shaped, so nothing is wrapped around it.
+    const prose = "Slack rejected the message: the channel is archived.";
+    fetchMock
+      .mockResolvedValueOnce(testMessageAccepted())
+      .mockResolvedValueOnce(settledTask("failed", { error: prose }));
+
+    const result = await sendSlackTestMessage(SLACK_INTEGRATION_ID);
+
+    expect(result).toEqual({ error: prose });
+  });
+});
+
+/** The calls whose only failure path is one line of copy. */
+const COPY_ONLY_ACTIONS = [
+  {
+    name: "getSlackChannels",
+    call: (id: string) => getSlackChannels(id),
+  },
+  {
+    name: "setSlackDefaultChannel",
+    call: (id: string) => setSlackDefaultChannel(id, FIRST_CHANNEL.id),
+  },
+  {
+    name: "sendSlackTestMessage",
+    call: (id: string) => sendSlackTestMessage(id),
+  },
+];
+
+const rateLimitedResponse = () =>
+  new Response(
+    JSON.stringify({
+      errors: [{ status: "429", detail: "Slack is rate limiting." }],
+    }),
+    {
+      status: 429,
+      headers: {
+        "content-type": "application/vnd.api+json",
+        "Retry-After": "30",
+      },
+    },
+  );
+
+describe.each(COPY_ONLY_ACTIONS)("$name", ({ call }) => {
+  it("reports an upstream Slack failure and still answers in the same words", async () => {
+    fetchMock.mockResolvedValue(
+      errorResponse(UPSTREAM_STATUS, UPSTREAM_DETAIL),
+    );
+
+    const result = await call(SLACK_INTEGRATION_ID);
+
+    // Once, not twice: `handleApiResponse` reports and throws, and the action's
+    // catch sees the mark.
+    expect(captureExceptionMock).toHaveBeenCalledTimes(1);
+    expect(captureExceptionMock.mock.calls[0]?.[1]).toMatchObject({
+      tags: {
+        api_error: true,
+        error_source: SentryErrorSource.HANDLE_API_RESPONSE,
+        error_type: SentryErrorType.SERVER_ERROR,
+        status_code: String(UPSTREAM_STATUS),
+      },
+    });
+    expect(captureMessageMock).not.toHaveBeenCalled();
+
+    expect(result).toEqual({ error: UPSTREAM_DETAIL });
+  });
+
+  it.each([
+    {
+      status: 503,
+      why: "Slack being unavailable, not a fault",
+      response: () => errorResponse(503, "Slack is unavailable."),
+      expected: "Slack is unavailable.",
+    },
+    {
+      status: 429,
+      why: "a wait, not a fault",
+      response: rateLimitedResponse,
+      expected:
+        "Slack is rate limiting Prowler right now. Try again in about 30 seconds.",
+    },
+    {
+      status: 400,
+      why: "a refusal the API meant to give",
+      response: () => errorResponse(400, "No default channel is set."),
+      expected: "No default channel is set.",
+    },
+  ])("reports nothing for a $status: that is $why", async (refusal) => {
+    fetchMock.mockResolvedValue(refusal.response());
+
+    const result = await call(SLACK_INTEGRATION_ID);
+
+    expect(captureExceptionMock).not.toHaveBeenCalled();
+    expect(captureMessageMock).not.toHaveBeenCalled();
+    expect(result).toEqual({ error: refusal.expected });
+  });
+});
+
+/**
+ * The integration id is interpolated into every one of these URLs, so a
+ * malformed one is refused before the request is built.
+ */
+describe.each(COPY_ONLY_ACTIONS)("$name", ({ call }) => {
+  it.each(["../../users", "not-a-uuid", ""])(
+    "asks the API nothing when the integration id is %o",
+    async (id) => {
+      const result = await call(id);
+
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(result).toEqual({ error: SLACK_GENERIC_ERROR_MESSAGE });
+    },
+  );
+});

ui/actions/integrations/slack.ts

@@ -0,0 +1,620 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+import { pollTaskUntilSettled } from "@/actions/task/poll";
+import { apiBaseUrl, getAuthHeaders, parseStringify } from "@/lib";
+import {
+  readSlackFailure,
+  SLACK_GENERIC_ERROR_MESSAGE,
+  SLACK_PARTIAL_CHANNEL_LIST_MESSAGE,
+  SLACK_REASON_TOKEN,
+  SLACK_UNREADABLE_RESULT_MESSAGE,
+  slackErrorMessage,
+  slackRateLimitMessage,
+  slackUnknownReasonMessage,
+} from "@/lib/integrations/slack-errors";
+import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
+import type {
+  IntegrationProps,
+  SlackChannelOption,
+} from "@/types/integrations";
+
+interface SlackUnavailable {
+  unavailable: true;
+}
+
+interface SlackRateLimited {
+  rateLimited: true;
+  retryAfterSeconds: number | null;
+  message: string;
+}
+
+/**
+ * The API accepted the exchange (`2xx`) and the UI could not read the workspace
+ * back: the install happened, only its result is unknown.
+ */
+interface SlackUnconfirmed {
+  unconfirmed: true;
+  message: string;
+}
+
+interface SlackActionError {
+  error: string;
+  /**
+   * The refusal's `code`, when it named one, alongside the copy.
+   *
+   * A caller reads it to recognise a *class* of failure the wording cannot be
+   * pattern-matched for — a Slack grant that has stopped working, which the
+   * contract says can surface from any of these calls (Cross-cutting) and which
+   * is recovered from by reconnecting rather than by retrying.
+   */
+  code?: string | null;
+}
+
+interface SlackAuthorizeUrl {
+  authorizeUrl: string;
+}
+
+export type SlackAuthorizeUrlResult =
+  | SlackAuthorizeUrl
+  | SlackUnavailable
+  | SlackRateLimited
+  | SlackActionError;
+
+interface SlackExchangeInput {
+  code: string;
+  state: string;
+}
+
+const slackExchangeInputSchema = z.object({
+  code: z.string().min(1),
+  state: z.string().min(1),
+});
+
+/**
+ * SSRF guard: the integration id is interpolated into the request URL, so only
+ * the shape the API's ids have reaches it.
+ */
+const integrationIdSchema = z.uuid();
+
+const parseIntegrationId = (integrationId: string): string | null => {
+  const parsed = integrationIdSchema.safeParse(integrationId);
+  return parsed.success ? parsed.data : null;
+};
+
+interface SlackExchangeSuccess {
+  integration: IntegrationProps;
+}
+
+export type SlackExchangeResult =
+  | SlackExchangeSuccess
+  | SlackUnavailable
+  | SlackRateLimited
+  | SlackUnconfirmed
+  | SlackActionError;
+
+/**
+ * `503`: no Slack app configured in this deployment. `404`: no Slack API at
+ * all. Both mean "not available here", unlike `429`/`502` which mean "not now".
+ */
+const isUnavailableStatus = (status: number): boolean =>
+  status === 503 || status === 404;
+
+const RATE_LIMITED_STATUS = 429;
+
+const SLACK_AUTHORIZE_HOSTNAME = "slack.com";
+const SLACK_AUTHORIZE_PATHNAME = "/oauth/v2/authorize";
+const NO_AUTHORIZE_URL_MESSAGE = "Slack did not return an authorization URL.";
+
+/**
+ * The URL is rendered as the `Add to Slack` link's `href`, so anything that is
+ * not Slack's consent screen is a redirect to an origin the user did not choose.
+ */
+const isSlackAuthorizeUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    return (
+      url.protocol === "https:" &&
+      url.hostname === SLACK_AUTHORIZE_HOSTNAME &&
+      url.pathname === SLACK_AUTHORIZE_PATHNAME
+    );
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * The callback names the workspace and redirects on this value alone, so a `2xx`
+ * payload that is not a JSON:API resource (`{}`, `[]`, `"invalid"`) must read as
+ * unreadable rather than as a connected workspace.
+ */
+const isIntegrationResource = (value: unknown): boolean => {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return false;
+  }
+
+  const { id, attributes } = value as Record<string, unknown>;
+
+  return (
+    typeof id === "string" &&
+    typeof attributes === "object" &&
+    attributes !== null &&
+    !Array.isArray(attributes)
+  );
+};
+
+const failureFrom = async (
+  response: Response,
+  fallback: string,
+): Promise<SlackUnavailable | SlackRateLimited | SlackActionError> => {
+  if (isUnavailableStatus(response.status)) return { unavailable: true };
+
+  // A 5xx (including the `502` the contract reserves for "Slack upstream
+  // broke") goes through the repo's 5xx handling, which reports to Sentry and
+  // throws, so the caller's catch answers the user. Must run before
+  // `readSlackFailure`: a body can only be read once.
+  if (response.status >= 500) await handleApiResponse(response);
+
+  const failure = await readSlackFailure(response);
+
+  if (failure.status === RATE_LIMITED_STATUS) {
+    return {
+      rateLimited: true,
+      retryAfterSeconds: failure.retryAfterSeconds,
+      message: slackRateLimitMessage(failure.retryAfterSeconds),
+    };
+  }
+
+  return { error: slackErrorMessage(failure, fallback), code: failure.code };
+};
+
+/**
+ * `failureFrom` flattened to one refusal, for the calls whose only outcome is
+ * "it did not work" — with the `code` carried alongside, unworded, for the
+ * caller that has to act on the class rather than show the sentence. Rate
+ * limiting keeps its own wording: `conversations.list` is Slack tier 2, so a
+ * `429` shows up here (contract, Errors) and the wait it names is the useful
+ * part.
+ */
+const refusalFrom = async (
+  response: Response,
+  fallback: string,
+): Promise<SlackActionError> => {
+  // Same 5xx handling as `failureFrom`, `503` excepted: here too it means Slack
+  // is unavailable. Must run before `readSlackFailure`: a body can only be read
+  // once.
+  if (response.status >= 500 && response.status !== 503) {
+    await handleApiResponse(response);
+  }
+
+  const failure = await readSlackFailure(response);
+
+  return {
+    error:
+      failure.status === RATE_LIMITED_STATUS
+        ? slackRateLimitMessage(failure.retryAfterSeconds)
+        : slackErrorMessage(failure, fallback),
+    code: failure.code,
+  };
+};
+
+/** Mint an OAuth state and get the consent URL. Creates no integration. */
+export const getSlackAuthorizeUrl =
+  async (): Promise<SlackAuthorizeUrlResult> => {
+    const headers = await getAuthHeaders({ contentType: true });
+    const url = new URL(`${apiBaseUrl}/integrations/slack/oauth/authorize-url`);
+
+    try {
+      const response = await fetch(url.toString(), { method: "POST", headers });
+
+      if (!response.ok) {
+        // Awaited inside the `try`: a returned promise's rejection would skip
+        // this `catch`, and a 5xx rejects.
+        return await failureFrom(
+          response,
+          `Unable to start the Slack install: ${response.statusText}`,
+        );
+      }
+
+      // The URL travels in JSON:API `meta`: the call creates no resource. A
+      // non-JSON `2xx` reads as "no URL" instead of throwing a parser message
+      // the user would be shown verbatim.
+      const body = await response.json().catch(() => null);
+      const authorizeUrl = body?.meta?.authorize_url;
+
+      // A URL that is not Slack's own is no more usable than a missing one.
+      if (
+        typeof authorizeUrl !== "string" ||
+        !isSlackAuthorizeUrl(authorizeUrl)
+      ) {
+        return { error: NO_AUTHORIZE_URL_MESSAGE };
+      }
+
+      return { authorizeUrl };
+    } catch (error) {
+      return handleApiError(error);
+    }
+  };
+
+/**
+ * Complete the install with what Slack put in the callback URL. The API
+ * consumes the `state`, exchanges the single-use `code`, and upserts the
+ * tenant's Slack integration.
+ */
+export const exchangeSlackOAuthCode = async (
+  input: SlackExchangeInput,
+): Promise<SlackExchangeResult> => {
+  const parsed = slackExchangeInputSchema.safeParse(input);
+  if (!parsed.success) return { error: SLACK_GENERIC_ERROR_MESSAGE };
+
+  const { code, state } = parsed.data;
+  const headers = await getAuthHeaders({ contentType: true });
+  const url = new URL(`${apiBaseUrl}/integrations/slack/oauth/exchange`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        data: {
+          type: "slack-oauth-exchanges",
+          attributes: { code, state },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      // Awaited inside the `try`: unawaited, a 5xx's rejection would skip this
+      // `catch` and leave the callback on its spinner.
+      return await failureFrom(
+        response,
+        `Unable to connect the Slack workspace: ${response.statusText}`,
+      );
+    }
+
+    const body = await response.json().catch(() => null);
+
+    // Before the guard and on both paths: the API upserted the integration
+    // before answering, so a cache filled when there was none would list the
+    // connected workspace as missing.
+    revalidatePath("/integrations");
+    revalidatePath("/integrations/slack");
+
+    if (!isIntegrationResource(body?.data)) {
+      return { unconfirmed: true, message: SLACK_UNREADABLE_RESULT_MESSAGE };
+    }
+
+    return { integration: parseStringify(body.data) as IntegrationProps };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+interface SlackChannelsSuccess {
+  channels: SlackChannelOption[];
+  /**
+   * Present when these channels are only part of the workspace's, carrying the
+   * sentence that says why: a partial read is a success, so the caller renders
+   * the picker *and* the reason.
+   */
+  incomplete?: string;
+}
+
+export type SlackChannelsResult = SlackChannelsSuccess | SlackActionError;
+
+/**
+ * Cursor pages followed before giving up: `conversations.list` is a tier-2,
+ * rate-limited Slack call (design.md, Risks), so the aggregation is bounded
+ * rather than open-ended.
+ */
+const MAX_CHANNEL_PAGES = 20;
+
+/**
+ * Every channel Prowler can post to in the connected workspace — the picker's
+ * options.
+ *
+ * The durable primitive, not the channel stored on the integration (design D6):
+ * a consumer needing a per-rule channel reads the same endpoint. `links.next`
+ * is followed opaquely — the contract does not pin the cursor parameter naming,
+ * so the UI never builds one of its own. An early stop that still read
+ * something reports through `incomplete`, not as a failure.
+ */
+export const getSlackChannels = async (
+  integrationId: string,
+): Promise<SlackChannelsResult> => {
+  const id = parseIntegrationId(integrationId);
+  if (!id) return { error: SLACK_GENERIC_ERROR_MESSAGE };
+
+  const headers = await getAuthHeaders({ contentType: false });
+  const channels: SlackChannelOption[] = [];
+
+  const listing = new URL(`${apiBaseUrl}/integrations/${id}/slack/channels`);
+  let next: string | null = listing.toString();
+  let incomplete: string | null = null;
+
+  try {
+    for (let page = 0; next && page < MAX_CHANNEL_PAGES; page += 1) {
+      const current: string = next;
+      const response: Response = await fetch(current, {
+        method: "GET",
+        headers,
+      });
+
+      if (!response.ok) {
+        const refusal = await refusalFrom(
+          response,
+          `Unable to read the workspace's channels: ${response.statusText}`,
+        );
+
+        return channels.length > 0
+          ? { channels, incomplete: refusal.error }
+          : refusal;
+      }
+
+      // A page that is not JSON reads as no channels, rather than throwing a
+      // parser message the user would be shown verbatim.
+      const body = await response.json().catch(() => null);
+
+      for (const resource of body?.data ?? []) {
+        channels.push({
+          id: resource?.id,
+          name: resource?.attributes?.name ?? "",
+          is_private: Boolean(resource?.attributes?.is_private),
+        });
+      }
+
+      const rawNext = body?.links?.next;
+      const candidate =
+        typeof rawNext === "string" && rawNext.length > 0
+          ? new URL(rawNext, current)
+          : null;
+      // Resolved against the page it arrived on, so a cursor-only `next` keeps
+      // this listing's path. Followed only while it stays on the listing's
+      // origin: every page is fetched with the tenant's token, and an
+      // off-origin hop made here would carry it along.
+      if (candidate === null) {
+        next = null;
+      } else if (candidate.origin === listing.origin) {
+        next = candidate.toString();
+      } else {
+        next = null;
+        incomplete = SLACK_PARTIAL_CHANNEL_LIST_MESSAGE;
+      }
+    }
+
+    // A link still waiting when the budget ran out. Checked rather than assumed
+    // from the page count: a workspace of exactly `MAX_CHANNEL_PAGES` pages was
+    // read to the end.
+    if (next) incomplete = SLACK_PARTIAL_CHANNEL_LIST_MESSAGE;
+
+    return incomplete === null ? { channels } : { channels, incomplete };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+interface SlackDefaultChannelSuccess {
+  integration: IntegrationProps;
+}
+
+export type SlackDefaultChannelResult =
+  | SlackDefaultChannelSuccess
+  | SlackActionError;
+
+/**
+ * Record the channel Prowler posts to, on the generic integration endpoint.
+ *
+ * A Slack action despite the generic `PATCH`: `channel_not_found` and
+ * `not_in_channel` carry the same `detail`, so only `code` tells them apart,
+ * and the generic action reads `detail` alone. Only `channel_id` travels — the
+ * API derives `channel_name` server-side (design D6).
+ */
+export const setSlackDefaultChannel = async (
+  integrationId: string,
+  channelId: string,
+): Promise<SlackDefaultChannelResult> => {
+  const id = parseIntegrationId(integrationId);
+  if (!id) return { error: SLACK_GENERIC_ERROR_MESSAGE };
+
+  const headers = await getAuthHeaders({ contentType: true });
+  const url = new URL(`${apiBaseUrl}/integrations/${id}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers,
+      body: JSON.stringify({
+        data: {
+          type: "integrations",
+          id,
+          attributes: {
+            integration_type: "slack",
+            configuration: { channel_id: channelId },
+          },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      return refusalFrom(
+        response,
+        `Unable to save the destination channel: ${response.statusText}`,
+      );
+    }
+
+    const body = await response.json().catch(() => null);
+
+    // Before the guard and on both paths: the save happened, so a cache still
+    // holding the previous channel would keep showing it.
+    revalidatePath("/integrations");
+    revalidatePath("/integrations/slack");
+
+    // Guarded as deep as the caller reads: it names the saved channel from
+    // `attributes.configuration`.
+    if (!body?.data?.attributes?.configuration) {
+      return { error: SLACK_UNREADABLE_RESULT_MESSAGE };
+    }
+
+    return { integration: parseStringify(body.data) as IntegrationProps };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+interface SlackTestMessageSuccess {
+  sent: true;
+}
+
+export type SlackTestMessageResult = SlackTestMessageSuccess | SlackActionError;
+
+interface SlackTestMessageTaskResult {
+  error?: string | null;
+}
+
+const TEST_MESSAGE_POLL = { maxAttempts: 20, delayMs: 3000 } as const;
+
+/**
+ * Post the test message to the integration's default channel.
+ *
+ * Async on the API's side — `202` plus a Task (design D9) — so this polls the
+ * same task machinery the connection test uses. A `400` means no default
+ * channel is recorded.
+ */
+export const sendSlackTestMessage = async (
+  integrationId: string,
+): Promise<SlackTestMessageResult> => {
+  const id = parseIntegrationId(integrationId);
+  if (!id) return { error: SLACK_GENERIC_ERROR_MESSAGE };
+
+  const headers = await getAuthHeaders({ contentType: true });
+  const url = new URL(`${apiBaseUrl}/integrations/${id}/slack/test-message`);
+
+  try {
+    const response = await fetch(url.toString(), { method: "POST", headers });
+
+    if (!response.ok) {
+      return refusalFrom(
+        response,
+        `Unable to send the test message: ${response.statusText}`,
+      );
+    }
+
+    // As above: an unreadable `202` is "no task to follow", not a parser
+    // message.
+    const body = await response.json().catch(() => null);
+    const taskId = body?.data?.id;
+
+    if (!taskId) {
+      return { error: "Slack did not start the test message." };
+    }
+
+    const settled = await pollTaskUntilSettled<SlackTestMessageTaskResult>(
+      taskId,
+      TEST_MESSAGE_POLL,
+    );
+
+    if (!settled.ok) {
+      return { error: settled.error };
+    }
+
+    // Slack's refusal travels in the task result, not in an HTTP error: the
+    // post happens after the `202`. A known code gets Prowler's own wording, a
+    // code-shaped reason is wrapped in one (contract, test-message), and prose
+    // is shown as it arrived.
+    const reason = settled.result?.error?.trim();
+    if (reason) {
+      return SLACK_REASON_TOKEN.test(reason)
+        ? {
+            error: slackErrorMessage(
+              { code: reason },
+              slackUnknownReasonMessage(reason),
+            ),
+            // A dead grant can surface here as much as anywhere else, so the
+            // reason travels on as the class it is, not only as its sentence.
+            code: reason,
+          }
+        : { error: reason };
+    }
+    if (settled.state !== "completed") {
+      return { error: "Slack did not accept the test message." };
+    }
+
+    return { sent: true };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+/**
+ * What the API reports about revoking Prowler's token at Slack: one boolean in
+ * `meta`, and nothing else. The API sends no reason for a revocation that did
+ * not happen, so there is none to report — and a UI that invented a place to
+ * put one would be promising the user an explanation it can never fill in.
+ */
+export interface SlackRevocation {
+  /**
+   * Whether Slack confirmed the token no longer grants Prowler anything, or
+   * `null` when the response carried no outcome at all. The contract says the
+   * outcome is always reported, so `null` means the response is wrong rather
+   * than the revocation — and neither answer is claimed on the user's behalf.
+   */
+  revoked: boolean | null;
+}
+
+interface SlackDisconnectSuccess {
+  /** The integration is gone from Prowler, whatever Slack answered. */
+  disconnected: true;
+  revocation: SlackRevocation;
+}
+
+export type SlackDisconnectResult = SlackDisconnectSuccess | SlackActionError;
+
+/**
+ * Disconnect the workspace: `DELETE /integrations/{id}`.
+ *
+ * The generic `deleteIntegration` cannot serve this: it discards the response
+ * body, and the whole point here is what the body carries. Revocation at Slack
+ * is best-effort — the row is removed either way and the outcome travels in
+ * JSON:API `meta` — so a caller has to be able to distinguish "gone and revoked"
+ * from "gone, but still installed in Slack".
+ *
+ * `revoked` is reported only as the API states it: a body without the field (an
+ * empty `204`, say) yields `null`, not `false`. An unreported outcome is not a
+ * failed revocation — it must not send the user off to clean up Slack — and it
+ * is not a confirmed one either, so it must not be reported as access having
+ * been revoked. The row is gone in all three cases, and that much is said.
+ */
+export const disconnectSlackIntegration = async (
+  id: string,
+): Promise<SlackDisconnectResult> => {
+  const headers = await getAuthHeaders({ contentType: true });
+  const url = new URL(`${apiBaseUrl}/integrations/${id}`);
+
+  try {
+    const response = await fetch(url.toString(), { method: "DELETE", headers });
+
+    if (!response.ok) {
+      return refusalFrom(
+        response,
+        `Unable to disconnect the Slack workspace: ${response.statusText}`,
+      );
+    }
+
+    const body = await response.json().catch(() => ({}));
+    const meta = body?.meta ?? {};
+
+    revalidatePath("/integrations");
+    revalidatePath("/integrations/slack");
+
+    return {
+      disconnected: true,
+      revocation: {
+        revoked: typeof meta.revoked === "boolean" ? meta.revoked : null,
+      },
+    };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};

ui/app/(prowler)/integrations/integrations-content.tsx

@@ -0,0 +1,44 @@
+import { ApiKeyLinkCard } from "@/components/integrations/api-key/api-key-link-card";
+import { JiraIntegrationCard } from "@/components/integrations/jira/jira-integration-card";
+import { S3IntegrationCard } from "@/components/integrations/s3/s3-integration-card";
+import { SecurityHubIntegrationCard } from "@/components/integrations/security-hub/security-hub-integration-card";
+import { SlackIntegrationCard } from "@/components/integrations/slack/slack-integration-card";
+import { SsoLinkCard } from "@/components/integrations/sso/sso-link-card";
+import { isCloud } from "@/lib/shared/env";
+
+/**
+ * Split out of `page.tsx` for the browser-mode tests: `ContentLayout`'s navbar
+ * streams async server children a client renderer can't resolve.
+ */
+export function IntegrationsContent() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          Connect external services to enhance your security workflow and
+          automatically export your scan results.
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {/* Amazon S3 Integration */}
+        <S3IntegrationCard />
+
+        {/* AWS Security Hub Integration */}
+        <SecurityHubIntegrationCard />
+
+        {/* Jira Integration */}
+        <JiraIntegrationCard />
+
+        {/* Slack Integration - cloud-only API, nothing to manage self-hosted */}
+        {isCloud() && <SlackIntegrationCard />}
+
+        {/* SSO Configuration - redirects to Profile */}
+        <SsoLinkCard />
+
+        {/* API Keys - redirects to Profile */}
+        <ApiKeyLinkCard />
+      </div>
+    </div>
+  );
+}

ui/app/(prowler)/integrations/integrations-page.integration.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * Browser-mode tests for the Slack entry in the integrations catalogue
+ * (`/integrations`), which is offered in Prowler Cloud only. Driven through
+ * `SlackIntegrationHarness` against the MSW handlers.
+ */
+
+import { describe, expect } from "vitest";
+
+import { it } from "@/__tests__/fixtures";
+import { slackFixture } from "@/__tests__/msw/handlers/slack.fixtures";
+
+import { SlackIntegrationHarness } from "./slack/slack-integration.harness";
+
+describe("the integrations catalogue", () => {
+  it("offers Slack in Prowler Cloud, with a way to manage it", async () => {
+    // Given — a Prowler Cloud deployment (the fixtures' default island).
+    const harness = new SlackIntegrationHarness(slackFixture());
+
+    harness.mountCatalogue();
+
+    expect(await harness.listedIntegrations()).toContain("Slack");
+    expect(harness.offersSlackManagement()).toBe(true);
+  }, 30000);
+
+  it("omits Slack in a deployment that is not Prowler Cloud", async ({
+    seedRuntimeConfig,
+  }) => {
+    seedRuntimeConfig({ cloudEnabled: false });
+    const harness = new SlackIntegrationHarness(slackFixture());
+
+    harness.mountCatalogue();
+
+    const listed = await harness.listedIntegrations();
+    expect(listed).not.toContain("Slack");
+    expect(harness.offersSlackManagement()).toBe(false);
+    // Tripwire: the catalogue rendered, so the assertions above are Slack's
+    // absence rather than the page failing to load.
+    expect(listed).toContain("Jira");
+  }, 30000);
+});

ui/app/(prowler)/integrations/page.tsx

@@ -1,40 +1,11 @@
-import {
-  ApiKeyLinkCard,
-  JiraIntegrationCard,
-  S3IntegrationCard,
-  SecurityHubIntegrationCard,
-  SsoLinkCard,
-} from "@/components/integrations";
 import { ContentLayout } from "@/components/shadcn/content-layout";
 
+import { IntegrationsContent } from "./integrations-content";
+
 export default async function Integrations() {
   return (
     <ContentLayout title="Integrations" icon="lucide:puzzle">
-      <div className="flex flex-col gap-6">
-        <div className="flex flex-col gap-4">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Connect external services to enhance your security workflow and
-            automatically export your scan results.
-          </p>
-        </div>
-
-        <div className="grid gap-6">
-          {/* Amazon S3 Integration */}
-          <S3IntegrationCard />
-
-          {/* AWS Security Hub Integration */}
-          <SecurityHubIntegrationCard />
-
-          {/* Jira Integration */}
-          <JiraIntegrationCard />
-
-          {/* SSO Configuration - redirects to Profile */}
-          <SsoLinkCard />
-
-          {/* API Keys - redirects to Profile */}
-          <ApiKeyLinkCard />
-        </div>
-      </div>
+      <IntegrationsContent />
     </ContentLayout>
   );
 }

ui/app/(prowler)/integrations/slack/callback/page.tsx

@@ -0,0 +1,21 @@
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+
+import { SlackCallback } from "@/components/integrations/slack/slack-callback";
+import { ContentLayout } from "@/components/shadcn/content-layout";
+import { isCloud } from "@/lib/shared/env";
+
+export default async function SlackCallbackPage() {
+  if (!isCloud()) {
+    redirect("/");
+  }
+
+  return (
+    <ContentLayout title="Slack">
+      {/* `SlackCallback` reads the query string, so it needs a boundary. */}
+      <Suspense fallback={null}>
+        <SlackCallback />
+      </Suspense>
+    </ContentLayout>
+  );
+}

ui/app/(prowler)/integrations/slack/page.tsx

@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+
+import { ContentLayout } from "@/components/shadcn/content-layout";
+import { isCloud } from "@/lib/shared/env";
+
+import { SlackIntegrationContent } from "./slack-integration-content";
+
+export default async function SlackIntegrationPage() {
+  // The Slack API is cloud-only, so self-hosted has nothing behind this page.
+  // Mirrors `/alerts`.
+  if (!isCloud()) {
+    redirect("/");
+  }
+
+  return (
+    <ContentLayout title="Slack">
+      <div className="flex flex-col gap-6">
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          Connect a Slack workspace so Prowler can post to one of its channels.
+        </p>
+
+        <SlackIntegrationContent />
+      </div>
+    </ContentLayout>
+  );
+}

ui/app/(prowler)/integrations/slack/slack-callback-page.integration.test.tsx

@@ -0,0 +1,246 @@
+/**
+ * Browser-mode tests for the Slack OAuth callback
+ * (`/integrations/slack/callback`), driven through `SlackIntegrationHarness`.
+ * MSW answers from handlers derived from the API contract in `design.md`.
+ */
+
+import { describe, expect } from "vitest";
+
+import { it } from "@/__tests__/fixtures";
+import {
+  SLACK_EXCHANGE_OUTCOME,
+  SLACK_OAUTH_CODE,
+  SLACK_OAUTH_STATE,
+  slackFixture,
+} from "@/__tests__/msw/handlers/slack.fixtures";
+
+import { SlackIntegrationHarness } from "./slack-integration.harness";
+
+/** The workspace the fixtures connect. */
+const WORKSPACE_NAME = "Prowler HQ";
+
+/**
+ * Callback headlines, spelled out rather than imported so a rename fails here.
+ * `FAILURE_TITLE` is for installs that connected nothing; `UNCONFIRMED_TITLE`
+ * for answers that arrive after the API already upserted the integration.
+ */
+const FAILURE_TITLE = "Slack workspace not connected";
+const UNCONFIRMED_TITLE = "Slack install not confirmed";
+
+describe("returning from Slack", () => {
+  it("completes the install and shows the connected workspace", async () => {
+    const harness = new SlackIntegrationHarness(slackFixture());
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    expect(await harness.completedInstall()).toBe(true);
+    expect(await harness.connectedWorkspaceName()).toBe(WORKSPACE_NAME);
+    // The code is single-use and the exchange runs from a render (design D4):
+    // without the once-guard, a second call burns it and reports a failure.
+    expect(harness.exchangeCallCount).toBe(1);
+    // A completed install invalidates the cached "none connected".
+    expect(harness.revalidatedPaths).toEqual(
+      expect.arrayContaining(["/integrations", "/integrations/slack"]),
+    );
+  }, 30000);
+
+  it("does not report an install the API completed as failed when it answers no content", async () => {
+    // Given — a `204`: the API consumed the code and upserted the integration,
+    // then answered with no body. `response.ok` is true, so this is no refusal.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({
+        exchangeOutcome: SLACK_EXCHANGE_OUTCOME.UNREADABLE_NO_CONTENT,
+      }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/could not read the result of the install/);
+    expect(reason).toMatch(/Slack integration page/);
+    expect(reason).not.toMatch(/JSON/i);
+    expect(harness.offersRetry()).toBe(true);
+    // The `204` says the workspace is connected; the headline cannot deny it.
+    expect(await harness.installFailureTitle()).toBe(UNCONFIRMED_TITLE);
+    // The install exists, so the cached "none connected" has to go with it.
+    expect(harness.revalidatedPaths).toEqual(
+      expect.arrayContaining(["/integrations", "/integrations/slack"]),
+    );
+  }, 30000);
+
+  it("shows Prowler's own wording when a proxy answers the completion with an HTML page", async () => {
+    // Given — a proxy answering `200` with a challenge page instead of JSON.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ exchangeOutcome: SLACK_EXCHANGE_OUTCOME.UNREADABLE_HTML }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    // V8's parse message truncates before the word `html`, so the shared
+    // HTML-shaped-error filter cannot catch this one.
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/could not read the result of the install/);
+    expect(reason).not.toMatch(/DOCTYPE/i);
+    expect(reason).not.toMatch(/not valid JSON/i);
+  }, 30000);
+
+  it("says the result is unreadable, not that the workspace is unknown, when the answer names no resource", async () => {
+    // Given — a `200` carrying well-formed JSON:API with no `data` member.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({
+        exchangeOutcome: SLACK_EXCHANGE_OUTCOME.UNREADABLE_NO_DATA,
+      }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/could not read the result of the install/);
+    expect(reason).not.toMatch(/undefined/i);
+    expect(await harness.completedInstall()).toBe(false);
+  }, 30000);
+
+  it("connects nothing when the user declines in Slack, and offers to retry", async () => {
+    const harness = new SlackIntegrationHarness(slackFixture());
+
+    await harness.mountCallback({ error: "access_denied" });
+
+    expect(await harness.installFailureReason()).toMatch(
+      /not approved in Slack/,
+    );
+    expect(harness.offersRetry()).toBe(true);
+    // A declined consent carries no code, so there was nothing to exchange.
+    expect(harness.exchangeCallCount).toBe(0);
+  }, 30000);
+
+  it("surfaces the reason when Slack refuses to complete the install", async () => {
+    // Given — Slack rejects the code, and the API's own wording explains it.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ exchangeOutcome: SLACK_EXCHANGE_OUTCOME.SLACK_REFUSED }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    // A refusal Prowler has no wording of its own for falls back to the API's
+    // `detail`, not to a generic failure.
+    expect(await harness.installFailureReason()).toMatch(
+      /OAuth code is invalid/,
+    );
+    expect(harness.offersRetry()).toBe(true);
+  }, 30000);
+
+  it("surfaces a completion the API refuses, and connects nothing", async () => {
+    // Given — the state was minted for another session, or already consumed.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ exchangeOutcome: SLACK_EXCHANGE_OUTCOME.REFUSED_STATE }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: "state-from-another-session",
+    });
+
+    expect(await harness.installFailureReason()).toMatch(
+      /state is invalid, expired, or already consumed/,
+    );
+    // The API refused before consuming anything, so nothing was created and the
+    // headline states that plainly.
+    expect(await harness.installFailureTitle()).toBe(FAILURE_TITLE);
+    expect(await harness.completedInstall()).toBe(false);
+    expect(harness.offersRetry()).toBe(true);
+    // Refused once, not retried into a second burnt code.
+    expect(harness.exchangeCallCount).toBe(1);
+  }, 30000);
+
+  it("says how to resolve a workspace conflict, in Prowler's own words", async () => {
+    // Given — this tenant already has a different workspace connected, which
+    // the API refuses as a 409 naming the conflict in `code`.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({
+        exchangeOutcome: SLACK_EXCHANGE_OUTCOME.DIFFERENT_WORKSPACE,
+      }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    // The copy comes from the error `code`: the API's `detail` states the
+    // conflict but not the way out of it.
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/already connected to a different Slack workspace/);
+    expect(reason).toMatch(/Disconnect it before connecting another/);
+    expect(reason).not.toMatch(/tenant/);
+    expect(await harness.completedInstall()).toBe(false);
+    expect(harness.offersRetry()).toBe(true);
+  }, 30000);
+
+  it("tells the user when to come back if Slack is rate limiting the install", async () => {
+    // Given — Slack answers 429 with a Retry-After.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ rateLimited: true }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/rate limiting/);
+    expect(reason).toMatch(/about 30 seconds/);
+    expect(reason).not.toMatch(/not available in this environment/);
+    // A 429 refuses the exchange outright, so nothing was connected: the plain
+    // headline, unlike the unreadable `2xx` that arrives after the upsert.
+    expect(await harness.installFailureTitle()).toBe(FAILURE_TITLE);
+    expect(harness.offersRetry()).toBe(true);
+  }, 30000);
+
+  it("reports Slack being broken upstream, rather than leaving the callback spinning", async () => {
+    // Given — the completion answers `502`, the contract's status for a Slack
+    // upstream failure. The shared 5xx handling throws, so the callback only
+    // renders this if the action answers that rejection itself.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ oauthUpstreamError: true }),
+    );
+
+    await harness.mountCallback({
+      code: SLACK_OAUTH_CODE,
+      state: SLACK_OAUTH_STATE,
+    });
+
+    // The API refused, so nothing was created: not the "could not confirm" the
+    // page falls back to when the action never answers at all.
+    const reason = await harness.installFailureReason();
+    expect(reason).toMatch(/temporarily unavailable/);
+    expect(reason).not.toMatch(/could not confirm/);
+    expect(await harness.completedInstall()).toBe(false);
+    expect(harness.offersRetry()).toBe(true);
+  }, 30000);
+
+  it("does not attempt an exchange when the completion carries no state", async () => {
+    const harness = new SlackIntegrationHarness(slackFixture());
+
+    await harness.mountCallback({ code: SLACK_OAUTH_CODE });
+
+    // Refused before the API is ever asked, so no code is spent.
+    expect(await harness.installFailureReason()).toMatch(/incomplete response/);
+    expect(harness.exchangeCallCount).toBe(0);
+  }, 30000);
+});

ui/app/(prowler)/integrations/slack/slack-integration-content.tsx

@@ -0,0 +1,61 @@
+import { getIntegrations } from "@/actions/integrations/integrations";
+import { getSlackAuthorizeUrl } from "@/actions/integrations/slack";
+import { SlackIntegrationManager } from "@/components/integrations/slack/slack-integration-manager";
+import { GENERIC_SERVER_ERROR_MESSAGE } from "@/lib/helper";
+import { INTEGRATION_TYPE, type IntegrationProps } from "@/types/integrations";
+
+/**
+ * `getIntegrations` throws a `>= 500` answer past its own catch, which covers
+ * only transport. Uncaught it trips the route's error boundary and replaces a
+ * page that could still offer the install, so report it as `{ error }` and take
+ * the page's one error path.
+ */
+const readSlackIntegrations = async (searchParams: URLSearchParams) => {
+  try {
+    return await getIntegrations(searchParams);
+  } catch {
+    // The thrown message can carry the server's own wording; `handleApiResponse`
+    // already reported it to Sentry.
+    return { error: GENERIC_SERVER_ERROR_MESSAGE };
+  }
+};
+
+/**
+ * Split out of `page.tsx` so the browser-mode tests can render it without the
+ * surrounding `ContentLayout`.
+ */
+export async function SlackIntegrationContent() {
+  const searchParams = new URLSearchParams();
+  searchParams.set("filter[integration_type]", INTEGRATION_TYPE.SLACK);
+  // One workspace per tenant, so one row is the whole result set.
+  searchParams.set("page[size]", "1");
+
+  const integrations = await readSlackIntegrations(searchParams);
+  const loadError =
+    integrations && "error" in integrations
+      ? (integrations.error as string)
+      : null;
+  const integration: IntegrationProps | null =
+    (integrations?.data?.[0] as IntegrationProps | undefined) ?? null;
+
+  const authorize = integration ? null : await getSlackAuthorizeUrl();
+
+  return (
+    <SlackIntegrationManager
+      integration={integration}
+      authorizeUrl={
+        authorize && "authorizeUrl" in authorize ? authorize.authorizeUrl : null
+      }
+      unavailable={Boolean(authorize && "unavailable" in authorize)}
+      // Rate limited is not unavailable: the install is still on offer, it just
+      // cannot be started yet.
+      rateLimitMessage={
+        authorize && "rateLimited" in authorize ? authorize.message : null
+      }
+      loadError={
+        loadError ??
+        (authorize && "error" in authorize ? authorize.error : null)
+      }
+    />
+  );
+}

ui/app/(prowler)/integrations/slack/slack-integration.harness.ts

@@ -0,0 +1,792 @@
+/**
+ * Page-level test harness for the Slack integration (Vitest Browser Mode).
+ *
+ * A client renderer cannot render an async server component, so the component is
+ * called and the element it returns is what gets rendered.
+ */
+
+import { revalidatePath } from "next/cache";
+import { createElement } from "react";
+import { vi } from "vitest";
+
+import { BrowserHarness } from "@/__tests__/browser-harness";
+import { handlersForSlack } from "@/__tests__/msw/handlers/slack";
+import type { SlackFixture } from "@/__tests__/msw/handlers/slack.fixtures";
+import { worker } from "@/__tests__/msw/worker";
+import { render } from "@/__tests__/render-browser";
+import { setSlackDefaultChannel } from "@/actions/integrations/slack";
+import { SlackCallback } from "@/components/integrations/slack/slack-callback";
+
+import { IntegrationsContent } from "../integrations-content";
+
+import { SlackIntegrationContent } from "./slack-integration-content";
+
+export const CONNECTION_OUTCOME = {
+  SUCCESS: "success",
+  FAILURE: "failure",
+} as const;
+
+export type ConnectionOutcome =
+  (typeof CONNECTION_OUTCOME)[keyof typeof CONNECTION_OUTCOME];
+
+export const TEST_MESSAGE_OUTCOME = {
+  SENT: "sent",
+  FAILED: "failed",
+} as const;
+
+export type TestMessageOutcome =
+  (typeof TEST_MESSAGE_OUTCOME)[keyof typeof TEST_MESSAGE_OUTCOME];
+
+/** Sentinel: the page settled on "no channel recorded", rather than not yet. */
+const NO_DEFAULT_CHANNEL = "<no channel recorded>";
+
+/** Whether disconnecting also revoked Prowler's token at Slack. */
+export const REVOCATION_OUTCOME = {
+  REVOKED: "revoked",
+  NOT_REVOKED: "not-revoked",
+} as const;
+
+export type RevocationOutcome =
+  (typeof REVOCATION_OUTCOME)[keyof typeof REVOCATION_OUTCOME];
+
+interface CallbackParams {
+  code?: string;
+  state?: string;
+  /** Slack's own refusal code, e.g. `access_denied`. */
+  error?: string;
+}
+
+export class SlackIntegrationHarness extends BrowserHarness<SlackFixture> {
+  get exchangeCallCount(): number {
+    return this.countRequests("POST", "/slack/oauth/exchange");
+  }
+
+  get authorizeUrlCallCount(): number {
+    return this.countRequests("POST", "/slack/oauth/authorize-url");
+  }
+
+  /** Paths the actions asked Next to refresh (`next/cache` is stubbed in this lane). */
+  get revalidatedPaths(): string[] {
+    return vi.mocked(revalidatePath).mock.calls.map(([path]) => path);
+  }
+
+  // --- Mounting -----------------------------------------------------------
+
+  private wireHandlers(): void {
+    // The stub is module-level and shared, so clearing it here is what makes
+    // `revalidatedPaths` mean "since this mount".
+    vi.mocked(revalidatePath).mockClear();
+    worker.use(...handlersForSlack(this.fixture));
+    this.trackRequests(worker);
+  }
+
+  async mount(): Promise<void> {
+    window.history.replaceState(null, "", "/integrations/slack");
+    this.wireHandlers();
+
+    const readsBefore = this.channelListCallCount;
+    this.mounted = render(await SlackIntegrationContent());
+    if (this.fixture.install) await this.waitForChannelsRead(readsBefore);
+  }
+
+  private mounted: ReturnType<typeof render> | null = null;
+
+  /**
+   * Open the management page again, the way a later visit does — the handlers in
+   * place keep serving what the previous visit left behind. Unmounts the previous
+   * render first: two live copies would make every assertion ambiguous.
+   */
+  async revisit(): Promise<void> {
+    (await this.mounted)?.unmount();
+    const readsBefore = this.channelListCallCount;
+    this.mounted = render(await SlackIntegrationContent());
+    await this.mounted;
+    if (this.fixture.install) await this.waitForChannelsRead(readsBefore);
+  }
+
+  /**
+   * Refresh the page's server data under the open card, as `revalidatePath` does
+   * after an action: new props, no unmount, so React state survives — unlike
+   * `revisit()`, which re-seeds everything from scratch.
+   */
+  async refreshPageData(): Promise<void> {
+    const rendered = await this.mounted;
+    if (!rendered) {
+      throw new Error("refreshPageData: the page is not mounted");
+    }
+    await rendered.rerender(await SlackIntegrationContent());
+  }
+
+  async mountCallback({ code, state, error }: CallbackParams): Promise<void> {
+    const params = new URLSearchParams();
+    if (code) params.set("code", code);
+    if (state) params.set("state", state);
+    if (error) params.set("error", error);
+    window.history.replaceState(
+      null,
+      "",
+      `/integrations/slack/callback?${params.toString()}`,
+    );
+    this.wireHandlers();
+
+    render(createElement(SlackCallback));
+  }
+
+  /** Mount the integrations catalogue. No handlers: every card there is static. */
+  mountCatalogue(): void {
+    window.history.replaceState(null, "", "/integrations");
+
+    render(createElement(IntegrationsContent));
+  }
+
+  // --- The integrations catalogue ------------------------------------------
+
+  async listedIntegrations(): Promise<string[]> {
+    const headings = await this.waitFor(
+      () => {
+        const found = Array.from(
+          this.container.querySelectorAll<HTMLElement>("h4"),
+        );
+        return found.length > 0 ? found : null;
+      },
+      5000,
+      "the integrations catalogue",
+    );
+    return headings.map((heading) => (heading.textContent ?? "").trim());
+  }
+
+  offersSlackManagement(): boolean {
+    return this.q('a[href="/integrations/slack"]') !== null;
+  }
+
+  // --- Starting the install -----------------------------------------------
+
+  private connectLink(): HTMLAnchorElement | null {
+    return (
+      Array.from(this.container.querySelectorAll("a")).find((anchor) =>
+        /Add to Slack/.test(anchor.textContent ?? ""),
+      ) ?? null
+    );
+  }
+
+  async authorizeUrl(): Promise<string> {
+    const link = await this.waitFor(
+      () => this.connectLink(),
+      5000,
+      "the Add to Slack link",
+    );
+    return link.href;
+  }
+
+  /**
+   * Clicks the install affordance and reports where it points. The default
+   * action is cancelled: following the link navigates the test frame off the app.
+   */
+  async connect(): Promise<string> {
+    const link = await this.waitFor(
+      () => this.connectLink(),
+      5000,
+      "the Add to Slack link",
+    );
+
+    let destination = "";
+    const intercept = (event: MouseEvent) => {
+      event.preventDefault();
+      destination = link.href;
+    };
+    link.addEventListener("click", intercept);
+    try {
+      await this.clickElement(link, { fallbackToDomClick: true });
+    } finally {
+      link.removeEventListener("click", intercept);
+    }
+
+    return destination;
+  }
+
+  offersInstall(): boolean {
+    return this.connectLink() !== null;
+  }
+
+  async waitForUnavailable(): Promise<void> {
+    await this.waitForText(/Slack is not available in this environment yet/);
+  }
+
+  saysUnavailable(): boolean {
+    return this.containsText(/Slack is not available in this environment yet/);
+  }
+
+  saysLoadFailed(): boolean {
+    return this.containsText(/Could not load your Slack integration/);
+  }
+
+  async rateLimitNotice(): Promise<string> {
+    await this.waitForText(/Slack is busy right now/, 10000);
+    const description = await this.waitFor(
+      () => this.q('[data-slot="alert-description"]'),
+      5000,
+      "the rate limit notice",
+    );
+    return (description.textContent ?? "").trim();
+  }
+
+  async loadErrorNotice(): Promise<string> {
+    await this.waitForText(/Could not load your Slack integration/, 10000);
+    const description = await this.waitFor(
+      () => this.q('[data-slot="alert-description"]'),
+      5000,
+      "the load error notice",
+    );
+    return (description.textContent ?? "").trim();
+  }
+
+  // --- Connected state ----------------------------------------------------
+
+  /**
+   * Read from the heading element, not the page text: in `textContent`
+   * "Connected to <workspace>" runs straight into the copy that follows it.
+   */
+  async connectedWorkspaceName(): Promise<string> {
+    const heading = await this.waitFor(
+      () => this.deepestElementMatching(/^Connected to \S/),
+      5000,
+      "the connected workspace name",
+    );
+    return (heading.textContent ?? "").trim().replace(/^Connected to /, "");
+  }
+
+  /** Last match in document order: every ancestor of a match matches too. */
+  private deepestElementMatching(pattern: RegExp): HTMLElement | null {
+    return (
+      Array.from(this.container.querySelectorAll<HTMLElement>("*"))
+        .reverse()
+        .find((element) => pattern.test((element.textContent ?? "").trim())) ??
+      null
+    );
+  }
+
+  /**
+   * Keyed on the badge's state attribute, not its copy: the heading beside it
+   * also starts "Connected to …".
+   */
+  async connectionBadge(): Promise<string> {
+    const badge = await this.waitFor(
+      () => this.q("[data-connection-status]"),
+      5000,
+      "the connection badge",
+    );
+    return (badge.textContent ?? "").trim();
+  }
+
+  async offersConnectionTest(): Promise<boolean> {
+    const button = await this.waitFor(
+      () => this.buttonByText(/Test connection/),
+      5000,
+      "the Test connection button",
+    );
+    return !button.disabled;
+  }
+
+  saysChannelIsNextStep(): boolean {
+    return this.containsText(/Choosing a destination channel is the next step/);
+  }
+
+  /**
+   * The "last checked" line as rendered, or null when the page shows none —
+   * which is what a workspace whose connection was never checked shows.
+   */
+  lastCheckedLine(): string | null {
+    const line = Array.from(
+      this.container.querySelectorAll<HTMLElement>("p"),
+    ).find((p) => /^Last checked:/.test((p.textContent ?? "").trim()));
+    return line ? (line.textContent ?? "").trim() : null;
+  }
+
+  async testConnection(): Promise<ConnectionOutcome> {
+    await this.clickButton(/Test connection/);
+
+    return this.waitFor(
+      () => {
+        if (this.containsText(/Connection test successful/)) {
+          return CONNECTION_OUTCOME.SUCCESS;
+        }
+        if (this.containsText(/Connection test failed/)) {
+          return CONNECTION_OUTCOME.FAILURE;
+        }
+        return null;
+      },
+      15000,
+      "the connection test outcome",
+    );
+  }
+
+  // --- Returning from Slack -----------------------------------------------
+
+  /**
+   * The one element every non-success outcome renders. Keyed on it rather than
+   * the alert title, which is not the same claim on every outcome.
+   */
+  private backLink(): HTMLAnchorElement | null {
+    return (
+      Array.from(this.container.querySelectorAll("a")).find(
+        (anchor) =>
+          anchor.getAttribute("href") === "/integrations/slack" &&
+          /Back to Slack integration/.test(anchor.textContent ?? ""),
+      ) ?? null
+    );
+  }
+
+  async completedInstall(): Promise<boolean> {
+    const outcome = await this.waitFor(
+      () => this.containsText(/Connected to /) || this.backLink() !== null,
+      10000,
+      "the callback outcome",
+    );
+    return outcome && this.containsText(/Connected to /);
+  }
+
+  async installFailureReason(): Promise<string> {
+    await this.waitFor(() => this.backLink(), 10000, "the failed callback");
+    const description = await this.waitFor(
+      () => this.q('[data-slot="alert-description"]'),
+      5000,
+      "the failure reason",
+    );
+    return (description.textContent ?? "").trim();
+  }
+
+  async installFailureTitle(): Promise<string> {
+    await this.waitFor(() => this.backLink(), 10000, "the failed callback");
+    const title = await this.waitFor(
+      () => this.q('[data-slot="alert-title"]'),
+      5000,
+      "the failure title",
+    );
+    return (title.textContent ?? "").trim();
+  }
+
+  offersRetry(): boolean {
+    return this.backLink() !== null || this.offersInstall();
+  }
+
+  // --- Choosing a destination channel --------------------------------------
+
+  /** Channel reads issued — one per cursor page the UI followed. */
+  get channelListCallCount(): number {
+    return this.countRequests("GET", "/slack/channels");
+  }
+
+  /**
+   * Wait for the channel read every connected mount starts, counting from the
+   * reads already issued: one still in flight when the test ends lands in the
+   * middle of the next, against a harness that never asked for it.
+   */
+  private async waitForChannelsRead(readsBefore: number): Promise<void> {
+    await this.waitFor(
+      () => {
+        const refresh = this.buttonByText(/Refresh channels/);
+        return this.channelListCallCount > readsBefore &&
+          refresh !== null &&
+          !refresh.disabled
+          ? true
+          : null;
+      },
+      15000,
+      "the workspace's channels to be read",
+    );
+  }
+
+  /**
+   * Open the picker and hand back its options. A re-render landing mid-gesture
+   * makes Radix drop the open state, so re-open from the keyboard when nothing
+   * mounted at all.
+   */
+  private async openChannelPicker(): Promise<HTMLElement[]> {
+    const mounted = (): HTMLElement[] | null => {
+      const options = Array.from(
+        document.querySelectorAll<HTMLElement>('[role="option"]'),
+      );
+      return options.length > 0 ? options : null;
+    };
+
+    const alreadyOpen = mounted();
+    if (alreadyOpen) return alreadyOpen;
+
+    const trigger = await this.waitFor<HTMLElement>(
+      () => this.q("#slack-channel"),
+      10000,
+      "the channel picker",
+    );
+
+    await this.clickElement(trigger, { fallbackToDomClick: true });
+
+    let options = await this.waitForOrNull(
+      mounted,
+      2000,
+      "the channel options",
+    );
+    if (!options) {
+      await this.user.keyboard("{Enter}");
+      options = await this.waitForOrNull(mounted, 8000, "the channel options");
+    }
+
+    if (!options) {
+      throw new Error("openChannelPicker: the channel picker offered nothing");
+    }
+    return options;
+  }
+
+  private async closeChannelPicker(): Promise<void> {
+    await this.user.keyboard("{Escape}");
+    await this.waitForTransition();
+  }
+
+  /**
+   * Re-read the workspace's channels, the way a user does after inviting
+   * `@Prowler` to one in Slack. Waits for the read to have settled, not for the
+   * click alone.
+   */
+  async refreshChannels(): Promise<void> {
+    const readsBefore = this.channelListCallCount;
+    await this.clickButton(/Refresh channels/);
+
+    await this.waitFor(
+      () => {
+        const button = this.buttonByText(/Refresh channels/);
+        return (
+          this.channelListCallCount > readsBefore &&
+          button !== null &&
+          !button.disabled
+        );
+      },
+      15000,
+      "the workspace's channels to be read again",
+    );
+  }
+
+  /** The channels the workspace offers, in the order the picker lists them. */
+  async channelOptions(): Promise<string[]> {
+    const options = await this.openChannelPicker();
+    const names = options.map(
+      (option) => option.getAttribute("data-channel") ?? "",
+    );
+
+    await this.closeChannelPicker();
+
+    return names;
+  }
+
+  /**
+   * Whether the channel offered under `name` is presented as private — read
+   * from the marker the user sees, not from how the option is wired up.
+   */
+  async isChannelShownAsPrivate(name: string): Promise<boolean> {
+    const options = await this.openChannelPicker();
+    const option = options.find(
+      (element) => element.getAttribute("data-channel") === name,
+    );
+
+    await this.closeChannelPicker();
+
+    return /Private/.test(option?.textContent ?? "");
+  }
+
+  private async pickAndSave(name: string): Promise<void> {
+    const options = await this.openChannelPicker();
+    const option = options.find(
+      (element) => element.getAttribute("data-channel") === name,
+    );
+
+    if (!option) {
+      throw new Error(`pickAndSave: no channel named "${name}" is offered`);
+    }
+
+    await this.user.click(option);
+    await this.waitForTransition();
+    await this.clickButton(/Save channel/);
+  }
+
+  /** Pick a channel, save it, and wait for it to be recorded as the destination. */
+  async chooseChannel(name: string): Promise<void> {
+    await this.pickAndSave(name);
+    await this.waitFor(
+      () => this.defaultChannelName() === name,
+      15000,
+      `#${name} to be recorded as the destination`,
+    );
+  }
+
+  /**
+   * Record a different destination away from this page — a second tab, or someone
+   * else in the tenant. Goes through the same call the page makes, leaving this
+   * page's own copy of it untouched.
+   */
+  async channelRecordedElsewhere(name: string): Promise<void> {
+    const channel = this.fixture.channels.find((c) => c.name === name);
+    if (!channel) {
+      throw new Error(
+        `channelRecordedElsewhere: no channel named "${name}" is offered`,
+      );
+    }
+
+    const integrationId = this.fixture.install?.id;
+    if (!integrationId) {
+      throw new Error("channelRecordedElsewhere: no workspace is connected");
+    }
+
+    const result = await setSlackDefaultChannel(integrationId, channel.id);
+    if ("error" in result) {
+      throw new Error(`channelRecordedElsewhere: ${result.error}`);
+    }
+  }
+
+  /** Whether the picked channel can be saved — false when there is nothing new to save. */
+  offersChannelSave(): boolean {
+    const button = this.buttonByText(/Save channel/);
+    return button !== null && !button.disabled;
+  }
+
+  /**
+   * Try to save a channel the API refuses and hand back what the user is told. A
+   * save that succeeds fails the test rather than timing out.
+   */
+  async refusedChannelSave(name: string): Promise<string> {
+    await this.pickAndSave(name);
+
+    return this.waitFor(
+      () => {
+        if (this.defaultChannelName() === name) {
+          throw new Error(
+            `refusedChannelSave: #${name} was recorded, not refused`,
+          );
+        }
+        return this.toastText(/Could not save the destination channel/);
+      },
+      15000,
+      "the refused channel save",
+    );
+  }
+
+  /**
+   * The text of the toast matching `pattern` — title and message together. Radix
+   * portals each toast into its viewport as an `<li>`, outside the page's markup.
+   */
+  private toastText(pattern: RegExp): string | null {
+    const toast = Array.from(
+      document.querySelectorAll<HTMLElement>("ol li"),
+    ).find((element) => pattern.test(element.textContent ?? ""));
+    return toast ? (toast.textContent ?? "").replace(/\s+/g, " ").trim() : null;
+  }
+
+  private defaultChannelName(): string | null {
+    return (
+      /Prowler posts to #(\S+?)\./.exec(
+        this.container.textContent ?? "",
+      )?.[1] ?? null
+    );
+  }
+
+  /** The channel recorded as the integration's destination, if any. */
+  async defaultChannel(): Promise<string | null> {
+    const settled = await this.waitFor(
+      () =>
+        this.defaultChannelName() ??
+        (this.containsText(/No destination channel recorded yet/)
+          ? NO_DEFAULT_CHANNEL
+          : null),
+      10000,
+      "the recorded destination channel",
+    );
+    return settled === NO_DEFAULT_CHANNEL ? null : settled;
+  }
+
+  /** What the user is told when the workspace exposes no channel at all. */
+  async channelPickerMessage(): Promise<string> {
+    const alert = await this.waitFor(
+      () =>
+        Array.from(
+          this.container.querySelectorAll<HTMLElement>('[data-slot="alert"]'),
+        ).find((element) =>
+          /No channels available yet|Could not read the workspace/.test(
+            element.textContent ?? "",
+          ),
+        ),
+      10000,
+      "the channel picker's message",
+    );
+    return (alert.textContent ?? "").replace(/\s+/g, " ").trim();
+  }
+
+  /**
+   * What the user is told about a list short of the workspace, shown beside a
+   * picker that still works — unlike `channelPickerMessage()`, which replaces it.
+   */
+  partialListNotice(): string | null {
+    const notice = this.q("[data-channels-notice]");
+    return notice
+      ? (notice.textContent ?? "").replace(/\s+/g, " ").trim()
+      : null;
+  }
+
+  /** Whether the picker was replaced by the "could not read them" alert. */
+  saysChannelsUnreadable(): boolean {
+    return this.containsText(/Could not read the workspace/);
+  }
+
+  /** The invite copy that says how to make a private channel appear. */
+  channelInviteHint(): string | null {
+    const hint = Array.from(
+      this.container.querySelectorAll<HTMLElement>("p"),
+    ).find((element) => /invites? @Prowler/.test(element.textContent ?? ""));
+    return hint ? (hint.textContent ?? "").trim() : null;
+  }
+
+  // --- The test message ----------------------------------------------------
+
+  offersTestMessage(): boolean {
+    return this.buttonByText(/Send test message/) !== null;
+  }
+
+  private testMessageAlert(): HTMLElement | null {
+    return (
+      Array.from(
+        this.container.querySelectorAll<HTMLElement>('[data-slot="alert"]'),
+      ).find((element) =>
+        /Test message (sent|failed)/.test(element.textContent ?? ""),
+      ) ?? null
+    );
+  }
+
+  async sendTestMessage(): Promise<TestMessageOutcome> {
+    await this.clickButton(/Send test message/);
+
+    return this.waitFor(
+      () => {
+        const alert = this.testMessageAlert();
+        if (!alert) return null;
+        return /Test message sent/.test(alert.textContent ?? "")
+          ? TEST_MESSAGE_OUTCOME.SENT
+          : TEST_MESSAGE_OUTCOME.FAILED;
+      },
+      15000,
+      "the test message outcome",
+    );
+  }
+
+  async lastTestMessageOutcome(): Promise<string> {
+    const alert = await this.waitFor(
+      () => this.testMessageAlert(),
+      10000,
+      "the test message outcome",
+    );
+    const description = alert.querySelector<HTMLElement>(
+      '[data-slot="alert-description"]',
+    );
+    return (description?.textContent ?? "").trim();
+  }
+
+  // --- Disconnecting ------------------------------------------------------
+
+  get disconnectCallCount(): number {
+    return this.countRequests("DELETE", "/integrations/");
+  }
+
+  /**
+   * Disconnects the workspace, confirming the way a user has to, and reports
+   * what the page says about the revocation — the two outcomes are mutually
+   * exclusive, so asking for one is also a check that the other is absent.
+   */
+  async disconnect(): Promise<RevocationOutcome> {
+    // The card's action opens the confirmation; the dialog's own button carries
+    // the noun too, so the two never resolve to each other.
+    await this.clickButton(/^\s*Disconnect\s*$/);
+    await this.clickButton(/Disconnect workspace/);
+
+    return this.waitFor(
+      () => {
+        if (this.alertMatching(/revocation/i)) {
+          return REVOCATION_OUTCOME.NOT_REVOKED;
+        }
+        if (this.containsText(/Slack workspace disconnected/)) {
+          return REVOCATION_OUTCOME.REVOKED;
+        }
+        return null;
+      },
+      15000,
+      "the disconnect outcome",
+    );
+  }
+
+  /**
+   * Whether the page is back to offering an install with no workspace
+   * connected. The consent URL is minted after the disconnect, so the install
+   * affordance appears a beat after the copy does.
+   */
+  async returnedToUnconnectedState(): Promise<boolean> {
+    await this.waitForText(/No workspace connected/, 10000);
+    return (
+      (await this.waitForOrNull(
+        () => this.offersInstall(),
+        5000,
+        "the install to be offered again",
+      )) ?? false
+    );
+  }
+
+  /**
+   * What the user is told when the row was removed but Slack never confirmed
+   * the revocation.
+   */
+  async revocationNotice(): Promise<string> {
+    const notice = await this.waitFor(
+      () => this.alertMatching(/revocation/i),
+      10000,
+      "the revocation notice",
+    );
+    return (notice.textContent ?? "").trim();
+  }
+
+  // --- A credential Slack no longer accepts --------------------------------
+
+  /** What the user is told when Slack has stopped accepting the credential. */
+  async revokedCredentialNotice(): Promise<string> {
+    const notice = await this.waitFor(
+      () => this.alertMatching(/no longer accepts Prowler's access/),
+      10000,
+      "the revoked-credential notice",
+    );
+    return (notice.textContent ?? "").replace(/\s+/g, " ").trim();
+  }
+
+  private reconnectLink(): HTMLAnchorElement | null {
+    return (
+      Array.from(this.container.querySelectorAll("a")).find((anchor) =>
+        /Reconnect to Slack/.test(anchor.textContent ?? ""),
+      ) ?? null
+    );
+  }
+
+  /** Whether the page offers to approve Prowler in the workspace again. */
+  offersReconnect(): boolean {
+    return this.reconnectLink() !== null;
+  }
+
+  /** The consent URL the reconnect affordance points at, once it is offered. */
+  async reconnectUrl(): Promise<string> {
+    const link = await this.waitFor(
+      () => this.reconnectLink(),
+      10000,
+      "the reconnect link",
+    );
+    return link.href;
+  }
+
+  /** The alert whose text matches, of however many the page is showing. */
+  private alertMatching(pattern: RegExp): HTMLElement | null {
+    return (
+      Array.from(
+        this.container.querySelectorAll<HTMLElement>('[data-slot="alert"]'),
+      ).find((alert) => pattern.test(alert.textContent ?? "")) ?? null
+    );
+  }
+}

ui/app/(prowler)/integrations/slack/slack-page.integration.test.tsx

@@ -0,0 +1,746 @@
+/**
+ * Browser-mode tests for the Slack integration page (`/integrations/slack`),
+ * driven through `SlackIntegrationHarness`. MSW answers from handlers derived
+ * from the API contract in `design.md`. The OAuth callback is its own route,
+ * covered in `slack-callback-page.integration.test.tsx`.
+ */
+
+import { describe, expect } from "vitest";
+
+import { it } from "@/__tests__/fixtures";
+import {
+  configuredSlackFixture,
+  connectedSlackFixture,
+  INTEGRATIONS_SERVER_ERROR_DETAIL,
+  partiallyReadSlackFixture,
+  revokedTokenSlackFixture,
+  revokeFailureSlackFixture,
+  SLACK_CHANNEL_NOT_FOUND_REFUSAL,
+  SLACK_MISSING_SCOPE_CODE,
+  SLACK_MISSING_SCOPE_REFUSAL,
+  SLACK_NOT_IN_CHANNEL_CODE,
+  SLACK_NOT_IN_CHANNEL_REFUSAL,
+  SLACK_PRIVATE_CHANNEL,
+  SLACK_PUBLIC_CHANNEL,
+  SLACK_RATE_LIMITED_REFUSAL,
+  SLACK_SECOND_PUBLIC_CHANNEL,
+  SLACK_TEST_MESSAGE_REFUSED_DETAIL,
+  SLACK_TOKEN_EXPIRED_CODE,
+  SLACK_TOKEN_EXPIRED_REFUSAL,
+  SLACK_TOKEN_REVOKED_CODE,
+  SLACK_UNKNOWN_CHANNEL_DETAIL,
+  SLACK_UNMAPPED_REASON_CODE,
+  SLACK_UPSTREAM_REFUSAL,
+  slackFixture,
+  slackFixtureWithDefaultChannel,
+  unreadableCheckTimeSlackFixture,
+} from "@/__tests__/msw/handlers/slack.fixtures";
+
+import {
+  CONNECTION_OUTCOME,
+  REVOCATION_OUTCOME,
+  SlackIntegrationHarness,
+  TEST_MESSAGE_OUTCOME,
+} from "./slack-integration.harness";
+
+/** The shape the channel save is asserted against — only the id travels. */
+interface PatchIntegrationBody {
+  data: { attributes: { configuration: { channel_id: string } } };
+}
+
+/** The workspace the fixtures connect. */
+const WORKSPACE_NAME = "Prowler HQ";
+
+/** The only scopes Prowler asks a workspace for (design D2). */
+const REQUIRED_SCOPES = [
+  "chat:write",
+  "chat:write.public",
+  "channels:read",
+  "groups:read",
+];
+
+describe("starting the install", () => {
+  it("sends the user to Slack's consent screen for the access Prowler needs", async () => {
+    // Given — a tenant with no workspace connected yet.
+    const harness = new SlackIntegrationHarness(slackFixture());
+    await harness.mount();
+
+    const consentScreen = new URL(await harness.connect());
+
+    expect(`${consentScreen.origin}${consentScreen.pathname}`).toBe(
+      "https://slack.com/oauth/v2/authorize",
+    );
+    expect((consentScreen.searchParams.get("scope") ?? "").split(",")).toEqual(
+      expect.arrayContaining(REQUIRED_SCOPES),
+    );
+    // The state is server-minted, binding this install to the session
+    // (design D5).
+    expect(consentScreen.searchParams.get("state")).toBeTruthy();
+  }, 30000);
+
+  it("says so when the deployment has no Slack app, instead of offering an install", async () => {
+    // Given — no SLACK_CLIENT_ID/SECRET/REDIRECT_URI, which the API answers
+    // with a 503.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ appConfigured: false }),
+    );
+
+    await harness.mount();
+
+    // The read itself succeeded: an empty collection is what a deployment with
+    // no Slack app has, so nothing claims it failed.
+    await harness.waitForUnavailable();
+    expect(harness.offersInstall()).toBe(false);
+    expect(harness.saysLoadFailed()).toBe(false);
+  }, 30000);
+
+  it("still says the read failed when the deployment also has no Slack app", async () => {
+    // Given — both states, which coincide during rollout and rollback
+    // (design.md, Migration Plan §2-3 and §5).
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ appConfigured: false, listServerError: true }),
+    );
+
+    await harness.mount();
+
+    // Both notices: the read's is the actionable half (a retry may still show a
+    // workspace this tenant has connected).
+    const notice = await harness.loadErrorNotice();
+    expect(notice).toMatch(/temporarily unavailable/);
+    expect(notice).not.toMatch(INTEGRATIONS_SERVER_ERROR_DETAIL);
+    expect(harness.saysUnavailable()).toBe(true);
+    // The install is still not on offer: there is no Slack app to install into.
+    expect(harness.offersInstall()).toBe(false);
+  }, 30000);
+
+  it("says Slack is busy, not that the deployment has no Slack app, when it is rate limiting", async () => {
+    // Given — the app is configured; Slack rate limits (429) the call that
+    // mints the consent URL.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ rateLimited: true }),
+    );
+
+    await harness.mount();
+
+    expect(await harness.rateLimitNotice()).toMatch(/about 30 seconds/);
+    expect(harness.saysUnavailable()).toBe(false);
+  }, 30000);
+
+  it("keeps the page usable when reading the install fails on the server", async () => {
+    // Given — the shared `GET /integrations` read answers 500. The action
+    // throws instead of returning a result, so the page has to catch it:
+    // uncaught, the route's error boundary replaces the Slack page.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ listServerError: true }),
+    );
+
+    await harness.mount();
+
+    const notice = await harness.loadErrorNotice();
+    expect(notice).toMatch(/temporarily unavailable/);
+    expect(notice).not.toMatch(INTEGRATIONS_SERVER_ERROR_DETAIL);
+    // The install stays on offer: one read failed, the Slack app is fine.
+    expect(harness.offersInstall()).toBe(true);
+  }, 30000);
+
+  it("keeps the page usable when Slack's own side is broken upstream", async () => {
+    // Given — the `502` the contract reserves for a Slack upstream failure.
+    // The UI's shared 5xx handling throws, so this is the page's other
+    // rejection path.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ oauthUpstreamError: true }),
+    );
+
+    await harness.mount();
+
+    const notice = await harness.loadErrorNotice();
+    expect(notice).toMatch(/temporarily unavailable/);
+    // 502 is not 503: the app is configured, Slack is down.
+    expect(harness.saysUnavailable()).toBe(false);
+  }, 30000);
+
+  it("names the missing consent URL when a proxy answers that call with an HTML page", async () => {
+    // Given — a 200 carrying a challenge page instead of JSON. Nothing refused
+    // the call, so the action reaches its success path with no URL.
+    const harness = new SlackIntegrationHarness(
+      slackFixture({ authorizeUrlUnreadable: true }),
+    );
+
+    await harness.mount();
+
+    // V8 truncates the parse message to `"<!DOCTYPE "`, before the word `html`,
+    // so the UI's HTML-shaped-error filter can never match it.
+    const notice = await harness.loadErrorNotice();
+    expect(notice).toMatch(/did not return an authorization URL/);
+    expect(notice).not.toMatch(/DOCTYPE/i);
+    expect(notice).not.toMatch(/not valid JSON/i);
+  }, 30000);
+});
+
+describe("a connected workspace", () => {
+  it("identifies the workspace and reports the connection as healthy", async () => {
+    // Given — a finished setup: workspace approved and a destination channel
+    // recorded, which the API requires before it will check a connection.
+    const harness = new SlackIntegrationHarness(configuredSlackFixture());
+    await harness.mount();
+
+    expect(await harness.connectedWorkspaceName()).toBe(WORKSPACE_NAME);
+    expect(await harness.connectionBadge()).toBe("Connected");
+    expect(await harness.offersConnectionTest()).toBe(true);
+    expect(await harness.testConnection()).toBe(CONNECTION_OUTCOME.SUCCESS);
+    // One workspace per tenant (design D10): no second install on offer, and no
+    // consent URL minted for a page that would never use it.
+    expect(harness.offersInstall()).toBe(false);
+    expect(harness.authorizeUrlCallCount).toBe(0);
+  }, 30000);
+
+  it("still identifies the workspace before a destination channel is chosen", async () => {
+    // Given — the state the OAuth exchange leaves behind.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+
+    await harness.mount();
+
+    // The configuration carries no channel keys at all, which is "nothing
+    // chosen yet", not a broken install.
+    expect(await harness.connectedWorkspaceName()).toBe(WORKSPACE_NAME);
+    expect(harness.offersInstall()).toBe(false);
+  }, 30000);
+
+  it("reports the connection as never checked, not as broken, before the first check", async () => {
+    // Given — the state the OAuth exchange leaves behind: `connected` is null,
+    // neither true nor false (design.md, "Connection state, in order").
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+
+    await harness.mount();
+
+    const badge = await harness.connectionBadge();
+    expect(badge).toBe("Not checked yet");
+    expect(badge).not.toMatch(/Disconnected/);
+  }, 30000);
+
+  it("keeps the page usable when the recorded check time is one no parser can read", async () => {
+    // Given — a finished setup whose `connection_last_checked_at` is a zero
+    // date. `date-fns` throws a RangeError on it, which would replace the whole
+    // page with the route's error boundary.
+    const harness = new SlackIntegrationHarness(
+      unreadableCheckTimeSlackFixture(),
+    );
+
+    await harness.mount();
+
+    expect(await harness.connectedWorkspaceName()).toBe(WORKSPACE_NAME);
+    expect(await harness.connectionBadge()).toBe("Connected");
+    // Nothing to show, so nothing is shown: the same line a workspace that was
+    // never checked renders.
+    expect(harness.lastCheckedLine()).toBeNull();
+  }, 30000);
+
+  it("does not offer a connection check the API is bound to refuse", async () => {
+    // Given — a workspace connected and no destination channel recorded.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+
+    await harness.mount();
+
+    // The check posts to the destination channel, so with none recorded the API
+    // answers 400 rather than `connected: false`.
+    expect(await harness.offersConnectionTest()).toBe(false);
+    expect(harness.saysChannelIsNextStep()).toBe(true);
+  }, 30000);
+});
+
+describe("choosing a destination channel", () => {
+  it("offers the workspace's channels and remembers the one chosen", async () => {
+    // Given — a connected tenant whose channels span two cursor pages.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+    await harness.mount();
+
+    // Then — every channel is offered, so the picker followed `links.next`
+    // rather than stopping at the first page (design D6).
+    expect(await harness.channelOptions()).toEqual([
+      SLACK_PUBLIC_CHANNEL.name,
+      SLACK_SECOND_PUBLIC_CHANNEL.name,
+      SLACK_PRIVATE_CHANNEL.name,
+    ]);
+    expect(harness.channelListCallCount).toBe(2);
+
+    // When
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // Then — only the id is submitted: the API derives the name from it.
+    const saved = await harness.lastRequestBody<PatchIntegrationBody>(
+      "PATCH",
+      "/integrations/",
+    );
+    expect(saved?.data.attributes.configuration).toEqual({
+      channel_id: SLACK_PUBLIC_CHANNEL.id,
+    });
+
+    // And — a later visit shows it, under the name the API derived from the id.
+    await harness.revisit();
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+  }, 60000);
+
+  it("offers a private channel the app was invited to, marked as private, and saves it", async () => {
+    // Given — `@Prowler` was invited to one private channel; `groups:read` is
+    // membership-gated (D2).
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+    await harness.mount();
+
+    // Then
+    expect(await harness.channelOptions()).toContain(
+      SLACK_PRIVATE_CHANNEL.name,
+    );
+    expect(
+      await harness.isChannelShownAsPrivate(SLACK_PRIVATE_CHANNEL.name),
+    ).toBe(true);
+    expect(
+      await harness.isChannelShownAsPrivate(SLACK_PUBLIC_CHANNEL.name),
+    ).toBe(false);
+
+    // When
+    await harness.chooseChannel(SLACK_PRIVATE_CHANNEL.name);
+
+    // Then
+    expect(await harness.defaultChannel()).toBe(SLACK_PRIVATE_CHANNEL.name);
+  }, 60000);
+
+  it("offers a private channel once @Prowler is invited to it and the list is refreshed", async () => {
+    // Given — a workspace whose only channels are public: `groups:read` is
+    // membership-gated (design D2).
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        channels: [
+          { ...SLACK_PUBLIC_CHANNEL },
+          { ...SLACK_SECOND_PUBLIC_CHANNEL },
+        ],
+      }),
+    );
+    await harness.mount();
+    expect(await harness.channelOptions()).not.toContain(
+      SLACK_PRIVATE_CHANNEL.name,
+    );
+
+    // When — `@Prowler` is invited to a private channel, and the user refreshes
+    // instead of reconnecting the workspace.
+    harness.fixture.channels.push({ ...SLACK_PRIVATE_CHANNEL });
+    await harness.refreshChannels();
+
+    // Then
+    expect(await harness.channelOptions()).toContain(
+      SLACK_PRIVATE_CHANNEL.name,
+    );
+    expect(
+      await harness.isChannelShownAsPrivate(SLACK_PRIVATE_CHANNEL.name),
+    ).toBe(true);
+  }, 60000);
+
+  it("says what to do when the workspace exposes no channel Prowler can post to", async () => {
+    // Given — a connected workspace exposing no channels at all.
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({ channels: [] }),
+    );
+
+    // When
+    await harness.mount();
+
+    // Then — the user is told what to do, not merely that the list is empty.
+    const message = await harness.channelPickerMessage();
+    expect(message).toMatch(/No channels available yet/);
+    expect(message).toMatch(/invite @Prowler/);
+    expect(await harness.defaultChannel()).toBeNull();
+    expect(harness.offersTestMessage()).toBe(false);
+  }, 30000);
+
+  it("offers the connection check as soon as the destination is saved, without a revisit", async () => {
+    // Given — connected with nothing recorded: the check posts to the
+    // destination, so it is not offered yet.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+    await harness.mount();
+    expect(await harness.offersConnectionTest()).toBe(false);
+    expect(harness.saysChannelIsNextStep()).toBe(true);
+
+    // When
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // Then — everything waiting on a destination moves with the save, in the
+    // same paint: no reload to find the check on offer.
+    expect(await harness.offersConnectionTest()).toBe(true);
+    expect(harness.saysChannelIsNextStep()).toBe(false);
+    // And — the check really runs.
+    expect(await harness.testConnection()).toBe(CONNECTION_OUTCOME.SUCCESS);
+  }, 60000);
+
+  it("follows the destination recorded elsewhere when the page's data refreshes under it", async () => {
+    // Given — a finished setup, open on screen.
+    const harness = new SlackIntegrationHarness(configuredSlackFixture());
+    await harness.mount();
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+
+    // When — the destination changes elsewhere (a second tab, another user) and
+    // this page's server data refreshes under the open card, as
+    // `revalidatePath` does after an action.
+    await harness.channelRecordedElsewhere(SLACK_SECOND_PUBLIC_CHANNEL.name);
+    await harness.refreshPageData();
+
+    // Then — the card reports what is on record, not the copy it took at mount.
+    expect(await harness.defaultChannel()).toBe(
+      SLACK_SECOND_PUBLIC_CHANNEL.name,
+    );
+    expect(harness.offersTestMessage()).toBe(true);
+    // And — the picker followed too: the superseded destination is not left one
+    // click from being saved back.
+    expect(harness.offersChannelSave()).toBe(false);
+  }, 60000);
+
+  it("says which permission is missing when Slack refuses the channel listing, leaving the recorded channel alone", async () => {
+    // Given — a recorded destination, and an install missing a scope the listing
+    // needs. The API names it in `code` (contract, Errors), not in `detail`.
+    const harness = new SlackIntegrationHarness(
+      slackFixtureWithDefaultChannel(SLACK_PUBLIC_CHANNEL, {
+        channelsRefusal: SLACK_MISSING_SCOPE_REFUSAL,
+      }),
+    );
+
+    // When
+    await harness.mount();
+
+    // Then — the reason, worded as a fix, with the invite copy still beside the
+    // picker.
+    const message = await harness.channelPickerMessage();
+    expect(message).toMatch(/missing a permission it needs in Slack/);
+    expect(message).toMatch(/Connect the workspace again and approve/);
+    // Slack's reason is a protocol token: it travels in `code` and is never
+    // shown.
+    expect(message).not.toMatch(SLACK_MISSING_SCOPE_CODE);
+    expect(harness.channelInviteHint()).toMatch(/invites @Prowler/);
+
+    // And — a listing Prowler could not read says nothing about the channel
+    // already recorded.
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+    expect(harness.offersTestMessage()).toBe(true);
+  }, 30000);
+
+  it("names the wait Slack asked for when it rate limits the channel listing", async () => {
+    // Given — `conversations.list` is Slack tier 2 and paginated (contract,
+    // Errors); the `429` carries the wait in `Retry-After`.
+    const harness = new SlackIntegrationHarness(
+      slackFixtureWithDefaultChannel(SLACK_PUBLIC_CHANNEL, {
+        channelsRefusal: SLACK_RATE_LIMITED_REFUSAL,
+      }),
+    );
+
+    // When
+    await harness.mount();
+
+    // Then — when to come back, not just that it was refused: the wait is
+    // asserted, not only the wording.
+    const message = await harness.channelPickerMessage();
+    expect(message).toMatch(/rate limiting/);
+    expect(message).toMatch(/about 30 seconds/);
+
+    // And — waiting is the fix, so nothing is said about permissions.
+    expect(message).not.toMatch(/permission/);
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+  }, 30000);
+
+  it("keeps the channels it did read on offer when Slack refuses a later page", async () => {
+    // Given — a two-page workspace whose second page is rate limited
+    // (`conversations.list` is tier 2, contract, Errors).
+    const harness = new SlackIntegrationHarness(partiallyReadSlackFixture());
+
+    // When
+    await harness.mount();
+
+    // Then — the picker offers what was read rather than being replaced by the
+    // refusal: every reload re-runs the same reads into the same limit.
+    expect(await harness.channelOptions()).toEqual([
+      SLACK_PUBLIC_CHANNEL.name,
+      SLACK_SECOND_PUBLIC_CHANNEL.name,
+    ]);
+    expect(harness.saysChannelsUnreadable()).toBe(false);
+
+    // And — the wait is still said, as the explanation for the short list.
+    const notice = harness.partialListNotice();
+    expect(notice).toMatch(/rate limiting/);
+    expect(notice).toMatch(/about 30 seconds/);
+
+    // And — a partial read says nothing about the destination already recorded.
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+    expect(harness.offersTestMessage()).toBe(true);
+  }, 60000);
+
+  it("says nothing about a short list when the whole workspace was read", async () => {
+    // Given — the default workspace: two cursor pages, read to the end.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+
+    // When
+    await harness.mount();
+
+    // Then
+    expect(harness.partialListNotice()).toBeNull();
+  }, 30000);
+
+  it("falls back to the API's wording when the listing fails upstream", async () => {
+    // Given — a `502`, which names no `code` because there is nothing to act on
+    // (contract, Errors).
+    const harness = new SlackIntegrationHarness(
+      slackFixtureWithDefaultChannel(SLACK_PUBLIC_CHANNEL, {
+        channelsRefusal: SLACK_UPSTREAM_REFUSAL,
+      }),
+    );
+
+    // When
+    await harness.mount();
+
+    // Then — the API's own `detail`, and not a wait that was never promised.
+    const message = await harness.channelPickerMessage();
+    expect(message).toMatch(/Slack is temporarily unavailable/);
+    expect(message).not.toMatch(/rate limiting/);
+    expect(await harness.defaultChannel()).toBe(SLACK_PUBLIC_CHANNEL.name);
+  }, 30000);
+
+  it("says to invite @Prowler when Slack refuses the channel because the app is not in it", async () => {
+    // Given — a private channel the app was removed from. The API validates the
+    // channel against Slack on the way in and refuses with `not_in_channel`.
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        channelSaveRefusal: SLACK_NOT_IN_CHANNEL_REFUSAL,
+      }),
+    );
+    await harness.mount();
+
+    // When
+    const refusal = await harness.refusedChannelSave(
+      SLACK_PRIVATE_CHANNEL.name,
+    );
+
+    // Then — the one fix the user can carry out themselves, in Slack.
+    expect(refusal).toMatch(/Prowler is not in that channel/);
+    expect(refusal).toMatch(/Invite @Prowler to it in Slack/);
+    expect(refusal).not.toMatch(SLACK_NOT_IN_CHANNEL_CODE);
+
+    // And — nothing was recorded, so nothing is offered to post with.
+    expect(await harness.defaultChannel()).toBeNull();
+    expect(harness.offersTestMessage()).toBe(false);
+  }, 60000);
+
+  it("says the channel is gone, not that @Prowler needs inviting, when Slack no longer has it", async () => {
+    // Given — a channel archived since the listing was read. The API's `detail`
+    // is word-for-word the one for `not_in_channel`, so only `code` tells them
+    // apart.
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        channelSaveRefusal: SLACK_CHANNEL_NOT_FOUND_REFUSAL,
+      }),
+    );
+    await harness.mount();
+
+    // When
+    const refusal = await harness.refusedChannelSave(SLACK_PUBLIC_CHANNEL.name);
+
+    // Then — a different problem, so different copy: nothing to invite to a
+    // channel that no longer exists.
+    expect(refusal).toMatch(/no longer exists in the workspace/);
+    expect(refusal).toMatch(/Choose another one/);
+    expect(refusal).not.toMatch(/Invite @Prowler/);
+    expect(refusal).not.toMatch(SLACK_UNKNOWN_CHANNEL_DETAIL);
+    expect(await harness.defaultChannel()).toBeNull();
+  }, 60000);
+});
+
+describe("sending a test message", () => {
+  it("is not offered until a destination channel is recorded", async () => {
+    // Given — connected, but no channel chosen yet.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+
+    // When
+    await harness.mount();
+
+    // Then
+    expect(await harness.defaultChannel()).toBeNull();
+    expect(harness.offersTestMessage()).toBe(false);
+  }, 30000);
+
+  it("sends a test message to the recorded channel and reports it delivered", async () => {
+    // Given — a tenant that has recorded where Prowler should post.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+    await harness.mount();
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // When
+    const outcome = await harness.sendTestMessage();
+
+    // Then — sent, and the user reads which channel it went to.
+    expect(outcome).toBe(TEST_MESSAGE_OUTCOME.SENT);
+    expect(await harness.lastTestMessageOutcome()).toMatch(
+      `#${SLACK_PUBLIC_CHANNEL.name}`,
+    );
+  }, 60000);
+
+  it("surfaces the reason when Slack refuses the test message", async () => {
+    // Given — the post fails, which the API reports on the task it handed back
+    // (design D9), not on the request that started it, using the same stable
+    // reason the synchronous endpoints put in `code`.
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        testMessage: { accepted: false, error: SLACK_NOT_IN_CHANNEL_CODE },
+      }),
+    );
+    await harness.mount();
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // When
+    const outcome = await harness.sendTestMessage();
+
+    // Then — the same copy the synchronous refusals get, not the raw token.
+    expect(outcome).toBe(TEST_MESSAGE_OUTCOME.FAILED);
+    const reported = await harness.lastTestMessageOutcome();
+    expect(reported).toMatch(/Prowler is not in that channel/);
+    expect(reported).toMatch(/Invite @Prowler to it in Slack/);
+    expect(reported).not.toMatch(SLACK_NOT_IN_CHANNEL_CODE);
+  }, 60000);
+
+  it("reports a refusal the task words itself, rather than swallowing it", async () => {
+    // Given — a task result carrying prose instead of a stable reason; its exact
+    // shape is the cloud lane's to pin down (contract, test-message).
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        testMessage: {
+          accepted: false,
+          error: SLACK_TEST_MESSAGE_REFUSED_DETAIL,
+        },
+      }),
+    );
+    await harness.mount();
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // When
+    const outcome = await harness.sendTestMessage();
+
+    // Then
+    expect(outcome).toBe(TEST_MESSAGE_OUTCOME.FAILED);
+    expect(await harness.lastTestMessageOutcome()).toMatch(
+      SLACK_TEST_MESSAGE_REFUSED_DETAIL,
+    );
+  }, 60000);
+
+  it("keeps a reason it has no copy for inside its own sentence, not as the whole message", async () => {
+    // Given — a real Slack reason this UI has no copy for; Slack's set is
+    // open-ended, so this is the ordinary case.
+    const harness = new SlackIntegrationHarness(
+      connectedSlackFixture({
+        testMessage: { accepted: false, error: SLACK_UNMAPPED_REASON_CODE },
+      }),
+    );
+    await harness.mount();
+    await harness.chooseChannel(SLACK_PUBLIC_CHANNEL.name);
+
+    // When
+    const outcome = await harness.sendTestMessage();
+
+    // Then — Prowler's wording, with Slack's word for it kept for diagnosis.
+    expect(outcome).toBe(TEST_MESSAGE_OUTCOME.FAILED);
+    const reported = await harness.lastTestMessageOutcome();
+    expect(reported).toMatch(/Slack refused the message/);
+    expect(reported).toMatch(SLACK_UNMAPPED_REASON_CODE);
+    expect(reported).not.toBe(SLACK_UNMAPPED_REASON_CODE);
+  }, 60000);
+});
+
+describe("disconnecting a workspace", () => {
+  it("removes the integration and returns the card to its unconnected state", async () => {
+    // Given — a tenant with a workspace connected.
+    const harness = new SlackIntegrationHarness(connectedSlackFixture());
+    await harness.mount();
+
+    // When — the user disconnects and confirms.
+    // Then — Slack confirmed the revocation, so the user is told the access is
+    // gone and nothing warns them to finish the job by hand.
+    expect(await harness.disconnect()).toBe(REVOCATION_OUTCOME.REVOKED);
+
+    // And the integration is gone, with the page offering a fresh install.
+    expect(harness.disconnectCallCount).toBe(1);
+    expect(await harness.returnedToUnconnectedState()).toBe(true);
+  }, 30000);
+
+  it("still removes the integration when the revocation fails, and says access may need removing by hand", async () => {
+    // Given — Slack will not accept the revocation. Revocation is best-effort:
+    // the row goes either way and the outcome travels in `meta` as the single
+    // boolean the API sends — there is no reason alongside it.
+    const harness = new SlackIntegrationHarness(revokeFailureSlackFixture());
+    await harness.mount();
+
+    // When
+    expect(await harness.disconnect()).toBe(REVOCATION_OUTCOME.NOT_REVOKED);
+
+    // Then — the user reads what is true of both sides: nothing is left in
+    // Prowler to retry, and the app may still be installed at Slack. Saying
+    // "there is nothing to retry here" is the point — the one thing a user
+    // reaches for after a failure is the thing that cannot help.
+    const notice = await harness.revocationNotice();
+    expect(notice).toMatch(/gone from Prowler/);
+    expect(notice).toMatch(/nothing to retry here/);
+    expect(notice).toMatch(/may still be installed in Prowler HQ/);
+    expect(notice).toMatch(
+      /remove it from that workspace's Slack app settings/,
+    );
+    // The row is removed regardless, so the page does not keep offering a
+    // workspace that no longer exists here.
+    expect(await harness.returnedToUnconnectedState()).toBe(true);
+  }, 30000);
+});
+
+describe("a credential Slack no longer accepts", () => {
+  it("says the connection check found a dead credential, and offers to connect the workspace again", async () => {
+    // Given — the token was revoked at Slack, so the row still reads connected
+    // until a check runs (contract, Cross-cutting).
+    const harness = new SlackIntegrationHarness(revokedTokenSlackFixture());
+    await harness.mount();
+
+    // When
+    expect(await harness.testConnection()).toBe(CONNECTION_OUTCOME.FAILURE);
+
+    // Then — what died, in Prowler's words, and a way forward rather than only
+    // an error: a revoked token is fixed by approving Prowler again, not by
+    // checking a second time.
+    const notice = await harness.revokedCredentialNotice();
+    expect(notice).toMatch(/no longer accepts Prowler's access to Prowler HQ/);
+    expect(notice).toMatch(/Prowler's access to Slack was revoked/);
+    expect(notice).toMatch(/Connect the workspace again to restore access/);
+    // Slack's reason is a protocol token: it is what the UI switched on, never
+    // what it showed.
+    expect(notice).not.toMatch(new RegExp(SLACK_TOKEN_REVOKED_CODE));
+
+    const consentScreen = new URL(await harness.reconnectUrl());
+    expect(`${consentScreen.origin}${consentScreen.pathname}`).toBe(
+      "https://slack.com/oauth/v2/authorize",
+    );
+    expect(harness.offersReconnect()).toBe(true);
+  }, 30000);
+
+  it("offers the same recovery when the channel listing is what finds the credential dead", async () => {
+    // Given — a finished setup whose credential expired. The listing runs on
+    // arrival, so it, not the connection check, is what meets Slack first —
+    // and the contract says any call can be the one that surfaces this.
+    const harness = new SlackIntegrationHarness(
+      configuredSlackFixture({ channelsRefusal: SLACK_TOKEN_EXPIRED_REFUSAL }),
+    );
+
+    // When — nothing but opening the page.
+    await harness.mount();
+
+    // Then — the same answer as the connection check gives, worded for the way
+    // this credential died, and not left as a channel problem the user would
+    // go looking for a channel fix for.
+    const notice = await harness.revokedCredentialNotice();
+    expect(notice).toMatch(/Prowler's Slack credential has expired/);
+    expect(notice).toMatch(/Connect the workspace again to restore access/);
+    expect(harness.offersReconnect()).toBe(true);
+
+    // And the picker says the same thing, in the same words: the API's own
+    // `detail` names the raw reason, and it is `code` the UI answered from.
+    const message = await harness.channelPickerMessage();
+    expect(message).toMatch(/Prowler's Slack credential has expired/);
+    expect(message).not.toMatch(new RegExp(SLACK_TOKEN_EXPIRED_CODE));
+  }, 30000);
+});

ui/app/(prowler)/providers/providers-tab-content.tsx

@@ -32,13 +32,6 @@ export const ProvidersTabContent = async ({
 }: {
   searchParams: SearchParamsProps;
 }) => {
-  // The React Compiler (`reactCompiler: true`) otherwise instruments this as a
-  // client component and injects `useMemoCache`, which needs a React dispatcher.
-  // An async server component renders once per request, so there is nothing to
-  // memoize — and the injected hook makes it uncallable outside a render, which
-  // is exactly how the browser-mode tests mount it.
-  "use no memo";
-
   const isCloudEnvironment = isCloud();
   const [providersView, scanConfigsState] = await Promise.all([
     loadProvidersAccountsViewData({

ui/changelog.d/slack-integration-connect-workspace.added.md

@@ -0,0 +1 @@
+Slack integration: connect a Slack workspace from the Integrations page (Prowler Cloud only)

ui/components/icons/services/IconServices.tsx

@@ -752,6 +752,52 @@ export const JiraIcon: React.FC<IconSvgProps> = ({
   </svg>
 );
 
+export const SlackIcon: React.FC<IconSvgProps> = ({
+  size = 32,
+  width,
+  height,
+  className = "rounded-md",
+  ...props
+}) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height ?? size}
+    role="presentation"
+    viewBox="0 0 48 48"
+    width={width ?? size}
+    className={className}
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 12C0 5.37258 5.37258 0 12 0H36C42.6274 0 48 5.37258 48 12V36C48 42.6274 42.6274 48 36 48H12C5.37258 48 0 42.6274 0 36V12Z"
+      fill="#FFFFFF"
+    />
+    {/* Slack mark on its native 122.8 grid, scaled into the 48px tile's 30px
+        safe area (30 / 122.8 = 0.2443). */}
+    <g transform="translate(9 9) scale(0.2443)">
+      <path
+        d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
+        fill="#E01E5A"
+      />
+      <path
+        d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
+        fill="#36C5F0"
+      />
+      <path
+        d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
+        fill="#2EB67D"
+      />
+      <path
+        d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
+        fill="#ECB22E"
+      />
+    </g>
+  </svg>
+);
+
 export const AWSSecurityHubIcon: React.FC<IconSvgProps> = ({
   size = 32,
   width,

ui/components/integrations/jira/jira-integrations-manager.tsx

@@ -302,7 +302,7 @@ export const JiraIntegrationsManager = ({
                     icon={<JiraIcon size={32} />}
                     title={`${integration.attributes.configuration.domain}`}
                     connectionStatus={{
-                      connected: integration.attributes.connected,
+                      connected: integration.attributes.connected === true,
                     }}
                   />
                 </CardHeader>

ui/components/integrations/s3/s3-integrations-manager.tsx

@@ -316,7 +316,7 @@ export const S3IntegrationsManager = ({
                       "/"
                     }`}
                     connectionStatus={{
-                      connected: integration.attributes.connected,
+                      connected: integration.attributes.connected === true,
                     }}
                     navigationUrl={`https://console.aws.amazon.com/s3/buckets/${integration.attributes.configuration.bucket_name}`}
                   />

ui/components/integrations/security-hub/security-hub-integrations-manager.tsx

@@ -380,7 +380,7 @@ export const SecurityHubIntegrationsManager = ({
                         },
                       ]}
                       connectionStatus={{
-                        connected: integration.attributes.connected,
+                        connected: integration.attributes.connected === true,
                       }}
                     />
                   </CardHeader>

ui/components/integrations/shared/integration-card-header.tsx

@@ -6,18 +6,47 @@ import { ReactNode } from "react";
 import { Badge } from "@/components/shadcn";
 import { cn } from "@/lib/utils";
 
+// `null` means never checked, not disconnected: it must not get the fail tokens.
+const CONNECTION_BADGE = {
+  connected: {
+    label: "Connected",
+    className:
+      "bg-bg-pass-secondary text-text-success-primary border-transparent",
+  },
+  disconnected: {
+    label: "Disconnected",
+    className:
+      "bg-bg-fail-secondary text-text-error-primary border-transparent",
+  },
+  unchecked: {
+    label: "Not checked yet",
+    className: "border-border-tag bg-bg-tag text-text-neutral-secondary",
+  },
+} as const;
+
+type ConnectionBadgeState = keyof typeof CONNECTION_BADGE;
+
+const connectionBadgeState = (
+  connected: boolean | null,
+): ConnectionBadgeState =>
+  connected === null ? "unchecked" : connected ? "connected" : "disconnected";
+
+interface IntegrationCardChip {
+  label: string;
+  className?: string;
+}
+
+interface IntegrationConnectionStatus {
+  connected: boolean | null;
+  label?: string;
+}
+
 interface IntegrationCardHeaderProps {
   icon: ReactNode;
   title: string;
   subtitle?: string;
-  chips?: Array<{
-    label: string;
-    className?: string;
-  }>;
-  connectionStatus?: {
-    connected: boolean;
-    label?: string;
-  };
+  chips?: IntegrationCardChip[];
+  connectionStatus?: IntegrationConnectionStatus;
   navigationUrl?: string;
 }
 
@@ -29,6 +58,11 @@ export const IntegrationCardHeader = ({
   connectionStatus,
   navigationUrl,
 }: IntegrationCardHeaderProps) => {
+  const badgeState = connectionStatus
+    ? connectionBadgeState(connectionStatus.connected)
+    : null;
+  const badge = badgeState ? CONNECTION_BADGE[badgeState] : null;
+
   return (
     <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <div className="flex items-center gap-3">
@@ -55,7 +89,7 @@ export const IntegrationCardHeader = ({
           )}
         </div>
       </div>
-      {(chips.length > 0 || connectionStatus) && (
+      {(chips.length > 0 || badge) && (
         <div className="flex flex-wrap items-center gap-2">
           {chips.map((chip, index) => (
             <Badge
@@ -69,18 +103,13 @@ export const IntegrationCardHeader = ({
               {chip.label}
             </Badge>
           ))}
-          {connectionStatus && (
+          {badge && badgeState && (
             <Badge
               variant="outline"
-              className={cn(
-                "text-xs font-normal",
-                connectionStatus.connected
-                  ? "bg-bg-pass-secondary text-text-success-primary border-transparent"
-                  : "bg-bg-fail-secondary text-text-error-primary border-transparent",
-              )}
+              data-connection-status={badgeState}
+              className={cn("text-xs font-normal", badge.className)}
             >
-              {connectionStatus.label ||
-                (connectionStatus.connected ? "Connected" : "Disconnected")}
+              {connectionStatus?.label || badge.label}
             </Badge>
           )}
         </div>

ui/components/integrations/slack/slack-callback.test.tsx

@@ -0,0 +1,156 @@
+/**
+ * The cases `slack-page.integration.test.tsx` cannot express: it runs the Server
+ * Action as a plain function, so there is no client→server transport to reject,
+ * and its handler only answers the contract's shapes. React error boundaries
+ * cannot see a rejection awaited in an effect, so an uncaught one leaves the
+ * user on the spinner with no error and no way out.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { IntegrationProps } from "@/types/integrations";
+
+import { SlackCallback } from "./slack-callback";
+
+const COMPLETED_QUERY = "code=slack-code-1f4a&state=st-2f1c9d7a";
+
+const { exchangeSlackOAuthCode, callbackQuery, routerReplace } = vi.hoisted(
+  () => ({
+    exchangeSlackOAuthCode: vi.fn(),
+    callbackQuery: { value: "" },
+    routerReplace: vi.fn(),
+  }),
+);
+
+vi.mock("@/actions/integrations/slack", () => ({ exchangeSlackOAuthCode }));
+
+// One router across renders, so the redirect off the spent code is assertable.
+const router = { replace: routerReplace };
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => router,
+  useSearchParams: () => new URLSearchParams(callbackQuery.value),
+}));
+
+beforeEach(() => {
+  callbackQuery.value = COMPLETED_QUERY;
+  routerReplace.mockClear();
+});
+
+const SPINNER_COPY = /Connecting your Slack workspace/;
+
+/**
+ * Literals, not imports: a rename on the component's side has to fail here.
+ * `FAILURE_TITLE` claims nothing was connected, which only holds for outcomes
+ * that happen before the API consumed the code.
+ */
+const FAILURE_TITLE = "Slack workspace not connected";
+const UNCONFIRMED_TITLE = "Slack install not confirmed";
+
+describe("returning from Slack when the completion answers unexpectedly", () => {
+  it("reports an unconfirmed result instead of spinning forever when the exchange call never comes back", async () => {
+    // The client→server POST itself fails (dropped connection, action id
+    // invalidated by a deploy), so the action's own error handling never runs.
+    exchangeSlackOAuthCode.mockRejectedValue(new TypeError("Failed to fetch"));
+
+    render(<SlackCallback />);
+
+    // The API consumes the single-use code before answering, so the workspace
+    // may well be connected: unknown, not failed.
+    expect(
+      await screen.findByText(/could not confirm whether the workspace/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: /Back to Slack integration/ }),
+    ).toHaveAttribute("href", "/integrations/slack");
+    expect(screen.queryByText(SPINNER_COPY)).not.toBeInTheDocument();
+
+    expect(screen.getByText(UNCONFIRMED_TITLE)).toBeInTheDocument();
+    expect(screen.queryByText(FAILURE_TITLE)).not.toBeInTheDocument();
+  });
+
+  it("still reports the workspace as connected when the created integration carries no configuration", async () => {
+    // The install already succeeded; `configuration` only goes missing on the
+    // client, where the callback reads the workspace name off it.
+    exchangeSlackOAuthCode.mockResolvedValue({
+      integration: {
+        type: "integrations",
+        id: "slack-integration-1",
+        attributes: {
+          inserted_at: "2026-08-10T09:00:00Z",
+          updated_at: "2026-08-10T09:00:00Z",
+          enabled: true,
+          connected: null,
+          connection_last_checked_at: null,
+          integration_type: "slack",
+        },
+        links: { self: "/api/v1/integrations/slack-integration-1" },
+        // Cast: the shape is the one the contract rules out.
+      } as unknown as IntegrationProps,
+    });
+
+    render(<SlackCallback />);
+
+    expect(
+      await screen.findByText(/Connected to your Slack workspace/),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(SPINNER_COPY)).not.toBeInTheDocument();
+    // Keyed on the escape link, the only element unique to the failure branch,
+    // so this holds whichever headline that branch would have carried.
+    expect(
+      screen.queryByRole("link", { name: /Back to Slack integration/ }),
+    ).not.toBeInTheDocument();
+    // `replace`, not `push`: a back navigation must not remount onto the code.
+    expect(routerReplace).toHaveBeenCalledWith("/integrations/slack");
+  });
+});
+
+describe("returning from Slack with an error on the callback URL", () => {
+  it("says the install was declined when Slack reports the approval was refused", async () => {
+    // The one code Slack reliably sends to this redirect.
+    callbackQuery.value = "error=access_denied&state=st-2f1c9d7a";
+
+    render(<SlackCallback />);
+
+    expect(
+      await screen.findByText(/was not approved in Slack/),
+    ).toBeInTheDocument();
+    expect(exchangeSlackOAuthCode).not.toHaveBeenCalled();
+
+    // Slack refused before issuing a code, so the flat "not connected" is a
+    // fact here, unlike in the outcomes that follow an exchange.
+    expect(screen.getByText(FAILURE_TITLE)).toBeInTheDocument();
+    expect(screen.queryByText(UNCONFIRMED_TITLE)).not.toBeInTheDocument();
+  });
+
+  it("names a Slack code it does not recognise, so a new failure reason is still diagnosable", async () => {
+    // Slack publishes no closed set of codes for this redirect, so the guard is
+    // on the shape of the value rather than on an allowlist.
+    callbackQuery.value = "error=invalid_scope&state=st-2f1c9d7a";
+
+    render(<SlackCallback />);
+
+    expect(
+      await screen.findByText(
+        "Slack could not complete the install (invalid_scope).",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("drops a sentence smuggled into the error parameter instead of rendering it as Prowler's own copy", async () => {
+    // The balancing punctuation is the point: it closes Prowler's parenthetical
+    // and reopens it, so the payload would read as Prowler's own sentence.
+    const payload =
+      "). Slack has flagged this workspace. Contact Prowler support at +1-555-0100 to restore alerting (";
+    callbackQuery.value = `error=${encodeURIComponent(payload)}&state=st-2f1c9d7a`;
+
+    render(<SlackCallback />);
+
+    expect(
+      await screen.findByText("Slack could not complete the install."),
+    ).toBeInTheDocument();
+    expect(document.body.textContent).not.toContain("+1-555-0100");
+    expect(document.body.textContent).not.toContain("flagged this workspace");
+  });
+});

ui/components/integrations/slack/slack-callback.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { AlertCircle, CircleCheck, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+import { exchangeSlackOAuthCode } from "@/actions/integrations/slack";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Button,
+} from "@/components/shadcn";
+import { SLACK_REASON_TOKEN } from "@/lib/integrations/slack-errors";
+
+const SLACK_INTEGRATION_PATH = "/integrations/slack";
+
+const STATUS = {
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  FAILED: "failed",
+} as const;
+
+type Status = (typeof STATUS)[keyof typeof STATUS];
+
+const UNCONFIRMED_COMPLETION_MESSAGE =
+  "Prowler could not confirm whether the workspace was connected. Open the Slack integration page to check — if none is listed there, start the install again.";
+
+const FAILURE_TITLE = "Slack workspace not connected";
+
+/**
+ * The API consumes the code and upserts the integration before it answers, so an
+ * unreadable or missing answer can still mean a connected workspace. Kept short:
+ * `AlertTitle` clamps to one line.
+ */
+const UNCONFIRMED_TITLE = "Slack install not confirmed";
+
+const describeSlackError = (reason: string): string => {
+  if (reason === "access_denied") {
+    return "The install was not approved in Slack, so no workspace was connected.";
+  }
+  // `error` comes straight off the URL and is interpolated into Prowler's own
+  // copy, so gate on the shape of a code: Slack publishes no closed set.
+  return SLACK_REASON_TOKEN.test(reason)
+    ? `Slack could not complete the install (${reason}).`
+    : "Slack could not complete the install.";
+};
+
+/**
+ * Slack's `code` is single-use: `hasStarted` holds the exchange to one run per
+ * mount, and `router.replace` (not `push`) keeps a back navigation from
+ * remounting onto a spent code.
+ */
+export const SlackCallback = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [status, setStatus] = useState<Status>(STATUS.CONNECTING);
+  const [workspaceName, setWorkspaceName] = useState<string | null>(null);
+  const [failure, setFailure] = useState<string>("");
+  const [failureTitle, setFailureTitle] = useState<string>(FAILURE_TITLE);
+  const hasStarted = useRef(false);
+
+  useEffect(() => {
+    if (hasStarted.current) return;
+    hasStarted.current = true;
+
+    const slackError = searchParams.get("error");
+    const code = searchParams.get("code");
+    const state = searchParams.get("state");
+
+    // Slack answers a declined install with `error` and no code, so there is
+    // nothing to exchange.
+    if (slackError) {
+      setFailure(describeSlackError(slackError));
+      setStatus(STATUS.FAILED);
+      return;
+    }
+
+    if (!code || !state) {
+      setFailure(
+        "Slack sent an incomplete response back, so the install could not be completed.",
+      );
+      setStatus(STATUS.FAILED);
+      return;
+    }
+
+    const complete = async () => {
+      const result = await exchangeSlackOAuthCode({ code, state });
+
+      if ("integration" in result) {
+        setWorkspaceName(
+          result.integration.attributes?.configuration?.team_name ?? null,
+        );
+        setStatus(STATUS.CONNECTED);
+        router.replace(SLACK_INTEGRATION_PATH);
+        return;
+      }
+
+      if ("unavailable" in result) {
+        setFailure("Slack is not available in this environment yet.");
+      } else if ("rateLimited" in result) {
+        setFailure(result.message);
+      } else if ("unconfirmed" in result) {
+        setFailure(result.message);
+        setFailureTitle(UNCONFIRMED_TITLE);
+      } else {
+        setFailure(result.error);
+      }
+      setStatus(STATUS.FAILED);
+    };
+
+    // A rejection here means the call never came back (stale action id after a
+    // deploy, HTML 502): error boundaries cannot see a rejection awaited inside
+    // an effect, and the once-guard blocks a retry, so the page would spin.
+    void complete().catch(() => {
+      setFailure(UNCONFIRMED_COMPLETION_MESSAGE);
+      setFailureTitle(UNCONFIRMED_TITLE);
+      setStatus(STATUS.FAILED);
+    });
+  }, [router, searchParams]);
+
+  if (status === STATUS.CONNECTING) {
+    return (
+      <div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
+        <Loader2 className="animate-spin" size={16} />
+        Connecting your Slack workspace...
+      </div>
+    );
+  }
+
+  if (status === STATUS.CONNECTED) {
+    return (
+      <Alert variant="success">
+        <CircleCheck />
+        <AlertTitle>
+          Connected to {workspaceName ?? "your Slack workspace"}
+        </AlertTitle>
+        <AlertDescription>
+          Taking you back to the Slack integration, where you can choose the
+          channel Prowler posts to.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-4">
+      <Alert variant="error">
+        <AlertCircle />
+        <AlertTitle>{failureTitle}</AlertTitle>
+        <AlertDescription>{failure}</AlertDescription>
+      </Alert>
+      <Button asChild variant="outline">
+        <Link href={SLACK_INTEGRATION_PATH}>Back to Slack integration</Link>
+      </Button>
+    </div>
+  );
+};

ui/components/integrations/slack/slack-channel-selector.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Lock, RefreshCw } from "lucide-react";
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Button,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/shadcn";
+import type { SlackChannelOption } from "@/types/integrations";
+
+const INVITE_HINT =
+  "A private channel only appears here after someone invites @Prowler to it in Slack. Invite it, then refresh.";
+
+interface SlackChannelSelectorProps {
+  options: SlackChannelOption[];
+  value: string | null;
+  onChange: (channelId: string) => void;
+  isLoading?: boolean;
+  /** Why the channels could not be read — Slack's own reason, when it gave one. */
+  error?: string | null;
+  /** Why the list is partial. Shown with the picker, not instead of it. */
+  incompleteNotice?: string | null;
+  onRefresh?: () => void;
+  disabled?: boolean;
+}
+
+/** Driven entirely by props (design D13) so the alert-rule form can reuse it. */
+export const SlackChannelSelector = ({
+  options,
+  value,
+  onChange,
+  isLoading = false,
+  error = null,
+  incompleteNotice = null,
+  onRefresh,
+  disabled = false,
+}: SlackChannelSelectorProps) => {
+  const isEmpty = !isLoading && !error && options.length === 0;
+  // `htmlFor` may only name an element that exists, and the trigger is only
+  // rendered in the picker branch.
+  const hasPicker = !error && !isEmpty;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between gap-3">
+        <Label htmlFor={hasPicker ? "slack-channel" : undefined}>
+          Destination channel
+        </Label>
+        {onRefresh && (
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={isLoading}
+            onClick={onRefresh}
+          >
+            <RefreshCw size={14} />
+            {isLoading ? "Refreshing..." : "Refresh channels"}
+          </Button>
+        )}
+      </div>
+
+      {error ? (
+        <Alert variant="error">
+          <AlertTitle>Could not read the workspace&apos;s channels</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : isEmpty ? (
+        <Alert variant="info">
+          <AlertTitle>No channels available yet</AlertTitle>
+          <AlertDescription>
+            Prowler cannot see a single channel in this workspace. Create a
+            public channel, or invite @Prowler to a private one in Slack with
+            <span className="font-medium"> /invite @Prowler</span>, then
+            refresh.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <>
+          {incompleteNotice && (
+            <Alert variant="warning" data-channels-notice>
+              <AlertTitle>Not every channel is listed</AlertTitle>
+              <AlertDescription>{incompleteNotice}</AlertDescription>
+            </Alert>
+          )}
+          <Select
+            value={value ?? undefined}
+            onValueChange={onChange}
+            disabled={disabled || isLoading}
+          >
+            <SelectTrigger id="slack-channel" size="sm">
+              <SelectValue
+                placeholder={
+                  isLoading ? "Reading channels..." : "Choose a channel"
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem
+                  key={option.id}
+                  value={option.id}
+                  // Name hook: the rendered label mixes it with a lock icon
+                  // and a "Private" badge.
+                  data-channel={option.name}
+                >
+                  {option.is_private && <Lock size={14} aria-hidden="true" />}
+                  <span className="min-w-0 truncate">#{option.name}</span>
+                  {option.is_private && (
+                    <Badge variant="tag" size="sm">
+                      Private
+                    </Badge>
+                  )}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </>
+      )}
+
+      <p className="text-text-neutral-secondary text-xs">{INVITE_HINT}</p>
+    </div>
+  );
+};

ui/components/integrations/slack/slack-integration-card.tsx

@@ -0,0 +1,55 @@
+import { SettingsIcon } from "lucide-react";
+import Link from "next/link";
+
+import { SlackIcon } from "@/components/icons/services/IconServices";
+import { Button, Card, CardContent, CardHeader } from "@/components/shadcn";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
+
+// Placeholder slug: the docs slice writes the page and confirms it.
+const SLACK_DOCS_URL =
+  "https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-slack-integration/";
+
+export const SlackIntegrationCard = () => {
+  return (
+    <Card variant="base" padding="lg">
+      <CardHeader>
+        <div className="flex w-full flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-3">
+            <SlackIcon size={40} />
+            <div className="flex flex-col gap-1">
+              <h4 className="text-lg font-bold text-gray-900 dark:text-gray-100">
+                Slack
+              </h4>
+              <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+                <p className="text-xs text-nowrap text-gray-500 dark:text-gray-300">
+                  Send Prowler messages to your Slack workspace.
+                </p>
+                <CustomLink
+                  href={SLACK_DOCS_URL}
+                  aria-label="Learn more about Slack integration"
+                  size="xs"
+                >
+                  Learn more
+                </CustomLink>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 self-end sm:self-center">
+            <Button asChild size="sm">
+              <Link href="/integrations/slack">
+                <SettingsIcon size={14} />
+                Manage
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          Connect a Slack workspace and pick the channel Prowler posts to, so
+          your team gets security updates where it already works.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};

ui/components/integrations/slack/slack-integration-manager.test.tsx

@@ -0,0 +1,66 @@
+/**
+ * The case `slack-page.integration.test.tsx` cannot express: it asserts against
+ * a hydrated, settled page, so it never sees the first frame the user is
+ * served. The effect that reads the channels only runs in the browser, so the
+ * channel state at render time is what the served HTML says until hydration.
+ */
+
+import { renderToString } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+import { INTEGRATION_TYPE, type IntegrationProps } from "@/types/integrations";
+
+import { SlackIntegrationManager } from "./slack-integration-manager";
+
+vi.mock("@/actions/integrations/slack", () => ({
+  getSlackChannels: vi.fn(),
+  sendSlackTestMessage: vi.fn(),
+  setSlackDefaultChannel: vi.fn(),
+}));
+
+vi.mock("@/actions/integrations/integrations", () => ({
+  testIntegrationConnection: vi.fn(),
+}));
+
+/**
+ * A connected workspace with no channel recorded, as the contract has it before
+ * a save: with one, the picker would show that channel instead of the
+ * placeholder this test reads.
+ */
+const CONNECTED_WORKSPACE: IntegrationProps = {
+  type: "integrations",
+  id: "slack-integration-1",
+  attributes: {
+    inserted_at: "2026-08-10T09:00:00Z",
+    updated_at: "2026-08-10T09:00:00Z",
+    enabled: true,
+    connected: true,
+    connection_last_checked_at: "2026-08-10T09:05:00Z",
+    integration_type: INTEGRATION_TYPE.SLACK,
+    configuration: {
+      team_id: "T024BE7LD",
+      team_name: "Prowler HQ",
+      bot_user_id: "U0KRQLJ9H",
+    },
+  },
+  links: { self: "/api/v1/integrations/slack-integration-1" },
+};
+
+describe("the first paint of a connected workspace", () => {
+  it("reads as still reading the channels rather than as a workspace with none", () => {
+    // When
+    const serverHtml = renderToString(
+      <SlackIntegrationManager
+        integration={CONNECTED_WORKSPACE}
+        authorizeUrl={null}
+        unavailable={false}
+        rateLimitMessage={null}
+        loadError={null}
+      />,
+    );
+
+    // Then
+    expect(serverHtml).toContain("Reading channels...");
+    expect(serverHtml).not.toContain("No channels available yet");
+  });
+});

ui/components/integrations/slack/slack-integration-manager.tsx

@@ -0,0 +1,732 @@
+"use client";
+
+import { format, isValid, parseISO } from "date-fns";
+import { Send, TestTube, Unplug } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { testIntegrationConnection } from "@/actions/integrations/integrations";
+import {
+  disconnectSlackIntegration,
+  getSlackAuthorizeUrl,
+  getSlackChannels,
+  sendSlackTestMessage,
+  setSlackDefaultChannel,
+} from "@/actions/integrations/slack";
+import { SlackIcon } from "@/components/icons/services/IconServices";
+import { IntegrationCardHeader } from "@/components/integrations/shared";
+import { SlackChannelSelector } from "@/components/integrations/slack/slack-channel-selector";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  useToast,
+} from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
+import {
+  isSlackTokenErrorCode,
+  slackErrorMessage,
+} from "@/lib/integrations/slack-errors";
+import type { SlackTokenErrorCode } from "@/lib/integrations/slack-errors";
+import type {
+  IntegrationProps,
+  SlackChannelOption,
+} from "@/types/integrations";
+
+const CHANNELS_STATUS = {
+  LOADING: "loading",
+  ERROR: "error",
+  LOADED: "loaded",
+} as const;
+
+interface ChannelsLoading {
+  status: typeof CHANNELS_STATUS.LOADING;
+}
+
+interface ChannelsFailed {
+  status: typeof CHANNELS_STATUS.ERROR;
+  message: string;
+}
+
+interface ChannelsLoaded {
+  status: typeof CHANNELS_STATUS.LOADED;
+  channels: SlackChannelOption[];
+  // Rides with the list it qualifies, so it can never outlive it.
+  notice: string | null;
+}
+
+type ChannelsState = ChannelsLoading | ChannelsFailed | ChannelsLoaded;
+
+const TEST_MESSAGE_STATUS = {
+  IDLE: "idle",
+  SENDING: "sending",
+  SENT: "sent",
+  FAILED: "failed",
+} as const;
+
+interface TestMessageIdle {
+  status: typeof TEST_MESSAGE_STATUS.IDLE;
+}
+
+interface TestMessageSending {
+  status: typeof TEST_MESSAGE_STATUS.SENDING;
+}
+
+interface TestMessageSent {
+  status: typeof TEST_MESSAGE_STATUS.SENT;
+  detail: string;
+}
+
+interface TestMessageFailed {
+  status: typeof TEST_MESSAGE_STATUS.FAILED;
+  detail: string;
+}
+
+type TestMessageState =
+  | TestMessageIdle
+  | TestMessageSending
+  | TestMessageSent
+  | TestMessageFailed;
+
+// The name may be missing: the id decides what the UI can do with it.
+interface SlackChannelRef {
+  id: string;
+  name: string | null;
+}
+
+const channelRefEquals = (
+  a: SlackChannelRef | null,
+  b: SlackChannelRef | null,
+) => a?.id === b?.id && a?.name === b?.name;
+
+interface SlackIntegrationManagerProps {
+  /** At most one exists per tenant (one workspace). */
+  integration: IntegrationProps | null;
+  authorizeUrl: string | null;
+  /** This deployment has no Prowler Slack app, so no install can be started. */
+  unavailable: boolean;
+  rateLimitMessage: string | null;
+  loadError: string | null;
+}
+
+export const SlackIntegrationManager = ({
+  integration,
+  authorizeUrl,
+  unavailable,
+  rateLimitMessage,
+  loadError,
+}: SlackIntegrationManagerProps) => {
+  const [isTesting, setIsTesting] = useState(false);
+  const [isDisconnectOpen, setIsDisconnectOpen] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  // Local state after a mutation: the row is gone the moment the API says so,
+  // and this page is what the user is looking at. The server component's own
+  // revalidation refreshes the same thing on the next navigation.
+  const [disconnected, setDisconnected] = useState(false);
+  /** A disconnect that removed the row without Slack confirming the revocation. */
+  const [revocationUnconfirmed, setRevocationUnconfirmed] = useState(false);
+  /**
+   * The `code` of the last refusal any Slack-backed call on this page ran into,
+   * or `null` when the last answer was not a refusal. Every call records it
+   * here — the contract says a dead grant can surface from any of them
+   * (Cross-cutting), so none of them gets to decide on its own what that looks
+   * like.
+   */
+  const [lastRefusalCode, setLastRefusalCode] = useState<string | null>(null);
+  // A connected workspace arrives with no consent URL — there is no install left
+  // to start (design D10) — so one is minted only if the page turns out to need
+  // it: after a disconnect, or once the credential is known to be dead.
+  const [mintedInstallUrl, setMintedInstallUrl] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const integrationId = integration?.id ?? null;
+  const recordedChannelId =
+    integration?.attributes.configuration.channel_id ?? null;
+  const recordedChannelName =
+    integration?.attributes.configuration.channel_name ?? null;
+
+  const recordedChannel: SlackChannelRef | null = recordedChannelId
+    ? { id: recordedChannelId, name: recordedChannelName }
+    : null;
+
+  // Seeded `loading`, not by the effect: the effect never runs on the server,
+  // so anything else would server-render a "no channels" picker until
+  // hydration.
+  const [channelsState, setChannelsState] = useState<ChannelsState>(
+    integrationId
+      ? { status: CHANNELS_STATUS.LOADING }
+      : { status: CHANNELS_STATUS.LOADED, channels: [], notice: null },
+  );
+  // Bumped by refresh: a channel invited after load only shows on a re-read.
+  const [channelReloads, setChannelReloads] = useState(0);
+  // Local state needed: the pick is buffered until the user saves it.
+  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(
+    recordedChannelId,
+  );
+  // Mirrored in state, not read from the prop, so channel-gated affordances
+  // move on save instead of waiting for the revalidation.
+  const [defaultChannel, setDefaultChannel] = useState(recordedChannel);
+  // The prop the mirror was last taken from: the card never unmounts, so a
+  // mirror seeded only at mount would go stale when the record changes.
+  const [syncedChannel, setSyncedChannel] = useState(recordedChannel);
+  const [isSavingChannel, setIsSavingChannel] = useState(false);
+  const [testMessageState, setTestMessageState] = useState<TestMessageState>({
+    status: TEST_MESSAGE_STATUS.IDLE,
+  });
+
+  if (!channelRefEquals(recordedChannel, syncedChannel)) {
+    const previousSyncedId = syncedChannel?.id ?? null;
+    setSyncedChannel(recordedChannel);
+    setDefaultChannel(recordedChannel);
+    // Follow the record only while the buffered pick still matches it: an
+    // unsaved pick is the user's, not ours to overwrite mid-edit.
+    if (selectedChannelId === previousSyncedId) {
+      setSelectedChannelId(recordedChannel?.id ?? null);
+    }
+  }
+
+  /**
+   * Whether that last refusal proves the Slack grant itself is dead, rather
+   * than a channel unreachable or Slack busy.
+   *
+   * Derived, not stored, and recognised through the shared vocabulary — this
+   * page keeps no list of codes of its own. Derived also means self-clearing: a
+   * later call that Slack answered at all (even to refuse a channel) is proof
+   * the credential works again, and the notice goes with it.
+   */
+  const credentialFailure: SlackTokenErrorCode | null = isSlackTokenErrorCode(
+    lastRefusalCode,
+  )
+    ? lastRefusalCode
+    : null;
+
+  // The consent URL, minted when the page turns out to need one: after a
+  // disconnect, or once the credential is known to be dead. Both answers are a
+  // reconnect, and it should be a click away by the time the user has read why.
+  const needsInstallUrl = disconnected || credentialFailure !== null;
+
+  useEffect(() => {
+    if (!needsInstallUrl) return;
+
+    let cancelled = false;
+
+    getSlackAuthorizeUrl()
+      .then((result) => {
+        if (cancelled || !("authorizeUrl" in result)) return;
+        setMintedInstallUrl(result.authorizeUrl);
+      })
+      .catch(() => {
+        // Nothing to say: the page still offers everything it did before, minus
+        // a shortcut. The catalogue's own install path is unaffected.
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [needsInstallUrl]);
+
+  useEffect(() => {
+    if (!integrationId) return;
+
+    let cancelled = false;
+    setChannelsState({ status: CHANNELS_STATUS.LOADING });
+
+    getSlackChannels(integrationId)
+      .then((result) => {
+        if (cancelled) return;
+        setChannelsState(
+          "error" in result
+            ? { status: CHANNELS_STATUS.ERROR, message: result.error }
+            : {
+                status: CHANNELS_STATUS.LOADED,
+                channels: result.channels,
+                notice: result.incomplete ?? null,
+              },
+        );
+        // The listing is the call a dead credential shows up on first: it
+        // runs on arrival, before the user has touched anything.
+        setLastRefusalCode("error" in result ? (result.code ?? null) : null);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setChannelsState({
+          status: CHANNELS_STATUS.ERROR,
+          message: "Could not reach Slack to read the channel list.",
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [integrationId, channelReloads]);
+
+  const channels =
+    channelsState.status === CHANNELS_STATUS.LOADED
+      ? channelsState.channels
+      : [];
+
+  const handleSaveChannel = async () => {
+    if (!integrationId || !selectedChannelId) return;
+
+    setIsSavingChannel(true);
+    try {
+      // Only the id travels — the API validates it and derives the name
+      // (design D6).
+      const result = await setSlackDefaultChannel(
+        integrationId,
+        selectedChannelId,
+      );
+
+      if ("error" in result) {
+        // The API validates the channel against Slack, so the save is one of
+        // the calls that can discover the credential is gone.
+        setLastRefusalCode(result.code ?? null);
+        toast({
+          variant: "destructive",
+          title: "Could not save the destination channel",
+          description: result.error,
+        });
+        return;
+      }
+
+      // Prefer the API's derived name: a channel renamed in Slack since the
+      // list was read would otherwise show its old name.
+      const savedName =
+        result.integration.attributes.configuration.channel_name ??
+        channels.find((channel) => channel.id === selectedChannelId)?.name ??
+        null;
+
+      setDefaultChannel({ id: selectedChannelId, name: savedName });
+      // An outcome about the previous destination would mislead here.
+      setTestMessageState({ status: TEST_MESSAGE_STATUS.IDLE });
+      toast({
+        title: "Destination channel saved",
+        description: savedName
+          ? `Prowler will post to #${savedName}.`
+          : "Prowler will post to the channel you chose.",
+      });
+    } catch (_error) {
+      toast({
+        variant: "destructive",
+        title: "Could not save the destination channel",
+        description: "Something went wrong. Please try again.",
+      });
+    } finally {
+      setIsSavingChannel(false);
+    }
+  };
+
+  const handleSendTestMessage = async () => {
+    if (!integrationId) return;
+
+    setTestMessageState({ status: TEST_MESSAGE_STATUS.SENDING });
+    try {
+      const result = await sendSlackTestMessage(integrationId);
+
+      // The post happens in a task, so this is where a credential that died
+      // between the check and the send actually surfaces.
+      setLastRefusalCode("error" in result ? (result.code ?? null) : null);
+
+      setTestMessageState(
+        "sent" in result
+          ? {
+              status: TEST_MESSAGE_STATUS.SENT,
+              detail: defaultChannel?.name
+                ? `Prowler posted a test message to #${defaultChannel.name}.`
+                : "Prowler posted a test message to your default channel.",
+            }
+          : { status: TEST_MESSAGE_STATUS.FAILED, detail: result.error },
+      );
+    } catch (_error) {
+      setTestMessageState({
+        status: TEST_MESSAGE_STATUS.FAILED,
+        detail: "Something went wrong. Please try again.",
+      });
+    }
+  };
+
+  const handleTestConnection = async (id: string) => {
+    setIsTesting(true);
+    try {
+      const result = await testIntegrationConnection(id);
+
+      if (result.success) {
+        setLastRefusalCode(null);
+        toast({
+          title: "Connection test successful!",
+          description:
+            result.message || "Prowler can reach your Slack workspace.",
+        });
+      } else {
+        // The check reports Slack's own stable reason, which is a protocol
+        // token and not something to show anyone: it is mapped to Prowler's
+        // wording, and only falls back to what arrived when it names a reason
+        // this UI has nothing better to say about. A dead credential named here
+        // is not a failure checking again can fix, which is what recording the
+        // reason — rather than only reporting it — is for.
+        const reason = result.error?.trim() || null;
+
+        setLastRefusalCode(reason);
+
+        toast({
+          variant: "destructive",
+          title: "Connection test failed",
+          description: reason
+            ? slackErrorMessage({ code: reason, detail: reason })
+            : "Failed to reach your Slack workspace.",
+        });
+      }
+    } catch (_error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to test connection. Please try again.",
+      });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  const handleDisconnect = async (id: string) => {
+    const workspace =
+      integration?.attributes.configuration.team_name ?? "your Slack workspace";
+
+    setIsDisconnecting(true);
+    try {
+      const result = await disconnectSlackIntegration(id);
+
+      if ("error" in result) {
+        toast({
+          variant: "destructive",
+          title: "Disconnect failed",
+          description: result.error,
+        });
+        return;
+      }
+
+      const { revoked } = result.revocation;
+
+      // The integration is gone whatever Slack answered, so the page goes back
+      // to its unconnected state either way — which is what puts a consent URL
+      // on the way, so connecting again is a click rather than a reload. A dead
+      // credential is moot once the row it belonged to is gone.
+      setDisconnected(true);
+      setLastRefusalCode(null);
+      // Only an explicit "not revoked" sends the user to finish the job in
+      // Slack. An unreported outcome is neither a failed revocation nor a
+      // confirmed one, so it claims neither.
+      setRevocationUnconfirmed(revoked === false);
+
+      if (revoked !== false) {
+        toast({
+          title: "Slack workspace disconnected",
+          description:
+            revoked === true
+              ? `Prowler's access to ${workspace} has been revoked.`
+              : `${workspace} is no longer connected to Prowler.`,
+        });
+      }
+    } catch (_error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to disconnect Slack. Please try again.",
+      });
+    } finally {
+      setIsDisconnecting(false);
+      setIsDisconnectOpen(false);
+    }
+  };
+
+  const workspaceName = integration?.attributes.configuration.team_name;
+  const installUrl = mintedInstallUrl ?? authorizeUrl;
+
+  const checkedAt = integration?.attributes.connection_last_checked_at;
+  const checkedOn = checkedAt ? parseISO(checkedAt) : null;
+  // `format` throws a RangeError on an unreadable value, which would replace
+  // the page with the route's error boundary: show nothing instead, as for a
+  // connection that was never checked.
+  const lastCheckedOn =
+    checkedOn && isValid(checkedOn) ? format(checkedOn, "yyyy/MM/dd") : null;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {rateLimitMessage && (
+        <Alert variant="warning">
+          <AlertTitle>Slack is busy right now</AlertTitle>
+          <AlertDescription>{rateLimitMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Portaled by Radix, so its place in this tree costs no layout. */}
+      <Modal
+        open={isDisconnectOpen}
+        onOpenChange={setIsDisconnectOpen}
+        title="Disconnect Slack workspace"
+        description={`Prowler will revoke its access at Slack and stop posting to ${workspaceName ?? "this workspace"}. Connecting again means approving Prowler in Slack.`}
+      >
+        <div className="flex w-full justify-end gap-4">
+          <Button
+            type="button"
+            variant="ghost"
+            size="lg"
+            disabled={isDisconnecting}
+            onClick={() => setIsDisconnectOpen(false)}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="button"
+            variant="destructive"
+            size="lg"
+            disabled={isDisconnecting}
+            onClick={() => integration && handleDisconnect(integration.id)}
+          >
+            {!isDisconnecting && <Unplug size={20} />}
+            {isDisconnecting ? "Disconnecting..." : "Disconnect workspace"}
+          </Button>
+        </div>
+      </Modal>
+
+      {loadError && (
+        <Alert variant="error">
+          <AlertTitle>Could not load your Slack integration</AlertTitle>
+          <AlertDescription>{loadError}</AlertDescription>
+        </Alert>
+      )}
+
+      {revocationUnconfirmed && (
+        <Alert variant="warning">
+          <AlertTitle>
+            Slack disconnected — remove Prowler&apos;s access in Slack
+          </AlertTitle>
+          <AlertDescription>
+            The integration and the token Prowler had stored are gone from
+            Prowler, so there is nothing to retry here. Slack did not confirm
+            the revocation, so the Prowler app may still be installed in{" "}
+            {workspaceName ?? "the workspace"} — remove it from that
+            workspace&apos;s Slack app settings.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {credentialFailure && (
+        <Alert variant="error">
+          <AlertTitle>
+            Slack no longer accepts Prowler&apos;s access to{" "}
+            {workspaceName ?? "this workspace"}
+          </AlertTitle>
+          {/*
+            The wording is the code's own, from the shared mapping: the four
+            ways a grant dies are four different sentences, and each already
+            ends in the one thing that fixes it. Slack's raw reason is a
+            protocol token and stays out of the copy.
+          */}
+          <AlertDescription>
+            {slackErrorMessage({ code: credentialFailure })} Until then, nothing
+            Prowler sends will reach the workspace.
+          </AlertDescription>
+          {installUrl && (
+            <div className="col-start-2 mt-3">
+              <Button asChild size="sm">
+                <a href={installUrl} rel="noopener noreferrer">
+                  <SlackIcon size={16} />
+                  Reconnect to Slack
+                </a>
+              </Button>
+            </div>
+          )}
+        </Alert>
+      )}
+
+      {/* Replaces the cards, not the whole page: an early return here would
+          swallow the rate-limit and load-error notices above. */}
+      {unavailable ? (
+        <Alert variant="info">
+          <AlertTitle>
+            Slack is not available in this environment yet
+          </AlertTitle>
+          <AlertDescription>
+            The Prowler Slack app is not configured here, so no workspace can be
+            connected. Nothing to do on your side — this page starts working as
+            soon as it is.
+          </AlertDescription>
+        </Alert>
+      ) : integration && !disconnected ? (
+        <Card variant="base">
+          <CardHeader>
+            <IntegrationCardHeader
+              icon={<SlackIcon size={32} />}
+              title={`Connected to ${workspaceName ?? "your Slack workspace"}`}
+              subtitle="Prowler posts to this workspace only."
+              connectionStatus={{
+                // A check that came back with a dead token outranks the state
+                // the page was loaded with.
+                connected:
+                  credentialFailure === null
+                    ? integration.attributes.connected
+                    : false,
+              }}
+            />
+          </CardHeader>
+
+          <CardContent className="pt-0">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="text-xs text-gray-500 dark:text-gray-300">
+                {lastCheckedOn && (
+                  <p>
+                    <span className="font-medium">Last checked:</span>{" "}
+                    {lastCheckedOn}
+                  </p>
+                )}
+                {!defaultChannel && (
+                  <p>
+                    Choosing a destination channel is the next step — the
+                    connection is checked against it.
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                {/* The check posts to the destination channel: the API answers
+                    400 when none is recorded yet. */}
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={isTesting || !defaultChannel}
+                  onClick={() => handleTestConnection(integration.id)}
+                >
+                  <TestTube size={14} />
+                  {isTesting ? "Testing..." : "Test connection"}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  disabled={isDisconnecting}
+                  onClick={() => setIsDisconnectOpen(true)}
+                >
+                  <Unplug size={14} />
+                  Disconnect
+                </Button>
+              </div>
+            </div>
+
+            <div className="border-border-neutral-secondary mt-6 flex flex-col gap-4 border-t pt-6">
+              <SlackChannelSelector
+                options={channels}
+                value={selectedChannelId}
+                onChange={setSelectedChannelId}
+                isLoading={channelsState.status === CHANNELS_STATUS.LOADING}
+                error={
+                  channelsState.status === CHANNELS_STATUS.ERROR
+                    ? channelsState.message
+                    : null
+                }
+                incompleteNotice={
+                  channelsState.status === CHANNELS_STATUS.LOADED
+                    ? channelsState.notice
+                    : null
+                }
+                onRefresh={() => setChannelReloads((reloads) => reloads + 1)}
+                disabled={isSavingChannel}
+              />
+
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <p className="text-text-neutral-secondary text-xs">
+                  {/* The id decides, not the name: a missing name would deny
+                      a destination the test button posts to. */}
+                  {defaultChannel
+                    ? defaultChannel.name
+                      ? `Prowler posts to #${defaultChannel.name}.`
+                      : "Prowler posts to the channel you saved."
+                    : "No destination channel recorded yet."}
+                </p>
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    disabled={
+                      !selectedChannelId ||
+                      selectedChannelId === (defaultChannel?.id ?? null) ||
+                      isSavingChannel
+                    }
+                    onClick={handleSaveChannel}
+                  >
+                    {isSavingChannel ? "Saving..." : "Save channel"}
+                  </Button>
+                  {defaultChannel && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      disabled={
+                        testMessageState.status === TEST_MESSAGE_STATUS.SENDING
+                      }
+                      onClick={handleSendTestMessage}
+                    >
+                      <Send size={14} />
+                      {testMessageState.status === TEST_MESSAGE_STATUS.SENDING
+                        ? "Sending..."
+                        : "Send test message"}
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {(testMessageState.status === TEST_MESSAGE_STATUS.SENT ||
+                testMessageState.status === TEST_MESSAGE_STATUS.FAILED) && (
+                <Alert
+                  variant={
+                    testMessageState.status === TEST_MESSAGE_STATUS.SENT
+                      ? "success"
+                      : "error"
+                  }
+                >
+                  <AlertTitle>
+                    {testMessageState.status === TEST_MESSAGE_STATUS.SENT
+                      ? "Test message sent"
+                      : "Test message failed"}
+                  </AlertTitle>
+                  <AlertDescription>{testMessageState.detail}</AlertDescription>
+                </Alert>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card variant="base">
+          <CardHeader>
+            <IntegrationCardHeader
+              icon={<SlackIcon size={32} />}
+              title="No workspace connected"
+              subtitle="Approve Prowler in Slack to connect a workspace. No tokens to copy."
+            />
+          </CardHeader>
+
+          <CardContent className="pt-0">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                Prowler asks for permission to post messages and to read the
+                workspace&apos;s channel list.
+              </p>
+              {installUrl ? (
+                <Button asChild>
+                  <a href={installUrl} rel="noopener noreferrer">
+                    <SlackIcon size={16} />
+                    Add to Slack
+                  </a>
+                </Button>
+              ) : (
+                <Button disabled>
+                  <SlackIcon size={16} />
+                  Add to Slack
+                </Button>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};

ui/lib/integrations/slack-errors.test.ts

@@ -0,0 +1,211 @@
+/**
+ * Unit-tested because most of the codes in the mapping belong to flows this
+ * layer does not have yet: the channel picker, the test message, the disconnect.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import {
+  isSlackTokenErrorCode,
+  SLACK_ERROR_CODE,
+  SLACK_ERROR_MESSAGES,
+  SLACK_GENERIC_ERROR_MESSAGE,
+  SLACK_RATE_LIMITED_MESSAGE,
+  SLACK_REASON_TOKEN,
+  SLACK_TOKEN_ERROR_CODES,
+  readSlackFailure,
+  slackErrorMessage,
+  slackRateLimitMessage,
+  slackUnknownReasonMessage,
+} from "./slack-errors";
+
+describe("slackErrorMessage", () => {
+  it("prefers the code's own copy over the API's wording", () => {
+    // `detail` states the condition; the code's copy states the fix.
+    const failure = {
+      code: SLACK_ERROR_CODE.WORKSPACE_CONFLICT,
+      detail:
+        "This tenant is already connected to a different Slack workspace.",
+    };
+
+    expect(slackErrorMessage(failure)).toBe(
+      SLACK_ERROR_MESSAGES[SLACK_ERROR_CODE.WORKSPACE_CONFLICT],
+    );
+    expect(slackErrorMessage(failure)).toMatch(/Disconnect it/);
+  });
+
+  it("tells the user how to grant a scope Prowler is missing", () => {
+    // A missing scope is fixable by the reader, so the copy names the fix.
+    const message = slackErrorMessage({
+      code: SLACK_ERROR_CODE.MISSING_SCOPE,
+      detail: "missing_scope",
+    });
+
+    expect(message).toMatch(/Connect the workspace again/);
+    expect(message).not.toMatch(/missing_scope/);
+  });
+
+  it("says what to do about each channel refusal", () => {
+    expect(
+      slackErrorMessage({ code: SLACK_ERROR_CODE.CHANNEL_NOT_FOUND }),
+    ).toMatch(/Choose another one/);
+    expect(
+      slackErrorMessage({ code: SLACK_ERROR_CODE.NOT_IN_CHANNEL }),
+    ).toMatch(/Invite @Prowler/);
+    expect(slackErrorMessage({ code: SLACK_ERROR_CODE.NO_PERMISSION })).toMatch(
+      /Choose another channel/,
+    );
+  });
+
+  it("points every dead-credential code at reconnecting, not at retrying", () => {
+    for (const code of SLACK_TOKEN_ERROR_CODES) {
+      // Revoked, invalid, inactive or expired: no retry helps for any of them.
+      expect(slackErrorMessage({ code })).toMatch(
+        /Connect the workspace again to restore access/,
+      );
+      expect(isSlackTokenErrorCode(code)).toBe(true);
+    }
+  });
+
+  it("does not treat an actionable refusal as a dead credential", () => {
+    expect(isSlackTokenErrorCode(SLACK_ERROR_CODE.MISSING_SCOPE)).toBe(false);
+    expect(isSlackTokenErrorCode(null)).toBe(false);
+    expect(isSlackTokenErrorCode(undefined)).toBe(false);
+  });
+
+  it("falls back to the API's detail for a code it does not know", () => {
+    expect(
+      slackErrorMessage({
+        code: "some_future_slack_reason",
+        detail: "Slack said no.",
+      }),
+    ).toBe("Slack said no.");
+  });
+
+  it("falls back to the generic line when there is neither", () => {
+    expect(slackErrorMessage({ code: null, detail: null })).toBe(
+      SLACK_GENERIC_ERROR_MESSAGE,
+    );
+    expect(slackErrorMessage(null)).toBe(SLACK_GENERIC_ERROR_MESSAGE);
+    expect(
+      slackErrorMessage({ detail: "   " }, "Could not read channels."),
+    ).toBe("Could not read channels.");
+  });
+});
+
+describe("slackUnknownReasonMessage", () => {
+  /** A real Slack reason this UI has no copy of its own for. */
+  const UNMAPPED_REASON = "is_archived";
+
+  it("keeps an unmapped reason diagnosable without letting it be the message", () => {
+    const message = slackUnknownReasonMessage(UNMAPPED_REASON);
+
+    expect(message).toMatch(/Slack refused the message/);
+    expect(message).toContain(UNMAPPED_REASON);
+    expect(message).not.toBe(UNMAPPED_REASON);
+    expect(message).toMatch(/Choose another channel/);
+  });
+
+  it("is only reached for a code the mapping does not cover", () => {
+    expect(
+      slackErrorMessage(
+        { code: SLACK_ERROR_CODE.NOT_IN_CHANNEL },
+        slackUnknownReasonMessage(SLACK_ERROR_CODE.NOT_IN_CHANNEL),
+      ),
+    ).toBe(SLACK_ERROR_MESSAGES[SLACK_ERROR_CODE.NOT_IN_CHANNEL]);
+
+    // No `detail`: one holding the same token would make the raw token the
+    // whole message again.
+    expect(
+      slackErrorMessage(
+        { code: UNMAPPED_REASON },
+        slackUnknownReasonMessage(UNMAPPED_REASON),
+      ),
+    ).toBe(slackUnknownReasonMessage(UNMAPPED_REASON));
+  });
+});
+
+describe("SLACK_REASON_TOKEN", () => {
+  it("recognises a reason code and refuses anything that reads as a sentence", () => {
+    // Slack publishes no closed set of reasons, so the guard is on shape rather
+    // than an allowlist.
+    for (const reason of [
+      "is_archived",
+      "restricted_action",
+      "team_access_not_granted",
+      "ekm_access_denied",
+      "messages_tab_disabled",
+    ]) {
+      expect(SLACK_REASON_TOKEN.test(reason)).toBe(true);
+    }
+
+    for (const prose of [
+      "Slack rejected the message: the channel is archived.",
+      "). Contact support at +1-555-0100 (",
+      "",
+      "a".repeat(49),
+    ]) {
+      expect(SLACK_REASON_TOKEN.test(prose)).toBe(false);
+    }
+  });
+});
+
+describe("slackRateLimitMessage", () => {
+  it("names the wait Slack asked for", () => {
+    expect(slackRateLimitMessage(30)).toMatch(/about 30 seconds/);
+    expect(slackRateLimitMessage(1)).toMatch(/about 1 second\b/);
+    expect(slackRateLimitMessage(90)).toMatch(/about 2 minutes/);
+  });
+
+  it("still says to come back when Slack named no wait", () => {
+    expect(slackRateLimitMessage(null)).toBe(SLACK_RATE_LIMITED_MESSAGE);
+    expect(slackRateLimitMessage(0)).toBe(SLACK_RATE_LIMITED_MESSAGE);
+  });
+});
+
+describe("readSlackFailure", () => {
+  it("reads the code, the detail and the wait off a JSON:API refusal", async () => {
+    const response = new Response(
+      JSON.stringify({
+        errors: [
+          {
+            status: "429",
+            detail: "Slack is rate limiting requests from Prowler.",
+            source: { pointer: "/data" },
+          },
+        ],
+      }),
+      { status: 429, headers: { "Retry-After": "30" } },
+    );
+
+    const failure = await readSlackFailure(response);
+
+    expect(failure).toEqual({
+      status: 429,
+      code: null,
+      detail: "Slack is rate limiting requests from Prowler.",
+      retryAfterSeconds: 30,
+    });
+  });
+
+  it("survives a body that is not JSON:API at all", async () => {
+    const failure = await readSlackFailure(
+      new Response("<html>Bad gateway</html>", { status: 502 }),
+    );
+
+    expect(failure).toEqual({
+      status: 502,
+      code: null,
+      detail: null,
+      retryAfterSeconds: null,
+    });
+  });
+
+  it("ignores a Retry-After it cannot use", async () => {
+    const failure = await readSlackFailure(
+      new Response("{}", { status: 429, headers: { "Retry-After": "soon" } }),
+    );
+
+    expect(failure.retryAfterSeconds).toBeNull();
+  });
+});

ui/lib/integrations/slack-errors.ts

@@ -0,0 +1,155 @@
+export const SLACK_ERROR_CODE = {
+  MISSING_SCOPE: "missing_scope",
+  CHANNEL_NOT_FOUND: "channel_not_found",
+  NOT_IN_CHANNEL: "not_in_channel",
+  NO_PERMISSION: "no_permission",
+  TOKEN_REVOKED: "token_revoked",
+  INVALID_AUTH: "invalid_auth",
+  ACCOUNT_INACTIVE: "account_inactive",
+  TOKEN_EXPIRED: "token_expired",
+  /** One workspace per tenant. */
+  WORKSPACE_CONFLICT: "slack_workspace_conflict",
+} as const;
+
+export type SlackErrorCode =
+  (typeof SLACK_ERROR_CODE)[keyof typeof SLACK_ERROR_CODE];
+
+/**
+ * The grant itself is dead: reconnecting is the only way out, not retrying. The
+ * API answers these with `400`, not `401`, so they are not mistaken for an
+ * expired Prowler session.
+ */
+export const SLACK_TOKEN_ERROR_CODES = [
+  SLACK_ERROR_CODE.TOKEN_REVOKED,
+  SLACK_ERROR_CODE.INVALID_AUTH,
+  SLACK_ERROR_CODE.ACCOUNT_INACTIVE,
+  SLACK_ERROR_CODE.TOKEN_EXPIRED,
+] as const;
+
+export type SlackTokenErrorCode = (typeof SLACK_TOKEN_ERROR_CODES)[number];
+
+export const isSlackTokenErrorCode = (
+  code: string | null | undefined,
+): code is SlackTokenErrorCode =>
+  SLACK_TOKEN_ERROR_CODES.includes(code as SlackTokenErrorCode);
+
+export const SLACK_GENERIC_ERROR_MESSAGE =
+  "Slack could not complete that request. Try again in a moment.";
+
+export const SLACK_RATE_LIMITED_MESSAGE =
+  "Slack is rate limiting Prowler right now. Try again in a few moments.";
+
+/**
+ * For a channel list that stopped short of the workspace: the page budget ran
+ * out, or `links.next` left the API's origin.
+ */
+export const SLACK_PARTIAL_CHANNEL_LIST_MESSAGE =
+  "This workspace has more channels than Prowler reads in one go, so this list is not all of them. A channel missing from it is not necessarily one @Prowler has to be invited to.";
+
+/**
+ * For a `2xx` the UI could not read. Not phrased as a failure: the install
+ * happened, only the workspace cannot be named.
+ */
+export const SLACK_UNREADABLE_RESULT_MESSAGE =
+  "Prowler could not read the result of the install. Open the Slack integration page to see the workspace — if none is listed there, start the install again.";
+
+/**
+ * The shape of a Slack reason code, as opposed to a sentence: the set is
+ * open-ended, so a reason is gated on its shape before being interpolated.
+ */
+export const SLACK_REASON_TOKEN = /^[a-z0-9_]{1,48}$/;
+
+/**
+ * Copy for a reason code Prowler has no wording of its own for — the ordinary
+ * case, since the set is open-ended.
+ */
+export const slackUnknownReasonMessage = (reason: string): string =>
+  `Slack refused the message (${reason}). Choose another channel, or check the channel in Slack.`;
+
+const RECONNECT = "Connect the workspace again to restore access.";
+
+export const SLACK_ERROR_MESSAGES = {
+  [SLACK_ERROR_CODE.MISSING_SCOPE]:
+    "Prowler is missing a permission it needs in Slack. Connect the workspace again and approve the access Prowler asks for.",
+  [SLACK_ERROR_CODE.CHANNEL_NOT_FOUND]:
+    "That channel no longer exists in the workspace. Choose another one.",
+  [SLACK_ERROR_CODE.NOT_IN_CHANNEL]:
+    "Prowler is not in that channel. Invite @Prowler to it in Slack, or choose a channel it can already post to.",
+  [SLACK_ERROR_CODE.NO_PERMISSION]:
+    "Slack did not allow Prowler to post there. Choose another channel, or ask a workspace admin to allow it.",
+  [SLACK_ERROR_CODE.TOKEN_REVOKED]: `Prowler's access to Slack was revoked. ${RECONNECT}`,
+  [SLACK_ERROR_CODE.INVALID_AUTH]: `Slack no longer accepts Prowler's credential. ${RECONNECT}`,
+  [SLACK_ERROR_CODE.ACCOUNT_INACTIVE]: `The Slack account Prowler was installed with is no longer active. ${RECONNECT}`,
+  [SLACK_ERROR_CODE.TOKEN_EXPIRED]: `Prowler's Slack credential has expired. ${RECONNECT}`,
+  [SLACK_ERROR_CODE.WORKSPACE_CONFLICT]:
+    "Prowler is already connected to a different Slack workspace. Disconnect it before connecting another one.",
+} as const satisfies Record<SlackErrorCode, string>;
+
+/** The parts of a JSON:API error this mapping reads. */
+export interface SlackErrorSource {
+  code?: string | null;
+  detail?: string | null;
+}
+
+export interface SlackApiFailure extends SlackErrorSource {
+  status: number;
+  retryAfterSeconds: number | null;
+}
+
+const isKnownCode = (code: string | null | undefined): code is SlackErrorCode =>
+  typeof code === "string" &&
+  Object.prototype.hasOwnProperty.call(SLACK_ERROR_MESSAGES, code);
+
+/**
+ * Copy for a refusal: Prowler's wording for a known `code`, else the API's
+ * `detail`, else `fallback`.
+ */
+export const slackErrorMessage = (
+  error: SlackErrorSource | null | undefined,
+  fallback: string = SLACK_GENERIC_ERROR_MESSAGE,
+): string => {
+  if (isKnownCode(error?.code)) return SLACK_ERROR_MESSAGES[error.code];
+  return error?.detail?.trim() || fallback;
+};
+
+const describeWait = (seconds: number): string => {
+  if (seconds < 60) return `${seconds} second${seconds === 1 ? "" : "s"}`;
+  const minutes = Math.ceil(seconds / 60);
+  return `${minutes} minute${minutes === 1 ? "" : "s"}`;
+};
+
+export const slackRateLimitMessage = (
+  retryAfterSeconds: number | null,
+): string => {
+  if (retryAfterSeconds === null || retryAfterSeconds <= 0) {
+    return SLACK_RATE_LIMITED_MESSAGE;
+  }
+  return `Slack is rate limiting Prowler right now. Try again in about ${describeWait(
+    Math.ceil(retryAfterSeconds),
+  )}.`;
+};
+
+const retryAfterFrom = (response: Response): number | null => {
+  const header = response.headers.get("retry-after");
+  if (!header) return null;
+  const seconds = Number(header.trim());
+  return Number.isFinite(seconds) && seconds > 0 ? seconds : null;
+};
+
+/**
+ * Read a non-OK Slack response into the failure it describes. Never throws: a
+ * body that is not JSON:API still yields a failure carrying the status.
+ */
+export const readSlackFailure = async (
+  response: Response,
+): Promise<SlackApiFailure> => {
+  const body = await response.json().catch(() => null);
+  const error = Array.isArray(body?.errors) ? body.errors[0] : null;
+
+  return {
+    status: response.status,
+    code: typeof error?.code === "string" ? error.code : null,
+    detail: typeof error?.detail === "string" ? error.detail : null,
+    retryAfterSeconds: retryAfterFrom(response),
+  };
+};

ui/types/integrations.ts

@@ -2,7 +2,15 @@ import { z } from "zod";
 
 import type { TaskState } from "@/types/tasks";
 
-export type IntegrationType = "amazon_s3" | "aws_security_hub" | "jira";
+export const INTEGRATION_TYPE = {
+  AMAZON_S3: "amazon_s3",
+  AWS_SECURITY_HUB: "aws_security_hub",
+  JIRA: "jira",
+  SLACK: "slack",
+} as const;
+
+export type IntegrationType =
+  (typeof INTEGRATION_TYPE)[keyof typeof INTEGRATION_TYPE];
 
 export const JIRA_DISPATCH_MODE = {
   INDIVIDUAL: "individual",
@@ -68,7 +76,10 @@ export interface IntegrationProps {
     inserted_at: string;
     updated_at: string;
     enabled: boolean;
-    connected: boolean;
+    // `null` until a connection check has run: never verified, neither working
+    // nor broken. A Slack install starts here, and returns here on a channel
+    // change.
+    connected: boolean | null;
     connection_last_checked_at: string | null;
     integration_type: IntegrationType;
     configuration: {
@@ -87,6 +98,13 @@ export interface IntegrationProps {
       domain?: string;
       projects?: { [key: string]: string };
       issue_types?: { [key: string]: string[] };
+      // Slack specific configuration, server-owned. The channel keys are absent
+      // until one is chosen, not present and null: read them with `?? null`.
+      team_id?: string;
+      team_name?: string;
+      bot_user_id?: string;
+      channel_id?: string;
+      channel_name?: string;
       [key: string]: unknown;
     };
     url?: string;
@@ -95,6 +113,16 @@ export interface IntegrationProps {
   links: { self: string };
 }
 
+/**
+ * A channel Prowler can post to: every active public channel, plus the private
+ * ones `@Prowler` was invited to. `is_private` keeps the API's own naming.
+ */
+export interface SlackChannelOption {
+  id: string;
+  name: string;
+  is_private: boolean;
+}
+
 // Jira dispatch types
 export interface JiraDispatchRequest {
   data: {

ui/vitest.config.ts

@@ -1,9 +1,34 @@
-import react from "@vitejs/plugin-react";
+import react, { type BabelOptions } from "@vitejs/plugin-react";
 import { playwright } from "@vitest/browser-playwright";
+import fs from "fs";
 import path from "path";
 import type { TestProjectConfiguration } from "vitest/config";
 import { defineConfig } from "vitest/config";
 
+/**
+ * Next runs the React Compiler on the client compilation only — its
+ * `getReactCompilerPlugins` returns nothing when `isServer` — so a Server
+ * Component ships uncompiled. Mirror that: compiled, it calls `useMemoCache`
+ * on the active dispatcher, which a harness invoking the component as a
+ * function has none of, and `react/compiler-runtime` reads the client
+ * internals the `react-server` build does not export anyway.
+ */
+const isServerModule = (id: string): boolean => {
+  const file = id.split("?")[0];
+  if (!file.includes("/app/")) return false;
+  try {
+    return !/^\s*["']use client["']/.test(fs.readFileSync(file, "utf8"));
+  } catch {
+    return false;
+  }
+};
+
+const reactCompilerBabel = (id: string): BabelOptions => ({
+  plugins: isServerModule(id)
+    ? []
+    : [["babel-plugin-react-compiler", { target: "19" }]],
+});
+
 export default defineConfig(() => {
   const apiBaseUrl = process.env.UI_API_BASE_URL ?? "http://localhost/api/v1";
 
@@ -57,13 +82,7 @@ export default defineConfig(() => {
         },
         {
           extends: true,
-          plugins: [
-            react({
-              babel: {
-                plugins: [["babel-plugin-react-compiler", { target: "19" }]],
-              },
-            }),
-          ],
+          plugins: [react({ babel: reactCompilerBabel })],
           test: {
             name: "integration",
             setupFiles: ["./vitest.integration.setup.ts"],
@@ -109,6 +128,9 @@ export default defineConfig(() => {
         // React runtime (pre-bundle so a cold run doesn't re-optimize and
         // reload mid-test — see the on-demand-reload note above).
         "react-dom/client",
+        // What the compiler's output imports. `@vitejs/plugin-react` adds it
+        // itself only when `babel` is a plain object, and ours is a function.
+        "react/compiler-runtime",
 
         // Next runtime
         "next/headers",