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

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

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

@@ -108,11 +108,12 @@ export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: Active
   const { t } = useTranslation();
   const confirm = useConfirm();
   const { killMutation } = useTerminalSessionMutations();
-  const { data: sessions = [], isLoading, refetch } = useTerminalSessions({
+  const { data, isLoading, refetch } = useTerminalSessions({
     page: 1,
     page_size: 100,
     status: 'active',
   });
+  const sessions = data?.list ?? [];
 
   const [keyword, setKeyword] = useState('');
   const [autoRefresh, setAutoRefresh] = useState(() => !userToggledOff);

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

@@ -1,158 +1,194 @@
-// 终端审计 — 历史会话子面板 // Logan.Li
+// 终端审计 — 历史会话子面板（筛选 / 分页 / 回放 / 导出，只读无删除） // Logan.Li
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
-import { Search, RefreshCw, Play, Download, Monitor } from 'lucide-react';
-import { terminalSessionApi } from '@/api';
+import { Search, RefreshCw, Play, Download, Monitor, FileText, ChevronLeft, ChevronRight } from 'lucide-react';
+import { terminalSessionApi, sessionCommandApi } from '@/api';
 import { ReplayDialog } from '@/components/system/ReplayDialog';
 import { useTerminalSessions } from '@/hooks/api';
-import { formatDuration, getStatusBadge } from './helpers';
+import { unwrapList } from '@/hooks/api/unwrap';
+import { toast } from 'sonner';
+import { formatDuration, formatSize, getStatusBadge, presetAuditRange } from './helpers';
+import { buildCommandBookmarks } from '@/components/system/replay/replay-utils';
+import { exportAuditReportCsv } from '@/components/system/replay/export-audit';
+import type { ReplaySessionMeta } from '@/components/system/replay/replay-utils';
+
+const PAGE_SIZE = 20;
 
 export function HistorySessionsPanel() {
   const { t } = useTranslation();
-  const { data: sessions = [], isLoading, refetch } = useTerminalSessions({
-    page: 1,
-    page_size: 100,
-    status: 'closed',
+
+  const [page, setPage] = useState(1);
+  const [keyword, setKeyword] = useState('');
+  const [username, setUsername] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [hasRecordOnly, setHasRecordOnly] = useState(false);
+
+  const [applied, setApplied] = useState({
+    keyword: '', username: '', startDate: '', endDate: '', hasRecordOnly: false,
   });
 
-  const [keyword, setKeyword] = useState('');
+  const queryParams = useMemo(() => ({
+    page,
+    page_size: PAGE_SIZE,
+    status: 'closed',
+    ...(applied.keyword ? { keyword: applied.keyword } : {}),
+    ...(applied.username ? { username: applied.username } : {}),
+    ...(applied.startDate ? { start_date: applied.startDate } : {}),
+    ...(applied.endDate ? { end_date: applied.endDate } : {}),
+    ...(applied.hasRecordOnly ? { has_record: '1' } : {}),
+  }), [page, applied]);
+
+  const { data, isLoading, refetch } = useTerminalSessions(queryParams);
+  const sessions = data?.list ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
   const [replayId, setReplayId] = useState<number | null>(null);
   const [replayOpen, setReplayOpen] = useState(false);
 
-  const filtered = sessions.filter((s) => {
-    const kw = keyword.toLowerCase();
-    return (
-      !kw ||
-      (s.username || '').toLowerCase().includes(kw) ||
-      (s.server_name || '').toLowerCase().includes(kw) ||
-      (s.server_ip || '').toLowerCase().includes(kw)
-    );
-  });
+  const applyFilters = () => {
+    setApplied({ keyword, username, startDate, endDate, hasRecordOnly });
+    setPage(1);
+  };
 
   const openReplay = (id: number) => {
     setReplayId(id);
     setReplayOpen(true);
   };
 
-  const handleDownload = async (id: number) => {
+  const handleDownload = (id: number) => {
+    terminalSessionApi.download(id).catch(() => toast.error(t('audit.terminal.exportFailed')));
+  };
+
+  // 导出审计报告：命令列表失败时仍导出会话元信息 // Logan.Li
+  const handleExportReport = async (id: number) => {
     try {
-      await terminalSessionApi.download(id);
+      const sess = await terminalSessionApi.get(id);
+      const meta = sess as ReplaySessionMeta;
+      let cmdList: { id: number; command: string; timestamp?: string; created_at?: string }[] = [];
+      try {
+        const cmds = await sessionCommandApi.list({ session_id: id, page: 1, page_size: 500 });
+        cmdList = unwrapList(cmds);
+      } catch {
+        /* 无命令表数据时仅导出会话信息 */
+      }
+      const duration = meta.duration || 0;
+      const bookmarks = buildCommandBookmarks(cmdList, meta.start_time, duration);
+      exportAuditReportCsv({ ...meta, id }, bookmarks);
+      toast.success(t('audit.terminal.exportReport'));
     } catch {
-      // download error is handled in http.download
+      toast.error(t('audit.terminal.exportFailed'));
     }
   };
 
   return (
     <>
-      <div className="flex items-center gap-3 flex-wrap">
-        <div className="relative w-64">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+      <div className="flex flex-col gap-3">
+        <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.searchUserServerIp')}
+              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"
+            />
+          </div>
           <Input
-            placeholder={t('audit.terminal.searchUserServerIp')}
-            value={keyword}
-            onChange={(e) => setKeyword(e.target.value)}
-            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+            placeholder={t('audit.terminal.filterUsername')}
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
+            className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
           />
+          <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>
+          <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
+            <input type="checkbox" checked={hasRecordOnly} onChange={(e) => setHasRecordOnly(e.target.checked)} className="rounded" />
+            {t('audit.terminal.hasRecordOnly')}
+          </label>
+          <Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
+          <Button variant="outline" size="sm" className="border-slate-700 text-slate-300 h-9" onClick={() => refetch()}>
+            <RefreshCw className="h-4 w-4 mr-1" />{t('common.refresh')}
+          </Button>
         </div>
-        <Button
-          variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
-          onClick={() => refetch()}
-        >
-          <RefreshCw className="h-4 w-4 mr-2" />
-          {t('common.refresh')}
-        </Button>
       </div>
 
       <Card className="bg-slate-900 border-slate-800">
         <CardContent className="p-0">
-          <div className="border-t border-slate-800">
-            {isLoading ? (
-              <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 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
-                <Monitor className="h-8 w-8 mb-3 opacity-40" />
-                <p className="text-sm">{t('audit.terminal.noHistory')}</p>
-              </div>
-            ) : (
+          {isLoading ? (
+            <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>
+          ) : sessions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+              <Monitor className="h-8 w-8 mb-3 opacity-40" />
+              <p className="text-sm">{t('audit.terminal.noHistory')}</p>
+            </div>
+          ) : (
+            <>
               <Table>
                 <TableHeader>
                   <TableRow className="border-slate-800 hover:bg-transparent">
                     <TableHead className="text-slate-400">{t('audit.terminal.col.id')}</TableHead>
                     <TableHead className="text-slate-400">{t('audit.terminal.col.user')}</TableHead>
                     <TableHead className="text-slate-400">{t('audit.terminal.col.targetServer')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.port')}</TableHead>
                     <TableHead className="text-slate-400">{t('audit.terminal.col.startTime')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.endTime')}</TableHead>
                     <TableHead className="text-slate-400">{t('audit.terminal.col.duration')}</TableHead>
+                    <TableHead className="text-slate-400">{t('audit.terminal.col.recordSize')}</TableHead>
                     <TableHead className="text-slate-400">{t('audit.terminal.col.status')}</TableHead>
                     <TableHead className="text-slate-400 text-right">{t('audit.terminal.col.actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {filtered.map((s) => (
+                  {sessions.map((s) => (
                     <TableRow key={s.id} className="border-slate-800 hover:bg-slate-800/50">
-                      <TableCell>
-                        <span className="text-sm text-slate-400">{s.id}</span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-slate-200">{s.username || '--'}</span>
-                      </TableCell>
+                      <TableCell><span className="text-sm text-slate-400">{s.id}</span></TableCell>
+                      <TableCell><span className="text-sm text-slate-200">{s.username || '--'}</span></TableCell>
                       <TableCell>
                         <div className="flex flex-col">
                           <span className="text-sm text-slate-200">{s.server_name || '--'}</span>
                           <span className="text-xs text-slate-500">{s.server_ip}</span>
                         </div>
                       </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-slate-400">{s.server_port}</span>
-                      </TableCell>
                       <TableCell>
                         <span className="text-sm text-slate-400">
                           {s.start_time ? new Date(s.start_time).toLocaleString() : '--'}
                         </span>
                       </TableCell>
+                      <TableCell><span className="text-sm text-slate-300">{formatDuration(s.duration)}</span></TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">
-                          {s.end_time ? new Date(s.end_time).toLocaleString() : '--'}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-slate-300">{formatDuration(s.duration)}</span>
+                        <span className="text-sm text-slate-400">{s.record_size > 0 ? formatSize(s.record_size) : '--'}</span>
                       </TableCell>
                       <TableCell>{getStatusBadge(s.status)}</TableCell>
                       <TableCell>
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-slate-400 hover:text-blue-400 hover:bg-slate-800"
-                            onClick={() => openReplay(s.id)}
-                            title={t('audit.terminal.replay')}
-                          >
+                        <div className="flex items-center justify-end gap-0.5">
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400" onClick={() => openReplay(s.id)} disabled={!s.record_size} title={t('audit.terminal.replay')}>
                             <Play className="h-4 w-4" />
                           </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-slate-400 hover:text-green-400 hover:bg-slate-800"
-                            onClick={() => handleDownload(s.id)}
-                            title={t('audit.terminal.downloadRecord')}
-                          >
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-amber-400" onClick={() => handleExportReport(s.id)} title={t('audit.terminal.exportReport')}>
+                            <FileText className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-green-400" onClick={() => handleDownload(s.id)} disabled={!s.record_size} title={t('audit.terminal.downloadRecord')}>
                             <Download className="h-4 w-4" />
                           </Button>
                         </div>
@@ -161,12 +197,24 @@ export function HistorySessionsPanel() {
                   ))}
                 </TableBody>
               </Table>
-            )}
-          </div>
+              <div className="flex items-center justify-between px-4 py-3 border-t border-slate-800">
+                <span className="text-xs text-slate-500">{t('audit.terminal.totalSessions', { count: total })}</span>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="icon" className="h-8 w-8" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <span className="text-xs text-slate-400">{page} / {totalPages}</span>
+                  <Button variant="ghost" size="icon" className="h-8 w-8" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
         </CardContent>
       </Card>
 
       <ReplayDialog open={replayOpen} onOpenChange={setReplayOpen} sessionId={replayId} />
     </>
   );
-}
+}

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}
+      />
     </>
   );
-}
+}

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

@@ -3,6 +3,19 @@
 import { Badge } from '@/components/ui/badge';
 import i18n from '@/i18n';
 
+/** fmtAuditDate 格式化为 YYYY-MM-DD（筛选日期） // Logan.Li */
+export function fmtAuditDate(d: Date): string {
+  return d.toISOString().slice(0, 10);
+}
+
+/** presetAuditRange 近 N 天日期范围 // Logan.Li */
+export function presetAuditRange(days: number): { start: string; end: string } {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - days + 1);
+  return { start: fmtAuditDate(start), end: fmtAuditDate(end) };
+}
+
 export function formatDuration(sec: number): string {
   if (!sec || sec < 0) return '--';
   if (sec < 60) return i18n.t('common.duration.sec', { count: sec });
@@ -21,6 +34,12 @@ export function formatSize(bytes: number): string {
   return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
 }
 
+/** formatCommandOutput 命令输出大小（未统计时显示 --） // Logan.Li */
+export function formatCommandOutput(bytes?: number): string {
+  if (bytes == null) return '--';
+  return formatSize(bytes);
+}
+
 export function getStatusBadge(status: string) {
   if (status === 'active') {
     return (

frontend/src/pages/audit/terminal-audit/types.ts

@@ -20,9 +20,11 @@ export interface SessionCommand {
   id: number;
   session_id: number;
   username: string;
+  server_name?: string;
   command: string;
-  exit_code: number;
-  output_size: number;
+  output_size?: number;
+  session_record_size?: number;
+  timestamp?: string;
   created_at: string;
 }