fix(tables): stop the embedded table writing sort and view into its host's URL

Step 3, and the one intended behavior change in this migration — landing alone
so it is reviewable on its own.

`useQueryStates(tableDetailParsers)` was called unconditionally and all eleven
writers ran in both hosts, so opening a table in the mothership panel wrote
`?sort` / `?dir` / `?table-view` onto `/home`. The `view` -> `table-view` wire-key
rename exists precisely because of that collision — the workaround documented
the bug instead of fixing it. This is the same fix #6280 already applied to the
log `?tab` key and the six knowledge keys.

`useTableDetailState({ host })` wires both branches unconditionally and returns
the same `[state, setState]` shape `useQueryStates` did, so every one of the
eleven call sites is unchanged. A host that owns the URL keeps the query params;
an embedded one holds the identical values locally. The local branch is one
state object, not three: several writers set multiple keys in a single call and
rely on that landing as one update, and three setters would tear midway through
the view-resolution latch.

That deletes the `inheritedParams` guard (~28 lines) outright. It existed only to
detect a view id left on the host URL by a previously-open resource; with the
panel on local state there is nothing to inherit.

The parsers move to `lib/table/detail-search-params.ts`. They cannot stay in the
route tree — the hook that owns the URL may not import it — and they cannot move
into the unit either, because a unit may not call nuqs at all. A pure,
server-safe parser module is the one home both halves may reach.

What changes for a panel user: sort/view no longer survive a hard reload of the
host page, and no longer leak between two tabs open on different tables. Both
route pages keep their deep-linkable params unchanged.

Verified the six panel-isolation tests go red when the host gate is forced open.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

