cx-viewer 1.0.3 → 1.0.4

package/src/components/viewers/ImageViewer.jsx

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { t as i18n } from '../../i18n';
+import { apiUrl } from '../../utils/apiUrl';
+import { sanitizeSvg } from '../../utils/svgSanitize';
+import styles from './ImageViewer.module.css';
+
+function formatFileSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 10;
+const ZOOM_STEP = 0.25;
+
+export default function ImageViewer({ filePath, onClose, editorSession }) {
+  const [zoom, setZoom] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [naturalSize, setNaturalSize] = useState(null);
+  const [fileSize, setFileSize] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [svgContent, setSvgContent] = useState(null);
+  const canvasRef = useRef(null);
+  const dragRef = useRef(null);
+
+  const isSvg = (filePath || '').toLowerCase().endsWith('.svg');
+  const imgSrc = apiUrl(`/api/file-raw?path=${encodeURIComponent(filePath)}${editorSession ? '&editorSession=true' : ''}`);
+
+  // SVG: fetch raw text for inline rendering (CSS background shows through transparent areas)
+  useEffect(() => {
+    if (!isSvg) { setSvgContent(null); return; }
+    setLoading(true);
+    fetch(imgSrc).then(r => r.text()).then(text => {
+      setSvgContent(sanitizeSvg(text));
+      // SVG viewBox 通常很小（如 24x24），用合理的渲染基准尺寸避免 fitToWindow 过度放大
+      const vb = text.match(/viewBox=["']([^"']+)["']/);
+      const vbW = vb ? (vb[1].split(/[\s,]+/).map(Number)[2] || 24) : 24;
+      const vbH = vb ? (vb[1].split(/[\s,]+/).map(Number)[3] || 24) : 24;
+      const aspect = vbW / vbH;
+      const baseSize = 200;
+      setNaturalSize({ w: Math.round(baseSize * aspect), h: baseSize });
+      setLoading(false);
+    }).catch(() => { setError('Failed to load SVG'); setLoading(false); });
+  }, [isSvg, imgSrc]);
+
+  // Fetch file size + 校验访问权限。HEAD 失败时再发 GET 拿 JSON reason,显示具体原因。
+  useEffect(() => {
+    fetch(imgSrc, { method: 'HEAD' })
+      .then(r => {
+        if (!r.ok) {
+          // 403 sensitive / 404 not found 等:再发 GET 取详细 reason 显示给用户
+          fetch(imgSrc).then(rr => rr.json()).then(err => {
+            const reasonMsg = err && err.reason
+              ? (i18n(`ui.fileLoadError.reason.${err.reason}`) || err.error)
+              : (err && err.error) || `HTTP ${r.status}`;
+            setError(reasonMsg);
+            setLoading(false);
+          }).catch(() => {
+            setError(`HTTP ${r.status}`);
+            setLoading(false);
+          });
+          return;
+        }
+        const len = r.headers.get('content-length');
+        if (len) setFileSize(parseInt(len, 10));
+      })
+      .catch(() => {});
+  }, [filePath, editorSession, imgSrc]);
+
+  const fitToWindow = useCallback(() => {
+    if (!naturalSize || !canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const scaleX = (rect.width - 40) / naturalSize.w;
+    const scaleY = (rect.height - 40) / naturalSize.h;
+    const fit = Math.min(scaleX, scaleY);
+    setZoom(fit);
+    setOffset({
+      x: (rect.width - naturalSize.w * fit) / 2,
+      y: (rect.height - naturalSize.h * fit) / 2,
+    });
+  }, [naturalSize]);
+
+  const handleImageLoad = useCallback((e) => {
+    const img = e.target;
+    setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+    setLoading(false);
+  }, []);
+
+  // Fit to window once natural size is known, and on resize
+  useEffect(() => {
+    if (!naturalSize) return;
+    // Delay to ensure layout is settled
+    const raf = requestAnimationFrame(() => fitToWindow());
+    let resizeRaf;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(resizeRaf);
+      resizeRaf = requestAnimationFrame(() => fitToWindow());
+    });
+    if (canvasRef.current) ro.observe(canvasRef.current);
+    return () => {
+      cancelAnimationFrame(raf);
+      cancelAnimationFrame(resizeRaf);
+      ro.disconnect();
+    };
+  }, [naturalSize]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleImageError = useCallback(() => {
+    setError('Failed to load image');
+    setLoading(false);
+  }, []);
+
+  const clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
+
+  const handleWheel = useCallback((e) => {
+    // 必须 preventDefault 拦下浏览器对 Ctrl+wheel / trackpad pinch 的整页缩放行为；
+    // 注意这里依赖下方 useEffect 用 native addEventListener({passive:false}) 绑定——React
+    // 的 onWheel 自 v17 起是 passive listener，preventDefault 会静默失败并导致页面与图片同时缩放。
+    e.preventDefault();
+    const rect = canvasRef.current.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    // Mac 触控板 pinch 被浏览器翻译成 wheel + ctrlKey，每秒发数十次小 deltaY（0.5~3px）；
+    // 鼠标滚轮稀疏发大 deltaY（~100px）。旧实现「每次事件固定 ×1.15」对 trackpad 累积爆炸
+    // ——5 次 pinch 就 ×2.0、10 次就 ×4.0。clamp 到 ±10 把鼠标极端值削掉，再用指数让小 delta
+    // 也丝滑：trackpad 单帧 ~2.8%（exp(-2*0.014)≈0.972）、鼠标 wheel ~13%（exp(-10*0.014)≈0.869），
+    // 后者接近原 15% 手感保留鼠标用户肌肉记忆，无需检测设备类型；跨 deltaMode (PIXEL/LINE/PAGE)
+    // 也被 clamp 兜底，Firefox 行模式 / 各平台精度触控板量级差异自动归一。
+    const delta = Math.max(-10, Math.min(10, e.deltaY));
+    setZoom(prev => {
+      const next = clampZoom(prev * Math.exp(-delta * 0.014));
+      const ratio = next / prev;
+      setOffset(o => ({
+        x: mx - ratio * (mx - o.x),
+        y: my - ratio * (my - o.y),
+      }));
+      return next;
+    });
+  }, []);
+
+  // React 的 onWheel 自 v17 起是 passive listener，preventDefault 会被忽略——Ctrl+wheel /
+  // trackpad pinch 时浏览器会同时整页缩放，让本组件的缩放与页面缩放叠加。这里改用 native
+  // addEventListener + {passive:false} 绑定，确保 e.preventDefault() 在 handleWheel 里生效。
+  useEffect(() => {
+    const el = canvasRef.current;
+    if (!el) return;
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [handleWheel]);
+
+  const handleMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    dragRef.current = { startX: e.clientX, startY: e.clientY, startOx: offset.x, startOy: offset.y };
+    const canvas = canvasRef.current;
+    canvas.classList.add(styles.dragging);
+
+    const onMove = (ev) => {
+      if (!dragRef.current) return;
+      setOffset({
+        x: dragRef.current.startOx + ev.clientX - dragRef.current.startX,
+        y: dragRef.current.startOy + ev.clientY - dragRef.current.startY,
+      });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      canvas.classList.remove(styles.dragging);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [offset]);
+
+  const zoomIn = () => {
+    setZoom(prev => {
+      const next = clampZoom(prev + ZOOM_STEP);
+      const rect = canvasRef.current.getBoundingClientRect();
+      const cx = rect.width / 2, cy = rect.height / 2;
+      const ratio = next / prev;
+      setOffset(o => ({ x: cx - ratio * (cx - o.x), y: cy - ratio * (cy - o.y) }));
+      return next;
+    });
+  };
+
+  const zoomOut = () => {
+    setZoom(prev => {
+      const next = clampZoom(prev - ZOOM_STEP);
+      const rect = canvasRef.current.getBoundingClientRect();
+      const cx = rect.width / 2, cy = rect.height / 2;
+      const ratio = next / prev;
+      setOffset(o => ({ x: cx - ratio * (cx - o.x), y: cy - ratio * (cy - o.y) }));
+      return next;
+    });
+  };
+
+  const resetZoom = () => {
+    if (!canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const w = naturalSize ? naturalSize.w : 0;
+    const h = naturalSize ? naturalSize.h : 0;
+    setZoom(1);
+    setOffset({ x: (rect.width - w) / 2, y: (rect.height - h) / 2 });
+  };
+
+  return (
+    <div className={styles.imageViewer}>
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <button className={styles.backBtn} onClick={onClose} title={i18n('ui.backToChat')}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6"/>
+            </svg>
+          </button>
+          <span className={styles.filePath}>{filePath}</span>
+        </div>
+        <div className={styles.headerRight}>
+          {fileSize > 0 && <span className={styles.fileSize}>{formatFileSize(fileSize)}</span>}
+          <button className={styles.closeBtn} onClick={onClose} title={i18n('ui.backToChat')}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.toolbar}>
+        <button className={styles.toolBtn} onClick={zoomIn} title={i18n('ui.imageViewer.zoomIn')}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
+          </svg>
+        </button>
+        <button className={styles.toolBtn} onClick={zoomOut} title={i18n('ui.imageViewer.zoomOut')}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/>
+          </svg>
+        </button>
+        <button className={styles.toolBtn} onClick={resetZoom} title={i18n('ui.imageViewer.resetZoom')}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M3 3h7v7H3z"/><path d="M14 3h7v7h-7z"/><path d="M3 14h7v7H3z"/><path d="M14 14h7v7h-7z"/>
+          </svg>
+        </button>
+        <button className={styles.toolBtn} onClick={fitToWindow} title={i18n('ui.imageViewer.fitToWindow')}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>
+          </svg>
+        </button>
+        <span className={styles.zoomLabel}>{Math.round(zoom * 100)}%</span>
+      </div>
+
+      <div
+        className={styles.canvasArea}
+        ref={canvasRef}
+        onMouseDown={handleMouseDown}
+      >
+        {loading && !error && <div className={styles.loading}>{i18n('ui.loading')}</div>}
+        {error && <div className={styles.error}>{error}</div>}
+        <div
+          className={styles.imageWrap}
+          style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})` }}
+        >
+          {isSvg && svgContent ? (
+            <div
+              className={styles.svgInline}
+              dangerouslySetInnerHTML={{ __html: svgContent }}
+            />
+          ) : (
+            <img
+              src={imgSrc}
+              onLoad={handleImageLoad}
+              onError={handleImageError}
+              alt={filePath}
+              draggable={false}
+              style={{ display: loading ? 'none' : 'block' }}
+            />
+          )}
+        </div>
+      </div>
+
+      {naturalSize && (
+        <div className={styles.statusBar}>
+          <span>{naturalSize.w} × {naturalSize.h}</span>
+          <span>{Math.round(zoom * 100)}%</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/viewers/ImageViewer.module.css

@@ -0,0 +1,203 @@
+.imageViewer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-base-alt);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-container);
+  flex-shrink: 0;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.backBtn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.backBtn:hover {
+  color: var(--text-secondary);
+  background: var(--bg-elevated);
+}
+
+.closeBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0.25);
+  color: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.closeBtn:hover {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.filePath {
+  font-size: 13px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileSize {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 16px;
+  background: var(--bg-container);
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+}
+
+.toolBtn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border-hover);
+  background: var(--bg-elevated);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.toolBtn:hover {
+  background: var(--bg-surface);
+  color: var(--text-white);
+  border-color: var(--border-light);
+}
+
+.zoomLabel {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  min-width: 42px;
+  text-align: center;
+  user-select: none;
+}
+
+.canvasArea {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  background-color: var(--bg-elevated);
+  background-image:
+    linear-gradient(45deg, rgba(0,0,0,0.08) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(0,0,0,0.08) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.08) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.08) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+}
+
+.canvasArea.dragging {
+  cursor: grabbing;
+}
+
+.imageWrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.imageWrap img {
+  display: block;
+  max-width: none;
+  image-rendering: auto;
+}
+
+.svgInline {
+  background: var(--bg-elevated);
+  border-radius: 8px;
+  padding: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svgInline svg {
+  display: block;
+  height: 200px;
+  width: auto;
+}
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 16px;
+  background: var(--bg-container);
+  border-top: 1px solid var(--border-primary);
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: var(--color-error-light);
+  font-size: 14px;
+}

package/src/components/viewers/JsonViewer.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { JsonView, darkStyles, defaultStyles } from 'react-json-view-lite';
+import 'react-json-view-lite/dist/index.css';
+import styles from './JsonViewer.module.css';
+
+class JsonViewer extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.data !== this.props.data || nextProps.defaultExpand !== this.props.defaultExpand || nextProps.expandNode !== this.props.expandNode;
+  }
+
+  render() {
+    const { data, defaultExpand, expandNode } = this.props;
+    const isDark = typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') !== 'light';
+    const customStyles = {
+      ...(isDark ? darkStyles : defaultStyles),
+      container: 'rjv-container',
+    };
+    if (data === null || data === undefined) return null;
+
+    const shouldExpandNode = typeof expandNode === 'function'
+      ? expandNode
+      : defaultExpand === 'all'
+        ? () => true
+        : defaultExpand === 'root'
+          ? (level) => level < 2
+          : (level) => level < 1;
+
+    return (
+      <div className={styles.container}>
+        <JsonView
+          data={data}
+          shouldExpandNode={shouldExpandNode}
+          style={customStyles}
+        />
+      </div>
+    );
+  }
+}
+
+export default JsonViewer;

package/src/components/viewers/JsonViewer.module.css

@@ -0,0 +1,9 @@
+.container {
+  background: var(--bg-container);
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+  padding: 12px;
+  font-size: 13px;
+  font-family: var(--font-mono);
+  overflow: auto;
+}

package/src/components/viewers/LogTable.jsx

@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react';
+import { Table, Checkbox, Button, Tag, Popover } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+import { t } from '../../i18n';
+import { formatSize, formatTimestamp } from '../../utils/formatters';
+import styles from '../../App.module.css';
+
+const EMPTY_SET = new Set();
+
+function LogTable({ logs, mobile, selectedLogs = EMPTY_SET, onToggleSelect, onOpenLog, onDownloadLog }) {
+  const columns = useMemo(() => [
+    {
+      title: '',
+      dataIndex: 'file',
+      key: 'check',
+      width: 40,
+      fixed: mobile ? 'left' : false,
+      render: (file) => (
+        <Checkbox
+          checked={selectedLogs.has(file) || false}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => { e.stopPropagation(); onToggleSelect(file, e.target.checked); }}
+        />
+      ),
+    },
+    {
+      title: t('ui.logTime'),
+      dataIndex: 'timestamp',
+      key: 'time',
+      width: mobile ? 150 : 180,
+      render: (ts) => <span className={styles.tableTimestampCell}>{formatTimestamp(ts, mobile)}</span>,
+    },
+    // 实例归属(pid)列：仅桌面端（移动端列宽紧张，沿用 turns 列同款 !mobile 守卫）。
+    // 无 pid 的无标签日志该列留空。
+    ...(!mobile ? [{
+      title: t('ui.logInstanceId'),
+      dataIndex: 'instanceId',
+      key: 'instanceId',
+      width: 90,
+      render: (id) => id ? <Tag className={styles.tableTag}>{id}</Tag> : null,
+    }] : []),
+    {
+      title: t('ui.logPreview'),
+      dataIndex: 'preview',
+      key: 'preview',
+      width: mobile ? 150 : undefined,
+      ellipsis: true,
+      render: (arr, log) => {
+        // 已归档文件统一前缀一个"已归档"tag：preview 为空时单独显示，preview 有内容时
+        // 与文本并排（archived 状态独立于 preview 是否保留 stats 缓存）。
+        const archivedTag = log.archived
+          ? <Tag className={styles.tableTag} style={{ marginRight: 6 }}>{t('ui.logArchived')}</Tag>
+          : null;
+        if (!Array.isArray(arr) || arr.length === 0) {
+          return archivedTag || '—';
+        }
+        const first = arr[0];
+        // 防 server 偶发返回 [null] / [undefined] / [number] — 强制 string 才用作 displayText
+        if (typeof first !== 'string') return archivedTag || '—';
+        const displayText = (first.length <= 30 && arr.length > 1) ? `${first} | ${arr[1]}` : first;
+        if (arr.length <= 1) return <span className={styles.tablePreviewText}>{archivedTag}{displayText}</span>;
+        return (
+          <Popover
+            trigger={mobile ? 'click' : 'hover'}
+            placement={mobile ? 'bottomLeft' : 'leftTop'}
+            autoAdjustOverflow={{ adjustX: false, adjustY: true }}
+            overlayInnerStyle={{
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--border-hover)',
+              borderRadius: 8,
+              padding: 0,
+              maxHeight: 400,
+              overflowY: 'auto',
+            }}
+            content={
+              <div className={styles.previewPopover}>
+                {arr.map((text, i) => (
+                  <div key={i} className={styles.previewItem}>
+                    <pre className={styles.previewText}>{text}</pre>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            <span className={styles.tablePreviewTextClickable} style={{ textDecoration: mobile ? 'underline dotted #666' : 'none' }}>{archivedTag}{displayText}</span>
+          </Popover>
+        );
+      },
+    },
+    {
+      title: t('ui.logSize'),
+      dataIndex: 'size',
+      key: 'size',
+      width: 90,
+      render: (v) => <Tag className={styles.tableTag}>{formatSize(v)}</Tag>,
+    },
+    {
+      title: t('ui.logActions'),
+      key: 'actions',
+      width: mobile ? 120 : 130,
+      render: (_, log) => (
+        <span className={styles.tableActionsCell}>
+          <Button size="small" type="primary" onClick={(e) => { e.stopPropagation(); onOpenLog(log.file); }}>
+            {t('ui.openLog')}
+          </Button>
+          <Button size="small" icon={<DownloadOutlined />} title={t('ui.downloadLog')} onClick={(e) => { e.stopPropagation(); onDownloadLog(log.file); }} />
+        </span>
+      ),
+    },
+  ], [mobile, selectedLogs, onToggleSelect, onOpenLog, onDownloadLog]);
+
+  return (
+    <Table
+      size="small"
+      dataSource={logs}
+      columns={columns}
+      rowKey="file"
+      pagination={false}
+      scroll={mobile ? { x: 'max-content', y: 'calc(100vh - 160px)' } : { y: 400 }}
+      onRow={(log) => ({
+        onClick: () => {
+          const checked = !selectedLogs.has(log.file);
+          onToggleSelect(log.file, checked);
+        },
+        style: { cursor: 'pointer' },
+      })}
+    />
+  );
+}
+
+export default LogTable;