@abraca/nuxt 2.14.0 → 2.16.0

package/dist/runtime/components/settings/APluginsTabInstalled.vue

@@ -0,0 +1,413 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useToast } from "#imports";
+import { useInstalledPlugins, normalizePluginUrl } from "../../composables/useInstalledPlugins";
+import { usePluginCatalog } from "../../composables/usePluginCatalog";
+import { _putUploadedPluginBlob } from "../../composables/useUploadedPluginStore";
+const props = defineProps({
+  builtins: { type: Array, required: false }
+});
+const toast = useToast();
+const catalog = usePluginCatalog();
+const {
+  entries,
+  install: installEntry,
+  uninstall: uninstallEntry,
+  setEnabled,
+  updateMeta,
+  isBuiltinEnabled,
+  setBuiltinEnabled
+} = useInstalledPlugins();
+const pendingReload = ref(false);
+const urlInput = ref("");
+const urlError = ref("");
+const dialogOpen = ref(false);
+const dialogMode = ref("url");
+const dialogManifest = ref(null);
+const dialogSource = ref("");
+const dialogPrevAcked = ref(void 0);
+const pendingStorageUrl = ref("");
+async function startUrlInstall() {
+  const raw = urlInput.value.trim();
+  if (!raw) return;
+  urlError.value = "";
+  let url;
+  try {
+    url = normalizePluginUrl(raw);
+  } catch (e) {
+    urlError.value = e.message;
+    return;
+  }
+  if (entries.value.some((e) => e.url === url)) {
+    urlError.value = "Already installed.";
+    return;
+  }
+  let manifest = await catalog.resolveExternalManifest(url);
+  if (!manifest) manifest = catalog.synthesizeUnknownManifest(url);
+  dialogMode.value = "url";
+  dialogManifest.value = manifest;
+  dialogSource.value = url;
+  pendingStorageUrl.value = url;
+  dialogPrevAcked.value = void 0;
+  dialogOpen.value = true;
+}
+const fileInput = ref(null);
+function triggerUpload() {
+  fileInput.value?.click();
+}
+async function onFileChosen(ev) {
+  const input = ev.target;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+  const lower = file.name.toLowerCase();
+  if (lower.endsWith(".zip")) {
+    await handleZipUpload(file);
+    return;
+  }
+  if (!lower.endsWith(".js") && !lower.endsWith(".mjs")) {
+    toast.add({ title: "Unsupported file type", description: "Pick a .js / .mjs / .zip bundle.", color: "error" });
+    return;
+  }
+  try {
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    const sha256 = await sha256Hex(bytes);
+    if (entries.value.some((e) => e.sha256 === sha256)) {
+      toast.add({ title: "Already uploaded", description: "This bundle is already installed.", color: "info" });
+      return;
+    }
+    await _putUploadedPluginBlob(sha256, bytes, file.type || "text/javascript");
+    const url = `idb-plugin:${sha256}`;
+    const manifest = catalog.synthesizeUnknownManifest(file.name);
+    dialogMode.value = "upload";
+    dialogManifest.value = manifest;
+    dialogSource.value = file.name;
+    pendingStorageUrl.value = url;
+    dialogPrevAcked.value = void 0;
+    dialogOpen.value = true;
+    pendingUploadSha.value = sha256;
+    pendingUploadName.value = file.name;
+  } catch (e) {
+    toast.add({ title: "Upload failed", description: e.message, color: "error" });
+  }
+}
+async function handleZipUpload(file) {
+  let JSZip = null;
+  try {
+    const mod = await import(
+      /* @vite-ignore */
+      "jszip"
+    );
+    JSZip = mod.default ?? mod;
+  } catch {
+    toast.add({
+      title: "jszip is required for .zip uploads",
+      description: "Install jszip as a peer dependency to enable .zip plugin uploads.",
+      color: "warning"
+    });
+    return;
+  }
+  if (!JSZip) return;
+  try {
+    const buf = await file.arrayBuffer();
+    const zip = await JSZip.loadAsync(buf);
+    const jsEntry = zip.file("plugin.js") ?? zip.file("plugin.mjs");
+    const manifestEntry = zip.file("plugin.manifest.json");
+    if (!jsEntry) {
+      toast.add({
+        title: "Missing plugin.js",
+        description: "The .zip must contain plugin.js (or plugin.mjs) at its root.",
+        color: "error"
+      });
+      return;
+    }
+    const jsBytes = await jsEntry.async("uint8array");
+    let manifest = catalog.synthesizeUnknownManifest(file.name);
+    if (manifestEntry) {
+      try {
+        const txt = await manifestEntry.async("string");
+        const parsed = JSON.parse(txt);
+        if (parsed && typeof parsed.id === "string") manifest = parsed;
+      } catch {
+        toast.add({
+          title: "Manifest invalid",
+          description: "plugin.manifest.json could not be parsed \u2014 falling back to unknown manifest.",
+          color: "warning"
+        });
+      }
+    }
+    const sha256 = await sha256Hex(jsBytes);
+    if (entries.value.some((e) => e.sha256 === sha256)) {
+      toast.add({ title: "Already uploaded", description: "This bundle is already installed.", color: "info" });
+      return;
+    }
+    await _putUploadedPluginBlob(sha256, jsBytes, "text/javascript");
+    const url = `idb-plugin:${sha256}`;
+    dialogMode.value = "upload";
+    dialogManifest.value = manifest;
+    dialogSource.value = file.name;
+    pendingStorageUrl.value = url;
+    dialogPrevAcked.value = void 0;
+    dialogOpen.value = true;
+    pendingUploadSha.value = sha256;
+    pendingUploadName.value = manifest.name || file.name;
+  } catch (e) {
+    toast.add({ title: ".zip upload failed", description: e.message, color: "error" });
+  }
+}
+const pendingUploadSha = ref("");
+const pendingUploadName = ref("");
+async function sha256Hex(bytes) {
+  const digest = await crypto.subtle.digest("SHA-256", bytes.buffer);
+  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+function reloadNow() {
+  window.location.reload();
+}
+function onConfirm(ack) {
+  installEntry(pendingStorageUrl.value);
+  const meta = {
+    origin: dialogMode.value,
+    trustAcknowledgedAt: ack.trustAcknowledgedAt,
+    acknowledgedVersion: ack.acknowledgedVersion,
+    acknowledgedCapabilities: ack.acknowledgedCapabilities,
+    version: dialogManifest.value?.version,
+    label: dialogManifest.value?.name,
+    description: dialogManifest.value?.description,
+    id: dialogManifest.value?.id
+  };
+  if (dialogMode.value === "upload") {
+    meta.sha256 = pendingUploadSha.value;
+    meta.label = pendingUploadName.value;
+  }
+  updateMeta(pendingStorageUrl.value, meta);
+  urlInput.value = "";
+  pendingReload.value = true;
+  toast.add({
+    title: `${dialogManifest.value?.name || dialogManifest.value?.id || "Plugin"} queued`,
+    description: "Reload to activate.",
+    color: "success"
+  });
+}
+function onCancel() {
+}
+const builtinList = computed(() => props.builtins ?? []);
+const externalEntries = computed(() => entries.value);
+function originBadge(origin) {
+  if (origin === "registry") return { label: "Registry", color: "primary" };
+  if (origin === "upload") return { label: "Upload", color: "warning" };
+  if (origin === "space") return { label: "Space", color: "info" };
+  return { label: "URL", color: "warning" };
+}
+function onToggleBuiltin(name, enabled) {
+  setBuiltinEnabled(name, enabled);
+  pendingReload.value = true;
+}
+function onToggleEntry(url, enabled) {
+  setEnabled(url, enabled);
+  pendingReload.value = true;
+}
+function onUninstall(url) {
+  uninstallEntry(url);
+  pendingReload.value = true;
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <UAlert
+      v-if="pendingReload"
+      title="Reload to apply"
+      description="Plugin changes take effect after the next page reload."
+      icon="i-lucide-refresh-cw"
+      color="warning"
+      variant="subtle"
+      :actions="[{ label: 'Reload now', onClick: reloadNow }]"
+    />
+
+    <!-- Built-ins -->
+    <section v-if="builtinList.length" class="flex flex-col gap-2">
+      <div class="px-1">
+        <h4 class="text-sm font-semibold text-(--ui-text-highlighted)">
+          Built-in
+        </h4>
+        <p class="text-xs text-(--ui-text-muted) mt-0.5">
+          First-party plugins bundled with this app.
+        </p>
+      </div>
+      <div class="flex flex-col rounded-lg border border-(--ui-border) overflow-hidden">
+        <div
+          v-for="plugin in builtinList"
+          :key="plugin.name"
+          class="flex items-center gap-3 px-3.5 py-2.5 not-last:border-b border-(--ui-border)"
+        >
+          <UIcon
+            :name="plugin.icon ?? 'i-lucide-plug'"
+            class="size-4 text-(--ui-text-muted) shrink-0"
+          />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-(--ui-text)">
+              {{ plugin.label ?? plugin.name }}
+            </p>
+            <p
+              v-if="plugin.version || plugin.description"
+              class="text-xs text-(--ui-text-dimmed)"
+            >
+              <template v-if="plugin.version">v{{ plugin.version }}</template>
+              <template v-if="plugin.version && plugin.description"> · </template>
+              <template v-if="plugin.description">{{ plugin.description }}</template>
+            </p>
+          </div>
+          <USwitch
+            :model-value="isBuiltinEnabled(plugin.name)"
+            @update:model-value="(v) => onToggleBuiltin(plugin.name, v)"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- External entries -->
+    <section class="flex flex-col gap-2">
+      <div class="px-1 flex items-baseline justify-between">
+        <div>
+          <h4 class="text-sm font-semibold text-(--ui-text-highlighted)">
+            Installed
+          </h4>
+          <p class="text-xs text-(--ui-text-muted) mt-0.5">
+            Third-party plugins from the registry, a URL, or an upload.
+          </p>
+        </div>
+        <span
+          v-if="externalEntries.length"
+          class="text-xs text-(--ui-text-dimmed)"
+        >
+          {{ externalEntries.length }}
+        </span>
+      </div>
+      <div
+        v-if="externalEntries.length"
+        class="flex flex-col rounded-lg border border-(--ui-border) overflow-hidden"
+      >
+        <div
+          v-for="entry in externalEntries"
+          :key="entry.url"
+          class="flex items-center gap-3 px-3.5 py-2.5 not-last:border-b border-(--ui-border)"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <p class="text-sm font-medium text-(--ui-text) truncate">
+                {{ entry.label ?? entry.name }}
+              </p>
+              <UBadge
+                :label="originBadge(entry.origin).label"
+                :color="originBadge(entry.origin).color"
+                variant="subtle"
+                size="xs"
+              />
+              <UBadge
+                v-if="entry.version"
+                :label="`v${entry.version}`"
+                color="neutral"
+                variant="subtle"
+                size="xs"
+              />
+            </div>
+            <p class="text-xs text-(--ui-text-dimmed) truncate font-mono mt-0.5">
+              {{ entry.url }}
+            </p>
+            <p
+              v-if="entry.error"
+              class="text-xs text-(--ui-error) mt-1 flex items-start gap-1"
+            >
+              <UIcon name="i-lucide-alert-circle" class="size-3 shrink-0 mt-0.5" />
+              <span>{{ entry.error }}</span>
+            </p>
+          </div>
+          <USwitch
+            :model-value="entry.enabled"
+            @update:model-value="(v) => onToggleEntry(entry.url, v)"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            square
+            aria-label="Uninstall"
+            @click="onUninstall(entry.url)"
+          />
+        </div>
+      </div>
+      <div
+        v-else
+        class="flex items-center gap-2 rounded-lg border border-dashed border-(--ui-border) px-4 py-6 text-sm text-(--ui-text-muted) justify-center"
+      >
+        <UIcon name="i-lucide-package-open" class="size-4" />
+        Nothing installed yet.
+      </div>
+    </section>
+
+    <!-- Add by URL + Upload -->
+    <section class="flex flex-col gap-2">
+      <div class="px-1">
+        <h4 class="text-sm font-semibold text-(--ui-text-highlighted)">
+          Install a plugin
+        </h4>
+        <p class="text-xs text-(--ui-text-muted) mt-0.5">
+          From a URL, an npm package, a GitHub repo, or a local file. All untrusted sources require an acknowledgement before activation.
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <div class="flex-1">
+          <UInput
+            v-model="urlInput"
+            placeholder="https://… or npm:my-plugin or github:user/repo"
+            icon="i-lucide-link-2"
+            size="md"
+            class="w-full"
+            @keyup.enter="startUrlInstall"
+          />
+          <p
+            v-if="urlError"
+            class="text-xs text-(--ui-error) mt-1 px-1"
+          >
+            {{ urlError }}
+          </p>
+        </div>
+        <UButton
+          label="Add by URL"
+          icon="i-lucide-link-2"
+          color="primary"
+          size="md"
+          @click="startUrlInstall"
+        />
+        <UButton
+          label="Upload"
+          icon="i-lucide-upload"
+          color="neutral"
+          variant="outline"
+          size="md"
+          @click="triggerUpload"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept=".js,.mjs,.zip"
+          class="hidden"
+          @change="onFileChosen"
+        >
+      </div>
+    </section>
+
+    <APluginInstallDialog
+      v-if="dialogManifest"
+      v-model:open="dialogOpen"
+      :mode="dialogMode"
+      :manifest="dialogManifest"
+      :source="dialogSource"
+      :previously-acknowledged="dialogPrevAcked"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
+  </div>
+</template>

package/dist/runtime/components/settings/APluginsTabInstalled.vue.d.ts

@@ -0,0 +1,7 @@
+import type { BuiltinPluginEntry } from './ASettingsPluginsPanel.vue.js';
+type __VLS_Props = {
+    builtins?: readonly BuiltinPluginEntry[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/APluginsTabPending.d.vue.ts

@@ -0,0 +1,24 @@
+import type { PluginManifest } from '@abraca/plugin';
+export interface PendingSpacePluginEntry {
+    /** Plugin id from the manifest. */
+    id: string;
+    /** Resolved bundle URL. */
+    url: string;
+    /** Version, when the space-plugins map records one. */
+    version?: string;
+    /** Resolved manifest, when the URL exposed a sibling JSON. */
+    manifest?: PluginManifest;
+}
+type __VLS_Props = {
+    /**
+     * Space-declared plugins that did NOT auto-load (not in registry).
+     * Pre-filtered by the host's space-plugins watcher. When omitted, the
+     * tab shows the empty-state explainer.
+     */
+    declared?: readonly PendingSpacePluginEntry[];
+    /** Active space id. Required for decline persistence to be per-space. */
+    spaceId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/settings/APluginsTabPending.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useInstalledPlugins } from "../../composables/useInstalledPlugins";
+import { useDeclinedSpacePlugins } from "../../composables/useDeclinedSpacePlugins";
+import { usePluginCatalog } from "../../composables/usePluginCatalog";
+import { useLoadTimePending } from "../../composables/useLoadTimePending";
+const props = defineProps({
+  declared: { type: Array, required: false },
+  spaceId: { type: String, required: false }
+});
+const declared = computed(() => props.declared ?? []);
+const abra = useAbracadabra();
+const fallbackSpaceId = computed(() => {
+  const meta = abra.currentSpaceMeta?.value;
+  return meta?.space_id;
+});
+const effectiveSpaceId = computed(() => props.spaceId ?? fallbackSpaceId.value ?? "");
+const catalog = usePluginCatalog();
+const declinedMemory = useDeclinedSpacePlugins();
+const loadTime = useLoadTimePending();
+const { install: installEntry, updateMeta, entries } = useInstalledPlugins();
+const visible = computed(() => {
+  const sid = effectiveSpaceId.value;
+  if (!sid) return declared.value;
+  return declared.value.filter((e) => !declinedMemory.isDeclined(sid, e.id));
+});
+const loadTimeVisible = computed(() => loadTime.entries.value);
+const dialogOpen = ref(false);
+const dialogManifest = ref(null);
+const dialogSource = ref("");
+const dialogPrevAcked = ref(void 0);
+const pendingEntry = ref(null);
+const pendingKind = ref("space");
+const pendingLoadTimeUrl = ref("");
+async function openDialog(entry) {
+  pendingEntry.value = entry;
+  pendingKind.value = "space";
+  const manifest = entry.manifest ?? await catalog.resolveExternalManifest(entry.url) ?? catalog.synthesizeUnknownManifest(entry.id, entry.version);
+  const prior = entries.value.find((e) => e.id === entry.id);
+  dialogPrevAcked.value = prior?.acknowledgedCapabilities;
+  dialogManifest.value = manifest;
+  dialogSource.value = entry.url;
+  dialogOpen.value = true;
+}
+async function openLoadTimeDialog(url) {
+  const lt = loadTimeVisible.value.find((e) => e.url === url);
+  if (!lt) return;
+  pendingKind.value = "load-time";
+  pendingLoadTimeUrl.value = url;
+  pendingEntry.value = { id: lt.id, url: lt.url, version: lt.observedVersion };
+  const manifest = await catalog.resolveExternalManifest(lt.url) ?? catalog.synthesizeUnknownManifest(lt.id, lt.observedVersion);
+  const installed = entries.value.find((e) => e.url === url);
+  dialogPrevAcked.value = installed?.acknowledgedCapabilities;
+  dialogManifest.value = manifest;
+  dialogSource.value = lt.url;
+  dialogOpen.value = true;
+}
+function onConfirm(ack) {
+  const entry = pendingEntry.value;
+  if (!entry) return;
+  if (pendingKind.value === "load-time") {
+    updateMeta(pendingLoadTimeUrl.value, {
+      version: dialogManifest.value?.version,
+      label: dialogManifest.value?.name,
+      description: dialogManifest.value?.description,
+      trustAcknowledgedAt: ack.trustAcknowledgedAt,
+      acknowledgedVersion: ack.acknowledgedVersion,
+      acknowledgedCapabilities: ack.acknowledgedCapabilities
+    });
+    loadTime.clear(pendingLoadTimeUrl.value);
+    return;
+  }
+  installEntry(entry.url);
+  updateMeta(entry.url, {
+    origin: "space",
+    id: entry.id,
+    version: dialogManifest.value?.version ?? entry.version,
+    label: dialogManifest.value?.name,
+    description: dialogManifest.value?.description,
+    trustAcknowledgedAt: ack.trustAcknowledgedAt,
+    acknowledgedVersion: ack.acknowledgedVersion,
+    acknowledgedCapabilities: ack.acknowledgedCapabilities
+  });
+}
+function onDecline() {
+  if (pendingKind.value === "load-time") {
+    loadTime.clear(pendingLoadTimeUrl.value);
+    return;
+  }
+  const entry = pendingEntry.value;
+  const sid = effectiveSpaceId.value;
+  if (!entry || !sid) return;
+  declinedMemory.decline(sid, entry.id);
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <UAlert
+      icon="i-lucide-shield-question"
+      color="info"
+      variant="subtle"
+      title="Why is this here?"
+      description="Entries appear here when (a) the active space asks for a plugin not in the official registry, or (b) an already-installed plugin's manifest changed since you last acknowledged it. Review each one before activating."
+    />
+
+    <!-- Load-time pending: installed plugins whose manifest drifted -->
+    <section v-if="loadTimeVisible.length" class="flex flex-col gap-2">
+      <div class="px-1">
+        <h4 class="text-sm font-semibold text-(--ui-text-highlighted)">
+          Needs re-review
+        </h4>
+        <p class="text-xs text-(--ui-text-muted) mt-0.5">
+          These plugins are installed but their manifest changed since your last approval. They were not loaded this session.
+        </p>
+      </div>
+      <div class="flex flex-col rounded-lg border border-(--ui-border) overflow-hidden">
+        <div
+          v-for="lt in loadTimeVisible"
+          :key="lt.url"
+          class="flex items-start gap-3 px-3.5 py-3 not-last:border-b border-(--ui-border)"
+        >
+          <UIcon
+            name="i-lucide-shield-alert"
+            class="size-4 text-(--ui-warning) shrink-0 mt-0.5"
+          />
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <p class="text-sm font-medium text-(--ui-text) truncate">
+                {{ lt.id }}
+              </p>
+              <UBadge
+                :label="`v${lt.observedVersion}`"
+                color="warning"
+                variant="subtle"
+                size="xs"
+              />
+              <UBadge
+                :label="lt.reason === 'capabilities-grew' ? 'New permissions' : lt.reason === 'version-changed' ? 'New version' : 'Never approved'"
+                color="warning"
+                variant="soft"
+                size="xs"
+              />
+            </div>
+            <p class="text-xs text-(--ui-text-dimmed) font-mono truncate mt-0.5">
+              {{ lt.url }}
+            </p>
+          </div>
+          <UButton
+            label="Review"
+            icon="i-lucide-shield-check"
+            size="xs"
+            variant="outline"
+            color="warning"
+            @click="openLoadTimeDialog(lt.url)"
+          />
+        </div>
+      </div>
+    </section>
+
+    <div
+      v-if="!declared.length && !loadTimeVisible.length"
+      class="flex flex-col items-center justify-center gap-2 py-10 text-center"
+    >
+      <UIcon name="i-lucide-hourglass" class="size-8 text-(--ui-text-dimmed)" />
+      <p class="text-sm text-(--ui-text-muted)">
+        No pending plugins for this space.
+      </p>
+      <p class="text-xs text-(--ui-text-dimmed) max-w-sm">
+        When a space declares a plugin that isn't in the registry, it appears here for you to review.
+      </p>
+    </div>
+
+    <div
+      v-else-if="declared.length && !visible.length"
+      class="flex flex-col items-center justify-center gap-2 py-10 text-center"
+    >
+      <UIcon name="i-lucide-check-circle-2" class="size-8 text-(--ui-text-dimmed)" />
+      <p class="text-sm text-(--ui-text-muted)">
+        All space-declared entries handled.
+      </p>
+      <p class="text-xs text-(--ui-text-dimmed)">
+        You declined every space-declared plugin not in the registry.
+      </p>
+    </div>
+
+    <div
+      v-else-if="visible.length"
+      class="flex flex-col rounded-lg border border-(--ui-border) overflow-hidden"
+    >
+      <div
+        v-for="entry in visible"
+        :key="entry.id"
+        class="flex items-start gap-3 px-3.5 py-3 not-last:border-b border-(--ui-border)"
+      >
+        <UIcon
+          name="i-lucide-globe"
+          class="size-4 text-(--ui-info) shrink-0 mt-0.5"
+        />
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2">
+            <p class="text-sm font-medium text-(--ui-text) truncate">
+              {{ entry.manifest?.name ?? entry.id }}
+            </p>
+            <UBadge
+              v-if="entry.version"
+              :label="`v${entry.version}`"
+              color="neutral"
+              variant="subtle"
+              size="xs"
+            />
+            <UBadge
+              label="Not in registry"
+              color="warning"
+              variant="subtle"
+              size="xs"
+            />
+          </div>
+          <p class="text-xs text-(--ui-text-dimmed) font-mono truncate mt-0.5">
+            {{ entry.url }}
+          </p>
+        </div>
+        <UButton
+          label="Review"
+          icon="i-lucide-shield-check"
+          size="xs"
+          variant="outline"
+          color="warning"
+          @click="openDialog(entry)"
+        />
+      </div>
+    </div>
+
+    <APluginInstallDialog
+      v-if="dialogManifest"
+      v-model:open="dialogOpen"
+      mode="space"
+      :manifest="dialogManifest"
+      :source="dialogSource"
+      :previously-acknowledged="dialogPrevAcked"
+      :space-id="effectiveSpaceId"
+      :declinable="true"
+      @confirm="onConfirm"
+      @decline="onDecline"
+    />
+  </div>
+</template>