fix(org): settle the first review round on the redesign

Author: waleedlatif1

apps/sim/hooks/queries/organization-accounts.ts

@@ -258,9 +258,6 @@ export function useUpdateOrganizationAccounts() {
           queryKey: slackSearchKeys.organizationManifests(organizationId),
         }),
         queryClient.invalidateQueries({ queryKey: slackSearchKeys.list(organizationId) }),
-        queryClient.invalidateQueries({
-          queryKey: organizationAccountsKeys.detail(organizationId),
-        }),
       ]),
   })
 }

apps/sim/hooks/queries/organization-home.ts

@@ -13,6 +13,7 @@ const CALENDAR_STALE_TIME = 5 * 60 * 1000
 
 /** Nested under the organization's accounts, so anything that changes a connection refreshes Home. */
 const organizationHomeKeys = {
+  all: organizationAccountsKeys.details(),
   organization: (organizationId: string) =>
     [...organizationAccountsKeys.detail(organizationId), 'home'] as const,
   email: (organizationId: string) =>

apps/sim/lib/organizations/application/home-widgets.integration.ts

@@ -34,6 +34,10 @@ import { GET as getCalendarRoute } from '@/app/api/organizations/[id]/home/calen
 import { GET as getEmailRoute } from '@/app/api/organizations/[id]/home/email/route'
 
 vi.mock('@/lib/auth', () => authMock)
+vi.mock('@/connectors/gmail/mailbox', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/connectors/gmail/mailbox')>()),
+  getGmailMailboxEmail: async () => 'reader@example.com',
+}))
 
 vi.hoisted(() => {
   Object.assign(process.env, {

apps/sim/lib/organizations/application/home-widgets.ts

@@ -224,17 +224,34 @@ async function readViewerAccounts<T>(
     )
   )
 
+  const isReadable = ({
+    provider,
+    providerId,
+    status,
+    credentialId,
+  }: (typeof candidates)[number]) =>
+    allowed.includes(provider) &&
+    readable.get(providerId) === true &&
+    status !== 'needs_reauth' &&
+    ownedIds.has(credentialId)
+  const toRead = new Set(
+    candidates
+      .filter(isReadable)
+      .slice(0, HOME_WIDGET_ACCOUNT_LIMIT)
+      .map((candidate) => candidate.credentialId)
+  )
+
   const results = await Promise.all(
-    candidates.map(async (candidate, index) => {
+    candidates.map(async (candidate) => {
       const { credentialId, displayName, provider, providerId, status, read } = candidate
       const settled = (state: HomeWidgetAccount['state'], rows: T[] = []) => ({
         account: { credentialId, displayName, state },
         rows: rows.map((row) => ({ ...row, credentialId })),
       })
-      if (index >= HOME_WIDGET_ACCOUNT_LIMIT) return settled('not_read')
       if (!allowed.includes(provider) || !readable.get(providerId)) return settled('not_offered')
       if (status === 'needs_reauth') return settled('needs_reauth')
       if (!ownedIds.has(credentialId)) return settled('not_offered')
+      if (!toRead.has(credentialId)) return settled('not_read')
       try {
         return settled('ready', await readWithToken({ context, credentialId, providerId }, read))
       } catch (error) {

apps/sim/lib/organizations/home/provider-reads.test.ts

@@ -22,8 +22,13 @@ import {
   readOutlookCalendarDay,
   readOutlookMessages,
 } from '@/lib/organizations/home/provider-reads'
+import { gmailThreadUrl } from '@/connectors/gmail/mailbox'
 
 vi.mock('@/lib/core/security/input-validation.server', () => inputValidationMock)
+vi.mock('@/connectors/gmail/mailbox', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/connectors/gmail/mailbox')>()),
+  getGmailMailboxEmail: async () => 'reader@example.com',
+}))
 
 const { mockSecureFetchWithValidation: providerFetch } = inputValidationMockFns
 const signal = new AbortController().signal
@@ -112,7 +117,7 @@ describe('reading mail', () => {
         excerpt: 'Agreed',
         receivedAt: '2026-11-05T10:00:00.000Z',
         messageCount: 2,
-        url: 'https://mail.google.com/mail/u/0/#inbox/thread-1',
+        url: gmailThreadUrl('thread-1', 'reader@example.com'),
       },
     ])
   })

apps/sim/lib/organizations/home/provider-reads.ts

@@ -9,6 +9,7 @@ import {
   HOME_EMAIL_THREAD_LIMIT,
   HOME_TEXT_LIMITS,
 } from '@/lib/organizations/home/limits'
+import { getGmailMailboxEmail, gmailThreadUrl } from '@/connectors/gmail/mailbox'
 import { gmailGetThreadV2Tool } from '@/tools/gmail/get_thread'
 import { gmailListThreadsV2Tool } from '@/tools/gmail/list_threads'
 import { listV2Tool as googleCalendarListTool } from '@/tools/google_calendar/list'
@@ -161,6 +162,7 @@ export async function readGmailThreads({
     signal
   )
   if (!list.success) throw new HomeProviderReadError('unavailable')
+  const mailbox = await getGmailMailboxEmail(accessToken, { signal })
   const threads = await mapWithConcurrency(
     list.output.threads.slice(0, HOME_EMAIL_THREAD_LIMIT),
     GMAIL_THREAD_CONCURRENCY,
@@ -183,7 +185,7 @@ export async function readGmailThreads({
         excerpt: bounded(latest.snippet, HOME_TEXT_LIMITS.excerpt),
         receivedAt,
         ...(messages.length > 1 ? { messageCount: messages.length } : {}),
-        url: `https://mail.google.com/mail/u/0/#inbox/${encodeURIComponent(id)}`,
+        url: gmailThreadUrl(id, mailbox),
       }
     }
   )

apps/sim/lib/postcss/platform-embed.cjs

@@ -21,7 +21,7 @@ function scopeSelector(selector) {
     )
     return [selector, followsHost]
   }
-  if (selector.startsWith(SCOPE)) return [selector]
+  if (selector.includes(SCOPE)) return [selector]
   return [`:where(${SCOPE}) ${selector}`]
 }
 

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

@@ -7,13 +7,18 @@ import {
   type OrganizationIntegration,
 } from '@/platform/lib/integrations/model'
 
-const SECTIONS = ['Your accounts', 'Available to connect', 'Managed by your organization'] as const
+const SECTIONS = [
+  'Your accounts',
+  'Available to connect',
+  'Managed by your organization',
+  'Not available',
+] as const
 type Section = (typeof SECTIONS)[number]
 
 function sectionFor(item: OrganizationIntegration): Section {
   if (item.accounts.length) return 'Your accounts'
   if (isConnectable(item)) return 'Available to connect'
-  return 'Managed by your organization'
+  return item.availability === 'managed' ? 'Managed by your organization' : 'Not available'
 }
 
 interface IntegrationListProps {

apps/sim/platform/app/(shell)/integrations/_components/tool-permissions/tool-permissions.module.css

@@ -28,6 +28,9 @@
   min-inline-size: 0;
 }
 .list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
   gap: var(--ui-list-gap);
 }
 .tool {

apps/sim/platform/design-system/components/avatar/avatar.tsx

@@ -72,8 +72,8 @@ export function PeoplePopover({ title, people }: PeoplePopoverProps) {
       <span className={styles.peopleHeading} data-type='T052'>
         {title}
       </span>
-      {people.map((person) => (
-        <PersonRow key={person.name} name={person.name} src={person.src} />
+      {people.map((person, index) => (
+        <PersonRow key={`${person.name}-${index}`} name={person.name} src={person.src} />
       ))}
     </span>
   )
@@ -106,8 +106,8 @@ interface AvatarGroupProps {
 export function AvatarGroup({ people, label }: AvatarGroupProps) {
   return (
     <span className={styles.avatarGroup}>
-      {people.slice(0, 2).map((person) => (
-        <Tooltip key={person.name} label={person.name}>
+      {people.slice(0, 2).map((person, index) => (
+        <Tooltip key={`${person.name}-${index}`} label={person.name}>
           <Avatar name={person.name} src={person.src} />
         </Tooltip>
       ))}