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/ScenariosPage.tsx

@@ -3,12 +3,13 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Play, Plus, Trash2, Download, ClipboardList } from 'lucide-react';
 import { parse as yamlParse } from 'yaml';
-import { scenarios } from '../../api';
-import type { Scenario } from '../../api';
+import { environments, scenarios } from '../../api';
+import type { Environment, Scenario } from '../../api';
 import {
   Breadcrumbs,
   Button,
   Modal,
+  Select,
   Table,
   type TableColumn,
   Timestamp,
@@ -26,13 +27,19 @@ export function ScenariosPage() {
   const [error, setError] = useState<string | null>(null);
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
+  const [runScenarioId, setRunScenarioId] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+  const [envs, setEnvs] = useState<Environment[]>([]);
+  const [selectedEnvId, setSelectedEnvId] = useState('');
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(() => {
-    scenarios
-      .list()
-      .then((res) => setItems(res.data))
+    Promise.all([scenarios.list(), environments.list(1, 200)])
+      .then(([scenarioRes, envRes]) => {
+        setItems(scenarioRes.data);
+        setEnvs(envRes.data);
+      })
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));
   }, []);
@@ -41,13 +48,25 @@ export function ScenariosPage() {
     load();
   }, [load]);
 
-  const handleRun = async (id: string) => {
+  const openRunModal = (id: string) => {
+    setRunScenarioId(id);
+    if (!selectedEnvId && envs.length > 0) {
+      setSelectedEnvId(envs[0].id);
+    }
+  };
+
+  const handleRun = async () => {
+    if (!runScenarioId || !selectedEnvId) return;
+    setRunning(true);
     try {
-      const run = await scenarios.run(id);
+      const run = await scenarios.run(runScenarioId, selectedEnvId);
       toast.success('Scenario run started');
-      navigate(`/scenarios/${id}/runs/${run.id}`);
+      navigate(`/scenarios/${runScenarioId}/runs/${run.id}`);
+      setRunScenarioId(null);
     } catch (err) {
       toast.error((err as Error).message);
+    } finally {
+      setRunning(false);
     }
   };
 
@@ -94,7 +113,14 @@ export function ScenariosPage() {
       align: 'right',
       render: (s) => (
         <span style={{ display: 'inline-flex', gap: 6 }}>
-          <Button size="sm" title={t('scenarios.action_run')} onClick={() => handleRun(s.id)}>
+          <Button
+            size="sm"
+            title={t('scenarios.action_run')}
+            onClick={(e) => {
+              e.stopPropagation();
+              openRunModal(s.id);
+            }}
+          >
             <Play size={14} />
           </Button>
           <Button
@@ -163,6 +189,33 @@ export function ScenariosPage() {
       >
         Are you sure you want to delete this scenario?
       </Modal>
+
+      <Modal
+        open={runScenarioId != null}
+        title={t('scenarios.run_modal_title')}
+        onClose={() => !running && setRunScenarioId(null)}
+        footer={(
+          <>
+            <Button variant="secondary" onClick={() => setRunScenarioId(null)} 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>
   );
 }