reviw 0.22.0 → 0.23.0

package/cli.cjs

@@ -7,7 +7,7 @@
  *
  * Multiple files can be specified. Each file opens on a separate port.
  * Click cells in the browser to add comments.
- * Close the tab or click "Submit & Exit" to send comments to the server.
+ * Click "Submit & Exit" to send comments to the server.
  * When all files are closed, outputs combined YAML to stdout and exits.
  */
 
@@ -1871,7 +1871,7 @@ function diffHtmlTemplate(diffData, history = []) {
   <aside class="comment-list collapsed">
     <h3>Comments</h3>
     <ol id="comment-list"></ol>
-    <p class="hint">Click "Submit & Exit" to finish review.</p>
+    <p class="hint">Click "Submit & Exit" to finish review and output results.</p>
   </aside>
 
   <div class="modal-overlay" id="submit-modal">
@@ -2591,7 +2591,7 @@ function diffHtmlTemplate(diffData, history = []) {
     document.getElementById('modal-cancel').addEventListener('click', hideSubmitModal);
     async function doSubmit() {
       globalComment = globalCommentInput.value;
-      savePromptPrefs();
+      if (typeof savePromptPrefs === 'function') savePromptPrefs();
       hideSubmitModal();
       await sendAndExit('button');
       // Try to close window; if it fails (browser security), show completion message
@@ -2956,6 +2956,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     td:hover:not(.selected) { background: var(--hover-bg); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.25); }
     td.has-comment { background: rgba(34,197,94,0.12); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.35); }
     td.selected, tbody th.selected { background: rgba(99,102,241,0.22) !important; box-shadow: inset 0 0 0 1px rgba(99,102,241,0.45); }
+    .preview-highlight { background: rgba(167,139,250,0.18) !important; box-shadow: inset 0 0 0 2px rgba(139,92,246,0.35); border-radius: 4px; transition: background 150ms ease, box-shadow 150ms ease; padding-left: 8px; margin-left: -8px; }
     thead th.selected { background: #c7d2fe !important; box-shadow: inset 0 0 0 1px rgba(99,102,241,0.45); }
     [data-theme="dark"] thead th.selected { background: #3730a3 !important; }
     body.dragging { user-select: none; cursor: crosshair; }
@@ -3525,6 +3526,18 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       border-radius: 8px;
       line-height: 1.4;
     }
+    .view-toggle {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 6px 10px;
+      cursor: pointer;
+      color: var(--text);
+      font-size: 14px;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }
+    .view-toggle:hover { background: rgba(96,165,250,0.2); }
+    .view-toggle.active { background: var(--accent); color: #fff; }
     @media (max-width: 1200px) {
       .media-sidebar-viewer.open {
         width: 40vw;
@@ -4431,10 +4444,13 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     }
     @media (max-width: 960px) {
       .md-layout { flex-direction: column; }
-      .md-left { max-width: 100%; flex: 0 0 auto; }
+      .md-left { max-width: 100%; flex: 1 1 0; min-height: 0; }
+      .md-right { display: none; }
       .media-sidebar { display: none; }
       .media-sidebar-toggle { display: none !important; }
     }
+    .md-layout.preview-only .md-right { display: none; }
+    .md-layout.preview-only .md-left { flex: 1 1 0; min-height: 0; max-width: 100%; }
     .filter-menu {
       position: absolute;
       background: var(--panel-solid);
@@ -4867,6 +4883,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     </div>
     <div class="actions">
       <button class="media-sidebar-toggle" id="media-sidebar-toggle" title="Media Gallery" aria-label="Toggle media gallery">🖼<span class="toggle-count" id="media-toggle-count"></span></button>
+      <button class="view-toggle" id="view-toggle" title="Hide source panel" aria-label="Toggle source panel">📝</button>
       <button class="history-toggle" id="history-toggle" title="Review History">☰</button>
       <button class="theme-toggle" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
         <span id="theme-icon">🌙</span>
@@ -4967,7 +4984,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
   <aside class="comment-list collapsed">
     <h3>Comments</h3>
     <ol id="comment-list"></ol>
-    <p class="hint">Close the tab or click "Submit & Exit" to send comments and stop the server.</p>
+    <p class="hint">Click "Submit & Exit" to send comments and stop the server.</p>
   </aside>
   <div class="filter-menu" id="filter-menu">
     <label class="menu-check"><input type="checkbox" id="freeze-col-check" /> Freeze up to this column</label>
@@ -6133,10 +6150,17 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       commentInput.value = existingComment?.text || '';
 
       card.style.display = 'block';
-      // 常にソーステーブルの選択セル位置を基準にカードを配置
-      // これにより、プレビューからクリックしてもソースからクリックしても
-      // 同じ行に対しては同じ位置にダイアログが表示される
-      positionCardForSelection(startRow, endRow, startCol, endCol);
+      // Check if source panel is hidden (preview-only mode or narrow viewport)
+      const mdRight = document.querySelector('.md-right');
+      const isSourceHidden = mdRight && (mdRight.offsetParent === null || getComputedStyle(mdRight).display === 'none');
+
+      if (isSourceHidden && previewElement) {
+        // In preview-only mode, position card below the clicked preview element
+        positionCardBelowElement(previewElement);
+      } else {
+        // 常にソーステーブルの選択セル位置を基準にカードを配置
+        positionCardForSelection(startRow, endRow, startCol, endCol);
+      }
       commentInput.focus();
     }
 
@@ -6177,6 +6201,61 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       card.style.top = top + 'px';
     }
 
+    // Position card below a clicked element (used in preview-only / narrow mode)
+    // Falls back to above the element if below doesn't fit
+    function positionCardBelowElement(element) {
+      const cardWidth = card.offsetWidth || 380;
+      const cardHeight = card.offsetHeight || 220;
+      const margin = 12;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      const mdLeft = document.querySelector('.md-left');
+      let rect = element.getBoundingClientRect();
+
+      // Try below first: scroll to make room if needed
+      const spaceBelow = vh - rect.bottom - margin;
+      if (spaceBelow < cardHeight && mdLeft) {
+        const scrollNeeded = cardHeight - spaceBelow + margin;
+        const scrollBefore = mdLeft.scrollTop;
+        mdLeft.scrollBy({ top: scrollNeeded, behavior: 'instant' });
+        // Recalculate after scroll
+        rect = element.getBoundingClientRect();
+      }
+
+      // Horizontal: ensure card fits
+      let left = rect.left;
+      if (left + cardWidth > vw - margin) {
+        left = vw - cardWidth - margin;
+      }
+      left = Math.max(margin, left);
+
+      // Vertical: prefer below, fallback to above
+      const spaceBelowAfterScroll = vh - rect.bottom - margin;
+      const spaceAbove = rect.top - margin;
+      let top;
+
+      if (spaceBelowAfterScroll >= cardHeight) {
+        // Fits below
+        top = rect.bottom + margin;
+      } else if (spaceAbove >= cardHeight) {
+        // Doesn't fit below, but fits above
+        top = rect.top - cardHeight - margin;
+      } else {
+        // Doesn't fit either way: choose the side with more space
+        if (spaceAbove > spaceBelowAfterScroll) {
+          top = Math.max(margin, rect.top - cardHeight - margin);
+        } else {
+          top = rect.bottom + margin;
+          top = Math.min(top, vh - cardHeight - margin);
+        }
+      }
+
+      top = Math.max(margin, top);
+      card.style.left = left + 'px';
+      card.style.top = top + 'px';
+    }
+
     function positionCardForSelection(startRow, endRow, startCol, endCol) {
       const cardWidth = card.offsetWidth || 380;
       const cardHeight = card.offsetHeight || 220;
@@ -6255,6 +6334,8 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       card.style.display = 'none';
       currentKey = null;
       clearSelection();
+      // Clear preview highlight
+      document.querySelectorAll('.preview-highlight').forEach(el => el.classList.remove('preview-highlight'));
       // Re-enable scroll sync when card is closed
       window._disableScrollSync = false;
     }
@@ -7145,6 +7226,52 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
     }
 
+    // --- Panel State (Preview-Only Toggle) ---
+    const PANEL_STATE_KEY = 'reviw-panel-state';
+    (function initPanelState() {
+      const viewToggle = document.getElementById('view-toggle');
+      const mdLayout = document.querySelector('.md-layout');
+      if (!viewToggle || !mdLayout) return;
+
+      function applyPanelState(isPreviewOnly) {
+        if (isPreviewOnly) {
+          mdLayout.classList.add('preview-only');
+          viewToggle.textContent = '\u{1F441}';
+          viewToggle.title = 'Show source panel';
+          viewToggle.classList.add('active');
+        } else {
+          mdLayout.classList.remove('preview-only');
+          viewToggle.textContent = '\u{1F4DD}';
+          viewToggle.title = 'Hide source panel';
+          viewToggle.classList.remove('active');
+        }
+      }
+
+      // Load saved state
+      const saved = localStorage.getItem(PANEL_STATE_KEY);
+      if (saved === 'preview-only') {
+        applyPanelState(true);
+      }
+
+      // Also apply preview-only for narrow viewports (auto-detect)
+      function checkNarrowMode() {
+        if (window.innerWidth <= 960) {
+          // In narrow mode, always act as preview-only (source is hidden by CSS)
+          viewToggle.style.display = 'none';
+        } else {
+          viewToggle.style.display = '';
+        }
+      }
+      checkNarrowMode();
+      window.addEventListener('resize', checkNarrowMode);
+
+      viewToggle.addEventListener('click', () => {
+        const isNowPreviewOnly = !mdLayout.classList.contains('preview-only');
+        applyPanelState(isNowPreviewOnly);
+        localStorage.setItem(PANEL_STATE_KEY, isNowPreviewOnly ? 'preview-only' : 'both');
+      });
+    })();
+
     // --- Mermaid Initialization ---
     (function initMermaid() {
       if (typeof mermaid === 'undefined') return;
@@ -8867,13 +8994,43 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
 
       // Helper: find matching source line for table cell (prioritizes table rows)
-      function findTableSourceLine(text, startFromLine) {
+      function findTableSourceLine(text, startFromLine, element = null) {
         if (!text) return -1;
         startFromLine = startFromLine || 0;
         // Remove toggle icon characters (▼, ▶) that may be included from heading toggles
         const cleanText = text.replace(/[▼▶]/g, '').trim();
         const normalized = cleanText.replace(/\\s+/g, ' ').slice(0, 100);
         if (!normalized) return -1;
+        const normalizedLower = normalized.toLowerCase();
+
+        function escapeRegExp(s) {
+          return s.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
+        }
+
+        function normalizeCellText(cellText) {
+          return stripMarkdown(cellText)
+            .replace(/\\s+/g, ' ')
+            .trim()
+            .slice(0, 100);
+        }
+
+        // If this click comes from a linked table cell, prefer matching by href for stable mapping.
+        if (element) {
+          const linkEl = element.querySelector('a[href]') || (element.matches?.('a[href]') ? element : null);
+          const href = linkEl ? linkEl.getAttribute('href') : '';
+          if (href) {
+            var hrefSearchPasses = startFromLine > 0 ? [startFromLine, 0] : [0];
+            for (var hrefPass = 0; hrefPass < hrefSearchPasses.length; hrefPass++) {
+              var hrefSearchStart = hrefSearchPasses[hrefPass];
+              var hrefSearchEnd = hrefPass === 0 && startFromLine > 0 ? DATA.length : (startFromLine > 0 ? startFromLine : DATA.length);
+              for (let i = hrefSearchStart; i < hrefSearchEnd; i++) {
+                const lineText = (DATA[i][0] || '').trim();
+                if (!lineText || !lineText.startsWith('|')) continue;
+                if (lineText.includes(href)) return i + 1;
+              }
+            }
+          }
+        }
 
         // Two-pass strategy: search from startFromLine first, then fallback to 0
         var searchPasses = startFromLine > 0 ? [startFromLine, 0] : [0];
@@ -8886,27 +9043,37 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
             const lineText = (DATA[i][0] || '').trim();
             if (!lineText || !lineText.startsWith('|')) continue;
 
-            // Split into cells and check for exact match (excluding markdown syntax)
+            // Split into cells and check for exact match, including markdown link display text.
             const cells = lineText.split('|').map(c => c.trim());
             for (const cell of cells) {
-              // Skip cells that are markdown images/links (start with ![, contain []())
-              if (cell.match(/^!?\\[.*\\]\\(.*\\)$/)) continue;
+              if (!cell) continue;
+              const plainCell = normalizeCellText(cell);
 
-              // Check for exact cell text match
+              // Exact raw-cell or rendered-cell text match.
               if (cell === normalized) return i + 1;
+              if (plainCell === normalized) return i + 1;
+              if (plainCell.toLowerCase() === normalizedLower) return i + 1;
 
-              // For short text (like header cells), require exact word match
-              if (normalized.length <= 5 && cell === normalized) return i + 1;
+              // For short labels (e.g. Go/OK), allow whole-word match in rendered cell.
+              if (normalized.length <= 5 && plainCell) {
+                const wordPattern = new RegExp('(^|\\s)' + escapeRegExp(normalizedLower) + '(\\s|$)', 'i');
+                if (wordPattern.test(plainCell.toLowerCase())) return i + 1;
+              }
             }
           }
 
-          // Second pass: look for partial matches (including inside markdown syntax)
+          // Second pass: partial rendered-cell matching.
           for (let i = searchStart; i < searchEnd; i++) {
             const lineText = (DATA[i][0] || '').trim();
             if (!lineText || !lineText.startsWith('|')) continue;
 
-            const lineNorm = lineText.replace(/\\s+/g, ' ').slice(0, 100);
-            if (lineNorm.includes(normalized.slice(0, 30)) && normalized.length > 5) return i + 1;
+            const cells = lineText.split('|').map(c => normalizeCellText(c));
+            for (const plainCell of cells) {
+              if (!plainCell) continue;
+              const plainLower = plainCell.toLowerCase();
+              if (normalized.length > 5 && plainLower.includes(normalizedLower.slice(0, 30))) return i + 1;
+              if (normalized.length > 5 && normalizedLower.includes(plainLower.slice(0, 30)) && plainLower.length > 5) return i + 1;
+            }
           }
         }
 
@@ -9077,6 +9244,12 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         selection = { startRow, endRow: endRow || startRow, startCol: 1, endCol: 1 };
         updateSelectionVisual();
 
+        // Highlight the clicked preview element
+        document.querySelectorAll('.preview-highlight').forEach(el => el.classList.remove('preview-highlight'));
+        if (clickedPreviewElement) {
+          clickedPreviewElement.classList.add('preview-highlight');
+        }
+
         // Clear header selection
         document.querySelectorAll('thead th.selected').forEach(el => el.classList.remove('selected'));
 
@@ -9097,7 +9270,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         }
 
         // Open the card (synchronously) - now target cell should be visible for positioning
-        openCardForSelection();
+        openCardForSelection(clickedPreviewElement);
 
         // Re-add scroll handlers after a delay to allow scroll to settle
         setTimeout(() => {
@@ -9172,7 +9345,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
             const isTableCell = parentBlock.tagName === 'TD' || parentBlock.tagName === 'TH';
             const closestH = findClosestHeadingAbove(parentBlock);
             const hLine = getHeadingSourceLine(closestH);
-            const line = isTableCell ? findTableSourceLine(parentBlock.textContent, hLine) : findSourceLine(parentBlock.textContent, null, hLine);
+            const line = isTableCell ? findTableSourceLine(parentBlock.textContent, hLine, parentBlock) : findSourceLine(parentBlock.textContent, null, hLine);
             if (line > 0) {
               selectSourceRange(line, null, parentBlock);
             }
@@ -9233,7 +9406,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
 
         // Use table-specific search for table cells, otherwise use element-aware search
         const isTableCell = target.tagName === 'TD' || target.tagName === 'TH';
-        const line = isTableCell ? findTableSourceLine(searchText, headingLine) : findSourceLine(searchText, target, headingLine);
+        const line = isTableCell ? findTableSourceLine(searchText, headingLine, target) : findSourceLine(searchText, target, headingLine);
         if (line <= 0) return;
 
         // Don't prevent default for summary elements - let native <details> toggle work
@@ -9702,6 +9875,7 @@ function checkExistingServer(filePath) {
 
 // --- History File Management ---
 const HISTORY_DIR = path.join(os.homedir(), '.reviw', 'history');
+const OUTPUT_DIR = path.join(os.homedir(), '.reviw', 'outputs');
 const HISTORY_MAX = 50;
 
 function getHistoryFilePath(filePath) {
@@ -9720,6 +9894,16 @@ function ensureHistoryDir() {
   }
 }
 
+function ensureOutputDir() {
+  try {
+    if (!fs.existsSync(OUTPUT_DIR)) {
+      fs.mkdirSync(OUTPUT_DIR, { recursive: true, mode: 0o700 });
+    }
+  } catch (err) {
+    // Ignore errors
+  }
+}
+
 function loadHistoryFromFile(filePath) {
   try {
     const historyPath = getHistoryFilePath(filePath);
@@ -9748,6 +9932,16 @@ function saveHistoryToFile(filePath, historyEntry) {
   }
 }
 
+function shouldSaveHistory(payload) {
+  if (!payload || typeof payload !== "object") return false;
+  if (Array.isArray(payload.comments) && payload.comments.length > 0) return true;
+  if (typeof payload.summary === "string" && payload.summary.trim().length > 0) return true;
+  if (Array.isArray(payload.reviwAnswers) && payload.reviwAnswers.length > 0) return true;
+  if (Array.isArray(payload.summaryImages) && payload.summaryImages.length > 0) return true;
+  if (Array.isArray(payload.prompts) && payload.prompts.length > 0) return true;
+  return false;
+}
+
 // Try to activate an existing browser tab with the given URL (macOS only)
 // Returns true if a tab was activated, false otherwise
 function tryActivateExistingTab(url) {
@@ -9874,14 +10068,14 @@ function openBrowser(url, delay = 0) {
 }
 
 function outputAllResults() {
-  console.log("/do");
+  const outLines = ["/do"];
   if (allResults.length === 1) {
     const yamlOut = yaml.dump(allResults[0], { noRefs: true, lineWidth: 120 });
-    console.log(yamlOut.trim());
+    outLines.push(yamlOut.trim());
   } else {
     const combined = { files: allResults };
     const yamlOut = yaml.dump(combined, { noRefs: true, lineWidth: 120 });
-    console.log(yamlOut.trim());
+    outLines.push(yamlOut.trim());
   }
 
   // Output answered questions if any
@@ -9892,10 +10086,27 @@ function outputAllResults() {
     }
   }
   if (allAnswers.length > 0) {
-    console.log("\n[REVIW_ANSWERS]");
+    outLines.push("");
+    outLines.push("[REVIW_ANSWERS]");
     const answersYaml = yaml.dump(allAnswers, { noRefs: true, lineWidth: 120 });
-    console.log(answersYaml.trim());
-    console.log("[/REVIW_ANSWERS]");
+    outLines.push(answersYaml.trim());
+    outLines.push("[/REVIW_ANSWERS]");
+  }
+
+  const outputText = outLines.join("\n");
+  console.log(outputText);
+
+  // Durable fallback: persist final output to file for recovery.
+  try {
+    ensureOutputDir();
+    const latestPath = path.join(OUTPUT_DIR, "latest.yaml");
+    fs.writeFileSync(latestPath, outputText + "\n", { mode: 0o600 });
+
+    const ts = new Date().toISOString().replace(/[:.]/g, "-");
+    const archivePath = path.join(OUTPUT_DIR, `output-${ts}.yaml`);
+    fs.writeFileSync(archivePath, outputText + "\n", { mode: 0o600 });
+  } catch (err) {
+    // Keep stdout behavior even if file backup fails.
   }
 }
 
@@ -10041,8 +10252,8 @@ function createFileServer(filePath, fileIndex = 0) {
           if (payload) {
             payload = processPayloadImages(payload, ctx.baseDir);
           }
-          // Save to file-based history (only if there are comments)
-          if (payload && (payload.comments?.length > 0 || payload.submitComment)) {
+          // Save to file-based history when review includes any meaningful submission.
+          if (shouldSaveHistory(payload)) {
             saveHistoryToFile(ctx.filePath, payload);
           }
           res.writeHead(200, { "Content-Type": "text/plain" });
@@ -10397,9 +10608,9 @@ function createDiffServer(diffContent) {
           if (payload) {
             payload = processPayloadImages(payload, process.cwd());
           }
-          // Save to file-based history (only if there are comments)
-          // For diff mode, use relativePath as identifier
-          if (payload && (payload.comments?.length > 0 || payload.submitComment)) {
+          // Save to file-based history when review includes any meaningful submission.
+          // For diff mode, use relativePath as identifier.
+          if (shouldSaveHistory(payload)) {
             const filePath = ctx.diffData?.relativePath || 'stdin-diff';
             saveHistoryToFile(filePath, payload);
           }
@@ -10516,7 +10727,7 @@ if (require.main === module) {
       console.log("Starting diff viewer from stdin...");
       serversRunning = 1;
       await createDiffServer(stdinContent);
-      console.log("Close the browser tab or Submit & Exit to finish.");
+      console.log('Click "Submit & Exit" to finish.');
     } else {
       // Treat as plain text
       console.log("Starting text viewer from stdin...");
@@ -10553,7 +10764,7 @@ if (require.main === module) {
     for (let i = 0; i < filesToStart.length; i++) {
       await createFileServer(filesToStart[i], i);
     }
-    console.log("Close all browser tabs or Submit & Exit to finish.");
+    console.log('Click "Submit & Exit" in each opened viewer to finish.');
   } else {
     // No files and no stdin: try auto git diff
     console.log(`reviw v${VERSION}`);
@@ -10575,7 +10786,7 @@ if (require.main === module) {
       console.log("Starting diff viewer...");
       serversRunning = 1;
       await createDiffServer(gitDiff);
-      console.log("Close the browser tab or Submit & Exit to finish.");
+      console.log('Click "Submit & Exit" to finish.');
     } catch (err) {
       console.error(err.message);
       console.log("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {