Scope Integrations to the signed-in member and their credentials

Author: emir-karabeg

apps/sim/platform/README.md

@@ -13,7 +13,7 @@ SIM_PLATFORM_FIXTURES=1 bun run --cwd apps/sim dev:platform
 
 Open [Home](http://localhost:3100/home), [Chat](http://localhost:3100/chat/weekly-review?state=full), [Settings](http://localhost:3100/settings), [Integrations](http://localhost:3100/integrations?state=full), or the separate [component workbench](http://localhost:3100/workbench). With the flag on, `?state=empty|full|stress` selects the fixture on any of them. `?theme=light|dark|system` selects the product appearance. Product navigation preserves these choices; nothing writes examples to storage. The URL cannot activate the server flag. Old catalog links with a recipe still open the workbench.
 
-The product routes live under `app/(shell)/`. Their shared App Router layout owns the shell, sidebar scroll viewport, interface preferences and chat edits. Home, Chat, Settings and Integrations pages render their own bodies inside that layout. Navigating between them keeps the sidebar reading position, including when returning from Settings. The shell selects its gated fixture and appearance from the current URL. Each route owns its components and CSS Modules in a private `_components/<component>/` folder: the [Home chart](app/%28shell%29/home/_components/activity-chart/activity-chart.tsx) sits beside its styles; the [dialog](design-system/components/modal/modal.tsx) belongs to EMCN. Shared shell UI lives in `app/(shell)/_components/`. [Rhythm tokens](design-system/styles/rhythm.css) and the [ownership and interaction contract](AGENTS.md) apply throughout the product. The [Paper state inventory](docs/core-chat-states.md) enumerates the source rows in scope. The [organization integrations guide](docs/organization-integrations.md) maps the app catalog, Search, account controls and workspace grants to their Phase 3 operations. Workspace destinations and workspace create/sort return to Home. Wiki is deferred.
+The product routes live under `app/(shell)/`. Their shared App Router layout owns the shell, sidebar scroll viewport, interface preferences and chat edits. Home, Chat, Settings and Integrations pages render their own bodies inside that layout. Navigating between them keeps the sidebar reading position, including when returning from Settings. The shell selects its gated fixture and appearance from the current URL. Each route owns its components and CSS Modules in a private `_components/<component>/` folder: the [Home chart](app/%28shell%29/home/_components/activity-chart/activity-chart.tsx) sits beside its styles; the [dialog](design-system/components/modal/modal.tsx) belongs to EMCN. Shared shell UI lives in `app/(shell)/_components/`. [Rhythm tokens](design-system/styles/rhythm.css) and the [ownership and interaction contract](AGENTS.md) apply throughout the product. The [Paper state inventory](docs/core-chat-states.md) enumerates the source rows in scope. The [organization integrations guide](docs/organization-integrations.md) maps the member inventory, credential actions and tool permissions to their Phase 3 operations. Workspace destinations and workspace create/sort return to Home. Wiki is deferred.
 
 ## Desktop
 

apps/sim/platform/app/(shell)/_components/product-session.tsx

@@ -31,7 +31,7 @@ export function ProductSession({ children, fixtures }: ProductSessionProps) {
           <ChatChangesProvider>
             <ComposerDrafts>
               <ProductSurface preference={readAppearance(search.get('theme'))}>
-                <IntegrationChanges key={search.get('role') === 'member' ? 'member' : 'admin'}>
+                <IntegrationChanges>
                   <PlatformShell data={fixtures?.[scenario] ?? null}>{children}</PlatformShell>
                 </IntegrationChanges>
               </ProductSurface>

apps/sim/platform/app/(shell)/_components/session/integration-changes.tsx

@@ -1,17 +1,15 @@
 'use client'
 
 import { createContext, type ReactNode, useContext, useState } from 'react'
-import {
-  type IntegrationsData,
-  memberSearchMethod,
-  type OrganizationIntegration,
-  type WorkspaceAccess,
-} from '@/platform/lib/integrations/model'
+import type { IntegrationsData, OrganizationIntegration } from '@/platform/lib/integrations/model'
+
+type AccountEdits = Pick<
+  OrganizationIntegration,
+  'accounts' | 'connectableMethod' | 'connectionCandidate'
+>
 
 function useEdits() {
-  const [records, setRecords] = useState<Record<string, OrganizationIntegration | null>>({})
-  const [grants, setGrants] = useState<Record<string, WorkspaceAccess> | null>(null)
-  return { records, setRecords, grants, setGrants }
+  return useState<Record<string, AccountEdits>>({})
 }
 
 const Changes = createContext<ReturnType<typeof useEdits> | null>(null)
@@ -21,71 +19,29 @@ interface IntegrationChangesProps {
 }
 
 export function IntegrationChanges({ children }: IntegrationChangesProps) {
-  return <Changes.Provider value={useEdits()}>{children}</Changes.Provider>
+  const edits = useEdits()
+  return <Changes.Provider value={edits}>{children}</Changes.Provider>
 }
 
 export function useOrganizationIntegrations(data: IntegrationsData | null) {
-  const changes = useContext(Changes)
-  if (!changes) throw new Error('Integration controls must be inside the product layout')
-  const { records, setRecords, grants, setGrants } = changes
-  const configured = new Map(data?.integrations.map((item) => [item.providerId, item]))
-  for (const [id, edit] of Object.entries(records)) {
-    if (edit) configured.set(id, edit)
-    else configured.delete(id)
-  }
-  function save(next: OrganizationIntegration) {
-    if (!data) return
-    const current = configured.get(next.providerId)
-    if (!data.canManage && !current) return
-    const provider = data.providers.find((entry) => entry.id === next.providerId)
-    if (!provider) return
-    const requiredMethod = next.searchApproved && memberSearchMethod(provider)
-    const updated =
-      requiredMethod && !next.accountMethods.includes(requiredMethod)
-        ? { ...next, accountMethods: [...next.accountMethods, requiredMethod] }
-        : next
-    const previouslyActive = new Set(
-      current?.people.filter((person) => person.status !== 'revoked').map((person) => person.id)
-    )
-    const revoked = new Set(
-      next.people
-        .filter((person) => person.status === 'revoked' && previouslyActive.has(person.id))
-        .map((person) => person.id)
-    )
-    setRecords((previous) => {
-      const updates = { ...previous }
-      if (data.canManage && revoked.size) {
-        for (const item of configured.values()) {
-          if (item.people.some((person) => revoked.has(person.id) && person.status !== 'revoked')) {
-            updates[item.providerId] = {
-              ...item,
-              people: item.people.map((person) =>
-                revoked.has(person.id) ? { ...person, status: 'revoked' } : person
-              ),
-            }
-          }
-        }
-      }
-      updates[next.providerId] =
-        data.canManage || !current ? updated : { ...current, accounts: next.accounts }
-      return updates
-    })
-  }
+  const edits = useContext(Changes)
+  if (!edits) throw new Error('Integration controls must be inside the product layout')
+  const [accounts, setAccounts] = edits
   return {
-    configured,
-    grants: grants ?? data?.workspaceGrants ?? {},
-    save,
-    remove(id: string) {
-      if (data?.canManage) setRecords((previous) => ({ ...previous, [id]: null }))
-    },
-    setAccess(workspaceId: string, access: WorkspaceAccess | null) {
-      if (!data?.canManage) return
-      setGrants((previous) => {
-        const next = { ...(previous ?? data.workspaceGrants) }
-        if (access) next[workspaceId] = access
-        else delete next[workspaceId]
-        return next
-      })
+    integrations: (data?.integrations ?? []).map((item) => ({
+      ...item,
+      ...accounts[item.providerId],
+    })),
+    save(item: OrganizationIntegration) {
+      if (!data?.integrations.some(({ providerId }) => providerId === item.providerId)) return
+      setAccounts((current) => ({
+        ...current,
+        [item.providerId]: {
+          accounts: item.accounts,
+          connectableMethod: item.connectableMethod,
+          connectionCandidate: item.connectionCandidate,
+        },
+      }))
     },
   }
 }

apps/sim/platform/app/(shell)/integrations/_components/account-authorization/account-authorization.tsx

@@ -0,0 +1,39 @@
+import { Modal } from '@/platform/design-system/components'
+import type { AccountMethod, IntegrationAccount } from '@/platform/lib/integrations/model'
+
+const AUTHORIZATION: Record<AccountMethod, string> = {
+  oauth: 'Authorize your provider account to give Sim access.',
+  slack: 'Authorize your member account with your organization’s Slack app.',
+  mcp: 'Sign in to the managed MCP server with your own provider account.',
+}
+
+interface AccountAuthorizationProps {
+  provider: string
+  method: AccountMethod
+  account?: IntegrationAccount
+  candidateLabel?: string
+  onClose: () => void
+  onAuthorize?: () => void
+}
+
+export function AccountAuthorization({
+  provider,
+  method,
+  account,
+  candidateLabel,
+  onClose,
+  onAuthorize,
+}: AccountAuthorizationProps) {
+  const label = account?.label ?? candidateLabel
+  return (
+    <Modal
+      open
+      onOpenChange={onClose}
+      title={account ? 'Reconnect account' : `Connect to ${provider}`}
+      description={label ? `${label} · ${AUTHORIZATION[method]}` : AUTHORIZATION[method]}
+      confirmLabel={account ? 'Reconnect' : 'Connect account'}
+      confirmDisabled={!onAuthorize}
+      onConfirm={onAuthorize}
+    />
+  )
+}