feat(deploy-modal): logs section + URL-driven log selection

apps/sim/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import Script from 'next/script'
 import { PublicEnvScript } from 'next-runtime-env'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { BrandedLayout } from '@/components/branded-layout'
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
 import { generateBrandedMetadata, generateThemeCSS } from '@/ee/whitelabeling'
@@ -258,11 +259,13 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         <PostHogProvider>
           <ThemeProvider>
             <QueryProvider>
-              <SessionProvider>
-                <TooltipProvider>
-                  <BrandedLayout>{children}</BrandedLayout>
-                </TooltipProvider>
-              </SessionProvider>
+              <NuqsAdapter>
+                <SessionProvider>
+                  <TooltipProvider>
+                    <BrandedLayout>{children}</BrandedLayout>
+                  </TooltipProvider>
+                </SessionProvider>
+              </NuqsAdapter>
             </QueryProvider>
           </ThemeProvider>
         </PostHogProvider>

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -26,6 +26,7 @@ import type { WorkflowLogRow } from '@/lib/api/contracts/logs'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { cn } from '@/lib/core/utils/cn'
 import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-spans'
+import { getDisplayStatus, StatusBadge, TriggerBadge } from '@/lib/logs/status'
 import type { TraceSpan } from '@/lib/logs/types'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
