improvement(platform): expand integration catalog and credential management

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -27,9 +27,11 @@ Home and Chat share a centered, border-box reading column (maximum width and inl
 
 Use `ControlRow` for the sidebar, identity controls, panel tabs, recent links, wrapping workspace choices and horizontal destination links. The row owns its 30px height, 8px inset and the placement and hover of a 24px action, including a leading remove button that replaces an existing glyph. Workspace names, the Workspaces launcher and its tab title are text-only. A recent without a glyph keeps its remove action at the end. Keep the link, tab or button semantics on the rendered element, with sibling actions outside it. Whole section headers reveal their chevron on hover; identity controls need none. Ordinary buttons, icon triggers and rows share the sidebar Home radius (`--ui-control-radius`). Use `Button` / `IconButton` for actions and Base UI triggers, passing icons and labels through their slots. The composer toolbar owns its round actions. Switches and segmented controls keep their pill shape. Clicking the selected half of a two-choice segment switches to the other half. Native keyboard choice navigation still selects its destination.
 
+Use `Stack` for compact people or integration artwork: show two items, a passive `+N` overflow count, and each item’s name on hover. Counts remain intrinsic-width and use compact notation from one thousand; never replace them with an ellipsis action. Each hovered item shifts left by the shared inset without moving its siblings. Use the shared motion duration and respect reduced motion. `AvatarGroup` supplies people to the same stack for integration usage and calendar attendees.
+
 Use `ActivityRow` for a first-line glyph or avatar, title/detail and centered trailing metadata. Use the chart, calendar, composer or attachment owner when those parts have a different interaction. See the [component ownership map](docs/component-ownership.md) before adding another family.
 
-Toolbar choices use `ChoiceMenu`, the same compact quiet button and menu as Home's activity period. A toolbar action uses the existing quiet compact Button or IconButton. `Select` and `SelectField` provide field chrome for forms and settings; do not place a full-width field picker in a control bar or invent a toolbar variant to disguise it. Reuse the existing owner for the interaction and compare its actual trigger with Home before accepting it.
+Toolbar choices use `ChoiceMenu`, the same compact quiet button and menu as Home's activity period. A toolbar action uses the existing quiet compact Button or IconButton. Page-level actions live in the control bar beneath the title and description; an action for a particular record belongs with that record. `Select` and `SelectField` provide field chrome for forms and settings; do not place a full-width field picker in a control bar or invent a toolbar variant to disguise it. Reuse the existing owner for the interaction and compare its actual trigger with Home before accepting it.
 
 Measure the actual scroll viewport with `ScrollArea`, or attach `useScrollEdges` directly to a native or Base UI scroll owner. Use the shared 16px mask only on edges with more content, updating after scroll, resize, input, reset or filtering. Platform and Settings navigation hide the native scrollbar and keep their edge fades, keyboard, wheel and touch scrolling. Other scroll areas keep their existing scrollbar behavior. Insets establish resting layout; they cannot substitute for an edge fade. Home widgets and notification panels use `--ui-widget-max-size` as a ceiling, not a forced height. Keep the dashboard free to scroll and let each overflowing list or schedule scroll independently. Plain tooltips preview at most three lines; retain the complete accessible text. A structured people popover owns its content and uses the dropdown’s popup padding and row insets.
 

apps/sim/platform/README.md

@@ -15,6 +15,8 @@ Open [Home](http://localhost:3100/home), [Chat](http://localhost:3100/chat/weekl
 
 Settings uses the same organization catalog and section components in fixture and live routes. [General](http://localhost:3100/settings/general?state=full) includes Privacy and Account details; [Sources](http://localhost:3100/settings/integrations?state=full) is the administrator's Search source inventory. The [integration center](docs/integration-center.md) is the member-facing management surface for Apps, Skills, MCPs and Credentials. Settings examples are loaded only by the server's fixture flag. Their edits belong to the browser session; no account, credential, organization policy or subscription is changed by preview interactions.
 
+Integration fixtures cover the full workspace app catalog, multiple credentials, OAuth and provider-specific service-account forms, access management, suggested skills and templates. App-level actions use the control bar; credential rows open their own details. Family credentials share a canonical ID across apps. New enrollment and sharing remain UI-only, with secrets confined to the open form. The existing live Search adapter keeps its own authorized inventory and actions until the broader credential seam is connected.
+
 Settings fixtures default to Enterprise at every density. The [Team subscription](http://localhost:3100/settings/billing?state=stress&plan=team) and [Free subscription](http://localhost:3100/settings/billing?state=empty&plan=free) previews apply the selected plan to Billing, Members and the available Settings sections. The [Knowledge graphs preview](http://localhost:3100/settings/knowledge-graphs?state=stress) uses the stress viewer’s platform-admin role, benchmark access and enabled superuser mode.
 
 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 data operations. The integration center lives at the organization root; Home and eligible workspace links open that same destination. Standalone workspaces and viewers without organization Search access retain their existing credential route. Skills, MCPs and new sharing/editor interactions currently use only server-gated fixtures. Paper workspace tabs and the control bar inform the center's anatomy. Wiki is deferred.
@@ -65,7 +67,7 @@ Shared and Platform still own different recipes; `catalog/evidence.json` preserv
 
 Workspace lists, sidebar items, recents and attachment batches accept typed arrays with stable item IDs. Use the named components for these collection masters: a Paper specimen's item count is sample data. An empty array renders zero items, and adding items preserves their registered row/card appearance. Each scroll viewport determines fades and controls from its actual contents. Chart labels, marks, inspected values and legends come from the same series. Supply raw numeric values and their units to data tables. The column schema determines alignment and which columns remain visible as the table narrows.
 
-The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. Home and Chat share a reading width. Home and Integrations share the same heading inset; the shell reserves sidebar opener and native titlebar clearance separately. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home content scrolls through its viewport edge fade. The shell keeps the collapsed sidebar button aligned with the expanded toolbar even as the page scrolls. Platform and Settings navigation scroll independently, with edge fades instead of a visible scrollbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. The attendee control opens its own people popover. Now appears when the calendar scrolls away from its resting position or another day is selected. It restores today’s schedule and centers the current time. Scrolling back to that position also hides Now.
+The full fixture includes twenty sidebar workspaces, sixteen conversations, a twelve-message inbox and a calendar that scrolls from midnight to midnight even on empty days. Home and Chat share a reading width. Home and Integrations share the same heading inset; the shell reserves sidebar opener and native titlebar clearance separately. The shell uses one 12px inset above the organization and on both sides of the profile row. The Home content scrolls through its viewport edge fade. The shell keeps the collapsed sidebar button aligned with the expanded toolbar even as the page scrolls. Platform and Settings navigation scroll independently, with edge fades instead of a visible scrollbar. Calendar events use the muted surface. An event with a provider URL opens in a new tab. Attendees and integration usage share Stack: two photos with names on hover and a passive +N count, compacted for large totals. Now appears when the calendar scrolls away from its resting position or another day is selected. It restores today’s schedule and centers the current time. Scrolling back to that position also hides Now.
 
 Start with the [component ownership map](docs/component-ownership.md) when choosing a primitive. Sidebar, recents and panel tabs use one row; form and command dialogs use one borderless surface. Copy confirmations and transient notifications last four seconds. The notification count uses the compact Invite button. Expanded notices share one subtle shadow around the list. A new notice pauses its expiry on hover or keyboard focus. Icon color transitions take 120ms and respect reduced motion. The [design contract](AGENTS.md) defines these rules.
 
@@ -88,6 +90,7 @@ The [Platform design contract](AGENTS.md) is authoritative. Use the repository's
 - **Styles:** obtain Shared Light `get_tokens` (the token array) and `get_computed_styles` for the type masters (the node-to-style map); confirm theme file hashes match before assuming identical vocabulary. Run `bun scripts/sync-platform-foundations.ts <tokens.json> <registry.json> <styles.json>`, or append `--check` to compare without writing. This preserves aliases and converts scalable Paper px to rem at the 16px reference scale. Roles and material composites live in `design-system/styles`. The Tailwind entry scans only component owners; product pages do not receive a styling API.
 - **Structure:** capture current Shared/Platform master JSX locally with node IDs for the compiler's anatomy check in `<exports>/<key>.jsx` and reconcile the registry and recipe contracts. Run `bun scripts/sync-platform-recipes.ts <paper-references-directory> <exports-directory>` from the repository root. Review changed keys, token aliases, CSS and nested slot geometry in the rendered workbench. Do not edit generated selectors to fix a product use.
 - **Assets:** retain canonical glyph geometry and brand paints. Media belongs in named slots; do not fetch private Paper artwork at runtime. Fixture content is removable from `fixtures/`. Remove its loader, preview calls and synthetic data together when real resource reads arrive.
+- **Integration catalog:** run `bun scripts/sync-platform-integration-metadata.ts` after changing public provider metadata, connection definitions, skills, templates or registry icons. The generated server-only catalog supplies selected detail content; the directory receives compact summaries. `bun run check:platform-integration-metadata` detects drift. Runtime product code never imports the executable block/tool registry.
 
 ## Verification
 

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

@@ -1,18 +1,14 @@
 'use client'
 
 import { createContext, type ReactNode, useContext, useState } from 'react'
+import type { IntegrationCredential } from '@/platform/lib/integrations/credential-model'
 import type {
   IntegrationsData,
   OrganizationIntegration,
 } from '@/platform/lib/integrations/fixture-model'
 
-type AccountEdits = Pick<
-  OrganizationIntegration,
-  'account' | 'connectableMethod' | 'connectionCandidate'
->
-
 function useEdits() {
-  return useState<Record<string, AccountEdits>>({})
+  return useState<Record<string, IntegrationCredential | null>>({})
 }
 
 const Changes = createContext<ReturnType<typeof useEdits> | null>(null)
@@ -26,25 +22,89 @@ export function IntegrationChanges({ children }: IntegrationChangesProps) {
   return <Changes.Provider value={edits}>{children}</Changes.Provider>
 }
 
+function metadata(credential: IntegrationCredential): IntegrationCredential {
+  const {
+    id,
+    appId,
+    providerId,
+    type,
+    displayName,
+    description,
+    accountLabel,
+    instanceUrl,
+    role,
+    status,
+    canReconnect,
+    scope,
+    members,
+    permissions,
+  } = credential
+  return {
+    id,
+    appId,
+    providerId,
+    type,
+    displayName,
+    description,
+    accountLabel,
+    instanceUrl,
+    role,
+    status,
+    canReconnect,
+    scope,
+    permissions,
+    members: members.map(
+      ({ id, userId, name, email, src, role, roleSource, explicitAdmin, status }) => ({
+        id,
+        userId,
+        name,
+        email,
+        src,
+        role,
+        roleSource,
+        explicitAdmin,
+        status,
+      })
+    ),
+  }
+}
+
+/** A family credential is edited by its canonical ID across every app that displays it. */
 export function useOrganizationIntegrations(data: IntegrationsData | null) {
   const edits = useContext(Changes)
   if (!edits) throw new Error('Integration controls must be inside the product layout')
-  const [accounts, setAccounts] = edits
+  const [credentials, setCredentials] = edits
+  const roster = new Map<string, IntegrationCredential | null>(
+    data?.integrations.flatMap((item) =>
+      item.credentials.map((credential) => [credential.id, credential] as const)
+    )
+  )
+  for (const [id, credential] of Object.entries(credentials)) roster.set(id, credential)
+  const visible = [...roster.values()].filter((credential): credential is IntegrationCredential =>
+    Boolean(credential)
+  )
+  const integrations = (data?.integrations ?? []).map((item) => ({
+    ...item,
+    credentials: visible.filter(
+      (credential) =>
+        credential.appId === item.providerId ||
+        item.credentialProviders.includes(credential.providerId)
+    ),
+  }))
   return {
-    integrations: (data?.integrations ?? []).map((item) => ({
-      ...item,
-      ...accounts[item.providerId],
-    })),
+    integrations,
     save(item: OrganizationIntegration) {
-      if (!data?.integrations.some(({ providerId }) => providerId === item.providerId)) return
-      setAccounts((current) => ({
-        ...current,
-        [item.providerId]: {
-          account: item.account,
-          connectableMethod: item.connectableMethod,
-          connectionCandidate: item.connectionCandidate,
-        },
-      }))
+      const previous = integrations.find(({ providerId }) => providerId === item.providerId)
+      if (!data || !previous) return
+      setCredentials((current) => {
+        const next = { ...current }
+        const retained = new Set(item.credentials.map(({ id }) => id))
+        for (const credential of previous.credentials) {
+          if (!retained.has(credential.id)) next[credential.id] = null
+        }
+        for (const credential of item.credentials) next[credential.id] = metadata(credential)
+        return next
+      })
     },
   }
 }

apps/sim/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import styles from '@/platform/app/(shell)/integrations/_components/connected-credential/connected-credential.module.css'
-import { ActionMenu, Button, Modal } from '@/platform/design-system/components'
+import { ActionMenu, Modal } from '@/platform/design-system/components'
 import type { IntegrationAccount } from '@/platform/lib/data/integrations-types'
 
 interface CredentialRow extends IntegrationAccount {
@@ -16,8 +16,6 @@ interface ConnectedCredentialProps {
   integrationName: string
   accounts: readonly CredentialRow[]
   pending: boolean
-  /** Connects a further account into a free slot, when the organization offers one. */
-  addAccount?: { disabled: boolean; onSelect: () => void }
   onReconnect: (accountId: string) => void
   onDisconnect: (accountId: string) => Promise<unknown>
 }
@@ -26,7 +24,6 @@ export function ConnectedCredential({
   integrationName,
   accounts,
   pending,
-  addAccount,
   onReconnect,
   onDisconnect,
 }: ConnectedCredentialProps) {
@@ -75,13 +72,6 @@ export function ConnectedCredential({
           />
         </div>
       ))}
-      {addAccount && (
-        <div>
-          <Button disabled={pending || addAccount.disabled} onClick={addAccount.onSelect}>
-            Add account
-          </Button>
-        </div>
-      )}
       {confirming && (
         <Modal
           open

apps/sim/platform/app/(shell)/integrations/_components/connection-access/connection-access.tsx

@@ -30,7 +30,10 @@ function AccessGroup({ title, items }: AccessGroupProps) {
 }
 
 interface ConnectionAccessProps {
-  integration: OrganizationIntegration
+  integration: Pick<
+    OrganizationIntegration,
+    'searchReads' | 'searchResource' | 'requestedScopes' | 'accessDescription'
+  > & { availability: string }
 }
 
 export function ConnectionAccess({ integration }: ConnectionAccessProps) {

apps/sim/platform/app/(shell)/integrations/_components/credential-access/credential-access.module.css

@@ -0,0 +1,14 @@
+.section {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--ui-section-gap);
+}
+.heading,
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-action-gap);
+}
+.heading {
+  justify-content: space-between;
+}