revert(search): restore Emir's Search surface and source row markup

Back to his last version (ecd02bc) of the Search surface, its CSS and
the source row, which returns to _components/search with his .row,
.rowTitle, .quiet and .snippet rules. Kept logic: useSearchField drafts,
scope-built paths, nuqs state, URL-less and unavailable sources (no link,
no actions), Summarize, Copy link and the Sim link entry. Withdrawn: the
main landmark, Assistant's New chat button, the coarse-pointer touch
targets and the Unavailable status label. The search and people e2e
scripts drop the checks for the withdrawn New chat and narrow-row summary;
the parity ledger holds both as Open for the design owner.

Author: waleedlatif1

apps/sim/app/(product)/_components/chat/message/message-sources.tsx

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react'
 import { Button } from '@sim/emcn/button'
 import { AnchoredPopover } from '@sim/emcn/menu/anchored-popover'
 import styles from '@/app/(product)/_components/chat/message/message.module.css'
-import { SourceRow } from '@/app/(product)/_components/source-row/source-row'
+import { SourceRow } from '@/app/(product)/_components/search/source-row'
 import type { ChatSource } from '@/platform/lib/data/models/chat'
 import { plural } from '@/platform/shared/plural'
 

apps/sim/app/(product)/_components/chat/panel/cited-sources.tsx

@@ -2,7 +2,7 @@
 
 import { EmptyState } from '@sim/emcn/empty-state'
 import styles from '@/app/(product)/_components/chat/panel/panels.module.css'
-import { SourceRow } from '@/app/(product)/_components/source-row/source-row'
+import { SourceRow } from '@/app/(product)/_components/search/source-row'
 import type { ChatSource } from '@/platform/lib/data/models/chat'
 
 /** Every document one answer cited, in the same row a search result and the reply's list use. */

apps/sim/app/(product)/_components/live-shell/live-shell.tsx

@@ -6,9 +6,9 @@ import { resolveLiveDestinations } from '@/app/(product)/_components/destination
 import { LiveComposerHost } from '@/app/(product)/_components/live-shell/live-composer-host'
 import { StaleSession } from '@/app/(product)/_components/live-shell/stale-session'
 import { ProductSession } from '@/app/(product)/_components/product-session'
+import { LiveSourceLinks } from '@/app/(product)/_components/search/live-source-links'
 import { SessionState } from '@/app/(product)/_components/session-state/session-state'
 import { AccessDenied, SurfaceUnavailable } from '@/app/(product)/_components/shell-gate/shell-gate'
-import { LiveSourceLinks } from '@/app/(product)/_components/source-row/live-source-links'
 import { prefetchShell } from '@/platform/lib/data/prefetch-shell'
 import { LiveProviders } from '@/platform/lib/data/providers'
 import {

…ponents/source-row/live-source-links.tsx …_components/search/live-source-links.tsxapps/sim/app/(product)/_components/source-row/live-source-links.tsx renamed to apps/sim/app/(product)/_components/search/live-source-links.tsx apps/sim/app/(product)/_components/source-row/live-source-links.tsx renamed to apps/sim/app/(product)/_components/search/live-source-links.tsx

@@ -6,7 +6,7 @@ import {
   SourceActionsMenu,
   type SourceActionsProps,
   SourceActionsProvider,
-} from '@/app/(product)/_components/source-row/source-row'
+} from '@/app/(product)/_components/search/source-row'
 import { type LinkDraft, useSourceLinkAction } from '@/platform/lib/data/links'
 import { useOrganization } from '@/platform/lib/data/organization'
 

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

@@ -8,7 +8,7 @@ import { DateRangePicker } from '@sim/emcn/picker/date-picker'
 import { FailureNotice, InlineNotice } from '@sim/emcn/status'
 import Link from 'next/link'
 import styles from '@/app/(product)/_components/search/search.module.css'
