refactor(client): group pages by entity and add scenario/step crud

- move environment, scenario, session pages into entity subdirs
- add CreateScenarioPage and EditScenarioPage
- add CreateStepPage and EditStepPage with order/type/session/code fields
- add per-step edit and delete row actions on ScenarioDetailPage
- add step api methods (get, create, update, remove) to api client
- add sectionToolbar, formField, fieldLabel, textarea css utilities

client/src/App.tsx

@@ -5,15 +5,19 @@ import type { LucideIcon } from 'lucide-react';
 import styles from './App.module.css';
 import { SidePanel, ThemeSwitcher } from './ui';
 import liqaLogo from './assets/liqa.svg';
-import { EnvironmentsPage } from './pages/EnvironmentsPage';
-import { EnvironmentDetailPage } from './pages/EnvironmentDetailPage';
-import { CreateEnvironmentPage } from './pages/CreateEnvironmentPage';
-import { EditEnvironmentPage } from './pages/EditEnvironmentPage';
+import { EnvironmentsPage } from './pages/environment/EnvironmentsPage';
+import { EnvironmentDetailPage } from './pages/environment/EnvironmentDetailPage';
+import { CreateEnvironmentPage } from './pages/environment/CreateEnvironmentPage';
+import { EditEnvironmentPage } from './pages/environment/EditEnvironmentPage';
 import { KeysPage } from './pages/KeysPage';
-import { SessionsPage } from './pages/SessionsPage';
-import { SessionDetailPage } from './pages/SessionDetailPage';
-import { ScenariosPage } from './pages/ScenariosPage';
-import { ScenarioDetailPage } from './pages/ScenarioDetailPage';
+import { SessionsPage } from './pages/session/SessionsPage';
+import { SessionDetailPage } from './pages/session/SessionDetailPage';
+import { ScenariosPage } from './pages/scenario/ScenariosPage';
+import { ScenarioDetailPage } from './pages/scenario/ScenarioDetailPage';
+import { CreateScenarioPage } from './pages/scenario/CreateScenarioPage';
+import { EditScenarioPage } from './pages/scenario/EditScenarioPage';
+import { CreateStepPage } from './pages/scenario/CreateStepPage';
+import { EditStepPage } from './pages/scenario/EditStepPage';
 
 const NAV: { path: string; labelKey: string; Icon: LucideIcon }[] = [
   { path: '/environments', labelKey: 'nav.environments', Icon: Globe },
@@ -63,6 +67,10 @@ export default function App() {
           <Route path="/sessions" element={<SessionsPage />} />
           <Route path="/sessions/:id" element={<SessionDetailPage />} />
           <Route path="/scenarios" element={<ScenariosPage />} />
+          <Route path="/scenarios/new" element={<CreateScenarioPage />} />
+          <Route path="/scenarios/:id/edit" element={<EditScenarioPage />} />
+          <Route path="/scenarios/:id/steps/new" element={<CreateStepPage />} />
+          <Route path="/scenarios/:id/steps/:stepId/edit" element={<EditStepPage />} />
           <Route path="/scenarios/:id" element={<ScenarioDetailPage />} />
           <Route path="*" element={<Navigate to="/scenarios" replace />} />
         </Routes>

client/src/api/client.ts

@@ -113,3 +113,42 @@ export const scenarios = {
     return request(`/scenarios/${scenarioId}/runs?page=${page}&limit=${limit}`);
   },
 };
+
+// ── Scenario Steps ────────────────────────────────────────────────────────────
+
+export interface CreateStepPayload {
+  order: number;
+  type: 'login' | 'exec' | 'sign';
+  sessionName: string;
+  execCode?: string;
+  validateCode?: string;
+}
+
+export interface UpdateStepPayload {
+  order?: number;
+  type?: 'login' | 'exec' | 'sign';
+  sessionName?: string;
+  execCode?: string;
+  validateCode?: string;
+}
+
+export const steps = {
+  get(scenarioId: number, stepId: number): Promise<ScenarioStep> {
+    return request(`/scenarios/${scenarioId}/steps/${stepId}`);
+  },
+  create(scenarioId: number, payload: CreateStepPayload): Promise<ScenarioStep> {
+    return request(`/scenarios/${scenarioId}/steps`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  },
+  update(scenarioId: number, stepId: number, payload: UpdateStepPayload): Promise<ScenarioStep> {
+    return request(`/scenarios/${scenarioId}/steps/${stepId}`, {
+      method: 'PATCH',
+      body: JSON.stringify(payload),
+    });
+  },
+  remove(scenarioId: number, stepId: number): Promise<void> {
+    return request(`/scenarios/${scenarioId}/steps/${stepId}`, { method: 'DELETE' });
+  },
+};

client/src/i18n/locales/en.json

@@ -65,8 +65,7 @@
     "field_updated": "Updated",
     "field_lastUsed": "Last Used"
   },
-  "scenarios": {
-    "title": "Scenarios",
+  "scenarios": {    "title": "Scenarios",
     "col_id": "ID",
     "col_name": "Name",
     "col_updated": "Updated",
@@ -83,7 +82,17 @@
     "step_order": "#",
     "step_type": "Type",
     "step_session": "Session",
-    "step_updated": "Updated"
+    "step_updated": "Updated",
+    "action_add": "New scenario",
+    "action_edit": "Edit",
+    "action_save": "Create",
+    "action_update": "Save changes",
+    "action_cancel": "Cancel",
+    "create_title": "New Scenario",
+    "edit_title": "Edit Scenario",
+    "form_name": "Name",
+    "form_name_placeholder": "e.g. Login flow",
+    "form_name_required": "Name is required"
   },
   "theme": {
     "switch_to_light": "Switch to light theme",
@@ -97,5 +106,26 @@
     "range": "{{from}}–{{to}} of {{total}}",
     "per_page": "{{count}} per page",
     "page_size": "Items per page"
+  },
+  "steps": {
+    "create_title": "Add Step",
+    "edit_title": "Edit Step #{{order}}",
+    "loading": "Loading…",
+    "action_add": "Add step",
+    "action_edit": "Edit",
+    "action_delete": "Delete",
+    "action_save": "Add step",
+    "action_update": "Save changes",
+    "action_cancel": "Cancel",
+    "form_order": "Order",
+    "form_order_invalid": "Order must be a non-negative integer",
+    "form_type": "Type",
+    "form_session": "Session name",
+    "form_session_placeholder": "e.g. my-session",
+    "form_session_required": "Session name is required",
+    "form_exec_code": "Exec code",
+    "form_exec_code_placeholder": "return await page.title();",
+    "form_validate_code": "Validate code",
+    "form_validate_code_placeholder": "return { success: result !== null, description: \"…\" };"
   }
 }

client/src/pages/Page.module.css

@@ -183,6 +183,47 @@
   justify-content: flex-end;
 }
 
