From b0eebc4cbcb89c3103990f9597fc25e3ab7640d6 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Fri, 27 Feb 2026 18:13:40 -0800 Subject: [PATCH] chore: add backlog task files Co-Authored-By: Claude Opus 4.6 --- ...-toolbar-whiteboard-tools-zoom-dropdown.md | 35 ++++++++ ...MI-bar-across-all-rspace.online-headers.md | 34 ++++++++ ...place-double-click-edit-SVG-persistence.md | 85 +++++++++++++++++++ ...tch-renderShell-MI-bar-welcome-Try-Demo.md | 49 +++++++++++ ...dardized-header-across-all-rSpace-pages.md | 55 ++++++++++++ ...anding-pages-for-rspace.online-moduleId.md | 23 +++++ ...ag-collision-fix-Unicode-escape-cleanup.md | 23 +++++ ...nline-rStack.online-to-match-rApp-theme.md | 23 +++++ 8 files changed, 327 insertions(+) create mode 100644 backlog/tasks/task-66 - Vertical-canvas-toolbar-whiteboard-tools-zoom-dropdown.md create mode 100644 backlog/tasks/task-67 - Context-aware-MI-bar-across-all-rspace.online-headers.md create mode 100644 backlog/tasks/task-68 - Canvas-toolbar-popout-click-to-place-double-click-edit-SVG-persistence.md create mode 100644 backlog/tasks/task-72 - Standardize-canvas-header-to-match-renderShell-MI-bar-welcome-Try-Demo.md create mode 100644 backlog/tasks/task-73 - Logo-standardized-header-across-all-rSpace-pages.md create mode 100644 backlog/tasks/task-high.2 - Landing-pages-for-rspace.online-moduleId.md create mode 100644 backlog/tasks/task-high.3 - Zoom-aware-drag-collision-fix-Unicode-escape-cleanup.md create mode 100644 backlog/tasks/task-medium.1 - Restyle-rSpace.online-rStack.online-to-match-rApp-theme.md diff --git a/backlog/tasks/task-66 - Vertical-canvas-toolbar-whiteboard-tools-zoom-dropdown.md b/backlog/tasks/task-66 - Vertical-canvas-toolbar-whiteboard-tools-zoom-dropdown.md new file mode 100644 index 0000000..27fa889 --- /dev/null +++ b/backlog/tasks/task-66 - Vertical-canvas-toolbar-whiteboard-tools-zoom-dropdown.md @@ -0,0 +1,35 @@ +--- +id: TASK-66 +title: Vertical canvas toolbar + whiteboard tools + zoom dropdown +status: Done +assignee: [] +created_date: '2026-02-27 22:46' +labels: + - canvas + - ux + - toolbar +dependencies: [] +priority: medium +--- + +## Description + + +Convert the canvas toolbar from horizontal (top center) to vertical (left side). Add whiteboard drawing tools dropdown and nest zoom controls under a dropdown. Includes collapsible toggle. + + +## Acceptance Criteria + +- [ ] #1 Toolbar is vertical on the left side with dropdowns opening to the right +- [ ] #2 Whiteboard 'Draw' dropdown with pencil, sticky note, rectangle, circle, line, eraser +- [ ] #3 Zoom controls nested under a 'Zoom' dropdown group +- [ ] #4 Toolbar collapsible via subtle toggle pill at bottom +- [ ] #5 Mobile responsive layout preserved +- [ ] #6 SVG overlay for whiteboard drawing on canvas + + +## Final Summary + + +Implemented in commits f8bd09d, 683df43, merged to main as 76f7da8.\n\nChanges to website/canvas.html:\n- #toolbar CSS: flex-direction column, fixed left:12px, scrollable, dropdowns open right\n- New 'Draw' toolbar group: pencil (freehand SVG path), sticky note (yellow markdown shape), rectangle, circle, line, eraser (click SVG elements to delete)\n- SVG overlay inside canvas-content for whiteboard strokes\n- Zoom in/out/reset nested under 'Zoom' dropdown group\n- Collapse toggle moved to bottom as subtle '···' pill, collapses to '▶'\n- Separators now horizontal (full width, 1px height)\n- Mobile styles updated for vertical layout\n- SHAPE_ICONS updated with creative tool entries + diff --git a/backlog/tasks/task-67 - Context-aware-MI-bar-across-all-rspace.online-headers.md b/backlog/tasks/task-67 - Context-aware-MI-bar-across-all-rspace.online-headers.md new file mode 100644 index 0000000..54ad0ec --- /dev/null +++ b/backlog/tasks/task-67 - Context-aware-MI-bar-across-all-rspace.online-headers.md @@ -0,0 +1,34 @@ +--- +id: TASK-67 +title: Context-aware MI bar across all rspace.online headers +status: Done +assignee: [] +created_date: '2026-02-27 22:46' +labels: + - ai + - ux + - mi + - header +dependencies: [] +priority: medium +--- + +## Description + + +Enhance rstack-mi component to gather page context (open shapes, active tab, page title) and send to /api/mi/ask for context-aware responses. Update server system prompt to use extended context. MI bar already present in header of all pages via server/shell.ts. + + +## Acceptance Criteria + +- [ ] #1 rstack-mi gathers open canvas shapes, active tab, page title as context +- [ ] #2 Server /api/mi/ask accepts and uses context object in system prompt +- [ ] #3 MI identifies as 'mycelial intelligence' and references open content +- [ ] #4 Bar present in all pages: canvas, index, admin, create-space, server shell + + +## Final Summary + + +Implemented in commit f8bd09d, merged to main as 59f2be3.\n\nshared/components/rstack-mi.ts:\n- Added #gatherContext() method collecting space, module, open shapes (type+title+snippet), active tab, page title\n- Context sent with every /api/mi/ask request\n- Updated placeholder and welcome text\n\nserver/index.ts:\n- /api/mi/ask accepts context object\n- Extended system prompt includes open shapes, active tab, page title\n- Updated MI identity to 'mi (mycelial intelligence)' with guidance about connecting knowledge + diff --git a/backlog/tasks/task-68 - Canvas-toolbar-popout-click-to-place-double-click-edit-SVG-persistence.md b/backlog/tasks/task-68 - Canvas-toolbar-popout-click-to-place-double-click-edit-SVG-persistence.md new file mode 100644 index 0000000..3e0e9ea --- /dev/null +++ b/backlog/tasks/task-68 - Canvas-toolbar-popout-click-to-place-double-click-edit-SVG-persistence.md @@ -0,0 +1,85 @@ +--- +id: TASK-68 +title: 'Canvas toolbar popout, click-to-place, double-click edit, SVG persistence' +status: Done +assignee: [] +created_date: '2026-02-28 00:26' +updated_date: '2026-02-28 00:26' +labels: + - canvas + - ux + - toolbar +dependencies: [] +priority: medium +--- + +## Description + + +Canvas UX improvements: toolbar popout panel replaces inline dropdowns, click-to-place shapes at cursor position, double-click to edit shapes, whiteboard SVG drawing persistence via Automerge, + button opens rApps, dblclick canvas for pencil mode. + + +## Acceptance Criteria + +- [x] #1 Toolbar group click opens popout panel to the right (not inline dropdown) +- [x] #2 Click toolbar tool → cursor changes to crosshair → click canvas → shape at click position +- [x] #3 Shape avoids overlapping existing shapes (spiral search from click point) +- [x] #4 Double-click shape → edit mode → can type/interact with content +- [x] #5 Double-click empty canvas → pencil draw mode activates +- [x] #6 Draw with pencil → reload → drawings persist (wb-svg in Automerge) +- [x] #7 Click + button → rApp list opens in popout panel +- [x] #8 Reload page → all shapes retain x,y positions +- [x] #9 bunx tsc --noEmit passes + + +## Final Summary + + +## Changes + +### Toolbar Popout Panel (canvas.html CSS/HTML/JS) +- Added `#toolbar-panel` with header + body positioned right of `#toolbar` +- Group toggles populate the popout panel via `openToolbarPanel()`/`closeToolbarPanel()` +- Inline `.toolbar-dropdown` hidden with `display: none !important` when group is open +- Mobile: panel slides up from bottom as a sheet + +### Click-to-Place (canvas.html) +- `pendingTool` state with `setPendingTool()`/`clearPendingTool()` +- All toolbar buttons set pending tool instead of calling `newShape()` directly +- Canvas `pointerdown` checks `pendingTool`, converts screen→canvas coords, places shape +- Ghost outline (dashed teal) follows cursor while tool is pending; ESC cancels +- `findFreePosition(width, height, preferX?, preferY?)` refactored to accept anchor point + +### Double-Click Edit Mode (folk-shape.ts) +- `enterEditMode()`/`exitEditMode()` with `:state(editing)` internal state +- CSS: editing state enables `pointer-events: auto` on `.slot-container`, teal outline +- `dblclick` listener on shape calls `enterEditMode()`, focuses first focusable child +- Canvas background click calls `exitEditMode()` on all shapes + +### Click-to-Edit Markdown (folk-markdown.ts) +- Preview area click enters edit mode +- `edit-enter`/`edit-exit` custom events sync with parent shape editing state +- Refactored into `enterMarkdownEdit()`/`exitMarkdownEdit()` helpers + +### + Button Opens rApps (canvas.html) +- `#quick-add` button at top of toolbar opens rApps group in popout panel +- Mobile FAB first tap auto-opens rApps panel + +### SVG Drawing Persistence (community-sync.ts + canvas.html) +- `addShapeData()` method on CommunitySync for DOM-less shapes +- `wb-svg` type: SVG serialized on pointerup, stored in Automerge, recreated on load +- Eraser removes from both DOM and Automerge doc + +### Canvas dblclick → Pencil Mode +- dblclick on empty canvas background activates pencil drawing tool + +### Files Modified +- `website/canvas.html` — toolbar panel, click-to-place, findFreePosition, +button, SVG persistence, dblclick +- `lib/folk-shape.ts` — dblclick→editing state, enterEditMode/exitEditMode, CSS +- `lib/folk-markdown.ts` — click-to-edit preview, edit-enter/exit events +- `lib/community-sync.ts` — svgMarkup field, addShapeData() method + +### Commits +- `eee9cbe` — shape overlap push-aside, coordinate persistence, toolbar panel clipping +- `645f1fc` — SVG drawing persistence, click-to-edit markdown, quick-add rApps, dblclick pencil + diff --git a/backlog/tasks/task-72 - Standardize-canvas-header-to-match-renderShell-MI-bar-welcome-Try-Demo.md b/backlog/tasks/task-72 - Standardize-canvas-header-to-match-renderShell-MI-bar-welcome-Try-Demo.md new file mode 100644 index 0000000..5ddee68 --- /dev/null +++ b/backlog/tasks/task-72 - Standardize-canvas-header-to-match-renderShell-MI-bar-welcome-Try-Demo.md @@ -0,0 +1,49 @@ +--- +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 + + +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**: `` 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. + + +## Acceptance Criteria + +- [ ] #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 + + +## Final Summary + + +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. + diff --git a/backlog/tasks/task-73 - Logo-standardized-header-across-all-rSpace-pages.md b/backlog/tasks/task-73 - Logo-standardized-header-across-all-rSpace-pages.md new file mode 100644 index 0000000..c484796 --- /dev/null +++ b/backlog/tasks/task-73 - Logo-standardized-header-across-all-rSpace-pages.md @@ -0,0 +1,55 @@ +--- +id: TASK-73 +title: Logo + standardized header across all rSpace pages +status: Done +assignee: [] +created_date: '2026-02-28 01:17' +labels: + - ux + - header + - branding +dependencies: [] +references: + - website/public/shell.css + - website/public/landing.html + - website/index.html + - website/canvas.html + - website/admin.html + - website/create-space.html + - server/shell.ts +priority: medium +--- + +## Description + + +Added logo.png and the full standard rstack-header (app-switcher, space-switcher, MI bar, identity, Try Demo) to every page in rSpace: + +1. **Landing page** (`landing.html`): Replaced the simple Next.js `