Add password-encrypted settings export/import

Closes #35. Exports the host environment — global AppSettings (already
the non-secret shape persisted to settings.json) plus the global secrets
that live in the OS keychain instead (the shared Claude Code OAuth login,
the model gateway's provider API key and master key) — to one
password-encrypted file, and restores it on another machine.
Per-project settings, per-project secrets, and Docker volumes are
deliberately out of scope; this is not a project backup.

Designed with the user in issue #35's comments: global settings only, no
docker volumes, the password is the lock/key, and the export is portable
as one file.

Crypto (storage/settings_crypto.rs): Argon2id derives a 256-bit key from
the password (memory-hard, meaningfully resistant to GPU/ASIC
brute-forcing in a way PBKDF2 at any reasonable iteration count is not),
AES-256-GCM does the actual encryption. A wrong password fails GCM's
authentication tag rather than producing silent garbage. Salt and nonce
are random per export and stored in the clear in the file header — their
job is uniqueness, not secrecy.

The save/open dialogs are opened from Rust, matching the boundary
file_commands.rs's pick_save_path/pick_files_to_upload already establish:
a frontend-driven dialog handing Rust a host path is the exact shape of
bug that produced this app's past criticals. preview_settings_import
resolves the chosen import path itself and remembers it
(AppState::pending_settings_import) so apply_settings_import re-reads the
same file without a path crossing back over IPC. The password is
re-entered rather than cached between preview and apply, so nothing here
holds decrypted plaintext in memory for longer than one command's
execution; the preview returned to the frontend carries counts and
presence flags only, never a secret value.

Import replaces settings wholesale (an import is "restore this
environment"), but only writes secrets actually present in the file — an
absent secret means "the source machine never had this configured," not
"delete this on import."

Added storage::secure::store_gateway_master_key and get_gateway_master_key
(read-only, unlike get_or_create_gateway_master_key which mints one as a
side effect) since neither existed and import needs to restore an exact
captured value rather than mint a new random one.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FGjXq6fqtAFHdbhk4f3PfZ

app/src/components/settings/ExportSettingsModal.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import ExportSettingsModal from "./ExportSettingsModal";
+
+const exportSettings = vi.fn();
+
+vi.mock("../../lib/tauri-commands", () => ({
+  exportSettings: (password: string) => exportSettings(password),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+function fillPasswords(password: string, confirm: string) {
+  fireEvent.change(screen.getByLabelText("Password"), { target: { value: password } });
+  fireEvent.change(screen.getByLabelText("Confirm password"), { target: { value: confirm } });
+}
+
+describe("ExportSettingsModal", () => {
+  it("keeps the submit button disabled until the passwords are long enough and match", () => {
+    render(<ExportSettingsModal onClose={vi.fn()} />);
+    const submit = screen.getByRole("button", { name: /choose where to save/i });
+    expect(submit).toBeDisabled();
+
+    fillPasswords("short", "short");
+    expect(submit).toBeDisabled();
+    expect(screen.getByText(/use at least 8 characters/i)).toBeInTheDocument();
+
+    fillPasswords("longenoughpassword", "different");
+    expect(submit).toBeDisabled();
+    expect(screen.getByText(/don't match/i)).toBeInTheDocument();
+
+    fillPasswords("longenoughpassword", "longenoughpassword");
+    expect(submit).not.toBeDisabled();
+  });
+
+  it("exports with the entered password and shows success", async () => {
+    exportSettings.mockResolvedValue(true);
+    render(<ExportSettingsModal onClose={vi.fn()} />);
+
+    fillPasswords("longenoughpassword", "longenoughpassword");
+    fireEvent.click(screen.getByRole("button", { name: /choose where to save/i }));
+
+    await waitFor(() => expect(exportSettings).toHaveBeenCalledWith("longenoughpassword"));
+    await waitFor(() => expect(screen.getByText(/settings exported/i)).toBeInTheDocument());
+  });
+
+  it("closes quietly when the save dialog is dismissed", async () => {
+    exportSettings.mockResolvedValue(false);
+    const onClose = vi.fn();
+    render(<ExportSettingsModal onClose={onClose} />);
+
+    fillPasswords("longenoughpassword", "longenoughpassword");
+    fireEvent.click(screen.getByRole("button", { name: /choose where to save/i }));
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    expect(screen.queryByText(/settings exported/i)).not.toBeInTheDocument();
+  });
+
+  it("shows an error rather than closing when the export fails", async () => {
+    exportSettings.mockRejectedValue("Disk is full");
+    const onClose = vi.fn();
+    render(<ExportSettingsModal onClose={onClose} />);
+
+    fillPasswords("longenoughpassword", "longenoughpassword");
+    fireEvent.click(screen.getByRole("button", { name: /choose where to save/i }));
+
+    await waitFor(() => expect(screen.getByText("Disk is full")).toBeInTheDocument());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});

app/src/components/settings/ExportSettingsModal.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import Modal from "../ui/Modal";
+import Button from "../ui/Button";
+import Field, { inputClass } from "../ui/Field";
+import { exportSettings } from "../../lib/tauri-commands";
+
+interface Props {
+  onClose: () => void;
+}
+
+const MIN_PASSWORD_LENGTH = 8;
+
+/**
+ * Password entry for exporting global settings. The save dialog itself opens
+ * from Rust once a password is confirmed here — see the doc comment on
+ * `commands::settings_export_commands` for why the host path never
+ * round-trips through this component.
+ */
+export default function ExportSettingsModal({ onClose }: Props) {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+
+  const mismatch = confirmPassword.length > 0 && password !== confirmPassword;
+  const tooShort = password.length > 0 && password.length < MIN_PASSWORD_LENGTH;
+  const canSubmit = password.length >= MIN_PASSWORD_LENGTH && password === confirmPassword;
+
+  const handleExport = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const saved = await exportSettings(password);
+      if (saved) setDone(true);
+      // `false` means the save dialog was dismissed — close quietly, same as
+      // if the user had cancelled the modal itself.
+      else onClose();
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="Export settings"
+      description="Saves your global settings and any stored credentials (a shared Claude login, gateway keys) to one encrypted file. Project-specific settings and container data are not included."
+      widthClassName="w-[28rem]"
+      dismissible={!busy}
+      onClose={onClose}
+      footer={
+        done ? (
+          <Button size="md" variant="primary" onClick={onClose}>
+            Done
+          </Button>
+        ) : (
+          <>
+            <Button size="md" variant="ghost" onClick={onClose} disabled={busy}>
+              Cancel
+            </Button>
+            <Button
+              size="md"
+              variant="primary"
+              onClick={() => void handleExport()}
+              disabled={!canSubmit || busy}
+            >
+              {busy ? "Exporting…" : "Choose where to save…"}
+            </Button>
+          </>
+        )
+      }
+    >
+      {done ? (
+        <p className="text-[13px] text-[var(--success)]">
+          Settings exported. Keep the password somewhere safe — there is no way to recover
+          the file without it.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          <Field label="Password" hint={`At least ${MIN_PASSWORD_LENGTH} characters. You'll need this exact password to import the file later.`}>
+            {(id) => (
+              <input
+                id={id}
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={busy}
+                className={inputClass}
+              />
+            )}
+          </Field>
+          <Field label="Confirm password">
+            {(id) => (
+              <input
+                id={id}
+                type="password"
+                autoComplete="new-password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={busy}
+                className={inputClass}
+              />
+            )}
+          </Field>
+          {tooShort && (
+            <p className="text-xs text-[var(--error)]">
+              Use at least {MIN_PASSWORD_LENGTH} characters.
+            </p>
+          )}
+          {mismatch && <p className="text-xs text-[var(--error)]">Passwords don't match.</p>}
+          {error && <p className="text-xs text-[var(--error)]">{error}</p>}
+        </div>
+      )}
+    </Modal>
+  );
+}

app/src/components/settings/ImportSettingsModal.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import ImportSettingsModal from "./ImportSettingsModal";
+import type { AppSettings, SettingsImportPreview } from "../../lib/types";
+
+const previewSettingsImport = vi.fn();
+const applySettingsImport = vi.fn();
+
+vi.mock("../../lib/tauri-commands", () => ({
+  previewSettingsImport: (password: string) => previewSettingsImport(password),
+  applySettingsImport: (password: string) => applySettingsImport(password),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+const samplePreview: SettingsImportPreview = {
+  exported_at: "2026-08-27T00:00:00Z",
+  app_version: "0.4.14",
+  custom_env_var_count: 2,
+  gateway_model_count: 0,
+  has_claude_code_settings: false,
+  has_claude_oauth_token: true,
+  has_gateway_api_key: false,
+  has_gateway_master_key: false,
+};
+
+describe("ImportSettingsModal", () => {
+  it("keeps 'Choose file' disabled until a password is entered", () => {
+    render(<ImportSettingsModal onClose={vi.fn()} onImported={vi.fn()} />);
+    expect(screen.getByRole("button", { name: /choose file/i })).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "hunter2" } });
+    expect(screen.getByRole("button", { name: /choose file/i })).not.toBeDisabled();
+  });
+
+  it("shows the preview and confirms with the same password used to open it", async () => {
+    previewSettingsImport.mockResolvedValue(samplePreview);
+    applySettingsImport.mockResolvedValue({} as AppSettings);
+    const onImported = vi.fn();
+    render(<ImportSettingsModal onClose={vi.fn()} onImported={onImported} />);
+
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "hunter2" } });
+    fireEvent.click(screen.getByRole("button", { name: /choose file/i }));
+
+    await waitFor(() => expect(previewSettingsImport).toHaveBeenCalledWith("hunter2"));
+    expect(await screen.findByText(/2 global custom env vars/i)).toBeInTheDocument();
+    expect(screen.getByText(/your shared claude login/i)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^import$/i }));
+    await waitFor(() => expect(applySettingsImport).toHaveBeenCalledWith("hunter2"));
+    await waitFor(() => expect(onImported).toHaveBeenCalledWith({}));
+    expect(await screen.findByText(/settings imported/i)).toBeInTheDocument();
+  });
+
+  it("closes quietly when the file picker is dismissed", async () => {
+    previewSettingsImport.mockResolvedValue(null);
+    const onClose = vi.fn();
+    render(<ImportSettingsModal onClose={onClose} onImported={vi.fn()} />);
+
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "hunter2" } });
+    fireEvent.click(screen.getByRole("button", { name: /choose file/i }));
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+  });
+
+  it("shows an error when the password is wrong rather than a blank preview", async () => {
+    previewSettingsImport.mockRejectedValue("Wrong password, or the file is corrupted.");
+    render(<ImportSettingsModal onClose={vi.fn()} onImported={vi.fn()} />);
+
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "wrong" } });
+    fireEvent.click(screen.getByRole("button", { name: /choose file/i }));
+
+    expect(await screen.findByText(/wrong password, or the file is corrupted/i)).toBeInTheDocument();
+  });
+
+  it("shows an error if applying the import fails, without claiming success", async () => {
+    previewSettingsImport.mockResolvedValue(samplePreview);
+    applySettingsImport.mockRejectedValue("Keychain write failed");
+    render(<ImportSettingsModal onClose={vi.fn()} onImported={vi.fn()} />);
+
+    fireEvent.change(screen.getByLabelText("Password"), { target: { value: "hunter2" } });
+    fireEvent.click(screen.getByRole("button", { name: /choose file/i }));
+    await screen.findByText(/2 global custom env vars/i);
+
+    fireEvent.click(screen.getByRole("button", { name: /^import$/i }));
+    expect(await screen.findByText("Keychain write failed")).toBeInTheDocument();
+    expect(screen.queryByText(/settings imported/i)).not.toBeInTheDocument();
+  });
+});

