ask user to install bridge plugin for vault copied to server at runtime

src/ui/bootstrap.js

@@ -48,6 +48,42 @@ export function showConfirmDialog(
   });
 }
 
+export function showPluginInstallDialog(vaultId) {
+  return new Promise((resolve) => {
+    const dialog = new window.IgnisUI.PluginInstallDialog({
+      target: document.body,
+    });
+
+    dialog.$on("install", async () => {
+      try {
+        await fetch("/api/vault/install-plugin", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ vault: vaultId }),
+        });
+      } catch (e) {
+        console.error("[ignis] Failed to install plugin:", e);
+      }
+      dialog.$destroy();
+      resolve("install");
+    });
+
+    dialog.$on("dismiss", async () => {
+      try {
+        await fetch("/api/vault/install-plugin", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ vault: vaultId, dismiss: true }),
+        });
+      } catch (e) {
+        console.error("[ignis] Failed to dismiss plugin prompt:", e);
+      }
+      dialog.$destroy();
+      resolve("dismiss");
+    });
+  });
+}
+
 export function showPromptDialog(
   title,
   label,

src/ui/components/layout/PluginInstallDialog.svelte

@@ -0,0 +1,89 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+  import { Puzzle, Download, X } from "lucide-svelte";
+
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+  let installing = false;
+
+  function onInstall() {
+    installing = true;
+    dispatch("install");
+  }
+
+  function onDismiss() {
+    modalRef.dismiss();
+    dispatch("dismiss");
+  }
+
+  function onEscape() {
+    onDismiss();
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal title="Ignis Bridge Plugin" {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
+  <svelte:fragment slot="icon">
+    <Puzzle size="1.25rem" />
+  </svelte:fragment>
+
+  <div class="dialog-body">
+    <p class="dialog-message">This vault doesn't have the Ignis Bridge plugin installed.</p>
+    <p class="dialog-description">
+      The plugin adds additional functionality such as file uploads.
+      Obsidian will work without it, but some features will be unavailable.
+    </p>
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="dialog-footer">
+      <Button variant="secondary" on:click={onDismiss}>
+        <svelte:fragment slot="icon">
+          <X size="0.875rem" />
+        </svelte:fragment>
+        Not Now
+      </Button>
+      <Button variant="primary" on:click={onInstall} disabled={installing}>
+        <svelte:fragment slot="icon">
+          <Download size="0.875rem" />
+        </svelte:fragment>
+        {installing ? "Installing..." : "Install Plugin"}
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .dialog-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .dialog-message {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-normal);
+  }
+
+  .dialog-description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>

src/ui/index.js

@@ -2,3 +2,4 @@ export { default as VaultManager } from "./views/VaultManager.svelte";
 export { default as MessageDialog } from "./components/layout/MessageDialog.svelte";
 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";