mcprigor 1.3.0 → 1.4.0

package/workspace-assets/app.js

@@ -341,6 +341,7 @@ async function run(mode, paths) {
 function renderRun() {
   const run = state.run;
   if (!run) return;
+  updateExportBar();
   const query = $('results-filter').value.trim();
   const list = $('run-list');
   list.replaceChildren();
@@ -548,3 +549,83 @@ $('refresh').onclick = () => refreshList().then(n => { if (!n && !state.path) sh
 $('filter').addEventListener('input', renderList);
 setEnabled(false);
 start().catch(show);
+
+/* ---------- resizable panels ---------- */
+(() => {
+  const mainEl = document.querySelector('main');
+  const KEY = 'mcprigor.panels';
+  const apply = (side, results) => {
+    if (side) mainEl.style.setProperty('--col-side', side);
+    if (results) mainEl.style.setProperty('--col-results', results);
+  };
+  try { const saved = JSON.parse(localStorage.getItem(KEY) || '{}'); apply(saved.side, saved.results); } catch {}
+  const save = () => {
+    try { localStorage.setItem(KEY, JSON.stringify({
+      side: mainEl.style.getPropertyValue('--col-side') || undefined,
+      results: mainEl.style.getPropertyValue('--col-results') || undefined,
+    })); } catch {}
+  };
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+  const wire = (id, compute, keyboardStep) => {
+    const splitter = document.getElementById(id);
+    if (!splitter) return;
+    splitter.addEventListener('pointerdown', (event) => {
+      event.preventDefault();
+      splitter.setPointerCapture(event.pointerId);
+      splitter.classList.add('dragging');
+      document.body.classList.add('resizing');
+      const move = (ev) => compute(ev.clientX);
+      const stop = () => {
+        splitter.classList.remove('dragging');
+        document.body.classList.remove('resizing');
+        splitter.removeEventListener('pointermove', move);
+        splitter.removeEventListener('pointerup', stop);
+        splitter.removeEventListener('pointercancel', stop);
+        save();
+      };
+      splitter.addEventListener('pointermove', move);
+      splitter.addEventListener('pointerup', stop);
+      splitter.addEventListener('pointercancel', stop);
+    });
+    splitter.addEventListener('keydown', (event) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+      event.preventDefault();
+      keyboardStep(event.key === 'ArrowLeft' ? -16 : 16);
+      save();
+    });
+    splitter.addEventListener('dblclick', () => {
+      mainEl.style.removeProperty('--col-side');
+      mainEl.style.removeProperty('--col-results');
+      try { localStorage.removeItem(KEY); } catch {}
+    });
+  };
+  const sideWidth = () => document.querySelector('.sidebar').getBoundingClientRect().width;
+  const resultsWidth = () => document.querySelector('.results').getBoundingClientRect().width;
+  wire('split-left',
+    (x) => apply(`${clamp(x - mainEl.getBoundingClientRect().left, 160, 480)}px`, null),
+    (delta) => apply(`${clamp(sideWidth() + delta, 160, 480)}px`, null));
+  wire('split-right',
+    (x) => { const rect = mainEl.getBoundingClientRect(); apply(null, `${clamp(rect.right - x, 240, rect.width - 500)}px`); },
+    (delta) => { const rect = mainEl.getBoundingClientRect(); apply(null, `${clamp(resultsWidth() - delta, 240, rect.width - 500)}px`); });
+})();
+
+/* ---------- report exports ---------- */
+function updateExportBar() {
+  const run = state.run;
+  const bar = $('export-run');
+  const index = state.runSel || 0;
+  const item = run && run.items && run.items[index];
+  bar.hidden = !(run && run.mode === 'test' && item && item.status !== 'running' && item.tests);
+}
+function exportRun(format) {
+  const run = state.run;
+  if (!run) return;
+  const index = state.runSel || 0;
+  window.open(`/api/v1/export/run?id=${encodeURIComponent(run.id)}&item=${index}&format=${format}`, '_blank');
+}
+$('export-run-pdf').onclick = () => exportRun('pdf');
+$('export-run-csv').onclick = () => exportRun('csv');
+$('export-run-junit').onclick = () => exportRun('junit');
+$('export-trends-pdf').onclick = () => window.open('/api/v1/export/trends?format=pdf', '_blank');
+$('export-trends-csv').onclick = () => window.open('/api/v1/export/trends?format=csv', '_blank');
+$('export-trends-raw').onclick = () => window.open('/api/v1/export/trends?format=raw-csv', '_blank');

package/workspace-assets/index.html

@@ -41,6 +41,7 @@
       <a href="https://mcprigor.com/docs/plain-language-cookbook.html" target="_blank" rel="noreferrer">📖 Cookbook — copy-ready examples</a>
     </div>
   </aside>
+  <div class="splitter" id="split-left" role="separator" aria-orientation="vertical" aria-label="Resize file list" tabindex="0"></div>
 
   <section class="workbench">
     <div class="toolbar">
@@ -76,6 +77,7 @@
     <div id="diagnostics" class="diagnostics" role="status" aria-live="polite" hidden></div>
   </section>
 
+  <div class="splitter" id="split-right" role="separator" aria-orientation="vertical" aria-label="Resize results panel" tabindex="0"></div>
   <aside class="results">
     <div class="results-tabs" role="tablist">
       <button id="tab-run" class="tab active" role="tab" aria-selected="true">Run</button>
@@ -88,6 +90,12 @@
       <input id="results-filter" type="search" placeholder="Search tests and results…" aria-label="Search tests and results">
     </div>
     <div id="panel-run" class="panel" role="tabpanel">
+      <div id="export-run" class="export-bar" hidden>
+        <span class="export-label">Export report:</span>
+        <button id="export-run-pdf" class="ghost small" type="button">PDF</button>
+        <button id="export-run-csv" class="ghost small" type="button">CSV</button>
+        <button id="export-run-junit" class="ghost small" type="button">JUnit XML</button>
+      </div>
       <div id="run-list"></div>
       <pre id="output" class="output"><span class="muted">Nothing has run yet.
 Open a test file and click ▶ Run tests — or select several files
@@ -97,6 +105,12 @@ with their checkboxes and run them together.</span></pre>
       <div id="history-list" class="history-list"><p class="muted pad">No runs recorded yet. History appears after the first ▶ Run.</p></div>
     </div>
     <div id="panel-trends" class="panel" role="tabpanel" hidden>
+      <div class="export-bar">
+        <span class="export-label">Export trends:</span>
+        <button id="export-trends-pdf" class="ghost small" type="button">PDF</button>
+        <button id="export-trends-csv" class="ghost small" type="button">CSV</button>
+        <button id="export-trends-raw" class="ghost small" type="button">Raw history CSV</button>
+      </div>
       <div id="trends" class="trends"><p class="muted pad">Trends appear after a few runs.</p></div>
     </div>
   </aside>

package/workspace-assets/style.css

@@ -27,10 +27,15 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 footer{display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--bg-raised);border-top:1px solid var(--line);font-size:11.5px;color:var(--text-faint)}
 
 /* ---------- layout ---------- */
-main{display:grid;grid-template-columns:250px minmax(420px,1fr) minmax(320px,36%);min-height:0}
+main{display:grid;grid-template-columns:var(--col-side,250px) 5px minmax(360px,1fr) 5px var(--col-results,minmax(320px,36%));min-height:0}
+.splitter{cursor:col-resize;background:transparent;position:relative;z-index:5}
+.splitter::after{content:"";position:absolute;inset:0 1px;background:var(--line);transition:background .15s}
+.splitter:hover::after,.splitter.dragging::after{background:var(--accent)}
+body.resizing{cursor:col-resize;user-select:none}
+body.resizing iframe,body.resizing textarea{pointer-events:none}
 
 /* ---------- sidebar ---------- */
-.sidebar{display:flex;flex-direction:column;gap:10px;padding:14px 12px;background:var(--bg-raised);border-right:1px solid var(--line);min-height:0}
+.sidebar{display:flex;flex-direction:column;gap:10px;padding:14px 12px;background:var(--bg-raised);min-height:0;overflow:hidden}
 .search-row{display:flex;gap:6px}
 #filter{flex:1;min-width:0;background:var(--bg-input);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 10px;font-size:13px;outline:none}
 #filter:focus{border-color:var(--accent-strong)}
@@ -223,3 +228,7 @@ button.small{padding:4px 8px;font-size:11.5px;color:var(--text-faint)}
 nav .suite-row button .rn{display:none;flex:none;font-size:10px;opacity:.6;padding:0 2px}
 nav .suite-row:hover button .rn{display:inline}
 nav .suite-row button .rn:hover{opacity:1}
+
+.export-bar{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line-soft)}
+.export-label{font-size:11px;color:var(--text-dim);margin-right:2px}
+.export-bar .small{font-size:11px;padding:3px 10px}