-import { SourceRow } from '@/app/(product)/_components/source-row/source-row'
+import { SourceRow } from '@/app/(product)/_components/search/source-row'
 import type { SearchResultsData } from '@/platform/lib/data/models/search'
 
 function moveFocus(event: KeyboardEvent<HTMLElement>) {

apps/sim/app/(product)/_components/search/search.module.css

@@ -11,3 +11,23 @@
   justify-content: flex-end;
   gap: var(--ui-action-gap);
 }
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-row-gap);
+  min-inline-size: 0;
+}
+.rowTitle {
+  min-inline-size: 0;
+}
+.rowTitle:hover {
+  text-decoration: underline;
+}
+.quiet,
+.snippet {
+  color: var(--ui-secondary);
+}
+.snippet {
+  overflow-wrap: anywhere;
+}

…t)/_components/source-row/source-row.tsx …oduct)/_components/search/source-row.tsxapps/sim/app/(product)/_components/source-row/source-row.tsx renamed to apps/sim/app/(product)/_components/search/source-row.tsx apps/sim/app/(product)/_components/source-row/source-row.tsx renamed to apps/sim/app/(product)/_components/search/source-row.tsx

@@ -5,9 +5,8 @@ import { ActivityBody } from '@sim/emcn/activity-row/activity-body'
 import { useClipboard } from '@sim/emcn/feedback/use-clipboard'
 import { ActionMenu, type MenuAction } from '@sim/emcn/menu/action-menu'
 import { OverflowText } from '@sim/emcn/overflow-text'
-import { StatusText } from '@sim/emcn/status'
 import { toast } from '@/lib/toast/sink'
-import styles from '@/app/(product)/_components/source-row/source-row.module.css'
+import styles from '@/app/(product)/_components/search/search.module.css'
 import { onExternalLinkClick } from '@/platform/lib/data/external-link'
 import type { LinkedSourceRow, SourceRowData } from '@/platform/lib/data/models/source-row'
 
@@ -56,37 +55,11 @@ export function SourceRow({ row, onOpen, onSummarize, onLeave }: SourceRowProps)
   const { copy } = useClipboard()
   const LinkActions = useContext(ActionsHost) ?? BaseSourceActions
   const { url } = row
-  const title = <OverflowText text={row.title}>{row.title}</OverflowText>
+  // An unavailable document, or one with no page to open, keeps the title without its link.
+  const href = row.unavailable ? undefined : url
   const summarize: MenuAction[] = onSummarize
     ? [{ id: 'summarize', label: 'Summarize', onSelect: () => onSummarize(row) }]
     : []
