refactor: 将 WebUI 源码纳入仓库,移除打包产物

- 新增 webui/ 前端源码目录（React+Vite+TypeScript+Tailwind）
- 删除 api/webui/ 中旧的打包静态资源
- 更新 .gitignore 忽略 api/webui/ 构建输出和 webui/node_modules
- 更新 README 增加前端构建说明

webui/src/components/config/CrawlerConfigPanel.tsx

@@ -0,0 +1,415 @@
+import type { ComponentType, ReactNode, KeyboardEvent } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Database, Globe, KeyRound, MessageSquare, Play, Square, X } from 'lucide-react'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Button } from '@/components/ui/button'
+import { useCrawlerStore } from '@/store/crawlerStore'
+import { usePlatforms, useConfigOptions, useStartCrawler, useStopCrawler } from '@/hooks/useCrawler'
+import { ParsedIdList } from './ParsedIdList'
+
+type SectionProps = {
+  title: string
+  description: string
+  icon: ComponentType<{ className?: string }>
+  children: ReactNode
+  className?: string
+}
+
+function Section({ title, description, icon: Icon, children, className = '' }: SectionProps) {
+  return (
+    <section className={`rounded-lg glass-panel float-panel overflow-hidden ${className}`}>
+      <header className="px-4 py-3 border-b border-cyber-border-subtle/50 flex items-center gap-3 bg-cyber-bg-tertiary/30">
+        <div className="h-8 w-8 rounded-md bg-cyber-bg-tertiary border border-cyber-border-subtle flex items-center justify-center flex-shrink-0">
+          <Icon className="h-4 w-4 text-cyber-neon-cyan" />
+        </div>
+        <div className="min-w-0">
+          <div className="text-xs font-mono font-semibold text-cyber-text-primary tracking-wide">
+            {title}
+          </div>
+          <div className="text-[10px] text-cyber-text-muted leading-snug truncate">
+            {description}
+          </div>
+        </div>
+      </header>
+      <div className="p-4 space-y-4">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+type FieldProps = {
+  label: string
+  hint?: string
+  children: ReactNode
+}
+
+function Field({ label, hint, children }: FieldProps) {
+  return (
+    <div className="space-y-2">
+      <div className="space-y-0.5">
+        <Label className="text-xs text-cyber-text-secondary font-mono">
+          {label}
+        </Label>
+        {hint ? (
+          <p className="text-[10px] text-cyber-text-muted leading-snug">
+            {hint}
+          </p>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+type KeywordInputProps = {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+function KeywordInput({ value, onChange, placeholder, disabled }: KeywordInputProps) {
+  const [inputValue, setInputValue] = useState('')
+
+  // 将逗号分隔的字符串转换为数组
+  const keywords = value ? value.split(',').map((k) => k.trim()).filter(Boolean) : []
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      const trimmed = inputValue.trim()
+      if (trimmed && !keywords.includes(trimmed)) {
+        const newKeywords = [...keywords, trimmed]
+        onChange(newKeywords.join(','))
+        setInputValue('')
+      }
+    }
+  }
+
+  const removeKeyword = (keywordToRemove: string) => {
+    const newKeywords = keywords.filter((k) => k !== keywordToRemove)
+    onChange(newKeywords.join(','))
+  }
+
+  return (
+    <div className="space-y-2">
+      <Input
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="h-9 text-xs"
+      />
+      {keywords.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {keywords.map((keyword) => (
+            <span
+              key={keyword}
+              className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-cyber-neon-cyan/10 border border-cyber-neon-cyan/30 text-cyber-neon-cyan text-xs font-mono"
+            >
+              {keyword}
+              {!disabled && (
+                <button
+                  type="button"
+                  onClick={() => removeKeyword(keyword)}
+                  className="hover:text-cyber-neon-pink transition-colors"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function CrawlerConfigPanel() {
+  const { t } = useTranslation('config')
+  const config = useCrawlerStore((state) => state.config)
+  const updateConfig = useCrawlerStore((state) => state.updateConfig)
+  const status = useCrawlerStore((state) => state.status)
+
+  const { data: platforms } = usePlatforms()
+  const { data: options } = useConfigOptions()
+  const { mutate: startCrawler, isPending: isStarting } = useStartCrawler()
+  const { mutate: stopCrawler, isPending: isStopping } = useStopCrawler()
+
+  const isDisabled = status === 'running' || status === 'stopping'
+  const isRunning = status === 'running'
+  const isBusy = isStarting || isStopping || status === 'stopping'
+
+  const handleStart = () => {
+    startCrawler(config)
+  }
+
+  const handleStop = () => {
+    stopCrawler()
+  }
+
+  return (
+    <div className="space-y-4 animate-slide-up">
+      {/* Row 1: Three Config Columns */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* Column 1: Target & Mode Section */}
+        <Section
+          title={t('section.targetMatrix.title')}
+          description={t('section.targetMatrix.description')}
+          icon={Globe}
+        >
+          <Field label={t('field.platform')}>
+            <Select
+              value={config.platform}
+              onValueChange={(value) => updateConfig({ platform: value })}
+              disabled={isDisabled}
+            >
+              <SelectTrigger className="h-9 text-xs">
+                <SelectValue placeholder={t('field.platformPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {platforms?.map((platform) => (
+                  <SelectItem key={platform.value} value={platform.value}>
+                    {platform.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Field label={t('field.crawlType')}>
+              <Select
+                value={config.crawler_type}
+                onValueChange={(value) => updateConfig({ crawler_type: value })}
+                disabled={isDisabled}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue placeholder={t('field.crawlTypePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {options?.crawler_types.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+
+            <Field label={t('field.startPage')}>
+              <Input
+                type="number"
+                min={1}
+                value={config.start_page}
+                onChange={(e) => updateConfig({ start_page: parseInt(e.target.value) || 1 })}
+                disabled={isDisabled}
+                className="h-9 text-xs"
+              />
+            </Field>
+          </div>
+
+          {/* 根据爬虫类型显示不同的输入框 */}
+          {config.crawler_type === 'search' && (
+            <Field label={t('field.keywords')} hint={t('field.keywordsHint')}>
+              <KeywordInput
+                placeholder={t('field.keywordsPlaceholder')}
+                value={config.keywords}
+                onChange={(keywords) => updateConfig({ keywords })}
+                disabled={isDisabled}
+              />
+            </Field>
+          )}
+
+          {config.crawler_type === 'detail' && (
+            <Field label={t('field.specifiedIds')} hint={t('field.specifiedIdsHint')}>
+              <textarea
+                value={config.specified_ids}
+                onChange={(e) => updateConfig({ specified_ids: e.target.value })}
+                disabled={isDisabled}
+                placeholder={t(`field.specifiedIdsPlaceholder.${config.platform}`, t('field.specifiedIdsPlaceholder.default'))}
+                className="min-h-[60px] w-full rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary px-3 py-2 text-xs font-mono text-cyber-text-primary placeholder:text-cyber-text-muted focus-visible:outline-none focus-visible:border-cyber-neon-cyan/50 focus-visible:shadow-cyber-soft disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-none"
+              />
+              <ParsedIdList
+                value={config.specified_ids}
+                platform={config.platform}
+                type="detail"
+                disabled={isDisabled}
+              />
+              {config.platform === 'xhs' && (
+                <div className="mt-2 rounded-lg border border-cyber-neon-orange/30 bg-cyber-neon-orange/5 p-2 text-[10px] leading-snug text-cyber-neon-orange font-mono">
+                  {t('warning.xhsToken')}
+                </div>
+              )}
+            </Field>
+          )}
+
+          {config.crawler_type === 'creator' && (
+            <Field label={t('field.creatorIds')} hint={t('field.creatorIdsHint')}>
+              <textarea
+                value={config.creator_ids}
+                onChange={(e) => updateConfig({ creator_ids: e.target.value })}
+                disabled={isDisabled}
+                placeholder={t(`field.creatorIdsPlaceholder.${config.platform}`, t('field.creatorIdsPlaceholder.default'))}
+                className="min-h-[60px] w-full rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary px-3 py-2 text-xs font-mono text-cyber-text-primary placeholder:text-cyber-text-muted focus-visible:outline-none focus-visible:border-cyber-neon-cyan/50 focus-visible:shadow-cyber-soft disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-none"
+              />
+              <ParsedIdList
+                value={config.creator_ids}
+                platform={config.platform}
+                type="creator"
+                disabled={isDisabled}
+              />
+              {config.platform === 'xhs' && (
+                <div className="mt-2 rounded-lg border border-cyber-neon-orange/30 bg-cyber-neon-orange/5 p-2 text-[10px] leading-snug text-cyber-neon-orange font-mono">
+                  {t('warning.xhsToken')}
+                </div>
+              )}
+            </Field>
+          )}
+        </Section>
+
+        {/* Column 2: Authentication Section */}
+        <Section
+          title={t('section.authMatrix.title')}
+          description={t('section.authMatrix.description')}
+          icon={KeyRound}
+        >
+          <Field label={t('field.loginMethod')}>
+            <Select
+              value={config.login_type}
+              onValueChange={(value) => updateConfig({ login_type: value })}
+              disabled={isDisabled}
+            >
+              <SelectTrigger className="h-9 text-xs">
+                <SelectValue placeholder={t('field.loginMethodPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {options?.login_types.map((type) => (
+                  <SelectItem key={type.value} value={type.value}>
+                    {type.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {config.login_type === 'cookie' ? (
+            <Field label={t('field.cookies')} hint={t('field.cookiesHint')}>
+              <textarea
+                value={config.cookies}
+                onChange={(e) => updateConfig({ cookies: e.target.value })}
+                disabled={isDisabled}
+                placeholder={t('field.cookiesPlaceholder')}
+                className="min-h-[80px] w-full rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary px-3 py-2 text-xs font-mono text-cyber-text-primary placeholder:text-cyber-text-muted focus-visible:outline-none focus-visible:border-cyber-neon-cyan/50 focus-visible:shadow-cyber-soft disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-none"
+              />
+            </Field>
+          ) : null}
+
+          {config.login_type === 'cookie' && (config.platform === 'xhs' || config.platform === 'dy') ? (
+            <div className="rounded-lg border border-cyber-neon-orange/30 bg-cyber-neon-orange/5 p-3 text-[11px] leading-snug text-cyber-neon-orange font-mono">
+              {t('warning.cookieSlider')}
+            </div>
+          ) : null}
+        </Section>
+
+        {/* Column 3: Output & Runtime Section */}
+        <Section
+          title={t('section.outputConfig.title')}
+          description={t('section.outputConfig.description')}
+          icon={Database}
+        >
+          <Field label={t('field.saveFormat')}>
+            <Select
+              value={config.save_option}
+              onValueChange={(value) => updateConfig({ save_option: value })}
+              disabled={isDisabled}
+            >
+              <SelectTrigger className="h-9 text-xs">
+                <SelectValue placeholder={t('field.saveFormatPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {options?.save_options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-3 rounded-lg border border-cyber-border-subtle bg-cyber-bg-tertiary/30 p-2.5 hover:border-cyber-border-DEFAULT transition-colors">
+              <Checkbox
+                checked={config.enable_comments}
+                onCheckedChange={(checked) => {
+                  const isChecked = checked === true
+                  updateConfig({
+                    enable_comments: isChecked,
+                    enable_sub_comments: isChecked ? config.enable_sub_comments : false,
+                  })
+                }}
+                disabled={isDisabled}
+              />
+              <div className="flex items-center gap-2">
+                <MessageSquare className="h-3.5 w-3.5 text-cyber-text-secondary" />
+                <p className="text-xs font-mono text-cyber-text-primary">{t('field.commentExtraction')}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 rounded-lg border border-cyber-border-subtle bg-cyber-bg-tertiary/30 p-2.5 hover:border-cyber-border-DEFAULT transition-colors">
+              <Checkbox
+                checked={config.enable_sub_comments}
+                onCheckedChange={(checked) => updateConfig({ enable_sub_comments: checked === true })}
+                disabled={isDisabled || !config.enable_comments}
+              />
+              <p className="text-xs font-mono text-cyber-text-primary">{t('field.subComments')}</p>
+            </div>
+
+            <div className="flex items-center gap-3 rounded-lg border border-cyber-border-subtle bg-cyber-bg-tertiary/30 p-2.5 hover:border-cyber-border-DEFAULT transition-colors">
+              <Checkbox
+                checked={config.headless}
+                onCheckedChange={(checked) => updateConfig({ headless: checked === true })}
+                disabled={isDisabled}
+              />
+              <div className="min-w-0 flex-1">
+                <p className="text-xs font-mono text-cyber-text-primary">{t('field.headlessMode')}</p>
+                <p className="text-[10px] text-cyber-text-muted leading-snug">
+                  {t('field.headlessModeHint')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </Section>
+      </div>
+
+      {/* Row 2: Start/Stop Button - Full Width */}
+      <div className="w-full">
+        {isRunning ? (
+          <Button
+            onClick={handleStop}
+            disabled={isBusy}
+            className="w-full h-12 bg-cyber-neon-pink text-white font-mono font-bold text-sm tracking-wider hover:bg-cyber-neon-pink/90 hover:shadow-glow-pink-sm transition-all"
+          >
+            <Square className="w-4 h-4" />
+            {isStopping ? t('button.stopping') : t('button.terminate')}
+          </Button>
+        ) : (
+          <Button
+            onClick={handleStart}
+            disabled={isBusy}
+            className="w-full h-12 bg-cyber-neon-cyan text-cyber-bg-primary font-mono font-bold text-sm tracking-wider hover:bg-cyber-neon-cyan/90 hover:shadow-glow-cyan-sm transition-all"
+          >
+            <Play className="w-4 h-4" />
+            {isStarting ? t('button.initiating') : t('button.initiateScan')}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

webui/src/components/config/ParsedIdList.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react'
+import { Check, AlertTriangle, X } from 'lucide-react'
+import { parseMultipleUrls, type ParsedId } from '@/lib/urlParser'
+
+interface ParsedIdListProps {
+  value: string
+  platform: string
+  type: 'detail' | 'creator'
+  onRemove?: (index: number) => void
+  disabled?: boolean
+}
+
+export function ParsedIdList({ value, platform, type, onRemove, disabled }: ParsedIdListProps) {
+  const parsed = useMemo(() => {
+    return parseMultipleUrls(value, platform)
+  }, [value, platform])
+
+  if (parsed.length === 0) return null
+
+  const handleRemove = (index: number) => {
+    if (disabled || !onRemove) return
+
+    const items = value
+      .split(/[,\n]+/)
+      .map(s => s.trim())
+      .filter(Boolean)
+
+    items.splice(index, 1)
+    onRemove(index)
+  }
+
+  return (
+    <div className="space-y-1.5 mt-2">
+      <div className="text-[10px] text-cyber-text-muted font-mono">
+        已识别 {parsed.length} 个{type === 'detail' ? '帖子/视频' : '创作者'}:
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {parsed.map((item, index) => (
+          <ParsedIdTag
+            key={`${item.id}-${index}`}
+            item={item}
+            expectedType={type}
+            onRemove={!disabled ? () => handleRemove(index) : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface ParsedIdTagProps {
+  item: ParsedId
+  expectedType: 'detail' | 'creator'
+  onRemove?: () => void
+}
+
+function ParsedIdTag({ item, expectedType, onRemove }: ParsedIdTagProps) {
+  // 检查类型是否匹配
+  const typeMatch = item.type === 'unknown' ||
+    (expectedType === 'detail' && item.type === 'video') ||
+    (expectedType === 'creator' && item.type === 'creator')
+
+  // 警告状态：小红书需要xsec_token
+  const needsWarning = !item.isValid || !typeMatch
+
+  return (
+    <span
+      className={`
+        inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-mono
+        ${needsWarning
+          ? 'bg-cyber-neon-orange/10 border border-cyber-neon-orange/30 text-cyber-neon-orange'
+          : 'bg-cyber-neon-cyan/10 border border-cyber-neon-cyan/30 text-cyber-neon-cyan'
+        }
+      `}
+      title={item.original}
+    >
+      {needsWarning ? (
+        <AlertTriangle className="w-3 h-3 flex-shrink-0" />
+      ) : (
+        <Check className="w-3 h-3 flex-shrink-0" />
+      )}
+      <span className="max-w-[120px] truncate">
+        {item.id.length > 20 ? item.id.slice(0, 8) + '...' + item.id.slice(-8) : item.id}
+      </span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="hover:text-cyber-neon-pink transition-colors ml-0.5"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </span>
+  )
+}

webui/src/components/console/Terminal.tsx

@@ -0,0 +1,151 @@
+import { useState, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronDown, ChevronUp, Trash2, RefreshCw } from 'lucide-react'
+import { TerminalLine } from './TerminalLine'
+import { useCrawlerStore } from '@/store/crawlerStore'
+import { Button } from '@/components/ui/button'
+import { DataExplorerDialog } from '@/components/data/DataExplorerDialog'
+
+export function Terminal() {
+  const { t } = useTranslation('terminal')
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const logs = useCrawlerStore((state) => state.logs)
+  const clearLogs = useCrawlerStore((state) => state.clearLogs)
+  const restoreLogs = useCrawlerStore((state) => state.restoreLogs)
+  const clearedAfterLogId = useCrawlerStore((state) => state.clearedAfterLogId)
+  const status = useCrawlerStore((state) => state.status)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  // Auto scroll to bottom
+  useEffect(() => {
+    if (scrollRef.current && !isCollapsed) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [logs, isCollapsed])
+
+  return (
+    <div className={`flex flex-col rounded-lg overflow-hidden transition-all duration-300 border border-cyber-border-subtle bg-[#0d1117] ${isCollapsed ? 'h-12' : 'h-full'}`}>
+      {/* Terminal Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 bg-[#161b22] border-b border-[#30363d] flex-shrink-0">
+        <div className="flex items-center gap-3">
+          {/* Window buttons */}
+          <div className="flex gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-cyber-neon-pink/80" />
+            <span className="w-2.5 h-2.5 rounded-full bg-cyber-neon-orange/80" />
+            <span className="w-2.5 h-2.5 rounded-full bg-cyber-neon-green/80" />
+          </div>
+          <span className="text-xs text-[#8b949e] font-mono tracking-wider">
+            {t('header.title')}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Log count & status */}
+          <div className="flex items-center gap-3 text-xs font-mono">
+            <span className="text-[#8b949e]">{t('header.entries', { count: logs.length })}</span>
+            {status === 'running' && (
+              <div className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 bg-cyber-neon-green rounded-full shadow-glow-green-sm animate-pulse-fast" />
+                <span className="text-cyber-neon-green">{t('header.active')}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Data Explorer */}
+          <DataExplorerDialog />
+
+          {/* Restore logs - 只在有清除标记时显示 */}
+          {clearedAfterLogId !== null && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={restoreLogs}
+              className="h-7 px-2 text-[#8b949e] hover:text-[#00ffff] hover:bg-[#00ffff]/10"
+              title={t('header.restore')}
+            >
+              <RefreshCw className="w-4 h-4" />
+            </Button>
+          )}
+
+          {/* Clear logs */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearLogs}
+            disabled={logs.length === 0}
+            className="h-7 px-2 text-[#8b949e] hover:text-[#ff0080] hover:bg-[#ff0080]/10 disabled:opacity-30"
+            title={t('header.clear')}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+
+          {/* Collapse toggle */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="h-7 px-2 text-[#8b949e] hover:text-[#00ffff] hover:bg-[#00ffff]/10"
+          >
+            {isCollapsed ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronUp className="w-4 h-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Terminal Content - only show when not collapsed */}
+      {!isCollapsed && (
+        <>
+          <div
+            ref={scrollRef}
+            className="flex-1 overflow-auto p-4 font-mono text-sm terminal-scroll bg-[#0d1117] min-h-0"
+          >
+            {/* ASCII Art Banner when empty */}
+            {logs.length === 0 ? (
+              <div className="space-y-4">
+                <pre className="text-cyber-neon-cyan/70 text-xs leading-tight">
+{`  ╔══════════════════════════════════════════════════════╗
+  ║   __  __          _ _       ____                     ║
+  ║  |  \\/  | ___  __| (_) __ _/ ___|_ __ __ ___      __ ║
+  ║  | |\\/| |/ _ \\/ _\` | |/ _\` | |   | '__/ _\` \\ \\ /\\ / / ║
+  ║  | |  | |  __/ (_| | | (_| | |___| | | (_| |\\ V  V /  ║
+  ║  |_|  |_|\\___|\\__,_|_|\\__,_|\\____|_|  \\__,_| \\_/\\_/   ║
+  ║                                                      ║
+  ║          [ NEURAL EXTRACTION UNIT v1.0 ]             ║
+  ╚══════════════════════════════════════════════════════╝`}
+                </pre>
+                <div className="text-[#c9d1d9] text-xs space-y-1">
+                  <p className="text-cyber-neon-green/70">{t('banner.systemInit')}</p>
+                  <p className="text-[#8b949e]">{t('banner.configHint')}</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-0.5">
+                {logs.map((log) => (
+                  <TerminalLine key={log.id} log={log} />
+                ))}
+              </div>
+            )}
+
+            {/* Active Cursor */}
+            {status === 'running' && (
+              <div className="flex items-center gap-1 mt-3">
+                <span className="text-cyber-neon-green/80">root@crawler:~$</span>
+                <span className="w-2 h-4 bg-cyber-neon-green/80 cursor-blink" />
+              </div>
+            )}
+          </div>
+
+          {/* Terminal Footer */}
+          <div className="px-4 py-2 border-t border-[#30363d] bg-[#161b22] flex items-center justify-end flex-shrink-0">
+            <div className="text-xs font-mono text-[#8b949e]">
+              {status.toUpperCase()}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

webui/src/components/console/TerminalLine.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils'
+import type { LogEntry } from '@/types/crawler'
+
+interface TerminalLineProps {
+  log: LogEntry
+}
+
+const levelConfig: Record<string, { text: string; bg: string; glow: string }> = {
+  info: {
+    text: 'text-cyber-neon-cyan',
+    bg: 'bg-cyber-neon-cyan/10',
+    glow: 'shadow-[0_0_3px_rgba(0,255,255,0.3)]'
+  },
+  success: {
+    text: 'text-cyber-neon-green',
+    bg: 'bg-cyber-neon-green/10',
+    glow: 'shadow-[0_0_3px_rgba(0,255,65,0.3)]'
+  },
+  warning: {
+    text: 'text-cyber-neon-orange',
+    bg: 'bg-cyber-neon-orange/10',
+    glow: 'shadow-[0_0_3px_rgba(255,152,0,0.3)]'
+  },
+  error: {
+    text: 'text-cyber-neon-pink',
+    bg: 'bg-cyber-neon-pink/10',
+    glow: 'shadow-[0_0_3px_rgba(255,0,128,0.3)]'
+  },
+  debug: {
+    text: 'text-[#8b949e]',
+    bg: 'bg-[#21262d]',
+    glow: ''
+  },
+}
+
+const levelIcons: Record<string, string> = {
+  info: 'DATA',
+  success: 'OK',
+  warning: 'WARN',
+  error: 'ERR',
+  debug: 'DBG',
+}
+
+export function TerminalLine({ log }: TerminalLineProps) {
+  const config = levelConfig[log.level] || levelConfig.info
+
+  return (
+    <div className="flex gap-2 text-xs leading-relaxed font-mono group hover:bg-[#21262d]/50 px-1 -mx-1 rounded transition-colors">
+      {/* Timestamp */}
+      <span className="text-[#8b949e] flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity">
+        [{log.timestamp}]
+      </span>
+
+      {/* Level badge */}
+      <span className={cn(
+        'flex-shrink-0 w-14 px-1 rounded text-center',
+        config.bg,
+        config.text,
+        config.glow
+      )}>
+        [{levelIcons[log.level]}]
+      </span>
+
+      {/* Message */}
+      <span className={cn('break-all', config.text)}>
+        {log.message}
+      </span>
+    </div>
+  )
+}

webui/src/components/data/DataExplorer.tsx

@@ -0,0 +1,157 @@
+import { useState, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { FolderOpen, RefreshCw } from 'lucide-react'
+import { dataApi } from '@/lib/api'
+import { FileCard } from './FileCard'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+
+// 从文件名提取类别
+function extractCategory(filename: string): string {
+  // 文件名格式: search_comments_xxx, search_creators_xxx, search_videos_xxx 等
+  const match = filename.match(/^(search_\w+?)_/)
+  if (match) {
+    return match[1]
+  }
+  // 其他格式尝试提取前缀
+  const parts = filename.split('_')
+  if (parts.length >= 2) {
+    return `${parts[0]}_${parts[1]}`
+  }
+  return 'other'
+}
+
+// 类别显示名称
+function getCategoryLabel(category: string): string {
+  const labels: Record<string, string> = {
+    'search_comments': 'Comments',
+    'search_creators': 'Creators',
+    'search_videos': 'Videos',
+    'search_contents': 'Contents',
+    'search_notes': 'Notes',
+    'other': 'Other',
+  }
+  return labels[category] || category.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+}
+
+export function DataExplorer() {
+  const { t } = useTranslation('data')
+  const [activeTab, setActiveTab] = useState<string>('all')
+
+  const { data, isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['dataFiles'],
+    queryFn: async () => {
+      const { data } = await dataApi.getFiles()
+      return data.files
+    },
+  })
+
+  const files = data || []
+
+  // 按类别分组文件
+  const { categories, groupedFiles } = useMemo(() => {
+    const grouped: Record<string, typeof files> = {}
+
+    files.forEach(file => {
+      const category = extractCategory(file.name)
+      if (!grouped[category]) {
+        grouped[category] = []
+      }
+      grouped[category].push(file)
+    })
+
+    // 按文件数量排序类别
+    const sortedCategories = Object.keys(grouped).sort((a, b) =>
+      grouped[b].length - grouped[a].length
+    )
+
+    return { categories: sortedCategories, groupedFiles: grouped }
+  }, [files])
+
+  // 当前显示的文件
+  const displayFiles = activeTab === 'all' ? files : (groupedFiles[activeTab] || [])
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-mono font-bold text-cyber-neon-cyan glow-text-cyan tracking-wider">
+            {t('explorer.title')}
+          </h2>
+          <Badge variant="default" className="font-mono">
+            {t('explorer.records', { count: files.length })}
+          </Badge>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          disabled={isRefetching}
+          className="font-mono"
+        >
+          <RefreshCw className={`w-4 h-4 ${isRefetching ? 'animate-spin' : ''}`} />
+          {t('explorer.rescan')}
+        </Button>
+      </div>
+
+      {/* Category Tabs */}
+      {files.length > 0 && categories.length > 1 && (
+        <div className="flex items-center gap-2 mb-4 flex-wrap">
+          <button
+            onClick={() => setActiveTab('all')}
+            className={`px-3 py-1.5 rounded-md text-xs font-mono transition-all ${
+              activeTab === 'all'
+                ? 'bg-cyber-neon-cyan text-black font-bold'
+                : 'bg-cyber-bg-tertiary text-cyber-text-secondary hover:text-cyber-text-primary border border-cyber-border-subtle hover:border-cyber-neon-cyan/50'
+            }`}
+          >
+            {t('explorer.allCategories')} ({files.length})
+          </button>
+          {categories.map(category => (
+            <button
+              key={category}
+              onClick={() => setActiveTab(category)}
+              className={`px-3 py-1.5 rounded-md text-xs font-mono transition-all ${
+                activeTab === category
+                  ? 'bg-cyber-neon-cyan text-black font-bold'
+                  : 'bg-cyber-bg-tertiary text-cyber-text-secondary hover:text-cyber-text-primary border border-cyber-border-subtle hover:border-cyber-neon-cyan/50'
+              }`}
+            >
+              {getCategoryLabel(category)} ({groupedFiles[category].length})
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-cyber-text-muted font-mono animate-pulse">
+            {t('explorer.loading')}
+          </div>
+        </div>
+      ) : files.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center text-center">
+          <div className="relative">
+            <FolderOpen className="w-16 h-16 text-cyber-neon-cyan/30 mb-4" />
+            <div className="absolute inset-0 blur-xl bg-cyber-neon-cyan/10" />
+          </div>
+          <h3 className="text-lg font-mono font-medium text-cyber-neon-cyan mb-2">
+            {t('explorer.noData')}
+          </h3>
+          <p className="text-sm text-cyber-text-muted max-w-md font-mono">
+            {t('explorer.noDataHint')}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {displayFiles.map((file) => (
+            <FileCard key={file.path} file={file} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

webui/src/components/data/DataExplorerDialog.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Database } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { DataExplorer } from './DataExplorer'
+
+export function DataExplorerDialog() {
+  const { t } = useTranslation('data')
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="font-mono text-xs text-[#c9d1d9] border-[#30363d] bg-transparent hover:bg-[#21262d] hover:text-[#00ffff] hover:border-[#00ffff]/50"
+        >
+          <Database className="w-3.5 h-3.5" />
+          {t('dialog.button')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-5xl max-h-[85vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>{t('dialog.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="overflow-auto max-h-[calc(85vh-100px)] pr-2">
+          <DataExplorer />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

webui/src/components/data/FileCard.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FileJson, FileSpreadsheet, FileText, Download, Eye } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { dataApi } from '@/lib/api'
+import { formatFileSize, formatDateTime } from '@/lib/utils'
+import { DataPreviewDialog } from './preview/DataPreviewDialog'
+import type { DataFile } from '@/types/crawler'
+
+interface FileCardProps {
+  file: DataFile
+}
+
+const fileIcons: Record<string, typeof FileJson> = {
+  json: FileJson,
+  csv: FileSpreadsheet,
+  xlsx: FileSpreadsheet,
+  xls: FileSpreadsheet,
+}
+
+const fileStyles: Record<string, { icon: string; border: string; badge: string }> = {
+  json: {
+    icon: 'text-cyber-neon-yellow',
+    border: 'hover:border-cyber-neon-yellow/50',
+    badge: 'border-cyber-neon-yellow/30 bg-cyber-neon-yellow/10 text-cyber-neon-yellow'
+  },
+  csv: {
+    icon: 'text-cyber-neon-green',
+    border: 'hover:border-cyber-neon-green/50',
+    badge: 'border-cyber-neon-green/30 bg-cyber-neon-green/10 text-cyber-neon-green'
+  },
+  xlsx: {
+    icon: 'text-cyber-neon-cyan',
+    border: 'hover:border-cyber-neon-cyan/50',
+    badge: 'border-cyber-neon-cyan/30 bg-cyber-neon-cyan/10 text-cyber-neon-cyan'
+  },
+  xls: {
+    icon: 'text-cyber-neon-cyan',
+    border: 'hover:border-cyber-neon-cyan/50',
+    badge: 'border-cyber-neon-cyan/30 bg-cyber-neon-cyan/10 text-cyber-neon-cyan'
+  },
+}
+
+export function FileCard({ file }: FileCardProps) {
+  const { t } = useTranslation('data')
+  const [previewOpen, setPreviewOpen] = useState(false)
+
+  const Icon = fileIcons[file.type] || FileText
+  const styles = fileStyles[file.type] || {
+    icon: 'text-cyber-text-muted',
+    border: 'hover:border-cyber-neon-cyan/50',
+    badge: 'border-cyber-border-DEFAULT bg-cyber-bg-tertiary text-cyber-text-secondary'
+  }
+
+  // 检查是否支持预览
+  const isPreviewable = ['json', 'csv', 'xlsx', 'xls'].includes(file.type.toLowerCase())
+
+  const handleDownload = () => {
+    const url = dataApi.getDownloadUrl(file.path)
+    window.open(url, '_blank')
+  }
+
+  return (
+    <>
+      <Card className={`relative overflow-hidden card-scan group transition-all ${styles.border} hover:shadow-[0_0_15px_rgb(var(--cyber-neon-cyan)/0.15)]`}>
+        {/* Scan effect overlay */}
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyber-neon-cyan/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 pointer-events-none" />
+
+        <CardContent className="p-4 relative">
+          <div className="flex items-start gap-3">
+            <div className={`p-2 rounded bg-cyber-bg-panel border border-cyber-border-DEFAULT ${styles.icon}`}>
+              <Icon className="w-6 h-6" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="font-mono font-medium text-sm text-cyber-text-primary truncate" title={file.name}>
+                {file.name}
+              </h3>
+              <p className="text-xs text-cyber-text-muted mt-1 font-mono">
+                {formatFileSize(file.size)}
+                {file.record_count !== null && (
+                  <span className="text-cyber-neon-green"> | {t('file.entries', { count: file.record_count })}</span>
+                )}
+              </p>
+              <p className="text-xs text-cyber-text-muted mt-1 font-mono">
+                {formatDateTime(file.modified_at)}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-3 pt-3 border-t border-cyber-border-subtle">
+            <Badge variant="outline" className={`text-[10px] font-mono ${styles.badge}`}>
+              .{file.type.toUpperCase()}
+            </Badge>
+            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              {isPreviewable && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 font-mono text-cyber-neon-cyan hover:text-cyber-neon-cyan hover:bg-cyber-neon-cyan/10"
+                  onClick={() => setPreviewOpen(true)}
+                >
+                  <Eye className="w-3 h-3 mr-1" />
+                  {t('file.preview')}
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 font-mono text-cyber-neon-cyan hover:text-cyber-neon-cyan hover:bg-cyber-neon-cyan/10"
+                onClick={handleDownload}
+              >
+                <Download className="w-3 h-3 mr-1" />
+                {t('file.extract')}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 预览对话框 */}
+      {isPreviewable && (
+        <DataPreviewDialog
+          file={file}
+          open={previewOpen}
+          onOpenChange={setPreviewOpen}
+        />
+      )}
+    </>
+  )
+}

webui/src/components/data/preview/DataPreviewDialog.tsx

@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { Download } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { dataApi } from '@/lib/api'
+import { DataPreviewTable } from './DataPreviewTable'
+import type { DataFile } from '@/types/crawler'
+
+interface DataPreviewDialogProps {
+  file: DataFile
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function DataPreviewDialog({ file, open, onOpenChange }: DataPreviewDialogProps) {
+  const { t } = useTranslation('data')
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['filePreview', file.path],
+    queryFn: async () => {
+      const { data } = await dataApi.getFileContent(file.path, 100)
+      return data
+    },
+    enabled: open,
+  })
+
+  const handleDownload = () => {
+    const url = dataApi.getDownloadUrl(file.path)
+    window.open(url, '_blank')
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl max-h-[85vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <DialogTitle className="font-mono text-cyber-neon-cyan">
+                {file.name}
+              </DialogTitle>
+              <Badge variant="outline" className="font-mono text-[10px]">
+                .{file.type.toUpperCase()}
+              </Badge>
+              {data && (
+                <Badge variant="default" className="font-mono text-[10px]">
+                  {t('preview.records', { count: data.total })}
+                </Badge>
+              )}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleDownload}
+              className="font-mono text-xs"
+            >
+              <Download className="w-3 h-3 mr-1" />
+              {t('preview.download')}
+            </Button>
+          </div>
+        </DialogHeader>
+
+        {/* 内容区域 */}
+        <div className="flex-1 overflow-hidden min-h-0 mt-4">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-cyber-text-muted font-mono animate-pulse">
+                {t('preview.loading')}
+              </div>
+            </div>
+          ) : error ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-cyber-neon-pink font-mono">
+                {t('preview.error')}
+              </div>
+            </div>
+          ) : data ? (
+            <DataPreviewTable
+              data={data.data}
+              columns={data.columns}
+            />
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

webui/src/components/data/preview/DataPreviewTable.tsx

@@ -0,0 +1,104 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Search } from 'lucide-react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Input } from '@/components/ui/input'
+
+interface DataPreviewTableProps {
+  data: Record<string, unknown>[]
+  columns?: string[]
+}
+
+export function DataPreviewTable({ data, columns: propColumns }: DataPreviewTableProps) {
+  const { t } = useTranslation('data')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // 自动获取列名（JSON 可能没有 columns）
+  const columns = useMemo(() => {
+    if (propColumns && propColumns.length > 0) return propColumns
+    if (data.length === 0) return []
+    return Object.keys(data[0])
+  }, [data, propColumns])
+
+  // 过滤数据
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return data
+    const term = searchTerm.toLowerCase()
+    return data.filter(row =>
+      Object.values(row).some(value =>
+        String(value ?? '').toLowerCase().includes(term)
+      )
+    )
+  }, [data, searchTerm])
+
+  // 格式化单元格值
+  const formatCellValue = (value: unknown): string => {
+    if (value === null || value === undefined) return '-'
+    if (typeof value === 'object') return JSON.stringify(value)
+    return String(value)
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 搜索栏 */}
+      <div className="flex-shrink-0 mb-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-cyber-text-muted" />
+          <Input
+            placeholder={t('preview.searchPlaceholder')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-9 h-9 text-xs font-mono"
+          />
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <ScrollArea className="flex-1 border border-cyber-border-DEFAULT rounded-lg">
+        <div className="min-w-full">
+          <table className="w-full text-xs font-mono">
+            <thead className="sticky top-0 bg-cyber-bg-tertiary border-b border-cyber-border-DEFAULT">
+              <tr>
+                <th className="px-3 py-2 text-left text-cyber-text-muted w-12">#</th>
+                {columns.map((col) => (
+                  <th
+                    key={col}
+                    className="px-3 py-2 text-left text-cyber-neon-cyan whitespace-nowrap"
+                  >
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredData.map((row, idx) => (
+                <tr
+                  key={idx}
+                  className="border-b border-cyber-border-subtle hover:bg-cyber-bg-elevated/50 transition-colors"
+                >
+                  <td className="px-3 py-2 text-cyber-text-muted">{idx + 1}</td>
+                  {columns.map((col) => (
+                    <td
+                      key={col}
+                      className="px-3 py-2 text-cyber-text-primary max-w-xs truncate"
+                      title={formatCellValue(row[col])}
+                    >
+                      {formatCellValue(row[col])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </ScrollArea>
+
+      {/* 过滤结果提示 */}
+      {searchTerm && (
+        <div className="flex-shrink-0 mt-2 text-xs text-cyber-text-muted font-mono">
+          {t('preview.showing', { filtered: filteredData.length, total: data.length })}
+        </div>
+      )}
+    </div>
+  )
+}

webui/src/components/layout/AuthorFooter.tsx

@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+import { Sparkles, Heart } from 'lucide-react'
+
+export function AuthorFooter() {
+  const { t } = useTranslation('license')
+
+  return (
+    <footer className="h-24 flex-shrink-0 glass-panel border-t border-cyber-border-subtle">
+      <div className="h-full px-6 flex items-center justify-center gap-6">
+        {/* Author Avatar */}
+        <div className="w-14 h-14 rounded-lg overflow-hidden border-2 border-cyber-neon-cyan/60 flex-shrink-0 shadow-glow-cyan-sm">
+          <img
+            src="/logos/my_logo.png"
+            alt="程序员阿江-Relakkes"
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        {/* Author Info */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-bold text-cyber-text-primary">
+              {t('author.name')}
+            </span>
+            <Sparkles className="w-5 h-5 text-cyber-neon-cyan animate-pulse" />
+          </div>
+          <span className="text-sm text-cyber-text-muted hidden sm:inline">
+            {t('author.description')}
+          </span>
+          <div className="flex items-center gap-2 text-cyber-neon-cyan">
+            <Heart className="w-4 h-4 fill-current animate-pulse" />
+            <span className="text-sm font-medium">
+              {t('author.slogan')}
+            </span>
+          </div>
+        </div>
+
+        {/* Social Links */}
+        <div className="flex items-center gap-3">
+          <a
+            href="https://github.com/NanmiCoder"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-11 h-11 rounded-lg flex items-center justify-center border border-cyber-border-subtle hover:border-cyber-neon-cyan hover:shadow-glow-cyan-sm transition-all bg-cyber-bg-tertiary hover:scale-110"
+            title="GitHub"
+          >
+            <img src="/logos/github.png" alt="GitHub" className="w-6 h-6 object-contain" />
+          </a>
+          <a
+            href="https://space.bilibili.com/434377496"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-11 h-11 rounded-lg flex items-center justify-center border border-cyber-border-subtle hover:border-pink-400 hover:shadow-[0_0_10px_rgba(251,113,133,0.4)] transition-all bg-cyber-bg-tertiary hover:scale-110"
+            title="哔哩哔哩"
+          >
+            <img src="/logos/bilibili_logo.png" alt="Bilibili" className="w-6 h-6 object-contain" />
+          </a>
+          <a
+            href="https://www.xiaohongshu.com/user/profile/5f58bd990000000001003753"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-11 h-11 rounded-lg flex items-center justify-center border border-cyber-border-subtle hover:border-red-400 hover:shadow-[0_0_10px_rgba(248,113,113,0.4)] transition-all bg-cyber-bg-tertiary hover:scale-110"
+            title="小红书"
+          >
+            <img src="/logos/xiaohongshu_logo.png" alt="小红书" className="w-6 h-6 object-contain" />
+          </a>
+          <a
+            href="https://www.douyin.com/user/MS4wLjABAAAATJPY7LAlaa5X-c8uNdWkvz0jUGgpw4eeXIwu_8BhvqE"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-11 h-11 rounded-lg flex items-center justify-center border border-cyber-border-subtle hover:border-cyber-text-primary hover:shadow-[0_0_10px_rgba(255,255,255,0.3)] transition-all bg-cyber-bg-tertiary hover:scale-110"
+            title="抖音"
+          >
+            <img src="/logos/douyin.png" alt="抖音" className="w-6 h-6 object-contain" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}

webui/src/components/layout/LanguageSwitch.tsx

@@ -0,0 +1,36 @@
+import { Globe } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+const languages = [
+  { code: 'zh-CN', label: '中文' },
+  { code: 'en-US', label: 'EN' },
+]
+
+export function LanguageSwitch() {
+  const { i18n } = useTranslation()
+
+  const currentLang = languages.find(l => l.code === i18n.language) || languages[0]
+
+  return (
+    <Select value={i18n.language} onValueChange={(lang) => i18n.changeLanguage(lang)}>
+      <SelectTrigger className="w-20 h-7 text-xs font-mono border-cyber-border-subtle bg-cyber-bg-tertiary/50 hover:border-cyber-neon-cyan/50 transition-colors">
+        <Globe className="w-3 h-3 mr-1 text-cyber-text-secondary" />
+        <SelectValue>{currentLang.label}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {languages.map((lang) => (
+          <SelectItem key={lang.code} value={lang.code} className="text-xs font-mono">
+            {lang.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

webui/src/components/layout/MainContent.tsx

@@ -0,0 +1,13 @@
+import { Terminal } from '@/components/console/Terminal'
+import { useLogWebSocket } from '@/hooks/useWebSocket'
+
+export function MainContent() {
+  // Connect to WebSocket for logs
+  useLogWebSocket()
+
+  return (
+    <main className="flex-1 flex flex-col overflow-hidden min-h-0 relative z-10">
+      <Terminal />
+    </main>
+  )
+}

webui/src/components/layout/Sidebar.tsx

@@ -0,0 +1,88 @@
+import { Bug, Wifi, AlertTriangle, Github } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Badge } from '@/components/ui/badge'
+import { useCrawlerStore } from '@/store/crawlerStore'
+import { useCrawlerStatus } from '@/hooks/useCrawler'
+import { LanguageSwitch } from './LanguageSwitch'
+import { ThemeToggle } from './ThemeToggle'
+
+interface SidebarProps {
+  onShowDisclaimer?: () => void
+}
+
+export function Sidebar({ onShowDisclaimer }: SidebarProps) {
+  const { t } = useTranslation()
+  const { t: tLicense } = useTranslation('license')
+  const status = useCrawlerStore((state) => state.status)
+
+  // Poll status
+  useCrawlerStatus()
+
+  const isRunning = status === 'running'
+
+  return (
+    <header className="h-14 flex-shrink-0 glass-panel border-b border-cyber-border-subtle relative z-10">
+      <div className="h-full px-4 flex items-center justify-between">
+        {/* Left: Logo and GitHub Star */}
+        <div className="flex items-center gap-3">
+          <Bug className="w-5 h-5 text-cyber-neon-cyan" />
+          <span className="font-mono font-bold text-cyber-text-primary tracking-wider text-sm">
+            MediaCrawler
+          </span>
+          <a
+            href="https://github.com/NanmiCoder/MediaCrawler"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 px-2 py-1 rounded-md border border-cyber-border-subtle hover:border-cyber-neon-cyan hover:shadow-glow-cyan-sm transition-all bg-cyber-bg-tertiary"
+          >
+            <Github className="w-4 h-4 text-cyber-text-secondary" />
+            <span className="text-xs font-mono text-cyber-text-secondary">Star</span>
+          </a>
+          {isRunning && (
+            <Badge variant="running" className="text-[10px]">
+              {t('status.active')}
+            </Badge>
+          )}
+          {isRunning && (
+            <span className="w-2 h-2 bg-cyber-neon-green rounded-full shadow-glow-green-sm animate-pulse-fast" />
+          )}
+        </div>
+
+        {/* Center: Warning Text */}
+        <button
+          onClick={onShowDisclaimer}
+          className="flex items-center gap-3 px-4 py-1.5 rounded-lg border border-cyber-neon-orange/50 bg-cyber-neon-orange/10 hover:bg-cyber-neon-orange/20 transition-all cursor-pointer"
+        >
+          <AlertTriangle className="w-4 h-4 text-cyber-neon-orange flex-shrink-0" />
+          <div className="flex items-center gap-4 text-xs font-mono">
+            <span className="text-cyber-neon-orange">
+              <span className="text-cyber-neon-pink font-bold">1.</span> {tLicense('content.line1')}
+            </span>
+            <span className="text-cyber-neon-orange">
+              <span className="text-cyber-neon-pink font-bold">2.</span> {tLicense('content.line2')}
+            </span>
+          </div>
+        </button>
+
+        {/* Right: Actions and Status */}
+        <div className="flex items-center gap-3">
+          {/* Theme Toggle */}
+          <ThemeToggle />
+          {/* Language Switch */}
+          <LanguageSwitch />
+
+          {/* Status Info */}
+          <div className="hidden lg:flex items-center gap-2 text-xs font-mono">
+            <span className="text-cyber-text-muted">{t('sidebar.api')}:</span>
+            <span className="text-cyber-neon-green">v1.0.0</span>
+            <div className="flex items-center gap-1.5">
+              <Wifi className="w-3 h-3 text-cyber-text-secondary" />
+              <span className="text-cyber-text-secondary">{t('sidebar.local')}</span>
+              <span className="status-dot status-dot-online" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

webui/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,43 @@
+import { Sun, Moon, Monitor } from 'lucide-react'
+import { useThemeStore } from '@/store/themeStore'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+type Theme = 'light' | 'dark' | 'system'
+
+const themes: { value: Theme; label: string; icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'Auto', icon: Monitor },
+]
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useThemeStore()
+
+  const currentTheme = themes.find(t => t.value === theme) || themes[0]
+  const Icon = currentTheme.icon
+
+  return (
+    <Select value={theme} onValueChange={(value: Theme) => setTheme(value)}>
+      <SelectTrigger className="w-20 h-7 text-xs font-mono border-cyber-border-subtle bg-cyber-bg-tertiary/50 hover:border-cyber-neon-cyan/50 transition-colors">
+        <Icon className="w-3 h-3 mr-1 text-cyber-text-secondary" />
+        <SelectValue>{currentTheme.label}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {themes.map(({ value, label, icon: ItemIcon }) => (
+          <SelectItem key={value} value={value} className="text-xs font-mono">
+            <div className="flex items-center gap-2">
+              <ItemIcon className="w-3 h-3" />
+              {label}
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

webui/src/components/license/LicenseDisclaimer.tsx

@@ -0,0 +1,144 @@
+import { useTranslation } from 'react-i18next'
+import { ShieldAlert, ExternalLink } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+const LICENSE_KEY = 'mediacrawler_license_accepted'
+
+// 检查是否已经接受协议
+export function isLicenseAccepted(): boolean {
+  return localStorage.getItem(LICENSE_KEY) === 'true'
+}
+
+// 清除协议接受状态
+export function clearLicenseAccepted(): void {
+  localStorage.removeItem(LICENSE_KEY)
+}
+
+interface LicenseDisclaimerProps {
+  onAccept: () => void
+}
+
+export function LicenseDisclaimer({ onAccept }: LicenseDisclaimerProps) {
+  const { t } = useTranslation('license')
+
+  const handleConfirm = () => {
+    localStorage.setItem(LICENSE_KEY, 'true')
+    onAccept()
+  }
+
+  const handleDecline = () => {
+    // 尝试关闭当前标签页（不会关闭整个浏览器，只关闭当前tab）
+    try {
+      // 方式1: 直接关闭当前标签页
+      window.close()
+
+      // 方式2: 将当前标签页导航到空白页
+      setTimeout(() => {
+        window.location.href = 'about:blank'
+      }, 100)
+    } catch {
+      // 忽略错误
+    }
+
+    // 如果无法关闭（浏览器安全限制），显示拒绝访问页面
+    setTimeout(() => {
+      document.body.innerHTML = `
+        <div style="
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100vh;
+          background: #0d1117;
+          color: #f85149;
+          font-family: 'JetBrains Mono', monospace;
+          text-align: center;
+          padding: 20px;
+        ">
+          <div style="font-size: 48px; margin-bottom: 20px;">⛔</div>
+          <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">访问已拒绝</div>
+          <div style="font-size: 14px; color: #8b949e;">您未同意使用条款，请关闭此标签页</div>
+        </div>
+      `
+    }, 200)
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/95 backdrop-blur-sm flex items-center justify-center z-[100] overflow-y-auto py-8">
+      <div className="bg-cyber-bg-panel border-2 border-cyber-neon-pink rounded-lg shadow-cyber-card p-6 max-w-2xl w-full mx-4 relative">
+        {/* Corner decorations - Pink/Red theme for seriousness */}
+        <div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-cyber-neon-pink" />
+        <div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-cyber-neon-pink" />
+        <div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-cyber-neon-pink" />
+        <div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-cyber-neon-pink" />
+
+        {/* Header with warning icon */}
+        <div className="flex items-center justify-center gap-3 mb-4">
+          <ShieldAlert className="w-8 h-8 text-cyber-neon-pink animate-pulse" />
+          <h2 className="text-xl font-mono font-bold text-cyber-neon-pink">
+            {t('title')}
+          </h2>
+        </div>
+
+        {/* Warning subtitle */}
+        <div className="text-center mb-4">
+          <span className="text-base font-mono text-cyber-neon-orange">
+            {t('warning')}
+          </span>
+        </div>
+
+        {/* Content box */}
+        <div className="bg-black/50 border border-cyber-neon-pink/30 rounded-lg p-4 mb-4">
+          <ul className="space-y-2 text-sm font-mono">
+            <li className="flex items-start gap-2">
+              <span className="text-cyber-neon-pink font-bold">1.</span>
+              <span className="text-cyber-text-primary">{t('content.line1')}</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-cyber-neon-pink font-bold">2.</span>
+              <span className="text-cyber-text-primary">{t('content.line2')}</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-cyber-neon-pink font-bold">3.</span>
+              <span className="text-cyber-text-primary">{t('content.line3')}</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-cyber-neon-pink font-bold">4.</span>
+              <span className="text-cyber-text-primary">{t('content.line4')}</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* License Link */}
+        <div className="flex justify-center mb-6">
+          <a
+            href="https://github.com/NanmiCoder/MediaCrawler/blob/main/LICENSE"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-cyber-neon-cyan hover:underline text-sm font-mono"
+          >
+            <ExternalLink className="w-4 h-4" />
+            {t('license')}
+          </a>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-4">
+          <Button
+            onClick={handleDecline}
+            variant="outline"
+            className="flex-1 font-mono border-cyber-neon-pink/50 text-cyber-neon-pink hover:bg-cyber-neon-pink/10"
+          >
+            {t('decline')}
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            className="flex-1 font-mono bg-cyber-neon-green text-black font-bold hover:bg-cyber-neon-green/90"
+          >
+            {t('confirm')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

webui/src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

webui/src/components/ui/badge.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-sm border px-2 py-0.5 text-xs font-mono transition-colors focus:outline-none',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-cyber-neon-cyan/30 bg-cyber-neon-cyan/10 text-cyber-neon-cyan',
+        secondary:
+          'border-cyber-border-DEFAULT bg-cyber-bg-tertiary text-cyber-text-secondary',
+        destructive:
+          'border-cyber-neon-pink/30 bg-cyber-neon-pink/10 text-cyber-neon-pink',
+        outline:
+          'border-cyber-border-DEFAULT text-cyber-text-primary',
+        success:
+          'border-cyber-neon-green/30 bg-cyber-neon-green/10 text-cyber-neon-green shadow-glow-green-sm',
+        warning:
+          'border-cyber-neon-orange/30 bg-cyber-neon-orange/10 text-cyber-neon-orange',
+        idle:
+          'border-cyber-border-DEFAULT bg-cyber-bg-tertiary text-cyber-text-muted',
+        running:
+          'border-cyber-neon-green/50 bg-cyber-neon-green/20 text-cyber-neon-green shadow-glow-green-sm animate-pulse-fast',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

webui/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyber-neon-cyan disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-cyber-neon-cyan/20 text-cyber-neon-cyan border border-cyber-neon-cyan/50 hover:bg-cyber-neon-cyan/30 hover:shadow-glow-cyan-sm active:scale-95',
+        destructive:
+          'bg-cyber-neon-pink/20 text-cyber-neon-pink border border-cyber-neon-pink/50 hover:bg-cyber-neon-pink/30 hover:shadow-glow-pink-sm active:scale-95',
+        outline:
+          'border border-cyber-border-DEFAULT bg-transparent hover:bg-cyber-bg-tertiary hover:border-cyber-neon-cyan/50 hover:text-cyber-neon-cyan',
+        secondary:
+          'bg-cyber-neon-green/20 text-cyber-neon-green border border-cyber-neon-green/50 hover:bg-cyber-neon-green/30 hover:shadow-glow-green-sm active:scale-95',
+        ghost:
+          'hover:bg-cyber-bg-tertiary hover:text-cyber-neon-cyan',
+        link:
+          'text-cyber-neon-cyan underline-offset-4 hover:underline',
+        glow:
+          'bg-cyber-neon-cyan/20 text-cyber-neon-cyan border border-cyber-neon-cyan/50 shadow-glow-cyan-sm hover:shadow-glow-cyan hover:bg-cyber-neon-cyan/30 active:scale-95',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-12 rounded-md px-8 text-base',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

webui/src/components/ui/card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border border-cyber-border-DEFAULT bg-cyber-bg-tertiary text-cyber-text-primary shadow-cyber-card transition-all hover:border-cyber-neon-cyan/30',
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight text-cyber-neon-cyan',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-cyber-text-muted', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

webui/src/components/ui/checkbox.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <label className="inline-flex items-center cursor-pointer">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          ref={ref}
+          checked={checked}
+          onChange={(e) => onCheckedChange?.(e.target.checked)}
+          {...props}
+        />
+        <div
+          className={cn(
+            'h-4 w-4 shrink-0 rounded-sm border border-cyber-border-DEFAULT bg-cyber-bg-tertiary ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyber-neon-cyan disabled:cursor-not-allowed disabled:opacity-50 peer-checked:bg-cyber-neon-cyan/20 peer-checked:border-cyber-neon-cyan peer-checked:shadow-glow-cyan-sm flex items-center justify-center transition-all',
+            className
+          )}
+        >
+          <Check className={cn('h-3 w-3 text-cyber-neon-cyan transition-opacity', checked ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      </label>
+    )
+  }
+)
+Checkbox.displayName = 'Checkbox'
+
+export { Checkbox }

webui/src/components/ui/dialog.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 glass-panel-dark float-panel rounded-lg p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 hover:text-cyber-neon-cyan focus:outline-none focus:ring-2 focus:ring-cyber-neon-cyan focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight text-cyber-neon-cyan font-mono',
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-cyber-text-secondary', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

webui/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary px-3 py-2 text-sm font-mono text-cyber-text-primary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-cyber-text-muted focus-visible:outline-none focus-visible:border-cyber-neon-cyan focus-visible:shadow-[0_0_10px_rgb(var(--cyber-neon-cyan)/0.2)] disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export { Input }

webui/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva(
+  'text-sm font-mono leading-none text-cyber-text-secondary peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

webui/src/components/ui/scroll-area.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

webui/src/components/ui/select.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-tertiary px-3 py-2 text-sm font-mono text-cyber-text-primary ring-offset-background placeholder:text-cyber-text-muted focus:outline-none focus:border-cyber-neon-cyan focus:shadow-[0_0_10px_rgb(var(--cyber-neon-cyan)/0.2)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 text-cyber-text-muted" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1 text-cyber-text-muted',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1 text-cyber-text-muted',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-cyber-border-DEFAULT bg-cyber-bg-panel text-cyber-text-primary shadow-[0_0_20px_rgba(0,0,0,0.5)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-cyber-neon-cyan', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-mono outline-none focus:bg-cyber-neon-cyan/20 focus:text-cyber-neon-cyan data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-colors',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4 text-cyber-neon-cyan" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-cyber-border-DEFAULT', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

webui/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '@/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-md bg-cyber-bg-tertiary border border-cyber-border-DEFAULT p-1 text-cyber-text-muted',
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-mono ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyber-neon-cyan disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-cyber-neon-cyan/20 data-[state=active]:text-cyber-neon-cyan data-[state=active]:shadow-glow-cyan-sm',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyber-neon-cyan',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }