lablup / lablup/backend.ai-webui

[wayfinder] Agent-authored walkthrough — a pin set that tells the requester what to check on the dev server (map)

Open
#9,681 0 comments 0 reactions 0 assignees View on GitHub
wayfinder:map
Dominant language
TypeScript
Stars
133
Forks
81
Avg merge
1d 11h
Merged PRs (30d)
344

Description

## Destination

When an implementation session ends, a webui-owned `walkthrough` skill mints a **Walkthrough** on the booted dev server — an ordered pin set whose stops say **what changed** and **what to check**, each carrying a GitHub "Files changed" line link — and hands its link to the requester in the final message and in one PR comment; the overlay walks the stops in a guided mode. The map is done when every decision the spec needs is made and written: an ADR (extending ADR 0002) and CONTEXT.md terms in `lablup/backend.ai-webui`, plus a Revision 4 section in `frontend-board/specs/pr-devserver-review.md`. Implementation follows as FRs under Epic FR-3313, outside this map.

## Notes

- **Plan, don't do.** Decision tickets only; prototypes are throwaway and linked from their ticket. Issues and comments in English. Resolve = resolution comment + Done + one line appended here.
- **Driver: Sujin Kim.** This effort revisits spec R3.1's "no `✅ What to check` comment" (driver decision by Jongeun Lee, 2026-09-01; FR-3814 Not Planned because its trigger was pinned to the shared `dw:impl` orchestrator). Spec R3.9 says a later wish is "a new ticket, not a revival" — this map is that new effort. The reversal is flagged to the previous driver through a task ticket, never silently.
- **Charting decisions (grilling, 2026-09-15):**
- Same Pin, same `#bai=v3` set grammar, same read side. New terms: **Mark** (the tinted changed element the docs preview draws instead of a pin glyph), **Navigator** (the bottom-right pill), **Walkthrough** (an ordered pin set the implementing agent leaves on the dev server, saying what changed and what to check) and **Stop** (one pin in it). Pin's CONTEXT.md definition widens from "one reviewer remark" to "one remark tied to one element", whoever authored it. Terms land in CONTEXT.md with the implementation.
- Authored automatically at the end of an implementation run by a **webui-owned skill** (`.claude/skills/walkthrough`, called by this repo's implementation workflow), not by dw/fw shared plugins.
- Anchors are minted **headless with Playwright** against the booted dev server, so every stop is verified to exist. No encoder CLI fallback.
- **Only on-screen changes become stops.** Hooks, tests, i18n, generated files stay in the PR description (no code-only stops).
- Code references are a **structured field** (`code: [{path, line}]`), rendered by the overlay as `pull/N/files#diff-R`; not markdown inside the note.
- The note splits into two capped fields, `changed` and `check` (~280 chars each), both riding in the anchor so the link alone is complete; `check` is phrased as an expected outcome; language = the requester's chat language.
- Each stop carries the **head SHA** it was made for; the overlay warns when the server serves a different commit. Line drift after rebase is accepted.
- Stops behind modals/tabs are allowed: the stop says how to get there, Playwright walks that path; unreachable stops are dropped and listed as "could not pin" in the PR comment.
- Reader UX is a **guided mode**: a walkthrough bar (N/M, prev/next across pages), `changed`/`check` and code links on the card, ✔ per stop in localStorage keyed by walkthrough, ✗ opens the existing compose pre-anchored to the stop (the reviewer-pin flow, no new channel).
- Delivery: the final chat message + **one PR comment** (idempotent marker, edited on re-run; block per stop in the existing block format + one code line, set link once, header "Walkthrough · N stops · ") — separate from the dev-server comment (FR-3784 role split). Teams: nothing.
- Stacks: one walkthrough **per layer**, each opened on the top server; code links use the layer's PR number.
- Order of stops = the requester's on-screen flow, not diff/execution order; `fw:pr-code-tour` is prior art only.
- Deliverable homes: overlay + skill + ADR + CONTEXT.md in webui; spec R4 in frontend-board; claude-mp untouched.
- `pr-ready-gate` does not re-mint: its Copilot-fix round is code-level, and UI-changing re-runs are covered by the implementing session's re-run rule (FR-3945); the gate never touches the walkthrough comment (driver decision, 2026-09-15).
- **Skills to consult:** `dev-server` (advertise.sh, boot record), `prototype`, `grilling`, `domain-modeling`, `adr-writing`. Prior art: ADR 0002, `react/vite-plugins/review-overlay/CONTEXT.md`, `e2e/review-overlay-deeplink.spec.ts` (in-page anchor minting), fw `pr-code-tour`, previous map FR-3782 / spec Revision 3.
- **Baseline facts (2026-09-15):** the overlay has ordering, note editing and a set dock but no external-link field, no code line reference (only the ⚛️ source location), no guided navigation. The note is capped inside the anchor (`NOTE_MAX`); a link costs ~300–500 chars per pin with a soft cap of 30. The CLI only parses. The nightly Amplify static build has no boot record (`pr=0`), so a code link cannot derive the PR number there — the payload must carry it or static builds are out.

## Decisions so far

- [Walkthrough payload — changed / check / code / sha fields in the v3 anchor and the link-length budget](https://lablup.atlassian.net/browse/FR-3942) — **v3 stays, additive**: a Stop adds optional `ch`/`ck` (≤280 each), `code[{path,line,to?}]`, `sha` (40-hex), `pr` (always, so static builds can link); today's codec already accepts it. Worst case 1.3K chars/stop, Korean ≈2× English; GitHub's 65,536-char comment binds before the URL, so **walkthroughs cap at 20 stops**; v4 envelope (3× smaller) stays deferred. Code link = `pull//files#diff-R[-R]`.
- [Minting anchors headless — Playwright on the booted dev server, including stops behind tabs and modals](https://lablup.atlassian.net/browse/FR-3943) — **works**: 4 stops (on load / modal / other page / launcher step) minted in 6–11 s each with the overlay's own in-page modules. Stop spec `{route, via[], find, ch, ck, code`}; `via` is replayed by the skill, rendered as a sentence by the overlay (never auto-clicked), and the overlay re-arms resolution on DOM mutation while a stop is current. Stops resolve **strictly** (landmark must match, `dlg: 1` in dialogs) after a measured false positive; volatile query params (`formValues`) get a codec-owned denylist; mint = box e2e admin + boot-record endpoint with an app-shell preflight; a verification pass drops failures into "could not pin".
- [Guided mode — walkthrough bar, cross-page prev/next, ✔ in localStorage, ✗ opens compose](https://lablup.atlassian.net/browse/FR-3944) — **the docs PR preview's grammar, ported as design**: tinted marks with the dashed orange outline plus an ordinal badge, the bottom-right navigator pill (`pages · changes │ i/N · viewed │ ✎ Copy N comments │ ‹ › ☰`), a popover with type chip, `old → new`, what to check, code links, Viewed and a comment box, `n/p/v/m/c` keys, a page banner that also carries the sha warning; state in localStorage per walkthrough; the walkthrough is a separate read-only set; cross-page `›` is an SPA push. Comments export as reviewer-pin blocks with `re: stop k`. Stops gain `type`, `kind`, `old`, `new`.
- [The walkthrough skill — choosing stops in user-flow order, writing changed / check, and where the impl workflow calls it](https://lablup.atlassian.net/browse/FR-3945) — webui-owned `.claude/skills/walkthrough/`, called by the implementing session as the last workflow step after `dev-server` advertises (dev-server untouched, also on demand); the session writes the stop manifest from the diff (one stop per on-screen-recognizable change, representative call site only, cap 20, ordered by the requester's flow, dialog stops after their opener), `scripts/mint.mjs` mints/verifies/reports; wording rules for `ch`/`ck`/`old`/`new`; preflight failure = one line, per-stop failure = a "could not pin" list with each `ck`; UI-changing re-runs re-mint and edit the comment in place; final message adds one `Walkthrough:` line.
- [The walkthrough PR comment — block per stop with a code line, header with sha, idempotent marker, one per stack layer](https://lablup.atlassian.net/browse/FR-3946) — one comment per PR under a single `` marker: header + **the set link once**, a numbered list (label, kind, `ch`, `old → new`, `check:`, `code:` file-line links), a "Could not pin" list; **no per-stop dev links** (~38K at 20 Korean stops vs 62K) and **no `bai-review` markers or `> 📍` blocks**, so the resolver never reads stops as findings (no claude-mp change); edited in place on re-mint; one per stack layer with a `Served by` line; the PR description gets a `## Walkthrough` section (comment URL + "Not shown" list).

## Not yet specified

- (none — **the map is complete.** Every decision the spec needs is in Decisions so far and the charting decisions in Notes; what remains is [Flag the reversal of spec R3.1's no-what-to-check decision to the previous driver](https://lablup.atlassian.net/browse/FR-3947), and then the hand-off: the ADR extending 0002, the CONTEXT.md terms, the Revision 4 section of `frontend-board/specs/pr-devserver-review.md`, and the implementation FRs under Epic FR-3313 — none of which is a ticket on this map.)

## Out of scope

- Notifying anyone that the run finished (R3.9 stays dropped) and any Teams write.
- Changes to the shared dw/fw plugins in claude-mp — the reason FR-3814 died.
- Code-only stops: changes without an on-screen element stay in the PR description (driver decision, Q7).
- Screenshots or before/after images in a stop (FR-3786 text-only v1 stands).
- Reuse for non-webui repositories.
- The nightly Amplify static build as a walkthrough surface — minting needs a dev server; reading is the same code and may work (no react-grab stack, no `Served by`/sha comparison without a boot record), but it is a side effect, not a target (driver decision, 2026-09-15).
- Screen-reader access of the marks and popover beyond the docs preview's `role=button` + aria-label — an implementation-time concern, as overlay verification was on the previous map.
- A walkthrough line on the My board card — `lablup/frontend-board`'s; an extension note in spec R4 only.
- Merging the docs PR preview overlay (`backend.ai-docs-toolkit` `pr-preview.js`) and the Web UI review overlay into one module — the guided mode ports the docs grammar as design only (FR-3944); a shared implementation is a later effort.

JIRA Issue: FR-3941

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading ADR 0002, react/vite-plugins/review-overlay/CONTEXT.md, and frontend-board/specs/pr-devserver-review.md, then review the closed FR-3942 through FR-3946 decisions. The map is complete when the ADR extension, CONTEXT.md terms, Revision 4 section, and implementation hand-off under Epic FR-3313 are recorded; implementation itself is outside this issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, react, typescript, vite
Domain
documentation, frontend, testing, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.