Skip to content

Visual editor: canvas-native inline instructions editor#19743

Closed
Mossaka wants to merge 13 commits intomainfrom
feature/visual-workflow-editor
Closed

Visual editor: canvas-native inline instructions editor#19743
Mossaka wants to merge 13 commits intomainfrom
feature/visual-workflow-editor

Conversation

@Mossaka
Copy link
Collaborator

@Mossaka Mossaka commented Mar 5, 2026

Summary

  • Inline instructions editor: Double-click the Instructions node to expand a rich text editor directly on the canvas — no more context-switching to the right panel
  • Formatting toolbar: Bold, Italic, Heading, Bullet list, Numbered list buttons with Ctrl/Cmd+B/I keyboard shortcuts
  • Canvas integration: Dynamic Dagre layout (480×400 expanded), Escape/click-outside collapse, auto-growing textarea, snippet buttons, character count
  • Dark mode & polish: Full dark mode support, smooth expand/collapse animations (250ms/200ms), improved empty-state CTA with pencil icon

Test plan

  • 6 new Playwright e2e tests all pass (inline-instructions.spec.ts)
  • Existing e2e tests show zero regressions (96 passed, 6 pre-existing failures)
  • TypeScript compiles cleanly
  • Vite production build succeeds
  • Manual: double-click Instructions node → inline editor expands on canvas
  • Manual: single-click still opens right panel (backward compatible)
  • Manual: Escape and click-outside both collapse the editor
  • Manual: formatting toolbar and snippet buttons work
  • Manual: dark mode renders correctly

🤖 Generated with Claude Code

Mossaka and others added 13 commits February 19, 2026 19:52
- GitHub Actions workflow triggers on push to main/feature branch when
  docs/editor-app/** changes, builds with ghpages mode, and deploys via
  GitHub Pages actions (upload-pages-artifact + deploy-pages)
- Manual deploy script (scripts/deploy.sh) builds and force-pushes to
  Mossaka/gh-aw-editor-visualizer gh-pages branch, supports GH_TOKEN
  and GITHUB_TOKEN for authenticated cross-repo push
- Add "deploy" npm script to package.json

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…m domains

Major features implemented:
- Phase 1 (Demo Ready): Markdown fidelity, error-to-node mapping, smart defaults,
  progressive disclosure, templates, deep linking, export polish
- Phase 2 (Early Access): Field validation, WASM validate API, tool sub-configs,
  missing frontmatter fields, keyboard shortcuts, undo/redo, guided tour
- Phase 3 (GA): Accessibility (WCAG 2.1 AA), responsive layout, import resolution,
  theme toggle, diff view, best practices linting

Bug fixes:
- Fix tool toggle infinite loop (React error #185) — stable Zustand selectors
- Fix ecosystem domain validation — use keywords (python, node, go) not URLs
- Fix page crash on node click — ErrorBoundary + zustand persist merge
- Fix noisy linter warnings for auto-set permissions
- Fix editor dark mode text colors — dual color maps for syntax highlighting

Enhancements:
- Real templates from githubnext/agentics (15 workflows)
- Configurable safe-outputs (max, allowed labels, title-prefix, etc.)
- Ecosystem domain quick-pick presets
- Reference docs tab with hover-to-show-docs on frontmatter keys
- Clickable error → field navigation with highlight animation
- Structured compiler errors (field, line, suggestion, docsUrl)
- Removed permissions block (strict mode default, use safe-outputs)
- Remote URL import support for shared components

Comprehensive Playwright test suite for regression prevention.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… and rebuilt assets

Introduces a deploy workflow that lets users push workflows directly to GitHub repos
from the visual editor, with token input, repo selection, progress tracking, and
success confirmation steps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Instructions are the soul of an agent workflow, so they deserve a first-class
editing experience. Double-clicking the Instructions node now expands it into
a rich inline editor directly on the canvas with formatting toolbar, snippet
buttons, auto-growing textarea, and keyboard shortcuts (Ctrl+B/I, Escape).

- New InstructionsNodeExpanded component with nodrag/nowheel/nopan classes
- Dynamic Dagre layout (480x400 expanded vs 260x120 collapsed)
- Formatting toolbar: Bold, Italic, Heading, Bullet list, Numbered list
- Escape key and click-outside collapse handlers
- Improved empty-state CTA with pencil icon
- Full dark mode support
- Playwright e2e tests for all interactions
- Rebuilt production assets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings March 5, 2026 18:19
@Mossaka Mossaka closed this Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants