refine(platform): simplify permission lists and meeting idea cards

Author: emir-karabeg

apps/sim/platform/AGENTS.md

@@ -41,7 +41,7 @@ Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labe
 
 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.
+MessageBubble owns the normal user-message surface and selectable integration ideas. Idea messages sit centered over full-width monochrome meeting artwork, with a translucent fill and at most two visible lines. Hover and press change the muted fill without adding a border. Selecting one appends the full prompt 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/connection-access/connection-access.module.css

@@ -17,20 +17,20 @@
 }
 .items {
   gap: var(--ui-row-gap);
+  padding-inline-start: var(--spacing-16);
+  list-style: disc;
 }
 .item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ui-row-gap);
+  padding-inline-start: var(--spacing-2);
   overflow-wrap: anywhere;
 }
-.item > :first-child {
-  flex: none;
+.item::marker {
+  color: var(--ui-secondary);
 }
 .viewport {
   display: grid;
   min-block-size: 0;
-  max-block-size: var(--ui-widget-max-size);
+  max-block-size: min(var(--spacing-192), 30dvh);
 }
 
 .copy {

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

@@ -3,7 +3,7 @@ import {
   SCOPE_GROUPS,
   scopeGroup,
 } from '@/platform/app/(shell)/integrations/_components/connection-access/scope-groups'
-import { Icon, ScrollArea } from '@/platform/design-system/components'
+import { ScrollArea } from '@/platform/design-system/components'
 import { CountedLabel } from '@/platform/design-system/components/overflow-text/counted-label'
 
 interface ConnectionAccessProps {
@@ -32,10 +32,9 @@ export function ConnectionAccess({
                   <h3 data-type='T052'>{group}</h3>
                   <ul className={styles.items}>
                     {items.map(({ id, label, description }) => (
-                      <li className={styles.item} key={id}>
-                        <Icon name='I137' />
+                      <li className={styles.item} key={id} data-type='T060'>
                         <span className={styles.copy}>
-                          <span data-type='T060'>{label}</span>
+                          <span>{label}</span>
                           {description && (
                             <span className={styles.description} data-type='T050'>
                               {description}

apps/sim/platform/app/(shell)/integrations/_components/integration-idea/integration-idea.module.css

@@ -37,13 +37,13 @@
 }
 
 [data-platform-ui][data-theme="dark"] .artwork {
-  filter: invert(0.92) hue-rotate(180deg);
+  filter: invert(0.92);
   opacity: var(--opacity-0-6);
 }
 
 @media (prefers-color-scheme: dark) {
   [data-platform-ui][data-theme="system"] .artwork {
-    filter: invert(0.92) hue-rotate(180deg);
+    filter: invert(0.92);
     opacity: var(--opacity-0-6);
   }
 }
@@ -52,8 +52,4 @@
   .idea {
     padding-inline: var(--spacing-16);
   }
-
-  .artwork {
-    object-position: right bottom;
-  }
 }

apps/sim/platform/app/(shell)/integrations/_components/integration-idea/integration-idea.tsx

@@ -17,7 +17,7 @@ export function IntegrationIdea({ providerId, name, example }: IntegrationIdeaPr
     <section className={styles.idea} aria-label={`Idea for ${name}`}>
       <img
         className={styles.artwork}
-        src={publicAssetPath('/integration-artwork/fireflies-world.webp')}
+        src={publicAssetPath('/integration-artwork/meeting-world.webp')}
         alt=''
         width={2172}
         height={724}

apps/sim/platform/design-system/components/message-bubble/message-bubble.module.css

@@ -12,14 +12,21 @@
 
 button.bubble {
   cursor: pointer;
-  box-shadow: inset 0 0 0 var(--spacing-stroke-default) transparent;
-  transition: box-shadow var(--ui-motion-color);
+  background: color-mix(in srgb, var(--control-muted-fill) var(--opacity-0-6), transparent);
+  transition: background var(--ui-motion-color);
 }
 
 button.bubble:hover {
-  box-shadow: inset 0 0 0 var(--spacing-stroke-default) var(--control-hover-border);
+  background: color-mix(in srgb, var(--control-muted-hover) var(--opacity-0-6), transparent);
 }
 
 button.bubble:active {
-  box-shadow: inset 0 0 0 var(--spacing-stroke-default) var(--ui-secondary);
+  background: color-mix(in srgb, var(--control-muted-pressed) var(--opacity-0-6), transparent);
+}
+
+.preview {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }

apps/sim/platform/design-system/components/message-bubble/message-bubble.tsx

@@ -16,7 +16,7 @@ export function MessageBubble({ children, onSelect, label }: MessageBubbleProps)
       aria-label={label}
       onClick={onSelect}
     >
-      {children}
+      <span className={styles.preview}>{children}</span>
     </button>
   ) : (
     <p className={styles.bubble} data-type='T048'>

apps/sim/platform/docs/component-ownership.md

@@ -26,8 +26,8 @@ For a proposed addition, trace its second consumer before copying a hit area, ho
 
 The [integration center](integration-center.md) lives in `integrations/_components/integration-center/` at the organization root. Its Apps, Skills, MCPs and Credentials destinations compose DestinationTabs, the shared search control and ActivityRow. The local `resource-list/` and `resource-editor/` owners interpret integration-specific content and actions. They do not own another button, menu, tab, form-field or dialog recipe. Personal and shared data use the same renderer. Eligible workspace entry points open or redirect to this organization center; they do not mount a separate Platform integration page. Standalone workspaces and viewers without organization Search access retain their existing credential route.
 
-IntegrationControls owns the compact control-bar layout shared by the center and app details. CredentialList, CredentialDetail, CredentialAccess, CredentialInvite and CredentialConnect own credential-specific composition. CredentialDetail composes ContentTabs for Details, Access and applicable Permissions. CredentialAccess composes DataTable with People/Invitations tabs, search/filter/sort and protected bulk actions; CredentialInvite selects eligible people and a role. The feature owns access policy and metadata, while EMCN owns table/control geometry; provider setup fields come from generated metadata. The Slack bot owner retains its distinct staged setup. IntegrationCapabilities owns editable suggested Skills and the complete Agent template list in the page flow. IntegrationIdea centers a selectable provider-specific MessageBubble over the full-width Fireflies illustration pilot; ComposerHost prepares the Home draft without sending. ProviderHeading stays a two-part title/description, with usage and app actions in IntegrationControls. Each composes EMCN controls and uses the same row and section rhythm as Home and Settings.
+IntegrationControls owns the compact control-bar layout shared by the center and app details. CredentialList, CredentialDetail, CredentialAccess, CredentialInvite and CredentialConnect own credential-specific composition. CredentialDetail composes ContentTabs for Details, Access and applicable Permissions. CredentialAccess composes DataTable with People/Invitations tabs, search/filter/sort and protected bulk actions; CredentialInvite selects eligible people and a role. The feature owns access policy and metadata, while EMCN owns table/control geometry; provider setup fields come from generated metadata. The Slack bot owner retains its distinct staged setup. IntegrationCapabilities owns editable suggested Skills and the complete Agent template list in the page flow. IntegrationIdea centers a selectable provider-specific MessageBubble over the full-width monochrome meeting illustration; ComposerHost prepares the Home draft without sending. ProviderHeading stays a two-part title/description, with usage and app actions in IntegrationControls. Each composes EMCN controls and uses the same row and section rhythm as Home and Settings.
 
 Organization Settings uses the [navigation catalog](../lib/data/settings-navigation.ts) for sidebar order and server-gated resolution. The [section registry](../app/%28shell%29/settings/_components/section-registry.ts) lazy-loads one owner per tab. General composes Profile, Preferences, Privacy and Account, including their detail views. Section titles and action rows use EMCN SettingsSection and SettingsRow.
 
-MessageBubble owns user-message paint and the selectable integration example, with the same radius, padding and typography. Chat responses and formatted skill instructions use the shared MarkdownContent renderer under `(shell)/_components/markdown-content`.
+MessageBubble owns user-message paint and the selectable integration example, with the same radius, padding and typography. Selectable previews use two visible lines and a translucent muted fill with calendar-style hover/press states; ordinary chat messages retain their full content. Chat responses and formatted skill instructions use the shared MarkdownContent renderer under `(shell)/_components/markdown-content`.

apps/sim/platform/docs/integration-center.md

@@ -25,15 +25,15 @@ The full workspace app catalog is projected at generation time from existing pub
 
 App details follow one sequence: title/description, illustrated idea, usage/actions bar, Connected credentials, Skills and Agent templates. The bar places usage at the start and Docs / Connect integration at the end, wrapping on narrow screens. Credential actions live inside the selected credential detail. Navigating rows have no ellipsis or action after their chevron. Connect integration uses the bordered, elevated secondary button for both single-method and menu triggers. Skills use slash-leading ActivityRows; templates use leading integration-artwork stacks. All templates remain in the page flow without pagination or an inner scroll area. Suggested skill instructions are editable before adding, using the large default textarea size. Installed examples retain their provider/name source identity when a member changes their instructions or renames them, so editing does not offer duplicate installation. Catalog Actions/Triggers and informational Search access lists are omitted; genuine editable tool policies remain on eligible credential details.
 
-The idea card uses one Fireflies-inspired Sim-world illustration for this pilot, with each provider’s own mark and two-sentence example in HTML. The illustration fills the surface, with a normal MessageBubble centered over it and no arrow action. The bubble is a keyboard-accessible button: selecting it appends the prompt to the Home draft, retains prior text and attachments, and opens Home in Build mode without sending. Its width and overflow align with Home’s input. Light/dark treatments keep the copy readable. Additional provider-specific artwork is deferred until this pilot is reviewed.
+The idea card uses one monochrome Sim-world meeting illustration for this pilot, with each provider’s own mark and two-sentence example in HTML. The artwork continues across the full borderless surface. A translucent MessageBubble sits in the center with a two-line preview and no arrow action; its hover and press change the muted fill, like Home calendar events. The full prompt stays available when selected, including text clipped by the narrow preview. The bubble is a keyboard-accessible button: selecting it appends the prompt to the Home draft, retains prior text and attachments, and opens Home in Build mode without sending. Its width and overflow align with Home’s input. Light/dark treatments keep the copy readable. Additional provider-specific artwork is deferred until this pilot is reviewed.
 
 Credentials retain their canonical ID across provider families. Editing a Google service account through Gmail updates the same record shown through Calendar and Drive. A credential row uses its display name, then its description or credential ID when the description is blank. Credential details always include Details and Access tabs, plus Permissions when tool controls exist. Details starts with its view-only credential ID, then editable display name and textarea description. Save/Cancel appears while dirty. Connected identity, immutable host/environment and effective access remain available without a redundant method/scope text stack. Omit “MCP connection,” “Only you,” and standalone service-account/workspace badges; provider requirements stay in the connection flow and workspace access boundaries stay in the access section. Names and descriptions follow existing limits; secrets never enter lists or session metadata. Personal tokens have an Access tab with their owner and no sharing controls. Workspace credentials retain a named workspace and effective admin/member roles; organization-managed records retain their separate managed scope. Usage avatars are not permission evidence.
 
 Access uses an inline eligible-people and role form above a DataTable with People/Invitations tabs, search, role filter, name sorting and selection. Tables and tabs use Platform typography, insets and controls, rather than an external table theme. Changing a filter or tab clears selection; bulk changes act only on visible eligible selections and evaluate the entire resulting membership against the active explicit-admin floor. Pending grants do not replace an active administrator. Workspace and organization admin inheritance is displayed only when the credential metadata explicitly supplies it. Inherited access cannot be edited or removed here, and never implies organization-wide access to a new private connection. The old workspace-limitation paragraph is omitted.
 
 Admin controls follow the existing credential contract: edit description/name, reconnect, disconnect and share with eligible members of its owning scope. Effective workspace-admin and organization-admin access cannot be removed or demoted here. Keep the last active explicit administrator protected. A member may leave an explicit share when those constraints permit. Preserve pending and revoked member states. UI examples demonstrate these distinctions; authorized application operations must enforce them when the data seam is implemented.
 
-Connection modals start with display name and description, retain required method-specific fields, and show permissions as an icon-led list within a bounded scroll viewport. They have no Docs link. Multiple methods open the menu before the form; a single method opens its form directly. Fireflies enrollment is projected from canonical managed-MCP metadata, not the catalog’s generic auth label. Connection methods preserve their actual requirements: OAuth scopes and provider environments, personal tokens, service-account fields, Google JSON, provider-specific client credentials and custom Slack bots. New enrollment in the organization center has no workspace selection. Shareable credentials retain an ordinary organization scope and initially grant access only to the connector as an explicit administrator. Sharing adds selected organization members without changing credential identity or scope; no organization-wide grant is implied. Personal/Shared groups reflect active or pending access to other members. Existing workspace and organization-managed scopes stay unchanged; owner-only tokens remain personal and unshareable. Reconnect preserves the credential ID and immutable provider host/environment. Transient secrets are cleared on close and after the metadata-only callback succeeds, with no storage or network mutation in fixture mode. A local metadata record does not imply successful provider authorization.
+Connection modals start with display name and description, retain required method-specific fields, and show permissions as a grouped dot list within a scroll viewport capped at 192px or 30% of the viewport height, whichever is smaller. Longer lists, including 16 or more permissions, scroll independently beneath the heading. They have no Docs link. Multiple methods open the menu before the form; a single method opens its form directly. Fireflies enrollment is projected from canonical managed-MCP metadata, not the catalog’s generic auth label. Connection methods preserve their actual requirements: OAuth scopes and provider environments, personal tokens, service-account fields, Google JSON, provider-specific client credentials and custom Slack bots. New enrollment in the organization center has no workspace selection. Shareable credentials retain an ordinary organization scope and initially grant access only to the connector as an explicit administrator. Sharing adds selected organization members without changing credential identity or scope; no organization-wide grant is implied. Personal/Shared groups reflect active or pending access to other members. Existing workspace and organization-managed scopes stay unchanged; owner-only tokens remain personal and unshareable. Reconnect preserves the credential ID and immutable provider host/environment. Transient secrets are cleared on close and after the metadata-only callback succeeds, with no storage or network mutation in fixture mode. A local metadata record does not imply successful provider authorization.
 
 Ordinary credential enrollment and organization Search source approval are separate capabilities. A paused or organization-managed Search source does not itself prohibit a workspace credential for the same app. The fixture projection supplies `canAddCredential` separately from Search availability. A live adapter must obtain enrollment methods and eligible members of the owning scope from their authorized operations, including viewer, deployment and provider gates; catalog membership alone never authorizes enrollment or sharing.