headless-sync vault setup

.gitignore

@@ -3,3 +3,4 @@ dist/
 investigation/
 vaults/
 plugin/main.js
+server/plugins/*/plugin/main.js

server/plugins/headless-sync/ob-cli.js

@@ -1,29 +1,38 @@
 const { spawn, execSync } = require("child_process");
 const os = require("os");
 
+const isWindows = process.platform === "win32";
+
 function checkInstalled() {
   try {
-    const output = execSync("ob --version", { stdio: "pipe" }).toString().trim();
+    const output = execSync("ob --version", {
+      stdio: "pipe",
+      windowsHide: true,
+    })
+      .toString()
+      .trim();
+
     return { installed: true, version: output || "unknown" };
   } catch {
     return { installed: false, version: null };
   }
 }
 
+function spawnOb(args, opts = {}) {
+  return spawn("ob", args, {
+    env: { ...process.env, HOME: os.homedir() },
+    shell: isWindows,
+    windowsHide: true,
+    ...opts,
+  });
+}
+
 function runCommand(args, opts = {}) {
   return new Promise((resolve, reject) => {
-    const spawnOpts = {
-      env: { ...process.env, HOME: os.homedir() },
-    };
-
-    if (opts.cwd) {
-      spawnOpts.cwd = opts.cwd;
-    }
-
     let stdout = "";
     let stderr = "";
 
-    const proc = spawn("ob", args, spawnOpts);
+    const proc = spawnOb(args, opts);
 
     proc.stdout.on("data", (data) => {
       stdout += data.toString();
@@ -49,4 +58,4 @@ function runCommand(args, opts = {}) {
   });
 }
 
-module.exports = { checkInstalled, runCommand };
+module.exports = { checkInstalled, spawnOb, runCommand };

server/plugins/headless-sync/plugin/src/api.js

@@ -39,6 +39,10 @@ function setupSync(vaultId, remoteVault, opts = {}) {
   return post("/setup", { vaultId, remoteVault, ...opts });
 }
 
+function createRemoteVault(name, encryption, password, region) {
+  return post("/create-remote-vault", { name, encryption, password, region });
+}
+
 function startSync(vaultId) {
   return post("/start", { vaultId });
 }
@@ -47,6 +51,10 @@ function stopSync(vaultId) {
   return post("/stop", { vaultId });
 }
 
+function unlinkVault(vaultId) {
+  return post("/unlink", { vaultId });
+}
+
 function getVaults() {
   return fetchJson("/vaults");
 }
@@ -61,8 +69,10 @@ module.exports = {
   logout,
   getRemoteVaults,
   setupSync,
+  createRemoteVault,
   startSync,
   stopSync,
+  unlinkVault,
   getVaults,
   getLogs,
 };

server/plugins/headless-sync/plugin/src/settings-tab.js

@@ -12,8 +12,6 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
     const { containerEl } = this;
     containerEl.empty();
 
-    containerEl.createEl("h2", { text: "Headless Sync" });
-
     let serverStatus;
 
     try {
@@ -35,10 +33,7 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
     }
 
     this.renderAuthSection(containerEl, serverStatus);
-
-    if (serverStatus.authenticated) {
-      await this.renderSyncSection(containerEl);
-    }
+    await this.renderSyncSection(containerEl, serverStatus.authenticated);
   }
 
   renderAuthSection(containerEl, serverStatus) {
@@ -52,18 +47,17 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
           `Signed in as ${serverStatus.name || "unknown"} (${serverStatus.email || "unknown"})`,
         )
         .addButton((btn) => {
-          btn
-            .setButtonText("Disconnect")
-            .setWarning()
-            .onClick(async () => {
-              try {
-                await api.logout();
-                new Notice("Disconnected from Headless Sync");
-                this.display();
-              } catch (e) {
-                new Notice(`Failed to disconnect: ${e.message}`);
-              }
-            });
+          btn.setButtonText("Disconnect");
+          btn.buttonEl.addClass("mod-destructive");
+          btn.onClick(async () => {
+            try {
+              await api.logout();
+              new Notice("Disconnected from Headless Sync");
+              this.display();
+            } catch (e) {
+              new Notice(`Failed to disconnect: ${e.message}`);
+            }
+          });
         });
     } else if (localToken) {
       // State B: signed into Obsidian, not connected to server
@@ -111,7 +105,21 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
     }
   }
 
-  async renderSyncSection(containerEl) {
+  async renderSyncSection(containerEl, authenticated) {
+    containerEl.createEl("h3", { text: "Vault sync" });
+
+    if (!authenticated) {
+      new Setting(containerEl)
+        .setName("Sync not configured")
+        .setDesc("Sign in to your Obsidian Sync account to set up sync.")
+        .addButton((btn) => {
+          btn.setButtonText("Set up sync");
+          btn.buttonEl.disabled = true;
+        });
+
+      return;
+    }
+
     const vaultId = this.app.vault.getName();
 
     let vaultsData;
@@ -128,8 +136,6 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
 
     const vaultState = vaultsData.vaults.find((v) => v.vaultId === vaultId);
 
-    containerEl.createEl("h3", { text: "Vault sync" });
-
     if (!vaultState) {
       new Setting(containerEl)
         .setName("Sync not configured")
@@ -139,7 +145,30 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
             .setButtonText("Set up sync")
             .setCta()
             .onClick(() => {
-              new Notice("Vault picker coming soon.");
+              const scope = this.app.setting.scope;
+              const prevFocusContainer = scope.tabFocusContainerEl;
+              scope.tabFocusContainerEl = null;
+
+              const cleanup = () => {
+                scope.tabFocusContainerEl = prevFocusContainer;
+              };
+
+              const modal = new window.IgnisUI.SyncSetupModal({
+                target: document.body,
+                props: {
+                  vaultId,
+                  onSuccess: () => {
+                    cleanup();
+                    modal.$destroy();
+                    this.display();
+                  },
+                },
+              });
+
+              modal.$on("close", () => {
+                cleanup();
+                modal.$destroy();
+              });
             });
         });
 
@@ -149,7 +178,20 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
     // Show current sync config
     new Setting(containerEl)
       .setName("Remote vault")
-      .setDesc(vaultState.remoteVault || "unknown");
+      .setDesc(vaultState.remoteVaultName || vaultState.remoteVault || "unknown")
+      .addButton((btn) => {
+        btn.setButtonText("Unlink");
+        btn.buttonEl.addClass("mod-destructive");
+        btn.onClick(async () => {
+          try {
+            await api.unlinkVault(vaultId);
+            new Notice("Vault unlinked");
+            this.display();
+          } catch (e) {
+            new Notice(`Failed to unlink: ${e.message}`);
+          }
+        });
+      });
 
     new Setting(containerEl)
       .setName("Sync mode")
@@ -168,7 +210,9 @@ class HeadlessSyncSettingTab extends PluginSettingTab {
       .setDesc(statusText)
       .addButton((btn) => {
         if (vaultState.status === "running") {
-          btn.setButtonText("Stop sync").setWarning().onClick(async () => {
+          btn.setButtonText("Stop sync");
+          btn.buttonEl.addClass("mod-destructive");
+          btn.onClick(async () => {
             try {
               await api.stopSync(vaultId);
               new Notice("Sync stopped");

server/plugins/headless-sync/plugin/styles.css

@@ -0,0 +1,40 @@
+.ignis-vault-list {
+  margin: 8px 0 16px;
+}
+
+.ignis-vault-row {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: var(--radius-s);
+  margin-bottom: 8px;
+}
+
+.ignis-vault-row-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ignis-vault-row-name {
+  font-weight: var(--font-semibold);
+  font-size: var(--font-ui-medium);
+}
+
+.ignis-vault-row-region {
+  font-size: var(--font-ui-small);
+  color: var(--text-muted);
+}
+
+.ignis-vault-connect-options {
+  padding: 8px 16px 16px;
+  margin-bottom: 8px;
+  border: 1px solid var(--background-modifier-border);
+  border-top: none;
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  margin-top: -8px;
+}
+
+.ignis-vault-connect-options .setting-item {
+  border-top: none;
+}

server/plugins/headless-sync/routes.js

@@ -49,7 +49,7 @@ function mountRoutes(router, plugin) {
   router.post("/setup", async (req, res) => {
     const ctx = plugin.getCtx();
     const syncManager = plugin.getSyncManager();
-    const { vaultId, remoteVault, vaultPassword, deviceName, mode } = req.body;
+    const { vaultId, remoteVault, remoteVaultName, vaultPassword, deviceName, mode } = req.body;
 
     if (!vaultId || !remoteVault) {
       return res.status(400).json({ error: "vaultId and remoteVault are required" });
@@ -67,6 +67,7 @@ function mountRoutes(router, plugin) {
 
     try {
       const state = await syncManager.setupSync(vaultId, vaultPath, remoteVault, {
+        remoteVaultName,
         vaultPassword,
         deviceName,
         mode,
@@ -115,6 +116,24 @@ function mountRoutes(router, plugin) {
     }
   });
 
+  router.post("/unlink", (req, res) => {
+    const ctx = plugin.getCtx();
+    const syncManager = plugin.getSyncManager();
+    const { vaultId } = req.body;
+
+    if (!vaultId) {
+      return res.status(400).json({ error: "vaultId is required" });
+    }
+
+    try {
+      syncManager.unlinkVault(vaultId);
+      res.json({ success: true });
+    } catch (e) {
+      ctx.log(`Failed to unlink vault: ${e.message}`);
+      res.status(500).json({ error: e.message });
+    }
+  });
+
   router.get("/logs", (req, res) => {
     const syncManager = plugin.getSyncManager();
     const { vaultId, limit } = req.query;
@@ -132,6 +151,42 @@ function mountRoutes(router, plugin) {
     res.json({ vaults: syncManager.getAllStates() });
   });
 
+  router.post("/create-remote-vault", async (req, res) => {
+    const ctx = plugin.getCtx();
+    const { name, encryption, password, region } = req.body;
+
+    if (!name) {
+      return res.status(400).json({ error: "name is required" });
+    }
+
+    if (!auth.isAuthenticated(ctx.dataDir)) {
+      return res.status(401).json({ error: "Not authenticated" });
+    }
+
+    const args = ["sync-create-remote", "--name", name];
+
+    if (encryption) {
+      args.push("--encryption", encryption);
+    }
+
+    if (password) {
+      args.push("--password", password);
+    }
+
+    if (region) {
+      args.push("--region", region);
+    }
+
+    try {
+      await obCli.runCommand(args);
+      ctx.log(`Created remote vault: ${name}`);
+      res.json({ success: true });
+    } catch (e) {
+      ctx.log(`Failed to create remote vault: ${e.message}`);
+      res.status(500).json({ error: e.message });
+    }
+  });
+
   router.get("/remote-vaults", async (req, res) => {
     const ctx = plugin.getCtx();
 
@@ -162,10 +217,10 @@ function parseRemoteVaults(stdout) {
     }
 
     // Format: [vaultId]  "[vaultName]"  ([region])
-    const match = trimmed.match(/^([a-f0-9]+)\s+"([^"]+)"/);
+    const match = trimmed.match(/^([a-f0-9]+)\s+"([^"]+)"\s+\(([^)]+)\)/);
 
     if (match) {
-      vaults.push({ id: match[1], name: match[2] });
+      vaults.push({ id: match[1], name: match[2], region: match[3] });
     }
   }
 

server/plugins/headless-sync/sync-manager.js

@@ -1,7 +1,6 @@
-const { spawn } = require("child_process");
 const fs = require("fs");
 const path = require("path");
-const os = require("os");
+const { spawnOb } = require("./ob-cli");
 
 const MAX_LOG_ENTRIES = 200;
 
@@ -28,6 +27,7 @@ class SyncManager {
           vaultId: entry.vaultId,
           vaultPath,
           remoteVault: entry.remoteVault,
+          remoteVaultName: entry.remoteVaultName || null,
           status: "stopped",
           pid: null,
           lastActivity: new Date().toISOString(),
@@ -56,6 +56,7 @@ class SyncManager {
         vaultId: state.vaultId,
         vaultPath: state.vaultPath,
         remoteVault: state.remoteVault,
+        remoteVaultName: state.remoteVaultName,
         config: state.config,
         autoStart: state.autoStart,
       });
@@ -83,6 +84,7 @@ class SyncManager {
       vaultId,
       vaultPath,
       remoteVault,
+      remoteVaultName: options.remoteVaultName || null,
       status: "stopped",
       pid: null,
       lastActivity: new Date().toISOString(),
@@ -123,10 +125,7 @@ class SyncManager {
       args.push("--mirror-remote");
     }
 
-    const proc = spawn("ob", args, {
-      cwd: state.vaultPath,
-      env: { ...process.env, HOME: os.homedir() },
-    });
+    const proc = spawnOb(args, { cwd: state.vaultPath });
 
     state.status = "running";
     state.pid = proc.pid;
@@ -214,6 +213,22 @@ class SyncManager {
     return this.getState(vaultId);
   }
 
+  unlinkVault(vaultId) {
+    const state = this.states.get(vaultId);
+
+    if (!state) {
+      throw new Error(`No sync configuration for vault: ${vaultId}`);
+    }
+
+    if (state._process) {
+      state._process.kill("SIGTERM");
+    }
+
+    this.states.delete(vaultId);
+    this.saveStates();
+    this.ctx.log(`Unlinked vault ${vaultId}`);
+  }
+
   getState(vaultId) {
     const state = this.states.get(vaultId);
 
@@ -224,6 +239,7 @@ class SyncManager {
     return {
       vaultId: state.vaultId,
       remoteVault: state.remoteVault,
+      remoteVaultName: state.remoteVaultName,
       status: state.status,
       pid: state.pid,
       lastActivity: state.lastActivity,

src/ui/index.js

@@ -3,3 +3,4 @@ export { default as MessageDialog } from "./components/layout/MessageDialog.svel
 export { default as ConfirmDialog } from "./components/layout/ConfirmDialog.svelte";
 export { default as PromptDialog } from "./components/layout/PromptDialog.svelte";
 export { default as PluginInstallDialog } from "./components/layout/PluginInstallDialog.svelte";
+export { default as SyncSetupModal } from "./views/SyncSetupModal.svelte";

src/ui/views/SyncSetupModal.svelte

@@ -0,0 +1,154 @@
+<script>
+  import { createEventDispatcher, onMount } from "svelte";
+  import Modal from "../components/layout/Modal.svelte";
+  import VaultList from "./sync/VaultList.svelte";
+  import CreateVaultForm from "./sync/CreateVaultForm.svelte";
+
+  export let vaultId;
+  export let onSuccess = null;
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+  let view = "list";
+  let vaults = [];
+  let loading = true;
+  let error = "";
+
+  onMount(() => {
+    fetchVaults();
+  });
+
+  async function fetchVaults() {
+    loading = true;
+    error = "";
+
+    try {
+      const res = await fetch("/api/ext/headless-sync/remote-vaults");
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Request failed: ${res.status}`);
+      }
+
+      const data = await res.json();
+      vaults = data.vaults;
+    } catch (e) {
+      error = e.message;
+    }
+
+    loading = false;
+  }
+
+  async function onLink(e) {
+    const { vault, vaultPassword, deviceName, mode } = e.detail;
+    error = "";
+
+    try {
+      const res = await fetch("/api/ext/headless-sync/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          vaultId,
+          remoteVault: vault.id,
+          remoteVaultName: vault.name,
+          vaultPassword,
+          deviceName,
+          mode,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Request failed: ${res.status}`);
+      }
+
+      if (onSuccess) {
+        onSuccess();
+      }
+
+      modalRef.dismiss();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  function onCreated() {
+    view = "list";
+    fetchVaults();
+  }
+
+  function onClose() {
+    dispatch("close");
+  }
+</script>
+
+<Modal
+  title={view === "list" ? "Set up Headless Sync" : "Create new remote vault"}
+  width="550px"
+  bind:this={modalRef}
+  on:close={onClose}
+  on:escape={onClose}
+>
+  <div class="sync-setup-body">
+    {#if view === "list"}
+      <p class="sync-setup-desc">
+        Link this vault to an Obsidian Sync remote vault for server-side synchronization.
+      </p>
+
+      {#if error}
+        <div class="sync-setup-error">
+          <p>Failed to load remote vaults: {error}</p>
+          <button class="retry-btn" on:click={fetchVaults}>Retry</button>
+        </div>
+      {:else}
+        <VaultList {vaults} {loading} on:link={onLink} on:create={() => (view = "create")} />
+      {/if}
+    {:else}
+      <p class="sync-setup-desc">
+        Create a new remote vault on Obsidian Sync.
+      </p>
+
+      <CreateVaultForm on:created={onCreated} on:back={() => (view = "list")} />
+    {/if}
+  </div>
+</Modal>
+
+<style>
+  .sync-setup-body {
+    padding: 1.25rem 1.5rem;
+    overflow-y: auto;
+  }
+
+  .sync-setup-desc {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    margin: 0 0 1rem;
+    line-height: 1.4;
+  }
+
+  .sync-setup-error {
+    color: var(--text-error);
+    font-size: 0.875rem;
+  }
+
+  .sync-setup-error p {
+    margin: 0 0 0.5rem;
+  }
+
+  .retry-btn {
+    font-family: var(--font-interface);
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    background: none;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+
+  .retry-btn:hover {
+    color: var(--text-normal);
+    background: var(--background-modifier-hover);
+  }
+</style>

src/ui/views/sync/CreateVaultForm.svelte

@@ -0,0 +1,185 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Button from "../../components/input/Button.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let name = "";
+  let region = "";
+  let encryption = "e2ee";
+  let password = "";
+  let creating = false;
+  let error = "";
+
+  async function onSubmit() {
+    error = "";
+
+    if (!name.trim()) {
+      error = "Vault name is required";
+      return;
+    }
+
+    if (encryption === "e2ee" && !password) {
+      error = "Encryption password is required for end-to-end encryption";
+      return;
+    }
+
+    creating = true;
+
+    try {
+      const res = await fetch("/api/ext/headless-sync/create-remote-vault", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          encryption,
+          password: password || undefined,
+          region: region || undefined,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Request failed: ${res.status}`);
+      }
+
+      dispatch("created");
+    } catch (e) {
+      error = e.message;
+      creating = false;
+    }
+  }
+
+  function onBack() {
+    dispatch("back");
+  }
+</script>
+
+<div class="create-form">
+  <div class="form-row">
+    <div class="form-label">
+      <div class="form-name">Vault name</div>
+      <div class="form-desc">Helps you remember what this vault is for</div>
+    </div>
+    <input type="text" placeholder="My awesome vault" bind:value={name} />
+  </div>
+
+  <div class="form-row">
+    <div class="form-label">
+      <div class="form-name">Region</div>
+      <div class="form-desc">Select the server region closest to you</div>
+    </div>
+    <select bind:value={region}>
+      <option value="">Automatic</option>
+      <option value="europe">Europe</option>
+      <option value="north-america">North America</option>
+      <option value="asia">Asia</option>
+      <option value="oceania">Oceania</option>
+    </select>
+  </div>
+
+  <div class="form-row">
+    <div class="form-label">
+      <div class="form-name">Encryption</div>
+      <div class="form-desc">
+        End-to-end encryption requires a password you must remember.
+        <span class="form-warning">This cannot be changed later.</span>
+      </div>
+    </div>
+    <select bind:value={encryption}>
+      <option value="e2ee">End-to-end encryption</option>
+      <option value="standard">Standard encryption</option>
+    </select>
+  </div>
+
+  {#if encryption === "e2ee"}
+    <div class="form-row">
+      <div class="form-label">
+        <div class="form-name">Encryption password</div>
+        <div class="form-desc">
+          <span class="form-warning">If you forget this password, any remote data will remain unusable forever.</span>
+          This does not affect your local data.
+        </div>
+      </div>
+      <input type="password" placeholder="Your password" bind:value={password} />
+    </div>
+  {/if}
+
+  {#if error}
+    <div class="form-error">{error}</div>
+  {/if}
+
+  <div class="form-footer">
+    <Button variant="secondary" on:click={onBack}>Back</Button>
+    <Button variant="primary" disabled={creating} on:click={onSubmit}>
+      {creating ? "Creating..." : "Create"}
+    </Button>
+  </div>
+</div>
+
+<style>
+  .form-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.75rem 0;
+  }
+
+  .form-row + .form-row {
+    border-top: 1px solid var(--background-modifier-border);
+  }
+
+  .form-label {
+    flex: 1;
+    min-width: 0;
+    margin-right: 1rem;
+  }
+
+  .form-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-normal);
+  }
+
+  .form-desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+    line-height: 1.4;
+  }
+
+  .form-warning {
+    color: var(--text-error);
+  }
+
+  input, select {
+    font-family: var(--font-interface);
+    font-size: 0.875rem;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    background: var(--background-primary);
+    color: var(--text-normal);
+    min-width: 200px;
+    margin-top: 0.125rem;
+  }
+
+  input:focus, select:focus {
+    outline: none;
+    border-color: var(--interactive-accent);
+  }
+
+  .form-error {
+    color: var(--text-error);
+    font-size: 0.8125rem;
+    padding: 0.5rem 0;
+  }
+
+  .form-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--background-modifier-border);
+  }
+</style>

src/ui/views/sync/VaultList.svelte

@@ -0,0 +1,94 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import VaultRow from "./VaultRow.svelte";
+  import Button from "../../components/input/Button.svelte";
+
+  export let vaults = [];
+  export let loading = false;
+
+  const dispatch = createEventDispatcher();
+
+  function onLink(e) {
+    dispatch("link", e.detail);
+  }
+
+  function onCreate() {
+    dispatch("create");
+  }
+</script>
+
+<div class="vault-list">
+  <h3 class="vault-list-heading">Your remote vaults</h3>
+
+  <div class="vault-list-items">
+    {#if loading}
+      <div class="vault-list-spinner-area">
+        <div class="vault-list-spinner"></div>
+      </div>
+    {:else if vaults.length === 0}
+      <p class="vault-list-empty">No remote vaults found. Create one to get started.</p>
+    {:else}
+      {#each vaults as vault (vault.id)}
+        <VaultRow {vault} on:link={onLink} />
+      {/each}
+    {/if}
+  </div>
+
+  <div class="vault-list-footer">
+    <Button variant="primary" disabled={loading} on:click={onCreate}>
+      Create new vault
+    </Button>
+  </div>
+</div>
+
+<style>
+  .vault-list-heading {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-normal);
+    margin: 0 0 0.75rem;
+  }
+
+  .vault-list-empty {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    margin: 0;
+    padding: 1rem 0;
+  }
+
+  .vault-list-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-height: 180px;
+    margin-bottom: 1rem;
+  }
+
+  .vault-list-spinner-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-height: 180px;
+  }
+
+  .vault-list-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--background-modifier-border);
+    border-top-color: var(--text-muted);
+    border-radius: 50%;
+    animation: ignis-vault-spin 0.8s linear infinite;
+  }
+
+  @keyframes ignis-vault-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .vault-list-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

src/ui/views/sync/VaultRow.svelte

@@ -0,0 +1,229 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { Pencil } from "lucide-svelte";
+  import Button from "../../components/input/Button.svelte";
+
+  export let vault;
+  export let linked = false;
+
+  const dispatch = createEventDispatcher();
+
+  let expanded = false;
+  let vaultPassword = "";
+  let deviceName = "ignis-headless";
+  let mode = "bidirectional";
+  let linking = false;
+
+  function toggleExpand() {
+    expanded = !expanded;
+  }
+
+  async function onLink() {
+    linking = true;
+
+    dispatch("link", {
+      vault,
+      vaultPassword: vaultPassword || undefined,
+      deviceName,
+      mode,
+    });
+  }
+
+  export function setLinking(val) {
+    linking = val;
+  }
+</script>
+
+<div class="vault-row" class:expanded>
+  <div class="vault-row-main">
+    <div class="vault-row-info">
+      <div class="vault-row-name">{vault.name}</div>
+      <div class="vault-row-region">{vault.region || "Unknown region"}</div>
+    </div>
+    <div class="vault-row-actions">
+      {#if linked}
+        <button class="icon-btn" title="Edit sync config" on:click={toggleExpand}>
+          <Pencil size="14" />
+        </button>
+      {:else}
+        <Button
+          variant="secondary"
+          on:click={toggleExpand}
+        >
+          {expanded ? "Cancel" : "Connect"}
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  {#if expanded}
+    <div class="vault-row-options">
+      <div class="option-row">
+        <div class="option-label">
+          <div class="option-name">Vault password</div>
+          <div class="option-desc">Required if the vault uses end-to-end encryption</div>
+        </div>
+        <input
+          type="password"
+          placeholder="Leave empty if not encrypted"
+          bind:value={vaultPassword}
+        />
+      </div>
+
+      <div class="option-row">
+        <div class="option-label">
+          <div class="option-name">Device name</div>
+          <div class="option-desc">Identifies this server in sync version history</div>
+        </div>
+        <input type="text" bind:value={deviceName} />
+      </div>
+
+      <div class="option-row">
+        <div class="option-label">
+          <div class="option-name">Sync mode</div>
+        </div>
+        <select bind:value={mode}>
+          <option value="bidirectional">Bidirectional</option>
+          <option value="pull-only">Pull only (remote to server)</option>
+          <option value="mirror-remote">Mirror remote (exact copy)</option>
+        </select>
+      </div>
+
+      <div class="option-footer">
+        {#if expanded && !linked}
+          <Button variant="secondary" on:click={toggleExpand}>Cancel</Button>
+        {/if}
+        <Button variant="primary" disabled={linking} on:click={onLink}>
+          {linking ? "Linking..." : "Link Vault"}
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .vault-row {
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    overflow: hidden;
+  }
+
+  .vault-row-main {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+  }
+
+  .vault-row-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .vault-row-name {
+    font-weight: 600;
+    font-size: 0.9375rem;
+    color: var(--text-normal);
+  }
+
+  .vault-row-region {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    margin-top: 0.125rem;
+  }
+
+  .vault-row-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .vault-row-actions :global(.btn.secondary) {
+    padding: 4px 12px;
+    border-radius: 5px;
+    border: none;
+    background: var(--interactive-normal);
+    color: var(--text-normal);
+  }
+
+  .vault-row-actions :global(.btn.secondary:hover:not(:disabled)) {
+    background: var(--interactive-hover);
+    color: var(--text-normal);
+  }
+
+  .icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 0.25rem;
+    background: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    box-shadow: none;
+  }
+
+  .icon-btn:hover {
+    color: var(--text-normal);
+    background: var(--background-modifier-hover);
+  }
+
+  .vault-row-options {
+    padding: 0.5rem 1rem 1rem;
+    border-top: 1px solid var(--background-modifier-border);
+    background: var(--background-primary-alt);
+  }
+
+  .option-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0;
+  }
+
+  .option-row + .option-row {
+    border-top: 1px solid var(--background-modifier-border);
+  }
+
+  .option-label {
+    flex: 1;
+    min-width: 0;
+    margin-right: 1rem;
+  }
+
+  .option-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-normal);
+  }
+
+  .option-desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.125rem;
+  }
+
+  input, select {
+    font-family: var(--font-interface);
+    font-size: 0.875rem;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    background: var(--background-primary);
+    color: var(--text-normal);
+    min-width: 200px;
+  }
+
+  input:focus, select:focus {
+    outline: none;
+    border-color: var(--interactive-accent);
+  }
+
+  .option-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.75rem;
+  }
+</style>