cx-viewer 1.0.2 → 1.0.4

package/src/utils/entryCache.js

@@ -0,0 +1,179 @@
+const DB_NAME = 'cxv_entryCache';
+const STORE_NAME = 'entries';
+const CACHE_KEY = 'cache';
+const META_KEY = 'cxv_cacheMeta';
+const DB_VERSION = 2;
+const MAX_AGE = 7 * 24 * 60 * 60 * 1000; // 7 天过期
+
+// 单例 DB 连接，避免每次操作都重新打开
+let _dbInstance = null;
+let _dbPromise = null;
+
+function getDB() {
+  if (_dbInstance) return Promise.resolve(_dbInstance);
+  if (_dbPromise) return _dbPromise;
+  _dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+      if (!db.objectStoreNames.contains('sessions')) {
+        db.createObjectStore('sessions');
+      }
+    };
+    req.onsuccess = () => {
+      _dbInstance = req.result;
+      _dbInstance.onclose = () => { _dbInstance = null; };
+      _dbPromise = null;
+      resolve(_dbInstance);
+    };
+    req.onerror = () => {
+      _dbPromise = null;
+      reject(req.error);
+    };
+  });
+  return _dbPromise;
+}
+
+// 写入序列化：丢弃排队中的过时写入，只保留最新一次
+let _writeId = 0;
+
+function saveMeta(projectName, entries) {
+  try {
+    const last = entries[entries.length - 1];
+    const lastTs = last?.timestamp || null;
+    if (lastTs) {
+      localStorage.setItem(META_KEY, JSON.stringify({ projectName, lastTs, count: entries.length }));
+    }
+  } catch {
+    // 静默
+  }
+}
+
+function clearMeta() {
+  try {
+    localStorage.removeItem(META_KEY);
+  } catch {
+    // 静默
+  }
+}
+
+/**
+ * 同步读取缓存元数据（用于 initSSE 构造增量请求参数）
+ * @returns {{ projectName: string, lastTs: string, count: number } | null}
+ */
+export function getCacheMeta() {
+  try {
+    const raw = localStorage.getItem(META_KEY);
+    if (!raw) return null;
+    const meta = JSON.parse(raw);
+    if (meta?.lastTs && meta?.count > 0 && meta?.projectName) return meta;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function saveEntries(projectName, entries) {
+  if (!projectName || !Array.isArray(entries) || entries.length === 0) return;
+  const myId = ++_writeId;
+  try {
+    const db = await getDB();
+    // 被更新的写入请求取代，丢弃本次
+    if (myId !== _writeId) return;
+    saveMeta(projectName, entries);
+    return new Promise((resolve) => {
+      const tx = db.transaction(STORE_NAME, 'readwrite');
+      tx.objectStore(STORE_NAME).put({ projectName, entries, ts: Date.now() }, CACHE_KEY);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    });
+  } catch {
+    // 静默
+  }
+}
+
+export async function loadEntries(projectName) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve) => {
+      const tx = db.transaction(STORE_NAME, 'readonly');
+      const req = tx.objectStore(STORE_NAME).get(CACHE_KEY);
+      req.onsuccess = () => {
+        const data = req.result;
+        if (!data || data.projectName !== projectName || !Array.isArray(data.entries) || data.entries.length === 0) {
+          resolve(null);
+        } else if (data.ts && Date.now() - data.ts > MAX_AGE) {
+          // 缓存超过 7 天，清除并返回 null
+          clearEntries();
+          resolve(null);
+        } else {
+          resolve(data.entries);
+        }
+      };
+      req.onerror = () => resolve(null);
+    });
+  } catch {
+    return null;
+  }
+}
+
+export async function clearEntries() {
+  clearMeta();
+  try {
+    const db = await getDB();
+    return new Promise((resolve) => {
+      const tx = db.transaction(STORE_NAME, 'readwrite');
+      tx.objectStore(STORE_NAME).delete(CACHE_KEY);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    });
+  } catch {
+    // 静默
+  }
+}
+
+// --- Per-session 存储 (P1 hot/cold) ---
+
+export async function saveSessionEntries(projectName, sessionId, entries) {
+  if (!projectName || entries == null) return;
+  try {
+    const db = await getDB();
+    const key = `${projectName}:${sessionId}`;
+    return new Promise((resolve) => {
+      const tx = db.transaction('sessions', 'readwrite');
+      tx.objectStore('sessions').put({ entries, ts: Date.now() }, key);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    });
+  } catch {
+    // 静默
+  }
+}
+
+export async function loadSessionEntries(projectName, sessionId) {
+  try {
+    const db = await getDB();
+    const key = `${projectName}:${sessionId}`;
+    return new Promise((resolve) => {
+      const tx = db.transaction('sessions', 'readonly');
+      const req = tx.objectStore('sessions').get(key);
+      req.onsuccess = () => {
+        const data = req.result;
+        if (!data || !Array.isArray(data.entries) || data.entries.length === 0) {
+          resolve(null);
+        } else if (data.ts && Date.now() - data.ts > MAX_AGE) {
+          resolve(null);
+        } else {
+          resolve(data.entries);
+        }
+      };
+      req.onerror = () => resolve(null);
+    });
+  } catch {
+    return null;
+  }
+}
+

