Review: Playground: note detail page prototype

review-422-2026-03-26 Review

review needs-refinement

Project

Template Completeness

[x] Type — Feature
[x] Lineage — Standalone, feeds into pal-e-app after phone approval
[x] Repo — forgejo_admin/pal-e-docs-playground
[x] User Story — As a reader browsing pal-e-docs...
[x] Context — Design vision, navigation paradigms, note_type rendering
[x] File Targets — index.html, app.css (greenfield creates)
[x] Acceptance Criteria — 9 items covering responsive, block types, sidebars, tokens
[x] Test Expectations — DevTools mobile/desktop, Mermaid, http.server command
[x] Constraints — convention-frontend-css, pure HTML/CSS/JS, mobile-first
[x] Checklist — PR, phone approval, no unrelated changes
[x] Related — design vision, SOP, board, parent phase

All required sections present. Template is complete.

Traceability

[x] story:reader-browse label — reader browsing and navigating the knowledge base
[x] arch:frontend label — frontend component
[x] Forgejo issue — forgejo_admin/pal-e-docs-playground#1, open

Full traceability triangle intact.

File Targets

[x] index.html — to be created in greenfield repo (only README.md exists). Valid.
[x] app.css — to be created in greenfield repo. Valid.
[ ] Design token source reference pal-e-playground/pal-e-app/app.css — ISSUE: File does not exist. The pal-e-playground repo has no CSS files. The actual design tokens are documented in convention-frontend-css (pal-e-docs note) and the production implementation lives at pal-e-app/src/app.css (pal-e-app repo). An agent following this reference path would hit a dead end.

Repo Placement

OK. Issue filed on forgejo_admin/pal-e-docs-playground, work happens in same repo. Follows the {project}-playground naming convention. Repo exists on Forgejo, is non-empty (has README.md), and the deployment hookup is already wired (Forgejo issue pal-e-deployments#52 is closed — playground.tail5b443a.ts.net/pal-e-docs/ is live).

Dependencies

Deployment hookup (board #421, pal-e-deployments#52) — prerequisite, already done (Forgejo issue closed). Note: board item #421 still shows in_progress despite the issue being closed — minor board sync gap, not a blocker.
Phase F11 (board #93) — parent phase, in_progress. This ticket is scoped work under F11. Consistent.
convention-frontend-css — referenced in Constraints. Note exists and is active. Tokens documented there match what the issue describes.
No blocking dependencies from other in_progress items.

Acceptance Criteria

8 of 9 criteria are verifiable by an agent or by visual inspection:

"Page opens directly in browser" — verifiable via http.server
"All 6 block types render" — verifiable by inspecting DOM
"Mermaid diagram renders via CDN" — verifiable (SVG present, not raw text)
"Responsive at 390px and 1200px+" — verifiable via Playwright viewport
"Zero hardcoded hex" — verifiable via grep on the CSS file
"Left sidebar shows note tree" — verifiable by DOM inspection
"Right sidebar shows TOC + backlinks" — verifiable by DOM inspection
"Type badge, status, tags, recency in metadata bar" — verifiable by DOM inspection
"Lucas approves on phone" — human gate, appropriate for playground workflow

Acceptance criteria are well-structured and testable.

Blast Radius

Minimal. This is a greenfield prototype in an isolated playground repo. No production code is modified. However, the design decisions made here become the visual spec for pal-e-app note rendering (the playground-first pipeline). Downstream impact is intentional and gated by phone approval.

Recommendation

One fix needed before READY:

Fix the design token source reference. The File Targets section references pal-e-playground/pal-e-app/app.css as the design token source, but this file does not exist. Update to reference convention-frontend-css (the pal-e-docs note that documents all tokens) and optionally pal-e-app/src/app.css (the production implementation). Without this fix, an agent would not know where to find the design tokens.