From 93879bc8f74d6f0f89b69060cd4e66e403efbdaf Mon Sep 17 00:00:00 2001
From: kfj001 <kfj001@gmail.com>
Date: Mon, 8 Jun 2026 08:40:06 +0000
Subject: [PATCH] Updates extensions in workspace. Alters plugin to scrape for
 NxN tabs for videos to display in the matrix.

---
 goon_plugin.code-workspace | 30 +++++-------------------------
 src/viewer/index.js        | 25 +++++++++++++++++--------
 src/viewer/viewer.css      |  2 --
 src/viewer/viewer.js       | 17 ++++++++++++-----
 4 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/goon_plugin.code-workspace b/goon_plugin.code-workspace
index f1204b7..2c1fa05 100644
--- a/goon_plugin.code-workspace
+++ b/goon_plugin.code-workspace
@@ -1,8 +1,8 @@
 {
   "folders": [
     {
-      "path": "."
-    }
+      "path": ".",
+    },
   ],
   "extensions": {
     "recommendations": [
@@ -10,8 +10,8 @@
       "maslansnik.chromium-ext-debugger",
       "dbaeumer.vscode-eslint",
       "esbenp.prettier-vscode",
-      "bierner.markdown-preview-github-styles"
-    ]
+      "bierner.markdown-preview-github-styles",
+    ],
   },
   "settings": {
     "extensions.autoUpdate": true,
@@ -19,25 +19,5 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "eslint.validate": ["javascript", "typescript"],
     "typescript.tsdk": "node_modules/typescript/lib",
-    "claudeCode.environmentVariables": [
-
-
-      {
-        "name":"ANTHROPIC_BASE_URL",
-        "value":"http://192.168.1.109:11434"
-      },
-{
-  "name":"ANTHROPIC_AUTH_TOKEN",
-  "value":"ollama"
-},
-{
-  "name":"ANTHROPIC_API_KEY",
-  "value": ""
-},
-{
-  "name":"ANTHROPIC_MODEL",
-  "value": "qwen3.6"
-}
-    ]
-  }
+  },
 }
diff --git a/src/viewer/index.js b/src/viewer/index.js
index b59727c..afc83bd 100644
--- a/src/viewer/index.js
+++ b/src/viewer/index.js
@@ -184,8 +184,9 @@ findBtn.addEventListener('click', async () => {
       [TAGGED_KEY]: items.map(v => v.tab),
     });
 
-    setStatus(`Found ${items.length} video(s) across ${scanned} tab(s).`);
-    renderList(storedItems.map(v => ({ url: v, label: v.tab })));
+    const skippedTabs = results.filter(r => r === null).length;
+    const statusMsg = `Found ${items.length} video(s) across ${scanned} tab(s).`;
+    setStatus(skippedTabs > 0 ? `${statusMsg} ${skippedTabs} tab(s) skipped (idle).` : statusMsg);
     btnRow.style.display = 'flex';
   } catch (e) {
     setStatus(`Scan failed: ${e.message}`);
@@ -203,10 +204,17 @@ openBtn.addEventListener('click', async () => {
     return;
   }
 
-  // Take the first 4 (viewer grid is 2x2)
-  const videoUrls = urls.slice(0, 4);
-  const videoTags = tags ? tags.slice(0, 4) : [];
-  console.log('[goon] opening viewer with', videoUrls.length, 'video URLs:', videoUrls);
+  // Dedup by index to preserve tag alignment
+  const videoUrls = urls;
+  const videoTags = tags || [];
+
+  // Compute NxN grid
+  const N = Math.ceil(Math.sqrt(videoUrls.length));
+  const PANEL_MIN_W = 420;
+  const PANEL_MIN_H = 340;
+  const GAP = 2;
+  const winW = Math.max(PANEL_MIN_W * N + GAP * (N - 1), 400);
+  const winH = Math.max(PANEL_MIN_H * N + GAP * (N - 1) + 40, 300);
 
   const id = 'goonViewer_' + Date.now();
   await chrome.storage.local.set({ [id]: videoUrls });
@@ -218,8 +226,9 @@ openBtn.addEventListener('click', async () => {
   await new Promise(r => setTimeout(r, 100));
 
   const tagsParam = videoTags.length > 0 ? '&tags=' + encodeURIComponent(JSON.stringify(videoTags)) : '';
-  const viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id + tagsParam;
-  chrome.windows.create({ url: viewerUrl, width: 1400, height: 900 });
+  const gridParam = '&grid=' + N;
+  const viewerUrl = chrome.runtime.getURL('viewer/viewer.html') + '?id=' + id + gridParam + tagsParam;
+  chrome.windows.create({ url: viewerUrl, width: winW, height: winH });
 });
 
 /* === "Clear" — reset the stored list === */
diff --git a/src/viewer/viewer.css b/src/viewer/viewer.css
index dba69e9..f75fb6b 100644
--- a/src/viewer/viewer.css
+++ b/src/viewer/viewer.css
@@ -20,8 +20,6 @@ body {
 
 #panels {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
   gap: 2px;
   width: 100%;
   height: 100%;
diff --git a/src/viewer/viewer.js b/src/viewer/viewer.js
index d4915bf..d1e5c62 100644
--- a/src/viewer/viewer.js
+++ b/src/viewer/viewer.js
@@ -1,10 +1,11 @@
 /**
  * viewer.js — Goon Viewer page logic.
- * Reads video URLs from chrome.storage and renders them in a 2x2 grid.
+ * Reads video URLs from chrome.storage and renders them in a dynamic NxN grid.
  */
 
 const params = new URLSearchParams(location.search);
 const id = params.get('id');
+const gridN = parseInt(params.get('grid'), 10) || 2;
 const tags = params.get('tags') ? JSON.parse(params.get('tags')) : [];
 const panelsEl = document.getElementById('panels');
 
@@ -28,11 +29,13 @@ async function init() {
   document.body.style.position = 'relative';
   document.body.insertBefore(overlay, document.body.firstChild);
 
-  overlay.textContent = `Found ${videoUrls.length} video URL(s)`;
+  overlay.textContent = `Found ${videoUrls.length} video URL(s) in ${gridN}x${gridN} grid`;
   console.log('[goon-viewer]', overlay.textContent);
 
-  // Create exactly 4 panels
-  for (let i = 0; i < 4; i++) {
+  const totalPanels = gridN * gridN;
+
+  // Create NxN panels
+  for (let i = 0; i < totalPanels; i++) {
     const panel = document.createElement('div');
     panel.classList.add('panel');
 
@@ -43,7 +46,7 @@ async function init() {
       video.muted = true;
       video.loop = true;
       video.playsInline = true;
-      console.log('[goon-viewer] panel', i + '/4:', videoUrls[i]);
+      console.log('[goon-viewer] panel', i + 1, '/', totalPanels, ':', videoUrls[i]);
       panel.appendChild(video);
 
       // Add tab label if available
@@ -59,6 +62,10 @@ async function init() {
 
     panelsEl.appendChild(panel);
   }
+
+  // Apply dynamic grid
+  panelsEl.style.gridTemplateColumns = `repeat(${gridN}, 1fr)`;
+  panelsEl.style.gridTemplateRows = `repeat(${gridN}, 1fr)`;
 }
 
 // Clean up storage entry when the viewer is closed