feat: Agent CLI 与终端审计回放全面优化

- Agent CLI: 多轮对话、SSH 长连接、流式推理、Evolver 按用户隔离、历史侧栏
- 终端审计: 回放播放器、命令书签、筛选分页导出、命令输出统计、录制落盘修复
- 修复 session_commands 表迁移、Kill 竞态导致录制丢失、无录制会话回放提示
- 审计历史页只读（移除删除），移除回放弹框录制搜索

frontend/src/pages/audit/terminal-audit/SessionCommandsPanel.tsx

@@ -1,5 +1,4 @@
-// 终端审计 — 会话命令子面板 // Logan.Li
-// v2: 虚拟滚动，支持万级命令记录流畅查看
+// 终端审计 — 会话命令子面板（筛选 / 虚拟滚动 / 导出） // Logan.Li
 
 import { useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,41 +6,80 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Search, RefreshCw } from 'lucide-react';
+import { Search, RefreshCw, Play, FileText } from 'lucide-react';
 import { useSessionCommands } from '@/hooks/api';
-import { formatSize } from './helpers';
+import { terminalSessionApi, sessionCommandApi } from '@/api';
+import { ReplayDialog } from '@/components/system/ReplayDialog';
+import { formatCommandOutput, presetAuditRange } from './helpers';
+import { isHighRiskCommand } from '@/components/system/replay/replay-utils';
+import { exportCommandsListCsv } from '@/components/system/replay/export-audit';
+import { unwrapList } from '@/hooks/api/unwrap';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+import type { SessionCommand } from './types';
 
