@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/components/ChatFlow.tsx

@@ -0,0 +1,587 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { CommandConfig, TimelineItem } from '../types';
+import type { SessionObservability } from '../api/client';
+import { PixelCat } from './PixelCat';
+import { MarkdownView } from './MarkdownView';
+
+// ── Agent 图标映射 ──
+const AGENT_ICONS: Record<string, string> = {
+  chat: '💬', browser_worker: '🌐', code: '⚡', auditor: '🛡️',
+  vision: '👁️', verifier: '✓', document: '📝', research: '🔎',
+  data_analyst: '📊', email_agent: '✉️', github_agent: '🐙',
+};
+function agentIcon(name: string) { return AGENT_ICONS[name] || '🤖'; }
+
+// ── 执行器下拉（图标 + 文字，Portal 渲染避免裁切） ──
+function AgentPicker({ value, agents, onChange, disabled }: {
+  value: string; agents: { name: string; displayName: string }[];
+  onChange: (v: string) => void; disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+  const selected = agents.find(a => a.name === value);
+
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const dropdownH = Math.min(agents.length * 36 + 16, 320);
+    const top = rect.top > dropdownH + 8 ? rect.top - dropdownH - 8 : rect.bottom + 8;
+    setPos({ top, left: rect.left });
+  }, [open, agents.length]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (triggerRef.current?.contains(e.target as Node)) return;
+      if (dropdownRef.current?.contains(e.target as Node)) return;
+      setOpen(false);
+    };
+    const reposition = () => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      const dropdownH = Math.min(agents.length * 36 + 16, 320);
+      const top = rect.top > dropdownH + 8 ? rect.top - dropdownH - 8 : rect.bottom + 8;
+      setPos({ top, left: rect.left });
+    };
+    document.addEventListener('mousedown', handler);
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+    };
+  }, [open, agents.length]);
+
+  return (
+    <div className="relative">
+      <button ref={triggerRef} type="button" disabled={disabled} onClick={() => setOpen(v => !v)}
+        className="flex items-center gap-1.5 rounded-lg border border-sakura/20 bg-white/40 px-2.5 py-1.5 text-[11px] font-semibold text-berry/70 transition hover:border-violet/30 hover:text-violet disabled:opacity-40">
+        <span className="text-sm">{agentIcon(value)}</span>
+        <span>{selected?.displayName || value}</span>
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" className={`transition ${open ? 'rotate-180' : ''}`}>
+          <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+      {open && createPortal(
+        <div ref={dropdownRef}
+          className="nice-select-dropdown"
+          style={{ position: 'fixed', top: `${pos.top}px`, left: `${pos.left}px`, width: '180px', zIndex: 99999 }}>
+          <div className="nice-select-list">
+            {agents.map(a => (
+              <button key={a.name} type="button"
+                onClick={() => { onChange(a.name); setOpen(false); }}
+                className={`nice-select-item ${a.name === value ? 'active' : ''}`}>
+                <span className="text-sm mr-1">{agentIcon(a.name)}</span>
+                <span className="truncate">{a.displayName}</span>
+                {a.name === value && <span className="ml-auto text-violet">✓</span>}
+              </button>
+            ))}
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+}
+
+// ── Thinking 折叠块（DeepSeek 风格：阴影卡片 + 步骤点 + 可折叠） ──
+interface ThinkingStep {
+  type: 'thinking' | 'tool_call' | 'result' | 'iteration' | 'error' | 'verify';
+  label: string;
+  desc: string;
+  tag?: string;
+  time?: string;
+}
+
+function ThinkingBlock({
+  content,
+  streaming,
+  steps,
+  duration,
+}: {
+  content?: string;
+  streaming?: boolean;
+  steps?: ThinkingStep[];
+  duration?: number;
+}) {
+  const [open, setOpen] = useState(true);
+  const [elapsed, setElapsed] = useState(0);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+    }
+  }, [steps, content]);
+
+  // Auto-collapse when done (non-streaming) — handled by initial state
+
+  // Live elapsed timer
+  useEffect(() => {
+    if (!streaming) return;
+    const t = setInterval(() => setElapsed(v => v + 1), 1000);
+    return () => clearInterval(t);
+  }, [streaming]);
+
+  // Clean thinking content: strip raw --- 迭代 N --- markers
+  const cleanContent = content ? content
+    .replace(/--- 迭代 \d+ \([^)]+\) ---/g, '')
+    .replace(/--- 迭代 \d+ ---/g, '')
+    .replace(/\[思考\]/g, '')
+    .replace(/\[工具\]/g, '')
+    .replace(/\[结果\]/g, '')
+    .trim() : '';
+
+  // Step icon per type
+  const stepIcon = (type: string) => {
+    switch (type) {
+      case 'iteration': return '🔄';
+      case 'thinking': return '🧠';
+      case 'tool_call': return '🛠️';
+      case 'verify': return '✅';
+      case 'result': return '🏁';
+      case 'error': return '❌';
+      default: return '○';
+    }
+  };
+
+  // Step dot class per type
+  const stepDotClass = (type: string) => {
+    switch (type) {
+      case 'iteration': return 'iteration';
+      case 'thinking': return streaming ? 'running' : 'done';
+      case 'tool_call': return 'tool_call';
+      case 'verify': return 'verify';
+      case 'result': return 'done';
+      case 'error': return 'error';
+      default: return 'waiting';
+    }
+  };
+
+  // Format duration
+  const formatDur = (s: number) => {
+    if (s < 60) return s.toFixed(1) + '秒';
+    const m = Math.floor(s / 60);
+    const sec = (s % 60).toFixed(0);
+    return m + '分' + sec + '秒';
+  };
+
+  const displaySteps = steps || [];
+  const hasStructuredSteps = displaySteps.length > 0;
+  const elapsedSec = streaming ? elapsed : (duration || 0);
+  const timeLabel = elapsedSec > 0 ? formatDur(elapsedSec) : '';
+  const stepCount = hasStructuredSteps ? displaySteps.length : 0;
+
+  // Is the last step currently active/running?
+  const lastStepRunning = streaming && displaySteps.length > 0 &&
+    displaySteps[displaySteps.length - 1].type === 'thinking';
+
+  return (
+    <div className="thinking-block">
+      <button type="button" onClick={() => setOpen(v => !v)} className="thinking-block-header">
+        <span style={{ fontSize: 13 }}>{streaming ? '⏳' : '💭'}</span>
+        <span className="thinking-block-title">
+          {streaming ? '正在思考…' : '思考过程'}
+        </span>
+        {stepCount > 0 && (
+          <span className="thinking-block-step-badge">{stepCount}步</span>
+        )}
+        {timeLabel && <span className="thinking-block-time">{timeLabel}</span>}
+        <span className={`thinking-block-chevron ${open ? 'open' : 'closed'}`}>▾</span>
+      </button>
+      {open && <div className="thinking-block-divider" />}
+      {open && (
+        <div ref={bodyRef} className="thinking-block-body" style={{ maxHeight: 1200, overflowY: 'auto' }}>
+          {hasStructuredSteps ? (
+            <div className="thinking-timeline">
+              {displaySteps.map((step, i) => {
+                const isLast = i === displaySteps.length - 1;
+                const isActive = isLast && lastStepRunning;
+                return (
+                  <div key={i} className={`thinking-step ${step.type === 'error' ? 'error' : ''} ${isActive ? 'running' : ''}`}>
+                    <span className={`thinking-step-dot ${stepDotClass(step.type)}`}>
+                      {isActive ? '⏳' : stepIcon(step.type)}
+                    </span>
+                    <div className="thinking-step-content">
+                      <span className="thinking-step-time">{step.time?.slice(0,5) || ''}</span>
+                      <span className="thinking-step-label">{step.label}</span>
+                      <span className="thinking-step-desc">{step.desc}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            /* Fallback: friendly icon rows from raw thinking text */
+            <div className="thinking-raw">
+              {(cleanContent || (streaming ? '正在处理你的请求…' : '')).split('\n').map((line: string, i: number) => {
+                if (!line.trim()) return null;
+                let icon = '○';
+                let cls = 'raw-line';
+                if (/--- 迭代 \d+|ITERATION/i.test(line)) {
+                  const n = line.match(/\d+/)?.[0] || '';
+                  return <div key={i} className="raw-iteration"><span className="thinking-step-dot iteration">🔄</span><span className="raw-label">第{n}轮</span></div>;
+                }
+                else if (/工具|tool|调/i.test(line)) { icon = '🛠️'; cls = 'raw-tool'; }
+                else if (/结果/i.test(line)) { icon = '✅'; cls = 'raw-result'; }
+                else if (/error|异常|失败/i.test(line)) { icon = '❌'; cls = 'raw-error'; }
+                else if (/验证/i.test(line)) { icon = '✓'; cls = 'raw-verify'; }
+                return <div key={i} className={cls}><span className="raw-icon">{icon}</span><span>{line.trim()}</span></div>;
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 文件图标 ──// ── 文件图标 ──
+const FILE_ICONS: Record<string, string> = {
+  '.xlsx': '📊', '.xls': '📊', '.csv': '📊',
+  '.docx': '📄', '.doc': '📄',
+  '.pptx': '📽️', '.ppt': '📽️',
+  '.pdf': '📕', '.zip': '🗜️', '.rar': '🗜️', '.7z': '🗜️',
+  '.py': '🐍', '.js': '📜', '.ts': '📜', '.tsx': '📜',
+  '.json': '🔧', '.yaml': '🔧', '.yml': '🔧',
+  '.txt': '📝', '.md': '📝',
+};
+const IMAGE_RE = /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i;
+
+function getFileIcon(name: string): string {
+  const ext = name.slice(name.lastIndexOf('.')).toLowerCase();
+  return FILE_ICONS[ext] || '📎';
+}
+
+// ── 附件渲染 ──
+function AttachmentList({ attachments }: { attachments: NonNullable<TimelineItem['attachments']> }) {
+  const apiBase = import.meta.env.VITE_API_BASE || `${window.location.origin}/api`;
+  return (
+    <div className="mb-2 flex flex-wrap gap-2">
+      {attachments.map((att, i) => {
+        if (att.isImage && att.url) {
+          return <img key={i} src={att.url} alt={att.name} className="max-h-56 rounded-xl object-cover shadow-sm" />;
+        }
+        const dlUrl = att.path ? `${apiBase}/files/download/${att.path.match(/uploads[\\/]([^\\/]+)/)?.[1] || ''}/${encodeURIComponent(att.name)}` : undefined;
+        return (
+          <a key={i} href={dlUrl || '#'} download={att.name}
+            className="flex items-center gap-2 rounded-xl border border-sakura/25 bg-white/60 px-3 py-2 text-[11px] transition hover:border-mint/50 hover:bg-white/80">
+            <span className="text-lg">{getFileIcon(att.name)}</span>
+            <span className="min-w-0 max-w-[160px] truncate font-semibold text-berry/70">{att.name}</span>
+            {att.size != null && <span className="text-[9px] text-berry/35">{(att.size / 1024).toFixed(1)} KB</span>}
+            {dlUrl && <span className="text-violet/50">⬇</span>}
+          </a>
+        );
+      })}
+    </div>
+  );
+}
+
+interface Props {
+  command?: CommandConfig;
+  items: TimelineItem[];
+  input: string;
+  setInput: (value: string) => void;
+  onRun: () => void;
+  running: boolean;
+  connected: boolean;
+  selectedAgent: string;
+  agents: { name: string; displayName: string }[];
+  onAgentChange: (name: string) => void;
+  catState: 'idle' | 'running' | 'success' | 'error';
+  sessionId: string;
+  onNewSession: () => void;
+  onUpload: (file: File) => Promise<unknown>;
+  usage?: { input: number; output: number; cost: string } | null;
+  sessionTitle?: string;
+  observability?: SessionObservability | null;
+  model?: string;
+  lastDuration?: number;
+  historyLoading?: boolean;
+  historyError?: string;
+  thinkMode?: boolean;
+  onToggleThinkMode?: () => void;
+  deepSearch?: boolean;
+  onToggleDeepSearch?: () => void;
+  onRenameSession?: (title: string) => Promise<void>;
+}
+
+function ChatFlowBase({ items, input, setInput, onRun, running, connected, selectedAgent, agents, onAgentChange, catState, onNewSession, onUpload, usage, sessionTitle, observability, model, lastDuration, historyLoading, historyError, thinkMode, onToggleThinkMode, deepSearch, onToggleDeepSearch, onRenameSession }: Props) {
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState('');
+  const endRef = useRef<HTMLDivElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState('');
+  const [pendingFiles, setPendingFiles] = useState<{ name: string; isImage: boolean; url?: string; path?: string; size: number }[]>([]);
+  const isNearBottomRef = useRef(true);
+
+  // Track if user is near the bottom
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const threshold = 150;
+    isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+  }, []);
+
+  // Auto-scroll only if user is already near bottom
+  useEffect(() => {
+    if (!endRef.current) return;
+    if (isNearBottomRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [items]);
+
+  // 等待计时由思考过程组件负责；此处不维护未展示的状态。
+
+  // Blur input when running starts (user sent a message), and on error
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.blur();
+  }, [running]);
+
+  // Also blur on the error render itself (belt-and-suspenders)
+  useEffect(() => {
+    const last = items[items.length - 1];
+    if (last && last.type === 'error' && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [items]);
+
+  const handleFileSelect = async (file?: File) => {
+    if (!file) return;
+    setUploading(true);
+    setUploadError('');
+    try {
+      const result = await onUpload(file) as { name: string; path: string; size: number };
+      const isImage = IMAGE_RE.test(file.name);
+      const previewUrl = isImage ? URL.createObjectURL(file) : undefined;
+      setPendingFiles(prev => [...prev, { name: result.name || file.name, isImage, url: previewUrl, path: result.path, size: result.size || file.size }]);
+    } catch (error) {
+      setUploadError(error instanceof Error ? error.message : '附件上传失败');
+    } finally { setUploading(false); }
+  };
+
+  const removePendingFile = (index: number) => {
+    setPendingFiles(prev => {
+      const item = prev[index];
+      if (item?.url) URL.revokeObjectURL(item.url);
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+
+  const handleRun = () => {
+    if (running || (!input.trim() && pendingFiles.length === 0)) return;
+    onRun();
+    pendingFiles.forEach(f => { if (f.url) URL.revokeObjectURL(f.url); });
+    setPendingFiles([]);
+  };
+
+  const cardClass = (type: TimelineItem['type']) => {
+    switch (type) {
+      case 'error': return 'border-honey/50 bg-honey/10';
+      case 'result': return 'border-mint/45 bg-mint/10';
+      case 'command': return 'border-sakura/45 bg-sakura/10';
+      default: return 'border-mint/35 bg-white/70';
+    }
+  };
+
+  return (
+    <main className="flex min-w-0 flex-1 flex-col">
+      <header className="hero-surface relative mx-4 mt-4 flex flex-col gap-3 overflow-hidden rounded-[24px] px-5 py-4">
+        <div className="pointer-events-none absolute -left-16 -top-20 h-40 w-40 rounded-full bg-sakura/20 blur-3xl" />
+        <div className="pointer-events-none absolute right-20 -top-16 h-32 w-32 rounded-full bg-mint/20 blur-3xl" />
+        {/* 第一行：标题 + 操作 */}
+        <div className="relative flex flex-wrap items-center gap-3">
+          <PixelCat state={catState as any} size={110} autoAnimate={false} showLabel={false} />
+          <div className="min-w-0 flex-1">
+            {editingTitle && onRenameSession ? (
+              <input
+                autoFocus
+                value={titleDraft}
+                onChange={e => setTitleDraft(e.target.value)}
+                onBlur={async () => { setEditingTitle(false); if (titleDraft.trim() && titleDraft !== sessionTitle) { await onRenameSession(titleDraft.trim()); } }}
+                onKeyDown={e => { if (e.key === 'Enter') { e.currentTarget.blur(); } if (e.key === 'Escape') { setEditingTitle(false); } }}
+                className="min-w-0 max-w-[220px] rounded-lg border border-mint/40 bg-white/80 px-2 py-0.5 text-base font-bold text-berry outline-none"
+              />
+            ) : (
+              <h1
+                onDoubleClick={() => { if (onRenameSession) { setTitleDraft(sessionTitle || ''); setEditingTitle(true); } }}
+                title={onRenameSession ? '双击重命名' : undefined}
+                className="min-w-0 max-w-[220px] truncate text-base font-bold text-berry"
+              >
+                {sessionTitle || '小爪指挥官'}
+              </h1>
+            )}
+          </div>
+          <button onClick={onNewSession} disabled={running} className="hero-btn px-3 py-1.5 text-[11px] font-semibold disabled:opacity-40">＋ 新建会话</button>
+          <div className={`hero-chip ${connected ? 'hero-verify text-mint-dark' : 'hero-danger text-honey'}`}>
+            <i className={`h-2 w-2 rounded-full hero-pulse-dot ${connected ? 'bg-mint-dark' : 'bg-honey'}`} />
+            {connected ? '已连接' : '未连接'}
+          </div>
+        </div>
+        {/* 第二行：HeroUI 风格状态条 */}
+        {(() => {
+          const cur = observability?.current_tokens || 0;
+          const win = observability?.context_window || 0;
+          const pct = observability?.percent ?? (win ? cur / win * 100 : 0);
+          const pctClamped = Math.min(pct, 100);
+          const fmtDur = lastDuration ? (lastDuration < 60 ? `${lastDuration.toFixed(1)}s` : `${Math.floor(lastDuration / 60)}m${Math.round(lastDuration % 60)}s`) : '';
+          const fmtTokens = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(0)}K` : String(n);
+          const compressCount = observability?.compression_count || 0;
+          const inp = Number(usage?.input) || 0;
+          const out = Number(usage?.output) || 0;
+          const cost = Number(usage?.cost) || 0;
+          const fmtK = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+          if (!model && !win && !inp && !out && !historyLoading && !historyError) return null;
+          return (
+            <div className="relative flex flex-wrap items-center gap-2 border-t border-sakura/15 pt-2.5">
+              {historyLoading && <span className="px-2 text-[11px] text-berry/55">正在载入会话消息与上下文指标…</span>}
+              {historyError && <span className="px-2 text-[11px] text-honey">{historyError}</span>}
+              {!historyLoading && !historyError && (
+                <>
+                  {/* 模型 badge */}
+                  {model && (
+                    <span className="inline-flex items-center gap-1.5 rounded-full bg-berry/5 px-2.5 py-1 text-[10px] font-semibold text-berry/70 ring-1 ring-berry/10">
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" className="text-mint-dark"><path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/></svg>
+                      {model}
+                    </span>
+                  )}
+                  {/* 上下文进度条 */}
+                  {win > 0 && (
+                    <span className="inline-flex min-w-[200px] flex-1 items-center gap-2 rounded-full bg-white/50 px-3 py-1 ring-1 ring-sakura/15">
+                      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-berry/8">
+                        <div className="h-full rounded-full bg-gradient-to-r from-sakura via-sakura to-mint transition-all duration-500" style={{ width: `${pctClamped}%` }} />
+                      </div>
+                      <span className="shrink-0 font-mono text-[9px] text-berry/45">{fmtTokens(cur)} / {fmtTokens(win)}</span>
+                      <span className="shrink-0 text-[9px] font-bold text-berry/35">{pct.toFixed(1)}%</span>
+                    </span>
+                  )}
+                  {/* 压缩次数 */}
+                  {compressCount > 0 && (
+                    <span title="上下文压缩次数" className="inline-flex items-center gap-1 rounded-full bg-violet/5 px-2 py-1 text-[9px] font-medium text-violet/60 ring-1 ring-violet/10">
+                      🗜 {compressCount}
+                    </span>
+                  )}
+                  {/* token 用量 */}
+                  {(inp > 0 || out > 0) && (
+                    <span className="inline-flex items-center gap-2 rounded-full bg-white/50 px-3 py-1 text-[9px] text-berry/50 ring-1 ring-sakura/15">
+                      <span className="inline-flex items-center gap-1">
+                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M12 4v16m-8-8h16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/></svg>
+                        <b className="text-berry/70">{fmtK(inp)}</b>
+                      </span>
+                      <span className="inline-flex items-center gap-1">
+                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                        <b className="text-berry/70">{fmtK(out)}</b>
+                      </span>
+                      {cost > 0 && (
+                        <span className="inline-flex items-center gap-0.5 font-bold text-violet">
+                          <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+                          {cost.toFixed(4)}
+                        </span>
+                      )}
+                    </span>
+                  )}
+                  {/* 耗时 */}
+                  {fmtDur && (
+                    <span title="耗时" className="inline-flex items-center gap-1 rounded-full bg-white/50 px-2.5 py-1 text-[9px] font-medium text-berry/40 ring-1 ring-sakura/15">
+                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/><path d="M12 6v6l4 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+                      {fmtDur}
+                    </span>
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })()}
+      </header>
+
+      <section ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto px-8 py-6">
+        {!items.length && (
+          <div className="hero-card hero-float-in mx-auto mt-16 max-w-xl p-8 text-center">
+            <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-sakura/30 to-mint/30 text-3xl shadow-glow-sakura">🐾</div>
+            <h2 className="mt-5 font-display text-2xl text-berry">开始一个会话</h2>
+            <p className="mt-2 text-sm leading-7 text-berry/50">选择 Agent，直接描述目标。文件、工具调用、执行记录与最终结果都会留在当前会话里，小爪指挥官会替你盯完全程。</p>
+          </div>
+        )}
+        <div className="mx-auto max-w-4xl space-y-3">
+          {items.map(item => {
+            const isUser = item.type === 'command';
+            if (item.type === 'step') return null;
+            return (
+              <article key={item.id} className={`fade-in-up flex gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
+                {isUser ? <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sakura/30 text-sm">🧑</span> : <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet/10 text-base">{agentIcon(selectedAgent)}</span>}
+                <div className={`hero-card max-w-[80%] border p-4 backdrop-blur-md ${cardClass(item.type)}`}>
+                  {(item.thinking || (item.thinkingSteps && item.thinkingSteps.length > 0)) && <ThinkingBlock content={item.thinking} streaming={item.streaming ?? item.id.startsWith('stream-')} steps={item.thinkingSteps} duration={item.duration} />}
+                  {(item.attachments || item.attachments_used) && <AttachmentList attachments={item.attachments || (item.attachments_used || []).map(att => ({ name: att.name, path: att.path, size: att.size, isImage: att.is_image, url: '' }))} />}
+                  {(item.type === 'result' || item.type === 'error')
+                    ? <div className={`streaming-content ${item.id.startsWith('stream-') ? 'streaming-cursor streaming-active' : ''}`}><MarkdownView content={item.content} /></div>
+                    : item.content
+                      ? <p className={`whitespace-pre-wrap break-words text-xs leading-6 text-berry/70 streaming-text ${item.id.startsWith('stream-') ? 'streaming-cursor streaming-active' : ''}`}>{item.content}</p>
+                      : null}
+                </div>
+              </article>
+            );
+          })}
+          {running && (
+            <div className="flex items-center gap-2 px-2 text-[11px] text-berry/40">
+              <span className="thinking-orb" />
+              <span>思考中…</span>
+            </div>
+          )}
+          <div ref={endRef} />
+        </div>
+      </section>
+
+      <footer className="px-8 py-4">
+        <div className="mx-auto max-w-4xl">
+          {uploadError && <div className="mb-2 rounded-lg bg-red-50 px-3 py-2 text-[11px] text-red-600">{uploadError}</div>}
+          {pendingFiles.length > 0 && (
+            <div className="mb-2 flex flex-wrap gap-2">
+              {pendingFiles.map((f, i) => (
+                <div key={i} className="flex items-center gap-2 rounded-xl border border-sakura/25 bg-white/70 px-3 py-1.5 text-[11px]">
+                  {f.isImage && f.url ? <img src={f.url} alt={f.name} className="h-8 w-8 rounded-lg object-cover" /> : <span className="text-base">{getFileIcon(f.name)}</span>}
+                  <span className="max-w-[120px] truncate font-medium text-berry/70">{f.name}</span>
+                  <button onClick={() => removePendingFile(i)} className="ml-1 text-berry/30 transition hover:text-honey">✕</button>
+                </div>
+              ))}
+            </div>
+          )}
+          <div className="flex items-end gap-3">
+            <div className="hero-surface flex-1 rounded-[26px] p-2 transition focus-within:border-mint focus-within:shadow-glow-mint">
+              <div className="mb-1 flex flex-wrap items-center justify-between gap-2 border-b border-sakura/15 px-2 pb-2">
+                <AgentPicker value={selectedAgent} agents={agents} onChange={onAgentChange} disabled={running} />
+                <div className="flex items-center gap-1.5">
+                  {onToggleThinkMode && (
+                    <button onClick={onToggleThinkMode} disabled={running}
+                      className={`px-2.5 py-1 rounded-full text-[10px] font-bold transition disabled:opacity-40 ${thinkMode ? 'bg-violet/15 text-violet border border-violet/30' : 'text-berry/40 border border-transparent hover:text-violet'}`}>
+                      💭 深度思考
+                    </button>
+                  )}
+                  {onToggleDeepSearch && (
+                    <button onClick={onToggleDeepSearch} disabled={running}
+                      className={`px-2.5 py-1 rounded-full text-[10px] font-bold transition disabled:opacity-40 ${deepSearch ? 'bg-mint/15 text-mint border border-mint/30' : 'text-berry/40 border border-transparent hover:text-mint'}`}>
+                      🔍 深度搜索
+                    </button>
+                  )}
+                  <button onClick={() => fileRef.current?.click()} disabled={uploading || running} className="text-[11px] font-semibold text-berry/50 transition hover:text-violet disabled:opacity-40">{uploading ? '上传中…' : '📎 附件'}</button>
+                </div>
+                <input ref={fileRef} type="file" multiple hidden onChange={e => { Array.from(e.target.files || []).forEach(f => void handleFileSelect(f)); e.currentTarget.value = ''; }} />
+              </div>
+              <textarea ref={inputRef} value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleRun(); } }} rows={2} placeholder="描述任务、目标与完成标准…" disabled={running} className="w-full resize-none bg-transparent px-2 py-2 text-sm text-berry outline-none placeholder:text-berry/30" />
+            </div>
+            <button onClick={handleRun} disabled={running || (!input.trim() && pendingFiles.length === 0)} className="hero-btn h-[60px] px-6 text-sm font-bold disabled:opacity-40">{running ? '执行中…' : '发送'}</button>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}
+
+export const ChatFlow = memo(ChatFlowBase);