+.formField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.fieldLabel {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.textarea {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  background: var(--color-bg-input, var(--color-bg-raised));
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  resize: vertical;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  box-sizing: border-box;
+}
+
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+/* ── Section toolbar ─────────────────────────────────────────────────────── */
+
+.sectionToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
 /* ── Environment detail page ────────────────────────────────────────────── */
 
 .detailToolbar {

client/src/pages/environment/CreateEnvironmentPage.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { environments } from '../api';
-import { Breadcrumbs, Button, Card, Input } from '../ui';
-import styles from './Page.module.css';
+import { environments } from '../../api';
+import { Breadcrumbs, Button, Card, Input } from '../../ui';
+import styles from '../Page.module.css';
 
 export function CreateEnvironmentPage() {
   const { t } = useTranslation();

client/src/pages/environment/EditEnvironmentPage.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { environments } from '../api';
-import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, Input } from '../ui';
-import styles from './Page.module.css';
+import { environments } from '../../api';
+import type { Environment } from '../../api';
+import { Breadcrumbs, Button, Card, Input } from '../../ui';
+import styles from '../Page.module.css';
 
 export function EditEnvironmentPage() {
   const { t } = useTranslation();

client/src/pages/environment/EnvironmentDetailPage.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Pencil, Trash2 } from 'lucide-react';
-import { environments } from '../api';
-import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
-import styles from './Page.module.css';
+import { environments } from '../../api';
+import type { Environment } from '../../api';
+import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
 
 export function EnvironmentDetailPage() {
   const { t } = useTranslation();

client/src/pages/environment/EnvironmentsPage.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Settings, ExternalLink, Pencil, Trash2, Plus } from 'lucide-react';
-import { environments } from '../api';
-import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../ui';
-import styles from './Page.module.css';
+import { environments } from '../../api';
+import type { Environment } from '../../api';
+import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
 
 function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: number) => void }) {
   const { t } = useTranslation();

client/src/pages/scenario/CreateScenarioPage.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { scenarios } from '../../api';
+import { Breadcrumbs, Button, Card, Input } from '../../ui';
+import styles from '../Page.module.css';
+
+export function CreateScenarioPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState('');
+  const [nameError, setNameError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setNameError(t('scenarios.form_name_required'));
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const scenario = await scenarios.create(name.trim());
+      navigate(`/scenarios/${scenario.id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            { label: t('scenarios.create_title') },
+          ]}
+        />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+
+      <form onSubmit={handleSubmit} noValidate>
+        <Card className={styles.formCard}>
+          <div className={styles.formFields}>
+            <Input
+              label={t('scenarios.form_name')}
+              placeholder={t('scenarios.form_name_placeholder')}
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                setNameError('');
+              }}
+              error={nameError || undefined}
+              required
+              autoFocus
+            />
+          </div>
+
+          <div className={styles.formActions}>
+            <Button type="button" variant="secondary" onClick={() => navigate('/scenarios')}>
+              {t('scenarios.action_cancel')}
+            </Button>
+            <Button type="submit" loading={saving}>
+              {t('scenarios.action_save')}
+            </Button>
+          </div>
+        </Card>
+      </form>
+    </div>
+  );
+}

client/src/pages/scenario/CreateStepPage.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { scenarios, steps } from '../../api';
+import type { Scenario, StepType } from '../../api';
+import type { CreateStepPayload } from '../../api/client';
+import { Breadcrumbs, Button, Card, Input, Select } from '../../ui';
+import styles from '../Page.module.css';
+
+const STEP_TYPES: StepType[] = ['login', 'exec', 'sign'];
+
+export function CreateStepPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [scenario, setScenario] = useState<Scenario | null>(null);
+  const [order, setOrder] = useState('0');
+  const [type, setType] = useState<StepType>('exec');
+  const [sessionName, setSessionName] = useState('');
+  const [execCode, setExecCode] = useState('');
+  const [validateCode, setValidateCode] = useState('');
+  const [errors, setErrors] = useState<Partial<Record<keyof CreateStepPayload, string>>>({});
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    scenarios.get(Number(id)).then(setScenario).catch(() => null);
+  }, [id]);
+
+  const validate = (): boolean => {
+    const next: typeof errors = {};
+    if (!sessionName.trim()) next.sessionName = t('steps.form_session_required');
+    if (isNaN(Number(order)) || Number(order) < 0) next.order = t('steps.form_order_invalid');
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await steps.create(Number(id), {
+        order: Number(order),
+        type,
+        sessionName: sessionName.trim(),
+        execCode: execCode.trim() || undefined,
+        validateCode: validateCode.trim() || undefined,
+      });
+      navigate(`/scenarios/${id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            {
+              label: scenario?.name ?? `#${id}`,
+              onClick: () => navigate(`/scenarios/${id}`),
+            },
+            { label: t('steps.create_title') },
+          ]}
+        />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+
+      <form onSubmit={handleSubmit} noValidate>
+        <Card className={styles.formCard}>
+          <div className={styles.formFields}>
+            <Input
+              label={t('steps.form_order')}
+              type="number"
+              min={0}
+              value={order}
+              onChange={(e) => setOrder(e.target.value)}
+              error={errors.order}
+            />
+            <Select
+              label={t('steps.form_type')}
+              value={type}
+              onChange={(e) => setType(e.target.value as StepType)}
+              options={STEP_TYPES.map((v) => ({ value: v, label: v }))}
+            />
+            <Input
+              label={t('steps.form_session')}
+              placeholder={t('steps.form_session_placeholder')}
+              value={sessionName}
+              onChange={(e) => {
+                setSessionName(e.target.value);
+                setErrors((prev) => ({ ...prev, sessionName: undefined }));
+              }}
+              error={errors.sessionName}
+              required
+            />
+            <div className={styles.formField}>
+              <label className={styles.fieldLabel}>{t('steps.form_exec_code')}</label>
+              <textarea
+                className={styles.textarea}
+                rows={6}
+                value={execCode}
+                onChange={(e) => setExecCode(e.target.value)}
+                placeholder={t('steps.form_exec_code_placeholder')}
+                spellCheck={false}
+              />
+            </div>
+            <div className={styles.formField}>
+              <label className={styles.fieldLabel}>{t('steps.form_validate_code')}</label>
+              <textarea
+                className={styles.textarea}
+                rows={6}
+                value={validateCode}
+                onChange={(e) => setValidateCode(e.target.value)}
+                placeholder={t('steps.form_validate_code_placeholder')}
+                spellCheck={false}
+              />
+            </div>
+          </div>
+
+          <div className={styles.formActions}>
+            <Button type="button" variant="secondary" onClick={() => navigate(`/scenarios/${id}`)}>
+              {t('steps.action_cancel')}
+            </Button>
+            <Button type="submit" loading={saving}>
+              {t('steps.action_save')}
+            </Button>
+          </div>
+        </Card>
+      </form>
+    </div>
+  );
+}

