Project Docs Components
Reusable components and MDX patterns used inside bearlabs.net project documentation and review workflows.
Project Banner & Footer
Planning state
Bearlabs.netWalkingweekend.com
13:0014:00
1h planned2026-06-271h remaining
Last updated: 2026-06-27T13:00:00.000Z
Completed state with music cover
Benben.im
13:0016:00
3h planned2026-06-263h actualcompleted 16:00
Last updated: 2026-06-26T16:00:00.000ZProject Header
Status + project tags
Bearlabs.netHygge.im
Project Timeline
Planning (live progress)
13:0014:00
1h planned2026-06-271h remaining
Completed
13:0016:00
3h planned2026-06-263h actualcompleted 16:00
Review Card
With resolved comments
#1Scope starts with benben.imResolved
#2ASR belongs in speaking submoduleResolved
#3Whisper API cost vs local fallbackResolved
SSisyphus#1suggestionJun 28
Build and verify the feature in benben.im first. Only port to hygge.im after the shared submodule is stable.
SSisyphus#3concernJun 28
OpenAI Whisper API is accurate but costs per minute. Include Web Speech API as a free fallback for development and simple queries.
Review replies with avatars
#1Scope starts with benben.im
Benben
Agreed. I'll implement and test the ASR flow end-to-end in benben.im first, then port the stable submodule to hygge.im.#2ASR belongs in speaking submodule
Benben
Yes — speaking already owns TTS, audio messages, and recording. Adding ASR there keeps all voice I/O in one place.Open questions with replies
#1One combined page vs three separate pages?
Stanley
Decision: use one combined page at /ui/project-docs. Split later if the gallery grows.#2Should we show TOC navigation on this page or a separate one?
Stanley
Keep them separate. TOC navigation has its own page at /ui/toc-navigation.Issue Card
Issue list
#1Proxy route needs auth + size capInvestigating
#2Web Speech API unsupported in FirefoxKnown Issue
Issue Followup
Resolved issue with files changed
A1
Wireframes
Modal dialog wireframe
New Story✕
Story Name
The Robot Who Could Sing
Text
Once upon a time...
Cancel
Create
Task Boards
Phase grid
Phase 1
☐ Create ASR types
☐ Implement recorder hook
Phase 2
☐ Backend proxy route
☐ Whisper forwarding
Phase 3
☐ Chat integration
☐ End-to-end test
Key Context
Numbered context items
1
Source is derived from theme: Light mode = benben, dark mode = hygge.
2
No backend change required: The fix is entirely in client state management.