From 1235b226d38dd453fd7c15719642688bf07283bf Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Thu, 16 Apr 2026 13:35:29 -0700
Subject: [PATCH 1/4] improvement(ui): remove React anti-patterns, fix CSP
 violations

---
 .../commands/you-might-not-need-a-callback.md |  33 ++-
 .../message-actions/message-actions.tsx       |  44 ++--
 .../resource-header/resource-header.tsx       |   8 +-
 .../resource-tabs/resource-tabs.tsx           | 206 ++++++++++++------
 .../mothership-view/mothership-view.tsx       |  16 +-
 .../user-input/components/drop-overlay.tsx    |   4 +-
 .../app/workspace/[workspaceId]/logs/logs.tsx |   4 +-
 apps/sim/lib/core/security/csp.ts             |   5 +
 8 files changed, 205 insertions(+), 115 deletions(-)

diff --git a/.claude/commands/you-might-not-need-a-callback.md b/.claude/commands/you-might-not-need-a-callback.md
index d2251024004..c25d4c32eab 100644
--- a/.claude/commands/you-might-not-need-a-callback.md
+++ b/.claude/commands/you-might-not-need-a-callback.md
@@ -16,17 +16,34 @@ User arguments: $ARGUMENTS
 Read before analyzing:
 1. https://react.dev/reference/react/useCallback — official docs on when useCallback is actually needed
 
+## The one rule that matters
+
+`useCallback` is only useful when **something observes the reference**. Ask: does anything care if this function gets a new identity on re-render?
+
+Observers that care about reference stability:
+- A `useEffect` that lists the function in its deps array
+- A `useMemo` that lists the function in its deps array
+- Another `useCallback` that lists the function in its deps array
+- A child component wrapped in `React.memo` that receives the function as a prop
+
+If none of those apply — if the function is only called inline, or passed to a non-memoized child, or assigned to a native element event — the reference is unobserved and `useCallback` adds overhead with zero benefit.
+
 ## Anti-patterns to detect
 
-1. **useCallback on functions not passed as props or deps**: No benefit if only called within the same component.
-2. **useCallback with deps that change every render**: Memoization is wasted.
-3. **useCallback on handlers passed to native elements**: `<button onClick={fn}>` doesn't benefit from stable references.
-4. **useCallback wrapping functions that return new objects/arrays**: Memoization at the wrong level.
-5. **useCallback with empty deps when deps are needed**: Stale closures.
-6. **Pairing useCallback + React.memo unnecessarily**: Only optimize when you've measured a problem.
-7. **useCallback in hooks that don't need stable references**: Not every hook return needs memoization.
+1. **No observer tracks the reference**: The function is only called inline in the same component, or passed to a non-memoized child, or used as a native element handler (`<button onClick={fn}>`). Nothing re-runs or bails out based on reference identity. Remove `useCallback`.
+2. **useCallback with deps that change every render**: If a dep is a plain object/array created inline, or state that changes on every interaction, memoization buys nothing — the function gets a new identity anyway.
+3. **useCallback on handlers passed only to native elements**: `<button onClick={fn}>` — React never does reference equality on native element props. No benefit.
+4. **useCallback wrapping functions that return new objects/arrays**: Stable function identity, unstable return value — memoization is at the wrong level. Use `useMemo` on the return value instead, or restructure.
+5. **useCallback with empty deps when deps are needed**: Stale closure — reads initial values forever. This is a correctness bug, not just a performance issue.
+6. **Pairing useCallback + React.memo on trivially cheap renders**: If the child renders in < 1ms and re-renders rarely, the memo infrastructure costs more than it saves.
+
+## Patterns that ARE correct — do not flag
 