package/src/utils/errorReport.js

@@ -0,0 +1,40 @@
+/**
+ * Error-reporting convention for swallowed catch blocks.
+ *
+ * The rule (see AGENTS.md): a `catch` whose failure has diagnostic value —
+ * anything where a throw means lost data or broken UI (SSE/WS event parsing,
+ * entry ingest, state updates, fetch response handling) — must call
+ * `reportSwallowed(tag, err)` instead of swallowing silently. Purely-benign
+ * best-effort guards (localStorage get/set, tabBridge IPC, revokeObjectURL,
+ * listener-cleanup `off()`) stay bare `catch {}`.
+ *
+ * Tag grammar: `<channel>.<event-name-verbatim>`, e.g. `sse.load_chunk`,
+ * `sse.stream-progress`, `ws.terminal-msg`. Keep the event name exactly as it
+ * appears in the code/protocol so a grep for the tag round-trips to the site.
+ * All reports share the greppable `[cxv:` console prefix.
+ *
+ * Dedup: identical failures usually repeat (e.g. every SSE event of a changed
+ * payload shape fails the same way), so each tag logs at most
+ * MAX_REPORTS_PER_TAG occurrences per session, then one suppression notice,
+ * then goes silent. Counter-based on purpose — no Date/timers, so this module
+ * is statically loadable and deterministic under `node --test`.
+ */
+export const MAX_REPORTS_PER_TAG = 5;
+
+const _counts = new Map();
+
+export function reportSwallowed(tag, err, extra) {
+  const n = (_counts.get(tag) || 0) + 1;
+  _counts.set(tag, n);
+  if (n > MAX_REPORTS_PER_TAG + 1) return;
+  if (n === MAX_REPORTS_PER_TAG + 1) {
+    console.warn(`[cxv:${tag}] further occurrences suppressed`);
+    return;
+  }
+  if (extra !== undefined) console.warn(`[cxv:${tag}]`, err, extra);
+  else console.warn(`[cxv:${tag}]`, err);
+}
+
+export function _resetForTest() {
+  _counts.clear();
+}

package/src/utils/fileExpandedPathsStorage.js

