fix(tables): mount LogView directly for the execution slideout

Step 6. The table borrowed the logs page's `LogDetails` shell to show a run.
That shell reads `useParams`, `useRouter`, `useQueryState` and the permission
context — four route couplings a table has no use for — and it hard-codes
`host='page'`.

The `useQueryState` is the interesting one: it deep-links the log's active tab
unconditionally, so opening a run from the *tables* page wrote `?tab=trace` onto
the tables URL, and onto the host page's URL from the chat panel. A second
instance of the same bug step 3 fixed, in a component nobody thought of as
URL-owning.

`ExecutionSlideout` reproduces only the chrome the table actually uses — frame,
resize handle, close button — and mounts the canonical `LogView` itself. It omits
`tab`/`onTabChange`, so the view keeps the tab local, which is correct for a
panel that was never addressable. The logs page's prev/next and retry controls
are dropped deliberately: they navigate a list this surface does not have, and
the table only ever passed three of that shell's ten props.

`showExecutionInternals` becomes a required prop on the table, forwarded from
both hosts. Not read from `usePermissionConfig` inside the table — although R6
would allow it — because passing R6 by an accident of regex coverage is not the
same as being right, and a permission-group restriction should fail to compile
when a host forgets it rather than default to revealing payloads.

Cross-route edges out of the tables tree: 3 left, and only one of them is real.

Author: waleedlatif1

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

