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/credential/CredentialsPage.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 { Settings, Pencil, Trash2, Plus } from 'lucide-react';
+import { Settings, Pencil, Trash2, Plus, Upload } from 'lucide-react';
+import { parse as yamlParse } from 'yaml';
 import { credentials } from '../../api';
 import type { Credential } from '../../api';
-import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../../ui';
+import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp, UuidBadge } from '../../ui';
 import styles from '../Page.module.css';
 
 function CredentialCard({
@@ -12,7 +13,7 @@ function CredentialCard({
   onDelete,
 }: {
   credential: Credential;
-  onDelete: (id: number) => void;
+  onDelete: (id: string) => void;
 }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -48,7 +49,7 @@ function CredentialCard({
 
   const footer = (
     <div className={styles.envCardFooter}>
-      <span className={styles.envCardId}>#{credential.id}</span>
+      <UuidBadge id={credential.id} />
       <Timestamp value={credential.updatedAt} />
     </div>
   );
@@ -90,9 +91,11 @@ function AddCredentialCard() {
 
 export function CredentialsPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [items, setItems] = useState<Credential[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = () => {
     credentials
@@ -106,14 +109,43 @@ export function CredentialsPage() {
     load();
   }, []);
 
-  const handleDelete = async (id: number) => {
+  const handleDelete = async (id: string) => {
     await credentials.remove(id);
     setItems((prev) => prev.filter((c) => c.id !== id));
   };
 
+  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 credentials.importCredential(payload);
+      navigate(`/credentials/${imported.id}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
   return (
     <div>
-      <Breadcrumbs items={[{ label: t('credentials.title') }]} className={styles.breadcrumbs} />
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs items={[{ label: t('credentials.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('credentials.action_import')}
+          </Button>
+        </div>
+      </div>
       {error && <p className={styles.error}>{error}</p>}
       {loading ? (
         <p className={styles.muted}>{t('credentials.loading')}</p>