@@ -0,0 +1,70 @@
+// 文件浏览器 + GitChanges 文件夹层级状态的 sessionStorage 持久化。
+//
+// 设计要点：
+// - sessionStorage 跟 tab 生命周期绑定；按 projectName 拆 key，避免不同项目状态串扰。
+// - projectName 由后端 /api/project-name 返回，已在 interceptor.js 里 sanitize 成 [a-zA-Z0-9_\-\.]，
+//   可直接拼 key 后缀，无需 encodeURIComponent。
+// - 空 projectName（启动期 race / 本地日志模式）：跳过读写，避免污染 ":" 这种孤儿 key。
+// - Safari Private Mode / 容量满 / sandbox：sessionStorage 访问会抛，外层 try/catch 兜底返回空 Set。
+// - 旧值损坏（被扩展改坏、非数组）：JSON.parse 失败回退空 Set。
+//
+// 两个 bucket 语义反向但独立：
+//   FILE_PREFIX        存"展开"集合（FileExplorer 默认全折叠，展开的存）
+//   GIT_COLLAPSED_PREFIX 存"折叠"集合（GitChanges 默认全展开，折叠的存）
+// 由 wrapper 函数名（loadExpandedPaths vs loadGitChangesCollapsedDirs）明示，
+// 防 maintainer 混用。
+
+const FILE_PREFIX = 'cxv_fileExpandedPaths:';
+const GIT_COLLAPSED_PREFIX = 'cxv_gitChangesCollapsedDirs:';
+
+function keyFor(prefix, projectName) {
+  if (!projectName || typeof projectName !== 'string') return null;
+  return prefix + projectName;
+}
+
+function loadSet(prefix, projectName) {
+  const key = keyFor(prefix, projectName);
+  if (!key) return new Set();
+  try {
+    const raw = sessionStorage.getItem(key);
+    if (!raw) return new Set();
+    const arr = JSON.parse(raw);
+    if (!Array.isArray(arr)) return new Set();
+    return new Set(arr.filter(p => typeof p === 'string'));
+  } catch {
+    return new Set();
+  }
+}
+
+function saveSet(prefix, projectName, set) {
+  const key = keyFor(prefix, projectName);
+  if (!key) return;
+  try {
+    // 空集走 removeItem 而非写 '[]'：避免 sessionStorage 留孤儿 entry，并让下次
+    // load 的 `!raw` 快路径生效；与 load 的"无值 → 空 Set"语义对齐。
+    if (!set || set.size === 0) {
+      sessionStorage.removeItem(key);
+      return;
+    }
+    sessionStorage.setItem(key, JSON.stringify(Array.from(set)));
+  } catch {
+    /* private mode / quota — 忽略 */
+  }
+}
+
+// FileExplorer：存"展开"集合，默认全折叠
+export function loadExpandedPaths(projectName) {
+  return loadSet(FILE_PREFIX, projectName);
+}
+export function saveExpandedPaths(projectName, set) {
+  saveSet(FILE_PREFIX, projectName, set);
+}
+
+// GitChanges：存"折叠"集合（key 形态 `${repoPath}::${dirPath}`），默认全展开。
+// 语义跟 FileExplorer 反向，函数名明示防混用。
+export function loadGitChangesCollapsedDirs(projectName) {
+  return loadSet(GIT_COLLAPSED_PREFIX, projectName);
+}
+export function saveGitChangesCollapsedDirs(projectName, set) {
+  saveSet(GIT_COLLAPSED_PREFIX, projectName, set);
+}

package/src/utils/fileIcons.jsx

@@ -0,0 +1,36 @@
+/**
+ * 文件/文件夹图标 — 统一管理扩展名颜色和 SVG 渲染。
+ *
+ * FileExplorer、GitChanges 等组件共用此模块，
+ * 新增文件类型颜色只需修改 EXT_COLORS。
+ */
+import React from 'react';
+
+const EXT_COLORS = {
+  js: '#e8d44d', jsx: '#61dafb', ts: '#3178c6', tsx: '#3178c6',
+  json: '#999', md: '#519aba', css: '#a86fd9', scss: '#cd6799', less: '#a86fd9',
+  html: '#e34c26', htm: '#e34c26', xml: '#e34c26',
+  py: '#3572a5', go: '#00add8', rs: '#dea584', rb: '#cc342d',
+  java: '#b07219', c: '#555', cpp: '#f34b7d', h: '#555',
+  sh: '#4eaa25', bash: '#4eaa25', zsh: '#4eaa25',
+  yml: '#cb171e', yaml: '#cb171e', toml: '#999',
+  svg: '#e34c26', png: '#a86fd9', jpg: '#a86fd9', jpeg: '#a86fd9', gif: '#a86fd9', bmp: '#a86fd9', ico: '#a86fd9', icns: '#a86fd9', webp: '#a86fd9', avif: '#a86fd9',
+};
+
+export function getFileIcon(name, type) {
+  if (type === 'directory') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--color-accent-yellow)" stroke="none">
+        <path d="M2 6c0-1.1.9-2 2-2h5l2 2h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z"/>
+      </svg>
+    );
+  }
+  const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
+  const color = EXT_COLORS[ext] || '#888';
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+      <polyline points="14 2 14 8 20 8"/>
+    </svg>
+  );
+}

