feat(viewer): add pinned logs with rotation protection and compare limit to 5

Author: kamilio

src/controllers/viewer-controller.js

@@ -19,6 +19,7 @@ import {
 } from '../viewer-filters.js';
 import { logToHar } from '../services/har-service.js';
 import { logToPython } from '../services/python-service.js';
+import { pinLog, unpinLog, isPinned, getPinnedSet } from '../pinned.js';
 
 export function createViewerController(config) {
   return {
@@ -29,19 +30,21 @@ export function createViewerController(config) {
       const baseUrlFilters = normalizeBaseUrlFilters(parseCsvParam(req.query.baseUrl));
       const aliasFilters = normalizeAliasFilters(parseCsvParam(req.query.alias));
       const methodFilters = normalizeMethodFilters(parseCsvParam(req.query.method));
+      const pinnedFilter = req.query.pinned === '1';
       const { aliasByHost, aliasHostMap, aliasNameMap } = buildAliasMaps(config.aliases);
+      const pinnedSet = getPinnedSet();
+
       const { logs, total } = await getViewerIndexData(
         config.outputDir,
         {
-          limit,
-          offset,
+          limit: pinnedFilter ? 1000 : limit,
+          offset: pinnedFilter ? 0 : offset,
           baseUrls: baseUrlFilters,
           aliases: aliasFilters,
           methods: methodFilters,
           aliasHostMap,
         }
       );
-      const totalPages = Math.ceil(total / limit);
 
       const processedLogs = logs.map((log) => {
         const baseUrl = normalizeBaseUrlValue(log?.request?.url);
@@ -51,6 +54,8 @@ export function createViewerController(config) {
           (baseUrl ? aliasByHost[baseUrl] : null) ||
           null;
         const messageCount = getRequestMessageCount(log);
+        const logId = `${log._viewer_provider}/${log._viewer_file}`;
+        const logPinned = pinnedSet.has(logId);
         try {
           const url = new URL(log.request.url);
           const hidden = shouldHideFromViewer(url.pathname);
@@ -61,6 +66,7 @@ export function createViewerController(config) {
             _base_url: baseUrl,
             _alias: aliasLabel,
             _message_count: messageCount,
+            _pinned: logPinned,
           };
         } catch {
           return {
@@ -69,20 +75,32 @@ export function createViewerController(config) {
             _base_url: baseUrl,
             _alias: aliasLabel,
             _message_count: messageCount,
+            _pinned: logPinned,
           };
         }
       });
 
+      // Filter to pinned only if requested
+      const filteredLogs = pinnedFilter
+        ? processedLogs.filter((log) => log._pinned)
+        : processedLogs;
+      const filteredTotal = pinnedFilter ? filteredLogs.length : total;
+      const paginatedLogs = pinnedFilter
+        ? filteredLogs.slice(offset, offset + limit)
+        : filteredLogs;
+      const totalPages = Math.ceil(filteredTotal / limit);
+
       const html = await renderViewer(
         {
-          logs: processedLogs,
+          logs: paginatedLogs,
           limit,
           page,
           totalPages,
-          total,
+          total: filteredTotal,
           baseUrlFilters,
           aliasFilters,
           methodFilters,
+          pinnedFilter,
           aliasByHost,
         }
       );
@@ -140,7 +158,7 @@ export function createViewerController(config) {
 
         if (invalid.length || selections.length < 2) {
           const message = invalid.length
-            ? 'Invalid compare selection. Choose two or three valid log entries.'
+            ? 'Invalid compare selection. Choose two to five valid log entries.'
             : 'Select at least two logs to compare.';
           const html = await renderViewerCompare({
             logs: [],
@@ -306,6 +324,46 @@ export function createViewerController(config) {
         res.status(500).json({ error: 'Download Python error', message: error.message });
       }
     },
+
+    pin: async (req, res) => {
+      try {
+        const { provider, filename } = req.params;
+        const logId = `${provider}/${filename}`;
+        const log = await loadViewerLog(config.outputDir, provider, filename);
+        if (!log) {
+          res.status(404).json({ error: 'Not found' });
+          return;
+        }
+        const result = pinLog(logId);
+        res.json({ success: true, ...result });
+      } catch (error) {
+        console.error('Viewer pin error:', error.message);
+        res.status(500).json({ error: 'Pin error', message: error.message });
+      }
+    },
+
+    unpin: async (req, res) => {
+      try {
+        const { provider, filename } = req.params;
+        const logId = `${provider}/${filename}`;
+        const result = unpinLog(logId);
+        res.json({ success: true, ...result });
+      } catch (error) {
+        console.error('Viewer unpin error:', error.message);
+        res.status(500).json({ error: 'Unpin error', message: error.message });
+      }
+    },
+
+    getPinStatus: async (req, res) => {
+      try {
+        const { provider, filename } = req.params;
+        const logId = `${provider}/${filename}`;
+        res.json({ pinned: isPinned(logId), logId });
+      } catch (error) {
+        console.error('Viewer pin status error:', error.message);
+        res.status(500).json({ error: 'Pin status error', message: error.message });
+      }
+    },
   };
 }
 

src/logger.js

@@ -4,6 +4,7 @@ import yaml from 'js-yaml';
 import { sanitizeBody, sanitizeHeaders, sanitizeUrl } from './redact.js';
 import { filterLogs } from './viewer-filters.js';
 import { loadConfig } from './config.js';
+import { getPinnedSet } from './pinned.js';
 
 function generateFilename() {
   const now = new Date();
@@ -34,13 +35,13 @@ async function getAllLogFiles(outputDir) {
     const rootEntries = await readdir(outputDir, { withFileTypes: true });
     for (const entry of rootEntries) {
       if (entry.isFile() && entry.name.endsWith('.yaml')) {
-        files.push({ path: join(outputDir, entry.name), name: entry.name });
+        files.push({ path: join(outputDir, entry.name), name: entry.name, logId: `unknown/${entry.name}` });
       } else if (entry.isDirectory()) {
         try {
           const subFiles = await readdir(join(outputDir, entry.name));
           for (const subFile of subFiles) {
             if (subFile.endsWith('.yaml')) {
-              files.push({ path: join(outputDir, entry.name, subFile), name: subFile });
+              files.push({ path: join(outputDir, entry.name, subFile), name: subFile, logId: `${entry.name}/${subFile}` });
             }
           }
         } catch {
@@ -60,12 +61,17 @@ async function rotateLogsIfNeeded(outputDir) {
   if (!maxLogs || maxLogs <= 0) return;
 
   const files = await getAllLogFiles(outputDir);
-  if (files.length <= maxLogs) return;
+  const pinnedSet = getPinnedSet();
+
+  // Separate pinned and unpinned files
+  const unpinnedFiles = files.filter((f) => !pinnedSet.has(f.logId));
+
+  if (unpinnedFiles.length <= maxLogs) return;
 
   // Sort by filename (which contains timestamp) - oldest first
-  files.sort((a, b) => a.name.localeCompare(b.name));
+  unpinnedFiles.sort((a, b) => a.name.localeCompare(b.name));
 
-  const toDelete = files.slice(0, files.length - maxLogs);
+  const toDelete = unpinnedFiles.slice(0, unpinnedFiles.length - maxLogs);
   for (const file of toDelete) {
     try {
       await unlink(file.path);

src/pinned.js

@@ -0,0 +1,61 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import yaml from 'js-yaml';
+import { getBaseDir } from './paths.js';
+
+function getPinnedFilePath() {
+  return join(getBaseDir(), 'pinned.yaml');
+}
+
+export function loadPinned() {
+  const pinnedPath = getPinnedFilePath();
+  if (!existsSync(pinnedPath)) {
+    return [];
+  }
+  try {
+    const content = readFileSync(pinnedPath, 'utf-8');
+    const parsed = yaml.load(content);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function savePinned(pinned) {
+  const pinnedPath = getPinnedFilePath();
+  mkdirSync(dirname(pinnedPath), { recursive: true });
+  const content = yaml.dump(pinned, {
+    indent: 2,
+    lineWidth: -1,
+    noRefs: true,
+  });
+  writeFileSync(pinnedPath, content, 'utf-8');
+}
+
+export function isPinned(logId) {
+  const pinned = loadPinned();
+  return pinned.includes(logId);
+}
+
+export function pinLog(logId) {
+  const pinned = loadPinned();
+  if (!pinned.includes(logId)) {
+    pinned.push(logId);
+    savePinned(pinned);
+  }
+  return { pinned: true, logId };
+}
+
+export function unpinLog(logId) {
+  const pinned = loadPinned();
+  const index = pinned.indexOf(logId);
+  if (index !== -1) {
+    pinned.splice(index, 1);
+    savePinned(pinned);
+  }
+  return { pinned: false, logId };
+}
+
+export function getPinnedSet() {
+  return new Set(loadPinned());
+}

src/routes/viewer.js

@@ -17,6 +17,9 @@ export function createViewerRouter(config) {
   router.get('/:provider/:filename/har', controller.downloadHar);
   router.get('/:provider/:filename/python', controller.downloadPython);
   router.delete('/:provider/:filename', controller.delete);
+  router.post('/:provider/:filename/pin', controller.pin);
+  router.delete('/:provider/:filename/pin', controller.unpin);
+  router.get('/:provider/:filename/pin', controller.getPinStatus);
   router.all('*', (req, res) => {
     res.status(404).json({ error: 'Not found' });
   });

src/services/viewer-service.js

@@ -124,7 +124,7 @@ export function buildCompareData(logs, { baselineIndex = 0 } = {}) {
   return { sections, baselineIndex: clampedBaseline };
 }
 
-export function parseCompareLogSelection(value, { max = 3 } = {}) {
+export function parseCompareLogSelection(value, { max = 5 } = {}) {
   const selections = [];
   const invalid = [];
   const seen = new Set();