fix(org): settle the member and design audits on the redesign

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/organization-conversation.tsx

@@ -103,6 +103,8 @@ interface OrganizationConversationProps {
   draftId?: string
   /** Replaces the landing, and the blank frame before it, until the first turn takes over. */
   landing?: {
+    /** Shown over the conversation once the first turn has replaced the landing. */
+    chatHeader?: ReactNode
     fallback: ReactNode
     render: (slot: OrganizationLandingSlot) => ReactNode
   }
@@ -146,7 +148,7 @@ function OrganizationConversationContent({
   userName,
   chatId,
   requestMode: destinationMode,
-  header,
+  header: frameHeader,
   active = true,
   summaryRequest,
   onSummaryConsumed,
@@ -232,6 +234,7 @@ function OrganizationConversationContent({
     store.migrateDraft(initialDraftKey, draftKey)
   }, [initialDraftKey, draftKey, legacyDraftKey])
   const hasChat = Boolean(chatId || chat.messages.length)
+  const header = frameHeader ?? (hasChat ? landing?.chatHeader : undefined)
   const assistantSearchLevel = 'fast'
   const panel = useChatResourcePanel(chat, controller, userId)
   const addResource = panel.addResourceFromUser

apps/sim/app/o/[organizationId]/search/use-organization-search.ts

@@ -21,7 +21,7 @@ import { useHydrated } from '@/hooks/use-hydrated'
 import { useVoiceInput } from '@/hooks/use-voice-input'
 import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 
-const SEARCH_MODES = [
+export const SEARCH_MODES = [
   { value: 'search', label: 'Search' },
   { value: 'assistant', label: 'Assistant' },
 ] as const

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

@@ -23,11 +23,13 @@ import {
   readOutlookMessages,
 } from '@/lib/organizations/home/provider-reads'
 import { gmailThreadUrl } from '@/connectors/gmail/mailbox'
+import { GoogleApiError } from '@/connectors/google-workspace/api-errors'
 
+const { mailboxEmail } = vi.hoisted(() => ({ mailboxEmail: vi.fn() }))
 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',
+  getGmailMailboxEmail: mailboxEmail,
 }))
 
 const { mockSecureFetchWithValidation: providerFetch } = inputValidationMockFns
@@ -70,10 +72,35 @@ function metadataMessage(from: string, subject: string, snippet: string) {
 }
 
 beforeEach(() => {
+  mailboxEmail.mockResolvedValue('reader@example.com')
   providerFetch.mockReset()
 })
 
 describe('provider status classification', () => {
+  it('does not ask for a reconnect when Google reports quota in a 403 body', async () => {
+    providerFetch.mockResolvedValue(
+      respond({ error: { errors: [{ reason: 'userRateLimitExceeded' }] } }, 403, {})
+    )
+    await expect(readOutlookMessages({ accessToken: 'token', signal })).rejects.toMatchObject({
+      failure: 'unavailable',
+    })
+  })
+
+  it.each([
+    [401, [], 'token_rejected'],
+    [403, ['insufficientPermissions'], 'needs_reauth'],
+    [403, ['userRateLimitExceeded'], 'unavailable'],
+    [500, [], 'unavailable'],
+  ])('maps a %i mailbox lookup %o to %s', async (status, reasons, failure) => {
+    providerFetch.mockResolvedValue(respond({ threads: [{ id: 'thread-1' }] }, 200, {}))
+    mailboxEmail.mockRejectedValueOnce(
+      new GoogleApiError('gmail.users.getProfile', status, reasons)
+    )
+    await expect(readGmailThreads({ accessToken: 'token', signal })).rejects.toMatchObject({
+      failure,
+    })
+  })
+
   it.each([
     [401, {}, 'token_rejected'],
     [403, {}, 'needs_reauth'],

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

@@ -10,6 +10,11 @@ import {
   HOME_TEXT_LIMITS,
 } from '@/lib/organizations/home/limits'
 import { getGmailMailboxEmail, gmailThreadUrl } from '@/connectors/gmail/mailbox'
+import {
+  GoogleApiError,
+  isGoogleQuotaReason,
+  readGoogleErrorDetails,
+} from '@/connectors/google-workspace/api-errors'
 import { gmailGetThreadV2Tool } from '@/tools/gmail/get_thread'
 import { gmailListThreadsV2Tool } from '@/tools/gmail/list_threads'
 import { listV2Tool as googleCalendarListTool } from '@/tools/google_calendar/list'
@@ -112,9 +117,15 @@ async function requestTool<P>(
     acceptCompressed: true,
   })
   if (response.ok) return response
-  await response.text().catch(() => '')
+  const body = await response.text().catch(() => '')
   if (response.status === 401) throw new HomeProviderReadError('token_rejected', 401)
-  if (response.status === 403 && !hasRateLimitEvidence(response.headers))
+  // Google reports quota as a 403 reason in the body, which reconnecting would not fix.
+  const { reasons } = await readGoogleErrorDetails(new Response(body))
+  if (
+    response.status === 403 &&
+    !hasRateLimitEvidence(response.headers) &&
+    !reasons.some(isGoogleQuotaReason)
+  )
     throw new HomeProviderReadError('needs_reauth', 403)
   throw new HomeProviderReadError('unavailable', response.status)
 }
@@ -152,6 +163,14 @@ function isoOrNull(value: string | null | undefined) {
   return Number.isFinite(time) ? new Date(time).toISOString() : null
 }
 
+function mailboxReadFailure(error: unknown): HomeProviderReadError {
+  if (!(error instanceof GoogleApiError)) return new HomeProviderReadError('unavailable')
+  if (error.status === 401) return new HomeProviderReadError('token_rejected', 401)
+  if (error.status === 403 && !error.rateLimited && error.category !== 'rate_limit')
+    return new HomeProviderReadError('needs_reauth', 403)
+  return new HomeProviderReadError('unavailable', error.status)
+}
+
 export async function readGmailThreads({
   accessToken,
   signal,
@@ -162,7 +181,9 @@ export async function readGmailThreads({
     signal
   )
   if (!list.success) throw new HomeProviderReadError('unavailable')
-  const mailbox = await getGmailMailboxEmail(accessToken, { signal })
+  const mailbox = await getGmailMailboxEmail(accessToken, { signal }).catch((error: unknown) => {
+    throw mailboxReadFailure(error)
+  })
   const threads = await mapWithConcurrency(
     list.output.threads.slice(0, HOME_EMAIL_THREAD_LIMIT),
     GMAIL_THREAD_CONCURRENCY,

apps/sim/platform/app/(shell)/home/_components/activity-list/activity-list.tsx

@@ -98,7 +98,7 @@ export function AttentionList({ state, asOf, onRetry }: AttentionListProps) {
             !state.partial && (
               <EmptyState
                 title='You’re all caught up'
-                description='Reviews and requests will appear here.'
+                description='Anything that needs you will appear here.'
               />
             )
           )}

apps/sim/platform/app/(shell)/home/_components/calendar/calendar-day.tsx

@@ -29,6 +29,8 @@ function externalUrl(url: string | undefined) {
   return url?.startsWith('https://') && URL.canParse(url) ? url : undefined
 }
 
+/** An hour label this close to the current time would sit under it. */
+const NOW_LABEL_CLEARANCE_MINUTES = 15
 const HOURS = Array.from({ length: 24 }, (_, hour) => formatClockTime(hour * 3_600_000))
 /** A short meeting still needs room for its name and time. */
 const MIN_MEETING_ROWS = 30
@@ -182,7 +184,14 @@ export function CalendarDay({ calendar, onDayChange, onReturnToToday, onRetry }:
                 key={time}
                 className={styles.hour}
                 data-type='T035'
-                style={{ gridRow: timeSlot(index * 60, 60) }}
+                style={{
+                  gridRow: timeSlot(index * 60, 60),
+                  visibility:
+                    calendar.nowMinute !== null &&
+                    Math.abs(index * 60 - calendar.nowMinute) < NOW_LABEL_CLEARANCE_MINUTES
+                      ? 'hidden'
+                      : undefined,
+                }}
               >
                 {time}
               </span>

apps/sim/platform/app/(shell)/home/_components/home-conversation/home-conversation.tsx

@@ -1,8 +1,14 @@
 'use client'
 
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { organizationRoutes } from '@/lib/navigation/paths'
 import { OrganizationConversation } from '@/app/o/[organizationId]/components/organization-conversation'
+import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+import { SEARCH_MODES } from '@/app/o/[organizationId]/search/use-organization-search'
 import { HomeDashboardSkeleton } from '@/platform/app/(shell)/home/_components/home-dashboard/home-dashboard-skeleton'
 import { LiveHome } from '@/platform/app/(shell)/home/_components/live-home/live-home'
+import { SearchSurfaceHeader } from '@/platform/app/(shell)/search/_components/search-surface/search-surface-header'
 
 /** Search's Assistant keeps its own unsent question; the agent composer keeps the default `home` key. */
 const HOME_ASSISTANT_DRAFT_ID = 'home-assistant'
@@ -13,11 +19,39 @@ interface HomeConversationProps {
 
 /** The real conversation, landing on the dashboard until the first turn takes over. */
 export function HomeConversation({ requestMode }: HomeConversationProps) {
+  const { organization } = useOrganizationContext()
+  const router = useRouter()
+  const routes = organizationRoutes(organization.id)
+  const [conversationInstance, setConversationInstance] = useState(0)
+  const [isStartingNew, startNewTransition] = useTransition()
+  // An Assistant chat started here takes its Search address without leaving this page, so it carries
+  // Search's controls itself, and they navigate rather than switch a view this page doesn't hold.
+  const assistantChatHeader = (
+    <SearchSurfaceHeader
+      search={{
+        activeMode: 'assistant',
+        modes: [...SEARCH_MODES],
+        changeMode: (mode) => {
+          if (mode === 'search') router.push(`${routes.search}?mode=search`)
+        },
+        newLabel: 'New chat',
+        canStartNew: true,
+        isStartingNew,
+        startNew: () =>
+          startNewTransition(() => {
+            setConversationInstance((current) => current + 1)
+            router.push(routes.home, { scroll: false })
+          }),
+      }}
+    />
+  )
   return (
     <OrganizationConversation
+      key={conversationInstance}
       requestMode={requestMode}
       draftId={requestMode === 'assistant' ? HOME_ASSISTANT_DRAFT_ID : undefined}
       landing={{
+        chatHeader: requestMode === 'assistant' ? assistantChatHeader : undefined,
         fallback: <HomeDashboardSkeleton requestMode={requestMode} />,
         render: (slot) => <LiveHome {...slot} />,
       }}

apps/sim/platform/app/(shell)/search/_components/search-surface/search-surface-header.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { RedesignSurface } from '@/app/o/[organizationId]/_redesign/redesign-host'
+import type { OrganizationSearchState } from '@/app/o/[organizationId]/search/use-organization-search'
+import styles from '@/platform/app/(shell)/search/_components/search-surface/search-surface.module.css'
+import { Button } from '@/platform/design-system/components/button/button'
+import { Icon } from '@/platform/design-system/components/icon/icon'
+
+const SEARCH_MODE_ICONS = { search: 'I089', assistant: 'I073' } as const
+
+export type SearchHeaderState = Pick<
+  OrganizationSearchState,
+  'activeMode' | 'modes' | 'changeMode' | 'newLabel' | 'canStartNew' | 'isStartingNew' | 'startNew'
+>
+
+/**
+ * A `nav` of buttons rather than `SegmentedControl`: its radios would flip on reselect, and each
+ * view here is a history entry with `aria-current`.
+ */
+export function SearchSurfaceHeader({ search }: { search: SearchHeaderState }) {
+  const { activeMode, newLabel } = search
+  return (
+    <div className={styles.transparentSurface}>
+      <RedesignSurface>
+        <div className={styles.header}>
+          <nav aria-label='Search views' className={styles.views}>
+            {search.modes.map((entry) => (
+              <button
+                key={entry.value}
+                type='button'
+                className={styles.view}
+                data-type='T056'
+                aria-current={activeMode === entry.value ? 'page' : undefined}
+                onClick={() => search.changeMode(entry.value)}
+              >
+                <Icon name={SEARCH_MODE_ICONS[entry.value]} />
+                {entry.label}
+              </button>
+            ))}
+          </nav>
+          {search.canStartNew && (
+            <>
+              <span className={styles.newFull}>
+                <Button
+                  variant='quiet'
+                  size='compact'
+                  icon='I074'
+                  disabled={search.isStartingNew}
+                  onClick={search.startNew}
+                  render={<button type='button' className={styles.newButton} />}
+                >
+                  {newLabel}
+                </Button>
+              </span>
+              <span className={styles.newShort}>
+                <Button
+                  variant='quiet'
+                  size='compact'
+                  icon='I074'
+                  disabled={search.isStartingNew}
+                  onClick={search.startNew}
+                  render={
+                    <button type='button' className={styles.newButton} aria-label={newLabel} />
+                  }
+                >
+                  New
+                </Button>
+              </span>
+            </>
+          )}
+        </div>
+      </RedesignSurface>
+    </div>
+  )
+}

apps/sim/platform/app/(shell)/search/_components/search-surface/search-surface.module.css

@@ -89,6 +89,9 @@
   border: var(--spacing-stroke-default) solid var(--ui-divider);
   border-radius: var(--radius-composer);
 }
+.field:has(textarea:focus-visible) {
+  border-color: var(--ui-secondary);
+}
 .fieldMark {
   display: inline-flex;
   flex: none;
@@ -129,7 +132,7 @@
 .dockedField,
 .resultsColumn {
   inline-size: 100%;
-  max-inline-size: var(--container-chat);
+  max-inline-size: calc(var(--container-chat) + 2 * var(--spacing-24));
   margin-inline: auto;
 }
 .dockedField {
@@ -143,7 +146,7 @@
   scrollbar-gutter: stable both-edges;
 }
 .resultsColumn {
-  padding: var(--spacing-4) var(--spacing-32) var(--spacing-24);
+  padding: var(--spacing-4) var(--spacing-24) var(--spacing-24);
 }
 .landing {
   display: flex;