reviw 0.10.6 → 0.11.0

package/cli.cjs

@@ -13,6 +13,7 @@
 
 const fs = require("fs");
 const http = require("http");
+const os = require("os");
 const path = require("path");
 const { spawn } = require("child_process");
 const chardet = require("chardet");
@@ -20,17 +21,157 @@ const iconv = require("iconv-lite");
 const marked = require("marked");
 const yaml = require("js-yaml");
 
+// --- XSS Protection for marked (Whitelist approach) ---
+// 許可タグリスト（Markdown由来の安全なタグのみ）
+const allowedTags = new Set([
+  'p', 'br', 'hr',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'ul', 'ol', 'li',
+  'blockquote', 'pre', 'code',
+  'em', 'strong', 'del', 's',
+  'a', 'img',
+  'table', 'thead', 'tbody', 'tr', 'th', 'td',
+  'div', 'span', // Markdown拡張用
+]);
+
+// 許可属性リスト（タグごとに定義）
+const allowedAttributes = {
+  'a': ['href', 'title', 'target', 'rel'],
+  'img': ['src', 'alt', 'title', 'width', 'height'],
+  'code': ['class'], // 言語ハイライト用
+  'pre': ['class'],
+  'div': ['class'],
+  'span': ['class'],
+  'th': ['align'],
+  'td': ['align'],
+};
+
+// HTMLエスケープ関数（XSS対策用）
+function escapeHtmlForXss(html) {
+  return html
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+// href/src属性のURLバリデーション
+function isSafeUrl(url) {
+  if (!url) return true;
+  // 空白・制御文字を除去して正規化
+  var normalized = url.toLowerCase().replace(/[\s\x00-\x1f]/g, '');
+  // HTMLエンティティのデコード（&#x0a; &#10; など）
+  var decoded = normalized.replace(/&#x?[0-9a-f]+;?/gi, '');
+  if (decoded.startsWith('javascript:')) return false;
+  if (decoded.startsWith('vbscript:')) return false;
+  if (decoded.startsWith('data:') && !decoded.startsWith('data:image/')) return false;
+  return true;
+}
+
+// HTML文字列をサニタイズ（ホワイトリストに含まれないタグ/属性を除去）
+function sanitizeHtml(html) {
+  // より堅牢なタグマッチング：属性値内の < > を考慮
+  // 引用符で囲まれた属性値を正しく処理するパターン
+  var tagPattern = /<\/?([a-z][a-z0-9]*)((?:\s+[a-z][a-z0-9-]*(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>"']*))?)*)\s*\/?>/gi;
+
+  return html.replace(tagPattern, function(match, tag, attrsStr) {
+    var tagLower = tag.toLowerCase();
+
+    // 許可されていないタグはエスケープ
+    if (!allowedTags.has(tagLower)) {
+      return escapeHtmlForXss(match);
+    }
+
+    // 終了タグはそのまま
+    if (match.startsWith('</')) {
+      return '</' + tagLower + '>';
+    }
+
+    // 属性をフィルタリング
+    var allowed = allowedAttributes[tagLower] || [];
+    var safeAttrs = [];
+
+    // 属性を解析（引用符で囲まれた値を正しく処理）
+    var attrRegex = /([a-z][a-z0-9-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>"']*))/gi;
+    var attrMatch;
+    while ((attrMatch = attrRegex.exec(attrsStr)) !== null) {
+      var attrName = attrMatch[1].toLowerCase();
+      var attrValue = attrMatch[2] !== undefined ? attrMatch[2] :
+                      attrMatch[3] !== undefined ? attrMatch[3] :
+                      attrMatch[4] || '';
+
+      // on*イベントハンドラは常に拒否
+      if (attrName.startsWith('on')) continue;
+
+      // 許可属性のみ
+      if (!allowed.includes(attrName)) continue;
+
+      // href/srcのURL検証
+      if ((attrName === 'href' || attrName === 'src') && !isSafeUrl(attrValue)) {
+        continue;
+      }
+
+      safeAttrs.push(attrName + '="' + attrValue.replace(/"/g, '&quot;') + '"');
+    }
+
+    var finalAttrs = safeAttrs.length > 0 ? ' ' + safeAttrs.join(' ') : '';
+    return '<' + tagLower + finalAttrs + '>';
+  });
+}
+
+marked.use({
+  renderer: {
+    // 生HTMLブロックをサニタイズ
+    html: function(token) {
+      var text = token.raw || token.text || token;
+      return sanitizeHtml(text);
+    },
+    // リンクに安全なURL検証を追加（別タブで開く）
+    link: function(href, title, text) {
+      href = href || "";
+      title = title || "";
+      text = text || "";
+      if (!isSafeUrl(href)) {
+        // 危険なURLはプレーンテキストとして表示
+        return escapeHtmlForXss(text);
+      }
+      var titleAttr = title ? ' title="' + escapeHtmlForXss(title) + '"' : "";
+      return '<a href="' + escapeHtmlForXss(href) + '"' + titleAttr + ' target="_blank" rel="noopener noreferrer">' + text + '</a>';
+    },
+    // 画像にも安全なURL検証を追加
+    image: function(href, title, text) {
+      href = href || "";
+      title = title || "";
+      text = text || "";
+      if (!isSafeUrl(href)) {
+        return escapeHtmlForXss(text || "image");
+      }
+      var titleAttr = title ? ' title="' + escapeHtmlForXss(title) + '"' : "";
+      var altAttr = text ? ' alt="' + escapeHtmlForXss(text) + '"' : "";
+      return '<img src="' + escapeHtmlForXss(href) + '"' + altAttr + titleAttr + '>';
+    }
+  }
+});
+
 // --- CLI arguments ---------------------------------------------------------
 const VERSION = require("./package.json").version;
-const args = process.argv.slice(2);
 
-const filePaths = [];
-let basePort = 4989;
-let encodingOpt = null;
-let noOpen = false;
+// ===== CLI設定のデフォルト値（import時に使用） =====
+const DEFAULT_CONFIG = {
+  basePort: 4989,
+  encodingOpt: null,
+  noOpen: false,
+};
+
+// ===== グローバル設定変数（デフォルト値で初期化、require.main時に更新） =====
+let basePort = DEFAULT_CONFIG.basePort;
+let encodingOpt = DEFAULT_CONFIG.encodingOpt;
+let noOpen = DEFAULT_CONFIG.noOpen;
 let stdinMode = false;
 let diffMode = false;
 let stdinContent = null;
+let resolvedPaths = [];  // ファイルパス（require.main時に設定）
 
 function showHelp() {
   console.log(`reviw v${VERSION} - Lightweight file reviewer with in-browser comments
@@ -75,25 +216,55 @@ function showVersion() {
   console.log(VERSION);
 }
 
-for (let i = 0; i < args.length; i += 1) {
-  const arg = args[i];
-  if (arg === "--port" && args[i + 1]) {
-    basePort = Number(args[i + 1]);
-    i += 1;
-  } else if ((arg === "--encoding" || arg === "-e") && args[i + 1]) {
-    encodingOpt = args[i + 1];
-    i += 1;
-  } else if (arg === "--no-open") {
-    noOpen = true;
-  } else if (arg === "--help" || arg === "-h") {
-    showHelp();
-    process.exit(0);
-  } else if (arg === "--version" || arg === "-v") {
-    showVersion();
-    process.exit(0);
-  } else if (!arg.startsWith("-")) {
-    filePaths.push(arg);
+// ===== CLI引数パース関数（require.main時のみ呼ばれる） =====
+function parseCliArgs(argv) {
+  const args = argv.slice(2);
+  const config = { ...DEFAULT_CONFIG };
+  const filePaths = [];
+
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+    if (arg === "--port" && args[i + 1]) {
+      config.basePort = Number(args[i + 1]);
+      i += 1;
+    } else if ((arg === "--encoding" || arg === "-e") && args[i + 1]) {
+      config.encodingOpt = args[i + 1];
+      i += 1;
+    } else if (arg === "--no-open") {
+      config.noOpen = true;
+    } else if (arg === "--help" || arg === "-h") {
+      showHelp();
+      process.exit(0);
+    } else if (arg === "--version" || arg === "-v") {
+      showVersion();
+      process.exit(0);
+    } else if (!arg.startsWith("-")) {
+      filePaths.push(arg);
+    }
   }
+
+  return { config, filePaths };
+}
+
+// ===== ファイルパス検証・解決関数（require.main時のみ呼ばれる） =====
+function validateAndResolvePaths(filePaths) {
+  const resolved = [];
+  for (const fp of filePaths) {
+    const resolvedPath = path.resolve(fp);
+    if (!fs.existsSync(resolvedPath)) {
+      console.error(`File not found: ${resolvedPath}`);
+      process.exit(1);
+    }
+    const stat = fs.statSync(resolvedPath);
+    if (stat.isDirectory()) {
+      console.error(`Cannot open directory: ${resolvedPath}`);
+      console.error(`Usage: reviw <file> [file2...]`);
+      console.error(`Please specify a file, not a directory.`);
+      process.exit(1);
+    }
+    resolved.push(resolvedPath);
+  }
+  return resolved;
 }
 
 // Check if stdin has data (pipe mode)
@@ -148,24 +319,6 @@ function runGitDiff() {
   });
 }
 
-// Validate all files exist and are not directories (if files specified)
-const resolvedPaths = [];
-for (const fp of filePaths) {
-  const resolved = path.resolve(fp);
-  if (!fs.existsSync(resolved)) {
-    console.error(`File not found: ${resolved}`);
-    process.exit(1);
-  }
-  const stat = fs.statSync(resolved);
-  if (stat.isDirectory()) {
-    console.error(`Cannot open directory: ${resolved}`);
-    console.error(`Usage: reviw <file> [file2...]`);
-    console.error(`Please specify a file, not a directory.`);
-    process.exit(1);
-  }
-  resolvedPaths.push(resolved);
-}
-
 // --- Diff parsing -----------------------------------------------------------
 function parseDiff(diffText) {
   const files = [];
@@ -313,7 +466,8 @@ function loadDiff(diffText) {
   return {
     rows,
     files: sortedFiles,
-    title: "Git Diff",
+    projectRoot: "",
+    relativePath: "Git Diff",
     mode: "diff",
   };
 }
@@ -422,7 +576,7 @@ function loadCsv(filePath) {
   return {
     rows,
     cols: Math.max(1, maxCols),
-    title: path.basename(filePath),
+    ...formatTitlePaths(filePath),
   };
 }
 
@@ -433,7 +587,7 @@ function loadText(filePath) {
   return {
     rows: lines.map((line) => [line]),
     cols: 1,
-    title: path.basename(filePath),
+    ...formatTitlePaths(filePath),
     preview: null,
   };
 }
@@ -446,6 +600,7 @@ function loadMarkdown(filePath) {
   // Parse YAML frontmatter
   let frontmatterHtml = "";
   let contentStart = 0;
+  let reviwQuestions = []; // Extract reviw questions for modal
 
   if (lines[0] && lines[0].trim() === "---") {
     let frontmatterEnd = -1;
@@ -463,30 +618,91 @@ function loadMarkdown(filePath) {
       try {
         const frontmatter = yaml.load(frontmatterText);
         if (frontmatter && typeof frontmatter === "object") {
-          // Create HTML table for frontmatter
-          frontmatterHtml = '<div class="frontmatter-table"><table>';
-          frontmatterHtml += '<colgroup><col style="width:12%"><col style="width:88%"></colgroup>';
-          frontmatterHtml += '<thead><tr><th colspan="2">Document Metadata</th></tr></thead>';
-          frontmatterHtml += "<tbody>";
-
-          function renderValue(val) {
-            if (Array.isArray(val)) {
-              return val
-                .map((v) => '<span class="fm-tag">' + escapeHtmlChars(String(v)) + "</span>")
-                .join(" ");
+          // Extract reviw questions if present
+          if (frontmatter.reviw && Array.isArray(frontmatter.reviw.questions)) {
+            reviwQuestions = frontmatter.reviw.questions.map((q, idx) => ({
+              id: q.id || "q" + (idx + 1),
+              question: q.question || "",
+              resolved: q.resolved === true,
+              answer: q.answer || "",
+              options: Array.isArray(q.options) ? q.options : [],
+            }));
+          }
+
+          // Create HTML table for frontmatter (show reviw questions in detail for 1:1 correspondence with YAML source)
+          const displayFrontmatter = { ...frontmatter };
+          // Keep reviw as-is for detailed rendering
+
+          if (Object.keys(displayFrontmatter).length > 0) {
+            frontmatterHtml = '<div class="frontmatter-table"><table>';
+            frontmatterHtml += '<colgroup><col style="width:12%"><col style="width:88%"></colgroup>';
+            frontmatterHtml += '<thead><tr><th colspan="2">Document Metadata</th></tr></thead>';
+            frontmatterHtml += "<tbody>";
+
+            // Render reviw.questions as detailed cards
+            function renderReviwQuestions(questions) {
+              if (!Array.isArray(questions) || questions.length === 0) {
+                return '<span class="fm-tag">質問なし</span>';
+              }
+              let html = '<div class="reviw-questions-preview">';
+              questions.forEach((q, idx) => {
+                const statusIcon = q.resolved ? '✅' : '⏳';
+                const statusClass = q.resolved ? 'resolved' : 'pending';
+                html += '<div class="reviw-q-card ' + statusClass + '">';
+                html += '<div class="reviw-q-header">' + statusIcon + ' <strong>' + escapeHtmlChars(q.id || 'Q' + (idx + 1)) + '</strong></div>';
+                html += '<div class="reviw-q-question">' + escapeHtmlChars(q.question || '') + '</div>';
+                if (q.options && Array.isArray(q.options) && q.options.length > 0) {
+                  html += '<div class="reviw-q-options">';
+                  q.options.forEach(opt => {
+                    html += '<span class="fm-tag">' + escapeHtmlChars(opt) + '</span>';
+                  });
+                  html += '</div>';
+                }
+                if (q.answer) {
+                  html += '<div class="reviw-q-answer">💬 ' + escapeHtmlChars(q.answer) + '</div>';
+                }
+                html += '</div>';
+              });
+              html += '</div>';
+              return html;
             }
-            if (typeof val === "object" && val !== null) {
-              return "<pre>" + escapeHtmlChars(JSON.stringify(val, null, 2)) + "</pre>";
+
+            function renderValue(val, key) {
+              // Special handling for reviw object
+              if (key === 'reviw' && typeof val === 'object' && val !== null) {
+                let html = '';
+                if (val.questions && Array.isArray(val.questions)) {
+                  html += renderReviwQuestions(val.questions);
+                }
+                // Render other reviw properties
+                const { questions, ...rest } = val;
+                if (Object.keys(rest).length > 0) {
+                  html += '<div style="margin-top: 8px;">';
+                  for (const [k, v] of Object.entries(rest)) {
+                    html += '<div><strong>' + escapeHtmlChars(k) + ':</strong> ' + escapeHtmlChars(String(v)) + '</div>';
+                  }
+                  html += '</div>';
+                }
+                return html || '<span class="fm-tag">-</span>';
+              }
+              if (Array.isArray(val)) {
+                return val
+                  .map((v) => '<span class="fm-tag">' + escapeHtmlChars(String(v)) + "</span>")
+                  .join(" ");
+              }
+              if (typeof val === "object" && val !== null) {
+                return "<pre>" + escapeHtmlChars(JSON.stringify(val, null, 2)) + "</pre>";
+              }
+              return escapeHtmlChars(String(val));
             }
-            return escapeHtmlChars(String(val));
-          }
 
-          for (const [key, val] of Object.entries(frontmatter)) {
-            frontmatterHtml +=
-              "<tr><th>" + escapeHtmlChars(key) + "</th><td>" + renderValue(val) + "</td></tr>";
-          }
+            for (const [key, val] of Object.entries(displayFrontmatter)) {
+              frontmatterHtml +=
+                "<tr><th>" + escapeHtmlChars(key) + "</th><td>" + renderValue(val, key) + "</td></tr>";
+            }
 
-          frontmatterHtml += "</tbody></table></div>";
+            frontmatterHtml += "</tbody></table></div>";
+          }
           contentStart = frontmatterEnd + 1;
         }
       } catch (e) {
@@ -502,8 +718,9 @@ function loadMarkdown(filePath) {
   return {
     rows: lines.map((line) => [line]),
     cols: 1,
-    title: path.basename(filePath),
+    ...formatTitlePaths(filePath),
     preview,
+    reviwQuestions, // Pass questions to UI
   };
 }
 
@@ -515,6 +732,20 @@ function escapeHtmlChars(str) {
     .replace(/"/g, "&quot;");
 }
 
+function formatTitlePaths(filePath) {
+  const cwd = process.cwd();
+  const home = os.homedir();
+  const relativePath = path.relative(cwd, filePath) || path.basename(filePath);
+  let projectRoot = cwd;
+  if (projectRoot.startsWith(home)) {
+    projectRoot = "~" + projectRoot.slice(home.length);
+  }
+  if (!projectRoot.endsWith("/")) {
+    projectRoot += "/";
+  }
+  return { projectRoot, relativePath };
+}
+
 function loadData(filePath) {
   // Check if path exists
   if (!fs.existsSync(filePath)) {
@@ -562,7 +793,7 @@ function serializeForScript(value) {
 }
 
 function diffHtmlTemplate(diffData) {
-  const { rows, title } = diffData;
+  const { rows, projectRoot, relativePath } = diffData;
   const serialized = serializeForScript(rows);
   const fileCount = rows.filter((r) => r.type === "file").length;
 
@@ -574,7 +805,7 @@ function diffHtmlTemplate(diffData) {
   <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
-  <title>${title} | reviw</title>
+  <title>${relativePath} | reviw</title>
   <style>
     :root {
       color-scheme: dark;
@@ -643,7 +874,9 @@ function diffHtmlTemplate(diffData) {
     }
     header .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
     header .actions { display: flex; gap: 8px; align-items: center; }
-    header h1 { font-size: 16px; margin: 0; font-weight: 600; }
+    header h1 { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
+    header h1 .title-path { font-size: 11px; font-weight: 400; color: var(--muted); }
+    header h1 .title-file { font-size: 16px; font-weight: 600; }
     header .badge {
       background: var(--selected-bg);
       color: var(--text);
@@ -806,11 +1039,14 @@ function diffHtmlTemplate(diffData) {
       display: none;
     }
     .floating header {
-      position: relative;
+      position: static;
       background: transparent;
+      backdrop-filter: none;
       border: none;
       padding: 0 0 10px 0;
+      display: flex;
       justify-content: space-between;
+      align-items: center;
     }
     .floating h2 { font-size: 14px; margin: 0; font-weight: 600; }
     .floating button {
@@ -835,6 +1071,10 @@ function diffHtmlTemplate(diffData) {
       font-size: 13px;
       font-family: inherit;
     }
+    .floating textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
     .floating .actions {
       display: flex;
       gap: 8px;
@@ -952,7 +1192,7 @@ function diffHtmlTemplate(diffData) {
 <body>
   <header>
     <div class="meta">
-      <h1>${title}</h1>
+      <h1>${projectRoot ? `<span class="title-path">${projectRoot}</span>` : ""}<span class="title-file">${relativePath}</span></h1>
       <span class="badge">${fileCount} file${fileCount !== 1 ? "s" : ""} changed</span>
       <span class="pill">Comments <strong id="comment-count">0</strong></span>
     </div>
@@ -1387,7 +1627,19 @@ function diffHtmlTemplate(diffData) {
       globalComment = globalCommentInput.value;
       hideSubmitModal();
       sendAndExit('button');
-      setTimeout(() => window.close(), 200);
+      // Try to close window; if it fails (browser security), show completion message
+      setTimeout(() => {
+        window.close();
+        // If window.close() didn't work, show a completion message
+        setTimeout(() => {
+          document.body.innerHTML = \`
+            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:var(--bg,#1a1a2e);color:var(--text,#e0e0e0);font-family:system-ui,sans-serif;">
+              <h1 style="font-size:2rem;margin-bottom:1rem;">✅ Review Submitted</h1>
+              <p style="color:var(--muted,#888);">You can close this tab now.</p>
+            </div>
+          \`;
+        }, 100);
+      }, 200);
     }
     document.getElementById('modal-submit').addEventListener('click', doSubmit);
     globalCommentInput.addEventListener('keydown', e => {
@@ -1430,10 +1682,11 @@ function diffHtmlTemplate(diffData) {
 }
 
 // --- HTML template ---------------------------------------------------------
-function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
+function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHtml, reviwQuestions = []) {
   const serialized = serializeForScript(dataRows);
   const modeJson = serializeForScript(mode);
-  const titleJson = serializeForScript(title);
+  const titleJson = serializeForScript(relativePath); // Use relativePath as file identifier
+  const questionsJson = serializeForScript(reviwQuestions || []);
   const hasPreview = !!previewHtml;
   return `<!doctype html>
 <html lang="ja">
@@ -1443,7 +1696,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
   <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
-  <title>${title} | reviw</title>
+  <title>${relativePath} | reviw</title>
   <style>
     /* Dark theme (default) */
     :root {
@@ -1470,6 +1723,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       --hover-bg: rgba(96,165,250,0.08);
       --shadow-color: rgba(0,0,0,0.35);
       --code-bg: #1e293b;
+      --error: #dc3545;
     }
     /* Light theme */
     [data-theme="light"] {
@@ -1496,6 +1750,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       --hover-bg: rgba(59,130,246,0.06);
       --shadow-color: rgba(0,0,0,0.1);
       --code-bg: #f1f5f9;
+      --error: #dc3545;
     }
     * { box-sizing: border-box; }
     body {
@@ -1522,7 +1777,9 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     }
     header .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
     header .actions { display: flex; gap: 8px; align-items: center; }
-    header h1 { font-size: 16px; margin: 0; font-weight: 700; }
+    header h1 { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
+    header h1 .title-path { font-size: 11px; font-weight: 400; color: var(--muted); }
+    header h1 .title-file { font-size: 16px; font-weight: 700; }
     header .badge {
       background: var(--selected-bg);
       color: var(--text);
@@ -1743,12 +2000,14 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       transition: background 200ms ease, border-color 200ms ease;
     }
     .floating header {
-      position: relative;
-      top: 0;
+      position: static;
       background: transparent;
+      backdrop-filter: none;
       border: none;
       padding: 0 0 8px 0;
+      display: flex;
       justify-content: space-between;
+      align-items: center;
     }
     .floating h2 { font-size: 14px; margin: 0; color: var(--text); }
     .floating button {
@@ -1777,6 +2036,10 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       line-height: 1.4;
       transition: background 200ms ease, border-color 200ms ease;
     }
+    .floating textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
     .floating .actions {
       display: flex;
       gap: 8px;
@@ -1954,6 +2217,50 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       border-radius: 4px;
       font-size: 11px;
     }
+    /* Reviw questions preview cards */
+    .reviw-questions-preview {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .reviw-q-card {
+      background: var(--code-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 10px 12px;
+    }
+    .reviw-q-card.resolved {
+      border-left: 3px solid #22c55e;
+    }
+    .reviw-q-card.pending {
+      border-left: 3px solid #f59e0b;
+    }
+    .reviw-q-header {
+      font-size: 12px;
+      color: var(--text-dim);
+      margin-bottom: 4px;
+    }
+    .reviw-q-header strong {
+      color: var(--accent);
+    }
+    .reviw-q-question {
+      font-size: 13px;
+      color: var(--text);
+      margin-bottom: 6px;
+    }
+    .reviw-q-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-bottom: 6px;
+    }
+    .reviw-q-answer {
+      font-size: 12px;
+      color: #22c55e;
+      background: rgba(34, 197, 94, 0.1);
+      padding: 4px 8px;
+      border-radius: 4px;
+    }
     [data-theme="light"] .frontmatter-table tbody th {
       color: #7c3aed;
     }
@@ -1973,9 +2280,6 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       text-align: left;
       border-bottom: 1px solid var(--border);
     }
-    .md-preview table:not(.frontmatter-table table) th {
-      background: rgba(255,255,255,0.05);
-    }
     .md-preview table:not(.frontmatter-table table) th {
       background: var(--panel);
       font-weight: 600;
@@ -2104,6 +2408,267 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       border-radius: 8px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     }
+    /* Reviw Questions Modal */
+    .reviw-questions-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.8);
+      z-index: 1100;
+      justify-content: center;
+      align-items: center;
+    }
+    .reviw-questions-overlay.visible {
+      display: flex;
+    }
+    .reviw-questions-modal {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      width: 90%;
+      max-width: 600px;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
+    }
+    .reviw-questions-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .reviw-questions-header h2 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text);
+    }
+    .reviw-questions-header h2 span {
+      font-size: 14px;
+      color: var(--text-dim);
+      font-weight: 400;
+    }
+    .reviw-questions-close {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: transparent;
+      color: var(--text-dim);
+      font-size: 18px;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: all 150ms ease;
+    }
+    .reviw-questions-close:hover {
+      background: var(--border);
+      color: var(--text);
+    }
+    .reviw-questions-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px;
+    }
+    .reviw-questions-footer {
+      padding: 12px 20px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+    }
+    .reviw-questions-later {
+      padding: 8px 16px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-dim);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 150ms ease;
+    }
+    .reviw-questions-later:hover {
+      background: var(--border);
+      color: var(--text);
+    }
+    /* Question Item */
+    .reviw-question-item {
+      margin-bottom: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .reviw-question-item:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+    .reviw-question-text {
+      font-size: 14px;
+      color: var(--text);
+      margin-bottom: 12px;
+      line-height: 1.5;
+    }
+    .reviw-question-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .reviw-question-option {
+      padding: 8px 14px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 150ms ease;
+    }
+    .reviw-question-option:hover {
+      border-color: var(--accent);
+      background: rgba(96, 165, 250, 0.1);
+    }
+    .reviw-question-option.selected {
+      border-color: var(--accent);
+      background: var(--accent);
+      color: var(--text-inverse);
+    }
+    .reviw-question-input {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid var(--border);
+      background: var(--input-bg);
+      color: var(--text);
+      border-radius: 8px;
+      font-size: 13px;
+      resize: vertical;
+      min-height: 60px;
+    }
+    .reviw-question-input:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    .reviw-question-input::placeholder {
+      color: var(--text-dim);
+    }
+    .reviw-check-mark {
+      color: #22c55e;
+      font-weight: bold;
+    }
+    .reviw-question-item.answered {
+      border-color: #22c55e;
+      background: rgba(34, 197, 94, 0.05);
+    }
+    .reviw-question-submit {
+      margin-top: 10px;
+      padding: 8px 16px;
+      border: none;
+      background: var(--accent);
+      color: var(--text-inverse);
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 150ms ease;
+    }
+    .reviw-question-submit:hover {
+      filter: brightness(1.1);
+    }
+    .reviw-question-submit:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    /* Resolved Section */
+    .reviw-resolved-section {
+      margin-top: 16px;
+      border-top: 1px solid var(--border);
+      padding-top: 12px;
+    }
+    .reviw-resolved-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: none;
+      border: none;
+      color: var(--text-dim);
+      font-size: 13px;
+      cursor: pointer;
+      padding: 4px 0;
+    }
+    .reviw-resolved-toggle:hover {
+      color: var(--text);
+    }
+    .reviw-resolved-toggle .arrow {
+      transition: transform 150ms ease;
+    }
+    .reviw-resolved-toggle.open .arrow {
+      transform: rotate(90deg);
+    }
+    .reviw-resolved-list {
+      display: none;
+      margin-top: 12px;
+    }
+    .reviw-resolved-list.visible {
+      display: block;
+    }
+    .reviw-resolved-item {
+      padding: 10px 12px;
+      background: var(--input-bg);
+      border-radius: 8px;
+      margin-bottom: 8px;
+      opacity: 0.7;
+    }
+    .reviw-resolved-item:last-child {
+      margin-bottom: 0;
+    }
+    .reviw-resolved-q {
+      font-size: 12px;
+      color: var(--text-dim);
+      margin-bottom: 4px;
+    }
+    .reviw-resolved-a {
+      font-size: 13px;
+      color: var(--text);
+    }
+    /* Notice Bar */
+    .reviw-questions-bar {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: var(--accent);
+      color: var(--text-inverse);
+      padding: 8px 16px;
+      font-size: 13px;
+      z-index: 1050;
+      justify-content: center;
+      align-items: center;
+      gap: 12px;
+    }
+    .reviw-questions-bar.visible {
+      display: flex;
+    }
+    .reviw-questions-bar button {
+      padding: 4px 12px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--text-inverse);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      transition: all 150ms ease;
+    }
+    .reviw-questions-bar button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    /* Adjust layout when bar is visible */
+    body.has-questions-bar header {
+      top: 36px;
+    }
+    body.has-questions-bar .toolbar,
+    body.has-questions-bar .table-wrap {
+      margin-top: 36px;
+    }
     /* Copy notification toast */
     .copy-toast {
       position: fixed;
@@ -2344,7 +2909,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
-      background: #dc3545;
+      background: var(--error);
       color: white;
       padding: 12px 24px;
       border-radius: 8px;
@@ -2366,7 +2931,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
 <body>
   <header>
     <div class="meta">
-      <h1>${title}</h1>
+      <h1><span class="title-path">${projectRoot}</span><span class="title-file">${relativePath}</span></h1>
       <span class="badge">Click to comment / ESC to cancel</span>
       <span class="pill">Comments <strong id="comment-count">0</strong></span>
     </div>
@@ -2519,11 +3084,32 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     <div class="video-container" id="video-container"></div>
   </div>
 
+  <!-- Reviw Questions Modal -->
+  <div class="reviw-questions-overlay" id="reviw-questions-overlay">
+    <div class="reviw-questions-modal" id="reviw-questions-modal">
+      <div class="reviw-questions-header">
+        <h2>📋 AIからの質問 <span id="reviw-questions-count"></span></h2>
+        <button class="reviw-questions-close" id="reviw-questions-close" aria-label="Close">✕</button>
+      </div>
+      <div class="reviw-questions-body" id="reviw-questions-body"></div>
+      <div class="reviw-questions-footer">
+        <button class="reviw-questions-later" id="reviw-questions-later">後で回答する</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Reviw Questions Notice Bar -->
+  <div class="reviw-questions-bar" id="reviw-questions-bar">
+    <span id="reviw-questions-bar-message">\ud83d\udccb \u672a\u56de\u7b54\u306e\u8cea\u554f\u304c<span id="reviw-questions-bar-count">0</span>\u4ef6\u3042\u308a\u307e\u3059</span>
+    <button id="reviw-questions-bar-open">\u8cea\u554f\u3092\u898b\u308b</button>
+  </div>
+
   <script>
     const DATA = ${serialized};
     const MAX_COLS = ${cols};
     const FILE_NAME = ${titleJson};
     const MODE = ${modeJson};
+    const REVIW_QUESTIONS = ${questionsJson};
 
   // --- Theme Management ---
   (function initTheme() {
@@ -2882,6 +3468,12 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
 
     function openCardForSelection() {
       if (!selection) return;
+      // Don't open card while image/video modal is visible
+      const imageOverlay = document.getElementById('image-fullscreen');
+      const videoOverlay = document.getElementById('video-fullscreen');
+      if (imageOverlay?.classList.contains('visible') || videoOverlay?.classList.contains('visible')) {
+        return;
+      }
       const { startRow, endRow, startCol, endCol } = selection;
       const isSingleCell = startRow === endRow && startCol === endCol;
 
@@ -3398,6 +3990,22 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       if (globalComment.trim()) {
         data.summary = globalComment.trim();
       }
+      // Include answered questions
+      if (window.REVIW_ANSWERS) {
+        const answeredQuestions = [];
+        for (const [id, answer] of Object.entries(window.REVIW_ANSWERS)) {
+          if (answer.selected || answer.text.trim()) {
+            answeredQuestions.push({
+              id,
+              selected: answer.selected,
+              text: answer.text.trim()
+            });
+          }
+        }
+        if (answeredQuestions.length > 0) {
+          data.reviwAnswers = answeredQuestions;
+        }
+      }
       return data;
     }
     function sendAndExit(reason = 'pagehide') {
@@ -3425,7 +4033,19 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       globalComment = globalCommentInput.value;
       hideSubmitModal();
       sendAndExit('button');
-      setTimeout(() => window.close(), 200);
+      // Try to close window; if it fails (browser security), show completion message
+      setTimeout(() => {
+        window.close();
+        // If window.close() didn't work, show a completion message
+        setTimeout(() => {
+          document.body.innerHTML = \`
+            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:var(--bg,#1a1a2e);color:var(--text,#e0e0e0);font-family:system-ui,sans-serif;">
+              <h1 style="font-size:2rem;margin-bottom:1rem;">✅ Review Submitted</h1>
+              <p style="color:var(--muted,#888);">You can close this tab now.</p>
+            </div>
+          \`;
+        }, 100);
+      }, 200);
     }
     modalSubmit.addEventListener('click', doSubmit);
     globalCommentInput.addEventListener('keydown', (e) => {
@@ -3867,8 +4487,9 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       }
 
       if (imageOverlay) {
+        // Close on any click (including image itself)
         imageOverlay.addEventListener('click', (e) => {
-          if (e.target === imageOverlay) closeImageOverlay();
+          closeImageOverlay();
         });
       }
 
@@ -3883,7 +4504,8 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         img.title = 'Click to view fullscreen';
 
         img.addEventListener('click', (e) => {
-          e.stopPropagation();
+          // Don't stop propagation - allow select to work
+          e.preventDefault();
 
           imageContainer.innerHTML = '';
           const clonedImg = img.cloneNode(true);
@@ -3928,8 +4550,9 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       }
 
       if (videoOverlay) {
+        // Close on any click (including video itself)
         videoOverlay.addEventListener('click', (e) => {
-          if (e.target === videoOverlay) closeVideoOverlay();
+          closeVideoOverlay();
         });
       }
 
@@ -3948,7 +4571,7 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
 
           link.addEventListener('click', (e) => {
             e.preventDefault();
-            e.stopPropagation();
+            // Don't stop propagation - allow select to work
 
             // Remove existing video if any
             const existingVideo = videoContainer.querySelector('video');
@@ -4034,13 +4657,11 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
             }
           }
 
-          // Check for markdown list items: strip list markers and formatting
-          if (lineText.match(/^[-*+]\\s|^\\d+\\.\\s/)) {
-            const strippedLine = stripMarkdown(lineText).replace(/\\s+/g, ' ').slice(0, 100);
-            if (strippedLine === normalized) return i + 1;
-            if (strippedLine.includes(normalized.slice(0, 30)) && normalized.length > 5) return i + 1;
-            if (normalized.includes(strippedLine.slice(0, 30)) && strippedLine.length > 5) return i + 1;
-          }
+          // Try stripping all markdown formatting (links, bold, italic, etc.)
+          const strippedLine = stripMarkdown(lineText).replace(/\\s+/g, ' ').slice(0, 100);
+          if (strippedLine === normalized) return i + 1;
+          if (strippedLine.includes(normalized.slice(0, 30)) && normalized.length > 5) return i + 1;
+          if (normalized.includes(strippedLine.slice(0, 30)) && strippedLine.length > 5) return i + 1;
         }
         return -1;
       }
@@ -4174,21 +4795,33 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
 
       // Click on block elements
       preview.addEventListener('click', (e) => {
-        // Handle image clicks
+        // Handle image clicks - always select, even if modal is showing
         if (e.target.tagName === 'IMG') {
-          if (!e.defaultPrevented) {
-            const line = findImageSourceLine(e.target.src);
+          const line = findImageSourceLine(e.target.src);
+          if (line > 0) {
+            selectSourceRange(line);
+          }
+          return;
+        }
+
+        // Handle links - sync to source but let link work normally
+        const link = e.target.closest('a');
+        if (link) {
+          // Find the parent block element containing this link
+          const parentBlock = link.closest('p, h1, h2, h3, h4, h5, h6, li, blockquote, td, th');
+          if (parentBlock) {
+            const isTableCell = parentBlock.tagName === 'TD' || parentBlock.tagName === 'TH';
+            const line = isTableCell ? findTableSourceLine(parentBlock.textContent) : findSourceLine(parentBlock.textContent);
             if (line > 0) {
-              e.preventDefault();
-              e.stopPropagation();
               selectSourceRange(line);
             }
           }
+          // Let the link open naturally (target="_blank" is set by marked)
           return;
         }
 
-        // Ignore clicks on links, mermaid, video overlay
-        if (e.target.closest('a, .mermaid-container, .video-fullscreen-overlay')) return;
+        // Ignore clicks on mermaid, video overlay
+        if (e.target.closest('.mermaid-container, .video-fullscreen-overlay')) return;
 
         // Handle code blocks - select entire block
         const pre = e.target.closest('pre');
@@ -4236,6 +4869,227 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         }, 10);
       });
     })();
+
+    // --- Reviw Questions Modal ---
+    (function initReviwQuestions() {
+      if (MODE !== 'markdown') return;
+      if (!REVIW_QUESTIONS || REVIW_QUESTIONS.length === 0) return;
+
+      const overlay = document.getElementById('reviw-questions-overlay');
+      const modal = document.getElementById('reviw-questions-modal');
+      const body = document.getElementById('reviw-questions-body');
+      const closeBtn = document.getElementById('reviw-questions-close');
+      const laterBtn = document.getElementById('reviw-questions-later');
+      const countSpan = document.getElementById('reviw-questions-count');
+      const bar = document.getElementById('reviw-questions-bar');
+      const barMessage = document.getElementById('reviw-questions-bar-message');
+      const barCount = document.getElementById('reviw-questions-bar-count');
+      const barOpenBtn = document.getElementById('reviw-questions-bar-open');
+
+      if (!overlay || !modal || !body) return;
+
+      // Store answers locally
+      const answers = {};
+      REVIW_QUESTIONS.forEach(q => {
+        answers[q.id] = { selected: '', text: '' };
+      });
+
+      // Count unresolved questions
+      const unresolvedQuestions = REVIW_QUESTIONS.filter(q => !q.resolved);
+      const resolvedQuestions = REVIW_QUESTIONS.filter(q => q.resolved);
+
+      function getUnansweredCount() {
+        // Count questions that have no answer (no selection and no text)
+        return unresolvedQuestions.filter(q => {
+          const a = answers[q.id];
+          return !a.selected && !a.text.trim();
+        }).length;
+      }
+
+      function updateCounts() {
+        const unansweredCount = getUnansweredCount();
+        if (unansweredCount > 0) {
+          countSpan.textContent = '(' + unansweredCount + '\u4ef6\u672a\u56de\u7b54)';
+          barMessage.innerHTML = '\ud83d\udccb \u672a\u56de\u7b54\u306e\u8cea\u554f\u304c<span id="reviw-questions-bar-count">' + unansweredCount + '</span>\u4ef6\u3042\u308a\u307e\u3059';
+          laterBtn.textContent = '\u5f8c\u3067\u56de\u7b54\u3059\u308b';
+        } else {
+          countSpan.textContent = '(\u5168\u3066\u56de\u7b54\u6e08\u307f)';
+          barMessage.innerHTML = '\u2705 \u5168\u3066\u306e\u8cea\u554f\u306b\u56de\u7b54\u3057\u307e\u3057\u305f';
+          laterBtn.textContent = '\u9589\u3058\u308b';
+        }
+      }
+
+      function checkAllAnswered() {
+        if (getUnansweredCount() === 0) {
+          // All answered - close modal but keep bar visible
+          setTimeout(() => {
+            overlay.classList.remove('visible');
+            // Keep bar visible with different message
+            bar.classList.add('visible');
+            document.body.classList.add('has-questions-bar');
+          }, 500);
+        }
+      }
+
+      function renderQuestions() {
+        body.innerHTML = '';
+
+        // Render unresolved questions
+        unresolvedQuestions.forEach((q, idx) => {
+          const item = document.createElement('div');
+          item.className = 'reviw-question-item';
+          item.dataset.id = q.id;
+
+          let optionsHtml = '';
+          if (q.options && q.options.length > 0) {
+            optionsHtml = '<div class="reviw-question-options">' +
+              q.options.map(opt =>
+                '<button class="reviw-question-option" data-value="' + escapeAttr(opt) + '">' + escapeHtml(opt) + '</button>'
+              ).join('') +
+              '</div>';
+          }
+
+          const isOkOnly = q.options && q.options.length === 1 && q.options[0] === 'OK';
+
+          item.innerHTML =
+            '<div class="reviw-question-text">Q' + (idx + 1) + '. ' + escapeHtml(q.question) + '<span class="reviw-check-mark"></span></div>' +
+            optionsHtml +
+            (isOkOnly ? '' : '<textarea class="reviw-question-input" placeholder="\u30c6\u30ad\u30b9\u30c8\u3067\u56de\u7b54\u30fb\u88dc\u8db3..."></textarea>');
+
+          body.appendChild(item);
+
+          // Check mark element
+          const checkMark = item.querySelector('.reviw-check-mark');
+
+          function updateCheckMark() {
+            const answer = answers[q.id];
+            const hasAnswer = answer.selected || answer.text.trim();
+            if (hasAnswer) {
+              checkMark.textContent = ' \u2713';
+              item.classList.add('answered');
+            } else {
+              checkMark.textContent = '';
+              item.classList.remove('answered');
+            }
+          }
+
+          // Option click handlers - always toggle
+          const optionBtns = item.querySelectorAll('.reviw-question-option');
+          optionBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+              const wasSelected = btn.classList.contains('selected');
+              optionBtns.forEach(b => b.classList.remove('selected'));
+              if (!wasSelected) {
+                btn.classList.add('selected');
+                answers[q.id].selected = btn.dataset.value;
+              } else {
+                answers[q.id].selected = '';
+              }
+              updateCheckMark();
+              updateCounts();
+              checkAllAnswered();
+            });
+          });
+
+          // Text input handler
+          const textarea = item.querySelector('.reviw-question-input');
+          if (textarea) {
+            textarea.addEventListener('input', () => {
+              answers[q.id].text = textarea.value;
+              updateCheckMark();
+              updateCounts();
+              checkAllAnswered();
+            });
+          }
+
+          updateCheckMark();
+        });
+
+        // Render resolved questions (collapsed)
+        if (resolvedQuestions.length > 0) {
+          const section = document.createElement('div');
+          section.className = 'reviw-resolved-section';
+          section.innerHTML =
+            '<button class="reviw-resolved-toggle">' +
+              '<span class="arrow">\u25b6</span> \u89e3\u6c7a\u6e08\u307f (' + resolvedQuestions.length + '\u4ef6)' +
+            '</button>' +
+            '<div class="reviw-resolved-list">' +
+              resolvedQuestions.map(q =>
+                '<div class="reviw-resolved-item">' +
+                  '<div class="reviw-resolved-q">' + escapeHtml(q.question) + '</div>' +
+                  '<div class="reviw-resolved-a">\u2192 ' + escapeHtml(q.answer || '(no answer)') + '</div>' +
+                '</div>'
+              ).join('') +
+            '</div>';
+          body.appendChild(section);
+
+          const toggle = section.querySelector('.reviw-resolved-toggle');
+          const list = section.querySelector('.reviw-resolved-list');
+          toggle.addEventListener('click', () => {
+            toggle.classList.toggle('open');
+            list.classList.toggle('visible');
+          });
+        }
+      }
+
+      function escapeHtml(str) {
+        return String(str)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+      }
+
+      function escapeAttr(str) {
+        return String(str)
+          .replace(/&/g, '&amp;')
+          .replace(/"/g, '&quot;');
+      }
+
+      function openModal() {
+        overlay.classList.add('visible');
+        bar.classList.remove('visible');
+        document.body.classList.remove('has-questions-bar');
+      }
+
+      function closeModal(allAnswered) {
+        overlay.classList.remove('visible');
+        const unansweredCount = getUnansweredCount();
+        if (unansweredCount > 0 && !allAnswered) {
+          bar.classList.add('visible');
+          document.body.classList.add('has-questions-bar');
+        } else {
+          bar.classList.remove('visible');
+          document.body.classList.remove('has-questions-bar');
+        }
+      }
+
+      // Event listeners
+      closeBtn.addEventListener('click', () => closeModal(false));
+      laterBtn.addEventListener('click', () => closeModal(false));
+      barOpenBtn.addEventListener('click', openModal);
+
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) closeModal(false);
+      });
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && overlay.classList.contains('visible')) {
+          closeModal(false);
+        }
+      });
+
+      // Expose answers for submit (only answered ones)
+      window.REVIW_ANSWERS = answers;
+
+      // Initialize
+      updateCounts();
+      renderQuestions();
+
+      // Show modal on load if there are unresolved questions
+      if (unresolvedQuestions.length > 0) {
+        setTimeout(() => openModal(), 300);
+      }
+    })();
   </script>
 </body>
 </html>`;
@@ -4246,8 +5100,8 @@ function buildHtml(filePath) {
   if (data.mode === "diff") {
     return diffHtmlTemplate(data);
   }
-  const { rows, cols, title, mode, preview } = data;
-  return htmlTemplate(rows, cols, title, mode, preview);
+  const { rows, cols, projectRoot, relativePath, mode, preview, reviwQuestions } = data;
+  return htmlTemplate(rows, cols, projectRoot, relativePath, mode, preview, reviwQuestions);
 }
 
 // --- HTTP Server -----------------------------------------------------------
@@ -4279,6 +5133,20 @@ function outputAllResults() {
     const yamlOut = yaml.dump(combined, { noRefs: true, lineWidth: 120 });
     console.log(yamlOut.trim());
   }
+
+  // Output answered questions if any
+  const allAnswers = [];
+  for (const result of allResults) {
+    if (result.reviwAnswers && result.reviwAnswers.length > 0) {
+      allAnswers.push(...result.reviwAnswers);
+    }
+  }
+  if (allAnswers.length > 0) {
+    console.log("\n[REVIW_ANSWERS]");
+    const answersYaml = yaml.dump(allAnswers, { noRefs: true, lineWidth: 120 });
+    console.log(answersYaml.trim());
+    console.log("[/REVIW_ANSWERS]");
+  }
 }
 
 function checkAllDone() {
@@ -4525,7 +5393,14 @@ function createFileServer(filePath, fileIndex = 0) {
           const delay = fileIndex * 300;
           setTimeout(() => {
             try {
-              spawn(opener, [url], { stdio: "ignore", detached: true });
+              const child = spawn(opener, [url], { stdio: "ignore", detached: true });
+              child.on('error', (err) => {
+                console.warn(
+                  "Failed to open browser automatically. Please open this URL manually:",
+                  url,
+                );
+              });
+              child.unref();
             } catch (err) {
               console.warn(
                 "Failed to open browser automatically. Please open this URL manually:",
@@ -4693,7 +5568,14 @@ function createDiffServer(diffContent) {
                 ? "start"
                 : "xdg-open";
           try {
-            spawn(opener, [url], { stdio: "ignore", detached: true });
+            const child = spawn(opener, [url], { stdio: "ignore", detached: true });
+            child.on('error', (err) => {
+              console.warn(
+                "Failed to open browser automatically. Please open this URL manually:",
+                url,
+              );
+            });
+            child.unref();
           } catch (err) {
             console.warn(
               "Failed to open browser automatically. Please open this URL manually:",
@@ -4709,7 +5591,18 @@ function createDiffServer(diffContent) {
   });
 }
 
-// Main entry point
+// Main entry point - only run when executed directly (not when required for testing)
+if (require.main === module) {
+  // Parse CLI arguments and apply configuration
+  const { config, filePaths } = parseCliArgs(process.argv);
+  basePort = config.basePort;
+  encodingOpt = config.encodingOpt;
+  noOpen = config.noOpen;
+  nextPort = config.basePort;  // Update nextPort to match configured basePort
+
+  // Validate and resolve file paths
+  resolvedPaths = validateAndResolvePaths(filePaths);
+
 (async () => {
   // Check for stdin input first
   const stdinData = await checkStdin();
@@ -4778,3 +5671,9 @@ function createDiffServer(diffContent) {
     }
   }
 })();
+}
+
+// Export parser functions for testing
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = { parseDiff, parseCsv, DEFAULT_CONFIG };
+}