---
id: TASK-72
title: 'Standardize canvas header to match renderShell (MI bar, welcome, Try Demo)'
status: Done
assignee: []
created_date: '2026-02-28 01:10'
labels:
  - fix
  - canvas
  - header
  - ux
dependencies: []
references:
  - website/canvas.html
  - server/shell.ts
  - website/shell.ts
priority: high
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Canvas.html was served as a static SPA fallback and had a hand-crafted header missing several features that renderShell() provides to all other rApp pages. Fixed to achieve full parity:

1. **RStackMi registration**: `<rstack-mi>` tag was in the HTML but never registered as a custom element — MI bar was dead on canvas. Added import + define().
2. **"Try Demo" button**: Added to header right section, with visibility logic (hidden on demo space, shown on bare domain).
3. **Embedded iframe detection**: Added `rspace-embedded` CSS + early script to hide shell chrome when canvas is loaded inside an iframe (e.g. folk-rapp).
4. **Welcome overlay**: Full popup for first-time demo visitors with "Create a Space" + "Explore Demo" actions.
5. **Auto-space resolution**: Logged-in users on demo space get redirected to their personal space via `/api/spaces/auto-provision`.
6. **auth-change listener**: Reloads space switcher dropdown when user signs in/out.
7. **`window.__rspaceNavUrl` global**: Exposed nav URL helper globally, matching shell.js behavior.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 RStackMi imported and defined — MI bar functional on canvas
- [ ] #2 Try Demo button in canvas header with correct visibility logic
- [ ] #3 rspace-embedded iframe detection hides chrome when embedded
- [ ] #4 Welcome overlay shows for first-time demo visitors
- [ ] #5 Auto-space resolution redirects logged-in demo users to personal space
- [ ] #6 auth-change listener reloads space switcher on sign in/out
- [ ] #7 bun run build passes with zero errors
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Canvas.html now has full header parity with renderShell(). Added RStackMi registration (MI bar was dead), Try Demo button, iframe detection, welcome overlay, auto-space resolution, and auth-change listener. 1 file changed, +165 lines. Commit: 6c22559, merged dev→main as 6f80f7a.
<!-- SECTION:FINAL_SUMMARY:END -->