improvement(org): simplify Home after review

Drops what only fixtures needed, keeps the dashboard from re-rendering on each
keystroke, and shares the authorized-app paging and calendar-date check. Connect
now answers to both gates the widget's read applies, and readiness moves to a
module free of the connector catalog so the extension's graph stays as it was.

Author: waleedlatif1

apps/sim/app/o/[organizationId]/home/components/get-started/get-started.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { cn } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
 import { HomeSection } from '@/components/home/home-section'
 import { SettingsGuardedLink } from '@/components/settings/settings-guarded-link'
-import { OAUTH_SEARCH_READ_SCOPE, oauthScopeSatisfies } from '@/lib/auth/oauth-provider'
-import { hasSearchIntegrationReady } from '@/lib/credential-groups/member-integrations'
+import { hasSearchIntegrationReady } from '@/lib/credential-groups/search-readiness'
 import { organizationRoutes } from '@/lib/navigation/paths'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
-import { useAuthorizedApps } from '@/hooks/queries/oauth-provider'
+import { useHasSearchAuthorization } from '@/hooks/queries/oauth-provider'
 import { useOrganizationAccounts } from '@/hooks/queries/organization-accounts'
 import { useSearchIntegrations } from '@/hooks/queries/search-integrations'
 
@@ -80,17 +79,8 @@ export function GetStarted() {
   const { data: integrations } = useSearchIntegrations(organization.id, {
     enabled: canConnectIntegrations,
   })
-  const {
-    data: authorizedApps,
-    fetchNextPage,
-    hasNextPage,
-    isFetching,
-    isError,
-  } = useAuthorizedApps('', { enabled: viewer.canUseSearchMcp })
-  const hasSearchAuthorization =
-    authorizedApps?.pages.some((page) =>
-      page.apps.some((app) => oauthScopeSatisfies(app.scopes, OAUTH_SEARCH_READ_SCOPE))
-    ) ?? false
+  const hasSearchAuthorization = useHasSearchAuthorization(viewer.canUseSearchMcp)
+
   const hrefs: Record<StepId, string> = {
     'connect-integration': viewer.isAdmin
       ? routes.settingsSection('integrations')
@@ -114,25 +104,6 @@ export function GetStarted() {
    */
   const [animationsEnabled, setAnimationsEnabled] = useState(false)
 
-  useEffect(() => {
-    if (
-      viewer.canUseSearchMcp &&
-      !hasSearchAuthorization &&
-      hasNextPage &&
-      !isFetching &&
-      !isError
-    ) {
-      void fetchNextPage()
-    }
-  }, [
-    viewer.canUseSearchMcp,
-    hasSearchAuthorization,
-    hasNextPage,
-    isFetching,
-    isError,
-    fetchNextPage,
-  ])
-
   const handleToggleExpanded = () => {
     setAnimationsEnabled(true)
     setExpanded((prev) => !prev)

apps/sim/app/o/[organizationId]/home/page.tsx

@@ -21,14 +21,13 @@ interface PrefetchedHomeProps {
   surface: OrganizationSurfaceContext
   principal: SessionPrincipal
   requestMode: 'agent' | 'assistant'
-  userName: string
 }
 
 /** Holds only its own boundary, so the page's arrangement paints before these reads settle. */
-async function PrefetchedHome({ surface, principal, requestMode, userName }: PrefetchedHomeProps) {
+async function PrefetchedHome({ surface, principal, requestMode }: PrefetchedHomeProps) {
   return (
     <HydrationBoundary state={await prefetchHome(surface, principal)}>
-      <HomeConversation requestMode={requestMode} userName={userName} />
+      <HomeConversation requestMode={requestMode} />
     </HydrationBoundary>
   )
 }
@@ -53,7 +52,6 @@ export default async function OrganizationHomePage({
         surface={context}
         principal={{ kind: 'session', userId: session.user.id, sessionId: session.session.id }}
         requestMode={requestMode}
-        userName={session.user.name}
       />
     </Suspense>
   )

apps/sim/ee/organization-usage/hooks/use-usage-window.ts

@@ -7,7 +7,7 @@ import {
 } from '@/lib/api/contracts/organization-usage'
 import { ACTIVITY_MAX_PAGE } from '@/lib/billing/core/organization-activity'
 import { formatDateShort } from '@/lib/core/utils/date-display'
-import { getBrowserTimezone } from '@/lib/core/utils/timezone'
+import { getBrowserTimezone, isCalendarDate } from '@/lib/core/utils/timezone'
 import { DEFAULT_USAGE_PRESET, PERIOD_LABELS } from '@/ee/organization-usage/constants'
 import {
   organizationUsageParsers,
@@ -17,12 +17,6 @@ import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organizat
 
 const DAY_MS = 24 * 60 * 60 * 1000
 
-/** A bare `YYYY-MM-DD` that survives a calendar round-trip — the contract's rule, verbatim. */
-function isCalendarDate(value: string | null): value is string {
-  if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false
-  return new Date(`${value}T00:00:00.000Z`).toISOString().slice(0, 10) === value
-}
-
 /** Match server date validation so invalid links fall back before issuing requests. */
 export function isUsableCustomRange(start: string | null, end: string | null): boolean {
   if (!isCalendarDate(start) || !isCalendarDate(end)) return false

apps/sim/hooks/queries/oauth-provider.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { requestJson } from '@/lib/api/client/request'
 import {
@@ -6,6 +7,7 @@ import {
   revokeAuthorizedAppContract,
 } from '@/lib/api/contracts/user'
 import { client } from '@/lib/auth/client'
+import { OAUTH_SEARCH_READ_SCOPE, oauthScopeSatisfies } from '@/lib/auth/oauth-provider'
 
 export const oauthProviderKeys = {
   all: ['oauth-provider'] as const,
@@ -111,3 +113,17 @@ export function useOAuthSwitchAccount() {
     },
   })
 }
+
+/** Whether an app the viewer authorized can read Search, paging until one is found or none is left. */
+export function useHasSearchAuthorization(enabled: boolean): boolean {
+  const apps = useAuthorizedApps('', { enabled })
+  const authorized =
+    apps.data?.pages.some((page) =>
+      page.apps.some((app) => oauthScopeSatisfies(app.scopes, OAUTH_SEARCH_READ_SCOPE))
+    ) ?? false
+  const { hasNextPage, isFetching, isError, fetchNextPage } = apps
+  useEffect(() => {
+    if (enabled && !authorized && hasNextPage && !isFetching && !isError) void fetchNextPage()
+  }, [enabled, authorized, hasNextPage, isFetching, isError, fetchNextPage])
+  return authorized
+}

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

@@ -32,7 +32,7 @@ export function useOrganizationHomeEmail(
     queryKey: organizationHomeKeys.email(organizationId),
     queryFn: ({ signal }) =>
       requestJson(getOrganizationHomeEmailContract, { params: { id: organizationId }, signal }),
-    enabled: Boolean(organizationId) && enabled,
+    enabled,
     staleTime: EMAIL_STALE_TIME,
     refetchOnWindowFocus: true,
   })
@@ -52,7 +52,7 @@ export function useOrganizationHomeCalendar(
         query: { date, timeZone },
         signal,
       }),
-    enabled: Boolean(organizationId && date) && enabled,
+    enabled,
     staleTime: CALENDAR_STALE_TIME,
     refetchOnWindowFocus: true,
   })

apps/sim/lib/core/utils/timezone.ts

@@ -23,6 +23,13 @@ const COMMON_TIMEZONES = [
   'Australia/Sydney',
 ]
 
+/** A bare `yyyy-MM-dd` that survives a calendar round-trip, so `2026-02-31` is not a date. */
+export function isCalendarDate(value: string | null): value is string {
+  if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false
+  const instant = new Date(`${value}T00:00:00.000Z`)
+  return !Number.isNaN(instant.getTime()) && instant.toISOString().slice(0, 10) === value
+}
+
 /** Adds whole days to a `yyyy-MM-dd` date. Anchored at noon so no zone or DST can shift the day. */
 export function addCalendarDays(date: string, days: number): string {
   const next = new Date(`${date}T12:00:00Z`)

apps/sim/lib/credential-groups/member-integrations.ts

@@ -9,10 +9,6 @@ import {
 } from '@/lib/credential-groups/providers'
 import { hasSlackSearchUserScopes } from '@/lib/credential-groups/slack-managed-user-scopes'
 import { LIVE_SEARCH_SCOPE_FIELDS } from '@/lib/sim-search/live/policy-schema'
-import {
-  liveSearchProviderForCredential,
-  supportsLiveSearchMode,
-} from '@/lib/sim-search/live/provider-catalog'
 import {
   LIVE_SEARCH_SOURCE_TYPES,
   liveSearchMcpConnector,
@@ -40,52 +36,6 @@ export function canReadMemberIntegrations(surface: {
   )
 }
 
-/** Get started's first step: the viewer reads Search through their own connection or a source. */
-export function hasSearchIntegrationReady(
-  accounts: OrganizationAccountsSettings | undefined,
-  policies: SearchIntegrationStatus[] | undefined
-): boolean {
-  const usable = policies?.filter((policy) => policy.approved && policy.available !== false)
-  const approved = new Set(usable?.map((policy) => policy.connectorType))
-  const group = accounts?.credentialGroup
-  const readyOptions = new Set(
-    group?.options
-      .filter((option) => {
-        const provider = liveSearchProviderForCredential(option.provider)
-        return (
-          option.status === 'active' &&
-          option.configurationStatus === 'ready' &&
-          provider &&
-          supportsLiveSearchMode(provider, 'member') &&
-          approved.has(provider)
-        )
-      })
-      .map((option) => option.id)
-  )
-  const readyServers = new Set(
-    group?.mcpServers
-      .filter((server) => {
-        const provider = liveSearchProviderForCredential(`mcp:${server.managedConnectorId}`)
-        return (
-          server.enabled &&
-          provider &&
-          approved.has(provider) &&
-          accounts?.availableMcpConnectors.some((id) => id === server.managedConnectorId)
-        )
-      })
-      .map((server) => server.id)
-  )
-  const hasConnection =
-    group?.status === 'active' &&
-    (accounts?.viewerAccounts?.some(
-      (account) => account.status === 'active' && readyOptions.has(account.optionId)
-    ) ||
-      accounts?.viewerMcpAccounts?.some(
-        (account) => account.status === 'active' && readyServers.has(account.mcpServerId)
-      ))
-  return Boolean(hasConnection || usable?.some((policy) => policy.configuredServiceSource))
-}
-
 export function assistantAccountOptions(data: OrganizationAccountsSettings, search: string) {
   const providers = data.assistantProviders.filter(
     (provider) => !SEARCH_ACCOUNT_PROVIDERS.has(provider)

apps/sim/lib/credential-groups/search-readiness.ts

@@ -0,0 +1,52 @@
+import type { SearchIntegrationStatus } from '@/lib/api/contracts/knowledge/search-integrations'
+import type { OrganizationAccountsSettings } from '@/lib/api/contracts/organization-accounts'
+import {
+  liveSearchProviderForCredential,
+  supportsLiveSearchMode,
+} from '@/lib/sim-search/live/provider-catalog'
+
+/** Get started's first step: the viewer reads Search through their own connection or a source. */
+export function hasSearchIntegrationReady(
+  accounts: OrganizationAccountsSettings | undefined,
+  policies: SearchIntegrationStatus[] | undefined
+): boolean {
+  const usable = policies?.filter((policy) => policy.approved && policy.available !== false)
+  const approved = new Set(usable?.map((policy) => policy.connectorType))
+  const group = accounts?.credentialGroup
+  const readyOptions = new Set(
+    group?.options
+      .filter((option) => {
+        const provider = liveSearchProviderForCredential(option.provider)
+        return (
+          option.status === 'active' &&
+          option.configurationStatus === 'ready' &&
+          provider &&
+          supportsLiveSearchMode(provider, 'member') &&
+          approved.has(provider)
+        )
+      })
+      .map((option) => option.id)
+  )
+  const readyServers = new Set(
+    group?.mcpServers
+      .filter((server) => {
+        const provider = liveSearchProviderForCredential(`mcp:${server.managedConnectorId}`)
+        return (
+          server.enabled &&
+          provider &&
+          approved.has(provider) &&
+          accounts?.availableMcpConnectors.some((id) => id === server.managedConnectorId)
+        )
+      })
+      .map((server) => server.id)
+  )
+  const hasConnection =
+    group?.status === 'active' &&
+    (accounts?.viewerAccounts?.some(
+      (account) => account.status === 'active' && readyOptions.has(account.optionId)
+    ) ||
+      accounts?.viewerMcpAccounts?.some(
+        (account) => account.status === 'active' && readyServers.has(account.mcpServerId)
+      ))
+  return Boolean(hasConnection || usable?.some((policy) => policy.configuredServiceSource))
+}

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

@@ -2,7 +2,10 @@
 
 import { useState } from 'react'
 import styles from '@/platform/app/(shell)/home/_components/activity-chart/activity-chart.module.css'
-import type { HomeActivityState } from '@/platform/app/(shell)/home/_components/model'
+import type {
+  ActivityPoint,
+  HomeActivityState,
+} from '@/platform/app/(shell)/home/_components/model'
 import { RetryButton } from '@/platform/app/(shell)/home/_components/retry-button/retry-button'
 import { SkeletonBlock } from '@/platform/app/(shell)/home/_components/widget-skeleton/widget-skeleton'
 import { TrendPlot } from '@/platform/design-system/catalog/plots'
@@ -12,18 +15,12 @@ import { ChartTooltip } from '@/platform/design-system/components/chart/chart-to
 import { usePlotInspection } from '@/platform/design-system/components/chart/use-plot-inspection'
 import { RangePicker } from '@/platform/design-system/components/menu/range-picker'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
-import { DAY_MS, formatCalendarDate } from '@/platform/lib/time'
-
-interface ActivityPoint {
-  date: string
-  value: number
-}
+import { formatCalendarDate } from '@/platform/lib/time'
 
 interface HomeActivityChartProps {
   title: string
   state: HomeActivityState
-  onRetry?: () => void
-  hidden?: boolean
+  onRetry: () => void
 }
 
 interface ActivitySeriesProps {
@@ -93,33 +90,13 @@ function ActivitySeries({ title, points }: ActivitySeriesProps) {
 const WINDOW_DAYS = [7, 30, 90] as const
 const RANGE_LABELS = WINDOW_DAYS.map((days) => `Last ${days} days`)
 
-function calendarWindow(history: readonly ActivityPoint[] | undefined, days: number) {
-  if (!history?.length) return []
-  const end = Date.parse(history[history.length - 1].date)
-  const start = Math.max(Date.parse(history[0].date), end - (days - 1) * DAY_MS)
-  const counts = new Map(history.map(({ date, value }) => [date, value]))
-  const points: ActivityPoint[] = []
-  for (let day = start; day <= end; day += DAY_MS) {
-    const date = new Date(day).toISOString().slice(0, 10)
-    const count = counts.get(date) ?? 0
-    points.push({ date, value: Number.isFinite(count) && count > 0 ? count : 0 })
-  }
-  return points
-}
-
-export function HomeActivityChart({
-  title,
-  state,
-  onRetry,
-  hidden = false,
-}: HomeActivityChartProps) {
+export function HomeActivityChart({ title, state, onRetry }: HomeActivityChartProps) {
   const [range, setRange] = useState(RANGE_LABELS[0])
   const scrollEdges = useScrollEdges<HTMLElement>('vertical', { tabStop: true })
-  if (hidden || state.status === 'hidden') return null
+  if (state.status === 'hidden') return null
   const ready = state.status === 'ready'
-  const history = ready ? state.points : undefined
   const days = WINDOW_DAYS[RANGE_LABELS.indexOf(range)]
-  const points = calendarWindow(history, days)
+  const points = ready ? state.points.slice(-days) : []
   const total = points.reduce((sum, point) => sum + point.value, 0)
   return (
     <section ref={scrollEdges} className={styles.chart} aria-label={title}>
@@ -135,7 +112,7 @@ export function HomeActivityChart({
         {ready && (
           <RangePicker
             label='Range'
-            options={history ? RANGE_LABELS : []}
+            options={RANGE_LABELS}
             value={range}
             onValueChange={setRange}
           />