feat(app): add environment import/export and sidebar footer info

- add environment import/export API endpoints and client integration

- add environment export actions and toolbar import/export buttons in UI

- move theme switcher to sidebar bottom and show root package version

- switch snippet card menu icon to cog for consistent options affordance

client/src/pages/environment/EnvironmentsPage.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Settings, ExternalLink, Pencil, Trash2, Plus, Globe } from 'lucide-react';
+import { Settings, ExternalLink, Pencil, Trash2, Plus, Globe, Download } from 'lucide-react';
+import { parse as yamlParse } from 'yaml';
+import { stringify as yamlStringify } from 'yaml';
 import { environments } from '../../api';
 import type { Environment } from '../../api';
 import {
@@ -20,6 +22,17 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: s
   const navigate = useNavigate();
   const urlEntries = Object.entries(env.urls).filter(([, v]) => v);
 
+  const handleExport = async () => {
+    const data = await environments.exportEnvironment(env.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 = `environment-${env.name}.yaml`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   const header = (
     <div className={styles.envCardHeader}>
       <span className={styles.envCardName}>{env.name}</span>
@@ -42,6 +55,11 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: s
               icon: <Pencil size={14} />,
               onClick: () => navigate(`/environments/${env.id}/edit`),
             },
+            {
+              label: t('environments.action_export'),
+              icon: <Download size={14} />,
+              onClick: () => void handleExport(),
+            },
             {
               label: t('environments.action_delete'),
               icon: <Trash2 size={14} />,
@@ -98,9 +116,11 @@ function AddEnvironmentCard() {
 
 export function EnvironmentsPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [items, setItems] = useState<Environment[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = () => {
     environments
@@ -119,10 +139,37 @@ export function EnvironmentsPage() {
     setItems((prev) => prev.filter((e) => e.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 environments.importEnvironment(payload);
+      navigate(`/environments/${imported.id}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
   return (
     <div>
       <div className={styles.pageToolbar}>
         <Breadcrumbs items={[{ label: t('environments.title'), icon: <Globe size={14} /> }]} />
+        <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()}>
+            <Download size={14} />
+            {t('environments.action_import')}
+          </Button>
+        </div>
       </div>
       {error && <p className={styles.error}>{error}</p>}
       {loading ? (