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

* 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>

* 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>

* 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>

* 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>

* 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>

* 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>

* fix: make canvas card expanded area scrollable with sticky header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add fullscreen toggle to Modal, enable in NodeEditorModal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add reusable InfoTip component for field-level help

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: replace hint paragraphs with InfoTip tooltips in NodeFormDecision

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: replace hint paragraphs with InfoTip tooltips in NodeFormAction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: replace hint paragraphs with InfoTip tooltips in NodeFormResolution

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add 'answer' to NodeType union for branch placeholder stubs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add AnswerStubCard component for unresolved branch placeholders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: guard NODE_TYPE_CONFIG lookup against 'answer' type

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* 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>

* feat: auto-create answer stubs on decision save, render AnswerStubCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* 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>

* feat: allow 'answer' type in tree drafts, block on publish

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: block publish if unresolved answer stub nodes exist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: serialize 'answer' stub nodes in markdown output

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: add defensive guard for answer nodes in session navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* 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>

* 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>

* 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>

* 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>

* 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>

* 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>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/tree-editor/MetadataSidePanel.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+import { X } from 'lucide-react'
+import { TreeMetadataForm } from './TreeMetadataForm'
+
+interface MetadataSidePanelProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function MetadataSidePanel({ isOpen, onClose }: MetadataSidePanelProps) {
+  // Close on Escape key
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      {/* Backdrop — click to close */}
+      <div
+        className="fixed inset-0 z-40 bg-background/40 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Side panel — slides in from right */}
+      <div
+        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-border bg-card shadow-xl"
+        role="dialog"
+        aria-label="Flow metadata"
+      >
+        {/* Panel header */}
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <h2 className="text-sm font-semibold text-foreground font-heading">
+            Flow Details
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+            aria-label="Close metadata panel"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Scrollable metadata form */}
+        <div className="flex-1 overflow-y-auto px-4 py-4">
+          <TreeMetadataForm />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default MetadataSidePanel