improvement: chat and terminal

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -91,14 +91,8 @@ export function MothershipView({
               previewMode={isActivePreviewable ? previewMode : undefined}
             />
           ) : (
-            <div className='flex h-full flex-col items-center justify-center gap-[4px] px-[24px]'>
-              <h2 className='font-semibold text-[20px] text-[var(--text-primary)]'>
-                No resources open
-              </h2>
-              <p className='text-[12px] text-[var(--text-body)]'>
-                Click the <span className='font-medium text-[var(--text-primary)]'>+</span> button
-                above to add a resource to this task
-              </p>
+            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+              Click "+" above to add a resource
             </div>
           )}
         </div>

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
 import { Skeleton } from '@/components/emcn'
@@ -272,9 +272,22 @@ export function Home({ chatId }: HomeProps = {}) {
     [addResource, handleResourceEvent]
   )
 
-  const scrollContainerRef = useAutoScroll(isSending)
+  const { ref: scrollContainerRef, scrollToBottom } = useAutoScroll(isSending)
 
   const hasMessages = messages.length > 0
+  const initialScrollDoneRef = useRef(false)
+
+  useLayoutEffect(() => {
+    if (!hasMessages) {
+      initialScrollDoneRef.current = false
+      return
+    }
+    if (initialScrollDoneRef.current) return
+    if (resources.length > 0 && isResourceCollapsed) return
+
+    initialScrollDoneRef.current = true
+    scrollToBottom()
+  }, [hasMessages, resources.length, isResourceCollapsed, scrollToBottom])
 
   useEffect(() => {
     if (hasMessages) return

apps/sim/app/workspace/[workspaceId]/home/hooks/use-auto-scroll.ts

@@ -12,6 +12,9 @@ const REATTACH_THRESHOLD = 5
  * on any upward user gesture (wheel, touch, scrollbar drag). Once detached,
  * the user must scroll back to within {@link REATTACH_THRESHOLD} of the
  * bottom to re-engage.
+ *
+ * Returns `ref` (callback ref for the scroll container) and `scrollToBottom`
+ * for imperative use after layout-changing events like panel expansion.
  */
 export function useAutoScroll(isStreaming: boolean) {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -110,5 +113,5 @@ export function useAutoScroll(isStreaming: boolean) {
     }
   }, [isStreaming, scrollToBottom])
 
-  return callbackRef
+  return { ref: callbackRef, scrollToBottom }
 }

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -16,21 +16,21 @@ export type SSEEventType =
   | 'chat_id'
   | 'title_updated'
   | 'content'