@@ -6,7 +6,6 @@ import { Download, Lock, Pencil, Table as TableIcon, Trash, Upload } from '@sim/
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
-import { useQueryStates } from 'nuqs'
 import { usePostHog } from 'posthog-js/react'
 import { PresenceAvatars } from '@/components/presence'
 import {
@@ -35,6 +34,10 @@ import type {
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
 import { TABLE_LIMITS } from '@/lib/table/constants'
+import {
+  ALL_VIEW_PARAM,
+  DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
+} from '@/lib/table/detail-search-params'
 import { LogDetails } from '@/app/workspace/[workspaceId]/logs/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useLogByExecutionId } from '@/hooks/queries/logs'
@@ -54,6 +57,7 @@ import {
 } from '@/hooks/queries/tables'
 import { useInlineRename } from '@/hooks/use-inline-rename'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+import { useTableDetailState } from '@/hooks/use-table-detail-state'
 import { hostOwnsUrl, type ResourceHost } from '@/resources'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
 import type { DeletedRowSnapshot } from '@/stores/table/types'
@@ -78,12 +82,6 @@ import {
 } from './components'
 import { useTable, useTableEventStream, useTableRoom } from './hooks'
 import { type BlockedTableAction, describeBlockedAction, lockedNouns } from './lock-copy'
-import {
-  ALL_VIEW_PARAM,
-  DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
-  tableDetailParsers,
-  tableDetailUrlKeys,
-} from './search-params'
 import type { QueryOptions } from './types'
 
 const logger = createLogger('Table')
@@ -293,7 +291,7 @@ export function Table({
   const [hiddenColumns, setHiddenColumns] = useState<string[]>([])
 
   const [{ sort: sortColumn, dir: sortDirection, view: activeViewId }, setTableParams] =
-    useQueryStates(tableDetailParsers, tableDetailUrlKeys)
+    useTableDetailState({ host })
 
   // Read-only mirrors for the resolve effect: it must know whether the user has
   // already applied a filter / hidden columns without re-running when they change.
@@ -551,24 +549,9 @@ export function Table({
     ownerResolvedRef.current = true
 
     if (seededViewIdRef.current === undefined) {
-      // Embedded tables bind these parsers to the HOST page's URL, which the
-      // mothership panel keeps across resource switches. A view id this table
-      // can't resolve was left by the previously-open resource — ignore it so
-      // this table picks its own default. A param it CAN resolve is honoured,
-      // including an explicit All: that is a real bookmark or a remount after
-      // switching resources away and back, not leakage.
-      const inheritedParams =
-        embedded &&
-        activeViewId !== null &&
-        activeViewId !== ALL_VIEW_PARAM &&
-        !views.some((view) => view.id === activeViewId)
-
-      if (activeViewId === null || inheritedParams) {
+      if (activeViewId === null) {
         const defaultView = views.find((view) => view.isDefault)
-        // `sort` rides the same host URL, so when the view id is inherited the
-        // sort beside it is too — not local work, and it must not suppress the
-        // default view's own sort.
-        const keep = inheritedParams ? { ...localWork(), sort: false } : localWork()
+        const keep = localWork()
         if (defaultView) {
           seededViewIdRef.current = defaultView.id
           setTableParams({ view: defaultView.id })
@@ -577,10 +560,8 @@ export function Table({
           return
         }
         // No view to adopt. Deliberately does NOT apply an empty config — that
-        // would clear a deep-linked `?sort=` on mount. Inherited params are the
-        // exception: nothing about them refers to this table, so they're cleared.
+        // would clear a deep-linked `?sort=` on mount.
         seededViewIdRef.current = null
-        if (inheritedParams) setTableParams({ view: ALL_VIEW_PARAM, sort: null, dir: null })
         resolvePendingLayout(false)
         return
       }
@@ -639,7 +620,6 @@ export function Table({
     views,
     activeView,
     activeViewId,
-    embedded,
     sortColumn,
     applyViewConfig,
     setTableParams,

apps/sim/hooks/use-table-detail-state.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * The panel must never write the table's sort/view keys into its host page's
+ * address bar. Before this hook, `useQueryStates` was called unconditionally and
+ * all eleven writers ran in both hosts — the `view` -> `table-view` wire-key
+ * rename exists precisely because the mothership bound these parsers to `/home`.
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { setUrlState, urlState } = vi.hoisted(() => ({
+  setUrlState: vi.fn(),
+  urlState: { current: { sort: null as string | null, dir: 'asc', view: null as string | null } },
+}))
+
+vi.mock('nuqs', () => ({
+  useQueryStates: () => [urlState.current, setUrlState],
+}))
+
+import {
+  type TableDetailState,
+  type TableDetailUpdate,
+  useTableDetailState,
+} from '@/hooks/use-table-detail-state'
+import type { ResourceHost } from '@/resources'
+
+let container: HTMLDivElement
+let root: Root
+let latest: [TableDetailState, (update: TableDetailUpdate) => void] | null = null
+
+function Probe({ host }: { host: ResourceHost }) {
+  latest = useTableDetailState({ host })
+  return null
+}
+
+function render(host: ResourceHost) {
+  act(() => root.render(<Probe host={host} />))
+}
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  vi.clearAllMocks()
+  urlState.current = { sort: null, dir: 'asc', view: null }
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('a host that owns the URL', () => {
+  it('reads the query params', () => {
+    urlState.current = { sort: 'name', dir: 'desc', view: 'view_1' }
+    render('page')
+
+    expect(latest?.[0]).toEqual({ sort: 'name', dir: 'desc', view: 'view_1' })
+  })
+
+  it('writes through to nuqs', () => {
+    render('page')
+
+    act(() => latest?.[1]({ sort: 'name', dir: 'desc' }))
+
+    expect(setUrlState).toHaveBeenCalledWith({ sort: 'name', dir: 'desc' })
+  })
+})
+
+describe('an embedded host', () => {
+  it('never writes to the address bar', () => {
+    render('panel')
+
+    act(() => latest?.[1]({ sort: 'name', dir: 'desc' }))
+    act(() => latest?.[1]({ view: 'view_1' }))
+
+    expect(setUrlState).not.toHaveBeenCalled()
+  })
+
+  it('holds the identical values locally', () => {
+    render('panel')
+
+    act(() => latest?.[1]({ sort: 'name', dir: 'desc' }))
+    expect(latest?.[0]).toEqual({ sort: 'name', dir: 'desc', view: null })
+
+    act(() => latest?.[1]({ view: 'view_1' }))
+    expect(latest?.[0]).toEqual({ sort: 'name', dir: 'desc', view: 'view_1' })
+  })
+
+  /**
+   * A key already sitting on the host page's URL must not steer the panel. This
+   * is what the deleted `inheritedParams` guard used to defend against by hand.
+   */
+  it('ignores a value already on the host page URL', () => {
+    urlState.current = { sort: 'stale', dir: 'desc', view: 'someone_elses_view' }
+    render('panel')
+
+    expect(latest?.[0]).toEqual({ sort: null, dir: 'asc', view: null })
+  })
+
+  /**
+   * Several writers set multiple keys at once and rely on one atomic update —
+   * clearing an adopted view writes `{ view, sort, dir }` together. Three
+   * separate setters would tear midway through the view-resolution latch.
+   */
+  it('applies a multi-key write atomically', () => {
+    render('panel')
+    act(() => latest?.[1]({ sort: 'name', dir: 'desc', view: 'view_1' }))
+
+    act(() => latest?.[1]({ view: 'all', sort: null, dir: null }))
+
+    expect(latest?.[0]).toEqual({ sort: null, dir: 'asc', view: 'all' })
+  })
+
+  it('resets a key to its default when written null, as nuqs does', () => {
+    render('panel')
+    act(() => latest?.[1]({ dir: 'desc' }))
+    expect(latest?.[0].dir).toBe('desc')
+
+    act(() => latest?.[1]({ dir: null }))
+    expect(latest?.[0].dir).toBe('asc')
+  })
+
+  it('leaves untouched keys alone', () => {
+    render('panel')
+    act(() => latest?.[1]({ sort: 'name', view: 'view_1' }))
+
+    act(() => latest?.[1]({ sort: 'other' }))
+
+    expect(latest?.[0]).toEqual({ sort: 'other', dir: 'asc', view: 'view_1' })
+  })
+})

apps/sim/hooks/use-table-detail-state.ts

@@ -0,0 +1,90 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { useQueryStates } from 'nuqs'
+import {
+  DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
+  tableDetailParsers,
+  tableDetailUrlKeys,
+} from '@/lib/table/detail-search-params'
+import type { SortDirection } from '@/lib/url-state'
+import { hostOwnsUrl, type ResourceHost } from '@/resources'
+
+/** Sort column, direction, and active view id — the table's deep-linkable view state. */
+export interface TableDetailState {
+  sort: string | null
+  dir: SortDirection
+  view: string | null
+}
+
+/** A partial write. `null` resets a key to its default, exactly as nuqs does. */
+export type TableDetailUpdate = Partial<{
+  sort: string | null
+  dir: SortDirection | null
+  view: string | null
+}>
+
+const LOCAL_DEFAULTS: TableDetailState = {
+  sort: null,
+  dir: DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
+  view: null,
+}
+
+/**
+ * The table's sort/view state, stored where the host allows.
+ *
+ * A host that owns the URL keeps `sort` / `dir` / `table-view` as query params,
+ * so a table is shareable and survives reload. An embedded host holds the
+ * identical values locally, because writing unnamespaced keys would pollute the
+ * address bar of whatever page is hosting the panel — the mothership binds these
+ * parsers to `/home`, where they belong to the home page and not to whichever
+ * table happens to be open in a tab.
+ *
+ * Both branches are wired unconditionally (hooks may not be called
+ * conditionally) and only the returned pair differs, matching
+ * `useKnowledgeListState`. In an embedded host the URL values are read but never
+ * written, so a key that happens to already be on the host's URL cannot steer
+ * the panel either.
+ *
+ * The local branch is deliberately ONE state object rather than three. Several
+ * writers set multiple keys in a single call — clearing an inherited view writes
+ * `{ view, sort, dir }` together — and rely on nuqs batching them into one
+ * update. Three separate setters would produce a different render count and can
+ * tear midway through the view-resolution effect's latch.
+ */
+export function useTableDetailState({
+  host,
+}: {
+  host: ResourceHost
+}): [TableDetailState, (update: TableDetailUpdate) => void] {
+  const ownsUrl = hostOwnsUrl(host)
+
+  const [urlState, setUrlState] = useQueryStates(tableDetailParsers, tableDetailUrlKeys)
+  const [localState, setLocalState] = useState<TableDetailState>(LOCAL_DEFAULTS)
+
+  const setLocal = useCallback((update: TableDetailUpdate) => {
+    setLocalState((previous) => ({
+      sort: 'sort' in update ? (update.sort ?? null) : previous.sort,
+      dir: 'dir' in update ? (update.dir ?? DEFAULT_TABLE_DETAIL_SORT_DIRECTION) : previous.dir,
+      view: 'view' in update ? (update.view ?? null) : previous.view,
+    }))
+  }, [])
+
+  const setState = useCallback(
+    (update: TableDetailUpdate) => {
+      if (ownsUrl) {
+        void setUrlState(update)
+        return
+      }
+      setLocal(update)
+    },
+    [ownsUrl, setUrlState, setLocal]
+  )
+
+  const state = useMemo<TableDetailState>(
+    () => (ownsUrl ? { sort: urlState.sort, dir: urlState.dir, view: urlState.view } : localState),
+    [ownsUrl, urlState.sort, urlState.dir, urlState.view, localState]
+  )
+
+  return [state, setState]
+}

…aceId]/tables/[tableId]/search-params.ts …ps/sim/lib/table/detail-search-params.tsapps/sim/app/workspace/[workspaceId]/tables/[tableId]/search-params.ts renamed to apps/sim/lib/table/detail-search-params.ts apps/sim/app/workspace/[workspaceId]/tables/[tableId]/search-params.ts renamed to apps/sim/lib/table/detail-search-params.ts

@@ -5,7 +5,13 @@ import { SORT_DIRECTIONS } from '@/lib/url-state'
 export const DEFAULT_TABLE_DETAIL_SORT_DIRECTION = 'asc'
 
 /**
- * Co-located, typed URL query-param definitions for the table-detail view.
+ * Typed URL query-param definitions for the table-detail view.
+ *
+ * In `lib/` rather than co-located with the route because the two halves that
+ * need them sit on opposite sides of a boundary: the table view is a canonical
+ * resource unit, which may not call nuqs at all (see `useTableDetailState`), and
+ * the hook that does own the URL may not import the route tree. A pure,
+ * server-safe parser module is the one thing both may reach for.
  *
  * - `sort` is the active sort column. Columns are user-defined table columns
  *   (not a fixed set), so the column id is stored as a free-form string. A