app/src/components/settings/ImportSettingsModal.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import Modal from "../ui/Modal";
+import Button from "../ui/Button";
+import Field, { inputClass } from "../ui/Field";
+import { applySettingsImport, previewSettingsImport } from "../../lib/tauri-commands";
+import { describeImport } from "../../lib/settingsImportPreview";
+import type { AppSettings, SettingsImportPreview } from "../../lib/types";
+
+interface Props {
+  onClose: () => void;
+  /** Fired once the import is actually applied, so the caller can refresh
+   *  whatever reads settings from the store. */
+  onImported: (settings: AppSettings) => void;
+}
+
+/**
+ * Two phases: enter the password and pick the file (backend resolves the
+ * file dialog itself — see `commands::settings_export_commands`), then
+ * confirm a preview before anything is actually applied. The same password
+ * is reused for the second call rather than asking again; nothing about
+ * that call needs a fresh secret; the backend just doesn't cache the
+ * *decrypted payload* between the two.
+ */
+export default function ImportSettingsModal({ onClose, onImported }: Props) {
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [preview, setPreview] = useState<SettingsImportPreview | null>(null);
+  const [applied, setApplied] = useState(false);
+
+  const handleChooseFile = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const result = await previewSettingsImport(password);
+      if (result) setPreview(result);
+      else onClose(); // File picker dismissed.
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleConfirm = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const settings = await applySettingsImport(password);
+      setApplied(true);
+      onImported(settings);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="Import settings"
+      description={
+        preview
+          ? "Review what this file will change before applying it."
+          : "Choose a Triple-C settings export and enter the password it was created with."
+      }
+      widthClassName="w-[28rem]"
+      dismissible={!busy}
+      onClose={onClose}
+      footer={
+        applied ? (
+          <Button size="md" variant="primary" onClick={onClose}>
+            Done
+          </Button>
+        ) : preview ? (
+          <>
+            <Button size="md" variant="ghost" onClick={onClose} disabled={busy}>
+              Cancel
+            </Button>
+            <Button size="md" variant="primary" onClick={() => void handleConfirm()} disabled={busy}>
+              {busy ? "Importing…" : "Import"}
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button size="md" variant="ghost" onClick={onClose} disabled={busy}>
+              Cancel
+            </Button>
+            <Button
+              size="md"
+              variant="primary"
+              onClick={() => void handleChooseFile()}
+              disabled={!password || busy}
+            >
+              {busy ? "Opening…" : "Choose file…"}
+            </Button>
+          </>
+        )
+      }
+    >
+      {applied ? (
+        <p className="text-[13px] text-[var(--success)]">Settings imported.</p>
+      ) : preview ? (
+        <div className="space-y-3">
+          <p className="text-xs text-[var(--text-secondary)]">
+            Exported {new Date(preview.exported_at).toLocaleString()} from Triple-C{" "}
+            {preview.app_version}.
+          </p>
+          <div>
+            <p className="text-[13px] font-medium text-[var(--text-primary)]">This will replace:</p>
+            <ul className="mt-1 list-disc pl-4 text-[13px] text-[var(--text-secondary)] space-y-0.5">
+              {describeImport(preview).map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          {error && <p className="text-xs text-[var(--error)]">{error}</p>}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <Field label="Password">
+            {(id) => (
+              <input
+                id={id}
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={busy}
+                className={inputClass}
+              />
+            )}
+          </Field>
+          {error && <p className="text-xs text-[var(--error)]">{error}</p>}
+        </div>
+      )}
+    </Modal>
+  );
+}