package/src/utils/fileOpen.js

@@ -0,0 +1,37 @@
+/**
+ * 文件打开策略 — 统一管理哪些文件类型应由系统默认应用打开。
+ *
+ * 所有需要判断"是否用系统应用打开"的调用方都通过此模块，
+ * 以后新增类型只需修改这里。
+ */
+
+import { apiUrl } from './apiUrl';
+
+/** 需要系统默认应用打开的扩展名 */
+const SYSTEM_OPEN_EXTS = new Set([
+  'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
+  'odt', 'ods', 'odp', 'pdf',
+]);
+
+/**
+ * 尝试用系统默认应用打开文件。
+ * 如果文件扩展名匹配 SYSTEM_OPEN_EXTS，调用 /api/open-file 并返回 true；
+ * 否则返回 false，由调用方自行处理。
+ *
+ * @param {string} path - 文件路径
+ * @param {string} source - 调用来源，用于区分不同场景的潜在交互差异
+ *   'file-explorer' | 'git-changes' | 'git-diff' | 'chat-message'
+ * @returns {boolean} 是否已处理
+ */
+export function tryOpenWithSystem(path, source) {
+  const ext = (path || '').split('.').pop().toLowerCase();
+  if (!SYSTEM_OPEN_EXTS.has(ext)) return false;
+
+  fetch(apiUrl('/api/open-file'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, source }),
+  }).catch(() => {});
+
+  return true;
+}

package/src/utils/formatters.js

@@ -0,0 +1,48 @@
+// 共享展示格式化工具。
+// formatSize 用 4 档 (B/KB/MB/GB) — 与 WorkspaceList 旧版语义一致，覆盖原 LogTable 的 3 档版本。
+// formatTimestamp 接 cx-viewer 日志 ts 字符串 (YYYYMMDD_HHMMSS...)；mobile=true 时省略年份。
+export function formatSize(bytes) {
+  if (!bytes) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let i = 0;
+  let size = bytes;
+  while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
+  return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+}
+
+export function formatTimestamp(ts, mobile) {
+  if (!ts || ts.length < 15) return ts;
+  if (mobile) return `${ts.slice(4, 6)}-${ts.slice(6, 8)} ${ts.slice(9, 11)}:${ts.slice(11, 13)}:${ts.slice(13, 15)}`;
+  return `${ts.slice(0, 4)}-${ts.slice(4, 6)}-${ts.slice(6, 8)} ${ts.slice(9, 11)}:${ts.slice(11, 13)}:${ts.slice(13, 15)}`;
+}
+
+// 共享时钟格式化原语（本地时区，零填充）。formatPromptNavTime（Prompt 导航）与
+// ChatMessage.formatTime（气泡时间）复用同一实现，使「HH:MM:SS」/「MM-DD HH:MM:SS」格式
+// 单一来源、无需再手工同步两处。入参为已构造的 Date。
+const _pad2 = (n) => String(n).padStart(2, '0');
+export function formatHms(d) {
+  return `${_pad2(d.getHours())}:${_pad2(d.getMinutes())}:${_pad2(d.getSeconds())}`;
+}
+export function formatMonthDayTime(d) {
+  return `${_pad2(d.getMonth() + 1)}-${_pad2(d.getDate())} ${formatHms(d)}`;
+}
+
+// formatPromptNavTime 接 ISO 8601 / Date-可解析字符串（消息的 _timestamp，如 ChatView 用户 Prompt
+// 导航传入的 props.timestamp），输出本地时区的 "MM-DD HH:MM:SS"。缺失/非法 → ''。
+export function formatPromptNavTime(ts) {
+  if (!ts) return '';
+  try {
+    const d = new Date(ts);
+    if (isNaN(d.getTime())) return '';
+    return formatMonthDayTime(d);
+  } catch { return ''; }
+}
+
+// Single source of truth for the context-fullness severity color, shared by the
+// desktop header bar, the mobile header tag, and the cache popover so all three
+// surfaces always agree for the same percentage.
+// Thresholds 75/55: keeps a felt buffer before the auto-compact trigger (~83.5%)
+// under the raw-occupancy interpretation of the percentage.
+export function contextSeverityColor(percent) {
+  return percent >= 75 ? 'var(--color-error-light)' : percent >= 55 ? 'var(--color-warning-light)' : 'var(--color-success)';
+}

