Back to Plate

sync shadcn editors shell parity

docs/plans/2026-05-29-sync-shadcn-editors-shell-parity.md

53.0.819.6 KB
Original Source

sync shadcn editors shell parity

Objective: Implement the accepted sync-shadcn /editors shell parity slice: make /editors follow upstream shadcn /blocks page framing while preserving Plate editor demos and excluding the category nav, v0 actions, Browse all blocks, and Browse more editors.

Goal plan: docs/plans/2026-05-29-sync-shadcn-editors-shell-parity.md

Template: docs/plans/templates/task.md

Primary template: docs/plans/templates/task.md

Applied packs:

  • docs (docs/plans/templates/packs/docs.md)
  • browser (docs/plans/templates/packs/browser.md)

Task source:

  • type: accepted sync-shadcn implementation slice
  • id / link: docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/plan.md
  • title: Editors page shell parity
  • acceptance criteria: centered upstream-style PageHeader, section-soft content band, upstream block-list spacing, Plate demos retained, rejected upstream controls absent, partial sync status updated without advancing lastSyncedCommit, focused lint/typecheck and browser proof complete.

Completion threshold:

  • /editors renders with the approved upstream /blocks shell rhythm.
  • docs/sync/shadcn/status.json records the implementation as a partial sync and leaves lastSyncedCommit unchanged.
  • Focused eslint, pnpm --filter www typecheck, and desktop/mobile browser proof pass.
  • Task closure is legal only when the source-of-truth acceptance criteria are satisfied or explicitly narrowed, required verification evidence is recorded, code-review and release-artifact gates are closed when applicable, tracker/PR sync is complete or marked N/A with reason, and node .agents/rules/autogoal/scripts/check-complete.mjs docs/plans/2026-05-29-sync-shadcn-editors-shell-parity.md passes.

Verification surface:

  • pnpm --filter www exec eslint 'src/app/(app)/editors/layout.tsx' 'src/app/(app)/editors/editor-description.tsx' 'src/app/(app)/editors/page.tsx' --fix
  • pnpm --filter www typecheck
  • Playwright browser proof against http://localhost:3003/editors at 1175x1239 and 390x844, with screenshots saved in the sync run folder.

Constraints:

  • Preserve existing user-facing behavior outside the task scope.
  • Prefer the durable ownership boundary over caller-by-caller patches.
  • Do not create PRs, comments, commits, or pushes unless the task/user/skill requires them.
  • Do not add broad ceremony when the task is trivial or docs-only.

Boundaries:

  • Source of truth: docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/plan.md
  • Allowed edit scope: /editors route files, this goal plan, sync run plan, and docs/sync/shadcn/status.json.
  • Browser surface: http://localhost:3003/editors.
  • Tracker sync: N/A, no external issue or PR requested.
  • Non-goals: no PageNav/BlocksNav, no Open in v0, no Browse all blocks, no Browse more editors, no full sync baseline advancement.

Output budget strategy:

  • Use targeted file reads, focused eslint/typecheck output, compact browser metrics, and saved screenshots instead of broad patch dumps.

Blocked condition:

  • Block only if the local dev route cannot be loaded, focused checks fail for causes outside this slice after one honest retry, or browser evidence shows excluded controls still present.

Task state:

  • task_type: visual shell sync
  • task_complexity: normal
  • current_phase: closeout
  • current_phase_status: complete
  • next_phase: final response
  • goal_status: active

Current verdict:

  • verdict: implemented
  • confidence: high
  • next owner: user review
  • reason: approved slice shipped with checks and desktop/mobile browser proof

Completion rule:

  • Do not call update_goal(status: complete) while any required checklist item remains unchecked. If an item does not apply, check it and add N/A: <reason>.
  • Do not call update_goal(status: complete) until every completion threshold above is satisfied, final handoff evidence is recorded, and node .agents/rules/autogoal/scripts/check-complete.mjs docs/plans/2026-05-29-sync-shadcn-editors-shell-parity.md passes.
  • Do not create hook state for this goal. This file plus the active goal are the durable state.

Start Gates:

