improvement(nuqs): adopt limitUrlUpdates debounce + add eq to array parser

Replace the hand-rolled debounced-search pattern (local useState mirror +
useDebounce + URL write-back effect + ref-guarded reconcile effect) with
nuqs's built-in limitUrlUpdates: debounce() across logs, integrations,
tables, and recently-deleted. The input is now controlled directly by the
instant nuqs value; only the URL write is debounced. Query keys / expensive
filters still derive a debounced value off the instant value; cheap in-memory
filters read it directly. admin (commit-on-submit) intentionally left alone.

Add an eq to parseAsTriggers (TriggerType[]) so clearOnDefault can detect the
empty-array default and strip it from the URL, per nuqs createParser docs.

Update .claude/rules/sim-url-state.md to prescribe the debounce pattern and the
createParser eq requirement for array/object/Date values.

Author: waleedlatif1

.claude/rules/sim-url-state.md

@@ -55,7 +55,8 @@ Conventions:
 - Navigations that belong in browser history (changing folder, opening a deep-linked entity): `{ history: 'push' }`.
 - `shallow: false` **only** when a Server Component / loader must re-read the param.
 - Short, stable, **kebab-case** URL keys. Renaming a key is a breaking change to shared links — treat it as one.
-- For an opaque/literal value use `parseAsStringLiteral([...] as const)`; for a custom wire format use `createParser`.
+- For an opaque/literal value use `parseAsStringLiteral([...] as const)`; for a custom wire format use [`createParser`](https://nuqs.dev/docs/parsers).
+- A `createParser` for a value **not** comparable with `===` (arrays, objects, `Date`) **must** define an `eq` — `clearOnDefault` uses it to detect the default, so without it an empty-array/object default never strips from the URL. Built-in `parseAsArrayOf(...)` already ships its own `eq`; only string/number/boolean custom parsers can omit it. Example (array): `eq: (a, b) => a.length === b.length && a.every((v, i) => v === b[i])`.
 
 ### Example — grouped filters (single source of truth)
 
@@ -126,7 +127,26 @@ If a client param must be re-read server-side after a change, set `shallow: fals
 
 ## Debounced text inputs
 
-Keep local `useState` for snappy typing; push to the URL debounced, and reconcile from the URL with a ref-guarded effect so external URL changes (back/forward, deep link) flow back into the input without clobbering in-flight keystrokes. This is the established logs pattern — follow it rather than writing every keystroke to the URL.
+Use nuqs's built-in [`limitUrlUpdates: debounce(ms)`](https://nuqs.dev/docs/options) — never hand-roll a local `useState` mirror + `useDebounce` + a URL write-back effect + a ref-guarded URL→local reconcile effect. The hook's returned value updates instantly (so the input is controlled directly by the nuqs value and stays snappy); only the *URL write* is debounced. Back/forward and deep links flow back natively because the input reads the nuqs value — no reconcile effect needed.
+
+- **Standalone single search param** (`useQueryState`): put `limitUrlUpdates: debounce(300)` in the param's options.
+- **Search inside a grouped `useQueryStates`**: keep the group's immediate writes for the discrete filters; pass the option **per call** only on the search setter, never on the whole group:
+
+  ```typescript
+  import { debounce } from 'nuqs'
+
+  const setSearch = useCallback(
+    (value: string) => {
+      const next = value.length > 0 ? value : null
+      // Immediate update when clearing so the param drops out without lingering.
+      setFilters({ search: next }, next === null ? undefined : { limitUrlUpdates: debounce(300) })
+    },
+    [setFilters]
+  )
+  ```
+
+- **Keep fetches/filtering debounced.** Where the search value feeds a React Query key or an expensive in-memory filter, derive a debounced value off the instant nuqs value (`const debounced = useDebounce(urlSearch, 300)`) and feed *that* to the query — the instant value is only for the input box. Cheap in-memory filtering over a small static list may read the instant value directly.
+- Preserve `.trim()` handling, `clearOnDefault` (empty clears the param), the existing default, and `history: 'replace'`. Import `debounce` from `nuqs` (client) — not `nuqs/server`. See logs (`use-log-filters.ts` grouped, query stays debounced), integrations/recently-deleted (cheap in-memory filter, instant value), and tables (filter stays debounced).
 
 ## Sort convention (`sort` + `dir`)
 

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

@@ -1,9 +1,9 @@
 'use client'
 
-import { type ComponentType, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { type ComponentType, useCallback, useMemo } from 'react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
-import { useQueryStates } from 'nuqs'
+import { debounce, useQueryStates } from 'nuqs'
 import {
   ArrowRight,
   ChevronDown,
@@ -34,7 +34,9 @@ import {
   integrationsUrlKeys,
 } from '@/app/workspace/[workspaceId]/integrations/search-params'
 import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
-import { useDebounce } from '@/hooks/use-debounce'
+
+/** Debounce window for `search` URL writes; the input itself stays instant. */
+const SEARCH_DEBOUNCE_MS = 300 as const
 
 /** Slugs surfaced in the pinned Featured section, in display order. */
 const FEATURED_SLUGS = ['slack', 'gmail', 'jira', 'github', 'google-sheets', 'hubspot'] as const
@@ -139,8 +141,19 @@ export function Integrations() {
   const [{ category: selectedCategory, search: urlSearchTerm }, setIntegrationFilters] =
     useQueryStates(integrationsParsers, integrationsUrlKeys)
 
-  const [searchTerm, setSearchTerm] = useState(urlSearchTerm)
-  const debouncedSearchTerm = useDebounce(searchTerm, 300)
+  // The input is controlled directly by the instant nuqs value; only the URL
+  // write is debounced. Filtering below is cheap in-memory over a static list,
+  // so it reads the instant value too.
+  const setSearchTerm = useCallback(
+    (value: string) => {
+      const next = value.length > 0 ? value : null
+      setIntegrationFilters(
+        { search: next },
+        next === null ? undefined : { limitUrlUpdates: debounce(SEARCH_DEBOUNCE_MS) }
+      )
+    },
+    [setIntegrationFilters]
+  )
 
   const { data: credentials = [], isPending: credentialsLoading } = useWorkspaceCredentials({
     workspaceId,
@@ -173,17 +186,6 @@ export function Integrations() {
     })
   }, [oauthCredentials])
 
-  useEffect(() => {
-    setIntegrationFilters({ search: debouncedSearchTerm.length > 0 ? debouncedSearchTerm : null })
-  }, [debouncedSearchTerm, setIntegrationFilters])
-
-  const lastSyncedUrlSearchRef = useRef(urlSearchTerm)
-  useEffect(() => {
-    if (urlSearchTerm === lastSyncedUrlSearchRef.current) return
-    lastSyncedUrlSearchRef.current = urlSearchTerm
-    setSearchTerm((current) => (current === urlSearchTerm ? current : urlSearchTerm))
-  }, [urlSearchTerm])
-
   const setSelectedCategory = useCallback(
     (category: string) => {
       setIntegrationFilters({ category })
@@ -206,7 +208,7 @@ export function Integrations() {
     // Connected-only view: integration sections are suppressed entirely.
     if (isConnectedSelected) return []
 
-    const normalizedSearch = searchTerm.trim().toLowerCase()
+    const normalizedSearch = urlSearchTerm.trim().toLowerCase()
     const matchesSearch = (integration: Integration) =>
       !normalizedSearch ||
       integration.name.toLowerCase().includes(normalizedSearch) ||
@@ -242,14 +244,20 @@ export function Integrations() {
       ...featuredSection,
       ...(integrations.length > 0 ? [{ label: selectedCategory, integrations }] : []),
     ]
-  }, [isAllCategorySelected, isConnectedSelected, isFeaturedSelected, searchTerm, selectedCategory])
+  }, [
+    isAllCategorySelected,
+    isConnectedSelected,
+    isFeaturedSelected,
+    urlSearchTerm,
+    selectedCategory,
+  ])
 
   const visibleConnectedItems = useMemo(() => {
     // Featured-only view: Connected is suppressed (mirror behavior of the
     // Featured-only branch above, which renders only the Featured section).
     if (isFeaturedSelected) return []
 
-    const normalizedSearch = searchTerm.trim().toLowerCase()
+    const normalizedSearch = urlSearchTerm.trim().toLowerCase()
     return connectedItems.filter((item) => {
       const matchesCategory =
         isAllCategorySelected || isConnectedSelected || item.integrationType === selectedCategory
@@ -266,12 +274,12 @@ export function Integrations() {
     isAllCategorySelected,
     isConnectedSelected,
     isFeaturedSelected,
-    searchTerm,
+    urlSearchTerm,
     selectedCategory,
   ])
 
   const showNoResults =
-    Boolean(searchTerm.trim() || !isAllCategorySelected) &&
+    Boolean(urlSearchTerm.trim() || !isAllCategorySelected) &&
     filteredCategorySections.length === 0 &&
     visibleConnectedItems.length === 0
 
@@ -286,7 +294,7 @@ export function Integrations() {
               icon={Search}
               className='min-w-0 flex-1'
               placeholder='Search integrations...'
-              value={searchTerm}
+              value={urlSearchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               disabled={credentialsLoading}
             />
@@ -349,8 +357,8 @@ export function Integrations() {
 
             {showNoResults && (
               <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
-                {searchTerm.trim()
-                  ? `No integrations found matching “${searchTerm}”`
+                {urlSearchTerm.trim()
+                  ? `No integrations found matching “${urlSearchTerm}”`
                   : 'No integrations in this category'}
               </div>
             )}

apps/sim/app/workspace/[workspaceId]/integrations/search-params.ts

@@ -14,8 +14,9 @@ export const CONNECTED_LABEL = 'Connected'
  *   `IntegrationType` enum values with the `All`/`Featured`/`Connected`
  *   pseudo-categories and are derived from the data set, so a plain string is
  *   used; the `All` default clears from the URL.
- * - `search` is the integration search term. It is written debounced from the
- *   local input (logs pattern) — never on every keystroke.
+ * - `search` is the integration search term. The input is controlled directly by
+ *   the nuqs value; only its URL write is debounced via `limitUrlUpdates`
+ *   (`debounce`) on the setter — never written on every keystroke.
  */
 export const integrationsParsers = {
   category: parseAsString.withDefault(ALL_CATEGORY),

apps/sim/app/workspace/[workspaceId]/logs/hooks/use-log-filters.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { useQueryStates } from 'nuqs'
+import { debounce, useQueryStates } from 'nuqs'
 import {
   logFilterParsers,
   logFilterUrlKeys,
@@ -10,6 +10,9 @@ import type { LogLevel, TimeRange, TriggerType } from '@/stores/logs/filters/typ
 
 const DEFAULT_TIME_RANGE: TimeRange = 'All time'
 
+/** Debounce window for `search` URL writes; keystrokes stay instant in the input. */
+const SEARCH_DEBOUNCE_MS = 300 as const
+
 /**
  * The logs filter state, sourced entirely from typed URL query params via nuqs.
  *
@@ -115,7 +118,14 @@ export function useLogFilters(): UseLogFilters {
   const setSearchQuery = useCallback(
     (query: string) => {
       const trimmed = query.trim()
-      setFilters({ search: trimmed.length > 0 ? trimmed : null })
+      const next = trimmed.length > 0 ? trimmed : null
+      // Debounce only the search param's URL write; the returned `filters.search`
+      // value still updates instantly so the controlled input stays responsive.
+      // Clearing flushes immediately so the param drops out without lingering.
+      setFilters(
+        { search: next },
+        next === null ? undefined : { limitUrlUpdates: debounce(SEARCH_DEBOUNCE_MS) }
+      )
     },
     [setFilters]
   )

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

@@ -233,8 +233,10 @@ export default function Logs() {
   const [executionId] = useQueryState(executionIdParam.key, executionIdParam.parser)
   const [pendingExecutionId, setPendingExecutionId] = useState<string | null>(() => executionId)
 
-  const [searchQuery, setSearchQuery] = useState(urlSearchQuery)
-  const debouncedSearchQuery = useDebounce(searchQuery, 300)
+  // `urlSearchQuery` is the instant nuqs value (its URL write is debounced inside
+  // `useLogFilters`); the query/filtering still debounce off it to avoid per-keystroke
+  // fetches.
+  const debouncedSearchQuery = useDebounce(urlSearchQuery, 300)
 
   const isLive = true
   const [isVisuallyRefreshing, setIsVisuallyRefreshing] = useState(false)
@@ -384,10 +386,6 @@ export default function Logs() {
     }
   }, [])
 
-  useEffect(() => {
-    setUrlSearchQuery(debouncedSearchQuery)
-  }, [debouncedSearchQuery, setUrlSearchQuery])
-
   const handleLogClick = useCallback((rowId: string) => {
     dispatch({ type: 'TOGGLE_LOG', logId: rowId })
   }, [])
@@ -462,8 +460,8 @@ export default function Logs() {
 
   const handleClearAllFilters = useCallback(() => {
     resetFilters()
-    setSearchQuery('')
-  }, [resetFilters, setSearchQuery])
+    setUrlSearchQuery('')
+  }, [resetFilters, setUrlSearchQuery])
 
   const handleOpenPreview = useCallback(() => {
     if (contextMenuLog?.id) {
@@ -614,18 +612,6 @@ export default function Logs() {
     debouncedSearchQuery,
   ])
 
-  /**
-   * Mirror external URL `search` changes (back/forward navigation, programmatic
-   * resets) into the local input state. nuqs keeps the filter state itself in
-   * sync with the URL; this only reconciles the debounced local input mirror.
-   */
-  const lastSyncedUrlSearchRef = useRef(urlSearchQuery)
-  useEffect(() => {
-    if (urlSearchQuery === lastSyncedUrlSearchRef.current) return
-    lastSyncedUrlSearchRef.current = urlSearchQuery
-    setSearchQuery((current) => (current.trim() === urlSearchQuery ? current : urlSearchQuery))
-  }, [urlSearchQuery])
-
   const loadMoreLogs = useCallback(() => {
     const { isFetching, hasNextPage, fetchNextPage } = logsQueryRef.current
     if (!isFetching && hasNextPage) {
@@ -832,13 +818,16 @@ export default function Logs() {
     [workflowsData, foldersData, triggersData]
   )
 
-  const handleFiltersChange = useCallback((filters: ParsedFilter[], textSearch: string) => {
-    const filterStrings = filters.map(
-      (f) => `${f.field}:${f.operator !== '=' ? f.operator : ''}${f.originalValue}`
-    )
-    const fullQuery = [...filterStrings, textSearch].filter(Boolean).join(' ')
-    setSearchQuery(fullQuery)
-  }, [])
+  const handleFiltersChange = useCallback(
+    (filters: ParsedFilter[], textSearch: string) => {
+      const filterStrings = filters.map(
+        (f) => `${f.field}:${f.operator !== '=' ? f.operator : ''}${f.originalValue}`
+      )
+      const fullQuery = [...filterStrings, textSearch].filter(Boolean).join(' ')
+      setUrlSearchQuery(fullQuery)
+    },
+    [setUrlSearchQuery]
+  )
 
   const getSuggestions = useCallback(
     (input: string) => suggestionEngine.getSuggestions(input),
@@ -872,14 +861,14 @@ export default function Logs() {
 
   const lastExternalSearchValue = useRef<string | undefined>(undefined)
   useEffect(() => {
-    if (searchQuery === lastExternalSearchValue.current) return
+    if (urlSearchQuery === lastExternalSearchValue.current) return
     const isMount = lastExternalSearchValue.current === undefined
-    lastExternalSearchValue.current = searchQuery
+    lastExternalSearchValue.current = urlSearchQuery
     // On mount with no initial query, skip the no-op parse
-    if (isMount && !searchQuery) return
-    const parsed = parseQuery(searchQuery)
+    if (isMount && !urlSearchQuery) return
+    const parsed = parseQuery(urlSearchQuery)
     initializeFromQuery(parsed.textSearch, parsed.filters)
-  }, [searchQuery, initializeFromQuery])
+  }, [urlSearchQuery, initializeFromQuery])
 
   useEffect(() => {
     if (!isSuggestionsOpen || highlightedIndex < 0) return
@@ -1075,7 +1064,10 @@ export default function Logs() {
           sort={sortConfig}
           filter={{
             content: (
-              <LogsFilterPanel searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />
+              <LogsFilterPanel
+                searchQuery={urlSearchQuery}
+                onSearchQueryChange={setUrlSearchQuery}
+              />
             ),
           }}
           filterTags={filterTags}

apps/sim/app/workspace/[workspaceId]/logs/search-params.ts

@@ -88,6 +88,9 @@ export const parseAsTriggers = createParser<TriggerType[]>({
   serialize(value) {
     return value.join(',')
   },
+  eq(a, b) {
+    return a.length === b.length && a.every((v, i) => v === b[i])
+  },
 }).withDefault([])
 
 /**