-  const heading = row.unavailable ? (
-    <>
-      <span className={styles.unavailable} data-type='T048'>
-        {title}
-      </span>
-      <StatusText label='Unavailable' />
-    </>
-  ) : url ? (
-    <a
-      className={styles.title}
-      data-type='T048'
-      data-source-link=''
-      href={url}
-      target='_blank'
-      rel='noopener noreferrer'
-      onClick={(event) => {
-        onOpen?.({ ...row, url })
-        onExternalLinkClick(event, url)
-      }}
-    >
-      {title}
-    </a>
-  ) : (
-    <span className={styles.title} data-type='T048'>
-      {title}
-    </span>
-  )
   const actions = row.unavailable ? null : url ? (
     <LinkActions
       row={{ ...row, url }}
@@ -109,7 +82,21 @@ export function SourceRow({ row, onOpen, onSummarize, onLeave }: SourceRowProps)
   return (
     <article className={styles.row}>
       <ActivityBody>
-        {heading}
+        <a
+          className={styles.rowTitle}
+          data-type='T048'
+          data-source-link=''
+          href={href}
+          target='_blank'
+          rel='noopener noreferrer'
+          onClick={(event) => {
+            if (!href) return
+            onOpen?.({ ...row, url: href })
+            onExternalLinkClick(event, href)
+          }}
+        >
+          <OverflowText text={row.title}>{row.title}</OverflowText>
+        </a>
         {row.meta && (
           <span className={styles.quiet} data-type='T052'>
             {row.meta}

apps/sim/app/(product)/_components/source-row/source-row.module.css

@@ -28,8 +28,6 @@
 }
 .switch {
   display: flex;
-  align-items: center;
-  gap: var(--ui-action-gap);
   min-inline-size: 0;
 }
 .column {
@@ -44,18 +42,6 @@
   gap: var(--ui-action-gap);
   min-inline-size: 0;
 }
-/* On touch, the field's buttons keep their drawn size while their targets grow to the touch target. */
-@media (pointer: coarse) {
-  .field > button {
-    position: relative;
-  }
-  .field > button::after {
-    content: "";
-    position: absolute;
-    inset-block: calc((var(--spacing-28) - var(--spacing-app-touch-target)) / 2);
-    inset-inline: 0;
-  }
-}
 .field > :first-child {
   flex: 1;
   min-inline-size: 0;

apps/sim/app/(product)/o/[organizationId]/search/_components/search-surface/search-surface.module.css

@@ -16,15 +16,16 @@ import { surfaceHref } from '@/platform/lib/data/organization-model'
 import { useSearchField, useSearchSurface } from '@/platform/lib/data/search'
 import { useSurfaceScope } from '@/platform/lib/surface-scope'
 
-interface SearchFieldProps {
+interface SearchFormProps {
   query: string
   searching: boolean
   onSubmit: (value: string) => void
   onStop: () => void
-  newSearch?: { label: string; disabled: boolean; onStart: () => void }
+  newSearch?: { disabled: boolean; onStart: () => void }
 }
 
-function SearchField({ query, searching, onSubmit, onStop, newSearch }: SearchFieldProps) {
+/** Keyed by the committed query, so each query opens on its own saved draft. */
+function SearchForm({ query, searching, onSubmit, onStop, newSearch }: SearchFormProps) {
   const field = useSearchField({ query, searching, onSubmit, onStop })
   function submit(event: FormEvent) {
     event.preventDefault()
@@ -60,7 +61,7 @@ function SearchField({ query, searching, onSubmit, onStop, newSearch }: SearchFi
           disabled={newSearch.disabled}
           onClick={newSearch.onStart}
         >
-          {newSearch.label}
+          New search
         </Button>
       )}
     </form>
@@ -76,9 +77,6 @@ export function SearchSurface({ chat }: SearchSurfaceProps) {
   const surface = useSearchSurface(chat?.id)
   const scope = useSurfaceScope()
   const { mode, query, assistantAvailable, history } = surface
-  const newAction = surface.canStartNew
-    ? { label: surface.newLabel, disabled: surface.startingNew, onStart: surface.startNew }
-    : undefined
   const modeSwitch = assistantAvailable && (
     <SegmentedControl
       label='Search mode'
@@ -91,7 +89,7 @@ export function SearchSurface({ chat }: SearchSurfaceProps) {
     />
   )
   return (
-    <main className={styles.surface}>
+    <div className={styles.surface}>
       {/* The conversation stays mounted under Search so a running turn keeps streaming. */}
       {assistantAvailable && (mode === 'assistant' || surface.assistantStarted) && (
         <div className={styles.assistant} hidden={mode !== 'assistant'}>
@@ -103,22 +101,7 @@ export function SearchSurface({ chat }: SearchSurfaceProps) {
             searchView={mode}
             summaryRequest={surface.pendingSummary}
             onSummaryConsumed={surface.consumeSummary}
-            header={
-              <div className={styles.switch}>
-                {modeSwitch}
-                {mode === 'assistant' && newAction && (
-                  <Button
-                    variant='quiet'
-                    size='compact'
-                    icon='I074'
-                    disabled={newAction.disabled}
-                    onClick={newAction.onStart}
-                  >
-                    {newAction.label}
-                  </Button>
-                )}
-              </div>
-            }
+            header={<div className={styles.switch}>{modeSwitch}</div>}
           />
         </div>
       )}
@@ -130,13 +113,17 @@ export function SearchSurface({ chat }: SearchSurfaceProps) {
           </header>
           <PageColumn>
             <div className={styles.column}>
-              <SearchField
+              <SearchForm
                 key={query}
                 query={query}
                 searching={surface.searching}
                 onSubmit={surface.submit}
                 onStop={surface.stop}
-                newSearch={newAction}
+                newSearch={
+                  surface.canStartNew
+                    ? { disabled: surface.startingNew, onStart: surface.startNew }
+                    : undefined
+                }
               />
               {query || surface.filtered ? (
                 <SearchResults results={surface.results} />
@@ -170,6 +157,6 @@ export function SearchSurface({ chat }: SearchSurfaceProps) {
           </PageColumn>
         </div>
       )}
-    </main>
+    </div>
   )
 }