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

28 Commits

Author SHA1 Message Date
chihlasm
42c8c85fd5 feat: replace Show Drafts checkbox with Drafts tab in Flow Library
- Remove the out-of-place checkbox; add 'Drafts' as a tab alongside
  All | Troubleshooting | Projects | Maintenance
- Drafts tab sets showDrafts=true + typeFilter='all' so the API filter
  still works correctly via include_drafts
- Move SortDropdown to the right side next to ViewToggle, so both
  secondary controls are grouped together

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 12:13:59 -05:00
chihlasm
66a0fb01a2 fix: stop connector fork line from overlapping child cards
Replace the two-element approach (separate fork line + child lanes div with
mismatched maxWidth values) with a single relative-positioned container.
The fork line is absolutely positioned and its left/right are calculated from
the number of children so it spans exactly from the center of the first lane
to the center of the last lane.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 03:21:43 -05:00
chihlasm
8d8f557951 fix+feat: blank options, stub card dismiss, collapsible subtrees
- TreeCanvas: strip blank-label options on save so they don't generate
  stubs; also filter them from the unlinked-option add-button list
- AnswerStubCard: collapse type-picker when clicking outside the card
- TreeCanvasNode: add subtree collapse toggle button (ChevronsDownUp icon)
  visible in compact mode when the node has children
- TreeCanvas: track collapsedNodeIds; hide subtree behind a clickable
  "N nodes hidden" pill when collapsed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 03:13:01 -05:00
chihlasm
239be5017f fix: re-sync draft from store when canvas card is opened
When a decision node is saved with new options, stub next_node_id values
are written back to the store. But the local draft was initialized once at
mount and never refreshed, so reopening the card gave a stale draft with
empty next_node_ids — causing duplicate stubs on every subsequent save.

Fix: reset draft from the live node whenever isExpanded transitions to true.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 03:03:13 -05:00
chihlasm
d36f0406db fix: prevent category Cancel overflow and add Tab/Enter to create options
- TreeMetadataForm: add min-w-0 + shrink-0 to keep Cancel button in-panel
- NodeFormDecision: Tab or Enter on the last non-empty option input adds a
  new option and auto-focuses it; empty last input lets Tab pass through normally

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 02:56:41 -05:00
chihlasm
e5f28a34d2 feat: add delete button with confirmation to AnswerStubCard
Adds an inline delete flow to answer stub placeholder cards:
- Trash icon button (top-right, subtle) visible in idle state
- Click reveals "Delete this stub?" confirmation with Delete/Cancel
- Confirmed delete calls onDelete(nodeId) wired to handleDelete in TreeCanvas

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 02:26:13 -05:00
chihlasm
a4499e3cb3 fix: add defensive guard for answer nodes in session navigation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 02:03:57 -05:00
chihlasm
12b6d1f51e feat: serialize 'answer' stub nodes in markdown output
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 02:01:11 -05:00
chihlasm
a11545d142 feat: block publish if unresolved answer stub nodes exist
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:59:44 -05:00
chihlasm
566306e4a6 feat: allow 'answer' type in tree drafts, block on publish
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:58:24 -05:00
chihlasm
225a7aaf08 fix: add answer type to all Record<NodeType> icon and color maps
Fixes NodeList, ContinuationModal, NodePicker, and TreePreviewNode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:34:33 -05:00
chihlasm
e19c740603 feat: auto-create answer stubs on decision save, render AnswerStubCard
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:33:08 -05:00
chihlasm
10238f85e2 feat: redesign NodeFormDecision to label-only options, remove NodePicker
Users now type answer labels only. Stub nodes are created automatically
by TreeCanvas when the decision node is saved.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:31:56 -05:00
chihlasm
e29aadf8a5 fix: guard NODE_TYPE_CONFIG lookup against 'answer' type
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:29:16 -05:00
chihlasm
c0856c0b75 feat: add AnswerStubCard component for unresolved branch placeholders
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:28:39 -05:00
chihlasm
f6ad3a1546 feat: add 'answer' to NodeType union for branch placeholder stubs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:27:59 -05:00
chihlasm
f39b4f7fdc fix: replace hint paragraphs with InfoTip tooltips in NodeFormResolution
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:23:41 -05:00
chihlasm
956dd507ed fix: replace hint paragraphs with InfoTip tooltips in NodeFormAction
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:22:30 -05:00
chihlasm
d7580de070 fix: replace hint paragraphs with InfoTip tooltips in NodeFormDecision
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:21:07 -05:00
chihlasm
335db4d158 feat: add reusable InfoTip component for field-level help
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:17:05 -05:00
chihlasm
bee7f45459 feat: add fullscreen toggle to Modal, enable in NodeEditorModal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:16:10 -05:00
chihlasm
d295ae5d88 fix: make canvas card expanded area scrollable with sticky header
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 01:14:53 -05:00
chihlasm
3f1cf0f388 docs: add implementation plan for canvas UX fixes
12-task plan covering scroll fix, info tooltips, and answer stub
node type. Each task has exact file paths, code, and build
verification steps.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 00:34:08 -05:00
chihlasm
b67f4e1c1b docs: add canvas UX fixes design doc (scroll, tooltips, answer stubs)
Captures approved design for three post-implementation UX improvements
to the tree canvas editor: card scroll fix, info tooltip replacement for
hint text, and the new 'answer' node type for sketching decision branches
before assigning types.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-18 00:30:56 -05:00
chihlasm
04c6b4555c feat: Wire toolbar metadata toggle and integrate canvas layout
- Add isMetadataOpen state in TreeEditorPage
- Add Metadata toolbar button (visible in Flow mode only)
- Auto-close metadata panel when switching to Code mode
- Pass isMetadataOpen/onCloseMetadata props through TreeEditorLayout
- Update Flow mode toggle tooltip to reflect new canvas editing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-17 22:45:40 -05:00
chihlasm
79bf051666 refactor: Update forms for inline safety, add MetadataSidePanel, update layout
- NodeFormDecision: option reorder via onUpdate (no premature store writes)
- NodePicker: add allowCreate prop (default true) to hide Create New options
  during inline canvas editing, preventing side-effect node creation
- MetadataSidePanel: 320px right slide-in overlay wrapping TreeMetadataForm,
  closes on backdrop click, close button, and Escape key
- TreeEditorLayout: Flow mode now renders full-width TreeCanvas + MetadataSidePanel
  overlay; Code mode unchanged (Monaco + preview split)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-17 22:45:35 -05:00
chihlasm
9e59b04dcc feat: Add TreeCanvas layout with visual branching and orchestration
Replaces NodeList + TreePreviewPanel with a single full-width canvas.
Decision nodes branch horizontally; action/solution nodes flow vertically.
Inline type picker adds nodes without modal interruption. Handles pending
link resolution, inbound reference cleanup on delete, and selection sync.

CSS dot-grid background + connector lines for structure clarity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-17 22:45:28 -05:00
chihlasm
ab96751d47 feat: Add TreeCanvasNode inline editor card component
Replaces modal-based node editing with inline expand/collapse cards.
Each card shows node type, title, and options in compact mode, then
renders the full edit form inline on expand — no modal required.

Local draft state with save/cancel prevents premature store writes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-17 22:45:23 -05:00