client/src/pages/scenario/EditScenarioPage.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { scenarios } from '../../api';
+import type { Scenario } from '../../api';
+import { Breadcrumbs, Button, Card, Input } from '../../ui';
+import styles from '../Page.module.css';
+
+export function EditScenarioPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [scenario, setScenario] = useState<Scenario | null>(null);
+  const [name, setName] = useState('');
+  const [nameError, setNameError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    scenarios
+      .get(Number(id))
+      .then((data) => {
+        setScenario(data);
+        setName(data.name);
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setNameError(t('scenarios.form_name_required'));
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await scenarios.update(Number(id), { name: name.trim() });
+      navigate(`/scenarios/${id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            {
+              label: scenario?.name ?? `#${id}`,
+              onClick: () => navigate(`/scenarios/${id}`),
+            },
+            { label: t('scenarios.edit_title') },
+          ]}
+        />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+      {loading && <p className={styles.muted}>{t('scenarios.loading')}</p>}
+
+      {!loading && scenario && (
+        <form onSubmit={handleSubmit} noValidate>
+          <Card className={styles.formCard}>
+            <div className={styles.formFields}>
+              <Input
+                label={t('scenarios.form_name')}
+                placeholder={t('scenarios.form_name_placeholder')}
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  setNameError('');
+                }}
+                error={nameError || undefined}
+                required
+                autoFocus
+              />
+            </div>
+
+            <div className={styles.formActions}>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => navigate(`/scenarios/${id}`)}
+              >
+                {t('scenarios.action_cancel')}
+              </Button>
+              <Button type="submit" loading={saving}>
+                {t('scenarios.action_update')}
+              </Button>
+            </div>
+          </Card>
+        </form>
+      )}
+    </div>
+  );
+}

