feat(scenarios): require environment for scenario runs

- require environmentId when creating runs in API and MCP tools

- pass selected environment data into step execution helpers

- prompt for environment selection before running scenarios in UI

client/src/pages/scenario/ScenarioDetailPage.tsx

@@ -3,8 +3,8 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Play, Pencil, Plus, History, Trash2, Upload, GripVertical, ClipboardList } from 'lucide-react';
 import { stringify as yamlStringify } from 'yaml';
-import { scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
-import type { Scenario, ScenarioStep, ScenarioCredential, Credential } from '../../api';
+import { environments, scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
+import type { Scenario, ScenarioStep, ScenarioCredential, Credential, Environment } from '../../api';
 import {
   Breadcrumbs,
   Button,
@@ -42,6 +42,10 @@ export function ScenarioDetailPage() {
   const [draggedStepId, setDraggedStepId] = useState<string | null>(null);
   const [dragOverStepId, setDragOverStepId] = useState<string | null>(null);
   const [reorderingSteps, setReorderingSteps] = useState(false);
+  const [runModalOpen, setRunModalOpen] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [envs, setEnvs] = useState<Environment[]>([]);
+  const [selectedEnvId, setSelectedEnvId] = useState('');
   const [pendingDelete, setPendingDelete] = useState<
     { type: 'scenario' } | { type: 'step'; id: string } | { type: 'credential'; id: string } | null
   >(null);
@@ -61,6 +65,13 @@ export function ScenarioDetailPage() {
       .list(1, 200)
       .then((r) => setAllCredentials(r.data))
       .catch(() => {});
+    environments
+      .list(1, 200)
+      .then((r) => {
+        setEnvs(r.data);
+        setSelectedEnvId((prev) => prev || r.data[0]?.id || '');
+      })
+      .catch(() => {});
   }, [id]);
 
   const reloadScenario = async () => {
@@ -72,12 +83,20 @@ export function ScenarioDetailPage() {
 
   const handleRun = async () => {
     if (!scenario) return;
+    if (!selectedEnvId) {
+      toast.error(t('scenarios.run_modal_env_required'));
+      return;
+    }
+    setRunning(true);
     try {
-      const run = await scenarios.run(scenario.id);
+      const run = await scenarios.run(scenario.id, selectedEnvId);
       toast.success('Scenario run started');
       navigate(`/scenarios/${id}/runs/${run.id}`);
+      setRunModalOpen(false);
     } catch (err) {
       toast.error((err as Error).message);
+    } finally {
+      setRunning(false);
     }
   };
 
@@ -306,7 +325,7 @@ export function ScenarioDetailPage() {
         />
         {scenario && (
           <div className={styles.toolbarActions}>
-            <Button size="sm" onClick={handleRun}>
+            <Button size="sm" onClick={() => setRunModalOpen(true)}>
               <Play size={14} />
               {t('scenarios.action_run')}
             </Button>
@@ -507,6 +526,33 @@ export function ScenarioDetailPage() {
         {pendingDelete?.type === 'credential' && 'Are you sure you want to remove this credential from scenario?'}
         {pendingDelete?.type === 'scenario' && 'Are you sure you want to delete this scenario?'}
       </Modal>
+
+      <Modal
+        open={runModalOpen}
+        title={t('scenarios.run_modal_title')}
+        onClose={() => !running && setRunModalOpen(false)}
+        footer={(
+          <>
+            <Button variant="secondary" onClick={() => setRunModalOpen(false)} disabled={running}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={handleRun} disabled={running || !selectedEnvId}>
+              {t('scenarios.action_run')}
+            </Button>
+          </>
+        )}
+      >
+        {envs.length === 0 ? (
+          <p>{t('scenarios.run_modal_no_env')}</p>
+        ) : (
+          <Select
+            label={t('scenarios.run_modal_env_label')}
+            value={selectedEnvId}
+            onChange={(e) => setSelectedEnvId(e.target.value)}
+            options={envs.map((env) => ({ value: env.id, label: env.name }))}
+          />
+        )}
+      </Modal>
     </div>
   );
 }