-Note: This codebase uses a ref pattern for stable callbacks (`useRef` + empty deps). That pattern is correct — don't flag it.
+- `useCallback` whose result is in a `useEffect` dep array — prevents the effect from re-running on every render
+- `useCallback` whose result is in a `useMemo` dep array — prevents the memo from recomputing on every render
+- `useCallback` whose result is a dep of another `useCallback` — stabilises a callback chain
+- `useCallback` passed to a `React.memo`-wrapped child — the whole point of the pattern
+- This codebase's ref pattern: `useRef` + callback with empty deps that reads the ref inside — correct, do not flag
 
 ## Steps
 
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 67c7dd92c8f..1a6a83fe85f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import {
   Button,
   Check,
@@ -50,7 +50,12 @@ interface MessageActionsProps {
   requestId?: string
 }
 
-export function MessageActions({ content, chatId, userQuery, requestId }: MessageActionsProps) {
+export const MessageActions = memo(function MessageActions({
+  content,
+  chatId,
+  userQuery,
+  requestId,
+}: MessageActionsProps) {
   const [copied, setCopied] = useState(false)
   const [copiedRequestId, setCopiedRequestId] = useState(false)
   const [pendingFeedback, setPendingFeedback] = useState<'up' | 'down' | null>(null)
@@ -70,7 +75,7 @@ export function MessageActions({ content, chatId, userQuery, requestId }: Messag
     }
   }, [])
 
-  const copyToClipboard = useCallback(async () => {
+  const copyToClipboard = async () => {
     if (!content) return
     const text = toPlainText(content)
     if (!text) return
@@ -84,9 +89,9 @@ export function MessageActions({ content, chatId, userQuery, requestId }: Messag
     } catch {
       /* clipboard unavailable */
     }
-  }, [content])
+  }
 
-  const copyRequestId = useCallback(async () => {
+  const copyRequestId = async () => {
     if (!requestId) return
     try {
       await navigator.clipboard.writeText(requestId)
@@ -98,20 +103,17 @@ export function MessageActions({ content, chatId, userQuery, requestId }: Messag
     } catch {
       /* clipboard unavailable */
     }
-  }, [requestId])
+  }
 
-  const handleFeedbackClick = useCallback(
-    (type: 'up' | 'down') => {
-      if (chatId && userQuery) {
-        setPendingFeedback(type)
-        setFeedbackText('')
-        setCopiedRequestId(false)
-      }
-    },
-    [chatId, userQuery]
-  )
+  const handleFeedbackClick = (type: 'up' | 'down') => {
+    if (chatId && userQuery) {
+      setPendingFeedback(type)
+      setFeedbackText('')
+      setCopiedRequestId(false)
+    }
+  }
 
-  const handleSubmitFeedback = useCallback(() => {
+  const handleSubmitFeedback = () => {
     if (!pendingFeedback || !chatId || !userQuery) return
     const text = feedbackText.trim()
     if (!text) {
@@ -128,15 +130,15 @@ export function MessageActions({ content, chatId, userQuery, requestId }: Messag
     })
     setPendingFeedback(null)
     setFeedbackText('')
-  }, [pendingFeedback, chatId, userQuery, content, feedbackText])
+  }
 
-  const handleModalClose = useCallback((open: boolean) => {
+  const handleModalClose = (open: boolean) => {
     if (!open) {
       setPendingFeedback(null)
       setFeedbackText('')
       setCopiedRequestId(false)
     }
-  }, [])
+  }
 
   if (!content) return null
 
@@ -224,4 +226,4 @@ export function MessageActions({ content, chatId, userQuery, requestId }: Messag
       </Modal>
     </>
   )
-}
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 68c245b1dd7..6b30586dd6f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -40,6 +40,7 @@ export interface HeaderAction {
   icon?: React.ElementType
   onClick: () => void
   disabled?: boolean
+  active?: boolean
 }
 
 export interface CreateAction {
@@ -103,7 +104,12 @@ export const ResourceHeader = memo(function ResourceHeader({
                 onClick={action.onClick}
                 disabled={action.disabled}
                 variant='subtle'
-                className='px-2 py-1 text-caption'
+                className={cn(
+                  'px-2 py-1 text-caption',
+                  action.active === true &&
+                    'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-active)]',
+                  action.active === false && 'hover-hover:bg-[var(--surface-hover)]'
+                )}
               >
                 {ActionIcon && (
                   <ActionIcon
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index d109db1fa61..58811e66adb 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -1,6 +1,9 @@
 import {
   type ComponentProps,
+  type Dispatch,
+  memo,
   type ReactNode,
+  type SetStateAction,
   useCallback,
   useEffect,
   useMemo,
@@ -134,6 +137,116 @@ function useResourceNameLookup(workspaceId: string): Map<string, string> {
   }, [workflows, tables, files, knowledgeBases, folders])
 }
 
+interface ResourceTabItemProps {
+  resource: MothershipResource
+  idx: number
+  isActive: boolean
+  isHovered: boolean
+  isDragging: boolean
+  isSelected: boolean
+  showGapBefore: boolean
+  showGapAfter: boolean
+  displayName: string
+  chatId?: string
+  onDragStart: (e: React.DragEvent, idx: number) => void
+  onDragOver: (e: React.DragEvent, idx: number) => void
+  onDragLeave: () => void
+  onDragEnd: () => void
+  onTabClick: (e: React.MouseEvent, idx: number) => void
+  setHoveredTabId: Dispatch<SetStateAction<string | null>>
+  onRemove: (e: React.MouseEvent, resource: MothershipResource) => void
+}
+
+const ResourceTabItem = memo(function ResourceTabItem({
+  resource,
+  idx,
+  isActive,
+  isHovered,
+  isDragging,
+  isSelected,
+  showGapBefore,
+  showGapAfter,
+  displayName,
+  chatId,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDragEnd,
+  onTabClick,
+  setHoveredTabId,
+  onRemove,
+}: ResourceTabItemProps) {
+  const config = getResourceConfig(resource.type)
+  return (
+    <div className='relative flex shrink-0 items-center'>
+      {showGapBefore && (
+        <div className='-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-0 z-10 h-[16px] w-[2px] rounded-full bg-[var(--text-subtle)]' />
+      )}
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='subtle'
+            draggable
+            data-resource-tab-id={resource.id}
+            onDragStart={(e) => onDragStart(e, idx)}
+            onDragOver={(e) => onDragOver(e, idx)}
+            onDragLeave={onDragLeave}
+            onDragEnd={onDragEnd}
+            onMouseDown={(e) => {
+              if (e.button === 1) {
+                e.preventDefault()
+                if (chatId) onRemove(e, resource)
+              }
+            }}
+            onClick={(e) => onTabClick(e, idx)}
+            onMouseEnter={() => setHoveredTabId(resource.id)}
+            onMouseLeave={() => setHoveredTabId(null)}
+            className={cn(
+              'group relative shrink-0 bg-transparent px-2 py-1 pr-[22px] text-caption transition-opacity duration-150',
+              isActive && 'bg-[var(--surface-4)]',
+              isSelected && !isActive && 'bg-[var(--surface-3)]',
+              isDragging && 'opacity-30'
+            )}
+          >
+            {config.renderTabIcon(resource, 'mr-1.5 h-[14px] w-[14px]')}
+            {displayName}
+            {(isHovered || isActive) && chatId && (
+              <span
+                role='button'
+                tabIndex={-1}
+                onClick={(e) => onRemove(e, resource)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') onRemove(e as unknown as React.MouseEvent, resource)
+                }}
+                className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[1px] hover-hover:bg-[var(--surface-5)]'
+                aria-label={`Close ${displayName}`}
+              >
+                <svg
+                  className='h-[10px] w-[10px] text-[var(--text-icon)]'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth='2.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                >
+                  <path d='M18 6 6 18M6 6l12 12' />
+                </svg>
+              </span>
+            )}
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <p>{displayName}</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+      {showGapAfter && (
+        <div className='-translate-y-1/2 pointer-events-none absolute top-1/2 right-0 z-10 h-[16px] w-[2px] translate-x-1/2 rounded-full bg-[var(--text-subtle)]' />
+      )}
+    </div>
+  )
+})
+
 interface ResourceTabsProps {
   workspaceId: string
   chatId?: string
@@ -221,10 +334,7 @@ export function ResourceTabs({
     anchorIdRef.current = null
   }
 
-  const existingKeys = useMemo(
-    () => new Set(resources.map((r) => `${r.type}:${r.id}`)),
-    [resources]
-  )
+  const existingKeys = new Set(resources.map((r) => `${r.type}:${r.id}`))
 
   const handleAdd = useCallback(
     (resource: MothershipResource) => {
@@ -476,7 +586,6 @@ export function ResourceTabs({
           onDrop={handleDrop}
         >
           {resources.map((resource, idx) => {
-            const config = getResourceConfig(resource.type)
             const displayName = nameLookup.get(`${resource.type}:${resource.id}`) ?? resource.title
             const isActive = activeId === resource.id
             const isHovered = hoveredTabId === resource.id
@@ -494,73 +603,26 @@ export function ResourceTabs({
               draggedIdx !== idx
 
             return (
-              <div key={resource.id} className='relative flex shrink-0 items-center'>
-                {showGapBefore && (
-                  <div className='-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-0 z-10 h-[16px] w-[2px] rounded-full bg-[var(--text-subtle)]' />
-                )}
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      variant='subtle'
-                      draggable
-                      data-resource-tab-id={resource.id}
-                      onDragStart={(e) => handleDragStart(e, idx)}
-                      onDragOver={(e) => handleDragOver(e, idx)}
-                      onDragLeave={handleDragLeave}
-                      onDragEnd={handleDragEnd}
-                      onMouseDown={(e) => {
-                        if (e.button === 1) {
-                          e.preventDefault()
-                          if (chatId) handleRemove(e, resource)
-                        }
-                      }}
-                      onClick={(e) => handleTabClick(e, idx)}
-                      onMouseEnter={() => setHoveredTabId(resource.id)}
-                      onMouseLeave={() => setHoveredTabId(null)}
-                      className={cn(
-                        'group relative shrink-0 bg-transparent px-2 py-1 pr-[22px] text-caption transition-opacity duration-150',
-                        isActive && 'bg-[var(--surface-4)]',
-                        isSelected && !isActive && 'bg-[var(--surface-3)]',
-                        isDragging && 'opacity-30'
-                      )}
-                    >
-                      {config.renderTabIcon(resource, 'mr-1.5 h-[14px] w-[14px]')}
-                      {displayName}
-                      {(isHovered || isActive) && chatId && (
-                        <span
-                          role='button'
-                          tabIndex={-1}
-                          onClick={(e) => handleRemove(e, resource)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter')
-                              handleRemove(e as unknown as React.MouseEvent, resource)
-                          }}
-                          className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[1px] hover-hover:bg-[var(--surface-5)]'
-                          aria-label={`Close ${displayName}`}
-                        >
-                          <svg
-                            className='h-[10px] w-[10px] text-[var(--text-icon)]'
-                            viewBox='0 0 24 24'
-                            fill='none'
-                            stroke='currentColor'
-                            strokeWidth='2.5'
-                            strokeLinecap='round'
-                            strokeLinejoin='round'
-                          >
-                            <path d='M18 6 6 18M6 6l12 12' />
-                          </svg>
-                        </span>
-                      )}
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='bottom'>
-                    <p>{displayName}</p>
-                  </Tooltip.Content>
-                </Tooltip.Root>
-                {showGapAfter && (
-                  <div className='-translate-y-1/2 pointer-events-none absolute top-1/2 right-0 z-10 h-[16px] w-[2px] translate-x-1/2 rounded-full bg-[var(--text-subtle)]' />
-                )}
-              </div>
+              <ResourceTabItem
+                key={resource.id}
+                resource={resource}
+                idx={idx}
+                isActive={isActive}
+                isHovered={isHovered}
+                isDragging={isDragging}
+                isSelected={isSelected}
+                showGapBefore={showGapBefore}
+                showGapAfter={showGapAfter}
+                displayName={displayName}
+                chatId={chatId}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDragEnd={handleDragEnd}
+                onTabClick={handleTabClick}
+                setHoveredTabId={setHoveredTabId}
+                onRemove={handleRemove}
+              />
             )
           })}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index ccdebb09b68..fcfb08ff948 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, memo, useCallback, useEffect, useState } from 'react'
+import { forwardRef, memo, useState } from 'react'
 import type { FilePreviewSession } from '@/lib/copilot/request/session'
 import { cn } from '@/lib/core/utils/cn'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
@@ -80,15 +80,13 @@ export const MothershipView = memo(
         : undefined
 
     const [previewMode, setPreviewMode] = useState<PreviewMode>('preview')
-    const [prevActiveId, setPrevActiveId] = useState<string | null | undefined>(active?.id)
-    const handleCyclePreview = useCallback(() => setPreviewMode((m) => PREVIEW_CYCLE[m]), [])
+    const handleCyclePreview = () => setPreviewMode((m) => PREVIEW_CYCLE[m])
 
-    useEffect(() => {
-      if (active?.id !== prevActiveId) {
-        setPrevActiveId(active?.id)
-        setPreviewMode('preview')
-      }
-    }, [active?.id, prevActiveId])
+    const [prevActiveId, setPrevActiveId] = useState(active?.id)
+    if (prevActiveId !== active?.id) {
+      setPrevActiveId(active?.id)
+      setPreviewMode('preview')
+    }
 
     const isActivePreviewable =
       canEdit &&
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay.tsx
index e786c2d1892..1a5fa7fadbc 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import { memo } from 'react'
 import {
   AudioIcon,
   CsvIcon,
@@ -25,7 +25,7 @@ const DROP_OVERLAY_ICONS = [
   VideoIcon,
 ] as const
 
-export const DropOverlay = React.memo(function DropOverlay() {
+export const DropOverlay = memo(function DropOverlay() {
   return (
     <div className='pointer-events-none absolute inset-[6px] z-10 flex items-center justify-center rounded-[14px] border-[1.5px] border-[var(--border-1)] border-dashed bg-[var(--white)] dark:bg-[var(--surface-4)]'>
       <div className='flex flex-col items-center gap-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index 8a69912ade5..f6dee8e5122 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -1114,12 +1114,12 @@ export default function Logs() {
       {
         label: 'Logs',
         onClick: () => setViewMode('logs'),
-        disabled: !isDashboardView,
+        active: !isDashboardView,
       },
       {
         label: 'Dashboard',
         onClick: () => setViewMode('dashboard'),
-        disabled: isDashboardView,
+        active: isDashboardView,
       },
     ],
     [
diff --git a/apps/sim/lib/core/security/csp.ts b/apps/sim/lib/core/security/csp.ts
index d2905f0e301..9420878e6d5 100644
--- a/apps/sim/lib/core/security/csp.ts
+++ b/apps/sim/lib/core/security/csp.ts
@@ -22,6 +22,7 @@ export interface CSPDirectives {
   'media-src'?: string[]
   'font-src'?: string[]
   'connect-src'?: string[]
+  'worker-src'?: string[]
   'frame-src'?: string[]
   'frame-ancestors'?: string[]
   'form-action'?: string[]
@@ -83,6 +84,8 @@ const STATIC_CONNECT_SRC = [
   'https://api.github.com',
   'https://github.com/*',
   'https://challenges.cloudflare.com',
+  ...(isReactGrabEnabled ? ['https://www.react-grab.com'] : []),
+  ...(isDev ? ['ws://localhost:4722'] : []),
   ...(isHosted
     ? [
         'https://www.googletagmanager.com',
@@ -90,6 +93,7 @@ const STATIC_CONNECT_SRC = [
         'https://*.analytics.google.com',
         'https://analytics.google.com',
         'https://www.google.com',
+        'https://analytics.ahrefs.com',
       ]
     : []),
 ] as const
@@ -146,6 +150,7 @@ export const buildTimeCSPDirectives: CSPDirectives = {
   ],
 
   'media-src': ["'self'", 'blob:'],
+  'worker-src': ["'self'", 'blob:'],
   'font-src': ["'self'", 'https://fonts.gstatic.com'],
 
   'connect-src': [

From 54e4c6ff5b35cd926ee564cebf855a49c6464be0 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Thu, 16 Apr 2026 13:45:09 -0700
Subject: [PATCH 2/4] =?UTF-8?q?fix(ui):=20restore=20useMemo=20on=20existin?=
 =?UTF-8?q?gKeys=20=E2=80=94=20it=20is=20observed=20by=20useAvailableResou?=
 =?UTF-8?q?rces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/resource-tabs/resource-tabs.tsx               | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 58811e66adb..2fbd230a5f5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -334,7 +334,10 @@ export function ResourceTabs({
     anchorIdRef.current = null
   }
 
-  const existingKeys = new Set(resources.map((r) => `${r.type}:${r.id}`))
+  const existingKeys = useMemo(
+    () => new Set(resources.map((r) => `${r.type}:${r.id}`)),
+    [resources]
+  )
 
   const handleAdd = useCallback(
     (resource: MothershipResource) => {

From dcfc5f677a06aa2fd18497eb0b875a59ecc10485 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Thu, 16 Apr 2026 13:48:05 -0700
Subject: [PATCH 3/4] improvement(ui): add RefreshCw icon, update Bell SVG,
 active state styling for header actions

---
 .../resource-header/resource-header.tsx       |  1 +
 .../app/workspace/[workspaceId]/logs/logs.tsx | 10 +++---
 apps/sim/components/emcn/icons/bell.tsx       | 10 +++---
 apps/sim/components/emcn/icons/index.ts       |  1 +
 apps/sim/components/emcn/icons/refresh-cw.tsx | 31 +++++++++++++++++++
 5 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 apps/sim/components/emcn/icons/refresh-cw.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 6b30586dd6f..68baec3f2b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -106,6 +106,7 @@ export const ResourceHeader = memo(function ResourceHeader({
                 variant='subtle'
                 className={cn(
                   'px-2 py-1 text-caption',
+                  action.active !== undefined && 'rounded-lg',
                   action.active === true &&
                     'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-active)]',
                   action.active === false && 'hover-hover:bg-[var(--surface-hover)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index f6dee8e5122..90c24c5ee59 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
   Library,
-  Loader,
+  RefreshCw,
 } from '@/components/emcn'
 import { DatePicker } from '@/components/emcn/components/date-picker/date-picker'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
@@ -1086,9 +1086,9 @@ export default function Logs() {
   )
 
   const refreshIcon = useMemo(() => {
-    if (!isVisuallyRefreshing) return Loader
-    const Spinning = (props: React.SVGProps<SVGSVGElement>) => <Loader {...props} animate />
-    Spinning.displayName = 'SpinningLoader'
+    if (!isVisuallyRefreshing) return RefreshCw
+    const Spinning = (props: React.SVGProps<SVGSVGElement>) => <RefreshCw {...props} animate />
+    Spinning.displayName = 'SpinningRefresh'
     return Spinning
   }, [isVisuallyRefreshing])
 
@@ -1106,7 +1106,7 @@ export default function Logs() {
         onClick: handleOpenNotificationSettings,
       },
       {
-        label: '',
+        label: 'Refresh',
         icon: refreshIcon,
         onClick: handleRefresh,
         disabled: isVisuallyRefreshing,
diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx
index ebbf72ad849..58b82d8babf 100644
--- a/apps/sim/components/emcn/icons/bell.tsx
+++ b/apps/sim/components/emcn/icons/bell.tsx
@@ -7,20 +7,20 @@ import type { SVGProps } from 'react'
 export function Bell(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
+      xmlns='http://www.w3.org/2000/svg'
       width='24'
       height='24'
-      viewBox='-1 -2 24 24'
+      viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='2'
       strokeLinecap='round'
       strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M15.25 6.75C15.25 5.35761 14.6969 4.02226 13.7123 3.03769C12.7277 2.05312 11.3924 1.5 10 1.5C8.60761 1.5 7.27226 2.05312 6.28769 3.03769C5.30312 4.02226 4.75 5.35761 4.75 6.75C4.75 12.75 2.25 14.5 2.25 14.5H17.75C17.75 14.5 15.25 12.75 15.25 6.75Z' />
-      <path d='M11.4425 17.75C11.2655 18.0547 11.0133 18.3088 10.7101 18.4882C10.4068 18.6676 10.0627 18.7662 9.71 18.7749C9.35735 18.7836 9.00888 18.7022 8.69728 18.5381C8.38568 18.374 8.12138 18.1327 7.92999 17.8375' />
+      <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
+      <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 272e2cb897d..5baf3dd57e2 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -60,6 +60,7 @@ export { PillsRing } from './pills-ring'
 export { Play, PlayOutline } from './play'
 export { Plus } from './plus'
 export { Redo } from './redo'
+export { RefreshCw } from './refresh-cw'
 export { Rocket } from './rocket'
 export { Rows3 } from './rows3'
 export { Search } from './search'
diff --git a/apps/sim/components/emcn/icons/refresh-cw.tsx b/apps/sim/components/emcn/icons/refresh-cw.tsx
new file mode 100644
index 00000000000..97fc8173f8c
--- /dev/null
+++ b/apps/sim/components/emcn/icons/refresh-cw.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react'
+import styles from '@/components/emcn/icons/animate/loader.module.css'
+import { cn } from '@/lib/core/utils/cn'
+
+export interface RefreshCwProps extends SVGProps<SVGSVGElement> {
+  animate?: boolean
+}
+
+export function RefreshCw({ animate = false, className, ...props }: RefreshCwProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className={cn(animate && styles['animated-loader-svg'], className)}
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' />
+      <path d='M21 3v5h-5' />
+      <path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' />
+      <path d='M8 16H3v5' />
+    </svg>
+  )
+}

From 49d9af2663119d03e29ee3f777763e1bee64beca Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Thu, 16 Apr 2026 13:58:01 -0700
Subject: [PATCH 4/4] minor UI improvements

---
 .../workspace/[workspaceId]/components/inline-rename-input.tsx | 3 ++-
 .../components/resource-options-bar/resource-options-bar.tsx   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
index 99cae0891b2..f35aa7d33bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
@@ -25,6 +25,7 @@ export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: Inlin
       ref={inputRef}
       type='text'
       value={value}
+      size={Math.max(value.length + 2, 5)}
       onChange={(e) => onChange(e.target.value)}
       onKeyDown={(e) => {
         if (e.key === 'Enter') onSubmit()
@@ -32,7 +33,7 @@ export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: Inlin
       }}
       onBlur={onSubmit}
       onClick={(e) => e.stopPropagation()}
-      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0'
+      className='min-w-0 border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
index d8e09d813c7..91e8eaaee4e 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
@@ -222,7 +222,7 @@ const SortDropdown = memo(function SortDropdown({ config }: { config: SortConfig
           Sort
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
+      <DropdownMenuContent align='start'>
         {options.map((option) => {
           const isActive = active?.column === option.id
           const Icon = option.icon