add a preview for the spreadsheet

Author: Brian Genisio

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .env
 spreadsheet.json
+.config-example.yaml

client/app.js

@@ -4,6 +4,20 @@ let config = {
   cellsToVerify: []
 };
 
+// Escape HTML to prevent XSS attacks
+function escapeHtml(text) {
+  if (text == null) return '';
+  const map = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '/': '&#x2F;'
+  };
+  return String(text).replace(/[&<>"'/]/g, s => map[s]);
+}
+
 // Load configuration on startup
 async function loadConfig() {
   try {
@@ -88,6 +102,7 @@ function updateStatus(message, type = 'info') {
 // Handle spreadsheet URL change
 function handleSpreadsheetURLChange(event) {
   config.spreadsheetURL = event.target.value;
+  render();
   saveConfig();
 }
 
@@ -112,13 +127,37 @@ function handleVerificationTypeChange(index, type) {
 
 // Add new cell verification
 function addCellVerification() {
+  const newIndex = config.cellsToVerify.length;
   config.cellsToVerify.push({
     cellName: '',
     expectedValue: '',
     expectedFunction: '',
     verificationType: 'value' // 'value' or 'function'
   });
   render();
+  
+  // Scroll the newly added cell into view, ensuring the "Add Cell" button is also visible
+  setTimeout(() => {
+    const cellItems = document.querySelectorAll('.cell-item');
+    const configEditor = document.querySelector('.config-editor');
+    if (cellItems[newIndex] && configEditor) {
+      // Scroll the cell into view
+      cellItems[newIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      
+      // Then scroll a bit more to ensure the "Add Cell" button is visible
+      setTimeout(() => {
+        const addButton = document.querySelector('.button-primary');
+        if (addButton) {
+          // Scroll the container a bit more to show the button
+          const scrollAmount = addButton.getBoundingClientRect().bottom - configEditor.getBoundingClientRect().bottom + 20;
+          if (scrollAmount > 0) {
+            configEditor.scrollBy({ top: scrollAmount, behavior: 'smooth' });
+          }
+        }
+      }, 300); // Wait for the first scroll to complete
+    }
+  }, 0);
+  
   saveConfig();
 }
 
@@ -134,9 +173,147 @@ function render() {
   const app = document.getElementById('app');
   if (!app) return;
 
+  // Convert Google Sheets URL to embeddable format
+  function getEmbedUrl(url) {
+    if (!url) return '';
+    // Extract spreadsheet ID from URL
+    const match = url.match(/\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/);
+    if (match) {
+      const spreadsheetId = match[1];
+      // Extract gid (sheet ID) if present
+      const gidMatch = url.match(/[#&]gid=([0-9]+)/);
+      const gid = gidMatch ? gidMatch[1] : '';
+      
+      // Use edit endpoint which shows headers - clipboard access depends on Google's iframe policies
+      let embedUrl = `https://docs.google.com/spreadsheets/d/${spreadsheetId}/edit`;
+      const params = [];
+      if (gid) {
+        params.push(`gid=${gid}`);
+      }
+      // rm=minimal removes some UI but keeps headers visible
+      params.push('rm=minimal');
+      if (params.length > 0) {
+        embedUrl += '?' + params.join('&');
+      }
+      return embedUrl;
+    }
+    return url;
+  }
+
+  const spreadsheetUrl = config.spreadsheetURL || '';
+  const embedUrl = getEmbedUrl(spreadsheetUrl);
+  
+  // Check if URL changed - if not, we can preserve the iframe
+  const existingIframe = document.getElementById('spreadsheet-iframe');
+  const urlChanged = !existingIframe || existingIframe.src !== embedUrl;
+  
+  // If URL hasn't changed, preserve the iframe by updating only the cells section
+  if (!urlChanged && existingIframe && spreadsheetUrl) {
+    // Only update the cells list, not the entire app
+    const cellsList = document.getElementById('cells-list');
+    if (cellsList) {
+      cellsList.innerHTML = `
+        ${config.cellsToVerify.map((cell, index) => {
+          const verificationType = cell.verificationType || (cell.expectedFunction ? 'function' : 'value');
+          return `
+          <div class="cell-item" style="border: 1px solid var(--Colors-Box-Stroke); border-radius: var(--UI-Radius-radius-s); padding: var(--UI-Spacing-spacing-l); margin-bottom: var(--UI-Spacing-spacing-m); background: var(--Colors-Box-Background);">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--UI-Spacing-spacing-m);">
+              <div style="display: flex; align-items: center; gap: var(--UI-Spacing-spacing-l);">
+                <label class="input-radio input-radio-small" style="margin: 0;">
+                  <input 
+                    type="radio" 
+                    name="verification-type-${index}" 
+                    value="value"
+                    ${verificationType === 'value' ? 'checked' : ''}
+                    onchange="handleVerificationTypeChange(${index}, 'value')"
+                  />
+                  <span class="input-radio-circle">
+                    <span class="input-radio-dot"></span>
+                  </span>
+                  <span class="input-radio-label">Value</span>
+                </label>
+                
+                <label class="input-radio input-radio-small" style="margin: 0;">
+                  <input 
+                    type="radio" 
+                    name="verification-type-${index}" 
+                    value="function"
+                    ${verificationType === 'function' ? 'checked' : ''}
+                    onchange="handleVerificationTypeChange(${index}, 'function')"
+                  />
+                  <span class="input-radio-circle">
+                    <span class="input-radio-dot"></span>
+                  </span>
+                  <span class="input-radio-label">Function</span>
+                </label>
+              </div>
+              <button class="button button-text" onclick="removeCellVerification(${index})" style="color: var(--Colors-Base-Accent-Red-600);">
+                Remove
+              </button>
+            </div>
+            
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--UI-Spacing-spacing-m); margin-bottom: var(--UI-Spacing-spacing-m);">
+              <div>
+                <label style="display: block; margin-bottom: var(--UI-Spacing-spacing-xs); font-weight: 500; font-size: var(--Fonts-Body-Default-sm); color: var(--Colors-Text-Body-Medium);">
+                  Cell Name
+                </label>
+                <input 
+                  type="text" 
+                  class="input" 
+                  style="width: 100%; box-sizing: border-box;"
+                  value="${escapeHtml(cell.cellName || '')}" 
+                  placeholder="e.g., A1"
+                  onchange="handleCellChange(${index}, 'cellName', event.target.value)"
+                />
+              </div>
+              
+              ${verificationType === 'value' ? `
+              <div>
+                <label style="display: block; margin-bottom: var(--UI-Spacing-spacing-xs); font-weight: 500; font-size: var(--Fonts-Body-Default-sm); color: var(--Colors-Text-Body-Medium);">
+                  Expected Value
+                </label>
+                <input 
+                  type="text" 
+                  class="input" 
+                  style="width: 100%; box-sizing: border-box;"
+                  value="${escapeHtml(cell.expectedValue || '')}" 
+                  placeholder="e.g., 10"
+                  onchange="handleCellChange(${index}, 'expectedValue', event.target.value)"
+                />
+              </div>
+              ` : `
+              <div>
+                <label style="display: block; margin-bottom: var(--UI-Spacing-spacing-xs); font-weight: 500; font-size: var(--Fonts-Body-Default-sm); color: var(--Colors-Text-Body-Medium);">
+                  Expected Function
+                </label>
+                <input 
+                  type="text" 
+                  class="input" 
+                  style="width: 100%; box-sizing: border-box;"
+                  value="${escapeHtml(cell.expectedFunction || '')}" 
+                  placeholder="e.g., =SUM(A1:A10)"
+                  onchange="handleCellChange(${index}, 'expectedFunction', event.target.value)"
+                />
+              </div>
+              `}
+            </div>
+          </div>
+        `;
+        }).join('')}
+        
+        ${config.cellsToVerify.length === 0 ? `
+          <div style="text-align: left; padding: var(--UI-Spacing-spacing-xl); color: var(--Colors-Text-Body-Light);">
+            No cells configured. Click "Add Cell" below to get started.
+          </div>
+        ` : ''}
+      `;
+      return; // Early return to avoid full re-render
+    }
+  }
+
   app.innerHTML = `
-    <div class="config-editor">
-      <div class="box box-elevated" style="margin-bottom: var(--UI-Spacing-spacing-xl);">
+    <div style="grid-column: 1 / -1; margin-bottom: var(--UI-Spacing-spacing-xl);">
+      <div class="box card">
         <div style="width: 100%;">
           <label for="spreadsheet-url" class="label-medium" style="display: block; margin-bottom: var(--UI-Spacing-spacing-xs); color: var(--Colors-Text-Body-Medium); text-align: left;">
             Spreadsheet URL
@@ -146,16 +323,18 @@ function render() {
             id="spreadsheet-url" 
             class="input" 
             style="width: 100%; max-width: 100%; box-sizing: border-box;"
-            value="${config.spreadsheetURL || ''}" 
+            value="${escapeHtml(spreadsheetUrl)}" 
             placeholder="https://docs.google.com/spreadsheets/d/..."
             onchange="handleSpreadsheetURLChange(event)"
           />
         </div>
       </div>
+    </div>
 
-      <div class="box box-elevated" style="display: flex; flex-direction: column; align-items: flex-start;">
-        <h2 class="heading-medium" style="margin-top: 0; margin-bottom: var(--UI-Spacing-spacing-xl); color: var(--Colors-Text-Body-Strong); width: 100%;">Cells to Verify</h2>
+    <div class="config-editor">
+      <h2 class="heading-medium" style="margin-top: 0; margin-bottom: var(--UI-Spacing-spacing-xl); color: var(--Colors-Text-Body-Strong);">Cells to Verify</h2>
 
+      <div class="box card" style="display: flex; flex-direction: column; align-items: flex-start;">
         <div id="cells-list" style="width: 100%;">
           ${config.cellsToVerify.map((cell, index) => {
             const verificationType = cell.verificationType || (cell.expectedFunction ? 'function' : 'value');
@@ -205,7 +384,7 @@ function render() {
                     type="text" 
                     class="input" 
                     style="width: 100%; box-sizing: border-box;"
-                    value="${cell.cellName || ''}" 
+                    value="${escapeHtml(cell.cellName || '')}" 
                     placeholder="e.g., A1"
                     onchange="handleCellChange(${index}, 'cellName', event.target.value)"
                   />
@@ -220,7 +399,7 @@ function render() {
                     type="text" 
                     class="input" 
                     style="width: 100%; box-sizing: border-box;"
-                    value="${cell.expectedValue || ''}" 
+                    value="${escapeHtml(cell.expectedValue || '')}" 
                     placeholder="e.g., 10"
                     onchange="handleCellChange(${index}, 'expectedValue', event.target.value)"
                   />
@@ -234,7 +413,7 @@ function render() {
                     type="text" 
                     class="input" 
                     style="width: 100%; box-sizing: border-box;"
-                    value="${cell.expectedFunction || ''}" 
+                    value="${escapeHtml(cell.expectedFunction || '')}" 
                     placeholder="e.g., =SUM(A1:A10)"
                     onchange="handleCellChange(${index}, 'expectedFunction', event.target.value)"
                   />
@@ -259,6 +438,26 @@ function render() {
         </div>
       </div>
     </div>
+
+    <div class="spreadsheet-preview">
+      ${spreadsheetUrl ? `
+        <iframe 
+          id="spreadsheet-iframe"
+          src="${escapeHtml(embedUrl)}"
+          frameborder="0"
+          allowfullscreen
+          allow="clipboard-read; clipboard-write"
+        ></iframe>
+      ` : `
+        <div class="spreadsheet-preview-placeholder" style="flex: 1; min-height: 0;">
+          <div>
+            <p style="font-size: var(--Fonts-Body-Default-md); color: var(--Colors-Text-Body-Light);">
+              Enter a spreadsheet URL to see a preview here.
+            </p>
+          </div>
+        </div>
+      `}
+    </div>
   `;
 }
 

client/index.html

@@ -38,19 +38,67 @@
       background: var(--Colors-Box-Background);
       border-bottom: 1px solid var(--Colors-Box-Stroke);
       gap: var(--UI-Spacing-spacing-m);
+      height: 80px;
+      box-sizing: border-box;
     }
 
     .header h1 {
       margin: 0;
       color: var(--Colors-Text-Body-Strong);
     }
 
+    :root {
+      --header-height: 80px;
+    }
+
     #app {
-      max-width: 1200px;
-      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: min-content 1fr;
+      gap: var(--UI-Spacing-spacing-xl);
+      padding: var(--UI-Spacing-spacing-xl);
+      height: calc(100vh - var(--header-height));
+      overflow: hidden;
+    }
+
+    .config-editor {
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      padding-right: var(--UI-Spacing-spacing-m);
+      min-height: 0;
+      height: 100%;
+    }
+
+    .spreadsheet-preview {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+    }
+
+    .spreadsheet-preview-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--Colors-Box-Background);
+      border: 1px solid var(--Colors-Box-Stroke);
+      border-radius: var(--UI-Radius-radius-s);
+      color: var(--Colors-Text-Body-Light);
+      text-align: center;
       padding: var(--UI-Spacing-spacing-xl);
     }
 
+    .spreadsheet-preview iframe {
+      width: 100%;
+      border: 2px solid var(--Colors-Box-Stroke);
+      border-radius: var(--UI-Radius-radius-s);
+      background: var(--Colors-Box-Background);
+      flex: 1;
+      min-height: 0;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+
     .config-editor h3 {
       font-size: var(--Fonts-Body-Default-md);
       font-weight: 600;