feat: expose slack agent configuration page via posthog code settings

apps/code/src/renderer/features/integrations/hooks/useGithubUserConnect.ts

@@ -6,6 +6,7 @@ import type { PostHogAPIClient } from "@renderer/api/posthogClient";
 import { trpcClient } from "@renderer/trpc/client";
 import { IS_DEV } from "@shared/constants/environment";
 import { type QueryClient, useQueryClient } from "@tanstack/react-query";
+import { openUrlInBrowser } from "@utils/browser";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 const POLL_INTERVAL_MS = 3_000;
@@ -91,14 +92,6 @@ export function invalidateGithubQueries(
   void queryClient.invalidateQueries({ queryKey: ["github_login"] });
 }
 
-export async function openUrlInBrowser(url: string): Promise<void> {
-  try {
-    await trpcClient.os.openExternal.mutate({ url });
-  } catch {
-    window.open(url, "_blank", "noopener,noreferrer");
-  }
-}
-
 interface StateMachine {
   state: GithubUserConnectState;
   error: GithubUserConnectError | null;

apps/code/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -23,6 +23,7 @@ import {
   Keyboard,
   Palette,
   SignOut,
+  SlackLogo,
   TrafficSignal,
   TreeStructure,
   Wrench,
@@ -40,6 +41,7 @@ import { PersonalizationSettings } from "./sections/PersonalizationSettings";
 import { PlanUsageSettings } from "./sections/PlanUsageSettings";
 import { ShortcutsSettings } from "./sections/ShortcutsSettings";
 import { SignalSourcesSettings } from "./sections/SignalSourcesSettings";
+import { SlackSettings } from "./sections/SlackSettings";
 import { UpdatesSettings } from "./sections/UpdatesSettings";
 import { WorkspacesSettings } from "./sections/WorkspacesSettings";
 import { WorktreesSettings } from "./sections/worktrees/WorktreesSettings";
@@ -69,6 +71,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { id: "claude-code", label: "Claude Code", icon: <Code size={16} /> },
   { id: "shortcuts", label: "Shortcuts", icon: <Keyboard size={16} /> },
   { id: "github", label: "GitHub", icon: <GithubLogo size={16} /> },
+  { id: "slack", label: "Slack", icon: <SlackLogo size={16} /> },
 
   {
     id: "signals",
@@ -90,6 +93,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   "claude-code": "Claude Code",
   shortcuts: "Shortcuts",
   github: "GitHub",
+  slack: "Slack integration",
 
   signals: "Signals",
   updates: "Updates",
@@ -107,6 +111,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   "claude-code": ClaudeCodeSettings,
   shortcuts: ShortcutsSettings,
   github: GitHubSettings,
+  slack: SlackSettings,
 
   signals: SignalSourcesSettings,
   updates: UpdatesSettings,

apps/code/src/renderer/features/settings/components/sections/GitHubSettings.tsx

@@ -3,7 +3,6 @@ import { useAuthStateValue } from "@features/auth/hooks/authQueries";
 import {
   describeGithubConnectError,
   invalidateGithubQueries,
-  openUrlInBrowser,
   useGithubUserConnect,
 } from "@features/integrations/hooks/useGithubUserConnect";
 import {
@@ -33,6 +32,7 @@ import type { UserGitHubIntegration } from "@renderer/api/posthogClient";
 import { formatRelativeTimeLong } from "@renderer/utils/time";
 import { toast } from "@renderer/utils/toast";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { openUrlInBrowser } from "@utils/browser";
 import { useState } from "react";
 
 const REPO_PREVIEW_COUNT = 3;

apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx

@@ -0,0 +1,48 @@
+import { useAuthStateValue } from "@features/auth/hooks/authQueries";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+import { Button, Flex, Text, Tooltip } from "@radix-ui/themes";
+import { openUrlInBrowser } from "@utils/browser";
+import { getPostHogUrl } from "@utils/urls";
+
+export function SlackSettings() {
+  const projectId = useAuthStateValue((s) => s.projectId);
+  const cloudRegion = useAuthStateValue((s) => s.cloudRegion);
+
+  const slackSettingsUrl = projectId
+    ? getPostHogUrl(
+        `/project/${projectId}/settings/project-posthog-code#integration-posthog-code-slack`,
+        cloudRegion,
+      )
+    : null;
+
+  const button = (
+    <Button
+      size="1"
+      disabled={!slackSettingsUrl}
+      onClick={() => {
+        if (slackSettingsUrl) void openUrlInBrowser(slackSettingsUrl);
+      }}
+    >
+      <ArrowSquareOutIcon size={12} />
+      Manage in PostHog Web
+    </Button>
+  );
+
+  return (
+    <Flex direction="column" gap="3">
+      <Text className="text-(--gray-11) text-[13px]">
+        Connect Slack to PostHog Code to kick off tasks like pull requests
+        directly from Slack.
+      </Text>
+      <Flex>
+        {slackSettingsUrl ? (
+          button
+        ) : (
+          <Tooltip content="Sign in to a PostHog project to manage the Slack integration">
+            {button}
+          </Tooltip>
+        )}
+      </Flex>
+    </Flex>
+  );
+}

apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts

@@ -11,6 +11,7 @@ export type SettingsCategory =
   | "claude-code"
   | "shortcuts"
   | "github"
+  | "slack"
   | "signals"
   | "updates"
   | "advanced";

apps/code/src/renderer/utils/browser.ts

@@ -0,0 +1,9 @@
+import { trpcClient } from "@renderer/trpc/client";
+
+export async function openUrlInBrowser(url: string): Promise<void> {
+  try {
+    await trpcClient.os.openExternal.mutate({ url });
+  } catch {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}