feat(export-import): add yaml export/import with id upsert for credentials, snippets, and scenarios

- all entities export a kind field (credential/snippet/scenario) for safe type checking on import
- import upserts by id: overwrites if id exists, creates with explicit id otherwise
- scenario export now includes id and step ids; import deletes old steps before recreating
- add GET /:id/export and POST /import endpoints to credential and snippet controllers
- add UuidBadge ui component: shortens uuid to first+last 4 hex chars, tooltip, clipboard copy with animated ClipboardCheck icon pop
- apply UuidBadge across all entity id display sites (detail pages, card footers, table columns)
- add export/import buttons to CredentialsPage, SnippetsPage, CredentialDetailPage, SnippetDetailPage

client/src/pages/scenario/ScenariosPage.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Play, Plus, Trash2 } from 'lucide-react';
+import { Play, Plus, Trash2, Upload } from 'lucide-react';
+import { parse as yamlParse } from 'yaml';
 import { scenarios } from '../../api';
 import type { Scenario } from '../../api';
-import { Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../../ui';
+import { Breadcrumbs, Button, Table, type TableColumn, Timestamp, UuidBadge } from '../../ui';
 import styles from '../Page.module.css';
 
 export function ScenariosPage() {
@@ -14,6 +15,8 @@ export function ScenariosPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   const load = useCallback(() => {
     scenarios
       .list()
@@ -26,19 +29,33 @@ export function ScenariosPage() {
     load();
   }, [load]);
 
-  const handleRun = async (id: number) => {
+  const handleRun = async (id: string) => {
     const run = await scenarios.run(id);
     navigate(`/scenarios/${id}/runs/${run.id}`);
   };
 
-  const handleDelete = async (id: number) => {
+  const handleDelete = async (id: string) => {
     await scenarios.remove(id);
     setLoading(true);
     load();
   };
 
+  const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    e.target.value = '';
+    try {
+      const text = await file.text();
+      const payload = yamlParse(text) as unknown;
+      const imported = await scenarios.importScenario(payload);
+      navigate(`/scenarios/${imported.id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
   const columns: TableColumn<Scenario>[] = [
-    { key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
+    { key: 'id', header: t('scenarios.col_id'), render: (s) => <UuidBadge id={s.id} />, width: 60 },
     { key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
     {
       key: 'updated',
@@ -74,6 +91,17 @@ export function ScenariosPage() {
       <div className={styles.pageToolbar}>
         <Breadcrumbs items={[{ label: t('scenarios.title') }]} className={styles.breadcrumbs} />
         <div className={styles.toolbarActions}>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".yaml,.yml,.json"
+            style={{ display: 'none' }}
+            onChange={handleImport}
+          />
+          <Button variant="secondary" size="sm" onClick={() => fileInputRef.current?.click()}>
+            <Upload size={14} />
+            {t('scenarios.action_import')}
+          </Button>
           <Button size="sm" onClick={() => navigate('/scenarios/new')}>
             <Plus size={14} />
             {t('scenarios.action_add')}