feat: dual-mode tree editor with Code Mode and variables

## Summary - **Code Mode**: Monaco-based markdown editor alongside existing Flow Mode for editing decision trees as text. Custom syntax highlighting, autocomplete for `@node_id` references, debounced validation with inline error markers, and a toggleable syntax help panel. - **Backend markdown engine**: Bidirectional JSONB↔Markdown serializer/parser using mistune. 3 API endpoints (export, import, validate) with line/column error reporting. 39 dedicated tests, 403 total backend tests passing. - **Variables system**: `[USER_INPUT:prompt]`, `[VAR:name]`, `[SAVE_AS:name]` tokens with extraction/resolution services, session variables column (migration 028), and frontend prompt modal. - **Mode switching**: Synchronous tree→markdown serialization with metadata frontmatter (name, description, category, tags). Bidirectional sync between Flow Mode form fields and Code Mode markdown. Starter template for new trees. - **Undo/redo**: Mode-aware — Monaco native undo in Code Mode (word-level), throttled zundo in Flow Mode (field-level, 3s batching). Toast feedback on undo/redo actions. - **Save safety**: Pre-save async validation blocks saves when markdown has broken refs or missing tree name, with user-friendly toast errors. ## Test plan - [ ] Backend: `python -m pytest --override-ini="addopts="` — all 403 tests pass - [ ] Frontend: `npm run build` — clean build - [ ] Open tree editor → toggle to Code Mode → verify markdown appears with metadata - [ ] Edit markdown → verify live preview updates on right panel - [ ] Add broken `@node_id` ref → verify red squiggly + save blocked with toast - [ ] Click Syntax button → verify help panel slides in from right - [ ] Undo/redo in Code Mode (Ctrl+Z) → verify word-level undo - [ ] Undo/redo in Flow Mode → verify field-level undo with toast - [ ] Create new tree → switch to Code Mode → verify starter template - [ ] Switch Code→Flow→Code → verify metadata and content preserved 🤖 Generated with [Claude Code](https://claude.com/claude-code)

chihlasm commented

2026-02-10 14:45:54 +00:00

(Migrated from github.com)

Summary

Code Mode: Monaco-based markdown editor alongside existing Flow Mode for editing decision trees as text. Custom syntax highlighting, autocomplete for @node_id references, debounced validation with inline error markers, and a toggleable syntax help panel.
Backend markdown engine: Bidirectional JSONB↔Markdown serializer/parser using mistune. 3 API endpoints (export, import, validate) with line/column error reporting. 39 dedicated tests, 403 total backend tests passing.
Variables system: [USER_INPUT:prompt], [VAR:name], [SAVE_AS:name] tokens with extraction/resolution services, session variables column (migration 028), and frontend prompt modal.
Mode switching: Synchronous tree→markdown serialization with metadata frontmatter (name, description, category, tags). Bidirectional sync between Flow Mode form fields and Code Mode markdown. Starter template for new trees.
Undo/redo: Mode-aware — Monaco native undo in Code Mode (word-level), throttled zundo in Flow Mode (field-level, 3s batching). Toast feedback on undo/redo actions.
Save safety: Pre-save async validation blocks saves when markdown has broken refs or missing tree name, with user-friendly toast errors.

Test plan

Backend: python -m pytest --override-ini="addopts=" — all 403 tests pass
Frontend: npm run build — clean build
Open tree editor → toggle to Code Mode → verify markdown appears with metadata
Edit markdown → verify live preview updates on right panel
Add broken @node_id ref → verify red squiggly + save blocked with toast
Click Syntax button → verify help panel slides in from right
Undo/redo in Code Mode (Ctrl+Z) → verify word-level undo
Undo/redo in Flow Mode → verify field-level undo with toast
Create new tree → switch to Code Mode → verify starter template
Switch Code→Flow→Code → verify metadata and content preserved

🤖 Generated with Claude Code

feat: dual-mode tree editor with Code Mode and variables #50

Summary

Test plan