fix: hide artifacts tab in variable inspect panel for classic mode

Guard variable-inspect from rendering artifacts-related UI and API calls
when sandbox is not enabled, preventing unnecessary sandbox-file requests.

web/app/components/workflow/variable-inspect/panel.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import { useFeatures } from '@/app/components/base/features/hooks'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useStore } from '../store'
 import ArtifactsTab from './artifacts-tab'
@@ -11,8 +12,13 @@ import VariablesTab from './variables-tab'
 const VariablesPanel: FC<{ onClose: () => void }> = ({ onClose }) => {
   const { t } = useTranslation('workflow')
   const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+  const sandboxEnabled = useFeatures(s => s.features.sandbox?.enabled) ?? false
   const [activeTab, setActiveTab] = useState<InspectTab>(InspectTab.Variables)
 
+  const resolvedTab = (!sandboxEnabled && activeTab === InspectTab.Artifacts)
+    ? InspectTab.Variables
+    : activeTab
+
   const environmentVariables = useStore(s => s.environmentVariables)
   const { conversationVars, systemVars, nodesWithInspectVars, deleteAllInspectorVars } = useCurrentVars()
 
@@ -25,7 +31,7 @@ const VariablesPanel: FC<{ onClose: () => void }> = ({ onClose }) => {
     setCurrentFocusNodeId('')
   }, [deleteAllInspectorVars, setCurrentFocusNodeId])
 
-  const headerActions = activeTab === InspectTab.Variables && !isVariablesEmpty
+  const headerActions = resolvedTab === InspectTab.Variables && !isVariablesEmpty
     ? (
         <Button variant="ghost" size="small" onClick={handleClear}>
           {t('debug.variableInspect.clearAll')}
@@ -34,13 +40,13 @@ const VariablesPanel: FC<{ onClose: () => void }> = ({ onClose }) => {
     : undefined
 
   const headerProps = {
-    activeTab,
+    activeTab: resolvedTab,
     onTabChange: setActiveTab,
     onClose,
     headerActions,
   }
 
-  return activeTab === InspectTab.Variables
+  return resolvedTab === InspectTab.Variables
     ? <VariablesTab {...headerProps} />
     : <ArtifactsTab {...headerProps} />
 }

web/app/components/workflow/variable-inspect/tab-header.tsx

@@ -1,12 +1,14 @@
 import type { FC, ReactNode } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useFeatures } from '@/app/components/base/features/hooks'
 import { cn } from '@/utils/classnames'
 import { InspectTab } from './types'
 
 const TAB_ITEMS = [
-  { value: InspectTab.Variables, labelKey: 'debug.variableInspect.tab.variables' },
-  { value: InspectTab.Artifacts, labelKey: 'debug.variableInspect.tab.artifacts' },
-] as const
+  { value: InspectTab.Variables, labelKey: 'debug.variableInspect.tab.variables' as const },
+  { value: InspectTab.Artifacts, labelKey: 'debug.variableInspect.tab.artifacts' as const, sandboxOnly: true as const },
+]
 
 type TabHeaderProps = {
   activeTab: InspectTab
@@ -20,10 +22,16 @@ const TabHeader: FC<TabHeaderProps> = ({
   children,
 }) => {
   const { t } = useTranslation('workflow')
+  const sandboxEnabled = useFeatures(s => s.features.sandbox?.enabled) ?? false
+
+  const visibleTabs = useMemo(
+    () => TAB_ITEMS.filter(tab => !tab.sandboxOnly || sandboxEnabled),
+    [sandboxEnabled],
+  )
 
   return (
     <div className="flex h-10 w-full shrink-0 items-center gap-0.5 pl-3 pr-2">
-      {TAB_ITEMS.map(tab => (
+      {visibleTabs.map(tab => (
         <button
           key={tab.value}
           type="button"