@@ -316,6 +316,7 @@ export const ResourceContent = memo(function ResourceContent({
           host='panel'
           grants={grants}
           onNavigate={navigate}
+          showExecutionInternals={!permissionConfig.hideTraceSpans}
           workspaceId={workspaceId}
           tableId={resource.id}
           viewsEnabled={tableViewsEnabled}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/execution-slideout/execution-slideout.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useCallback, useMemo } from 'react'
+import { Button, cn } from '@sim/emcn'
+import { X } from '@sim/emcn/icons'
+import { LogView } from '@/components/resources/log-view'
+import type { WorkflowLogRow } from '@/lib/api/contracts/logs'
+import { useLogDetailsResize } from '@/hooks/use-log-details-resize'
+import { type ResourceGrants, type ResourceHost, workspaceSource } from '@/resources'
+import { useLogDetailsUIStore } from '@/stores/logs/store'
+import { MAX_LOG_DETAILS_WIDTH_RATIO, MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
+
+interface ExecutionSlideoutProps {
+  log: WorkflowLogRow | null
+  isOpen: boolean
+  onClose: () => void
+  workspaceId: string
+  grants: ResourceGrants
+  host: ResourceHost
+  /**
+   * Whether this viewer may see trace internals. Required, not
+   * optional-defaulting-to-true: forgetting it must fail to compile rather than
+   * silently reveal payloads a permission group hid. Same contract, and the same
+   * reason, as {@link LogView}'s own prop.
+   */
+  showExecutionInternals: boolean
+  onNavigate?: (path: string) => void
+}
+
+/**
+ * A workflow run, slid in beside the table that triggered it.
+ *
+ * Mounts the canonical {@link LogView} directly rather than borrowing the logs
+ * page's `LogDetails` shell. That shell reads `useParams`, `useRouter`,
+ * `useQueryState` and the permission context — four route couplings a table has
+ * no use for — and it deep-links its active tab, which meant opening a run from
+ * the tables page wrote `?tab` onto the tables URL, and onto the host page's URL
+ * from the chat panel. This slideout omits `tab`/`onTabChange` entirely, so the
+ * view keeps the tab local, which is correct for a panel that was never
+ * addressable.
+ *
+ * Only the chrome is reproduced: the frame, the resize handle, and a close
+ * button. The logs page's prev/next and retry controls belong to a list this
+ * surface does not have.
+ */
+export function ExecutionSlideout({
+  log,
+  isOpen,
+  onClose,
+  workspaceId,
+  grants,
+  host,
+  showExecutionInternals,
+  onNavigate,
+}: ExecutionSlideoutProps) {
+  const panelWidth = useLogDetailsUIStore((state) => state.panelWidth)
+  const { handleMouseDown } = useLogDetailsResize()
+
+  const source = useMemo(
+    () => workspaceSource({ kind: 'log' as const, workspaceId, resourceId: log?.id ?? '' }),
+    [workspaceId, log?.id]
+  )
+
+  const handleNavigate = useCallback((path: string) => onNavigate?.(path), [onNavigate])
+
+  const maxVw = `${MAX_LOG_DETAILS_WIDTH_RATIO * 100}vw`
+  const effectiveWidth = `clamp(min(${MIN_LOG_DETAILS_WIDTH}px, ${maxVw}), ${panelWidth}px, ${maxVw})`
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          className='absolute top-0 bottom-0 z-[var(--z-dropdown)] w-[8px] cursor-ew-resize'
+          style={{ right: `calc(${effectiveWidth} - 4px)` }}
+          onMouseDown={handleMouseDown}
+          role='separator'
+          aria-label='Resize execution details panel'
+          aria-orientation='vertical'
+        />
+      )}
+
+      <div
+        className={cn(
+          'absolute top-0 right-0 bottom-0 z-[var(--z-dropdown)] overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        )}
+        style={{ width: effectiveWidth }}
+        aria-label='Execution details sidebar'
+      >
+        {log && (
+          <div className='flex h-full flex-col px-3.5 pt-3'>
+            <div className='flex items-center justify-between'>
+              <h2 className='font-medium text-[var(--text-primary)] text-sm'>Execution Details</h2>
+              <Button variant='ghost' className='!p-1' onClick={onClose} aria-label='Close'>
+                <X className='size-[14px]' />
+              </Button>
+            </div>
+
+            <LogView
+              source={source}
+              grants={grants}
+              host={host}
+              log={log}
+              showExecutionInternals={showExecutionInternals}
+              onNavigate={handleNavigate}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/execution-slideout/index.ts

@@ -0,0 +1 @@
+export { ExecutionSlideout } from './execution-slideout'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts

@@ -3,6 +3,7 @@ export * from './columns-menu'
 export * from './context-menu'
 export * from './enrichment-details'
 export * from './enrichments-sidebar'
+export * from './execution-slideout'
 export * from './lock-settings-modal'
 export * from './new-column-dropdown'
 export * from './row-modal'

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

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { Table } from '@/app/workspace/[workspaceId]/tables/[tableId]/table'
+import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { grantsFromPermissions } from '@/resources'
 
 interface TableRouteProps {
@@ -30,6 +31,7 @@ export function TableRoute({ tableLocksEnabled, viewsEnabled }: TableRouteProps)
   const tableId = typeof params?.tableId === 'string' ? params.tableId : ''
   const permissions = useUserPermissionsContext()
   const router = useRouter()
+  const { config: permissionConfig } = usePermissionConfig()
 
   const grants = useMemo(() => grantsFromPermissions(permissions), [permissions])
   const navigate = useCallback((path: string) => router.push(path), [router])
@@ -39,6 +41,7 @@ export function TableRoute({ tableLocksEnabled, viewsEnabled }: TableRouteProps)
       host='page'
       grants={grants}
       onNavigate={navigate}
+      showExecutionInternals={!permissionConfig.hideTraceSpans}
       workspaceId={workspaceId}
       tableId={tableId}
       tableLocksEnabled={tableLocksEnabled}

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

@@ -37,7 +37,6 @@ import {
   ALL_VIEW_PARAM,
   DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
 } from '@/lib/table/detail-search-params'
-import { LogDetails } from '@/app/workspace/[workspaceId]/logs/components'
 import { useLogByExecutionId } from '@/hooks/queries/logs'
 import {
   downloadTableExport,
@@ -65,6 +64,7 @@ import {
   ColumnsMenu,
   EnrichmentDetails,
   EnrichmentsSidebar,
+  ExecutionSlideout,
   LockSettingsModal,
   NewColumnDropdown,
   RowModal,
@@ -112,6 +112,13 @@ interface TableProps {
    * that owns no router omits this and navigation is inert by construction.
    */
   onNavigate?: (path: string) => void
+  /**
+   * Whether this viewer may see trace internals, forwarded to the execution
+   * slideout's {@link LogView}. Required rather than read from
+   * `usePermissionConfig` here: a permission-group restriction must fail to
+   * compile when a host forgets it, not default to revealing payloads.
+   */
+  showExecutionInternals: boolean
   /**
    * The table's address. Required rather than derived: both mounts know it
    * (`page.tsx` from its route params, the panel from the open resource), and a
@@ -238,6 +245,7 @@ export function Table({
   host,
   grants,
   onNavigate,
+  showExecutionInternals,
   workspaceId,
   tableId,
   tableLocksEnabled = false,
@@ -1305,9 +1313,7 @@ export function Table({
   const enrichmentDetailsGroupName =
     enrichmentDetailsTarget &&
     tableWorkflowGroups.find((g) => g.id === enrichmentDetailsTarget.groupId)?.name
-  // Fetch the workflow log when the execution-details slideout is open. Reuses
-  // the logs page's <LogDetails> directly — no intermediate wrapper needed for
-  // a one-line query forward.
+  // Fetch the workflow log when the execution-details slideout is open.
   const { data: executionLog } = useLogByExecutionId(workspaceId, executionId)
 
   // Stable identity so the memoized Resource.Options can bail — an inline
@@ -1569,10 +1575,15 @@ export function Table({
         tableId={tableId}
         onColumnRename={onColumnRename}
       />
-      <LogDetails
+      <ExecutionSlideout
         log={executionLog ?? null}
         isOpen={Boolean(executionId)}
         onClose={onCloseSlideout}
+        workspaceId={workspaceId}
+        grants={grants}
+        host={host}
+        showExecutionInternals={showExecutionInternals}
+        onNavigate={onNavigate}
       />
       <EnrichmentDetails
         tableId={tableId}