feat: add the streaming demo app (BON-5)

[hunterbecton]

A live demo of the streaming kit: apps/stream, a Hono app whose view-source is the wire protocol verbatim. Three throttled regions (profile 500ms, stats 1500ms measured, feed 3000ms) complete out of DOM order; ?speed= scales the latencies and ?fail=<region> exercises the error chunk. The element module and stylesheets are served straight from the workspace build, and the server file runs under Node's native TypeScript, with no bundler, so nothing transforms the streamed output.

Run it with vp run stream, then watch the bytes with curl --no-buffer localhost:3000.

Manual validation

Checked with headless Chromium (Playwright, from the local cache) and curl; Firefox wasn't exercised, only Chromium's behavior is confirmed here.

• curl --no-buffer localhost:3000/ returns the shell at ~36ms (2141 bytes), then three chunks with real gaps between them: profile ~533ms, stats ~1534ms, feed last at ~3032ms, matching its 3000ms latency.
• Cold load at /: all three boundaries show aria-busy and CSS skeleton bars at 200ms, then final content with no aria-busy by 4s.
• The element module tag needed async (f247e27) to engage mid-stream. Without it, a streaming response never closes its tags until the stream ends, so <script type="module"> waits for the parse to finish and customElements.get('bones-boundary') stayed undefined until the feed chunk landed at ~3040ms. With async, the element defines at ~100ms, right after the module fetch.
• With that fix, the stats boundary's shadow root holds 3 [part~="bone"] measured bars from ~100ms while busy; they clear in the same 40ms poll as aria-busy going away, at ~1553ms, against a curl chunk arrival of ~1534ms. Profile and feed clear at ~537ms and ~3059ms, tracking their own chunk arrivals.
• /?speed=0: polled aria-busy every 50ms for the first second (19 samples), it never read true on any boundary, content was present on the first sample.
• /?fail=stats: by ~3.5s the stats boundary carries data-bones-error and shows "stats failed: the stats endpoint failed" in a red-outlined box; profile and feed stream their real content normally alongside it.
• Reduced motion (reducedMotion: 'reduce'): all three boundaries resolve to full content, no crossfade.
• Console errors: zero across every run, cold load, speed=0, fail=stats, reduced motion, and the pre/post-fix timing checks.

Part of BON-5 (PR 3 of 3).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a streaming demo page with progressively loaded profile, statistics, and feed sections.
  • Added configurable loading speed and simulated region failures, with inline fallback messaging.
  • Added secure serving of the demo’s JavaScript and CSS assets.
  • Added a development command to launch the streaming demo locally.

• Tests

  • Added coverage for streaming order, content, error handling, asset delivery, and invalid asset paths.

• Chores

  • Added automated type-check and test jobs for the streaming demo.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0a2995b4-7399-4e4f-a561-309ab8b319be

📥 Commits

Reviewing files that changed from the base of the PR and between 9361a44 and 34e8c04.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

• .github/workflows/ci.yml
• apps/stream/package.json
• apps/stream/src/app.ts
• apps/stream/src/page.ts
• apps/stream/src/server.ts
• apps/stream/test/app.test.ts
• apps/stream/tsconfig.json
• apps/stream/vite.config.ts
• package.json

Limit details: You’ve used the included review currently available.

---

📝 Walkthrough

Walkthrough

Adds a bones-stream workspace with a Hono server, streamed HTML regions, configurable delays and failures, secure asset routes, integration tests, and dedicated CI type-check and test jobs.

Changes

Streaming demo

Layer / File(s)	Summary
Package and test setup apps/stream/package.json, apps/stream/tsconfig.json, apps/stream/vite.config.ts, package.json	Defines package scripts, dependencies, strict TypeScript settings, Vite test discovery, and the root stream development command.
Streaming page and HTTP routes apps/stream/src/page.ts, apps/stream/src/app.ts, apps/stream/src/server.ts	Implements delayed region loading, streamed HTML boundaries, failure rendering, approved asset serving, and the port 3000 server.
Integration validation and CI apps/stream/test/app.test.ts, .github/workflows/ci.yml	Tests streamed content, failures, assets, and rejected paths. CI builds Bones before stream type checks and tests.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 34e8c

This adds a localized streaming demo with documented browser and curl validation; no actionable merge-blocking risk remains beyond normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant Client
  participant HonoApp
  participant RegionLoader
  Client->>HonoApp: GET /
  HonoApp->>RegionLoader: load(region, speed, fail)
  RegionLoader-->>HonoApp: Region content or error
  HonoApp-->>Client: Streamed HTML chunks

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 5 files. (4 skipped: 4 unsupported.)	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary change: adding the streaming demo app.
Description check	✅ Passed	The description explains the implementation, purpose, testing method, observed results, and verification commands, covering the template requirements.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hunter/bon-5-streaming-demo

Usage-based review receipt

• Mode: Continue automatically
• Reviewed files: 9
• Charged: $2.25
• View usage details

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. Track spend and usage in your billing settings.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}