Implement Global boards add/remove in Projects gear picker (spec 006)
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 7m
- Merged PRs (30d)
- 1
Description
## Summary
Implement the actual **Global boards** add/remove UI in the GitHub Projects gear picker (issue + PR pages), replacing the current static "Coming soon" placeholder. This is spec **006** (`specs/006-outside-org-projects-picker/`), which already has a full spec, plan, data model, UI contract, research doc, and quickstart — read those first.
## Current state (verified by reading the code, not just `tasks.md`)
**`specs/006-outside-org-projects-picker/tasks.md` checkboxes are stale/inaccurate** — several tasks marked `[x]` are only partially done. Verify against actual code, not the checklist, before starting.
**Already implemented and looks correct:**
- `extension/src/lib/project-config.ts` — `showGlobalBoardsSection()` visibility predicate (T002)
- `extension/src/lib/queries.ts` — `MUTATION_DELETE_PROJECT_ITEM` (T003)
- `extension/src/lib/messages.ts` — `GetGlobalBoardsStateMessage`, `DeleteProjectItemMessage`, `GlobalBoardRowState`, `GetGlobalBoardsStateResponse` types (T004)
- `extension/src/background/service-worker.ts` — `getGlobalBoardsState()` / `GET_GLOBAL_BOARDS_STATE` handler (T005) and `DELETE_PROJECT_ITEM` handler (T006), including `resolveGlobalBoardRow()` which already uses `project.title` as the row label (this was flagged as a bug in tasks.md T023 but is already fixed in the current code — double check it still is)
- `extension/src/content/issue-sidebar.ts` — `initGlobalBoardsPicker()` is already called *before* the `isTargetRepo` guard, so the gear picker runs on all pages regardless of target-repo config, per spec (T011 — tasks.md shows this unchecked, but it's done)
**Not implemented — this is the actual remaining work:**
- `extension/src/content/global-boards-picker.ts` only renders a static `"Coming soon…"` message (`buildComingSoonSection()`). It needs real interactive rows per `specs/006-outside-org-projects-picker/contracts/global-boards-picker-ui.md`: a checkbox (disabled while loading) + plain-text label (project title, no `` link), wired to:
- `GET_GLOBAL_BOARDS_STATE` to fetch current membership per configured board
- `ADD_TO_PROJECT` (existing message) when checking an unchecked box
- `DELETE_PROJECT_ITEM` when unchecking a checked box
- error handling that reverts the checkbox to last-known-good state on failure (no silent success, no false "checked" before resolution)
## Known bugs to fix while doing this (spec's own Phase 5b, tasks T020–T024)
From `specs/006-outside-org-projects-picker/tasks.md`:
- **T020**: `findPicker()` needs to correctly detect both the issue picker (`[role="dialog"]`, React/Primer `SelectPanel`) and the PR picker (`` custom element) — see `docs/github-page-layout.md` for the DOM reference.
- **T021**: Issue picker mount point should target `[class*="FilteredActionList-Container"]` (a sibling of the header), not be found by walking up from the filter input.
- **T022**: PR picker mount point should insert the Global boards section *after* `` inside ``, not appended to the dialog/menu root.
- **T023**: Row label should use `project.title` from `QUERY_PROJECT_V2` — appears already fixed server-side in `resolveGlobalBoardRow`, but confirm the picker UI actually renders it once real rows replace the placeholder.
- **T024**: No `` link in the row — plain text label only, per the UI contract (already correctly specified, just needs to land in the real row-rendering code once written).
## Also still open in tasks.md
- **T019**: Full manual pass through `specs/006-outside-org-projects-picker/quickstart.md` (issue + PR, light/dark, in-org suppression, permission-denied path) before considering this done.
- Update `docs/global-boards-picker-status.md` once the placeholder is replaced — it currently documents the "Coming soon" state and should reflect the real behavior.
## Why this matters
Referenced from FOC GH's README/options as a known gap; the FOC sidebar already supports add/edit on configured target repos, but there's currently no way to add/remove an issue or PR to/from a Global board from *outside* those configured repos except via github.com directly. This closes that gap using the native Projects gear picker, matching the UX of GitHub's own Organization/Repository picker sections.
## Use Spec Kit — this repo has it, use it
This repo is set up with [Spec Kit](https://github.com/github/spec-kit) (`specs/` per-feature folders + `.specify/` constitution/templates). Spec 006 already exists in full (`spec.md`, `plan.md`, `data-model.md`, `contracts/`, `research.md`, `quickstart.md`, `tasks.md`) — **do not re-run `/speckit-specify` or `/speckit-plan` from scratch**, the design work is done. What's stale is only `tasks.md`'s checkbox state vs. the real code (see above).
**Note**: Spec Kit itself was just upgraded in this repo from v0.4.0 → v0.16.5 (separate commit, same day as this issue). Two things changed as part of that: the slash commands moved from dot-syntax to dash-syntax (`/speckit.plan` → `/speckit-plan`, etc. — old command files were removed), and a new `/speckit-converge` skill was added upstream that didn't exist when spec 006 was originally written.
**Where to resume, in order:**
1. **`/speckit-converge`** first — this skill's whole purpose is exactly this situation: it assesses the current codebase against a feature's existing spec/plan/tasks and appends any remaining unbuilt work as new tasks to `tasks.md`. Run it against spec 006 to reconcile the stale checkboxes (see "Current state" above) instead of manually editing them.
2. **`/speckit-analyze`** — cross-artifact consistency check across spec/plan/tasks once `tasks.md` is reconciled, to catch anything converge missed.
3. **`/speckit-implement`** to execute the remaining tasks — primarily Phase 5b (T020–T024, the picker detection/mount-point/label/link bugs) and finishing the real checkbox-row UI in `extension/src/content/global-boards-picker.ts` (T007–T010's actual UI wiring, not just the plumbing) — plus T019 (quickstart pass) and the `docs/global-boards-picker-status.md` update.
4. Read `specs/006-outside-org-projects-picker/spec.md`, `plan.md`, `data-model.md`, `contracts/global-boards-picker-ui.md`, `research.md`, `quickstart.md` in full before writing code.
5. Read the current `extension/src/content/global-boards-picker.ts` and the service-worker handlers it should call (`GET_GLOBAL_BOARDS_STATE`, `ADD_TO_PROJECT`, `DELETE_PROJECT_ITEM`) to confirm the exact response shapes before writing UI code.
6. Set up the Chrome dev-testing loop per `AGENT.md` (`chrome.management`/`chrome.developerPrivate.reload` — see that file for a documented gotcha: manifest-level changes need `chrome.developerPrivate.reload()`, not just an enable/disable toggle) and verify against `specs/006-outside-org-projects-picker/quickstart.md` scenarios on real issue/PR pages.
Contributor guide
Research direction
Read the existing spec files under specs/006-outside-org-projects-picker/, especially the UI contract and quickstart, then inspect extension/src/content/global-boards-picker.ts and the service-worker handlers for the stated message shapes. Verify picker detection and mount points against docs/github-page-layout.md. Done means interactive add/remove rows work on issue and PR pages, failures restore the prior state, the quickstart scenarios pass, and docs/global-boards-picker-status.md reflects the behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 65/100