feat(demos): support writing previews

[harlan-zw]

🔗 Linked issue

❓ Type of change

• 📖 Documentation
• 🐞 Bug fix
• 👌 Enhancement
• ✨ New feature
• 🧹 Chore
• ⚠️ Breaking change

📚 Description

Writing Skills need readable document output on the existing demos page.
Readers select a Markdown file. One Diff toggle switches between the updated document and its highlighted Markdown comparison.
Each of six known writing Skills has a navigation row with shared, labelled fixtures before evaluations.
Each Skill uses /skills/demos/<owner>/<repo>/<name> for its blog, README, and PR documents.

Diff shows source line numbers, additions, and removals with Markdown and fenced-code highlighting.
Recording data keeps the original, a rewrite without a Skill, and the Skill output for later evaluations.
Fixtures stay separate from recorded results and answer noindex.
Writing documents share the Skill page's Markdown renderer and existing rangi highlighting infrastructure.
README and PR documents use GitHub-style typography.
Rendered code and Markdown source share its GitHub light and dark colours.
The Brundlefly candidate is im-not-a-fly.
The reader strips raw HTML, images, and unsafe links.
Short documents fit their content. Long documents scroll inside the reader.
Writing previews and media demos share the same Skill, run, and share footer.

🤖 AI disclosure: Harlan Agent Kit modified this description. My AI open-source policy.

[harlan-zw]

Agent verification for this UI change:

Exercised all nine document versions in the browser. The Markdown source matched each selected document.
Checked keyboard selection, the Markdown disclosure, light and dark modes, and 375px and 768px layouts.
The existing good-css live demo loaded, and navigation returned to the writing preview.
SSR included the default document and example disclosure. The preview answered noindex.

Desktop	Phone

[harlan-github-agent]

🤖 MERGED

Harlan Agent Kit posted this automated review. It is not Harlan's personal review or approval. AI open source policy. Last updated: 2026-10-09 07:41 UTC.

GitHub merged this pull request.

• Logged (30/100): Every screenshot proving the writing reader's visual claims is unretrievable, so the UI assertions in the description and comments rest on unverified prose. View code Optional follow-up: Re-attach accessible image evidence (or record a fresh browser check) before merge so the visual claims — 375px overflow, dark-mode contrast, diff line alignment — are verifiable.
  • Ask an agent to verify and fix this finding
• Logged (25/100): The shipped reader shows only the updated document; the promised Original choice (and any surface for the no-Skill baseline) is absent from the head implementation and from COPY.md's shipped-strings entry, leaving the description overstatin View code Optional follow-up: Either add the Original/Updated selector the description promises or correct the description and COPY.md to state the updated-only view and that baseline is kept for later evaluations only.
  • Ask an agent to verify and fix this finding
• Logged (30/100): Case-differing recorded writing demos would be shadowed by fixture examples on their own demo pages and duplicated in the rail, because candidate exclusion is case-sensitive while matching is case-insensitive. View code Optional follow-up: Make the candidate exclusion case-insensitive (compare lowercased demoKey) so any recorded key, whatever its case, removes the fixture row.
  • Ask an agent to verify and fix this finding
• Logged (20/100): The registry layer now compiles only against the root app, so it can no longer be built or reused independently and future layer extraction gets harder. View code Optional follow-up: Move _DemoWriting.vue (or a thin shared wrapper) into a location both surfaces import, e.g. app/components with an explicit shared contract or #shared-adjacent component dir.
  • Ask an agent to verify and fix this finding

0e5095f9-e40d-453c-a7c4-4664fc4ffd9e

Selected findings run after merge and open separate pull requests.

[harlan-zw]

Agent verification of the writing preview:

All six writing Skill rows select their own URL and active state.
README code fences and exact Markdown source use the existing rangi renderer.
README and PR previews use GitHub-style typography.
The PR preview has no page overflow at 375px.
These are shared UI fixtures. No Skills were run.

[harlan-github-agent]

Harlan Agent Kit posted this automated review. AI open source policy.

Automated Review: BLOCKED.

Read the Review results

[harlan-zw]

Agent verification of file navigation and writing diffs:

The file buttons use the existing Markdown file icons.
All nine file and view combinations work in the browser.
Diff compares original and updated Markdown with line numbers and highlighted fenced code.
At 375px, long diff lines scroll inside the viewer. The page has no horizontal overflow.
The Brundlefly row selects /im-not-a-fly.
Fixtures remain labelled. No Skills were run.

[harlan-zw]

Agent verification of full writing URLs and the shared renderer:

All six writing candidate URLs answer 200 with their own canonical URL and the example-data disclosure.
Unknown demo URLs answer 404.
The Brundlefly page uses /skills/demos/harlan-zw/brundlefly/im-not-a-fly.
Diff toggles off to the selected Original or Updated document.
The Skill renderer and writing renderer now share GFM, table cells, and rangi code rendering.
The existing Skill source rendering tests pass.

[harlan-github-agent]

Harlan Agent Kit posted this automated review. AI open source policy.

Automated Review: READY.

Read the Review results

[harlan-zw]

Agent verification of the simplified writing preview:

File buttons and one icon-labelled Diff toggle replace the version controls.
The PR preview fits its content at 291px instead of the previous fixed 680px.
Writing previews and media demos use the same footer component.
The run prompt includes the original Markdown fixtures. The share action uses the full demo URL.
The existing good-css demo still shows its iframe and shared footer.
The phone view has no page overflow and keeps the share action visible.

[harlan-github-agent]

Harlan Agent Kit posted this automated review. AI open source policy.

Automated Review: READY.

Read the Review results