Add support for GitHub projects (#108)

Author: nedtwigg

.claude/commands/corpus-loop.md

@@ -33,7 +33,7 @@ description: uses Playwright MCP and the `corpus` to parse page elements
 - 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`
+- `type: GH_ISSUE_APPEND` means that it was enhanced by whichever implementation of `CommentEnhancer` returns the spot type `GH_ISSUE_APPEND`
 - 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
 

CHANGELOG.md

@@ -5,6 +5,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 Version must be kept in-sync between [`package.json`](package.json) and [`wxt.config.js`](wxt.config.ts).
 
 ## [Unreleased]
+### Added
+- Support for GitHub projects (draft and "real" issues). ([#108](https://github.com/diffplug/gitcasso/pull/108))
 ### Fixed
 - Appending to GitHub issues was not being enhanced, now fixed. ([#105](https://github.com/diffplug/gitcasso/issues/105))
 - Reduced unnecessary permissions (no need for `host_permissions`)

src/entrypoints/content.ts

@@ -15,6 +15,7 @@ function detectLocation(): StrippedLocation {
   const result = {
     host: window.location.host,
     pathname: window.location.pathname,
+    search: window.location.search,
   }
   logger.debug("[gitcasso] detectLocation called, returning:", result)
   return result

src/lib/enhancer.ts

@@ -26,6 +26,7 @@ export interface CommentEvent {
 export interface StrippedLocation {
   host: string
   pathname: string
+  search: string
 }
 
 /** Wraps the textareas of a given platform with Gitcasso's enhancements. */

src/lib/enhancers/github/GitHubEditEnhancer.tsx

@@ -7,7 +7,13 @@ import type {
 } from "@/lib/enhancer"
 import { logger } from "@/lib/logger"
 import { fixupOvertype, modifyDOM } from "../overtype-misc"
-import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
+import {
+  commonGitHubOptions,
+  isInProjectCommentBox,
+  isProjectUrl,
+  parseProjectIssueParam,
+  prepareGitHubHighlighter,
+} from "./github-common"
 
 const GH_EDIT = "GH_EDIT" as const
 
@@ -29,6 +35,50 @@ export class GitHubEditEnhancer implements CommentEnhancer<GitHubEditSpot> {
       return null
     }
 
+    // Check for project draft edit first
+    if (isProjectUrl(location.pathname)) {
+      const params = new URLSearchParams(location.search)
+      const itemId = params.get("itemId")
+
+      // Handle draft editing (itemId parameter)
+      if (itemId) {
+        // Exclude textareas within Shared-module__CommentBox (those are for adding new comments, not editing)
+        if (!isInProjectCommentBox(textarea)) {
+          const unique_key = `github.com:project-draft:${itemId}:edit-body`
+          logger.debug(
+            `${this.constructor.name} enhanced project draft body textarea`,
+            unique_key
+          )
+          return {
+            isIssue: true,
+            type: GH_EDIT,
+            unique_key,
+          }
+        }
+      }
+
+      // Handle existing issue comment editing (issue parameter)
+      const issueInfo = parseProjectIssueParam(params)
+      if (issueInfo) {
+        // Edit mode: empty placeholder
+        // Add new comment mode: has placeholder "Add your comment here..." or similar
+        if (!textarea.placeholder || textarea.placeholder.trim() === "") {
+          const unique_key = `github.com:${issueInfo.slug}:${issueInfo.number}:edit-comment`
+          logger.debug(
+            `${this.constructor.name} enhanced project issue comment edit textarea`,
+            unique_key
+          )
+          return {
+            isIssue: true,
+            type: GH_EDIT,
+            unique_key,
+          }
+        }
+      }
+
+      return null
+    }
+
     // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456
     const match = location.pathname.match(
       /^\/([^/]+)\/([^/]+)\/(?:issues|pull)\/(\d+)/
@@ -46,9 +96,8 @@ export class GitHubEditEnhancer implements CommentEnhancer<GitHubEditSpot> {
       "[data-wrapper-timeline-id]"
     )
     const isPRBodyEdit =
-      textarea.name === "pull_request[body]" ||
-      textarea.name === "issue_comment[body]"
-    //                   ^this is the root pr comment              ^this is the other pr comments (surprising!)
+      textarea.name === "pull_request[body]" || // this is the root pr comment
+      textarea.name === "issue_comment[body]" // this is the other pr comments (surprising!)
 
     if (!isIssueBodyRootEdit && !isIssueBodyCommentEdit && !isPRBodyEdit) {
       return null

src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx

@@ -9,7 +9,13 @@ import type {
 } from "@/lib/enhancer"
 import { logger } from "@/lib/logger"
 import { fixupOvertype, modifyDOM } from "../overtype-misc"
-import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
+import {
+  commonGitHubOptions,
+  isInProjectCommentBox,
+  isProjectUrl,
+  parseProjectIssueParam,
+  prepareGitHubHighlighter,
+} from "./github-common"
 
 const GH_ISSUE_APPEND = "GH_ISSUE_APPEND" as const
 
@@ -45,6 +51,32 @@ export class GitHubIssueAppendEnhancer
       return null
     }
 
+    // Check for project URLs with issue parameter first
+    if (isProjectUrl(location.pathname)) {
+      const params = new URLSearchParams(location.search)
+      // Only match textareas within Shared-module__CommentBox (those are for adding new comments)
+      if (isInProjectCommentBox(textarea)) {
+        const issueInfo = parseProjectIssueParam(params)
+        if (issueInfo) {
+          const unique_key = `github.com:${issueInfo.slug}:${issueInfo.number}`
+          // For project views, the title is in the side panel dialog
+          const title =
+            document
+              .querySelector('[data-testid="issue-title"]')
+              ?.textContent?.trim() || ""
+          return {
+            domain: location.host,
+            number: issueInfo.number,
+            slug: issueInfo.slug,
+            title,
+            type: GH_ISSUE_APPEND,
+            unique_key,
+          }
+        }
+      }
+      return null
+    }
+
     // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456
     logger.debug(`${this.constructor.name} examing url`, location.pathname)
 

src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx

@@ -8,7 +8,11 @@ import type {
 } from "../../enhancer"
 import { logger } from "../../logger"
 import { fixupOvertype, modifyDOM } from "../overtype-misc"
-import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
+import {
+  commonGitHubOptions,
+  isProjectUrl,
+  prepareGitHubHighlighter,
+} from "./github-common"
 
 const GH_ISSUE_CREATE = "GH_ISSUE_CREATE" as const
 
@@ -37,6 +41,32 @@ export class GitHubIssueCreateEnhancer
       return null
     }
 
+    // Check for project board URLs first
+    if (isProjectUrl(location.pathname)) {
+      // Check if we're in a "Create new issue" dialog
+      const dialog = textarea.closest('[role="dialog"]')
+      if (dialog) {
+        const dialogHeading = dialog.querySelector("h1")?.textContent
+        const slugMatch = dialogHeading?.match(/Create new issue in (.+)/)
+        if (slugMatch) {
+          const slug = slugMatch[1]!
+          const unique_key = `github.com:${slug}:new`
+          const titleInput = document.querySelector(
+            'input[placeholder="Title"]'
+          ) as HTMLInputElement
+          const title = titleInput?.value || ""
+          return {
+            domain: location.host,
+            slug,
+            title,
+            type: GH_ISSUE_CREATE,
+            unique_key,
+          }
+        }
+      }
+      return null
+    }
+
     // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456
     logger.debug(`${this.constructor.name} examing url`, location.pathname)
 

src/lib/enhancers/github/github-common.ts

@@ -61,3 +61,49 @@ function githubHighlighter(code: string, language?: string) {
     return escapeHtml(code)
   }
 }
+
+// Project-related helper functions
+
+/**
+ * Check if the pathname matches a GitHub project URL pattern.
+ * Matches: /orgs/{org}/projects/{id} or /users/{user}/projects/{id}
+ * Optional: /views/{viewId} suffix
+ */
+export function isProjectUrl(pathname: string): boolean {
+  return /^\/(?:orgs|users)\/[^/]+\/projects\/\d+(?:\/views\/\d+)?/.test(
+    pathname
+  )
+}
+
+/**
+ * Parse the issue parameter from project URLs.
+ * Format: ?issue=owner|repo|number
+ * Returns: { slug: "owner/repo", number: 123 } or null if invalid
+ */
+export function parseProjectIssueParam(
+  searchParams: URLSearchParams
+): { slug: string; number: number } | null {
+  const issueParam = searchParams.get("issue")
+  if (!issueParam) return null
+
+  const parts = issueParam.split("|")
+  if (parts.length !== 3) return null
+
+  const [owner, repo, numberStr] = parts
+  const number = parseInt(numberStr!, 10)
+
+  if (Number.isNaN(number)) return null
+
+  return {
+    slug: `${owner}/${repo}`,
+    number,
+  }
+}
+
+/**
+ * Check if an element is within a project CommentBox container.
+ * CommentBox containers are used for adding new comments (not editing).
+ */
+export function isInProjectCommentBox(element: HTMLElement): boolean {
+  return !!element.closest('[class*="Shared-module__CommentBox"]')
+}

tests/corpus-fixture.ts

@@ -66,6 +66,7 @@ export function detectedSpots() {
   const location: StrippedLocation = {
     host: window.location.host,
     pathname: window.location.pathname,
+    search: window.location.search,
   }
   const detectionResults = []
   for (const textarea of textareas) {
@@ -86,6 +87,7 @@ export function tableUI() {
   const location: StrippedLocation = {
     host: window.location.host,
     pathname: window.location.pathname,
+    search: window.location.search,
   }
   const uiResults = []
   for (const textarea of textareas) {

tests/corpus-view.ts

@@ -97,6 +97,7 @@ function getUrlParts(key: string) {
     hostname: url.hostname,
     href: originalUrl,
     pathname: url.pathname,
+    search: url.search,
   }
 }
 
@@ -562,11 +563,12 @@ function createGitcassoScript(
 ): string {
   const contentScriptSetup = contentScriptCode
     ? // Direct embedding (for HTML corpus)
-    `
+      `
       // Set up mocked location
       window.gitcassoMockLocation = {
         host: '${urlParts.host}',
-        pathname: '${urlParts.pathname}'
+        pathname: '${urlParts.pathname}',
+        search: '${urlParts.search}'
       };
 
       // Set up browser API mocks
@@ -589,7 +591,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())
@@ -603,7 +605,8 @@ function createGitcassoScript(
           );
           window.gitcassoMockLocation = {
             host: '${urlParts.host}',
-            pathname: '${urlParts.pathname}'
+            pathname: '${urlParts.pathname}',
+            search: '${urlParts.search}'
           };
 
           // Execute the patched script with browser API mocks prepended