feat: Jenkins Job 批量发布 + 全局 AI 智能助手 (v0.3.0)

参考 opsx-jenkins 发布清单： - 批量发布页新增「粘贴清单」模式：多行 Job 名粘贴（#注释/内联对/ 名称版本交替）、TAG/分支切换、分支快捷 chips、700ms 防抖解析预览、串行/并发发布；未导入的 Jenkins Job 自动创建流水线后触发 - 解析器移植 opsx-jenkins parser（参数头识别/成对校验/重名检测）全局 AI 智能助手（右下角悬浮）： - 自然语言「发布一下 cex-agent-server 等 5 个」→ 解析服务+分支+环境 → 发布计划卡片（匹配状态着色）→ 确认 → 真实触发 → runId 回显 + 跳转发布记录 - LLM 接入：OpenAI 兼容接口（DeepSeek/GLM/Qwen），系统设置页配置 API Key（加密存储）+ 测试连接；未配置时自动降级本地规则模式，服务名/分支关键词匹配，功能不中断 - 候选池 = 流水线 + Jenkins Job（60s 缓存）；精确/忽略大小写/包含三级匹配新端点：POST /api/ai/chat、/api/ai/release、/api/batch/parse、 POST /api/settings/test-llm；SystemSetting 扩展 LLM 字段
2026-10-27 09:07:42 +08:00
1 parent 88d8fc282e
commit 581d0a8351
@@ -0,0 +1,267 @@
+import { useState, useRef, useEffect } from 'react';
+import { Sparkles, Send, X, Loader2, CheckCircle2, XCircle, History, Bot } from 'lucide-react';
+import { toast } from 'sonner';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api';
+
+interface Props {
+  onNavigate?: (module: string) => void;
+}
+
+interface ChatItem {
+  role: 'user' | 'assistant';
+  content: string;
+  action?: any; // {type:'release', jobs, branch, env}
+  actionState?: 'pending' | 'done' | 'cancelled';
+  result?: { triggered: any[]; failed: any[] };
+}
+
+const suggestions = [
+  '发布 aiops-backend、aiops-web 到 test 分支',
+  '把后端两个服务发到 pre',
+];
+
+export default function AiAssistant({ onNavigate }: Props) {
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const [messages, setMessages] = useState<ChatItem[]>([
+    { role: 'assistant', content: '你好，我是 FlowStack 智能发布助手。告诉我你要发布哪些服务（支持自然语言），例如：发布 cex-agent-server、cex-agent-api 到 pre 分支。' },
+  ]);
+  const listRef = useRef<HTMLDivElement>(null);
+  const queryClient = useQueryClient();
+
+  const { data: settings } = useQuery({
+    queryKey: ['settings'],
+    queryFn: apiClient.getSettings,
+    enabled: open,
+  });
+  const aiConnected = settings?.llmEnabled && settings?.llmApiKeySet;
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages, open]);
+
+  const send = async (text?: string) => {
+    const content = (text ?? input).trim();
+    if (!content || sending) return;
+    setInput('');
+    const userMsg: ChatItem = { role: 'user', content };
+    const next = [...messages, userMsg];
+    setMessages(next);
+    setSending(true);
+    try {
+      const history = next.slice(-10).map((m) => ({ role: m.role, content: m.content }));
+      const res = await apiClient.aiChat(history);
+      setMessages((prev) => [...prev, { role: 'assistant', content: res.reply, action: res.action, actionState: res.action ? 'pending' : undefined }]);
+    } catch (err) {
+      setMessages((prev) => [...prev, { role: 'assistant', content: '请求失败：' + (err as Error).message }]);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const confirmRelease = async (index: number) => {
+    const msg = messages[index];
+    if (!msg?.action) return;
+    const jobs = msg.action.jobs.filter((j: any) => j.matched || j.source === 'jenkins' || true).map((j: any) => j.name);
+    setMessages((prev) => prev.map((m, i) => (i === index ? { ...m, actionState: 'done' } : m)));
+    try {
+      const res = await apiClient.aiRelease({
+        jobs,
+        branch: msg.action.branch,
+        env: msg.action.env,
+        autoCreate: true,
+      });
+      setMessages((prev) => prev.map((m, i) => (i === index ? { ...m, result: res } : m)));
+      const okN = res.triggered?.length || 0;
+      const failN = res.failed?.length || 0;
+      if (okN > 0) toast.success(`已触发 ${okN} 个服务${failN ? `，${failN} 个失败` : ''}`);
+      queryClient.invalidateQueries({ queryKey: ['runs'] });
+      queryClient.invalidateQueries({ queryKey: ['pipelines'] });
+    } catch (err) {
+      toast.error('发布失败：' + (err as Error).message);
+      setMessages((prev) => prev.map((m, i) => (i === index ? { ...m, actionState: 'pending' } : m)));
+    }
+  };
+
+  const cancelAction = (index: number) => {
+    setMessages((prev) => prev.map((m, i) => (i === index ? { ...m, actionState: 'cancelled' } : m)));
+  };
+
+  return (
+    <>
+      {/* 悬浮按钮 */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-transform hover:scale-105"
+        style={{ background: 'linear-gradient(135deg, #0969da, #8250df)' }}
+        title="FlowStack 智能助手"
+      >
+        {open ? <X className="w-5 h-5 text-white" /> : <Sparkles className="w-5 h-5 text-white" />}
+      </button>
+
+      {/* 对话面板 */}
+      {open && (
+        <div
+          className="fixed bottom-22 right-6 z-50 w-[400px] rounded-xl border shadow-2xl flex flex-col overflow-hidden"
+          style={{ bottom: 84, height: 520, background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}
+        >
+          {/* 头部 */}
+          <div className="px-4 py-3 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-color)', background: 'linear-gradient(135deg, rgba(9,105,218,0.06), rgba(130,80,223,0.06))' }}>
+            <div className="w-7 h-7 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #0969da, #8250df)' }}>
+              <Bot className="w-4 h-4 text-white" />
+            </div>
+            <div className="flex-1">
+              <div className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>FlowStack 智能助手</div>
+              <div className="text-[10px] flex items-center gap-1" style={{ color: aiConnected ? '#1a7f37' : 'var(--text-tertiary)' }}>
+                <span className="w-1.5 h-1.5 rounded-full" style={{ background: aiConnected ? '#1a7f37' : '#9a6700' }} />
+                {aiConnected ? 'AI 已连接' : '本地规则模式（系统设置可接入 AI）'}
+              </div>
+            </div>
+            <button onClick={() => setOpen(false)} className="p-1 rounded hover:bg-black/5">
+              <X className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
+            </button>
+          </div>
+
+          {/* 消息列表 */}
+          <div ref={listRef} className="flex-1 overflow-y-auto custom-scrollbar px-4 py-3 space-y-3">
+            {messages.map((m, i) => (
+              <div key={i} className={m.role === 'user' ? 'flex justify-end' : 'flex justify-start'}>
+                <div className="max-w-[85%]">
+                  <div
+                    className="px-3 py-2 rounded-xl text-[12px] leading-5 whitespace-pre-wrap"
+                    style={
+                      m.role === 'user'
+                        ? { background: 'var(--accent-blue)', color: '#fff', borderBottomRightRadius: 4 }
+                        : { background: 'var(--panel-bg-secondary)', color: 'var(--text-primary)', borderBottomLeftRadius: 4 }
+                    }
+                  >
+                    {m.content}
+                  </div>
+
+                  {/* 发布计划卡片 */}
+                  {m.action && m.action.type === 'release' && (
+                    <div className="mt-2 rounded-lg border p-3" style={{ borderColor: 'var(--border-color)', background: 'var(--panel-bg)' }}>
+                      <div className="text-[11px] font-semibold mb-2 flex items-center gap-1" style={{ color: 'var(--text-primary)' }}>
+                        <Sparkles className="w-3 h-3" style={{ color: '#8250df' }} />
+                        发布计划 · {m.action.jobs.length} 个服务
+                        {m.action.branch && <span className="font-normal" style={{ color: 'var(--text-tertiary)' }}>@{m.action.branch}</span>}
+                        {m.action.env && <span className="font-normal" style={{ color: 'var(--text-tertiary)' }}>env:{m.action.env}</span>}
+                      </div>
+                      <div className="flex flex-wrap gap-1.5 mb-2">
+                        {m.action.jobs.map((j: any, ji: number) => (
+                          <span
+                            key={ji}
+                            className="text-[10px] px-2 py-[2px] rounded-md font-mono"
+                            style={{
+                              background: j.matched ? '#dafbe1' : j.source === 'jenkins' ? '#ddf4ff' : '#ffebe9',
+                              color: j.matched ? '#1a7f37' : j.source === 'jenkins' ? '#0969da' : '#cf222e',
+                            }}
+                            title={j.matched ? '已匹配流水线' : j.source === 'jenkins' ? 'Jenkins Job（发布时自动创建流水线）' : '未匹配'}
+                          >
+                            {j.name}
+                          </span>
+                        ))}
+                      </div>
+
+                      {m.actionState === 'pending' && (
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => confirmRelease(i)}
+                            className="px-3 py-1 text-[11px] rounded-md text-white"
+                            style={{ background: 'var(--accent-blue)' }}
+                          >
+                            确认发布
+                          </button>
+                          <button onClick={() => cancelAction(i)} className="px-3 py-1 text-[11px] rounded-md border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
+                            取消
+                          </button>
+                        </div>
+                      )}
+
+                      {m.result && (
+                        <div className="space-y-1">
+                          {m.result.triggered?.map((t: any, ti: number) => (
+                            <div key={ti} className="flex items-center gap-1.5 text-[10px]">
+                              <CheckCircle2 className="w-3 h-3" style={{ color: '#1a7f37' }} />
+                              <span className="font-mono" style={{ color: 'var(--text-secondary)' }}>{t.job}</span>
+                              {t.created && <span className="px-1 rounded" style={{ background: '#ddf4ff', color: '#0969da' }}>自动创建</span>}
+                              <span className="font-mono" style={{ color: 'var(--text-tertiary)' }}>{t.runId}</span>
+                            </div>
+                          ))}
+                          {m.result.failed?.map((f: any, fi: number) => (
+                            <div key={fi} className="flex items-center gap-1.5 text-[10px]">
+                              <XCircle className="w-3 h-3" style={{ color: '#cf222e' }} />
+                              <span className="font-mono" style={{ color: 'var(--text-secondary)' }}>{f.job}</span>
+                              <span style={{ color: '#cf222e' }}>{f.reason}</span>
+                            </div>
+                          ))}
+                          {(m.result.triggered?.length > 0) && (
+                            <button
+                              onClick={() => { onNavigate?.('release-records'); setOpen(false); }}
+                              className="mt-1 flex items-center gap-1 text-[10px] px-2 py-1 rounded border"
+                              style={{ borderColor: 'var(--border-color-light)', color: 'var(--accent-blue)' }}
+                            >
+                              <History className="w-3 h-3" />查看发布记录
+                            </button>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {sending && (
+              <div className="flex justify-start">
+                <div className="px-3 py-2 rounded-xl flex items-center gap-1.5" style={{ background: 'var(--panel-bg-secondary)' }}>
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" style={{ color: 'var(--accent-blue)' }} />
+                  <span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>思考中…</span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 快捷示例 */}
+          {messages.length <= 1 && (
+            <div className="px-4 pb-2 flex flex-wrap gap-1.5">
+              {suggestions.map((s) => (
+                <button
+                  key={s}
+                  onClick={() => send(s)}
+                  className="text-[10px] px-2 py-1 rounded-full border"
+                  style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}
+                >
+                  {s}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* 输入区 */}
+          <div className="px-3 py-2.5 border-t flex items-center gap-2" style={{ borderColor: 'var(--border-color)' }}>
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) send(); }}
+              placeholder="描述要发布的服务，如：发布 agent 三件套到 pre"
+              className="flex-1 px-3 py-2 text-[12px] rounded-lg border outline-none"
+              style={{ background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' }}
+            />
+            <button
+              onClick={() => send()}
+              disabled={sending || !input.trim()}
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-white disabled:opacity-40"
+              style={{ background: 'var(--accent-blue)' }}
+            >
+              <Send className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,212 @@
+import { useEffect, useRef, useState } from 'react';
+import { ClipboardPaste, Play, Loader2, CheckCircle2, XCircle, History, Wand2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useMutation } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api';
+
+interface Props {
+  onViewRecords?: () => void;
+}
+
+const branchHints = ['pre', 'origin/pre', 'test', 'origin/test', 'main'];
+
+const exampleText = 'cex-agent-server\ncex-agent-api\ncex-agent-admin\ncex-cex-web-nextjs\ncex-agent-admin-web';
+
+export default function PasteRelease({ onViewRecords }: Props) {
+  const [text, setText] = useState('');
+  const [refType, setRefType] = useState<'branch' | 'tag'>('branch');
+  const [fixedRef, setFixedRef] = useState('test');
+  const [parallel, setParallel] = useState(false);
+  const [autoCreate, setAutoCreate] = useState(true);
+  const [preview, setPreview] = useState<any>(null);
+  const [parseError, setParseError] = useState('');
+  const [result, setResult] = useState<any>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const inputStyle = { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' };
+
+  // 700ms 防抖自动解析
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (!text.trim()) {
+      setPreview(null);
+      setParseError('');
+      return;
+    }
+    timerRef.current = setTimeout(async () => {
+      try {
+        const res = await apiClient.batchParse({ text, refType, fixedRef });
+        setPreview(res);
+        setParseError('');
+      } catch (err) {
+        setPreview(null);
+        setParseError((err as Error).message);
+      }
+    }, 700);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [text, refType, fixedRef]);
+
+  const releaseMutation = useMutation({
+    mutationFn: () =>
+      apiClient.aiRelease({
+        jobs: (preview?.jobs || []).map((j: any) => j.name),
+        branch: refType === 'branch' ? fixedRef : undefined,
+        parallel,
+        autoCreate,
+      }),
+    onSuccess: (res) => {
+      setResult(res);
+      const okN = res.triggered?.length || 0;
+      const failN = res.failed?.length || 0;
+      if (okN > 0) toast.success(`已触发 ${okN} 个服务${failN ? `，${failN} 个失败` : ''}`);
+      else toast.error('全部触发失败');
+    },
+    onError: (err: Error) => toast.error('发布失败', { description: err.message }),
+  });
+
+  const jobs = preview?.jobs || [];
+  const matchedCount = jobs.filter((j: any) => j.matched || j.autoCreatable).length;
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-4">
+      {/* 粘贴区 */}
+      <div className="rounded-lg border p-5" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <ClipboardPaste className="w-4.5 h-4.5" style={{ color: 'var(--accent-blue)' }} />
+            <h3 className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>发布清单</h3>
+            <span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>每行一个服务；# 开头为注释</span>
+          </div>
+          <button onClick={() => setText(exampleText)} className="text-[11px] px-2 py-1 rounded border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
+            填入示例
+          </button>
+        </div>
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder={refType === 'branch' ? 'cex-agent-server\ncex-agent-api\ncex-agent-admin' : 'cex-openapi-api\nV2.08\ncex-openapi-svc\nV2.09'}
+          rows={7}
+          className="w-full px-3 py-2.5 text-[12px] font-mono rounded-md border outline-none resize-y"
+          style={inputStyle}
+        />
+
+        {/* 配置行 */}
+        <div className="flex items-center gap-3 mt-3 flex-wrap">
+          <div className="flex items-center rounded-md border overflow-hidden" style={{ borderColor: 'var(--border-color-light)' }}>
+            {(['branch', 'tag'] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() => setRefType(t)}
+                className="px-3 py-1 text-[11px] font-medium"
+                style={{ background: refType === t ? 'var(--accent-blue)' : 'transparent', color: refType === t ? '#fff' : 'var(--text-secondary)' }}
+              >
+                {t === 'branch' ? '分支' : 'TAG'}
+              </button>
+            ))}
+          </div>
+          {refType === 'branch' && (
+            <>
+              <input value={fixedRef} onChange={(e) => setFixedRef(e.target.value)} placeholder="分支名" className="px-2.5 py-1 text-[11px] rounded-md border outline-none font-mono w-28" style={inputStyle} />
+              {branchHints.map((b) => (
+                <button key={b} onClick={() => setFixedRef(b)} className="text-[10px] px-2 py-[3px] rounded-full border font-mono"
+                  style={{ borderColor: fixedRef === b ? 'var(--accent-blue)' : 'var(--border-color-light)', color: fixedRef === b ? 'var(--accent-blue)' : 'var(--text-tertiary)' }}>
+                  {b}
+                </button>
+              ))}
+            </>
+          )}
+          <label className="flex items-center gap-1.5 text-[11px] ml-auto cursor-pointer" style={{ color: 'var(--text-secondary)' }}>
+            <input type="checkbox" checked={autoCreate} onChange={(e) => setAutoCreate(e.target.checked)} />
+            未导入的 Jenkins Job 自动创建流水线
+          </label>
+        </div>
+        <div className="flex items-center gap-3 mt-2">
+          <label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--text-secondary)' }}>
+            <input type="checkbox" checked={parallel} onChange={(e) => setParallel(e.target.checked)} />
+            并发发布（默认串行，逐个触发）
+          </label>
+        </div>
+      </div>
+
+      {/* 解析预览 */}
+      {(parseError || preview) && (
+        <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: parseError ? '#cf222e' : 'var(--border-color)' }}>
+          <div className="px-4 py-2.5 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
+            <div className="flex items-center gap-2">
+              <Wand2 className="w-3.5 h-3.5" style={{ color: parseError ? '#cf222e' : 'var(--accent-blue)' }} />
+              <span className="text-[12px] font-semibold" style={{ color: 'var(--text-primary)' }}>{parseError ? '解析失败' : '解析结果'}</span>
+              {!parseError && <span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>{preview.count} 个 · 可发布 {matchedCount} 个{preview.param ? ` · 参数 ${preview.param}` : ''}</span>}
+            </div>
+            {!parseError && (
+              <button
+                onClick={() => releaseMutation.mutate()}
+                disabled={releaseMutation.isPending || matchedCount === 0}
+                className="flex items-center gap-1.5 px-3.5 py-1 text-[12px] rounded-md text-white disabled:opacity-50"
+                style={{ background: 'var(--accent-blue)' }}
+              >
+                {releaseMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5" />}
+                开始{parallel ? '并发' : '串行'}发布
+              </button>
+            )}
+          </div>
+          {parseError ? (
+            <div className="px-4 py-3 text-[12px]" style={{ color: '#cf222e' }}>{parseError}</div>
+          ) : (
+            <div>
+              {jobs.map((j: any, i: number) => (
+                <div key={i} className="grid grid-cols-[36px_1fr_130px_110px] gap-2 px-4 py-2 border-t items-center text-[12px]" style={{ borderColor: 'var(--border-color-light)' }}>
+                  <span style={{ color: 'var(--text-tertiary)' }}>{i + 1}</span>
+                  <span className="font-mono" style={{ color: 'var(--text-primary)' }}>{j.name}</span>
+                  <span className="font-mono" style={{ color: 'var(--text-tertiary)' }}>{j.version}</span>
+                  <span className="text-[10px] px-1.5 py-[1px] rounded w-fit" style={{
+                    background: j.matched ? '#dafbe1' : j.autoCreatable ? '#ddf4ff' : '#ffebe9',
+                    color: j.matched ? '#1a7f37' : j.autoCreatable ? '#0969da' : '#cf222e',
+                  }}>
+                    {j.matched ? (j.source === 'jenkins' ? 'Jenkins 已导入' : '流水线') : j.autoCreatable ? 'Jenkins · 将自动创建' : '未找到'}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 执行结果 */}
+      {result && (
+        <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+          <div className="px-4 py-2.5 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
+            <span className="text-[12px] font-semibold" style={{ color: 'var(--text-primary)' }}>
+              触发结果 · 成功 {result.triggered?.length || 0} / 失败 {result.failed?.length || 0}
+            </span>
+            <button onClick={onViewRecords} className="flex items-center gap-1 text-[11px] px-2 py-1 rounded border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--accent-blue)' }}>
+              <History className="w-3 h-3" />查看发布记录
+            </button>
+          </div>
+          {result.triggered?.map((t: any, i: number) => (
+            <div key={i} className="flex items-center gap-2 px-4 py-1.5 border-t text-[11px]" style={{ borderColor: 'var(--border-color-light)' }}>
+              <CheckCircle2 className="w-3.5 h-3.5" style={{ color: '#1a7f37' }} />
+              <span className="font-mono" style={{ color: 'var(--text-primary)' }}>{t.job}</span>
+              {t.created && <span className="text-[9px] px-1 rounded" style={{ background: '#ddf4ff', color: '#0969da' }}>自动创建</span>}
+              <span className="font-mono ml-auto" style={{ color: 'var(--text-tertiary)' }}>{t.runId}</span>
+            </div>
+          ))}
+          {result.failed?.map((f: any, i: number) => (
+            <div key={i} className="flex items-center gap-2 px-4 py-1.5 border-t text-[11px]" style={{ borderColor: 'var(--border-color-light)' }}>
+              <XCircle className="w-3.5 h-3.5" style={{ color: '#cf222e' }} />
+              <span className="font-mono" style={{ color: 'var(--text-primary)' }}>{f.job}</span>
+              <span className="ml-auto" style={{ color: '#cf222e' }}>{f.reason}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {text && !preview && !parseError && (
+        <div className="flex items-center justify-center gap-2 py-4 text-[12px]" style={{ color: 'var(--text-tertiary)' }}>
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />解析中…
+        </div>
+      )}
+    </div>
+  );
+}