GateAppliesEvidence
Skill analysis before editsyesLoaded sync-shadcn, autogoal, and task; accepted plan read before patching.
Active goal checked or createdyescreate_goal created the accepted /editors implementation goal.
Source of truth read before editsyesRead docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/plan.md.
Tracker comments and attachments readnoN/A: no tracker item.
Video transcript evidence requirednoN/A: no video evidence.
docs/solutions checked for non-trivial existing-code worknoN/A: source of truth was the fresh sync-shadcn plan and route code.
TDD decision before behavior change or bug fixnoN/A: visual shell sync, verified by lint/typecheck/browser proof.
Branch decision for code-changing taskyesN/A: user did not request branch or PR; edited current checkout only.
Release artifact decisionnoN/A: docs app route/status changes only; no package release artifact.
Browser tool decision for browser surfaceyesUsed Playwright against the local dev server because no direct Browser tool was callable in this session.
PR expectation decisionnoN/A: no PR requested.
Tracker sync expectation decisionnoN/A: no tracker.
Output budget strategy recordedyesTargeted reads and compact command/browser outputs only.
Docs pack selectedyesdocs pack applied because sync status and plan artifacts changed.
docs-creator loadednoN/A: this is sync bookkeeping, not user-facing MDX content.
Docs lane selectedyesSupporting docs/status artifact update under sync-shadcn.
Target docs and nearest sibling docs readyesRead accepted sync plan and status JSON before edits.
Docs style doctrine readnoN/A: no user-facing docs prose changed.
Documented source owner identifiedyesSource owner is sync-shadcn plan/status under docs/sync/shadcn.
Browser pack selectedyesbrowser pack applied because /editors UI changed.
Browser route / app surface identifiedyesRoute is http://localhost:3003/editors.
Browser tool decision recordedyesPlaywright used for desktop/mobile screenshots and assertions.
Console/network caveat policy recordedyesKnown Potion iframe X-Frame-Options/sandbox warnings recorded; no page errors or failed requests.