app/src/components/settings/SettingsPanel.tsx

@@ -19,9 +19,11 @@ import WebTerminalSettings from "./WebTerminalSettings";
 import SttSettings from "./SttSettings";
 import SharedAuthSettings from "./SharedAuthSettings";
 import CertificateSettings from "./CertificateSettings";
+import ExportSettingsModal from "./ExportSettingsModal";
+import ImportSettingsModal from "./ImportSettingsModal";
 
 export default function SettingsPanel() {
-  const { appSettings, saveSettings } = useSettings();
+  const { appSettings, saveSettings, setAppSettings } = useSettings();
   const { appVersion, imageUpdateInfo, checkForUpdates, checkImageUpdate } = useUpdates();
   const [globalInstructions, setGlobalInstructions] = useState(appSettings?.global_claude_instructions ?? "");
   const [globalEnvVars, setGlobalEnvVars] = useState<EnvVar[]>(appSettings?.global_custom_env_vars ?? []);
@@ -33,6 +35,8 @@ export default function SettingsPanel() {
   const [showInstructionsModal, setShowInstructionsModal] = useState(false);
   const [showEnvVarsModal, setShowEnvVarsModal] = useState(false);
   const [showClaudeCodeSettingsModal, setShowClaudeCodeSettingsModal] = useState(false);
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
 
   // Sync local state when appSettings change
   useEffect(() => {
@@ -269,6 +273,39 @@ export default function SettingsPanel() {
         </div>
       </AccordionSection>
 
+      <AccordionSection id="backup" title="Backup" defaultOpen={false}>
+        <div className="space-y-2">
+          <p className="text-xs text-[var(--text-secondary)] leading-snug">
+            Export your global settings and stored credentials (a shared Claude login,
+            gateway keys) to one password-encrypted file, or restore them on a new machine.
+            Project-specific settings and container data are never included.
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setShowExportModal(true)}
+              className="px-3 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
+            >
+              Export settings…
+            </button>
+            <button
+              onClick={() => setShowImportModal(true)}
+              className="px-3 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
+            >
+              Import settings…
+            </button>
+          </div>
+        </div>
+      </AccordionSection>
+
+      {showExportModal && <ExportSettingsModal onClose={() => setShowExportModal(false)} />}
+
+      {showImportModal && (
+        <ImportSettingsModal
+          onClose={() => setShowImportModal(false)}
+          onImported={(settings) => setAppSettings(settings)}
+        />
+      )}
+
       {showInstructionsModal && (
         <ClaudeInstructionsModal
           instructions={globalInstructions}

app/src/hooks/useSettings.ts

@@ -36,5 +36,9 @@ export function useSettings() {
     appSettings,
     loadSettings,
     saveSettings,
+    /** For a command that already returns the new `AppSettings` itself
+     *  (settings import) — updates the store without a redundant
+     *  `updateSettings` round trip through the backend. */
+    setAppSettings,
   };
 }

app/src/lib/settingsImportPreview.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { describeImport } from "./settingsImportPreview";
+import type { SettingsImportPreview } from "./types";
+
+function preview(overrides: Partial<SettingsImportPreview> = {}): SettingsImportPreview {
+  return {
+    exported_at: "2026-08-27T00:00:00Z",
+    app_version: "0.4.14",
+    custom_env_var_count: 0,
+    gateway_model_count: 0,
+    has_claude_code_settings: false,
+    has_claude_oauth_token: false,
+    has_gateway_api_key: false,
+    has_gateway_master_key: false,
+    ...overrides,
+  };
+}
+
+describe("describeImport", () => {
+  it("always names the settings replacement, even with nothing else set", () => {
+    expect(describeImport(preview())).toEqual([
+      "Your global settings (all of them — this replaces what's here now)",
+    ]);
+  });
+
+  it("singularizes a count of exactly one", () => {
+    const items = describeImport(preview({ custom_env_var_count: 1, gateway_model_count: 1 }));
+    expect(items).toContain("1 global custom env var");
+    expect(items).toContain("1 gateway model");
+  });
+
+  it("pluralizes counts greater than one", () => {
+    const items = describeImport(preview({ custom_env_var_count: 3, gateway_model_count: 2 }));
+    expect(items).toContain("3 global custom env vars");
+    expect(items).toContain("2 gateway models");
+  });
+
+  it("names every present secret and setting without naming absent ones", () => {
+    const items = describeImport(
+      preview({
+        has_claude_code_settings: true,
+        has_claude_oauth_token: true,
+        has_gateway_api_key: true,
+        has_gateway_master_key: true,
+      }),
+    );
+    expect(items).toContain("Global Claude Code settings");
+    expect(items).toContain("Your shared Claude login");
+    expect(items).toContain("The gateway provider API key");
+    expect(items).toContain("The gateway master key");
+    // None of the count-based items, since both counts are 0.
+    expect(items.some((i) => i.includes("env var"))).toBe(false);
+    expect(items.some((i) => i.includes("gateway model"))).toBe(false);
+  });
+});

app/src/lib/settingsImportPreview.ts

@@ -0,0 +1,20 @@
+import type { SettingsImportPreview } from "./types";
+
+/** Named things a `SettingsImportPreview` says an import will change, for
+ *  `ImportSettingsModal`'s confirmation list. */
+export function describeImport(preview: SettingsImportPreview): string[] {
+  const items: string[] = ["Your global settings (all of them — this replaces what's here now)"];
+  if (preview.custom_env_var_count > 0) {
+    items.push(
+      `${preview.custom_env_var_count} global custom env var${preview.custom_env_var_count === 1 ? "" : "s"}`,
+    );
+  }
+  if (preview.has_claude_code_settings) items.push("Global Claude Code settings");
+  if (preview.gateway_model_count > 0) {
+    items.push(`${preview.gateway_model_count} gateway model${preview.gateway_model_count === 1 ? "" : "s"}`);
+  }
+  if (preview.has_claude_oauth_token) items.push("Your shared Claude login");
+  if (preview.has_gateway_api_key) items.push("The gateway provider API key");
+  if (preview.has_gateway_master_key) items.push("The gateway master key");
+  return items;
+}

app/src/lib/tauri-commands.ts

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
-import type { Project, ProjectPath, ProjectRemovalReport, ProjectResetOutcome, ContainerInfo, AppSettings, UpdateInfo, ImageUpdateInfo, FileEntry, FileContents, WebTerminalInfo, SttStatus, GatewayStatus, InstallOptions, ClaudeSession, ContainerCapabilities, ScheduledTask, ScheduledTaskInput, SchedulerNotification, AuthBridgeStatus, BrowserViewStatus, BrowserViewPopoutState, BrowserPageState, PlaywrightDetection, BrowserSetupOutcome, BrowserInstallTarget, ContainerStaleness, MigrationOptions, MigrationReport, MigrationState, ClearTokenOutcome, CaCertInfo, UploadOutcome } from "./types";
+import type { Project, ProjectPath, ProjectRemovalReport, ProjectResetOutcome, ContainerInfo, AppSettings, SettingsImportPreview, UpdateInfo, ImageUpdateInfo, FileEntry, FileContents, WebTerminalInfo, SttStatus, GatewayStatus, InstallOptions, ClaudeSession, ContainerCapabilities, ScheduledTask, ScheduledTaskInput, SchedulerNotification, AuthBridgeStatus, BrowserViewStatus, BrowserViewPopoutState, BrowserPageState, PlaywrightDetection, BrowserSetupOutcome, BrowserInstallTarget, ContainerStaleness, MigrationOptions, MigrationReport, MigrationState, ClearTokenOutcome, CaCertInfo, UploadOutcome } from "./types";
 
 // Docker
 export const checkDocker = () => invoke<boolean>("check_docker");
@@ -42,6 +42,15 @@ export const inspectCaCertPath = (path: string) =>
 export const detectHostTimezone = () =>
   invoke<string>("detect_host_timezone");
 
+// Settings export/import — `false`/`null` mean the save/open dialog was
+// dismissed, not an error.
+export const exportSettings = (password: string) =>
+  invoke<boolean>("export_settings", { password });
+export const previewSettingsImport = (password: string) =>
+  invoke<SettingsImportPreview | null>("preview_settings_import", { password });
+export const applySettingsImport = (password: string) =>
+  invoke<AppSettings>("apply_settings_import", { password });
+
 // AWS
 export const awsSsoRefresh = (projectId: string) =>
   invoke<void>("aws_sso_refresh", { projectId });

app/src/lib/types.ts

@@ -292,6 +292,20 @@ export interface AppSettings {
   global_claude_code_settings: ClaudeCodeSettings | null;
 }
 
+/** What `preview_settings_import` returns before anything is applied —
+ *  counts and presence flags only, never a secret value itself. Built from
+ *  this, not from the raw import file, which the frontend never sees. */
+export interface SettingsImportPreview {
+  exported_at: string;
+  app_version: string;
+  custom_env_var_count: number;
+  gateway_model_count: number;
+  has_claude_code_settings: boolean;
+  has_claude_oauth_token: boolean;
+  has_gateway_api_key: boolean;
+  has_gateway_master_key: boolean;
+}
+
 /** What `inspect_ca_cert_path` reports about a corporate CA path. Errors ride
  *  in the payload rather than rejecting, so the field can render them inline
  *  while the user is still typing. */