feat(platform): consolidate credential access tables and integration rows

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -31,14 +31,16 @@ Use `Stack` for compact people or integration artwork: show at most three items,
 
 Use `ActivityRow` for a first-line glyph, avatar or artwork stack, title/detail and centered trailing metadata. Its trailing metadata is either text or people, never both. A navigating row ends at its chevron and has no sibling action or ellipsis. Put record actions in its detail; a passive row with independent controls uses ActivityBody and has no whole-row hover or click target. 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.
 
-Inputs and textareas share the neutral field frame, resting border and 8px text inset. Hover changes only the frame border; the fill remains unchanged. Focus alone preserves resting paint. Required placeholders describe the expected input without replacing the label. `viewOnly` supplies native read-only behavior and the shared copy action in the sidebar’s 24px trailing slot; copy feedback remains visible for four seconds. Read-only fields show a not-allowed cursor without dimming, while their copy action remains interactive. TextArea defaultSize selects regular (76px), expanded (112px) or large (240px); skill instruction editors use large. Invite recipient fields share the regular textarea height and insets. Quiet `SearchField` is the explicit focus exception: its subtle underline starts at the typing edge, excluding the leading icon and trailing controls, and appears on hover or focus while the background remains unchanged. Counts inherit adjacent label metrics, use ordinary inline spacing and align on the text baseline. Disabled dropdowns show a not-allowed cursor.
+Inputs and textareas share the neutral field frame, resting border and 8px text inset. Hover changes only the frame border; the fill remains unchanged. Focus alone preserves resting paint. Required placeholders describe the expected input without replacing the label. `viewOnly` supplies native read-only behavior and an always-visible shared copy action in the sidebar’s 24px trailing slot. Textareas place the same action at the top-right. Copy feedback remains visible for four seconds before returning to the copy action. Read-only fields show a not-allowed cursor without dimming, while their copy action remains interactive. TextArea defaultSize selects regular (76px), expanded (112px) or large (240px); skill instruction editors use large. Invite recipient fields share the regular textarea height and insets. Quiet `SearchField` is the explicit focus exception: its subtle underline starts at the typing edge, excluding the leading icon and trailing controls, and appears on hover or focus while the background remains unchanged. Counts inherit adjacent label metrics, use ordinary inline spacing and align on the text baseline. Disabled dropdowns show a not-allowed cursor.
 
 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 list widgets and notification panels use `--ui-widget-max-size` as a ceiling, not a forced height. The Home activity chart grows with its content and has no nested scroll viewport. Keep the dashboard free to scroll and let each overflowing list or schedule scroll independently beneath its stationary heading. Shared ScrollArea viewports and the Home calendar suppress rubber-band overscroll at their boundaries. 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.
 
 Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. A confirm handler that returns a promise holds the dialog open as pending, closes it on success, and keeps the draft with an inline message on failure; nothing dismisses it while pending. Returning `false` keeps it open at the dialog's next stage, and `onBack` turns the quiet footer action into a step back. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button. Opening a dialog or advancing its step focuses the first available field. Confirmation dialogs focus Cancel, and read-only previews focus Close. A nested dialog handles Escape one layer at a time. While a form is open, the global search shortcut leaves its draft and keyboard focus in place. Closing returns focus to the invoking control. Textareas scroll or grow within their owner and never show a manual resize handle. Recipient fields use the textarea’s height, draft typography and inset. Committed addresses use compact caption text and an always-visible neutral ×, like a panel tab. The remove button sits inside the tag beside its label; long addresses yield space to the button. Comma or Enter commits a draft, pasting a list commits its addresses, and Backspace from an empty draft removes the last tag.
 
+ContentTabs uses Base UI tab behavior with the same ControlRow lane, spacing and paint as DestinationTabs. DataTable composes those tabs, a caller-owned toolbar, native table semantics and shared checkboxes for controlled row/select-all operations. Passive table rows have no whole-row hover or click target; their controls remain independent. Consumers own filtering, sorting and mutation policy.
+
 MessageBubble owns the normal user-message surface and selectable integration ideas. Idea messages sit centered over full-width artwork; selecting one appends to the Home draft without submitting or discarding existing text or attachments.
 
 Use `useClipboard` / `CopyButton` for successful copy feedback and `useFeedbackExpiry` for temporary status. Copied indicators and transient notices dwell for four seconds; repeated events restart the timer. Pause an actionable notice during hover or focus and keep its action available in the stack afterward. Icon color changes use `--ui-motion-color` (120ms, zero under reduced motion). Do not put literal timers or CSS durations in product components.

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

@@ -7,9 +7,9 @@ import { ActionMenu, ActivityRow, Modal } from '@/platform/design-system/compone
 import { ActivityBody } from '@/platform/design-system/components/activity-row/activity-body'
 import { CountedLabel } from '@/platform/design-system/components/overflow-text/counted-label'
 import type { IntegrationAccount } from '@/platform/lib/data/integrations-types'
