feat(scenarios): add detail page, comfortable DescriptionList layout, and environment card refactor

- Add ScenarioDetailPage with DescriptionList, steps table, run/delete actions
- Add /scenarios/:id route
- Add i18n keys for scenario detail fields, steps columns, and 404 error
- Add 'comfortable' and 'inline' layout variants to DescriptionList (with compact as default stacked)
- Apply layout="comfortable" to session, environment, and scenario detail pages
- Apply layout="compact" to EnvironmentsPage card DescriptionList
- Refactor EnvironmentsPage card to use ContextMenu (view/edit/delete) with icons
- Add ScenariosPage clickable rows, Play icon (primary) and Trash2 icon (danger) action buttons
- Add Page.module.css sectionHeading and stepsSection utility classes
- Fix Notification.tsx and Table.tsx formatting (prettier)

client/src/App.tsx

@@ -8,6 +8,7 @@ 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 { NavLink, Navigate, Route, Routes } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Globe, KeyRound, Monitor, ClipboardList } from 'lucide-react';
@@ -61,6 +62,7 @@ export default function App() {
           <Route path="/sessions" element={<SessionsPage />} />
           <Route path="/sessions/:id" element={<SessionDetailPage />} />
           <Route path="/scenarios" element={<ScenariosPage />} />
+          <Route path="/scenarios/:id" element={<ScenarioDetailPage />} />
           <Route path="*" element={<Navigate to="/scenarios" replace />} />
         </Routes>
       </main>

client/src/i18n/locales/en.json

@@ -3,6 +3,7 @@
     "not_found": "Not found",
     "not_found_session": "Session {{id}} does not exist or has been deleted.",
     "not_found_environment": "Environment {{id}} does not exist or has been deleted.",
+    "not_found_scenario": "Scenario {{id}} does not exist or has been deleted.",
     "generic": "Something went wrong. Please try again."
   },
   "nav": {
@@ -70,8 +71,19 @@
     "col_name": "Name",
     "col_updated": "Updated",
     "empty": "No scenarios yet.",
+    "loading": "Loading…",
     "action_run": "Run",
-    "action_delete": "Delete"
+    "action_delete": "Delete",
+    "field_id": "ID",
+    "field_name": "Name",
+    "field_steps": "Steps",
+    "field_created": "Created",
+    "field_updated": "Updated",
+    "steps_heading": "Steps",
+    "step_order": "#",
+    "step_type": "Type",
+    "step_session": "Session",
+    "step_updated": "Updated"
   },
   "theme": {
     "switch_to_light": "Switch to light theme",

client/src/pages/CreateEnvironmentPage.tsx

@@ -91,11 +91,7 @@ export function CreateEnvironmentPage() {
           </div>
 
           <div className={styles.formActions}>
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => navigate('/environments')}
-            >
+            <Button type="button" variant="secondary" onClick={() => navigate('/environments')}>
               {t('environments.action_cancel')}
             </Button>
             <Button type="submit" loading={saving}>

client/src/pages/EnvironmentDetailPage.tsx

@@ -41,7 +41,11 @@ export function EnvironmentDetailPage() {
         />
         {env && (
           <div className={styles.toolbarActions}>
-            <Button variant="secondary" size="sm" onClick={() => navigate(`/environments/${env.id}/edit`)}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => navigate(`/environments/${env.id}/edit`)}
+            >
               <Pencil size={14} />
               {t('environments.action_edit')}
             </Button>
@@ -68,6 +72,7 @@ export function EnvironmentDetailPage() {
         <>
           <div className={styles.detailMeta}>
             <DescriptionList
+              layout="comfortable"
               items={[
                 { term: t('environments.field_id'), detail: env.id },
                 {
@@ -88,6 +93,7 @@ export function EnvironmentDetailPage() {
               <p className={styles.muted}>{t('environments.no_urls')}</p>
             ) : (
               <DescriptionList
+                layout="comfortable"
                 items={Object.entries(env.urls)
                   .filter(([, v]) => v)
                   .map(([key, value]) => ({

client/src/pages/EnvironmentsPage.tsx

@@ -15,7 +15,8 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
   const header = (
     <div className={styles.envCardHeader}>
       <span className={styles.envCardName}>{env.name}</span>
-      <div onClick={(e) => e.stopPropagation()}><ContextMenu
+      <div onClick={(e) => e.stopPropagation()}>
+        <ContextMenu
           align="right"
           trigger={
             <Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
@@ -40,7 +41,8 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
               onClick: () => onDelete(env.id),
             },
           ]}
-      /></div>
+        />
+      </div>
     </div>
   );
 
@@ -60,7 +62,11 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
       onClick={() => navigate(`/environments/${env.id}`)}
     >
       {urlEntries.length > 0 && (
-        <DescriptionList truncate items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))} />
+        <DescriptionList
+          layout="compact"
+          truncate
+          items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))}
+        />
       )}
       {urlEntries.length === 0 && (
         <p className={styles.envCardEmpty}>{t('environments.no_urls')}</p>

client/src/pages/Page.module.css

@@ -5,6 +5,17 @@
   color: var(--color-text);
 }
 
+.sectionHeading {
+  margin: var(--space-6) 0 var(--space-3);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.stepsSection {
+  margin-top: var(--space-2);
+}
+
 .breadcrumbs {
   margin-bottom: var(--space-4);
 }

client/src/pages/ScenarioDetailPage.tsx

@@ -0,0 +1,141 @@
+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 {
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  DescriptionList,
+  Notification,
+  Table,
+  Timestamp,
+  type TableColumn,
+} from '../ui';
+import styles from './Page.module.css';
+
+const STEP_TYPE_VARIANT: Record<string, 'info' | 'warning' | 'success'> = {
+  login: 'success',
+  exec: 'info',
+  sign: 'warning',
+};
+
+export function ScenarioDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [scenario, setScenario] = useState<(Scenario & { steps: ScenarioStep[] }) | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    scenarios
+      .get(Number(id))
+      .then(setScenario)
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleRun = async () => {
+    if (!scenario) return;
+    await scenarios.run(scenario.id);
+  };
+
+  const handleDelete = async () => {
+    if (!scenario) return;
+    await scenarios.remove(scenario.id);
+    navigate('/scenarios');
+  };
+
+  const stepColumns: TableColumn<ScenarioStep>[] = [
+    { key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
+    {
+      key: 'type',
+      header: t('scenarios.step_type'),
+      width: 90,
+      render: (s) => <Badge variant={STEP_TYPE_VARIANT[s.type] ?? 'neutral'}>{s.type}</Badge>,
+    },
+    { key: 'session', header: t('scenarios.step_session'), render: (s) => s.sessionName },
+    {
+      key: 'updated',
+      header: t('scenarios.step_updated'),
+      width: 140,
+      render: (s) => <Timestamp value={s.updatedAt} />,
+    },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            { label: scenario?.name ?? `#${id}` },
+          ]}
+        />
+        {scenario && (
+          <div className={styles.toolbarActions}>
+            <Button size="sm" onClick={handleRun}>
+              <Play size={14} />
+              {t('scenarios.action_run')}
+            </Button>
+            <Button variant="danger" size="sm" onClick={handleDelete}>
+              <Trash2 size={14} />
+              {t('scenarios.action_delete')}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <Notification
+          variant="error"
+          title={error.startsWith('404') ? t('errors.not_found') : undefined}
+        >
+          {error.startsWith('404') ? t('errors.not_found_scenario', { id }) : error}
+        </Notification>
+      )}
+      {loading && <p className={styles.muted}>{t('scenarios.loading')}</p>}
+
+      {scenario && (
+        <>
+          <Card>
+            <DescriptionList
+              layout="comfortable"
+              items={[
+                { term: t('scenarios.field_id'), detail: scenario.id },
+                { term: t('scenarios.field_name'), detail: scenario.name },
+                { term: t('scenarios.field_steps'), detail: scenario.steps.length },
+                {
+                  term: t('scenarios.field_created'),
+                  detail: <Timestamp value={scenario.createdAt} />,
+                },
+                {
+                  term: t('scenarios.field_updated'),
+                  detail: <Timestamp value={scenario.updatedAt} />,
+                },
+              ]}
+            />
+          </Card>
+
+          {scenario.steps.length > 0 && (
+            <div className={styles.stepsSection}>
+              <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
+              <Table
+                columns={stepColumns}
+                data={scenario.steps}
+                rowKey={(s) => s.id}
+                loading={false}
+                emptyMessage=""
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

client/src/pages/ScenariosPage.tsx

@@ -1,5 +1,7 @@
 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';
@@ -7,6 +9,7 @@ import styles from './Page.module.css';
 
 export function ScenariosPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [items, setItems] = useState<Scenario[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -45,15 +48,20 @@ export function ScenariosPage() {
     {
       key: 'actions',
       header: '',
-      width: 140,
+      width: 100,
       align: 'right',
       render: (s) => (
         <span style={{ display: 'inline-flex', gap: 6 }}>
-          <Button size="sm" onClick={() => handleRun(s.id)}>
-            {t('scenarios.action_run')}
+          <Button size="sm" title={t('scenarios.action_run')} onClick={() => handleRun(s.id)}>
+            <Play size={14} />
           </Button>
-          <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
-            {t('scenarios.action_delete')}
+          <Button
+            variant="danger"
+            size="sm"
+            title={t('scenarios.action_delete')}
+            onClick={() => handleDelete(s.id)}
+          >
+            <Trash2 size={14} />
           </Button>
         </span>
       ),
@@ -72,6 +80,7 @@ export function ScenariosPage() {
         emptyMessage={t('scenarios.empty')}
         pageSize={10}
         pageSizeOptions={[10, 25, 50]}
+        onRowClick={(s) => navigate(`/scenarios/${s.id}`)}
       />
     </div>
   );

client/src/pages/SessionDetailPage.tsx

@@ -60,6 +60,7 @@ export function SessionDetailPage() {
       {session && (
         <Card>
           <DescriptionList
+            layout="comfortable"
             items={[
               { term: t('sessions.field_id'), detail: session.id },
               { term: t('sessions.field_name'), detail: session.sessionName },
@@ -71,7 +72,10 @@ export function SessionDetailPage() {
                   </Badge>
                 ),
               },
-              { term: t('sessions.field_token'), detail: <code className={styles.codeInline}>{session.token}</code> },
+              {
+                term: t('sessions.field_token'),
+                detail: <code className={styles.codeInline}>{session.token}</code>,
+              },
               {
                 term: t('sessions.field_lastUsed'),
                 detail: session.lastUsedAt ? <Timestamp value={session.lastUsedAt} /> : '—',

client/src/pages/SessionsPage.tsx

@@ -39,9 +39,7 @@ export function SessionsPage() {
       key: 'status',
       header: t('sessions.col_status'),
       width: 100,
-      render: (s) => (
-        <Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>
-      ),
+      render: (s) => <Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>,
     },
     {
       key: 'lastUsed',

client/src/ui/DescriptionList/DescriptionList.module.css

@@ -45,3 +45,35 @@
   max-width: 100%;
 }
 
+/* ── Layout modifiers ───────────────────────────────────────── */
+
+.inline .row {
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.inline .term {
+  min-width: 120px;
+}
+
+.comfortable {
+  gap: 0;
+}
+
+.comfortable .row {
+  padding: var(--space-4) 0;
+}
+
+.comfortable .row:first-child {
+  padding-top: 0;
+}
+
+.comfortable .term {
+  margin-bottom: var(--space-1);
+}
+
+.comfortable .detail {
+  font-size: var(--font-size-md);
+}
+

client/src/ui/DescriptionList/DescriptionList.tsx

@@ -15,14 +15,19 @@ export interface DescriptionListItem {
 
 export interface DescriptionListProps {
   items: DescriptionListItem[];
-  /** 'compact' stacks term above detail; 'inline' places them side by side (default) */
-  layout?: 'inline' | 'compact';
+  /** 'compact' stacks term above detail; 'inline' places them side by side; 'comfortable' adds generous spacing with dividers (default) */
+  layout?: 'inline' | 'compact' | 'comfortable';
   /** Truncate detail values with ellipsis; full value shown in a tooltip on hover */
   truncate?: boolean;
   className?: string;
 }
 
-export function DescriptionList({ items, layout = 'inline', truncate, className }: DescriptionListProps) {
+export function DescriptionList({
+  items,
+  layout = 'inline',
+  truncate,
+  className,
+}: DescriptionListProps) {
   return (
     <dl className={[styles.list, styles[layout], className].filter(Boolean).join(' ')}>
       {items.map((item, i) => (

client/src/ui/Notification/Notification.tsx

@@ -18,12 +18,7 @@ const ICONS: Record<NotificationVariant, React.ReactNode> = {
   note: <StickyNote size={16} />,
 };
 
-export function Notification({
-  variant = 'info',
-  title,
-  children,
-  className,
-}: NotificationProps) {
+export function Notification({ variant = 'info', title, children, className }: NotificationProps) {
   return (
     <div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
       <span className={styles.icon}>{ICONS[variant]}</span>

client/src/ui/Table/Table.tsx

@@ -82,7 +82,9 @@ export function Table<T>({
             visibleData.map((row) => (
               <tr
                 key={rowKey(row)}
-                className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
+                className={[styles.tr, onRowClick ? styles.clickable : '']
+                  .filter(Boolean)
+                  .join(' ')}
                 onClick={onRowClick ? () => onRowClick(row) : undefined}
               >
                 {columns.map((col) => (