diff --git a/web/app/components/evaluation/components/batch-test-panel.tsx b/web/app/components/evaluation/components/batch-test-panel.tsx
deleted file mode 100644
index 2d95abf86d..0000000000
--- a/web/app/components/evaluation/components/batch-test-panel.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use client'
-
-import type { EvaluationResourceProps } from '../types'
-import { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../store'
-import { TAB_CLASS_NAME } from '../utils'
-
-const BatchTestPanel = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const requirementFields = config.fieldOptions
-    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
-    .slice(0, 4)
-  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
-  const tabLabels = {
-    'input-fields': t('batch.tabs.input-fields'),
-    'history': t('batch.tabs.history'),
-  }
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const isRunnable = isEvaluationRunnable(resource)
-  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
-
-  const handleDownloadTemplate = () => {
-    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
-    const link = document.createElement('a')
-    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = config.templateFileName
-    link.click()
-  }
-
-  const handleRun = () => {
-    if (!isRunnable) {
-      toast.warning(t('batch.validation'))
-      return
-    }
-
-    runBatchTest(resourceType, resourceId)
-  }
-
-  return (
-    <div className="flex h-full min-h-0 flex-col bg-background-default">
-      <div className="px-6 py-4">
-        <div className="text-text-primary system-xl-semibold">{t('batch.title')}</div>
-        <div className="mt-1 text-text-tertiary system-sm-regular">{t('batch.description')}</div>
-        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
-          <div className="flex items-start gap-3">
-            <span aria-hidden="true" className="i-ri-alert-fill mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
-            <div className="text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
-          </div>
-        </div>
-      </div>
-      <div className="border-b border-divider-subtle px-6">
-        <div className="flex gap-4">
-          {(['input-fields', 'history'] as const).map(tab => (
-            <button
-              key={tab}
-              type="button"
-              className={cn(
-                TAB_CLASS_NAME,
-                'flex-none rounded-none border-b-2 border-transparent px-0 pb-2.5 pt-2 uppercase',
-                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
-              )}
-              onClick={() => setBatchTab(resourceType, resourceId, tab)}
-            >
-              {tabLabels[tab]}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
-        {resource.activeBatchTab === 'input-fields' && (
-          <div className="space-y-5">
-            <div>
-              <div className="text-text-primary system-md-semibold">{t('batch.requirementsTitle')}</div>
-              <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.requirementsDescription')}</div>
-              <div className="mt-3 rounded-xl bg-background-section p-3">
-                {displayedRequirementFields.map(field => (
-                  <div key={field.id} className="flex items-center py-1">
-                    <div className="rounded px-1 py-0.5 text-text-tertiary system-xs-medium">
-                      {field.label}
-                    </div>
-                    <div className="text-[10px] leading-3 text-text-quaternary">
-                      {field.type}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="space-y-3">
-              <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
-                <span aria-hidden="true" className="i-ri-download-line mr-1 h-4 w-4" />
-                {t('batch.downloadTemplate')}
-              </Button>
-              <input
-                ref={fileInputRef}
-                hidden
-                type="file"
-                accept=".csv,.xlsx"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  setUploadedFileName(resourceType, resourceId, file?.name ?? null)
-                }}
-              />
-              {isPanelReady && (
-                <button
-                  type="button"
-                  className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
-                  onClick={() => fileInputRef.current?.click()}
-                >
-                  <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
-                  <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
-                  <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
-                </button>
-              )}
-            </div>
-            {!isRunnable && (
-              <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
-                {t('batch.validation')}
-              </div>
-            )}
-            <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
-              {t('batch.run')}
-            </Button>
-          </div>
-        )}
-        {resource.activeBatchTab === 'history' && (
-          <div className="space-y-3">
-            {resource.batchRecords.length === 0 && (
-              <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary system-sm-regular">
-                {t('batch.emptyHistory')}
-              </div>
-            )}
-            {resource.batchRecords.map(record => (
-              <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <div className="text-text-primary system-sm-semibold">{record.summary}</div>
-                    <div className="mt-1 text-text-tertiary system-xs-regular">{record.fileName}</div>
-                  </div>
-                  <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
-                    {record.status === 'running'
-                      ? (
-                          <span className="flex items-center gap-1">
-                            <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                            {statusLabels.running}
-                          </span>
-                        )
-                      : statusLabels[record.status]}
-                  </Badge>
-                </div>
-                <div className="mt-3 text-text-tertiary system-xs-regular">{record.startedAt}</div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
new file mode 100644
index 0000000000..728b3e6c99
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -0,0 +1,49 @@
+import type { BatchTestRecord } from '../../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+
+type HistoryTabProps = {
+  batchRecords: BatchTestRecord[]
+}
+
+const HistoryTab = ({ batchRecords }: HistoryTabProps) => {
+  const { t } = useTranslation('evaluation')
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+
+  return (
+    <div className="space-y-3">
+      {batchRecords.length === 0 && (
+        <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
+          {t('batch.emptyHistory')}
+        </div>
+      )}
+      {batchRecords.map(record => (
+        <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <div className="system-sm-semibold text-text-primary">{record.summary}</div>
+              <div className="mt-1 system-xs-regular text-text-tertiary">{record.fileName}</div>
+            </div>
+            <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
+              {record.status === 'running'
+                ? (
+                    <span className="flex items-center gap-1">
+                      <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                      {statusLabels.running}
+                    </span>
+                  )
+                : statusLabels[record.status]}
+            </Badge>
+          </div>
+          <div className="mt-3 system-xs-regular text-text-tertiary">{record.startedAt}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default HistoryTab
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
new file mode 100644
index 0000000000..818f83e5d5
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import type { BatchTestTab, EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../../mock'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import { TAB_CLASS_NAME } from '../../utils'
+import HistoryTab from './history-tab'
+import InputFieldsTab from './input-fields-tab'
+
+const BATCH_TABS: BatchTestTab[] = ['input-fields', 'history']
+
+const BatchTestPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const requirementFields = config.fieldOptions
+    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
+    .slice(0, 4)
+  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
+  const tabLabels: Record<BatchTestTab, string> = {
+    'input-fields': t('batch.tabs.input-fields'),
+    'history': t('batch.tabs.history'),
+  }
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const isRunnable = isEvaluationRunnable(resource)
+  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
+
+  const handleRun = () => runBatchTest(resourceType, resourceId)
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default">
+      <div className="px-6 py-4">
+        <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
+        <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
+          <div className="flex items-start gap-3">
+            <span aria-hidden="true" className="mt-0.5 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning" />
+            <div className="system-xs-regular text-text-tertiary">{t('batch.noticeDescription')}</div>
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-divider-subtle px-6">
+        <div className="flex gap-4">
+          {BATCH_TABS.map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                TAB_CLASS_NAME,
+                'flex-none rounded-none border-b-2 border-transparent px-0 pt-2 pb-2.5 uppercase',
+                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
+              )}
+              onClick={() => setBatchTab(resourceType, resourceId, tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
+        {resource.activeBatchTab === 'input-fields' && (
+          <InputFieldsTab
+            isPanelReady={isPanelReady}
+            isRunnable={isRunnable}
+            requirementFields={displayedRequirementFields}
+            templateFileName={config.templateFileName}
+            uploadedFileName={resource.uploadedFileName}
+            onRun={handleRun}
+            onUploadFileNameChange={uploadedFileName => setUploadedFileName(resourceType, resourceId, uploadedFileName)}
+          />
+        )}
+        {resource.activeBatchTab === 'history' && <HistoryTab batchRecords={resource.batchRecords} />}
+      </div>
+    </div>
+  )
+}
+
+export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
new file mode 100644
index 0000000000..e43da15e9e
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -0,0 +1,103 @@
+import type { EvaluationFieldOption } from '../../types'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
+
+type InputFieldsTabProps = {
+  requirementFields: EvaluationFieldOption[]
+  templateFileName: string
+  uploadedFileName: string | null
+  isPanelReady: boolean
+  isRunnable: boolean
+  onRun: () => void
+  onUploadFileNameChange: (uploadedFileName: string | null) => void
+}
+
+const InputFieldsTab = ({
+  requirementFields,
+  templateFileName,
+  uploadedFileName,
+  isPanelReady,
+  isRunnable,
+  onRun,
+  onUploadFileNameChange,
+}: InputFieldsTabProps) => {
+  const { t } = useTranslation('evaluation')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDownloadTemplate = () => {
+    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    onRun()
+  }
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
+        <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
+        <div className="mt-3 rounded-xl bg-background-section p-3">
+          {requirementFields.map(field => (
+            <div key={field.id} className="flex items-center py-1">
+              <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
+                {field.label}
+              </div>
+              <div className="text-[10px] leading-3 text-text-quaternary">
+                {field.type}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="space-y-3">
+        <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
+          <span aria-hidden="true" className="mr-1 i-ri-download-line h-4 w-4" />
+          {t('batch.downloadTemplate')}
+        </Button>
+        <input
+          ref={fileInputRef}
+          hidden
+          type="file"
+          accept=".csv,.xlsx"
+          onChange={(event) => {
+            const file = event.target.files?.[0]
+            onUploadFileNameChange(file?.name ?? null)
+          }}
+        />
+        {isPanelReady && (
+          <button
+            type="button"
+            className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
+            <div className="mt-2 system-sm-semibold text-text-primary">{t('batch.uploadTitle')}</div>
+            <div className="mt-1 system-xs-regular text-text-tertiary">{uploadedFileName ?? t('batch.uploadHint')}</div>
+          </button>
+        )}
+      </div>
+      {!isRunnable && (
+        <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 system-xs-regular text-text-tertiary">
+          {t('batch.validation')}
+        </div>
+      )}
+      <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
+        {t('batch.run')}
+      </Button>
+    </div>
+  )
+}
+
+export default InputFieldsTab