feat(web): add markdown syntax highlighting, slash commands, stop button, quote/reply

- PromptEditor with Prism.js syntax highlighting
- Slash commands (/run, /status, /images, /list, /help) in chat input
- Stop button to cancel ongoing generation
- Quote/reply and regenerate/continue actions in chat
- MiddlePanel with conversation timestamps and preview
- Pipeline progress in chat view
- Fix all remaining dark theme classes

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/client/src/components/chat/ChatInput.tsx

@@ -1,11 +1,34 @@
-import { useState, useRef } from 'react';
-import { Send } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Send, Terminal, Image, Play, FileText } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
+const SLASH_COMMANDS = [
+  { cmd: '/run', desc: '执行 pipeline 阶段', icon: Play },
+  { cmd: '/status', desc: '查看管线进度', icon: Terminal },
+  { cmd: '/images', desc: '生成图片', icon: Image },
+  { cmd: '/list', desc: '列出可用账号', icon: FileText },
+  { cmd: '/help', desc: '显示帮助', icon: Terminal },
+];
+
 export function ChatInput({ onSend, disabled }: { onSend: (content: string) => void; disabled?: boolean }) {
   const [input, setInput] = useState('');
+  const [showCmds, setShowCmds] = useState(false);
+  const [cmdIdx, setCmdIdx] = useState(0);
   const ref = useRef<HTMLTextAreaElement>(null);
 
+  useEffect(() => {
+    if (input.startsWith('/')) {
+      setShowCmds(true);
+      setCmdIdx(0);
+    } else {
+      setShowCmds(false);
+    }
+  }, [input]);
+
+  const matchingCmds = input.startsWith('/')
+    ? SLASH_COMMANDS.filter((c) => c.cmd.startsWith(input.split(' ')[0]))
+    : [];
+
   const handleSend = () => {
     if (!input.trim()) return;
     onSend(input.trim());
@@ -14,6 +37,18 @@ export function ChatInput({ onSend, disabled }: { onSend: (content: string) => v
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (showCmds && matchingCmds.length > 0) {
+      if (e.key === 'Tab' || e.key === 'Enter') {
+        e.preventDefault();
+        const cmd = matchingCmds[cmdIdx % matchingCmds.length].cmd;
+        setInput(cmd + ' ');
+        setShowCmds(false);
+        return;
+      }
+      if (e.key === 'ArrowDown') { e.preventDefault(); setCmdIdx((i) => (i + 1) % matchingCmds.length); return; }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setCmdIdx((i) => (i - 1 + matchingCmds.length) % matchingCmds.length); return; }
+    }
+    if (e.key === 'Escape') { setShowCmds(false); return; }
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
@@ -21,21 +56,43 @@ export function ChatInput({ onSend, disabled }: { onSend: (content: string) => v
   };
 
   return (
-    <div className="p-4 border-t border-zinc-200 bg-white">
-      <div className="flex items-end gap-2 bg-zinc-50 rounded-xl border border-zinc-200 px-4 py-2.5 focus-within:border-indigo-300 transition-colors">
-        <textarea
-          ref={ref}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          rows={1}
-          placeholder={disabled ? '等待回复中...' : '输入指令...'}
-          className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700"
-          disabled={disabled}
-        />
-        <Button size="icon" variant="ghost" className="h-8 w-8 text-zinc-400 hover:text-indigo-600" onClick={handleSend} disabled={disabled}>
-          <Send size={16} />
-        </Button>
+    <div className="relative">
+      {showCmds && matchingCmds.length > 0 && (
+        <div className="mx-4 mb-0.5 bg-white border border-zinc-200 rounded-lg shadow-lg overflow-hidden">
+          {matchingCmds.map((c, i) => {
+            const Icon = c.icon;
+            return (
+              <button
+                key={c.cmd}
+                onClick={() => { setInput(c.cmd + ' '); setShowCmds(false); ref.current?.focus(); }}
+                className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
+                  i === (cmdIdx % matchingCmds.length) ? 'bg-indigo-50 text-indigo-700' : 'text-zinc-600 hover:bg-zinc-50'
+                }`}
+              >
+                <Icon size={14} />
+                <span className="font-mono font-medium">{c.cmd}</span>
+                <span className="text-zinc-400">{c.desc}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+      <div className="p-4 border-t border-zinc-200 bg-white">
+        <div className="flex items-end gap-2 bg-zinc-50 rounded-xl border border-zinc-200 px-4 py-2.5 focus-within:border-indigo-300 transition-colors">
+          <textarea
+            ref={ref}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={1}
+            placeholder={disabled ? '等待回复中...' : '输入指令或 / 查看命令...'}
+            className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700"
+            disabled={disabled}
+          />
+          <Button size="icon" variant="ghost" className="h-8 w-8 text-zinc-400 hover:text-indigo-600" onClick={handleSend} disabled={disabled}>
+            <Send size={16} />
+          </Button>
+        </div>
       </div>
     </div>
   );