Use in-app modal for recording start confirmation

app/renderer/app.js

@@ -285,7 +285,13 @@ class StepForgeApp {
     const pauseBtn = el('button', {
       type: 'button',
       title: notStarted ? 'StepForge tucks away and starts capturing' : '',
-      onClick: () => send({ action: s.paused ? 'resume' : 'pause' }),
+      onClick: async () => {
+        if (notStarted) {
+          const acknowledged = await dialogs.showRecordingReminder();
+          if (!acknowledged) return;
+        }
+        send({ action: s.paused ? 'resume' : 'pause' });
+      },
     }, notStarted ? 'Start recording' : s.paused ? 'Resume' : 'Pause');
 
     const finishBtn = el('button', {

app/renderer/dialogs.js

@@ -693,6 +693,27 @@ function showInfoDialog(title, bodyText) {
   });
 }
 
+function showRecordingReminder() {
+  return new Promise((resolve) => {
+    const { close } = openModal({
+      title: 'Before recording starts',
+      body: el('div.recording-notice', {},
+        el('div.recording-notice__badge', {}, 'Recording tip'),
+        el('div.recording-notice__title', {}, 'StepForge will hide after you continue.'),
+        el('div.recording-notice__text', {},
+          'When you want to pause or stop, use the red tray icon in the system tray.',
+        ),
+      ),
+      footer: [
+        el('button.primary', {
+          onClick: () => { close(); resolve(true); },
+        }, 'Continue'),
+      ],
+      onClose: () => resolve(false),
+    });
+  });
+}
+
 window.StepForgeDialogs = {
   promptText,
   showQuickActions,
@@ -704,5 +725,6 @@ window.StepForgeDialogs = {
   showPlaceholdersDialog,
   showShortcutsDialog,
   showTemplateManager,
+  showRecordingReminder,
 };
 })();

app/renderer/style.css

@@ -619,6 +619,30 @@ fieldset legend {
   background: var(--warn);
   color: var(--text);
 }
+.recording-notice {
+  display: grid;
+  gap: 10px;
+}
+.recording-notice__badge {
+  width: fit-content;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--danger);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.recording-notice__title {
+  font-size: 18px;
+  font-weight: 700;
+}
+.recording-notice__text {
+  color: var(--muted);
+  line-height: 1.5;
+}
 
 #modal-root:not(:empty) {
   position: fixed;