-  | 'reasoning'
-  | 'tool_call'
-  | 'tool_call_delta'
-  | 'tool_generating'
-  | 'tool_result'
-  | 'tool_error'
-  | 'resource_added'
-  | 'resource_deleted'
-  | 'subagent_start'
-  | 'subagent_end'
-  | 'structured_result'
-  | 'subagent_result'
-  | 'done'
-  | 'error'
-  | 'start'
+  | 'reasoning' // openai reasoning - render as thinking text
+  | 'tool_call' // tool call name
+  | 'tool_call_delta' // chunk of tool call
+  | 'tool_generating' // start a tool call
+  | 'tool_result' // tool call result
+  | 'tool_error' // tool call error
+  | 'resource_added' // add a resource to the chat
+  | 'resource_deleted' // delete a resource from the chat
+  | 'subagent_start' // start a subagent
+  | 'subagent_end' // end a subagent
+  | 'structured_result' // structured result from a tool call
+  | 'subagent_result' // result from a subagent
+  | 'done' // end of the chat
+  | 'error' // error in the chat
+  | 'start' // start of the chat
 
 /**
  * All tool names observed in the mothership SSE stream, grouped by phase.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx

@@ -27,14 +27,9 @@ import {
   PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
-import { FilterPopover } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover'
 import { OutputContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu'
 import { StructuredOutput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output'
 import { ToggleButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button'
-import type {
-  BlockInfo,
-  TerminalFilters,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import type { ConsoleEntry } from '@/stores/terminal'
@@ -100,16 +95,11 @@ export interface OutputPanelProps {
   handleCopy: () => void
   filteredEntries: ConsoleEntry[]
   handleExportConsole: (e: React.MouseEvent) => void
-  hasActiveFilters: boolean
   handleClearConsole: (e: React.MouseEvent) => void
   shouldShowCodeDisplay: boolean
   outputDataStringified: string
   outputData: unknown
   handleClearConsoleFromMenu: () => void
-  filters: TerminalFilters
-  toggleBlock: (blockId: string) => void
-  toggleStatus: (status: 'error' | 'info') => void
-  uniqueBlocks: BlockInfo[]
 }
 
 /**
@@ -133,16 +123,11 @@ export const OutputPanel = React.memo(function OutputPanel({
   handleCopy,
   filteredEntries,
   handleExportConsole,
-  hasActiveFilters,
   handleClearConsole,
   shouldShowCodeDisplay,
   outputDataStringified,
   outputData,
   handleClearConsoleFromMenu,
-  filters,
-  toggleBlock,
-  toggleStatus,
-  uniqueBlocks,
 }: OutputPanelProps) {
   // Access store-backed settings directly to reduce prop drilling
   const outputPanelWidth = useTerminalStore((state) => state.outputPanelWidth)
@@ -154,7 +139,6 @@ export const OutputPanel = React.memo(function OutputPanel({
   const setStructuredView = useTerminalStore((state) => state.setStructuredView)
 
   const outputContentRef = useRef<HTMLDivElement>(null)
-  const [filtersOpen, setFiltersOpen] = useState(false)
   const [outputOptionsOpen, setOutputOptionsOpen] = useState(false)
   const {
     isSearchActive: isOutputSearchActive,
@@ -339,19 +323,6 @@ export const OutputPanel = React.memo(function OutputPanel({
             )}
           </div>
           <div className='flex flex-shrink-0 items-center gap-[8px]'>
-            {/* Unified filter popover */}
-            {filteredEntries.length > 0 && (
-              <FilterPopover
-                open={filtersOpen}
-                onOpenChange={setFiltersOpen}
-                filters={filters}
-                toggleStatus={toggleStatus}
-                toggleBlock={toggleBlock}
-                uniqueBlocks={uniqueBlocks}
-                hasActiveFilters={hasActiveFilters}
-              />
-            )}
-
             {isOutputSearchActive ? (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

@@ -28,7 +28,6 @@ import { formatDuration } from '@/lib/core/utils/formatting'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import {
-  FilterPopover,
   LogRowContextMenu,
   OutputPanel,
   StatusDisplay,
@@ -603,7 +602,6 @@ export const Terminal = memo(function Terminal() {
   const [showCopySuccess, setShowCopySuccess] = useState(false)
   const [showInput, setShowInput] = useState(false)
   const [autoSelectEnabled, setAutoSelectEnabled] = useState(true)
-  const [filtersOpen, setFiltersOpen] = useState(false)
   const [mainOptionsOpen, setMainOptionsOpen] = useState(false)
 
   const [isTrainingEnvEnabled, setIsTrainingEnvEnabled] = useState(false)
@@ -676,23 +674,6 @@ export const Terminal = memo(function Terminal() {
     return result
   }, [executionGroups])
 
-  /**
-   * Get unique blocks (by ID) from all workflow entries
-   */
-  const uniqueBlocks = useMemo(() => {
-    const blocksMap = new Map<string, { blockId: string; blockName: string; blockType: string }>()
-    allWorkflowEntries.forEach((entry) => {
-      if (!blocksMap.has(entry.blockId)) {
-        blocksMap.set(entry.blockId, {
-          blockId: entry.blockId,
-          blockName: entry.blockName,
-          blockType: entry.blockType,
-        })
-      }
-    })
-    return Array.from(blocksMap.values()).sort((a, b) => a.blockName.localeCompare(b.blockName))
-  }, [allWorkflowEntries])
-
   /**
    * Check if input data exists for selected entry
    */
@@ -1289,22 +1270,9 @@ export const Terminal = memo(function Terminal() {
               {/* Left side - Logs label */}
               <span className={TERMINAL_CONFIG.HEADER_TEXT_CLASS}>Logs</span>
 
-              {/* Right side - Filters and icons */}
+              {/* Right side - Icons and options */}
               {!selectedEntry && (
                 <div className='flex items-center gap-[8px]'>
-                  {/* Unified filter popover */}
-                  {allWorkflowEntries.length > 0 && (
-                    <FilterPopover
-                      open={filtersOpen}
-                      onOpenChange={setFiltersOpen}
-                      filters={filters}
-                      toggleStatus={toggleStatus}
-                      toggleBlock={toggleBlock}
-                      uniqueBlocks={uniqueBlocks}
-                      hasActiveFilters={hasActiveFilters}
-                    />
-                  )}
-
                   {/* Sort toggle */}
                   {allWorkflowEntries.length > 0 && (
                     <Tooltip.Root>
@@ -1497,16 +1465,11 @@ export const Terminal = memo(function Terminal() {
               handleCopy={handleCopy}
               filteredEntries={filteredEntries}
               handleExportConsole={handleExportConsole}
-              hasActiveFilters={hasActiveFilters}
               handleClearConsole={handleClearConsole}
               shouldShowCodeDisplay={shouldShowCodeDisplay}
               outputDataStringified={outputDataStringified}
               outputData={outputData}
               handleClearConsoleFromMenu={handleClearConsoleFromMenu}
-              filters={filters}
-              toggleBlock={toggleBlock}
-              toggleStatus={toggleStatus}
-              uniqueBlocks={uniqueBlocks}
             />
           )}
         </div>