Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
51d6c8a
feat: modernize version control pickers
kpal81xd Jun 10, 2026
02333e2
docs: add version control picker redesign spec
kpal81xd Jun 10, 2026
83eac08
docs: add version control picker redesign implementation plan
kpal81xd Jun 10, 2026
170084a
feat: add version control date and diff summary helpers
kpal81xd Jun 10, 2026
eca70e2
feat: add modern version control picker styles
kpal81xd Jun 10, 2026
3b2e88d
feat: add version control modal dialog component
kpal81xd Jun 10, 2026
2b7b253
feat: add branch switcher dropdown for version control picker
kpal81xd Jun 10, 2026
2d2a50a
feat: add history panel for version control picker
kpal81xd Jun 10, 2026
7c4ce6b
feat: add checkpoint detail panel for version control picker
kpal81xd Jun 10, 2026
444d0d3
feat: add changes panel with pinned checkpoint form
kpal81xd Jun 11, 2026
c748e2d
feat: rebuild version control picker shell with github desktop layout
kpal81xd Jun 11, 2026
10b9235
feat: remove superseded version control side panels and styles
kpal81xd Jun 11, 2026
441d5c6
fix: respect hidden state in version control picker styles
kpal81xd Jun 11, 2026
b2cdfdf
fix: host version control floating surfaces inside the picker overlay
kpal81xd Jun 11, 2026
fd89bfd
fix: use native placeholders and clean dropdown borders in vc picker
kpal81xd Jun 11, 2026
0fb8ff2
fix: inset branch dropdown from the picker frame border
kpal81xd Jun 11, 2026
a79d07b
fix: align branch dropdown spacing and chrome with builds panel style
kpal81xd Jun 11, 2026
ed30ae6
fix: match version control context menu to builds panel menu style
kpal81xd Jun 11, 2026
0a9f880
fix: flatten branch button at rest and drop its tooltip
kpal81xd Jun 11, 2026
7f9ed70
fix: attach branch dropdown flush to the picker corner
kpal81xd Jun 11, 2026
3482d09
fix: stretch branch dropdown children to full panel width
kpal81xd Jun 11, 2026
341de8c
fix: prevent horizontal scrollbar tracks in version control lists
kpal81xd Jun 11, 2026
e5da38d
fix: remove doubled divider above new branch button
kpal81xd Jun 11, 2026
29ff525
fix: stop branch rows growing when hover actions reveal
kpal81xd Jun 11, 2026
7db5d97
fix: open branch row menu beside the dropdown instead of over it
kpal81xd Jun 11, 2026
8ac4582
fix: hold branch row actions open while the context menu is up
kpal81xd Jun 11, 2026
2ab8bb6
fix: live getters for history/changes panels and real change list in …
kpal81xd Jun 11, 2026
fc399b6
fix: builds-style copy icon, tighter diff card header, skeleton loading
kpal81xd Jun 11, 2026
2644386
feat: verbatim hash chips; fold compare-with-previous into open-full-…
kpal81xd Jun 11, 2026
f9d4631
fix: open-full-diff link available before the summary diff resolves
kpal81xd Jun 11, 2026
9f36a02
feat: hash chip on history rows, ellipsize long author names
kpal81xd Jun 11, 2026
26a67f1
fix: single scroll context for long diffs, full-diff link in card header
kpal81xd Jun 11, 2026
c201fbc
perf: cache user thumbnails, reuse computed diffs for open-full-diff
kpal81xd Jun 11, 2026
3085f68
fix: settings group pluralization and title-cased settings doc names
kpal81xd Jun 11, 2026
d1f35aa
style: builds-badge status pills, standard button for open-full-diff
kpal81xd Jun 11, 2026
3b3084b
feat: change preview list in the changes summary card
kpal81xd Jun 11, 2026
59b484a
fix: drop duplicated change list from changes sidebar; sidebar is the…
kpal81xd Jun 11, 2026
9fbc672
fix: checkpoint description fills the changes rail
kpal81xd Jun 11, 2026
7701ba8
feat: github-desktop changes tab — selectable list left, field-level …
kpal81xd Jun 11, 2026
eb11751
fix: improve version control change preview
kpal81xd Jun 11, 2026
b5a4eaa
style: theme version control compare checkboxes
kpal81xd Jun 11, 2026
bd40349
style: align version control compare action
kpal81xd Jun 11, 2026
c26744b
fix: retain version control diffs while open
kpal81xd Jun 11, 2026
4e6f331
docs: version control diff picker design spec
kpal81xd Jun 11, 2026
ddaff21
docs: vc diff picker implementation plan
kpal81xd Jun 11, 2026
12c6ed3
docs: settings sub-panels nest flush under SETTINGS panel in vc diff …
kpal81xd Jun 11, 2026
0adf30c
feat: vc diff picker overlay skeleton (wip)
kpal81xd Jun 11, 2026
5d72df2
feat: value-kind classifier and checkpoint name index for vc diff
kpal81xd Jun 11, 2026
9fa1e7d
fix: handle nested scene entities shape, gate curve sniffing to untyp…
kpal81xd Jun 11, 2026
c098723
feat: read-only pcui widget factory for vc diff values
kpal81xd Jun 11, 2026
01d7109
fix: size detached curve canvases, add widget destroy pass for vc dif…
kpal81xd Jun 11, 2026
a3f9578
docs: fold task 2 review learnings into vc diff plan (field-row class…
kpal81xd Jun 11, 2026
6cc8914
feat: unified inspector-style diff rendering with read-only pcui widgets
kpal81xd Jun 11, 2026
28421c6
fix: destroy breadcrumb trees, identity-keyed sections, settings inst…
kpal81xd Jun 11, 2026
461e5ca
style: version control diff overlay styles, hoist vc badge placeholder
kpal81xd Jun 11, 2026
145b02f
fix: diff overlay flex shell, hidden veil, z-index, sidebar font
kpal81xd Jun 11, 2026
6fef352
docs: fold task 4 scss review fixes into vc diff plan
kpal81xd Jun 11, 2026
513ec46
feat: route version control diffs to the new diff picker
kpal81xd Jun 12, 2026
a69f0ea
fix: persist scene checkbox selection in publish/download picker
kpal81xd Jun 12, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,429 changes: 3,429 additions & 0 deletions docs/superpowers/plans/2026-06-10-version-control-picker-redesign.md

Large diffs are not rendered by default.

1,271 changes: 1,271 additions & 0 deletions docs/superpowers/plans/2026-06-11-vc-diff-picker.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
# Version Control Picker Redesign — Design

**Date:** 2026-06-10
**Status:** Approved (brainstormed with visual mockups; see `.superpowers/brainstorm/` session)

## Context

The version control picker (branches + checkpoints, inside the project picker overlay) predates the modernized builds panel (#2080). A styling pass brought its colors and controls in line, but the structure has the same problems it always had:

- The current branch is a green dot buried in a list; switching takes three hidden steps.
- Every action (merge, close, delete, restore, hard reset, new branch from checkpoint) hides behind tiny kebab menus.
- Creating a checkpoint — the most common action — swaps the entire right pane to a form, hiding history.
- Checkpoints have no detail view; descriptions truncate behind "read more".
- Diffing is a checkbox mode with a bar sliding up from the bottom.
- "Load More" buttons instead of infinite scroll; raw branch GUIDs consume a line per row.

## Goal

Rebuild the picker as a GitHub Desktop-style layout using the builds panel's visual language and interaction patterns.

## Constraints (user-confirmed)

1. Stays a tab inside the project picker frame (builds precedent).
2. Full feature parity: switch, merge, close/re-open, delete, favorite, create branch (incl. from checkpoint), restore, hard reset, two-checkpoint compare, cross-branch compare, browse-other-branch-history-without-switching, VC graph.
3. UI rebuilt with pcui Containers + plain DOM; LegacyList/LegacyListItem retired here.
4. Frontend only — existing editor-api rest endpoints and diff jobs as they are.

## Layout (approved: "Faithful GitHub Desktop")

```
┌ top bar ───────────────────────────────────────────────────────────┐
│ [⎇ CURRENT BRANCH: main ▾] [⌥ Graph] [⇄ Compare] [+ Checkpoint] │
├ sidebar (~270px) ──────────┬ main area ─────────────────────────────┤
│ [Changes · N] [History] │ changes summary / checkpoint detail │
│ tab content │ │
│ (form pinned, Changes tab) │ │
└────────────────────────────┴────────────────────────────────────────┘
```

### Top bar

- **Branch switcher** (left): permanent button showing the current branch; opens the branch panel below it.
- **Graph**: opens the existing VC graph for the viewed branch.
- **Compare**: toggles compare mode (see Flows).
- **+ Checkpoint** (orange primary): activates the Changes tab and focuses the description field.

### Branch panel (switcher dropdown)

- Search input filters loaded branches as you type; a small filter swaps Open / Favorites / Closed (replaces today's separate search row + select).
- Sections: Favorites (starred), then All branches. Infinite scroll for pagination.
- Branch GUIDs removed from rows; available via row kebab → "Copy Branch ID".
- Row hover reveals an explicit **Switch** button (one click checkout).
- Clicking the row body **views** that branch's history without switching: sidebar shows a "Viewing \<branch\> — Return to \<current\>" banner; Changes tab disables.
- Row kebab: Merge into current, Favorite/Unfavorite, Close / Re-open, Delete, Graph, Copy Branch ID. Items follow today's permission/visibility rules (e.g. no close/delete on master or current branch).
- **+ New Branch** entry at the bottom opens the New Branch dialog.

## Sidebar tabs

### Changes tab

- Computes working-state vs latest-checkpoint via the existing `diffCreate` job when the tab opens. Cached per branch; invalidated on checkpoint create/restore/branch switch and messenger checkpoint events; manual ↻ refresh in the main-area summary card.
- Items grouped by type (Entities, Assets, Settings, …) with added/modified/deleted badges; tab label shows total count.
- **Pinned checkpoint form** at the bottom: description textarea + Create Checkpoint (primary). Disabled when empty; Cmd/Ctrl+Enter submits (kept from today).
- Main area: summary card (counts by type, last-checkpoint meta, ↻ Refresh, Open Full Diff → existing diff viewer).
- States: shimmer skeleton while the diff computes (builds-style); "No changes since your last checkpoint" empty state with the form CTA dimmed.

### History tab

- Date-grouped checkpoint rows: avatar, bold first description line, author + relative date. Infinite scroll replaces Load More. Per-branch cache + refresh-on-open semantics kept.
- Selecting a row drives the detail pane. Row kebabs removed — actions live in the detail pane.
- Viewing another branch: same list for that branch beneath the banner.

### Detail pane (History selection)

- Hero card: full untruncated description, avatar, author, absolute date, short checkpoint id with a copy button.
- Action row: Restore, New Branch, Compare with previous, Hard Reset… (danger red). Restore + Hard Reset only on the current branch with write access (today's rules); New Branch + Compare always (write access for New Branch).
- "Changes in this checkpoint" card: checkpoint-vs-previous via `diffCreate`, loaded lazily on selection, cached per checkpoint; counts by type + "Open full diff →".

## Flows

### Compare mode

- Entered via top-bar Compare (or pre-filled by "Compare with previous").
- History rows (plus a "Working state" row at the top of the current branch) get checkboxes, capped at two selections; further rows disable at two.
- Floating bottom bar shows the two slots and a primary **Compare** button; opens the existing diff viewer.
- The viewed branch can be changed mid-mode for cross-branch compares. Changes tab disables during compare. "Exit" in the top bar leaves the mode.

### Dialogs (replace full-pane form swaps)

One parameterized modal component (title, body, optional input, optional type-to-confirm, primary/danger CTA):

- **Merge into \<branch\>** — source → destination summary, note about automatic checkpoint; conflicts continue to the existing merge resolution view.
- **New Branch** — name field; "From: \<checkpoint\> · latest checkpoint of \<branch\>" (pre-filled with a specific checkpoint when launched from the detail pane).
- **Restore** — confirmation with checkpoint summary.
- **Close / Re-open branch** — confirmation.
- **Delete branch** / **Hard Reset** — type-to-confirm (kept from today), red danger CTA, disabled until the text matches.

Esc/Cancel closes with full context intact.

### Progress and errors

- Branch switch, merge, restore, hard reset keep the existing full-screen progress overlays.
- Checkpoint creation is inline: form button enters a spinner state; on success the new checkpoint appears at the top of History and Changes resets to empty.
- Operation failures route to the existing messenger error widget. Dialog field errors (duplicate name, wrong confirm text) render inline red. List-load failures show an inline retry row.

## Architecture

`src/editor/pickers/version-control/`:

| File | Responsibility |
| --- | --- |
| `picker-version-control.ts` | Shell: picker tab registration, top bar, layout, mode state (normal / compare / viewing-branch), wiring |
| `branch-switcher.ts` | Switcher button + dropdown panel |
| `panel-changes.ts` | Changes tab + pinned form |
| `panel-history.ts` | History list (groups, infinite scroll, selection, compare checkboxes) |
| `panel-detail.ts` | Detail pane |
| `dialogs.ts` | Shared parameterized modal + the six dialog configurations |

- **Kept:** `picker-version-control-progress.ts`, `picker-version-control-messenger.ts`, `picker-version-control-overlay-*.ts`, diff viewer / conflict manager.
- **Deleted after migration:** the seven side-panel form files and their `picker-version-control-side-panel.ts` factory, `picker-version-control-checkpoints.ts`, `picker-version-control-diff-checkpoints.ts`, `ui/version-control-side-panel-box.ts`.
- Externally-consumed Caller methods (`picker:versioncontrol:*`, e.g. the checkpoint widget used by other pickers) keep names and signatures.

## Data flow

- Branches: `rest.branches.branchesList` with existing filter params; client-side search; infinite scroll.
- Checkpoints: `rest.branches.branchCheckpoints({ branchId, limit, skip })`; per-branch cache + refresh-on-open.
- Diffs: existing `diffCreate` job for working-vs-latest (Changes tab) and checkpoint-vs-previous (detail card); lazy, cached, messenger-invalidated.
- Realtime: existing messenger events keep lists current. Permissions: existing `permissions:write` / `writeState` gates re-render action buttons.

**Risk:** `diffCreate` cost on large projects. Mitigations: compute only on tab open / row selection, cache, manual refresh. Fallback if too slow: Changes tab renders the form immediately with an explicit "Compute changes" button instead of auto-running.

## Styles

New partial `sass/editor/_editor-version-control-picker.scss` imported from `editor.scss`, reusing builds tokens (6px-radius bordered cards, `rgb(0 0 0 / 8%)` header bars, orange primary CTAs, secondary grey buttons, `#354144` row hover, kebab icon buttons). Old `.picker-version-control` blocks in `_editor-main.scss` and obsolete rules in `sass/common/_version-control.scss` are removed with the code they style.

## Testing

- Extend `test-suite/test/ui/basic.test.ts` (builds-PR pattern): picker opens, tabs switch, branch switcher opens, checkpoint form gates on input, compare mode caps at two selections.
- Mocha unit tests for pure helpers: date grouping, relative dates, diff summarization.
- Manual pass via `npm run develop` before completion.

## Out of scope

- VC graph internals, diff viewer / conflict manager internals (reused as-is).
- Backend/API changes.
- The merge progress overlays' flows (restyled previously, behavior unchanged).
Loading