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/environment/EnvironmentsPage.tsx

@@ -4,10 +4,10 @@ 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 { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp, UuidBadge } from '../../ui';
 import styles from '../Page.module.css';
 
-function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: number) => void }) {
+function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: string) => void }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const urlEntries = Object.entries(env.urls).filter(([, v]) => v);
@@ -48,7 +48,7 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
 
   const footer = (
     <div className={styles.envCardFooter}>
-      <span className={styles.envCardId}>#{env.id}</span>
+      <UuidBadge id={env.id} />
       <Timestamp value={env.updatedAt} />
     </div>
   );
@@ -106,7 +106,7 @@ export function EnvironmentsPage() {
     load();
   }, []);
 
-  const handleDelete = async (id: number) => {
+  const handleDelete = async (id: string) => {
     await environments.remove(id);
     setItems((prev) => prev.filter((e) => e.id !== id));
   };