feat: canvas UX fixes — scroll, fullscreen, InfoTip tooltips, answer stub system #80

Merged
chihlasm merged 28 commits from feature/tree-editor-canvas into main 2026-02-18 17:52:08 +00:00
chihlasm commented 2026-02-18 07:09:49 +00:00 (Migrated from github.com)

Summary

  • Phase 1 — Scrollability: Canvas inline card expanded area is now scrollable (max-h-[70vh]) with a sticky header; Modal gets an optional fullscreen toggle (persisted to localStorage), enabled on NodeEditorModal
  • Phase 2 — Info-on-demand: Replaced always-visible hint paragraphs in NodeFormDecision, NodeFormAction, and NodeFormResolution with a reusable InfoTip badge component (hover to reveal)
  • Phase 3–5 — Answer stub system: Added 'answer' to NodeType; decision nodes now save label-only options and auto-create dashed AnswerStubCard placeholders; clicking a stub reveals an inline Decision/Action/Solution type picker; draft saves allowed, publish blocked (frontend toast + backend validation) until all stubs resolved; markdown serializer and runtime navigation page both handle answer nodes defensively

Files Changed

New: InfoTip.tsx, AnswerStubCard.tsx

Modified: TreeCanvasNode.tsx, Modal.tsx, NodeEditorModal.tsx, NodeFormDecision.tsx, NodeFormAction.tsx, NodeFormResolution.tsx, types/tree.ts, TreeCanvas.tsx, NodeList.tsx, ContinuationModal.tsx, NodePicker.tsx, TreePreviewNode.tsx, TreeEditorPage.tsx, TreeNavigationPage.tsx, treeMarkdownSync.ts, tree_validation.py

Test Plan

  • Canvas card scroll: expand a node in a short viewport → content scrolls, sticky header stays visible
  • Fullscreen toggle: click Maximize icon in NodeEditorModal → modal fills viewport → preference remembered on reload → other modals unaffected
  • InfoTip: hover badges on form labels → tooltip appears → no always-visible hint paragraphs remain
  • Answer stubs — creation: save a decision node with typed labels → dashed stub cards appear below
  • Answer stubs — conversion: click a stub → type buttons appear → selecting one converts it to a real node in edit mode
  • Draft save with stubs: no backend error
  • Publish blocked: unresolved stubs → toast shown, publish prevented (frontend + backend)
  • Publish succeeds after resolving all stubs
  • Frontend build: ✓ built zero TS errors
  • Backend: 551 tests passed

🤖 Generated with Claude Code

## Summary - **Phase 1 — Scrollability:** Canvas inline card expanded area is now scrollable (`max-h-[70vh]`) with a sticky header; Modal gets an optional fullscreen toggle (persisted to localStorage), enabled on `NodeEditorModal` - **Phase 2 — Info-on-demand:** Replaced always-visible hint paragraphs in `NodeFormDecision`, `NodeFormAction`, and `NodeFormResolution` with a reusable `InfoTip` badge component (hover to reveal) - **Phase 3–5 — Answer stub system:** Added `'answer'` to `NodeType`; decision nodes now save label-only options and auto-create dashed `AnswerStubCard` placeholders; clicking a stub reveals an inline Decision/Action/Solution type picker; draft saves allowed, publish blocked (frontend toast + backend validation) until all stubs resolved; markdown serializer and runtime navigation page both handle `answer` nodes defensively ## Files Changed **New:** `InfoTip.tsx`, `AnswerStubCard.tsx` **Modified:** `TreeCanvasNode.tsx`, `Modal.tsx`, `NodeEditorModal.tsx`, `NodeFormDecision.tsx`, `NodeFormAction.tsx`, `NodeFormResolution.tsx`, `types/tree.ts`, `TreeCanvas.tsx`, `NodeList.tsx`, `ContinuationModal.tsx`, `NodePicker.tsx`, `TreePreviewNode.tsx`, `TreeEditorPage.tsx`, `TreeNavigationPage.tsx`, `treeMarkdownSync.ts`, `tree_validation.py` ## Test Plan - [ ] Canvas card scroll: expand a node in a short viewport → content scrolls, sticky header stays visible - [ ] Fullscreen toggle: click Maximize icon in NodeEditorModal → modal fills viewport → preference remembered on reload → other modals unaffected - [ ] InfoTip: hover `ⓘ` badges on form labels → tooltip appears → no always-visible hint paragraphs remain - [ ] Answer stubs — creation: save a decision node with typed labels → dashed stub cards appear below - [ ] Answer stubs — conversion: click a stub → type buttons appear → selecting one converts it to a real node in edit mode - [ ] Draft save with stubs: no backend error - [ ] Publish blocked: unresolved stubs → toast shown, publish prevented (frontend + backend) - [ ] Publish succeeds after resolving all stubs - [ ] Frontend build: `✓ built` zero TS errors - [ ] Backend: 551 tests passed 🤖 Generated with [Claude Code](https://claude.com/claude-code)
railway-app[bot] commented 2026-02-18 07:10:14 +00:00 (Migrated from github.com)

🚅 Deployed to the patherly-pr-80 environment in selfless-grace

Service Status Web Updated (UTC)
hopeful-liberation Success (View Logs) Web Feb 18, 2026 at 5:15 pm
patherly Success (View Logs) Web Feb 18, 2026 at 5:14 pm
<!-- railway-bot-comment-version=2 --> <!-- railway-project-id="22b9b58c-271b-42e5-a10e-6fdec8d00134" railway-project-name="selfless-grace" --> 🚅 Deployed to the [patherly-pr-80](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=40169863-940d-4345-8ad4-7bbdf02ab4bf) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=5adc70a1-bda2-483e-b111-fe179111b9d8&environmentId=40169863-940d-4345-8ad4-7bbdf02ab4bf)) | [Web](https://hopeful-liberation-patherly-pr-80.up.railway.app) | Feb 18, 2026 at 5:15 pm | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=d954d225-073f-4e4b-b36b-26a60ab6cd77&environmentId=40169863-940d-4345-8ad4-7bbdf02ab4bf)) | [Web](https://patherly-patherly-pr-80.up.railway.app) | Feb 18, 2026 at 5:14 pm |
Sign in to join this conversation.