-const GRID_COLS = 'minmax(150px,1fr) minmax(80px,0.8fr) minmax(200px,2fr) minmax(100px,0.8fr) minmax(80px,0.5fr)';
+const GRID_COLS = 'minmax(150px,1fr) minmax(80px,0.8fr) minmax(200px,2fr) minmax(100px,0.8fr) minmax(80px,0.5fr) 40px';
+const PAGE_SIZE = 1000;
 
 export function SessionCommandsPanel() {
   const { t } = useTranslation();
   const [keyword, setKeyword] = useState('');
+  const [username, setUsername] = useState('');
   const [sessionIdInput, setSessionIdInput] = useState('');
-
-  const queryParams = useMemo(
-    () => ({
-      page: 1,
-      page_size: 500,
-      ...(sessionIdInput ? { session_id: Number(sessionIdInput) } : {}),
-    }),
-    [sessionIdInput],
-  );
-
-  const { data: commands = [], isLoading, refetch } = useSessionCommands(queryParams);
-
-  const filtered = commands.filter((c) => {
-    const kw = keyword.toLowerCase();
-    return (
-      !kw ||
-      (c.username || '').toLowerCase().includes(kw) ||
-      (c.command || '').toLowerCase().includes(kw)
-    );
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [applied, setApplied] = useState({
+    keyword: '', username: '', sessionId: '', startDate: '', endDate: '',
   });
 
+  const [replayOpen, setReplayOpen] = useState(false);
+  const [replayId, setReplayId] = useState<number | null>(null);
+  const [replaySeek, setReplaySeek] = useState<number | undefined>(undefined);
+  const [exporting, setExporting] = useState(false);
+
+  const queryParams = useMemo(() => ({
+    page: 1,
+    page_size: PAGE_SIZE,
+    ...(applied.sessionId ? { session_id: Number(applied.sessionId) } : {}),
+    ...(applied.username ? { username: applied.username } : {}),
+    ...(applied.keyword ? { command: applied.keyword } : {}),
+    ...(applied.startDate ? { start_date: applied.startDate } : {}),
+    ...(applied.endDate ? { end_date: applied.endDate } : {}),
+  }), [applied]);
+
+  const { data, isLoading, refetch } = useSessionCommands(queryParams);
+  const commands = data?.list ?? [];
+  const total = data?.total ?? 0;
+
+  const applyFilters = () => {
+    setApplied({ keyword, username, sessionId: sessionIdInput, startDate, endDate });
+  };
+
+  const handleExportCsv = async () => {
+    setExporting(true);
+    try {
+      const resp = await sessionCommandApi.list({
+        ...queryParams,
+        page: 1,
+        page_size: Math.min(Math.max(total, 1), 10000),
+      });
+      const list = unwrapList<SessionCommand>(resp);
+      if (list.length === 0) {
+        toast.error(t('audit.terminal.noCommands'));
+        return;
+      }
+      exportCommandsListCsv(list);
+    } catch {
+      toast.error(t('audit.terminal.exportFailed'));
+    } finally {
+      setExporting(false);
+    }
+  };
+
   // 虚拟滚动
   const scrollRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
-    count: filtered.length,
+    count: commands.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => 48,
     overscan: 10,
@@ -49,32 +87,86 @@ export function SessionCommandsPanel() {
   const virtualRows = virtualizer.getVirtualItems();
   const totalHeight = virtualizer.getTotalSize();
 
+  // 从命令行打开回放并跳到该命令时刻（无录制则提示） // Logan.Li
+  const openReplayAtCommand = async (cmd: SessionCommand) => {
+    if (!cmd.session_record_size) {
+      toast.error(t('audit.terminal.replayPlayer.noRecord'));
+      return;
+    }
+    try {
+      const sess = await terminalSessionApi.get(cmd.session_id) as { start_time?: string };
+      const ts = cmd.timestamp || cmd.created_at;
+      let seek: number | undefined;
+      if (sess?.start_time && ts) {
+        seek = (new Date(ts).getTime() - new Date(sess.start_time).getTime()) / 1000;
+        if (seek < 0) seek = 0;
+      }
+      setReplayId(cmd.session_id);
+      setReplaySeek(seek);
+      setReplayOpen(true);
+    } catch {
+      toast.error(t('audit.terminal.replayPlayer.loadFailed'));
+    }
+  };
+
   return (
     <>
-      <div className="flex items-center gap-3 flex-wrap">
-        <div className="relative w-64">
+      <div className="flex items-center gap-2 flex-wrap">
+        <div className="relative w-52">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
           <Input
             placeholder={t('audit.terminal.searchUserCommand')}
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
             className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
           />
         </div>
+        <Input
+          placeholder={t('audit.terminal.filterUsername')}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
+          className="w-28 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
+        />
         <Input
           placeholder={t('audit.terminal.sessionIdPlaceholder')}
           value={sessionIdInput}
           onChange={(e) => setSessionIdInput(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
           className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
         />
+        <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
+        <span className="text-slate-600 text-sm">—</span>
+        <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
+        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
+          {t('audit.terminal.presetToday')}
+        </Button>
+        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
+          {t('audit.terminal.preset7d')}
+        </Button>
+        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
+          {t('audit.terminal.preset30d')}
+        </Button>
+        <Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800 h-9"
           onClick={() => refetch()}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
           {t('common.refresh')}
         </Button>
+        <Button
+          variant="outline"
+          className="border-slate-700 text-slate-300 hover:text-amber-400 h-9"
+          onClick={handleExportCsv}
+          disabled={exporting || total === 0}
+          title={t('audit.terminal.exportCommandsCsv')}
+        >
+          <FileText className="h-4 w-4 mr-2" />
+          {t('audit.terminal.exportCommands')}
+        </Button>
       </div>
 
       <Card className="bg-slate-900 border-slate-800">
@@ -84,14 +176,13 @@ export function SessionCommandsPanel() {
               <div className="flex items-center justify-center py-16">
                 <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
               </div>
-            ) : filtered.length === 0 ? (
+            ) : commands.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-16 text-slate-500">
                 <Search className="h-8 w-8 mb-3 opacity-40" />
                 <p className="text-sm">{t('audit.terminal.noCommands')}</p>
               </div>
             ) : (
               <>
-                {/* 表头 */}
                 <div
                   className="grid gap-2 px-4 py-2 border-b border-slate-800 bg-slate-900 text-xs font-medium text-slate-400"
                   style={{ gridTemplateColumns: GRID_COLS }}
@@ -101,13 +192,13 @@ export function SessionCommandsPanel() {
                   <span>{t('audit.terminal.col.command')}</span>
                   <span>{t('audit.terminal.col.outputSize')}</span>
                   <span>{t('audit.terminal.col.sessionRef')}</span>
+                  <span />
                 </div>
 
-                {/* 虚拟滚动列表 */}
                 <div ref={scrollRef} style={{ height: 'min(600px, calc(100vh - 340px))', overflow: 'auto' }}>
                   <div style={{ height: totalHeight, position: 'relative' }}>
                     {virtualRows.map((vr) => {
-                      const c = filtered[vr.index];
+                      const c = commands[vr.index];
                       if (!c) return null;
                       return (
                         <div
@@ -130,26 +221,54 @@ export function SessionCommandsPanel() {
                             {c.created_at ? new Date(c.created_at).toLocaleString() : '--'}
                           </span>
                           <span className="text-sm text-slate-200 truncate">{c.username || '--'}</span>
-                          <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block">
+                          <code className={cn(
+                            'text-xs bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block',
+                            isHighRiskCommand(c.command || '') ? 'text-red-400' : 'text-slate-300',
+                          )}>
                             {c.command || '--'}
                           </code>
-                          <span className="text-sm text-slate-400">{formatSize(c.output_size)}</span>
-                          <span className="text-xs text-slate-500">#{c.session_id}</span>
+                          <span className="text-sm text-slate-400">{formatCommandOutput(c.output_size)}</span>
+                          <span className={cn(
+                            'text-xs',
+                            c.session_record_size ? 'text-slate-500' : 'text-amber-500/80',
+                          )} title={!c.session_record_size ? t('audit.terminal.replayPlayer.noRecord') : undefined}>
+                            #{c.session_id}
+                          </span>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7 text-slate-400 hover:text-blue-400 disabled:opacity-30"
+                            onClick={() => openReplayAtCommand(c)}
+                            disabled={!c.session_record_size}
+                            title={c.session_record_size
+                              ? t('audit.terminal.replayAtCommand')
+                              : t('audit.terminal.replayPlayer.noRecord')}
+                          >
+                            <Play className="h-3.5 w-3.5" />
+                          </Button>
                         </div>
                       );
                     })}
                   </div>
                 </div>
 
-                {/* 行数统计 */}
                 <div className="text-center py-2 text-xs text-slate-500 border-t border-slate-800">
-                  {t('audit.terminal.totalCommands', { count: filtered.length })} {filtered.length > 200 && `· ${t('audit.terminal.virtualScroll')}`}
+                  {t('audit.terminal.totalCommands', { count: total })}
+                  {commands.length < total && ` · ${t('audit.terminal.showingLoaded', { loaded: commands.length })}`}
+                  {commands.length > 200 && ` · ${t('audit.terminal.virtualScroll')}`}
                 </div>
               </>
             )}
           </div>
         </CardContent>
       </Card>
+
+      <ReplayDialog
+        open={replayOpen}
+        onOpenChange={setReplayOpen}
+        sessionId={replayId}
+        initialSeekSec={replaySeek}
+      />
     </>
   );
-}
+}