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/snippet/EditSnippetPage.tsx

@@ -24,7 +24,7 @@ export function EditSnippetPage() {
   useEffect(() => {
     if (!id) return;
     snippets
-      .get(Number(id))
+      .get(id)
       .then((s) => {
         setSnippet(s);
         setName(s.name);
@@ -50,7 +50,7 @@ export function EditSnippetPage() {
     setSaving(true);
     setError(null);
     try {
-      await snippets.update(Number(id), {
+      await snippets.update(id!, {
         name: name.trim(),
         description: description.trim() || undefined,
         code: code.trim(),

client/src/pages/snippet/SnippetDetailPage.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Pencil, Trash2 } from 'lucide-react';
+import { Download, Pencil, Trash2 } from 'lucide-react';
+import { stringify as yamlStringify } from 'yaml';
 import { snippets } from '../../api';
 import type { Snippet } from '../../api';
-import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
+import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp, UuidBadge } from '../../ui';
 import styles from '../Page.module.css';
 
 export function SnippetDetailPage() {
@@ -18,7 +19,7 @@ export function SnippetDetailPage() {
   useEffect(() => {
     if (!id) return;
     snippets
-      .get(Number(id))
+      .get(id)
       .then(setSnippet)
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false));
@@ -30,6 +31,18 @@ export function SnippetDetailPage() {
     navigate('/snippets');
   };
 
+  const handleExport = async () => {
+    if (!snippet) return;
+    const data = await snippets.exportSnippet(snippet.id);
+    const blob = new Blob([yamlStringify(data)], { type: 'application/yaml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `snippet-${snippet.name}.yaml`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   return (
     <div>
       <div className={styles.pageToolbar}>
@@ -41,6 +54,10 @@ export function SnippetDetailPage() {
         />
         {snippet && (
           <div className={styles.toolbarActions}>
+            <Button variant="secondary" size="sm" onClick={handleExport}>
+              <Download size={14} />
+              {t('snippets.action_export')}
+            </Button>
             <Button
               variant="secondary"
               size="sm"
@@ -74,7 +91,7 @@ export function SnippetDetailPage() {
             <DescriptionList
               layout="comfortable"
               items={[
-                { term: t('snippets.field_id'), detail: snippet.id },
+                { term: t('snippets.field_id'), detail: <UuidBadge id={snippet.id} /> },
                 { term: t('snippets.field_name'), detail: snippet.name },
                 {
                   term: t('snippets.field_description'),

client/src/pages/snippet/SnippetsPage.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Code, Pencil, Trash2, Plus } from 'lucide-react';
+import { Code, Pencil, Trash2, Plus, Upload } from 'lucide-react';
+import { parse as yamlParse } from 'yaml';
 import { snippets } from '../../api';
 import type { Snippet } from '../../api';
-import { Breadcrumbs, Button, Card, ContextMenu, Timestamp } from '../../ui';
+import { Breadcrumbs, Button, Card, ContextMenu, Timestamp, UuidBadge } from '../../ui';
 import styles from '../Page.module.css';
 
 function SnippetCard({
@@ -12,7 +13,7 @@ function SnippetCard({
   onDelete,
 }: {
   snippet: Snippet;
-  onDelete: (id: number) => void;
+  onDelete: (id: string) => void;
 }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -48,7 +49,7 @@ function SnippetCard({
 
   const footer = (
     <div className={styles.envCardFooter}>
-      <span className={styles.envCardId}>#{snippet.id}</span>
+      <UuidBadge id={snippet.id} />
       <Timestamp value={snippet.updatedAt} />
     </div>
   );
@@ -83,9 +84,11 @@ function AddSnippetCard() {
 
 export function SnippetsPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [items, setItems] = useState<Snippet[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = () => {
     snippets
@@ -99,15 +102,42 @@ export function SnippetsPage() {
     load();
   }, []);
 
-  const handleDelete = async (id: number) => {
+  const handleDelete = async (id: string) => {
     await snippets.remove(id);
     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 snippets.importSnippet(payload);
+      navigate(`/snippets/${imported.id}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
   return (
     <div>
       <div className={styles.pageToolbar}>
         <Breadcrumbs items={[{ label: t('snippets.title') }]} />
+        <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('snippets.action_import')}
+          </Button>
+        </div>
       </div>
 
       {error && <p className={styles.error}>{error}</p>}