Complete source-safe Sequence editing

[donovan-yohan]

Summary

• replace Sequence's participant/message-only controls with a strict, source-safe semantic adapter for participants and actors, messages and arrows, notes, activations, autonumber, and fragments
• add edit, delete, and reorder operations while preserving canonical Mermaid source, comments/frontmatter/directives, collaboration origins, and source-only fallback
• add direct double-click text editing for participant, message, note, and fragment labels, including repeated-label identity, Enter/Escape behavior, focus restoration, and camera/anchor stability
• rebuild text hit targets against Mermaid's live SVG when renderer node replacement makes the cached map stale, while keeping category cardinality fail-closed
• cover note-only diagrams whose implicit rendered participants have no editable source declarations
• keep the expanded Sequence control stack natively scrollable on small screens without taking ownership from canvas pan, pinch, or the centered header-only editor

Closes #51

Review

• broad adversarial review found and resolved strict autonumber and note-only capability gaps
• focused review of the live-SVG fix found one E2E camera-rigor issue
• CI follow-up review found and resolved a mobile touch-scroll ownership gap
• final changed-hunk reviews found no remaining P0/P1/P2 findings in the semantic editor and no P0/P1 findings in the responsive shell delta

Exact-head evidence

Head: f531c3a6b088569662d4b90d4c775669991d882e

• pnpm --filter @arielcharts/shared build
• pnpm lint
• pnpm typecheck
• pnpm test — 324 passed, 0 failed (shared 7, server 79, web 238)
• pnpm build
• pnpm test:e2e-workspace-ux — passed twice, 30 checks / 0 skips each
• pnpm test:e2e-sequence
• E2E_BASE_URL=http://localhost:13303 E2E_MCP_URL=http://localhost:14300/mcp npx --yes tsx e2e-validate.ts — 30 checks passed
• git diff --check
• clean worktree

Inspected runtime artifacts regenerated from the final exact-head Sequence run at 19:46:38 UTC:

• /tmp/arielcharts-sequence.png — SHA-256 66cea06a6f0c160b31066cb467cbe85238179ecd39e3dbdf1916d0813035ee85
• /tmp/arielcharts-sequence-isolation.png — SHA-256 0c53a193b7f754af5dbdc45fd56365fa4f01699b1a9a72dd49d18068e48b1d97

Summary by CodeRabbit

• New Features
  • Expanded sequence diagrams with participants, messages, notes, activations, fragments, arrows, and autonumbering.
  • Added inline editing for sequence text, with commit/cancel support and preserved focus.
  • Added controls for adding, editing, deleting, and reordering sequence elements.
  • Note-only sequence diagrams now support interactive editing.
• Bug Fixes
  • Improved canvas interactions so editing targets do not trigger unintended panning.
  • Improved mobile sequence-editor scrolling and access to lower controls.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
arielcharts	Ready	Preview	Aug 10, 2026 7:49pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5d84f3d0-a1ec-4e18-adef-5009b83c065b

📥 Commits

Reviewing files that changed from the base of the PR and between 38dc287 and f531c3a.

📒 Files selected for processing (12)

• apps/web/src/app/globals.css
• apps/web/src/app/globals.test.ts
• apps/web/src/components/diagram-canvas.test.ts
• apps/web/src/components/diagram-canvas.tsx
• apps/web/src/components/session-workspace.tsx
• apps/web/src/lib/diagram-capabilities.test.ts
• apps/web/src/lib/sequence-mutations.test.ts
• apps/web/src/lib/sequence-mutations.ts
• apps/web/src/lib/svg-hit-map.test.ts
• apps/web/src/lib/svg-hit-map.ts
• e2e-sequence-validate.ts
• e2e-workspace-ux-validate.ts

---

📝 Walkthrough

Walkthrough

The PR expands Mermaid sequence diagrams with structured parsing, source-preserving mutations, semantic controls, inline SVG text editing, hit mapping, and mobile scrolling behavior. Unit, component, and end-to-end tests cover these capabilities.

Changes

Sequence editor

Layer / File(s)	Summary
Semantic parser and mutations apps/web/src/lib/sequence-mutations.ts, apps/web/src/lib/sequence-mutations.test.ts, apps/web/src/lib/diagram-capabilities.test.ts	Adds structured sequence snapshots and source-preserving operations for participants, messages, notes, activations, autonumbering, fragments, reordering, deletion, and inline editing.
SVG text hit mapping apps/web/src/lib/svg-hit-map.ts, apps/web/src/lib/svg-hit-map.test.ts	Maps rendered participant, message, note, and fragment text to source identities with duplicate, mismatch, and stale-map validation.
Canvas and workspace integration apps/web/src/components/session-workspace.tsx, apps/web/src/components/diagram-canvas.tsx, apps/web/src/components/diagram-canvas.test.ts	Passes sequence snapshots and mutation callbacks through the workspace. Renders semantic controls and supports anchored double-click editing with commit, cancel, and focus restoration.
Responsive behavior and end-to-end validation apps/web/src/app/globals.css, apps/web/src/app/globals.test.ts, e2e-sequence-validate.ts, e2e-workspace-ux-validate.ts	Adds contained mobile scrolling and pointer routing. Extends validation for inline editing, note-only diagrams, camera stability, control layout, and touch access to lower controls.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related issues

• donovan-yohan/arielcharts#58 — Covers the native sequence editor completion implemented by this PR.

Possibly related PRs

• donovan-yohan/arielcharts#49 — Provides the earlier sequence-diagram editing foundation extended by this PR.
• donovan-yohan/arielcharts#20 — Adds earlier generic sequence-diagram support extended by the semantic parser and editor integration.
• donovan-yohan/arielcharts#64 — Shares canvas wheel and pan-exclusion changes.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/issue-51-sequence-editor

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}