From 54f4e23d9f8ec0ad0e12c3e4c66dda866e272d0f Mon Sep 17 00:00:00 2001
From: David Montero <davidmonterocrespo24@gmail.com>
Date: Fri, 29 May 2026 21:24:55 +0200
Subject: [PATCH] feat(editor-toolbar): "Record simulation" overflow item
 (replay v2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sixth overflow-menu item, Pro-badged. Dispatches
velxio-pro-replay-record-toggle (projectId in detail) which the pro
overlay handles — plan check, board-type check, start/stop the
recorder. OSS build has no listener → silent no-op.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/editor/EditorToolbar.tsx   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/components/editor/EditorToolbar.tsx b/frontend/src/components/editor/EditorToolbar.tsx
index 76359cca..d7299e28 100644
--- a/frontend/src/components/editor/EditorToolbar.tsx
+++ b/frontend/src/components/editor/EditorToolbar.tsx
@@ -1477,6 +1477,26 @@ export const EditorToolbar = ({
                     </svg>
                     <span className="tb-overflow-label">{t('editor.toolbar.shareLabel', 'Share / Embed')}</span>
                   </button>
+                  {/* Record simulation — Pro feature. Dispatches a toggle the
+                      pro overlay handles (plan check, board-type check,
+                      start/stop the recorder). OSS build → no listener →
+                      silent no-op. */}
+                  <button
+                    className="tb-overflow-item"
+                    role="menuitem"
+                    onClick={() => {
+                      setMoreMenuOpen(false);
+                      window.dispatchEvent(new CustomEvent('velxio-pro-replay-record-toggle', {
+                        detail: { projectId: currentProject?.id ?? null },
+                      }));
+                    }}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                      <circle cx="12" cy="12" r="7" />
+                    </svg>
+                    <span className="tb-overflow-label">{t('editor.toolbar.recordLabel', 'Record simulation')}</span>
+                    <span className="tb-overflow-pro">PRO</span>
+                  </button>
                 </div>
               )}
             </div>