@@ -38,9 +39,6 @@ import {
   DELETED_WORKFLOW_COLOR,
   DELETED_WORKFLOW_LABEL,
   formatDate,
-  getDisplayStatus,
-  StatusBadge,
-  TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'

apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx

@@ -9,15 +9,13 @@ import { Badge, buttonVariants, Loader } from '@/components/emcn'
 import type { WorkflowLogSummary } from '@/lib/api/contracts/logs'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
+import { getDisplayStatus, StatusBadge, TriggerBadge } from '@/lib/logs/status'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   DELETED_WORKFLOW_COLOR,
   DELETED_WORKFLOW_LABEL,
   formatDate,
-  getDisplayStatus,
   LOG_COLUMNS,
-  StatusBadge,
-  TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
 
 const LOG_ROW_HEIGHT = 44 as const

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx

@@ -19,9 +19,9 @@ import {
 import { cn } from '@/lib/core/utils/cn'
 import { hasActiveFilters } from '@/lib/logs/filters'
 import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
+import { type LogStatus, STATUS_CONFIG } from '@/lib/logs/status'
 import { captureEvent } from '@/lib/posthog/client'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
-import { type LogStatus, STATUS_CONFIG } from '@/app/workspace/[workspaceId]/logs/utils'
 import { getBlock } from '@/blocks/registry'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { useWorkflows } from '@/hooks/queries/workflows'

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'r
 import { formatDuration } from '@sim/utils/formatting'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
+import { parseAsString, useQueryState } from 'nuqs'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Bell,
@@ -280,10 +281,9 @@ export default function Logs() {
     selectedLogId: null,
     isSidebarOpen: false,
   })
-  const [pendingExecutionId, setPendingExecutionId] = useState<string | null>(() =>
-    typeof window !== 'undefined'
-      ? new URLSearchParams(window.location.search).get('executionId')
-      : null
+  const [executionIdParam, setExecutionIdParam] = useQueryState(
+    'executionId',
+    parseAsString.withOptions({ history: 'replace' })
   )
 
   const [searchQuery, setSearchQuery] = useState(() => {
@@ -299,6 +299,7 @@ export default function Logs() {
   const logsRef = useRef<WorkflowLogSummary[]>([])
   const selectedLogIndexRef = useRef(-1)
   const selectedLogIdRef = useRef<string | null>(null)
+  const isSidebarOpenRef = useRef(false)
   const shouldScrollIntoViewRef = useRef(false)
   const logsRefetchRef = useRef<() => void>(() => {})
   const activeLogRefetchRef = useRef<() => void>(() => {})
@@ -412,6 +413,7 @@ export default function Logs() {
   logsRef.current = logs
   selectedLogIndexRef.current = selectedLogIndex
   selectedLogIdRef.current = selectedLogId
+  isSidebarOpenRef.current = isSidebarOpen
   logsRefetchRef.current = logsQuery.refetch
   activeLogRefetchRef.current = selectedDetailQuery.refetch
   logsQueryRef.current = {
@@ -420,18 +422,26 @@ export default function Logs() {
     fetchNextPage: logsQuery.fetchNextPage,
   }
 
-  const deepLinkQuery = useLogByExecutionId(workspaceId, pendingExecutionId)
+  const deepLinkQuery = useLogByExecutionId(workspaceId, executionIdParam)
+  const prevExecutionIdParamRef = useRef<string | null>(executionIdParam)
 
   useEffect(() => {
-    if (!pendingExecutionId) return
+    const prev = prevExecutionIdParamRef.current
+    prevExecutionIdParamRef.current = executionIdParam
+
+    if (!executionIdParam) {
+      if (prev && isSidebarOpenRef.current) {
+        dispatch({ type: 'CLOSE_SIDEBAR' })
+      }
+      return
+    }
     const resolvedId = deepLinkQuery.data?.id
-    if (resolvedId) {
+    if (resolvedId && (resolvedId !== selectedLogIdRef.current || !isSidebarOpenRef.current)) {
       dispatch({ type: 'TOGGLE_LOG', logId: resolvedId })
-      setPendingExecutionId(null)
     } else if (deepLinkQuery.isError) {
-      setPendingExecutionId(null)
+      setExecutionIdParam(null)
     }
-  }, [pendingExecutionId, deepLinkQuery.data, deepLinkQuery.isError])
+  }, [executionIdParam, deepLinkQuery.data, deepLinkQuery.isError, setExecutionIdParam])
 
   useEffect(() => {
     const timers = refreshTimersRef.current
@@ -445,31 +455,50 @@ export default function Logs() {
     setStoreSearchQuery(debouncedSearchQuery)
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
-  const handleLogClick = useCallback((rowId: string) => {
-    dispatch({ type: 'TOGGLE_LOG', logId: rowId })
-  }, [])
+  const handleLogClick = useCallback(
+    (rowId: string) => {
+      const isClosing = selectedLogIdRef.current === rowId && isSidebarOpenRef.current
+      dispatch({ type: 'TOGGLE_LOG', logId: rowId })
+      if (isClosing) {
+        setExecutionIdParam(null)
+      } else {
+        const log = logsRef.current.find((l) => l.id === rowId)
+        setExecutionIdParam(log?.executionId ?? null)
+      }
+    },
+    [setExecutionIdParam]
+  )
 
   const handleNavigateNext = useCallback(() => {
     const idx = selectedLogIndexRef.current
     const currentLogs = logsRef.current
     if (idx >= 0 && idx < currentLogs.length - 1) {
+      const next = currentLogs[idx + 1]
       shouldScrollIntoViewRef.current = true
-      dispatch({ type: 'SELECT_LOG', logId: currentLogs[idx + 1].id })
+      dispatch({ type: 'SELECT_LOG', logId: next.id })
+      if (isSidebarOpenRef.current) {
+        setExecutionIdParam(next.executionId ?? null)
+      }
     }
-  }, [])
+  }, [setExecutionIdParam])
 
   const handleNavigatePrev = useCallback(() => {
     const idx = selectedLogIndexRef.current
     if (idx > 0) {
+      const prev = logsRef.current[idx - 1]
       shouldScrollIntoViewRef.current = true
-      dispatch({ type: 'SELECT_LOG', logId: logsRef.current[idx - 1].id })
+      dispatch({ type: 'SELECT_LOG', logId: prev.id })
+      if (isSidebarOpenRef.current) {
+        setExecutionIdParam(prev.executionId ?? null)
+      }
     }
-  }, [])
+  }, [setExecutionIdParam])
 
   const handleCloseSidebar = useCallback(() => {
     dispatch({ type: 'CLOSE_SIDEBAR' })
+    setExecutionIdParam(null)
     activeLogTabRef.current = 'overview'
-  }, [])
+  }, [setExecutionIdParam])
 
   const handleActiveTabChange = useCallback((tab: string) => {
     activeLogTabRef.current = tab
@@ -722,13 +751,20 @@ export default function Logs() {
 
       if (e.key === 'Enter' && selectedLogIdRef.current) {
         e.preventDefault()
+        const willOpen = !isSidebarOpenRef.current
         dispatch({ type: 'TOGGLE_SIDEBAR' })
+        if (willOpen) {
+          const log = logsRef.current.find((l) => l.id === selectedLogIdRef.current)
+          setExecutionIdParam(log?.executionId ?? null)
+        } else {
+          setExecutionIdParam(null)
+        }
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [handleNavigateNext, handleNavigatePrev])
+  }, [handleNavigateNext, handleNavigatePrev, setExecutionIdParam])
 
   const handleCloseContextMenu = useCallback(() => setContextMenuOpen(false), [])
   const handleOpenNotificationSettings = useCallback(() => setIsNotificationSettingsOpen(true), [])

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -1,11 +1,6 @@
-import React from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import { format } from 'date-fns'
-import { Badge } from '@/components/emcn'
 import type { WorkflowLogDetail } from '@/lib/api/contracts/logs'
-import { getIntegrationMetadata } from '@/lib/logs/get-trigger-options'
-import { getBlock } from '@/blocks/registry'
-import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 
 export const LOG_COLUMNS = {
   workflow: { width: 'w-[22%]', minWidth: 'min-w-[140px]', label: 'Workflow' },
@@ -19,129 +14,6 @@ export const LOG_COLUMNS = {
 export const DELETED_WORKFLOW_LABEL = 'Deleted Workflow'
 export const DELETED_WORKFLOW_COLOR = 'var(--text-tertiary)'
 
-export type LogStatus = 'error' | 'pending' | 'running' | 'info' | 'cancelled' | 'cancelling'
-
-/**
- * Maps raw status string to LogStatus for display.
- * @param status - Raw status from API
- * @returns Normalized LogStatus value
- */
-export function getDisplayStatus(status: string | null | undefined): LogStatus {
-  switch (status) {
-    case 'running':
-      return 'running'
-    case 'pending':
-      return 'pending'
-    case 'cancelling':
-      return 'cancelling'
-    case 'cancelled':
-      return 'cancelled'
-    case 'failed':
-      return 'error'
-    default:
-      return 'info'
-  }
-}
-
-export const STATUS_CONFIG: Record<
-  LogStatus,
-  {
-    variant: React.ComponentProps<typeof Badge>['variant']
-    label: string
-    color: string
-    /** Whether this status appears as a filter option. Intermediary states (e.g. cancelling) are excluded. */
-    filterable: boolean
-  }
-> = {
-  error: { variant: 'red', label: 'Error', color: 'var(--text-error)', filterable: true },
-  pending: { variant: 'amber', label: 'Pending', color: '#f59e0b', filterable: true },
-  running: { variant: 'amber', label: 'Running', color: '#f59e0b', filterable: true },
-  cancelling: { variant: 'amber', label: 'Cancelling...', color: '#f59e0b', filterable: false },
-  cancelled: { variant: 'orange', label: 'Cancelled', color: '#f97316', filterable: true },
-  info: {
-    variant: 'gray',
-    label: 'Info',
-    color: 'var(--terminal-status-info-color)',
-    filterable: true,
-  },
-}
-
-const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
-  manual: 'gray-secondary',
-  api: 'blue',
-  schedule: 'green',
-  chat: 'purple',
-  webhook: 'orange',
-  mcp: 'cyan',
-  a2a: 'teal',
-  copilot: 'pink',
-  mothership: 'pink',
-  workflow: 'blue-secondary',
-}
-
-interface StatusBadgeProps {
-  status: LogStatus
-}
-
-/**
- * Renders a colored badge indicating log execution status.
- * @param props - Component props containing the status
- * @returns A Badge with dot indicator and status label
- */
-export function StatusBadge({ status }: StatusBadgeProps) {
-  const config = STATUS_CONFIG[status]
-  return React.createElement(
-    Badge,
-    { variant: config.variant, dot: true, size: 'sm' },
-    config.label
-  )
-}
-
-interface TriggerBadgeProps {
-  trigger: string
-}
-
-/**
- * Renders a colored badge indicating the workflow trigger type.
- * Core triggers display with their designated colors; integrations show with icons.
- * @param props - Component props containing the trigger type
- * @returns A Badge with appropriate styling for the trigger type
- */
-export function TriggerBadge({ trigger }: TriggerBadgeProps) {
-  const metadata = getIntegrationMetadata(trigger)
-  const isIntegration = !(CORE_TRIGGER_TYPES as readonly string[]).includes(trigger)
-  const block = isIntegration ? getBlock(trigger) : null
-  const IconComponent = block?.icon
-
-  const coreVariant = TRIGGER_VARIANT_MAP[trigger]
-  if (coreVariant) {
-    return React.createElement(
-      Badge,
-      { variant: coreVariant, size: 'sm', className: 'whitespace-nowrap' },
-      metadata.label
-    )
-  }
-
-  if (IconComponent) {
-    return React.createElement(
-      Badge,
-      {
-        variant: 'gray-secondary',
-        size: 'sm',
-        icon: IconComponent,
-        className: 'whitespace-nowrap',
-      },
-      metadata.label
-    )
-  }
-
-  return React.createElement(
-    Badge,
-    { variant: 'gray-secondary', size: 'sm', className: 'whitespace-nowrap' },
-    metadata.label
-  )
-}
-
 interface LogWithDuration {
   totalDurationMs?: number | string
   duration?: number | string

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts

@@ -1 +1,2 @@
+export { Logs } from './logs'
 export { Versions } from './versions'