From a594eaaf585ea6c9d0f9b07aef382a400c30c396 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Wed, 20 May 2026 09:53:58 -0400
Subject: [PATCH] feat(web): show Slack integration status on settings page

Add a Communication panel showing Slack integration enabled state
and default channel, alongside the existing GitHub panel reframed
as Version Control.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/routes/settings-integrations.tsx      | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/apps/fabro-web/app/routes/settings-integrations.tsx b/apps/fabro-web/app/routes/settings-integrations.tsx
index cd81a2852..64140f1ef 100644
--- a/apps/fabro-web/app/routes/settings-integrations.tsx
+++ b/apps/fabro-web/app/routes/settings-integrations.tsx
@@ -27,23 +27,33 @@ export default function SettingsIntegrations() {
   return (
     <div className="space-y-6">
       <SettingsPageIntro description={DESCRIPTION} />
-      {settings ? <IntegrationsPanel settings={settings} /> : <PanelSkeleton />}
+      {settings ? (
+        <>
+          <GithubPanel settings={settings} />
+          <SlackPanel settings={settings} />
+        </>
+      ) : (
+        <>
+          <PanelSkeleton />
+          <PanelSkeleton />
+        </>
+      )}
     </div>
   );
 }
 
-function IntegrationsPanel({ settings }: { settings: ServerSettings }) {
-  const { integrations } = settings.server;
+function GithubPanel({ settings }: { settings: ServerSettings }) {
+  const { github } = settings.server.integrations;
   return (
-    <Panel title="Integrations">
+    <Panel title="Version Control">
       <Row title="GitHub" help="App for repo access, checks, and PR automation.">
         <IntegrationValue
-          enabled={integrations.github.enabled}
+          enabled={github.enabled}
           detail={
-            integrations.github.slug
-              ? `app: ${integrations.github.slug}`
-              : integrations.github.app_id
-                ? `app id: ${integrations.github.app_id}`
+            github.slug
+              ? `app: ${github.slug}`
+              : github.app_id
+                ? `app id: ${github.app_id}`
                 : undefined
           }
         />
@@ -52,6 +62,27 @@ function IntegrationsPanel({ settings }: { settings: ServerSettings }) {
   );
 }
 
+function SlackPanel({ settings }: { settings: ServerSettings }) {
+  const { slack } = settings.server.integrations;
+  return (
+    <Panel title="Communication">
+      <Row
+        title="Slack"
+        help="Workspace app for run notifications and approvals."
+      >
+        <IntegrationValue
+          enabled={slack.enabled}
+          detail={
+            slack.default_channel
+              ? `channel: ${slack.default_channel}`
+              : undefined
+          }
+        />
+      </Row>
+    </Panel>
+  );
+}
+
 function IntegrationValue({
   enabled,
   detail,