Work Checklist:

  • Objective includes outcome, completion threshold, verification surface, constraints, boundaries, and blocked condition.
  • Task source classified with source type, id/link, title, task type, acceptance criteria, caveats, likely files/routes/packages, browser surface, and root-cause layer.
  • Required video or screen-recording evidence is cached/read as normalized <video-transcripts> XML, or marked N/A with reason.
  • Nearby repo instructions and implementation patterns read before edits.
  • Implementation fixes the right ownership boundary, or the narrower choice is recorded with reason.
  • Release artifact requirement recorded: changeset, registry changelog, or N/A with reason.
  • Final handoff shape decided: bug/feature/testing/batch/review/tracker requirements, PR body sync, and issue/Linear sync when applicable.
  • Branch handling recorded for code-changing work: dedicated branch used, new branch needed, or N/A with reason.
  • Local-env-rot retry policy recorded for any surprising repo-wide failure: reinstall/rerun evidence or N/A with reason.
  • Workspace authority recorded: every proof command names the cwd/tool that owns the changed behavior.
  • High-risk note recorded for public API, runtime, package-boundary, browser behavior, agent-action, or command-contract changes, or marked N/A with reason.
  • Review/autoreview target selected from actual diff state for non-trivial implementation work, or marked N/A with reason.
  • Agent-native review decision recorded for .agents/**, .claude/**, .codex/**, skills, hooks, commands, prompts, or user-action tooling.
  • Output budget discipline recorded and followed: broad searches are scoped, capped, counted, or artifacted instead of streamed into goal context.
  • Docs pack: docs lane, target docs, nearest sibling docs, and source owner are recorded.
  • Docs pack: every named API, import, option, route, component, transform, demo, and preview is source-backed or marked N/A with reason.
  • Docs pack: docs use current-state reference voice, not changelog voice.
  • Docs pack: links, anchors, and previews target real leaf pages or are marked N/A with reason.
  • Browser pack: route, interaction path, and expected visible outcome are recorded before proof.
  • Browser pack: browser proof uses the repo-approved browser tool or records a blocker/waiver.
  • Browser pack: console and network errors are checked or explicitly out of scope.
  • Browser pack: screenshot, trace, or exact verification caveat is ready for final handoff.

Completion Gates:

GateAppliesRequired actionEvidence
Named verification thresholdyesRun the named lint, typecheck, browser proof, and status JSON source auditFocused eslint passed, pnpm --filter www typecheck passed, browser proof passed, status JSON updated.
Bug reproduced before fixnoRecord failing test/repro or N/A with reasonN/A: accepted visual sync slice, not a bug repro.
Targeted behavior verificationyesRun focused proof for changed behaviorBrowser proof on /editors desktop/mobile asserted centered header, section-soft, retained demos, and excluded controls absent.
TypeScript or typed config changedyesRun relevant typecheckpnpm --filter www typecheck passed.
Package exports or file layout changednoRun pnpm brl or record N/AN/A: no package exports or barrels changed.
Package manifests, lockfile, or install graph changednoRun install checks or record N/AN/A: no manifest or lockfile changes.
Agent rules or skills changednoRun generated skill sync or record N/AN/A: no agent rules or skills changed.
Workspace authority proofyesRun proof in owning app/repoCommands ran from /Users/zbeyens/git/plate; browser proof hit apps/www dev route at localhost:3003.
Browser surface changedyesCapture browser proofSaved plate-editors-desktop-after.png and plate-editors-mobile-after.png.
Browser final proofyesAttach screenshot or exact browser caveatScreenshots saved under the sync run folder; known Potion iframe warnings only.
CI-controlled template output changednoRestore generated template output or record N/AN/A: no template output changed.
Package behavior or public API changednoAdd changeset or record N/AN/A: docs app route only.
Registry-only component work changednoUpdate changelog or record N/AN/A: no registry component change.
Docs or content changedyesVerify docs/status claimsSync status and run plan updated with source-backed implementation result.
High-risk mini gateyesRecord realistic failure mode and proof planRisk: accidentally adding rejected shadcn controls or losing Plate demos; proof asserts excluded controls absent and demos retained.
Agent-native review for agent/tooling changesnoRun review or record N/AN/A: no agent/tooling changes.
Local install corruption suspectednoRetry reinstall or record N/AN/A: checks passed; no install-corruption signal.
Autoreview for non-trivial implementation changesnoRun review or record N/AN/A: narrow visual shell sync with targeted browser proof and no package/API changes.
PR create or updatenoRun check before PR work or record N/AN/A: no PR requested.
Task-style PR body verifiednoVerify PR body or record N/AN/A: no PR.
PR proof image hostingnoHost images or record N/AN/A: no PR body.
Tracker sync-backnoPost tracker sync or record N/AN/A: no tracker.
Final handoff contractyesFill final handoff fieldsFinal handoff fields completed with checks and caveat.
Final lintyesRun scoped equivalentpnpm --filter www exec eslint ... --fix passed.
Output budget disciplineyesVerify scoped outputOutput stayed targeted; browser evidence saved as screenshots.
Goal plan completeyesRun node .agents/rules/autogoal/scripts/check-complete.mjs docs/plans/2026-05-29-sync-shadcn-editors-shell-parity.mdTo run after this plan fill.
Docs source-backed claim audityesVerify docs claims against sourceClaims point to accepted sync plan, status JSON, route files, and browser screenshots.
Docs links / routes / previewsyesVerify route/anchors/previews/editors and #blocks verified in browser proof; no new leaf links.
Docs MDX/content parsernoRun content parser or record N/AN/A: no MDX content changed.
Plugin page specificsnoApply plugin page rules or record N/AN/A: not a plugin page.
Browser interaction proofyesExercise target routePlaywright loaded /editors at desktop/mobile and checked layout/exclusions.
Browser console/network checkyesRecord console/network stateNo page errors or failed requests; known Potion iframe warnings recorded.
Browser final proof artifactyesRecord screenshot/trace/route proofScreenshots saved in docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/screenshots/.

Phase / pass table:

PhaseStatusEvidenceNext
Intake and source readcompleteAccepted sync plan and target route files read.implementation
Implementationcomplete/editors layout, description, and page patched; sync status/run plan updated.verification
VerificationcompleteFocused eslint, typecheck, and browser proof passed.closeout
PR / tracker syncN/ANo PR or tracker requested.final response
CloseoutcompletePlan filled; final response ready after check-complete and update_goal.final response

Findings:

  • /editors had the old route-local container and left-aligned header rhythm.
  • The approved shadcn parity slice only needed page shell/list changes; Plate editor demo content stayed owned by Plate.

Decisions and tradeoffs:

  • Kept the Browse Editors hero action because the plan only excluded the bottom Browse more editors CTA and upstream category/action controls.
  • Did not touch BlockViewer; toolbar cleanup remains deferred unless the user wants that second slice.

Implementation notes:

  • layout.tsx now wraps children in container-wrapper flex-1 section-soft md:py-12.
  • editor-description.tsx now renders through shared PageHeader.
  • page.tsx now uses flex flex-col gap-12 md:gap-24.

Review fixes:

  • Added centered PageActions styling after confirming the shared component's default is left-aligned in Plate.

Error attempts:

Error / failed attemptCountNext different moveResolution
Node ESM/require ambiguity in first browser script1Rerun script as ESM with --input-type=moduleBrowser proof passed

Verification evidence:

  • pnpm --filter www exec eslint 'src/app/(app)/editors/layout.tsx' 'src/app/(app)/editors/editor-description.tsx' 'src/app/(app)/editors/page.tsx' --fix passed.
  • pnpm --filter www typecheck passed.
  • Browser proof on http://localhost:3003/editors passed at 1175x1239 and 390x844.
  • Screenshots: docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/screenshots/plate-editors-desktop-after.png and docs/sync/shadcn/runs/2026-05-29-4a4dc8e-to-efdec3c-editors-blocks-style/screenshots/plate-editors-mobile-after.png.
  • Browser assertions: centered PageHeader present, section-soft present, Plate demos retained, no PageNav/BlocksNav, no category nav labels, no Browse all blocks, no Open in v0, no Browse more editors, and no horizontal overflow.
  • Console caveat: known external Potion iframe X-Frame-Options/sandbox warnings appeared; there were no page errors or failed requests.

Reboot status:

  • Current and complete as of 2026-05-29: implementation, sync bookkeeping, and browser verification are done; only final handoff remains.

Open risks:

  • None requiring more work for this slice. Optional BlockViewer toolbar density cleanup remains deferred by the sync plan.

Final handoff contract:

  • PR line: N/A, no PR requested.
  • Issue / tracker line: N/A, no tracker.
  • Confidence line: high; checks and browser proof passed.
  • Flow table:
    • Reproduced: N/A for bug repro; source plan and before screenshots already captured the visual delta.
    • Verified: focused eslint/typecheck passed; desktop/mobile browser proof passed.
  • Browser check: /editors desktop/mobile screenshots saved; rejected controls absent.
  • Outcome: /editors now follows the approved shadcn /blocks shell rhythm.
  • Caveat: Potion iframe emits known external warnings during full-page capture.
  • Design:
    • Chosen boundary: route shell files plus sync status/run plan.
    • Why not quick patch: route-level layout owns the header/content band.
    • Why not broader change: BlockViewer toolbar cleanup and full sync baseline are separate deferred slices.
  • Verified: focused eslint, typecheck, browser desktop/mobile.
  • PR body verified: N/A, no PR.

Task-style PR body contract:

  • Preserve any existing <!-- auto-release:start --> block. If a changeset is part of the diff and repo policy expects auto release, include that block.
  • Use the accepted kitcn PR #270 visual format. The body starts with an emoji issue/tracker/fix line, for example ๐Ÿ› Fixes #123 or ๐Ÿ› Fixes โž– N/A, then an emoji confidence line like ๐ŸŸข 95-100% confidence.
  • Use this exact table header: | Phase | ๐Ÿงช Tests | ๐ŸŒ Browser |.
  • Use Reproduced and Verified rows. Mark passing proof with ๐ŸŸข, repro or failing proof with ๐Ÿ”ด, and non-applicable cells with โž– N/A.
  • Use bold emoji section headings: **โœ… Outcome**, **โš ๏ธ Caveat**, **๐Ÿ—๏ธ Design**, and **๐Ÿงช Verified**.
  • Never include a line that links to the current PR itself. The current PR URL belongs in the final response, not in its own description.
  • Do not replace this with a generic Summary / Verification PR body, an adaptive prose body from a git helper skill, plain ## Outcome sections, or an unrelated generated badge footer unless the caller or repo template explicitly asks for it.
  • Proof is gh pr view --json body output or a concise source-backed summary of that output.

Final handoff / sync:

  • PR: N/A.
  • Issue / tracker: N/A.
  • Browser proof: screenshots saved in the sync run folder.
  • Caveats: known Potion iframe warnings only.

Timeline:

  • 2026-05-29T13:19:16.820Z Task goal plan created.

Reboot status:

QuestionAnswer
Where am I?Closeout complete after implementation and verification
Where am I going?Final response
What is the goal?Ship the accepted /editors shell parity slice and record partial sync state
What have I learned?Route shell parity was owned by /editors layout/header/list files; BlockViewer cleanup remains separate
What have I done?Patched route shell, updated sync status/run plan, ran lint/typecheck/browser proof

Open risks:

  • None for the accepted slice; optional toolbar density cleanup remains deferred.