package/src/utils/gitApi.js

@@ -0,0 +1,50 @@
+import { apiUrl } from './apiUrl';
+
+export async function fetchAllRepos() {
+  let repoList;
+  try {
+    const repoRes = await fetch(apiUrl('/api/git-repos'));
+    if (!repoRes.ok) throw new Error('No git-repos endpoint');
+    const data = await repoRes.json();
+    repoList = data.repos || [];
+  } catch {
+    // 回退：旧服务器没有 /api/git-repos，用 /api/git-status 兼容单仓库
+    try {
+      const statusRes = await fetch(apiUrl('/api/git-status'));
+      if (!statusRes.ok) return [];
+      const data = await statusRes.json();
+      return [{ name: '.', path: '.', isRoot: true, changes: data.changes || [], insertions: data.insertions || 0, deletions: data.deletions || 0, commits: [], hasUpstream: false }];
+    } catch {
+      return [];
+    }
+  }
+  // GET /api/git-status?repo=<path> → { changes, insertions, deletions, insertions_capped? }
+  // GET /api/git-log-unpushed?repo=<path> → { commits, hasUpstream, branch?, upstream?, truncated?, totalCount? }
+  //   commit shape: { hash, shortHash, author, date (ISO), subject, files: [{status, file}] }
+  //   详见 server/lib/git-diff.js: getUnpushedCommits / server.js: /api/git-log-unpushed handler.
+  const results = await Promise.all(
+    repoList.map(async (repo) => {
+      const [statusData, commitsData] = await Promise.all([
+        fetch(apiUrl(`/api/git-status?repo=${encodeURIComponent(repo.path)}`))
+          .then(r => r.ok ? r.json() : { changes: [], insertions: 0, deletions: 0 })
+          .catch(() => ({ changes: [], insertions: 0, deletions: 0 })),
+        fetch(apiUrl(`/api/git-log-unpushed?repo=${encodeURIComponent(repo.path)}`))
+          .then(r => r.ok ? r.json() : { commits: [], hasUpstream: false })
+          .catch(() => ({ commits: [], hasUpstream: false })),
+      ]);
+      return {
+        ...repo,
+        changes: statusData.changes || [],
+        insertions: statusData.insertions || 0,
+        deletions: statusData.deletions || 0,
+        commits: commitsData.commits || [],
+        hasUpstream: !!commitsData.hasUpstream,
+        branch: commitsData.branch || null,
+        upstream: commitsData.upstream || null,
+        truncated: !!commitsData.truncated,
+        totalCount: typeof commitsData.totalCount === 'number' ? commitsData.totalCount : (commitsData.commits || []).length,
+      };
+    })
+  );
+  return results;
+}

package/src/utils/gitTreeBuilder.js

@@ -0,0 +1,19 @@
+// 将扁平的文件变更列表构建为目录树
+// 后端 `git status --porcelain -uall` 会把新目录展开到具体文件。若因旧 server
+// 未重启或其它原因返回了目录占位（尾斜杠路径），直接跳过——不能把目录名误
+// 当作文件渲染，也不能入 tree 造成空节点。用户重启 server 后会拿到真实文件。
+export function buildGitTree(changes) {
+  const root = { dirs: {}, files: [] };
+  for (const change of changes) {
+    if (!change.file || change.file.endsWith('/')) continue;
+    const parts = change.file.split('/').filter(Boolean);
+    if (parts.length === 0) continue;
+    let node = root;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!node.dirs[parts[i]]) node.dirs[parts[i]] = { dirs: {}, files: [] };
+      node = node.dirs[parts[i]];
+    }
+    node.files.push({ name: parts[parts.length - 1], status: change.status, fullPath: change.file });
+  }
+  return root;
+}