client/src/pages/scenario/EditStepPage.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { scenarios, steps } from '../../api';
+import type { Scenario, ScenarioStep, StepType } from '../../api';
+import { Breadcrumbs, Button, Card, Input, Select } from '../../ui';
+import styles from '../Page.module.css';
+
+const STEP_TYPES: StepType[] = ['login', 'exec', 'sign'];
+
+export function EditStepPage() {
+  const { t } = useTranslation();
+  const { id, stepId } = useParams<{ id: string; stepId: string }>();
+  const navigate = useNavigate();
+
+  const [scenario, setScenario] = useState<Scenario | null>(null);
+  const [step, setStep] = useState<ScenarioStep | null>(null);
+  const [order, setOrder] = useState('');
+  const [type, setType] = useState<StepType>('exec');
+  const [sessionName, setSessionName] = useState('');
+  const [execCode, setExecCode] = useState('');
+  const [validateCode, setValidateCode] = useState('');
+  const [sessionError, setSessionError] = useState('');
+  const [orderError, setOrderError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id || !stepId) return;
+    Promise.all([scenarios.get(Number(id)), steps.get(Number(id), Number(stepId))])
+      .then(([sc, st]) => {
+        setScenario(sc);
+        setStep(st);
+        setOrder(String(st.order));
+        setType(st.type);
+        setSessionName(st.sessionName);
+        setExecCode(st.execCode ?? '');
+        setValidateCode(st.validateCode ?? '');
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id, stepId]);
+
+  const validate = (): boolean => {
+    let valid = true;
+    if (!sessionName.trim()) {
+      setSessionError(t('steps.form_session_required'));
+      valid = false;
+    }
+    if (isNaN(Number(order)) || Number(order) < 0) {
+      setOrderError(t('steps.form_order_invalid'));
+      valid = false;
+    }
+    return valid;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await steps.update(Number(id), Number(stepId), {
+        order: Number(order),
+        type,
+        sessionName: sessionName.trim(),
+        execCode: execCode.trim() || undefined,
+        validateCode: validateCode.trim() || undefined,
+      });
+      navigate(`/scenarios/${id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            {
+              label: scenario?.name ?? `#${id}`,
+              onClick: () => navigate(`/scenarios/${id}`),
+            },
+            { label: t('steps.edit_title', { order: step?.order ?? stepId }) },
+          ]}
+        />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+      {loading && <p className={styles.muted}>{t('steps.loading')}</p>}
+
+      {!loading && step && (
+        <form onSubmit={handleSubmit} noValidate>
+          <Card className={styles.formCard}>
+            <div className={styles.formFields}>
+              <Input
+                label={t('steps.form_order')}
+                type="number"
+                min={0}
+                value={order}
+                onChange={(e) => {
+                  setOrder(e.target.value);
+                  setOrderError('');
+                }}
+                error={orderError || undefined}
+              />
+              <Select
+                label={t('steps.form_type')}
+                value={type}
+                onChange={(e) => setType(e.target.value as StepType)}
+                options={STEP_TYPES.map((v) => ({ value: v, label: v }))}
+              />
+              <Input
+                label={t('steps.form_session')}
+                placeholder={t('steps.form_session_placeholder')}
+                value={sessionName}
+                onChange={(e) => {
+                  setSessionName(e.target.value);
+                  setSessionError('');
+                }}
+                error={sessionError || undefined}
+                required
+              />
+              <div className={styles.formField}>
+                <label className={styles.fieldLabel}>{t('steps.form_exec_code')}</label>
+                <textarea
+                  className={styles.textarea}
+                  rows={6}
+                  value={execCode}
+                  onChange={(e) => setExecCode(e.target.value)}
+                  placeholder={t('steps.form_exec_code_placeholder')}
+                  spellCheck={false}
+                />
+              </div>
+              <div className={styles.formField}>
+                <label className={styles.fieldLabel}>{t('steps.form_validate_code')}</label>
+                <textarea
+                  className={styles.textarea}
+                  rows={6}
+                  value={validateCode}
+                  onChange={(e) => setValidateCode(e.target.value)}
+                  placeholder={t('steps.form_validate_code_placeholder')}
+                  spellCheck={false}
+                />
+              </div>
+            </div>
+
+            <div className={styles.formActions}>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => navigate(`/scenarios/${id}`)}
+              >
+                {t('steps.action_cancel')}
+              </Button>
+              <Button type="submit" loading={saving}>
+                {t('steps.action_update')}
+              </Button>
+            </div>
+          </Card>
+        </form>
+      )}
+    </div>
+  );
+}