+import { credentialDescription } from '@/platform/lib/integrations/credential-display'
 
 interface CredentialRow extends IntegrationAccount {
-  statusLabel: string
   /** Opens this account's permissions when the integration lists several. */
   href?: string
 }
@@ -74,14 +74,14 @@ export function ConnectedCredential({
               href={account.href}
               leading={<IntegrationMark providerId={providerId} icon={icon} />}
               title={account.label}
-              detail={account.statusLabel}
+              detail={credentialDescription(account)}
             />
           ) : (
             <li key={account.id} className={styles.row}>
               <ActivityBody leading={<IntegrationMark providerId={providerId} icon={icon} />}>
                 <span data-type='T059'>{account.label}</span>
                 <span className={styles.muted} data-type='T050'>
-                  {account.statusLabel}
+                  {credentialDescription(account)}
                 </span>
               </ActivityBody>
               {action}

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

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+import styles from '@/platform/app/(shell)/integrations/_components/credential-access/credential-access.module.css'
+import { IntegrationControls } from '@/platform/app/(shell)/integrations/_components/integration-controls/integration-controls'
+import { ActionMenu, ChoiceMenu, SearchField } from '@/platform/design-system/components'
+import type { CredentialAccessView } from '@/platform/lib/integrations/credential-navigation'
+
+interface CredentialAccessControlsProps {
+  view: CredentialAccessView
+  onSearch: (value: string) => void
+  onRoleChange: (value: CredentialAccessView['accessRole']) => void
+  onOrderChange: (value: CredentialAccessView['accessOrder']) => void
+  children?: ReactNode
+}
+
+export function CredentialAccessControls({
+  view,
+  onSearch,
+  onRoleChange,
+  onOrderChange,
+  children,
+}: CredentialAccessControlsProps) {
+  return (
+    <div className={styles.tools}>
+      <IntegrationControls
+        leading={
+          <SearchField
+            variant='quiet'
+            label='Search people'
+            placeholder='Search people…'
+            value={view.accessQ}
+            onValueChange={onSearch}
+          />
+        }
+      >
+        <ChoiceMenu
+          label='Role filter'
+          value={view.accessRole}
+          options={[
+            { value: 'all', label: 'All roles' },
+            { value: 'admin', label: 'Admin' },
+            { value: 'member', label: 'Member' },
+            { value: 'organization-admin', label: 'Organization admin' },
+            { value: 'workspace-admin', label: 'Workspace admin' },
+          ]}
+          onValueChange={(value) => {
+            if (
+              value === 'all' ||
+              value === 'admin' ||
+              value === 'member' ||
+              value === 'organization-admin' ||
+              value === 'workspace-admin'
+            )
+              onRoleChange(value)
+          }}
+        />
+        <ActionMenu
+          label='Sort people'
+          icon='I050'
+          actions={[
+            {
+              id: 'asc',
+              label: 'Name A–Z',
+              checked: view.accessOrder === 'asc',
+              onSelect: () => onOrderChange('asc'),
+            },
+            {
+              id: 'desc',
+              label: 'Name Z–A',
+              checked: view.accessOrder === 'desc',
+              onSelect: () => onOrderChange('desc'),
+            },
+          ]}
+        />
+      </IntegrationControls>
+      {children}
+    </div>
+  )
+}

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

@@ -1,37 +1,44 @@
-.section {
+.section,
+.tools {
   display: grid;
   min-inline-size: 0;
-  gap: var(--ui-widget-content-gap);
+  gap: var(--ui-section-gap);
 }
-.heading,
-.actions,
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-row-gap);
-}
-.heading,
-.row {
-  justify-content: space-between;
-}
-.heading {
-  margin-inline-end: calc(-1 * var(--ui-row-inset));
+.section {
+  gap: var(--spacing-24);
 }
-.rows {
+.invite {
   display: grid;
-  gap: var(--ui-list-gap);
-  margin-inline: calc(-1 * var(--ui-row-inset));
+  grid-template-columns: minmax(0, 1fr) minmax(var(--spacing-128), auto) auto;
+  align-items: end;
+  gap: var(--ui-row-gap);
 }
-.row {
-  padding: var(--ui-row-block) var(--ui-row-inset);
+.invitePeople {
   min-inline-size: 0;
 }
-.actions {
-  flex: none;
+.bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--ui-action-gap);
-  margin-inline-end: calc(-1 * var(--ui-action-overhang));
+}
+.bulk > span {
+  margin-inline-end: var(--ui-row-gap);
 }
 .detail {
   color: var(--ui-secondary);
   overflow-wrap: anywhere;
 }
+.role {
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+@media (max-width: 40rem) {
+  .invite {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .invitePeople {
+    grid-column: 1 / -1;
+  }
+}