Improve the corpus-viewer, and add a Claude slash-command for powering this loop.

Author: nedtwigg

.claude/commands/corpus-loop.md

@@ -0,0 +1,42 @@
+---
+argument-hint: [corpus_slug]
+description: uses Playwright MCP and the `corpus:view` dev environment to help with parsing page elements
+---
+
+- using Playwright MCP, navigate to `http://localhost:3001/corpus/$1/gitcasso`
+- the page will have a div with id `gitcasso-comment-spots`, wait 500ms for it to settle
+- inside the `gitcasso-comment-spots` div you will see something like this:
+
+```json
+{
+ "url": "https://github.com/diffplug/selfie/issues/523",
+ "allTextAreas": [
+  {
+   "textarea": "id='feedback' name='feedback' className='form-control width-full mb-2'",
+   "spot": "NO_SPOT"
+  },
+  {
+   "textarea": "id=':rn:' name='' className='prc-Textarea-TextArea-13q4j overtype-input'",
+   "spot": {
+    "domain": "github.com",
+    "number": 523,
+    "slug": "diffplug/selfie",
+    "title": "TODO_TITLE",
+    "type": "GH_ISSUE_ADD_COMMENT",
+    "unique_key": "github.com:diffplug/selfie:523"
+   }
+  }
+ ]
+}
+```
+
+- this output means that this page is simulating the url `https://github.com/diffplug/selfie/issues/523`
+- every textarea on the page is represented
+- `NO_SPOT` means that the spot was not enhanced
+- `type: GH_ISSUE_ADD_COMMENT` means that it was enhanced by whichever implementation of `CommentEnhancer` returns the spot type `GH_ISSUE_ADD_COMMENT`
+- if you search for that string in `src/lib/enhancers` you will find the correct one
+- the `tryToEnhance` method returned a `CommentSpot`, and that whole data is splatted out above
+
+If you make a change to the code of the enhancer, you can click the button with id `gitcasso-rebuild-btn`. It will trigger a rebuild of the browser extension, and then refresh the page. You'll be able to see the effects of your change in the `gitcasso-comment-spots` div described above.
+
+When writing `tryToEnhance` methods, don't hedge your bets and write lots of fallback code or strings of `?.`. Have a specific piece of data you want to get, use non-null `!` assertions where necessary to be clear about getting. The data they are extracting is going to change over time, and it's easier to fix broken ones if you know exactly what used to work. If the code has lots of branching paths, it's harder to tell what it was doing.

tests/corpus-view.ts

@@ -477,28 +477,28 @@ function createCommentSpotDisplayScript(urlParts: ReturnType<typeof getUrlParts>
 
     function updateCommentSpotDisplay() {
       const textareas = document.querySelectorAll('textarea');
-      const spotsFound = [];
+      const allTextAreas = [];
 
       for (const textarea of textareas) {
-        const forValue = 'id=' + textarea.id + ' name=' + textarea.name + ' className=' + textarea.className;
+        const forValue = "id='" + textarea.id + "' name='" + textarea.name + "' className='" + textarea.className + "'";
         const enhancedItem = window.gitcassoTextareaRegistry ? window.gitcassoTextareaRegistry.get(textarea) : undefined;
         if (enhancedItem) {
-          spotsFound.push({
-            for: forValue,
+          allTextAreas.push({
+            textarea: forValue,
             spot: enhancedItem.spot,
-            title: enhancedItem.enhancer.tableTitle(enhancedItem.spot),
           });
         } else {
-          spotsFound.push({
-            for: forValue,
+          allTextAreas.push({
+            textarea: forValue,
             spot: 'NO_SPOT',
           });
         }
       }
-
-      console.log('Enhanced textareas:', spotsFound.filter(s => s.spot !== 'NO_SPOT').length);
-      console.log('All textareas on page:', textareas.length);
-      commentSpotDisplay.innerHTML = '<div style="' + styles.header + '"><pre>${urlParts.href}\\n' + JSON.stringify(spotsFound, null, 2) + '</pre></div>';
+      const harness = {
+        url: '${urlParts.href}',
+        allTextAreas: allTextAreas
+      }
+      commentSpotDisplay.innerHTML = '<div style="' + styles.header + '"><pre>' + JSON.stringify(harness, null, 1) + '</pre></div>';
     }
 
     // Initial update
@@ -508,9 +508,6 @@ function createCommentSpotDisplayScript(urlParts: ReturnType<typeof getUrlParts>
     setTimeout(updateCommentSpotDisplay, 400);
     setTimeout(updateCommentSpotDisplay, 800);
 
-    // Update display periodically
-    setInterval(updateCommentSpotDisplay, 2000);
-
     document.body.appendChild(commentSpotDisplay);
   `
 }
@@ -540,7 +537,7 @@ function createGitcassoScript(
 ): string {
   const contentScriptSetup = contentScriptCode
     ? // Direct embedding (for HTML corpus)
-      `
+    `
       // Set up mocked location
       window.gitcassoMockLocation = {
         host: '${urlParts.host}',
@@ -567,7 +564,7 @@ function createGitcassoScript(
       }
       `
     : // Fetch-based loading (for HAR corpus)
-      `
+    `
       // Fetch and patch the content script to remove webextension-polyfill issues
       fetch('/chrome-mv3-dev/content-scripts/content.js')
         .then(response => response.text())