client/src/pages/scenario/ScenarioDetailPage.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Play, Trash2 } from 'lucide-react';
-import { scenarios } from '../api';
-import type { Scenario, ScenarioStep } from '../api';
+import { Play, Pencil, Plus, Trash2 } from 'lucide-react';
+import { scenarios, steps } from '../../api';
+import type { Scenario, ScenarioStep } from '../../api';
 import {
   Badge,
   Breadcrumbs,
@@ -14,8 +14,8 @@ import {
   Table,
   Timestamp,
   type TableColumn,
-} from '../ui';
-import styles from './Page.module.css';
+} from '../../ui';
+import styles from '../Page.module.css';
 
 const STEP_TYPE_VARIANT: Record<string, 'info' | 'warning' | 'success'> = {
   login: 'success',
@@ -51,6 +51,13 @@ export function ScenarioDetailPage() {
     navigate('/scenarios');
   };
 
+  const handleDeleteStep = async (stepId: number) => {
+    await steps.remove(Number(id), stepId);
+    setScenario((prev) =>
+      prev ? { ...prev, steps: prev.steps.filter((s) => s.id !== stepId) } : prev,
+    );
+  };
+
   const stepColumns: TableColumn<ScenarioStep>[] = [
     { key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
     {
@@ -66,6 +73,38 @@ export function ScenarioDetailPage() {
       width: 140,
       render: (s) => <Timestamp value={s.updatedAt} />,
     },
+    {
+      key: 'actions',
+      header: '',
+      width: 80,
+      align: 'right',
+      render: (s) => (
+        <span style={{ display: 'inline-flex', gap: 6 }}>
+          <Button
+            size="sm"
+            variant="secondary"
+            title={t('steps.action_edit')}
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/scenarios/${id}/steps/${s.id}/edit`);
+            }}
+          >
+            <Pencil size={14} />
+          </Button>
+          <Button
+            size="sm"
+            variant="danger"
+            title={t('steps.action_delete')}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDeleteStep(s.id);
+            }}
+          >
+            <Trash2 size={14} />
+          </Button>
+        </span>
+      ),
+    },
   ];
 
   return (
@@ -83,6 +122,10 @@ export function ScenarioDetailPage() {
               <Play size={14} />
               {t('scenarios.action_run')}
             </Button>
+            <Button variant="secondary" size="sm" onClick={() => navigate(`/scenarios/${id}/edit`)}>
+              <Pencil size={14} />
+              {t('scenarios.action_edit')}
+            </Button>
             <Button variant="danger" size="sm" onClick={handleDelete}>
               <Trash2 size={14} />
               {t('scenarios.action_delete')}
@@ -124,7 +167,13 @@ export function ScenarioDetailPage() {
 
           {scenario.steps.length > 0 && (
             <div className={styles.stepsSection}>
-              <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
+              <div className={styles.sectionToolbar}>
+                <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
+                <Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
+                  <Plus size={14} />
+                  {t('steps.action_add')}
+                </Button>
+              </div>
               <Table
                 columns={stepColumns}
                 data={scenario.steps}
@@ -134,6 +183,17 @@ export function ScenarioDetailPage() {
               />
             </div>
           )}
+          {scenario.steps.length === 0 && (
+            <div className={styles.stepsSection}>
+              <div className={styles.sectionToolbar}>
+                <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
+                <Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
+                  <Plus size={14} />
+                  {t('steps.action_add')}
+                </Button>
+              </div>
+            </div>
+          )}
         </>
       )}
     </div>

client/src/pages/scenario/ScenariosPage.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Play, Trash2 } from 'lucide-react';
-import { scenarios } from '../api';
-import type { Scenario } from '../api';
-import { Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../ui';
-import styles from './Page.module.css';
+import { Play, Plus, Trash2 } from 'lucide-react';
+import { scenarios } from '../../api';
+import type { Scenario } from '../../api';
+import { Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
 
 export function ScenariosPage() {
   const { t } = useTranslation();
@@ -70,7 +70,15 @@ export function ScenariosPage() {
 
   return (
     <div>
-      <Breadcrumbs items={[{ label: t('scenarios.title') }]} className={styles.breadcrumbs} />
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs items={[{ label: t('scenarios.title') }]} className={styles.breadcrumbs} />
+        <div className={styles.toolbarActions}>
+          <Button size="sm" onClick={() => navigate('/scenarios/new')}>
+            <Plus size={14} />
+            {t('scenarios.action_add')}
+          </Button>
+        </div>
+      </div>
       {error && <p className={styles.error}>{error}</p>}
       <Table
         columns={columns}

client/src/pages/session/SessionDetailPage.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Trash2 } from 'lucide-react';
-import { sessions } from '../api';
-import type { Session } from '../api';
-import { Badge, Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
-import styles from './Page.module.css';
+import { sessions } from '../../api';
+import type { Session } from '../../api';
+import { Badge, Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
 
 export function SessionDetailPage() {
   const { t } = useTranslation();

client/src/pages/session/SessionsPage.tsx

@@ -2,10 +2,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Trash2 } from 'lucide-react';
-import { sessions } from '../api';
-import type { Session } from '../api';
-import { Badge, Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../ui';
-import styles from './Page.module.css';
+import { sessions } from '../../api';
+import type { Session } from '../../api';
+import { Badge, Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
 
 export function SessionsPage() {
   const { t } = useTranslation();