improvement(search): polish organization search and source results

apps/sim/app/layout.tsx

@@ -112,7 +112,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 // needs the same variables set before first paint.
                 try {
                   var path = window.location.pathname;
-                  if (path.indexOf('/workspace/') === -1 && path.indexOf('/o/') !== 0) {
+                  if (path.indexOf('/workspace/') === -1 && path.indexOf('/o/') !== 0 && path.indexOf('/account/settings') !== 0 && path.indexOf('/selfhost/settings') !== 0) {
                     return;
                   }
                 } catch (e) {
@@ -123,7 +123,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 // 30% of the viewport capped at 400px, and never below the 224px
                 // minimum, so a narrow window yields a width >= MIN instead of a
                 // sub-minimum sliver.
-                var defaultSidebarWidth = 256;
+                var defaultSidebarWidth = 224;
                 try {
                   // Collapse comes from the cookie (independent of localStorage
                   // parsing); the persisted width is read defensively below. Match the

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { chipVariants, cn, DropdownMenuItem, Loader, OverflowText, Skeleton } from '@sim/emcn'
+import { chipVariants, cn, DropdownMenuItem, OverflowText } from '@sim/emcn'
 import { MoreHorizontal, Pin, Task } from '@sim/emcn/icons'
 import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
 import { useOrganizationChatActions } from '@/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chat-actions'
@@ -20,15 +20,6 @@ import {
   SIDEBAR_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 
-/** Stands in for a chip row while the list loads, so it carries no margin either. */
-function ChatRowSkeleton() {
-  return (
-    <div className='sidebar-collapse-hide flex h-[30px] items-center gap-2 rounded-lg px-2'>
-      <Skeleton className='size-[16px] shrink-0 rounded-sm' />
-    </div>
-  )
-}
-
 interface ChatRowProps {
   chat: OrganizationChat
   isCurrentRoute: boolean
@@ -132,12 +123,7 @@ export function ChatsSection({
               ariaLabel='Chats'
               isEditing={rename.editingId !== null}
             >
-              {isLoading ? (
-                <DropdownMenuItem disabled>
-                  <Loader className='size-[14px]' animate />
-                  Loading...
-                </DropdownMenuItem>
-              ) : chats.length === 0 ? (
+              {isLoading ? null : chats.length === 0 ? (
                 <DropdownMenuItem disabled>No chats yet</DropdownMenuItem>
               ) : (
                 chats.map((chat) => (
@@ -163,9 +149,7 @@ export function ChatsSection({
           </div>
         ) : (
           <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
-            {isLoading ? (
-              <ChatRowSkeleton />
-            ) : (
+            {!isLoading && (
               <>
                 {chats.length === 0 && (
                   <div className='flex h-[30px] items-center px-2 text-[var(--text-muted)] text-small'>

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-section/workspace-list.test.tsx

@@ -146,9 +146,9 @@ describe('WorkspaceList rail view', () => {
     expect(document.querySelector('input')).toBeNull()
   })
 
-  it('shows the loading row while the list resolves', async () => {
+  it('keeps the list quiet while it resolves', async () => {
     workspacesState.isLoading = true
     await render()
-    expect(document.body.textContent).toContain('Loading...')
+    expect(document.body.textContent).not.toContain('Loading...')
   })
 })

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-section/workspace-list.tsx

@@ -6,7 +6,6 @@ import {
   cn,
   DropdownMenuItem,
   DropdownMenuItemAction,
-  Loader,
   OverflowText,
   toast,
 } from '@sim/emcn'
@@ -76,12 +75,6 @@ export function WorkspaceList({ organizationId, pathname, flyout }: WorkspaceLis
 
   return (
     <>
-      {isLoading && flyout && (
-        <DropdownMenuItem disabled>
-          <Loader className='size-[14px]' animate />
-          Loading...
-        </DropdownMenuItem>
-      )}
       {!isLoading && workspaces.length === 0 && (
         <div className='px-2 py-1 text-[var(--text-muted)] text-small'>No workspaces yet</div>
       )}

apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useCollapsedTooltips } from './use-collapsed-tooltips'
 export type { OrganizationChat } from './use-organization-chats'
 export { useOrganizationChats } from './use-organization-chats'
 export { useOrganizationWorkspaces } from './use-organization-workspaces'

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

@@ -16,10 +16,7 @@ import {
   OrganizationHeader,
   WorkspacesSection,
 } from '@/app/o/[organizationId]/components/organization-sidebar/components'
-import {
-  useCollapsedTooltips,
-  useOrganizationChats,
-} from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+import { useOrganizationChats } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
 import { buildOrganizationNavItems } from '@/app/o/[organizationId]/components/organization-sidebar/navigation'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
 import { OrganizationSettingsSidebar } from '@/app/o/[organizationId]/settings/organization-settings-sidebar'
@@ -85,7 +82,7 @@ export const OrganizationSidebar = memo(function OrganizationSidebar() {
     useOrganizationContext()
   const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const { handlePointerDown } = useSidebarResize()
-  const showCollapsedTooltips = useCollapsedTooltips(isCollapsed)
+  const showCollapsedTooltips = isCollapsed
   const scrollEdges = useScrollEdges(scrollContainerRef, {
     contentRef: scrollContentRef,
     enabled: !isCollapsed,

apps/sim/app/o/[organizationId]/components/search-input-bar.tsx

@@ -81,8 +81,8 @@ export function SearchInputBar({
     <div
       ref={scrollerRef}
       className={cn(
-        'relative min-h-[46px] w-full rounded-[23px] border border-[var(--border-1)] bg-[var(--white)] py-[7px] pr-2.5 pl-4 dark:bg-[var(--surface-4)]',
-        hasAttachments && 'rounded-2xl px-2.5 py-2',
+        'relative min-h-[46px] w-full rounded-full border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        (hasAttachments || expanded) && 'rounded-2xl',
         floating && 'shadow-ambient'
       )}
     >

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

@@ -617,15 +617,15 @@ it('shows Build with a chevron in the shared chip and text-only modes in its men
     onModeChange,
   })
   const mode = container.querySelector<HTMLButtonElement>('[aria-label="Conversation mode"]')!
-  expect(mode.parentElement?.previousElementSibling).toBeNull()
-  expect(mode.parentElement?.nextElementSibling?.getAttribute('aria-label')).toBe('Add resources')
+  expect(mode.parentElement?.previousElementSibling?.getAttribute('aria-label')).toBe('Skills')
+  expect(mode.parentElement?.nextElementSibling).toBeNull()
   expect(mode.textContent).toBe('Build')
   expect(mode.querySelectorAll('svg')).toHaveLength(1)
   await act(async () =>
     mode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
   )
   const search = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
-    (item) => item.textContent === 'Search'
+    (item) => item.textContent === 'Ask'
   )!
   expect(search.querySelector('svg')).toBeNull()
   expect(document.querySelector('[role="tooltip"]')).toBeNull()
@@ -729,12 +729,12 @@ it.each(['skill', 'file'] as const)(
       mode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
     )
     const search = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
-      (item) => item.textContent === 'Search'
+      (item) => item.textContent === 'Ask'
     )!
     await act(async () => search.click())
     expect(onModeChange).not.toHaveBeenCalled()
     expect(info).toHaveBeenCalledWith(
-      'Remove resource and skill mentions and non-image attachments before switching to Search.'
+      'Remove resource and skill mentions and non-image attachments before switching to Ask.'
     )
     expect(
       container.querySelector<HTMLInputElement | HTMLTextAreaElement>('[aria-label="Ask Sim"]')!
@@ -786,8 +786,8 @@ describe('Search levels', () => {
     expect(
       row.querySelector<HTMLInputElement | HTMLTextAreaElement>('[aria-label="Ask Sim"]')
     ).not.toBeNull()
-    expect(mode.textContent).toBe('')
-    expect(mode.querySelectorAll('svg')).toHaveLength(2)
+    expect(mode.textContent).toBe('Ask')
+    expect(mode.querySelectorAll('svg')).toHaveLength(1)
     expect(mode.parentElement?.nextElementSibling).toBeNull()
     expect(row.querySelector('[aria-label="Search level"]')).toBeNull()
   })

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -43,7 +43,7 @@ interface ComposerProps {
   /** On the empty home the placeholder types itself and the field is taller; in a chat it is the plain footer input. */
   isInitialView: boolean
   isSending: boolean
-  onChange: (value: string) => void
+  onChange: (value: string, contexts?: ChatContext[]) => void
   restoredContexts?: ChatContext[]
   onSubmit: (text: string, contexts?: ChatContext[]) => void
   onStop: () => void
@@ -91,6 +91,7 @@ export function Composer({
     organizationId: organization.id,
     contextsEnabled: !imagesOnly,
     initialValue: value,
+    initialContexts: restoredContexts,
     onPasteFiles: files.processFiles,
   })
   const { textareaRef } = editor
@@ -105,13 +106,16 @@ export function Composer({
       if (value) textareaRef.current?.focus()
     }
   }, [value, textareaRef])
+  const lastContexts = useRef(editor.contexts)
   useEffect(() => {
     if (editorRef.current.getValue() !== editor.value) return
-    if (editor.value !== lastPublished.current) {
-      lastPublished.current = editor.value
-      onChange(editor.value)
+    const plainValue = editorRef.current.getPlainValue()
+    if (plainValue !== lastPublished.current || editor.contexts !== lastContexts.current) {
+      lastPublished.current = plainValue
+      lastContexts.current = editor.contexts
+      onChange(plainValue, editor.contexts.length ? editor.contexts : undefined)
     }
-  }, [editor.value, onChange])
+  }, [editor.value, editor.contexts, onChange])
   useEffect(() => {
     if (!restoredContexts) return
     // A queued skill may belong to a workspace whose picker has never opened here.
@@ -182,6 +186,25 @@ export function Composer({
 
   const leadingControls = (
     <>
+      {imagesOnly && !showModeSelector && (
+        <Search className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+      )}
+      {!imagesOnly && contextPicker('resources', Plus, 'Add resources')}
+
+      {!imagesOnly && (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Chip
+              shape='round'
+              leftIcon={Paperclip}
+              onClick={files.handleFileSelect}
+              aria-label='Attach file'
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>Attach file</Tooltip.Content>
+        </Tooltip.Root>
+      )}
+      {!imagesOnly && contextPicker('skills', Slash, 'Skills')}
       {showModeSelector && (
         <ConversationModeSelector
           value={requestMode}
@@ -195,7 +218,7 @@ export function Composer({
                       files.attachedFiles.some((file) => !isAssistantImageType(file.type)))
                   ) {
                     toast.info(
-                      'Remove resource and skill mentions and non-image attachments before switching to Search.'
+                      'Remove resource and skill mentions and non-image attachments before switching to Ask.'
                     )
                     return
                   }
@@ -205,25 +228,6 @@ export function Composer({
           }
         />
       )}
-      {imagesOnly && !showModeSelector && (
-        <Search className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-      )}
-      {!imagesOnly && contextPicker('resources', Plus, 'Add resources')}
-
-      {!imagesOnly && (
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Chip
-              shape='round'
-              leftIcon={Paperclip}
-              onClick={files.handleFileSelect}
-              aria-label='Attach file'
-            />
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>Attach file</Tooltip.Content>
-        </Tooltip.Root>
-      )}
-      {!imagesOnly && contextPicker('skills', Slash, 'Skills')}
     </>
   )
   const voiceControl = voice.isSupported && (