improvement(search): restyle Search on the organization route

Both Search routes render the design-system surface: view switch, field,
history, filters and result rows. The Assistant stays the real conversation,
beside the surface. Behaviour comes from the shared hooks.

E2E selectors: the filters are now Select controls, so their triggers are
role combobox and their choices role option. No assertion changed.

Author: waleedlatif1

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

@@ -16,8 +16,8 @@ vi.mock('@/lib/mothership/chat/lifecycle', () => mothershipChatLifecycleMock)
 vi.mock('@/app/o/[organizationId]/integrations/integrations', () => ({
   OrganizationIntegrations: () => <div>Integrations</div>,
 }))
-vi.mock('@/app/o/[organizationId]/search/search', () => ({
-  OrganizationSearch: () => <div>Standalone Search</div>,
+vi.mock('@/platform/app/(shell)/search/_components/search-surface/search-surface', () => ({
+  OrganizationSearchSurface: () => <div>Standalone Search</div>,
 }))
 vi.mock('@/app/o/[organizationId]/components/organization-conversation', () => ({
   OrganizationConversation: ({ requestMode }: { requestMode?: string }) => (

apps/sim/app/o/[organizationId]/search/chat/[chatId]/page.tsx

@@ -5,8 +5,8 @@ import { getSession } from '@/lib/auth'
 import { getAccessibleCopilotChatAuth } from '@/lib/mothership/chat/lifecycle'
 import { organizationRoutes, WORKSPACE_SETTINGS_PATH } from '@/lib/navigation/paths'
 import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
-import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { OrganizationSearchSurface } from '@/platform/app/(shell)/search/_components/search-surface/search-surface'
 
 export const metadata: Metadata = { title: 'Assistant Search' }
 
@@ -29,7 +29,7 @@ export default async function OrganizationSearchChatPage({
   if (chat.mode !== 'assistant') redirect(organizationRoutes(organizationId).chat(chatId))
   return (
     <Suspense fallback={<HomeFallback />}>
-      <OrganizationSearch userId={session.user.id} chatId={chatId} />
+      <OrganizationSearchSurface userId={session.user.id} chatId={chatId} />
     </Suspense>
   )
 }

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

@@ -4,8 +4,8 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { WORKSPACE_SETTINGS_PATH } from '@/lib/navigation/paths'
 import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
-import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { OrganizationSearchSurface } from '@/platform/app/(shell)/search/_components/search-surface/search-surface'
 
 export const metadata: Metadata = { title: 'Search' }
 
@@ -22,7 +22,7 @@ export default async function OrganizationSearchPage({
   if (!context.searchAccess.memberScoped) redirect(WORKSPACE_SETTINGS_PATH)
   return (
     <Suspense fallback={<HomeFallback />}>
-      <OrganizationSearch userId={session.user.id} />
+      <OrganizationSearchSurface userId={session.user.id} />
     </Suspense>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-transitions.test.tsx

@@ -73,6 +73,8 @@ import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
 import { KnowledgeSearchResults } from '@/app/workspace/[workspaceId]/home/components/knowledge-search-results/knowledge-search-results'
 import { searchHistoryKeys } from '@/hooks/queries/search-history'
 import { knowledgeKeys } from '@/hooks/queries/utils/knowledge-keys'
+import { SearchHistory } from '@/platform/app/(shell)/search/_components/search-surface/search-history'
+import { OrganizationSearchSurface } from '@/platform/app/(shell)/search/_components/search-surface/search-surface'
 import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 
 nextNavigationMockFns.mockUsePathname.mockReturnValue('/o/organization/search')
@@ -141,23 +143,23 @@ async function render({
   scope = { kind: 'organization', organizationId: 'organization' },
   query = 'launch',
   params = '',
-  organizationPage = false,
+  organizationPage: OrganizationPage,
   filters,
   topK,
 }: {
   scope?: ResourceScope
   query?: string
   params?: string
-  organizationPage?: boolean
+  organizationPage?: typeof OrganizationSearch
   filters?: import('@/lib/api/contracts/knowledge').WorkspaceSearchFilters
   topK?: number
 } = {}) {
   await act(async () => {
     root.render(
       <QueryClientProvider client={client}>
         <NuqsTestingAdapter hasMemory searchParams={params} onUrlUpdate={mocks.urlUpdate}>
-          {organizationPage ? (
-            <OrganizationSearch userId='reader' />
+          {OrganizationPage ? (
+            <OrganizationPage userId='reader' />
           ) : (
             <KnowledgeSearchResults
               scope={scope}
@@ -209,13 +211,16 @@ async function complete(
   })
 }
 
-describe('live search submission feedback', () => {
+describe.each([
+  ['the app chrome', OrganizationSearch],
+  ['the organization route', OrganizationSearchSurface],
+])('live search submission feedback in %s', (_view, organizationPage) => {
   it.each(['launch', 'edited draft', ''])(
     'cancels with draft %j, ignores late results, and allows a fresh submission',
     async (draft) => {
       const shape = resolveDeploymentShape()
       seedDeploymentShape({ ...shape, features: shape.features })
-      await render({ organizationPage: true, params: '?q=launch' })
+      await render({ organizationPage, params: '?q=launch' })
       await act(async () => {
         await vi.advanceTimersByTimeAsync(1)
       })
@@ -267,16 +272,12 @@ describe('live search submission feedback', () => {
   it('acknowledges the submitted query before exposing refinement controls', async () => {
     const shape = resolveDeploymentShape()
     seedDeploymentShape({ ...shape, features: shape.features })
-    await render({ organizationPage: true, params: '?q=launch' })
+    await render({ organizationPage, params: '?q=launch' })
     await act(async () => {
       await vi.advanceTimersByTimeAsync(1)
     })
     expect(requests).toHaveLength(1)
-    expect(
-      [...container.querySelectorAll('button')].some(
-        (element) => element.textContent === 'All sources'
-      )
-    ).toBe(false)
+    expect(container.querySelector('[role="group"][aria-label="Search filters"]')).toBeNull()
     expect(
       container.querySelector<HTMLButtonElement>('button[aria-label="Stop search"]')?.disabled
     ).toBe(false)
@@ -312,55 +313,76 @@ describe('live search submission feedback', () => {
   })
 })
 
-it('removes cached private history when access is denied during revalidation', async () => {
-  client.setQueryData(searchHistoryKeys.list('organization', 'reader'), {
-    sources: [
-      {
-        url: 'https://example.com/private',
-        title: 'Private document',
-        viewedAt: new Date().toISOString(),
-      },
-    ],
-    queries: [{ query: 'private query', searchedAt: new Date().toISOString() }],
-  })
-  await act(async () => {
-    root.render(
-      <QueryClientProvider client={client}>
-        <SearchLandingHistory organizationId='organization' userId='reader' onSearch={() => {}}>
-          <input aria-label='Search' />
-        </SearchLandingHistory>
-      </QueryClientProvider>
-    )
-    await vi.advanceTimersByTimeAsync(1)
-  })
-  expect(container.querySelector('a[href="https://example.com/private"]')).not.toBeNull()
-  mockRequestJson.mockRejectedValue(new Error('Forbidden'))
-  await act(async () => {
-    await client.invalidateQueries({ queryKey: searchHistoryKeys.list('organization', 'reader') })
-    await vi.advanceTimersByTimeAsync(1)
-  })
-  expect(container.querySelector('a[href="https://example.com/private"]')).toBeNull()
-  expect(container.querySelector('[aria-label="Recent activity"]')).toBeNull()
-})
+it.each([
+  [
+    'the app chrome',
+    <SearchLandingHistory
+      key='chrome'
+      organizationId='organization'
+      userId='reader'
+      onSearch={() => {}}
+    >
+      <input aria-label='Search' />
+    </SearchLandingHistory>,
+  ],
+  [
+    'the organization route',
+    <SearchHistory key='route' userId='reader' onSearch={() => {}}>
+      <input aria-label='Search' />
+    </SearchHistory>,
+  ],
+])(
+  'removes cached private history when access is denied during revalidation in %s',
+  async (_view, history) => {
+    client.setQueryData(searchHistoryKeys.list('organization', 'reader'), {
+      sources: [
+        {
+          url: 'https://example.com/private',
+          title: 'Private document',
+          viewedAt: new Date().toISOString(),
+        },
+      ],
+      queries: [{ query: 'private query', searchedAt: new Date().toISOString() }],
+    })
+    await act(async () => {
+      root.render(<QueryClientProvider client={client}>{history}</QueryClientProvider>)
+      await vi.advanceTimersByTimeAsync(1)
+    })
+    expect(container.querySelector('a[href="https://example.com/private"]')).not.toBeNull()
+    mockRequestJson.mockRejectedValue(new Error('Forbidden'))
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: searchHistoryKeys.list('organization', 'reader') })
+      await vi.advanceTimersByTimeAsync(1)
+    })
+    expect(container.querySelector('a[href="https://example.com/private"]')).toBeNull()
+    expect(container.querySelector('[aria-label="Recent activity"]')).toBeNull()
+  }
+)
 
-it('keeps an unsent draft when a different recent search is opened', async () => {
-  const draftKey = 'reader:organization:organization:search'
-  useMothershipDraftsStore
-    .getState()
-    .setDraft(draftKey, { text: 'unfinished question', searchQuery: '' })
-  client.setQueryData(searchHistoryKeys.list('organization', 'reader'), {
-    sources: [],
-    queries: [{ query: 'launch', searchedAt: new Date().toISOString() }],
-  })
-  await render({ organizationPage: true })
-  const recent = [...container.querySelectorAll('button')].find(
-    (button) => button.textContent === 'launch'
-  )
-  expect(recent).not.toBeUndefined()
-  await act(async () => {
-    recent!.click()
-    await vi.advanceTimersByTimeAsync(1)
-  })
-  expect(useMothershipDraftsStore.getState().drafts[draftKey]?.text).toBe('unfinished question')
-  expect(requests.at(-1)?.body.query).toBe('launch')
-})
+it.each([
+  ['the app chrome', OrganizationSearch],
+  ['the organization route', OrganizationSearchSurface],
+])(
+  'keeps an unsent draft when a different recent search is opened in %s',
+  async (_view, organizationPage) => {
+    const draftKey = 'reader:organization:organization:search'
+    useMothershipDraftsStore
+      .getState()
+      .setDraft(draftKey, { text: 'unfinished question', searchQuery: '' })
+    client.setQueryData(searchHistoryKeys.list('organization', 'reader'), {
+      sources: [],
+      queries: [{ query: 'launch', searchedAt: new Date().toISOString() }],
+    })
+    await render({ organizationPage })
+    const recent = [...container.querySelectorAll('button')].find(
+      (button) => button.textContent === 'launch'
+    )
+    expect(recent).not.toBeUndefined()
+    await act(async () => {
+      recent!.click()
+      await vi.advanceTimersByTimeAsync(1)
+    })
+    expect(useMothershipDraftsStore.getState().drafts[draftKey]?.text).toBe('unfinished question')
+    expect(requests.at(-1)?.body.query).toBe('launch')
+  }
+)

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

@@ -0,0 +1,140 @@
+'use client'
+
+import type { WorkspaceSearchFilters } from '@/lib/api/contracts/knowledge'
+import { useSession } from '@/lib/auth/client'
+import type { ResourceScope } from '@/lib/core/resource-scope'
+import { useLiveSearchResults } from '@/app/workspace/[workspaceId]/home/components/knowledge-search-results/use-live-search-results'
+import { useSearchFilterControls } from '@/app/workspace/[workspaceId]/home/components/knowledge-search-results/use-search-filter-controls'
+import {
+  handleResultsKeyDown,
+  liveSearchResultsKey,
+  toSource,
+} from '@/app/workspace/[workspaceId]/home/components/knowledge-search-results/utils'
+import styles from '@/platform/app/(shell)/_components/search/search.module.css'
+import { SourceRow } from '@/platform/app/(shell)/_components/search/source-row'
+import { Button, Chip } from '@/platform/design-system/components/button/button'
+import { EmptyState } from '@/platform/design-system/components/empty-state/empty-state'
+import { DateRangePicker } from '@/platform/design-system/components/picker/date-picker'
+import { Select } from '@/platform/design-system/components/picker/select'
+import { InlineNotice } from '@/platform/design-system/components/status/status'
+
+function SearchFilterControls({ sourceTypes }: { sourceTypes: readonly string[] }) {
+  const { source, updated, range } = useSearchFilterControls(sourceTypes)
+  return (
+    <div className={styles.filters} role='group' aria-label='Search filters'>
+      <div className={styles.filter}>
+        <Select
+          variant='quiet'
+          label={source.label}
+          value={source.value}
+          options={source.options}
+          onValueChange={source.onChange}
+        />
+      </div>
+      <div className={styles.filter}>
+        <Select
+          variant='quiet'
+          label={updated.label}
+          value={updated.value}
+          options={updated.options}
+          onValueChange={updated.onChange}
+        />
+      </div>
+      {range && (
+        <div className={styles.range}>
+          <DateRangePicker
+            label='Updated between'
+            labelHidden
+            placeholder='Updated between'
+            clearable
+            value={range.start && range.end ? { start: range.start, end: range.end } : null}
+            onValueChange={(next) =>
+              next ? range.onChange(next.start, next.end) : range.onClear()
+            }
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface LiveResultsProps {
+  scope: ResourceScope
+  query: string
+  onSummarize?: (prompt: string, filters: WorkspaceSearchFilters) => void
+}
+
+function LiveResults({ scope, query, onSummarize }: LiveResultsProps) {
+  const results = useLiveSearchResults({ scope, query, onSummarize })
+  const { awaitingRange, isFetching, isPending, isError } = results
+  return (
+    <div className={styles.results} aria-busy={!awaitingRange && isFetching}>
+      {!awaitingRange && isFetching && (
+        <p className={styles.quiet} data-type='T060' role='status'>
+          {isPending ? 'Searching' : 'Updating results'}
+        </p>
+      )}
+      {awaitingRange && <p data-type='T060'>Choose the days to search.</p>}
+      {isError && (
+        <InlineNotice
+          intent='danger'
+          message='Search couldn’t run.'
+          action={
+            <Button variant='quiet' size='compact' onClick={() => void results.refetch()}>
+              Try again
+            </Button>
+          }
+        />
+      )}
+      {results.showFilterControls && <SearchFilterControls sourceTypes={results.sourceTypes} />}
+      {results.noResults && <EmptyState title='Search found no results.' />}
+      {results.connectAppsHref && (
+        <InlineNotice
+          message='No connected apps are available for this search.'
+          action={<Chip href={results.connectAppsHref}>Connect apps</Chip>}
+        />
+      )}
+      {results.someAppsUnavailable && (
+        <InlineNotice
+          intent='warning'
+          message='Some apps couldn’t be searched. Showing available results.'
+        />
+      )}
+      {results.coverageIncomplete && (
+        <InlineNotice
+          intent='warning'
+          message='Coverage is incomplete. Narrow the query or ask Assistant to refine it.'
+        />
+      )}
+      <div
+        className={styles.rows}
+        role='region'
+        aria-label='Search results'
+        aria-busy={isFetching}
+        onKeyDown={handleResultsKeyDown}
+      >
+        {results.documents.map((result) => (
+          <SourceRow
+            key={result.documentId}
+            source={toSource(result, query, scope)}
+            query={query}
+            onSummarize={results.summarizerFor(result.documentId)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** A query's results. A new query, reader or scope remounts them, restarting the date anchor. */
+export function SearchResults({ scope, query, onSummarize }: LiveResultsProps) {
+  const { data: session } = useSession()
+  return (
+    <LiveResults
+      key={liveSearchResultsKey(scope, session?.user?.id, query)}
+      scope={scope}
+      query={query}
+      onSummarize={onSummarize}
+    />
+  )
+}