@lapis-notes/workspace 0.1.0 → 0.2.0

package/dist/plugin-management/PluginRegistrySettingsPage.svelte

@@ -1,71 +1,71 @@
 <script lang="ts">
-  import AlertTriangle from "@lucide/svelte/icons/alert-triangle";
   import ArrowUpCircle from "@lucide/svelte/icons/arrow-up-circle";
-  import BookOpen from "@lucide/svelte/icons/book-open";
-  import CalendarClock from "@lucide/svelte/icons/calendar-clock";
   import Check from "@lucide/svelte/icons/check";
   import Download from "@lucide/svelte/icons/download";
-  import PackageIcon from "@lucide/svelte/icons/package";
+  import Power from "@lucide/svelte/icons/power";
   import RefreshCw from "@lucide/svelte/icons/refresh-cw";
-  import ShieldAlert from "@lucide/svelte/icons/shield-alert";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import Upload from "@lucide/svelte/icons/upload";
   import {
-    DEFAULT_OFFICIAL_PLUGIN_REGISTRY_SOURCE,
-    isAbortError,
     Notice,
+    pluginDownloadCounts,
     PluginDistributionError,
-    withPluginInstallProgress,
     type InstalledPluginRecord,
-    type PluginCatalogDetail,
     type PluginCatalogEntry,
+    type PluginRegistrySourceState,
     type PluginUpdateInfo,
   } from "@lapis-notes/api";
-  import * as Alert from "@lapismd/design-core/shadcn/alert";
   import * as AlertDialog from "@lapismd/design-core/shadcn/alert-dialog";
-  import * as Badge from "@lapismd/design-core/shadcn/badge";
   import * as Button from "@lapismd/design-core/shadcn/button";
-  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
-  import * as Input from "@lapismd/design-core/shadcn/input";
-  import * as Resizable from "@lapismd/design-core/shadcn/resizable";
-  import * as Separator from "@lapismd/design-core/shadcn/separator";
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import * as Switch from "@lapismd/design-core/shadcn/switch";
   import * as Tabs from "@lapismd/design-core/shadcn/tabs";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
   import type { WorkspaceSettingsPageProps } from "@lapismd/design-core/workspace/settings";
   import { onMount, tick, untrack } from "svelte";
+  import { getPluginRegistryController } from "./plugin-registry-controller.svelte";
+  import { openPluginBrowser } from "./plugin-browser-navigation";
   import { getPluginManagementContext } from "./plugin-management-context.svelte";
   import "./plugin-management.css";
-  import {
-    fetchPluginReadmeMarkdown,
-    type PluginReadmeLoadState,
-  } from "./plugin-readme";
-  import PluginReadmeRenderer from "./PluginReadmeRenderer.svelte";
+  import PluginRegistryContentState from "./PluginRegistryContentState.svelte";
+  import type { PluginRegistryBadgeTone } from "./PluginRegistryBadge.svelte";
+  import PluginRegistryRow, {
+    type RegistryRowBadge,
+  } from "./PluginRegistryRow.svelte";
+  import PluginRegistryToolbar from "./PluginRegistryToolbar.svelte";
+  import { formatApproximateDownloadCount } from "./plugin-download-stats";
 
   type PluginsRegistryTabId = "installed" | "browse" | "updates" | "sources";
 
   let { controller }: WorkspaceSettingsPageProps = $props();
   const context = untrack(() => getPluginManagementContext(controller));
   const app = context.app;
+  const registry = getPluginRegistryController(app);
 
   let activeTab = $state<PluginsRegistryTabId>("installed");
-  let searchText = $state("");
-  let catalogEntries = $state<PluginCatalogEntry[]>([]);
-  let installed = $state<InstalledPluginRecord[]>([]);
-  let updates = $state<PluginUpdateInfo[]>([]);
-  let lastError = $state<Error | null>(null);
-  let refreshing = $state(false);
-  let runningAction = $state<string | null>(null);
-  let detailDialogOpen = $state(false);
   let uninstallConfirmOpen = $state(false);
   let uninstallTarget = $state<InstalledPluginRecord | null>(null);
-  let detailPluginId = $state<string | null>(null);
-  let detailPluginDetail = $state<PluginCatalogDetail | null>(null);
-  let detailLoading = $state(false);
-  let readmeState = $state<PluginReadmeLoadState>({ status: "idle" });
-  let latestReleaseDates = $state<Record<string, string | null>>({});
-  let latestReleaseSizes = $state<Record<string, number | null>>({});
+  let uninstallDisableInstead = $state(false);
   let bundleFileInput = $state<HTMLInputElement | null>(null);
 
-  let installedIds = $derived(new Set(installed.map((record) => record.pluginId)));
+  let installedSearch = $state("");
+  let installedStatus = $state("all");
+  let installedProvenance = $state("all");
+  let installedSort = $state("name");
+  let browseSearch = $state("");
+  let browsePlatform = $state("all");
+  let browseChannel = $state("all");
+  let browseCategory = $state("all");
+  let browseInstallState = $state("all");
+  let browseCompatibleOnly = $state(false);
+  let browseSort = $state("name");
+  let updatesSearch = $state("");
+  let updatesStatus = $state("all");
+  let updatesSort = $state("status");
+
+  let installedIds = $derived(
+    new Set(registry.installed.map((record) => record.pluginId)),
+  );
   let staticPluginIds = $derived(
     new Set(app.plugins.corePluginEntries.map((entry) => entry.manifest.id)),
   );
@@ -77,17 +77,183 @@
       (plugin) => !installedIds.has(plugin.manifest.id),
     ),
   );
-  let filteredCatalogEntries = $derived(
-    catalogEntries.filter((entry) => {
-      const text = searchText.trim().toLowerCase();
-      if (!text) return true;
-      return `${entry.name} ${entry.id} ${entry.description} ${entry.author}`
-        .toLowerCase()
-        .includes(text);
-    }),
+  let categories = $derived(
+    [
+      ...new Set(registry.catalogEntries.flatMap((entry) => entry.categories)),
+    ].sort(),
+  );
+  let compatiblePluginIds = $derived(
+    new Set(
+      app.pluginDistribution
+        .search({ compatibleOnly: true })
+        .map((entry) => entry.id),
+    ),
+  );
+  let filteredCatalogEntries = $derived.by(() => {
+    const text = browseSearch.trim().toLowerCase();
+    return registry.catalogEntries
+      .filter((entry) => {
+        if (
+          text &&
+          !`${entry.name} ${entry.id} ${entry.description} ${entry.author}`
+            .toLowerCase()
+            .includes(text)
+        ) {
+          return false;
+        }
+        if (
+          browsePlatform !== "all" &&
+          !entry.platforms.includes(
+            browsePlatform as PluginCatalogEntry["platforms"][number],
+          )
+        ) {
+          return false;
+        }
+        if (browseChannel !== "all" && entry.channel !== browseChannel) {
+          return false;
+        }
+        if (
+          browseCategory !== "all" &&
+          !entry.categories.includes(browseCategory)
+        ) {
+          return false;
+        }
+        if (
+          browseInstallState === "installed" &&
+          !availablePluginIds.has(entry.id)
+        ) {
+          return false;
+        }
+        if (
+          browseInstallState === "available" &&
+          availablePluginIds.has(entry.id)
+        ) {
+          return false;
+        }
+        if (browseCompatibleOnly && !compatiblePluginIds.has(entry.id)) {
+          return false;
+        }
+        return true;
+      })
+      .sort((left, right) =>
+        browseSort === "downloads"
+          ? downloadCount(right.id) - downloadCount(left.id) ||
+            left.name.localeCompare(right.name)
+          : browseSort === "recent"
+            ? (right.latestRelease?.releasedAt ?? "").localeCompare(
+                left.latestRelease?.releasedAt ?? "",
+              ) || left.name.localeCompare(right.name)
+            : left.name.localeCompare(right.name),
+      );
+  });
+  let filteredInstalled = $derived.by(() => {
+    const text = installedSearch.trim().toLowerCase();
+    return registry.installed
+      .filter((record) => {
+        const entry = catalogEntry(record.pluginId);
+        const runtime = app.plugins.plugins.get(record.pluginId);
+        const name = entry?.name ?? runtime?.manifest.name ?? record.pluginId;
+        const description =
+          entry?.description ?? runtime?.manifest.description ?? "";
+        if (
+          text &&
+          !`${name} ${record.pluginId} ${description}`
+            .toLowerCase()
+            .includes(text)
+        ) {
+          return false;
+        }
+        if (
+          installedProvenance !== "all" &&
+          record.provenance !== installedProvenance
+        ) {
+          return false;
+        }
+        if (installedStatus === "enabled" && !runtime?.enabled) return false;
+        if (installedStatus === "disabled" && runtime?.enabled) return false;
+        if (installedStatus === "revoked" && !record.revoked) return false;
+        if (installedStatus === "restart" && !record.restartRequired)
+          return false;
+        return true;
+      })
+      .sort((left, right) =>
+        installedSort === "recent"
+          ? right.updatedAt.localeCompare(left.updatedAt)
+          : installedName(left).localeCompare(installedName(right)),
+      );
+  });
+  let filteredCommunityPlugins = $derived.by(() => {
+    const text = installedSearch.trim().toLowerCase();
+    if (installedProvenance !== "all" && installedProvenance !== "manual") {
+      return [];
+    }
+    return communityPlugins.filter((plugin) => {
+      if (
+        text &&
+        !`${plugin.manifest.name} ${plugin.manifest.id} ${plugin.manifest.description}`
+          .toLowerCase()
+          .includes(text)
+      ) {
+        return false;
+      }
+      if (installedStatus === "enabled" && !plugin.enabled) return false;
+      if (installedStatus === "disabled" && plugin.enabled) return false;
+      if (installedStatus === "revoked" || installedStatus === "restart") {
+        return false;
+      }
+      return true;
+    });
+  });
+  let filteredUpdates = $derived.by(() => {
+    const text = updatesSearch.trim().toLowerCase();
+    const priority = (update: PluginUpdateInfo) =>
+      update.canUpdate ? 0 : update.status === "revoked" ? 2 : 1;
+    return registry.updates
+      .filter((update) => {
+        if (
+          text &&
+          !`${update.name} ${update.id}`.toLowerCase().includes(text)
+        ) {
+          return false;
+        }
+        if (updatesStatus === "ready" && !update.canUpdate) return false;
+        if (
+          updatesStatus === "incompatible" &&
+          (update.canUpdate || update.status === "revoked")
+        ) {
+          return false;
+        }
+        if (updatesStatus === "revoked" && update.status !== "revoked") {
+          return false;
+        }
+        return true;
+      })
+      .sort((left, right) =>
+        updatesSort === "name"
+          ? left.name.localeCompare(right.name)
+          : priority(left) - priority(right) ||
+            left.name.localeCompare(right.name),
+      );
+  });
+  let browseFilterCount = $derived(
+    Number(Boolean(browseSearch.trim())) +
+      Number(browsePlatform !== "all") +
+      Number(browseChannel !== "all") +
+      Number(browseCategory !== "all") +
+      Number(browseInstallState !== "all") +
+      Number(browseCompatibleOnly) +
+      Number(browseSort !== "name"),
+  );
+  let installedFilterCount = $derived(
+    Number(Boolean(installedSearch.trim())) +
+      Number(installedStatus !== "all") +
+      Number(installedProvenance !== "all") +
+      Number(installedSort !== "name"),
   );
-  let detailPluginEntry = $derived(
-    catalogEntries.find((entry) => entry.id === detailPluginId) ?? null,
+  let updatesFilterCount = $derived(
+    Number(Boolean(updatesSearch.trim())) +
+      Number(updatesStatus !== "all") +
+      Number(updatesSort !== "status"),
   );
 
   $effect(() => {
@@ -102,135 +268,119 @@
     const pluginId = context.reveal.entryId.slice("registry:".length);
     activeTab = "browse";
     void tick().then(async () => {
-      const entry = catalogEntries.find((candidate) => candidate.id === pluginId);
+      const entry = registry.catalogEntries.find(
+        (candidate) => candidate.id === pluginId,
+      );
       if (entry) await openDetails(entry);
     });
   });
 
   onMount(() => {
+    const release = registry.retain();
     void refresh(false);
+    return () => {
+      release();
+    };
   });
-
   async function refresh(force: boolean): Promise<void> {
-    refreshing = true;
-    try {
-      lastError = null;
-      if (force || !catalogEntries.length) {
-        await app.pluginDistribution.refreshCatalog({ force });
-        if (force) {
-          latestReleaseDates = {};
-          latestReleaseSizes = {};
-        }
-      }
-      catalogEntries = app.pluginDistribution.search({ channel: "all" });
-      installed = await app.pluginDistribution.listInstalled();
-      updates = await app.pluginDistribution.listUpdates();
-      void loadLatestReleaseDates(catalogEntries);
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-      new Notice(`Plugin registry unavailable: ${errorMessage(lastError)}`);
-    } finally {
-      refreshing = false;
-    }
+    await registry.refresh(force);
   }
 
   async function runAction(
     actionId: string,
     action: () => Promise<unknown>,
   ): Promise<void> {
-    runningAction = actionId;
+    if (registry.runningAction) return;
+    registry.runningAction = actionId;
     try {
-      lastError = null;
+      registry.lastError = null;
       await action();
       await refresh(false);
     } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-      new Notice(`Plugin registry action failed: ${errorMessage(lastError)}`);
+      registry.lastError =
+        error instanceof Error ? error : new Error(String(error));
+      new Notice(
+        `Plugin registry action failed: ${errorMessage(registry.lastError!)}`,
+        undefined,
+        app,
+      );
     } finally {
-      runningAction = null;
+      registry.runningAction = null;
     }
   }
 
-  async function runPluginProgressAction(
-    actionId: string,
-    pluginId: string,
-    title: string,
-    action: (signal: AbortSignal) => Promise<unknown>,
+  async function setRegistrySourceEnabled(
+    sourceState: PluginRegistrySourceState,
+    enabled: boolean,
   ): Promise<void> {
-    runningAction = actionId;
+    if (registry.runningAction) return;
+    const source = sourceState.source;
+    registry.runningAction = `source:${source.id}`;
     try {
-      lastError = null;
-      await withPluginInstallProgress(app, { pluginId, title }, action);
-      await refresh(false);
+      registry.lastError = null;
+      await app.pluginDistribution.setSourceEnabled(source.id, enabled);
+      registry.catalogEntries = [];
+      await refresh(true);
     } catch (error) {
-      if (isAbortError(error)) {
-        await refresh(false);
-        return;
-      }
-      lastError = error instanceof Error ? error : new Error(String(error));
-      new Notice(`Plugin registry action failed: ${errorMessage(lastError)}`);
+      registry.lastError =
+        error instanceof Error ? error : new Error(String(error));
+      new Notice(
+        `Plugin registry source update failed: ${errorMessage(registry.lastError!)}`,
+        undefined,
+        app,
+      );
+      registry.registrySources = app.pluginDistribution.listSources();
     } finally {
-      runningAction = null;
+      registry.runningAction = null;
     }
   }
 
+  async function installEntry(entry: PluginCatalogEntry) {
+    await registry.install(entry);
+  }
+  async function updatePlugin(update: PluginUpdateInfo) {
+    await registry.update(update);
+  }
+
   async function openDetails(entry: PluginCatalogEntry): Promise<void> {
-    detailDialogOpen = true;
-    await selectDetail(entry);
+    try {
+      await openPluginBrowser(app, entry.id);
+      controller.close();
+    } catch (error) {
+      registry.lastError =
+        error instanceof Error ? error : new Error(String(error));
+      new Notice(
+        `Could not open plugin details: ${registry.lastError.message}`,
+        0,
+        app,
+      );
+    }
   }
 
   function requestUninstall(record: InstalledPluginRecord): void {
+    uninstallDisableInstead = false;
     uninstallTarget = record;
     uninstallConfirmOpen = true;
   }
 
-  async function confirmUninstall(): Promise<void> {
-    const record = uninstallTarget;
-    if (!record) return;
+  function closeUninstallDialog(): void {
     uninstallConfirmOpen = false;
+    uninstallDisableInstead = false;
     uninstallTarget = null;
-    await runAction(`uninstall:${record.pluginId}`, () =>
-      app.pluginDistribution.uninstall(record.pluginId),
-    );
   }
 
-  async function selectDetail(entry: PluginCatalogEntry): Promise<void> {
-    detailPluginId = entry.id;
-    detailPluginDetail = null;
-    detailLoading = true;
-    readmeState = { status: "loading" };
-    try {
-      const detail = await app.pluginDistribution.getPluginDetail(entry.id);
-      if (detailPluginId !== entry.id) return;
-      detailPluginDetail = detail;
-      latestReleaseDates = {
-        ...latestReleaseDates,
-        [entry.id]: latestReleaseDate(detail),
-      };
-      latestReleaseSizes = {
-        ...latestReleaseSizes,
-        [entry.id]: latestBundleSize(detail),
-      };
-      const readmeUrl = detail?.readmeUrl ?? entry.readmeUrl;
-      if (!readmeUrl) {
-        readmeState = { status: "missing" };
-        return;
-      }
-      const markdown = await fetchPluginReadmeMarkdown(readmeUrl, {
-        pluginId: entry.id,
-        detailUrl: entry.detail,
-      });
-      if (detailPluginId !== entry.id) return;
-      readmeState = { status: "loaded", url: readmeUrl, markdown };
-    } catch (error) {
-      if (detailPluginId !== entry.id) return;
-      readmeState = {
-        status: "error",
-        message: error instanceof Error ? error.message : String(error),
-      };
-    } finally {
-      if (detailPluginId === entry.id) detailLoading = false;
-    }
+  async function confirmPluginRemovalChoice(): Promise<void> {
+    const record = uninstallTarget;
+    if (!record) return;
+    const disableInstead = uninstallDisableInstead;
+    closeUninstallDialog();
+    await runAction(
+      `${disableInstead ? "toggle" : "uninstall"}:${record.pluginId}`,
+      () =>
+        disableInstead
+          ? app.plugins.disablePlugin(record.pluginId)
+          : app.pluginDistribution.uninstall(record.pluginId),
+    );
   }
 
   function errorMessage(error: Error): string {
@@ -239,7 +389,7 @@
       : error.message;
   }
 
-  function badge(value: string): string {
+  function titleCase(value: string): string {
     return value
       .split(/[\s-]+/)
       .filter(Boolean)
@@ -247,55 +397,116 @@
       .join(" ");
   }
 
-  async function loadLatestReleaseDates(
-    entries: PluginCatalogEntry[],
-  ): Promise<void> {
-    const missing = entries.filter(
-      (entry) =>
-        !Object.prototype.hasOwnProperty.call(latestReleaseDates, entry.id) ||
-        !Object.prototype.hasOwnProperty.call(latestReleaseSizes, entry.id),
+  function provenanceBadgeTone(value: string): PluginRegistryBadgeTone {
+    if (value === "official" || value === "community") return value;
+    return "neutral";
+  }
+
+  function catalogEntry(pluginId: string): PluginCatalogEntry | undefined {
+    return registry.catalogEntries.find((entry) => entry.id === pluginId);
+  }
+
+  function installedName(record: InstalledPluginRecord): string {
+    return (
+      catalogEntry(record.pluginId)?.name ??
+      app.plugins.plugins.get(record.pluginId)?.manifest.name ??
+      record.pluginId
     );
-    if (!missing.length) return;
-    const summaries = await Promise.all(
-      missing.map(async (entry) => {
-        try {
-          const detail = await app.pluginDistribution.getPluginDetail(entry.id);
-          return [
-            entry.id,
-            { releasedAt: latestReleaseDate(detail), size: latestBundleSize(detail) },
-          ] as const;
-        } catch {
-          return [entry.id, { releasedAt: null, size: null }] as const;
-        }
-      }),
+  }
+
+  function installedDescription(record: InstalledPluginRecord): string {
+    return (
+      catalogEntry(record.pluginId)?.description ??
+      app.plugins.plugins.get(record.pluginId)?.manifest.description ??
+      `Installed plugin ${record.pluginId}`
     );
-    latestReleaseDates = {
-      ...latestReleaseDates,
-      ...Object.fromEntries(summaries.map(([id, value]) => [id, value.releasedAt])),
-    };
-    latestReleaseSizes = {
-      ...latestReleaseSizes,
-      ...Object.fromEntries(summaries.map(([id, value]) => [id, value.size])),
-    };
   }
 
-  function latestReleaseDate(detail: PluginCatalogDetail | null): string | null {
-    return detail?.versions[detail.latestVersion]?.releasedAt ?? null;
+  function pluginToggleAction(enabled: boolean, name: string): string {
+    return `${enabled ? "Disable" : "Enable"} ${name}`;
   }
 
-  function latestBundleSize(detail: PluginCatalogDetail | null): number | null {
-    return detail?.versions[detail.latestVersion]?.bundle.size ?? null;
+  function resolveRuntimePlugin(pluginId: string) {
+    void registry.pluginLifecycleRevision;
+    return app.plugins.plugins.get(pluginId);
+  }
+
+  function pluginDescription(pluginId: string, fallback: string): string {
+    return (
+      catalogEntry(pluginId)?.description ??
+      app.plugins.plugins.get(pluginId)?.manifest.description ??
+      fallback
+    );
+  }
+
+  function registryRowBadges(
+    entry: PluginCatalogEntry | undefined,
+    provenance: string,
+  ): RegistryRowBadge[] {
+    return [
+      {
+        label: titleCase(provenance),
+        tone: provenanceBadgeTone(provenance),
+      },
+      ...(entry?.platforms.map((platform) => ({
+        label: titleCase(platform),
+        tone: platform === "web" ? ("web" as const) : ("desktop" as const),
+      })) ?? []),
+      ...(entry?.categories.slice(0, 2).map((category) => ({
+        label: titleCase(category),
+        tone: "category" as const,
+      })) ?? []),
+      ...(entry?.status === "revoked"
+        ? [{ label: "Revoked", tone: "danger" as const }]
+        : []),
+    ];
   }
 
   function installedSize(record: InstalledPluginRecord): number | null {
-    const detailSize = latestReleaseSizes[record.pluginId];
-    if (typeof detailSize === "number") return detailSize;
     return record.files.length
       ? record.files.reduce((total, file) => total + file.size, 0)
       : null;
   }
 
-  function formatReleaseDate(value: string): string | null {
+  function downloadCount(pluginId: string): number {
+    return registry.downloadStats
+      ? pluginDownloadCounts(registry.downloadStats, pluginId).recent
+      : 0;
+  }
+
+  function downloadLabel(pluginId: string): string | null {
+    if (!registry.downloadStats) return null;
+    const count = pluginDownloadCounts(registry.downloadStats, pluginId).recent;
+    return `~${formatApproximateDownloadCount(count)} downloads (30d)`;
+  }
+
+  function browseActionStatus(
+    pluginId: string,
+    installedRecord: InstalledPluginRecord | undefined,
+  ) {
+    if (registry.actionFeedback?.pluginId === pluginId) {
+      if (registry.actionFeedback.state === "running") {
+        return {
+          label: "Installing",
+          reason: registry.actionFeedback.message,
+          tone: "neutral" as const,
+        };
+      }
+      if (registry.actionFeedback.state === "error") {
+        return {
+          label: "Install failed",
+          reason: registry.actionFeedback.message,
+          tone: "danger" as const,
+        };
+      }
+    }
+    return installedRecord
+      ? { label: "Installed", tone: "success" as const }
+      : undefined;
+  }
+
+  function formatDate(value?: string): string | null {
+    if (!value) return null;
     const date = new Date(value);
     if (Number.isNaN(date.getTime())) return null;
     return new Intl.DateTimeFormat(undefined, {
@@ -305,22 +516,8 @@
     }).format(date);
   }
 
-  function updateDescription(update: PluginUpdateInfo): string {
-    return [
-      `${update.currentVersion} -> ${update.targetVersion}`,
-      typeof update.bundleSize === "number"
-        ? `Size ${formatByteSize(update.bundleSize)}`
-        : "",
-      update.targetVersion !== update.latestVersion
-        ? `Latest ${update.latestVersion}`
-        : "",
-      update.reasons.length ? `Blocked: ${update.reasons.join(", ")}` : "",
-    ]
-      .filter(Boolean)
-      .join(" | ");
-  }
-
-  function formatByteSize(bytes: number): string {
+  function formatByteSize(bytes?: number | null): string | null {
+    if (typeof bytes !== "number") return null;
     if (bytes < 1024) return `${bytes} B`;
     const units = ["KiB", "MiB", "GiB"];
     let value = bytes / 1024;
@@ -334,6 +531,45 @@
     }).format(value)} ${units[unitIndex]}`;
   }
 
+  function updateReason(update: PluginUpdateInfo): string | undefined {
+    if (update.status === "revoked") {
+      return (
+        update.revoked?.message ??
+        update.revoked?.reason ??
+        "This installed version was revoked by the official registry."
+      );
+    }
+    if (!update.canUpdate) {
+      return update.reasons.length
+        ? update.reasons.join(", ")
+        : "The latest version is not compatible with this runtime.";
+    }
+    return undefined;
+  }
+
+  function resetInstalledFilters(): void {
+    installedSearch = "";
+    installedStatus = "all";
+    installedProvenance = "all";
+    installedSort = "name";
+  }
+
+  function resetBrowseFilters(): void {
+    browseSearch = "";
+    browsePlatform = "all";
+    browseChannel = "all";
+    browseCategory = "all";
+    browseInstallState = "all";
+    browseCompatibleOnly = false;
+    browseSort = "name";
+  }
+
+  function resetUpdateFilters(): void {
+    updatesSearch = "";
+    updatesStatus = "all";
+    updatesSort = "status";
+  }
+
   function openBundleFilePicker(): void {
     bundleFileInput?.click();
   }
@@ -347,16 +583,26 @@
       new Notice("Select a .lapis-plugin bundle.");
       return;
     }
-    await runPluginProgressAction(
+    let installedRecord: InstalledPluginRecord | undefined;
+    await registry.runPluginAction(
       "install-bundle",
       "*",
       `Installing ${file.name}`,
-      async (signal) =>
-        app.pluginDistribution.installBundle(await file.arrayBuffer(), {
-          enable: true,
-          signal,
-        }),
+      async (signal) => {
+        installedRecord = await app.pluginDistribution.installBundle(
+          await file.arrayBuffer(),
+          {
+            enable: true,
+            signal,
+          },
+        );
+      },
     );
+    if (installedRecord?.nostrProof?.requiresRelayRefresh) {
+      new Notice(
+        "Plugin installed from a valid Nostr proof. Connect and refresh its registry source to check for newer revocations.",
+      );
+    }
   }
 </script>
 
@@ -368,7 +614,10 @@
   <header class="lapis-plugin-management__header">
     <div>
       <h1>Plugin registry</h1>
-      <p>Browse verified plugins, manage installed provenance, and review updates.</p>
+      <p>
+        Browse verified plugins, manage installed provenance, and review
+        updates.
+      </p>
     </div>
     <div class="lapis-plugin-management__actions">
       <input
@@ -382,37 +631,27 @@
       <Button.Root
         variant="outline"
         size="sm"
-        disabled={runningAction === "install-bundle"}
+        disabled={registry.runningAction === "install-bundle"}
         onclick={openBundleFilePicker}
+        ><Upload />Install from .lapis-plugin</Button.Root
       >
-        <Upload class="lapis-plugin-management__icon" />
-        Install from .lapis-plugin
-      </Button.Root>
       <Button.Root
+        class="lapis-plugin-registry__refresh"
         variant="outline"
         size="sm"
-        disabled={refreshing}
-        aria-busy={refreshing}
-        aria-label={refreshing ? "Refreshing plugin registry" : "Refresh plugin registry"}
+        disabled={registry.refreshing}
+        aria-busy={registry.refreshing}
+        aria-label={registry.refreshing
+          ? "Refreshing plugin registry"
+          : "Refresh plugin registry"}
         onclick={() => void refresh(true)}
       >
-        <RefreshCw
-          class="lapis-plugin-management__icon"
-          data-spinning={refreshing || undefined}
-        />
-        Refresh
+        <RefreshCw data-spinning={registry.refreshing || undefined} />
+        <span>Refresh</span>
       </Button.Root>
     </div>
   </header>
 
-  {#if lastError}
-    <Alert.Root variant="destructive">
-      <AlertTriangle class="lapis-plugin-management__icon" />
-      <Alert.Title>Plugin registry unavailable</Alert.Title>
-      <Alert.Description>{errorMessage(lastError)}</Alert.Description>
-    </Alert.Root>
-  {/if}
-
   <Tabs.Root bind:value={activeTab} class="lapis-plugin-registry__tabs">
     <Tabs.List class="lapis-plugin-registry__tab-list">
       <Tabs.Trigger class="lapis-plugin-registry__tab" value="installed"
@@ -429,322 +668,580 @@
       >
     </Tabs.List>
 
-    <Tabs.Content value="installed" class="lapis-plugin-management__rows">
-      {#if !installed.length && !communityPlugins.length}
-        <p class="lapis-plugin-management__empty">
-          No installed registry or community plugins.
-        </p>
-      {/if}
-      {#each installed as record (record.pluginId)}
-        {@const runtimePlugin = app.plugins.plugins.get(record.pluginId)}
-        {@const size = installedSize(record)}
-        {@const update = updates.find((candidate) => candidate.id === record.pluginId)}
-        <article class="lapis-plugin-card" data-plugin-id={record.pluginId}>
-          <div class="lapis-plugin-card__content">
-            <h2>{record.pluginId}</h2>
-            <p>
-              Version {record.installedVersion} | {runtimePlugin?.enabled ? "Enabled" : "Disabled"}{typeof size === "number" ? ` | Size ${formatByteSize(size)}` : ""}
-            </p>
-            <div class="lapis-plugin-card__badges">
-              <Badge.Badge variant="outline">{badge(record.provenance)}</Badge.Badge>
-              {#if record.revoked}<Badge.Badge variant="destructive">Revoked</Badge.Badge>{/if}
-              {#if record.restartRequired}<Badge.Badge variant="outline">Restart required</Badge.Badge>{/if}
-            </div>
-          </div>
-          <div class="lapis-plugin-card__actions">
-            {#if update?.canUpdate}
-              <Button.Root
-                variant="outline"
-                size="sm"
-                disabled={runningAction === `update:${record.pluginId}`}
-                onclick={() =>
-                  void runPluginProgressAction(
-                    `update:${record.pluginId}`,
-                    record.pluginId,
-                    `Updating ${update.name}`,
-                    (signal) =>
-                      app.pluginDistribution.update(
-                        update.id,
-                        update.targetVersion,
-                        { signal },
-                      ),
-                  )}
-              >
-                <ArrowUpCircle class="lapis-plugin-management__icon" />Update
-              </Button.Root>
-            {/if}
-            <Button.Root
-              variant="outline"
-              size="sm"
-              disabled={runningAction === `toggle:${record.pluginId}`}
-              onclick={() =>
-                void runAction(`toggle:${record.pluginId}`, () =>
-                  runtimePlugin?.enabled
-                    ? app.plugins.disablePlugin(record.pluginId)
-                    : app.plugins.enablePlugin(record.pluginId),
-                )}
-            >{runtimePlugin?.enabled ? "Disable" : "Enable"}</Button.Root>
-            <Button.Root
-              variant="outline"
-              size="icon"
-              aria-label={`Uninstall ${record.pluginId}`}
-              title="Uninstall"
-              disabled={runningAction === `uninstall:${record.pluginId}`}
-              onclick={() => requestUninstall(record)}
-            ><Trash2 class="lapis-plugin-management__icon" /></Button.Root>
-          </div>
-        </article>
-        {#if record.revoked}
-          <Alert.Root variant="destructive">
-            <ShieldAlert class="lapis-plugin-management__icon" />
-            <Alert.Title>{record.pluginId} was revoked</Alert.Title>
-            <Alert.Description>{record.revoked.message ?? record.revoked.reason}</Alert.Description>
-          </Alert.Root>
-        {/if}
-      {/each}
-      {#each communityPlugins as plugin (plugin.manifest.id)}
-        <article class="lapis-plugin-card">
-          <div class="lapis-plugin-card__content">
-            <h2>{plugin.manifest.name}</h2>
-            <p>ID {plugin.manifest.id} | {plugin.enabled ? "Enabled" : "Disabled"}</p>
-            <div class="lapis-plugin-card__badges">
-              <Badge.Badge variant="outline">Manual</Badge.Badge>
-            </div>
-          </div>
-        </article>
-      {/each}
-    </Tabs.Content>
-
-    <Tabs.Content value="browse" class="lapis-plugin-registry__browse">
-      <Input.Input bind:value={searchText} placeholder="Search plugins" aria-label="Search plugins" />
-      {#if !filteredCatalogEntries.length}
-        <p class="lapis-plugin-management__empty">No registry entries loaded.</p>
-      {/if}
-      <div class="lapis-plugin-registry__grid">
-        {#each filteredCatalogEntries as entry (entry.id)}
-          {@const isInstalled = availablePluginIds.has(entry.id)}
-          {@const updatedAt = latestReleaseDates[entry.id]}
-          {@const size = latestReleaseSizes[entry.id]}
-          {@const updatedLabel = updatedAt ? formatReleaseDate(updatedAt) : null}
-          <article class="lapis-plugin-registry-card">
-            <div class="lapis-plugin-registry-card__icon" aria-hidden="true">
-              <PackageIcon class="lapis-plugin-management__icon" />
-            </div>
-            <div class="lapis-plugin-registry-card__content">
-              <div class="lapis-plugin-registry-card__title">
-                <h2>{entry.name}</h2>
-                {#if entry.channel === "official"}<Badge.Badge variant="outline">Official</Badge.Badge>{/if}
-              </div>
-              <p>{entry.description}</p>
-              <div class="lapis-plugin-registry-card__metadata">
-                <span>Version {entry.latestVersion}</span>
-                {#if typeof size === "number"}<span>Size {formatByteSize(size)}</span>{/if}
-                {#if updatedLabel}<span><CalendarClock class="lapis-plugin-management__small-icon" />Updated {updatedLabel}</span>{/if}
-              </div>
-              <div class="lapis-plugin-card__actions">
-                <Button.Root
-                  variant="outline"
-                  size="sm"
-                  disabled={detailLoading && detailPluginId === entry.id}
-                  onclick={() => void openDetails(entry)}
-                ><BookOpen class="lapis-plugin-management__icon" />Details</Button.Root>
+    <Tabs.Content value="installed" class="lapis-plugin-registry__content">
+      <PluginRegistryToolbar
+        tab="installed"
+        bind:search={installedSearch}
+        bind:enabledState={installedStatus}
+        bind:provenance={installedProvenance}
+        bind:sort={installedSort}
+        filterCount={installedFilterCount}
+        resultCount={filteredInstalled.length + filteredCommunityPlugins.length}
+        onreset={resetInstalledFilters}
+      />
+      {#if registry.initialLoading}
+        <PluginRegistryContentState
+          kind="loading"
+          heading="Loading installed plugins"
+          description="Reading installed plugin state and registry provenance…"
+        />
+      {:else if registry.lastError && !registry.installed.length && !communityPlugins.length}
+        <PluginRegistryContentState
+          kind="error"
+          heading="Installed plugins unavailable"
+          description={errorMessage(registry.lastError)}
+          actionLabel="Retry"
+          onaction={() => void refresh(true)}
+        />
+      {:else if !registry.installed.length && !communityPlugins.length}
+        <PluginRegistryContentState
+          part="registry-installed-empty-state"
+          kind="empty"
+          heading="No plugins installed"
+          description="No installed registry or community plugins."
+          actionLabel="Browse plugins"
+          onaction={() => (activeTab = "browse")}
+        />
+      {:else if !filteredInstalled.length && !filteredCommunityPlugins.length}
+        <PluginRegistryContentState
+          kind="filtered"
+          heading="No installed plugins match"
+          description="Try changing the search or installed-plugin filters."
+          actionLabel="Reset filters"
+          onaction={resetInstalledFilters}
+        />
+      {:else}
+        <div class="lapis-plugin-registry__rows">
+          {#each filteredInstalled as record (record.pluginId)}
+            {@const runtimePlugin = resolveRuntimePlugin(record.pluginId)}
+            {@const entry = catalogEntry(record.pluginId)}
+            {@const size = installedSize(record)}
+            {@const update = registry.updates.find(
+              (candidate) => candidate.id === record.pluginId,
+            )}
+            {@const toggleAction = pluginToggleAction(
+              Boolean(runtimePlugin?.enabled),
+              installedName(record),
+            )}
+            <PluginRegistryRow
+              id={record.pluginId}
+              name={installedName(record)}
+              description={installedDescription(record)}
+              version={record.installedVersion}
+              metadata={[
+                ...(size === null ? [] : [`Size ${formatByteSize(size)}`]),
+                `Updated ${formatDate(record.updatedAt) ?? record.updatedAt}`,
+                ...(entry && downloadLabel(entry.id)
+                  ? [downloadLabel(entry.id)!]
+                  : []),
+              ]}
+              badges={[
+                ...registryRowBadges(entry, record.provenance),
+                ...(record.nostrProof
+                  ? [{ label: "Nostr proof", tone: "community" as const }]
+                  : []),
+                ...(record.restartRequired
+                  ? [{ label: "Restart required" }]
+                  : []),
+              ]}
+              status={record.revoked
+                ? {
+                    label: "Revoked",
+                    reason: record.revoked.message ?? record.revoked.reason,
+                    tone: "danger",
+                  }
+                : update?.canUpdate
+                  ? { label: "Update available", tone: "warning" }
+                  : record.nostrProof?.requiresRelayRefresh
+                    ? {
+                        label: "Revocation check needed",
+                        reason: "Refresh the Nostr registry source when online",
+                        tone: "warning",
+                      }
+                    : undefined}
+            >
+              {#snippet actions()}
+                {#if update?.canUpdate}
+                  <Tooltip.Provider>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger>
+                        {#snippet child({ props })}
+                          <Button.Root
+                            {...props}
+                            size="icon"
+                            variant="outline"
+                            aria-label={`Update ${installedName(record)}`}
+                            disabled={registry.runningAction ===
+                              `update:${record.pluginId}`}
+                            onclick={() => void updatePlugin(update)}
+                            ><ArrowUpCircle /></Button.Root
+                          >
+                        {/snippet}
+                      </Tooltip.Trigger>
+                      <Tooltip.Content
+                        >Update {installedName(record)}</Tooltip.Content
+                      >
+                    </Tooltip.Root>
+                  </Tooltip.Provider>
+                {/if}
+                {#key toggleAction}
+                  <Tooltip.Provider>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger>
+                        {#snippet child({ props })}
+                          <Switch.Root
+                            {...props}
+                            checked={Boolean(runtimePlugin?.enabled)}
+                            disabled={!runtimePlugin ||
+                              registry.runningAction ===
+                                `toggle:${record.pluginId}`}
+                            aria-label={toggleAction}
+                            data-tooltip-action={toggleAction}
+                            onCheckedChange={(checked) =>
+                              void runAction(`toggle:${record.pluginId}`, () =>
+                                checked
+                                  ? app.plugins.enablePlugin(record.pluginId)
+                                  : app.plugins.disablePlugin(record.pluginId),
+                              )}
+                          />
+                        {/snippet}
+                      </Tooltip.Trigger>
+                      <Tooltip.Content>{toggleAction}</Tooltip.Content>
+                    </Tooltip.Root>
+                  </Tooltip.Provider>
+                {/key}
                 <Button.Root
-                  variant={isInstalled ? "outline" : "default"}
-                  size="sm"
-                  disabled={isInstalled || runningAction === `install:${entry.id}`}
-                  onclick={() =>
-                    void runPluginProgressAction(
-                      `install:${entry.id}`,
-                      entry.id,
-                      `Installing ${entry.name}`,
-                      (signal) =>
-                        app.pluginDistribution.install(entry.id, {
-                          enable: true,
-                          requireOfficial: entry.channel === "official",
-                          signal,
-                        }),
-                    )}
+                  size="icon"
+                  variant="ghost"
+                  aria-label={`Uninstall ${record.pluginId}`}
+                  title="Uninstall"
+                  disabled={registry.runningAction ===
+                    `uninstall:${record.pluginId}`}
+                  onclick={() => requestUninstall(record)}
+                  ><Trash2 /></Button.Root
                 >
-                  {#if isInstalled}<Check class="lapis-plugin-management__icon" />Installed{:else}<Download class="lapis-plugin-management__icon" />Install{/if}
-                </Button.Root>
-              </div>
-            </div>
-          </article>
-        {/each}
-      </div>
+              {/snippet}
+            </PluginRegistryRow>
+          {/each}
+          {#each filteredCommunityPlugins as plugin (plugin.manifest.id)}
+            <PluginRegistryRow
+              id={plugin.manifest.id}
+              name={plugin.manifest.name}
+              description={plugin.manifest.description}
+              version={plugin.manifest.version}
+              badges={[{ label: "Manual" }]}
+            />
+          {/each}
+        </div>
+      {/if}
     </Tabs.Content>
 
-    <Tabs.Content value="updates" class="lapis-plugin-management__rows">
-      {#if !updates.length}<p class="lapis-plugin-management__empty">No plugin updates available.</p>{/if}
-      {#each updates as update (update.id)}
-        {#if update.status === "revoked"}
-          <Alert.Root variant="destructive">
-            <ShieldAlert class="lapis-plugin-management__icon" />
-            <Alert.Title>{update.name} was revoked</Alert.Title>
-            <Alert.Description>{update.revoked?.message ?? update.revoked?.reason ?? "This installed version was revoked by the official registry."}</Alert.Description>
-          </Alert.Root>
-        {:else if !update.canUpdate}
-          <Alert.Root>
-            <AlertTriangle class="lapis-plugin-management__icon" />
-            <Alert.Title>{update.name} update is unavailable</Alert.Title>
-            <Alert.Description>{update.reasons.length ? update.reasons.join(", ") : "The latest version is not compatible with this runtime."}</Alert.Description>
-          </Alert.Root>
-        {/if}
-        <article class="lapis-plugin-card">
-          <div class="lapis-plugin-card__content">
-            <h2>{update.name}</h2>
-            <p>{updateDescription(update)}</p>
-            <div class="lapis-plugin-card__badges">
-              <Badge.Badge variant="outline">{badge(update.provenance)}</Badge.Badge>
-              <Badge.Badge variant={update.status === "revoked" ? "destructive" : "outline"}>{badge(update.status.replace(/-/g, " "))}</Badge.Badge>
-            </div>
-          </div>
-          <div class="lapis-plugin-card__actions">
-            <Button.Root
-              variant="outline"
-              size="sm"
-              disabled={!update.canUpdate || runningAction === `update:${update.id}`}
-              onclick={() =>
-                void runPluginProgressAction(
-                  `update:${update.id}`,
-                  update.id,
-                  `Updating ${update.name}`,
-                  (signal) =>
-                    app.pluginDistribution.update(
-                      update.id,
-                      update.targetVersion,
-                      { signal },
-                    ),
-                )}
-            ><ArrowUpCircle class="lapis-plugin-management__icon" />Update</Button.Root>
-          </div>
-        </article>
-      {/each}
+    <Tabs.Content value="browse" class="lapis-plugin-registry__content">
+      <PluginRegistryToolbar
+        tab="browse"
+        bind:search={browseSearch}
+        bind:platform={browsePlatform}
+        bind:channel={browseChannel}
+        bind:category={browseCategory}
+        bind:installedState={browseInstallState}
+        bind:compatibleOnly={browseCompatibleOnly}
+        bind:sort={browseSort}
+        {categories}
+        filterCount={browseFilterCount}
+        resultCount={filteredCatalogEntries.length}
+        onreset={resetBrowseFilters}
+      />
+      {#if registry.initialLoading}
+        <PluginRegistryContentState
+          kind="loading"
+          heading="Loading plugin registry"
+          description="Verifying the official catalog and revocation metadata…"
+        />
+      {:else if registry.lastError && !registry.catalogEntries.length}
+        <PluginRegistryContentState
+          kind="error"
+          heading="Plugin registry unavailable"
+          description={errorMessage(registry.lastError)}
+          actionLabel="Retry"
+          onaction={() => void refresh(true)}
+        />
+      {:else if !registry.catalogEntries.length}
+        <PluginRegistryContentState
+          kind="empty"
+          heading="No registry entries"
+          description="The configured registry did not return any plugin entries."
+          actionLabel="Refresh"
+          onaction={() => void refresh(true)}
+        />
+      {:else if !filteredCatalogEntries.length}
+        <PluginRegistryContentState
+          kind="filtered"
+          heading="No plugins match"
+          description="Try changing the search or Browse filters."
+          actionLabel="Reset filters"
+          onaction={resetBrowseFilters}
+        />
+      {:else}
+        <div class="lapis-plugin-registry__rows">
+          {#each filteredCatalogEntries as entry (entry.id)}
+            {@const installedRecord = registry.installed.find(
+              (record) => record.pluginId === entry.id,
+            )}
+            {@const isBundled = staticPluginIds.has(entry.id)}
+            {@const releaseDate = formatDate(entry.latestRelease?.releasedAt)}
+            {@const releaseSize = formatByteSize(
+              entry.latestRelease?.bundleSize,
+            )}
+            <PluginRegistryRow
+              id={entry.id}
+              name={entry.name}
+              description={entry.description}
+              version={entry.latestVersion}
+              metadata={[
+                ...(releaseDate ? [`Released ${releaseDate}`] : []),
+                ...(releaseSize ? [`Size ${releaseSize}`] : []),
+                ...(downloadLabel(entry.id) ? [downloadLabel(entry.id)!] : []),
+              ]}
+              badges={registryRowBadges(entry, entry.channel)}
+              status={browseActionStatus(entry.id, installedRecord)}
+              onopen={() => void openDetails(entry)}
+            >
+              {#snippet actions()}
+                {#if installedRecord}
+                  <Button.Root
+                    size="sm"
+                    variant="outline"
+                    aria-label={`Uninstall ${entry.name}`}
+                    disabled={registry.runningAction ===
+                      `uninstall:${entry.id}`}
+                    onclick={() => requestUninstall(installedRecord)}
+                    ><Trash2 data-icon="inline-start" />Uninstall</Button.Root
+                  >
+                {:else if isBundled}
+                  <Button.Root size="sm" variant="outline" disabled
+                    ><Check data-icon="inline-start" />Bundled</Button.Root
+                  >
+                {:else}
+                  {@const installing =
+                    registry.runningAction === `install:${entry.id}`}
+                  <Button.Root
+                    size="sm"
+                    aria-label={installing
+                      ? `Installing ${entry.name}`
+                      : undefined}
+                    aria-busy={installing}
+                    disabled={installing}
+                    onclick={() => void installEntry(entry)}
+                    >{#if installing}<RefreshCw
+                        data-icon="inline-start"
+                        data-spinning="true"
+                      />Installing…{:else}<Download
+                        data-icon="inline-start"
+                      />Install{/if}</Button.Root
+                  >
+                {/if}
+              {/snippet}
+            </PluginRegistryRow>
+          {/each}
+        </div>
+      {/if}
     </Tabs.Content>
 
-    <Tabs.Content value="sources" class="lapis-plugin-management__rows">
-      <article class="lapis-plugin-card">
-        <div class="lapis-plugin-card__content">
-          <h2>{DEFAULT_OFFICIAL_PLUGIN_REGISTRY_SOURCE.name}</h2>
-          <p>{DEFAULT_OFFICIAL_PLUGIN_REGISTRY_SOURCE.url}</p>
-          <div class="lapis-plugin-card__badges">
-            <Badge.Badge variant="outline">Official</Badge.Badge>
-            <Badge.Badge variant="outline">Locked</Badge.Badge>
-          </div>
+    <Tabs.Content value="updates" class="lapis-plugin-registry__content">
+      <PluginRegistryToolbar
+        tab="updates"
+        bind:search={updatesSearch}
+        bind:updateState={updatesStatus}
+        bind:sort={updatesSort}
+        filterCount={updatesFilterCount}
+        resultCount={filteredUpdates.length}
+        onreset={resetUpdateFilters}
+      />
+      {#if registry.initialLoading}
+        <PluginRegistryContentState
+          kind="loading"
+          heading="Checking for updates"
+          description="Comparing installed plugins with verified registry releases…"
+        />
+      {:else if registry.lastError && !registry.updates.length}
+        <PluginRegistryContentState
+          kind="error"
+          heading="Updates unavailable"
+          description={errorMessage(registry.lastError)}
+          actionLabel="Retry"
+          onaction={() => void refresh(true)}
+        />
+      {:else if !registry.updates.length}
+        <PluginRegistryContentState
+          part="registry-updates-empty-state"
+          kind="success"
+          heading="You’re up to date"
+          description="No plugin updates available."
+          actionLabel="Check for updates"
+          onaction={() => void refresh(true)}
+        />
+      {:else if !filteredUpdates.length}
+        <PluginRegistryContentState
+          kind="filtered"
+          heading="No updates match"
+          description="Try changing the search or update-status filter."
+          actionLabel="Reset filters"
+          onaction={resetUpdateFilters}
+        />
+      {:else}
+        <div class="lapis-plugin-registry__rows">
+          {#each filteredUpdates as update (update.id)}
+            {@const entry = catalogEntry(update.id)}
+            {@const releaseDate = formatDate(entry?.latestRelease?.releasedAt)}
+            <PluginRegistryRow
+              id={update.id}
+              onopen={entry ? () => void openDetails(entry) : undefined}
+              name={update.name}
+              description={pluginDescription(
+                update.id,
+                `Update available for ${update.name}.`,
+              )}
+              version={`${update.currentVersion} → ${update.targetVersion}`}
+              metadata={[
+                ...(releaseDate ? [`Released ${releaseDate}`] : []),
+                ...(typeof update.bundleSize === "number"
+                  ? [`Size ${formatByteSize(update.bundleSize)}`]
+                  : []),
+                ...(update.targetVersion !== update.latestVersion
+                  ? [`Latest ${update.latestVersion}`]
+                  : []),
+                ...(entry && downloadLabel(entry.id)
+                  ? [downloadLabel(entry.id)!]
+                  : []),
+              ]}
+              badges={registryRowBadges(entry, update.provenance)}
+              status={{
+                label: update.canUpdate
+                  ? "Ready"
+                  : update.status === "revoked"
+                    ? "Revoked"
+                    : "Incompatible",
+                reason: updateReason(update),
+                tone:
+                  update.status === "revoked"
+                    ? "danger"
+                    : update.canUpdate
+                      ? "success"
+                      : "warning",
+              }}
+            >
+              {#snippet actions()}
+                <Tooltip.Provider>
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props })}
+                        <Button.Root
+                          {...props}
+                          size="icon"
+                          variant="outline"
+                          aria-label={`Update ${update.name}`}
+                          disabled={!update.canUpdate ||
+                            registry.runningAction === `update:${update.id}`}
+                          onclick={() => void updatePlugin(update)}
+                          ><ArrowUpCircle /></Button.Root
+                        >
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Update {update.name}</Tooltip.Content>
+                  </Tooltip.Root>
+                </Tooltip.Provider>
+              {/snippet}
+            </PluginRegistryRow>
+          {/each}
         </div>
-      </article>
-      <Separator.Separator />
-      <p class="lapis-plugin-management__empty">Additional third-party registry sources are outside Full Registry V1.</p>
+      {/if}
     </Tabs.Content>
-  </Tabs.Root>
 
-  <Dialog.Root bind:open={detailDialogOpen}>
-    <Dialog.Content class="lapis-plugin-detail-dialog">
-      <Dialog.Header class="sr-only">
-        <Dialog.Title>{detailPluginEntry?.name ?? "Plugin details"}</Dialog.Title>
-        <Dialog.Description>Registry plugin details and README content.</Dialog.Description>
-      </Dialog.Header>
-      <div class="lapis-plugin-detail-dialog__layout">
-        <header class="lapis-plugin-detail-dialog__header">
-          <div>
-            <h2>{detailPluginEntry?.name ?? "Plugin details"}</h2>
-            <p>{detailPluginDetail?.description ?? detailPluginEntry?.description ?? "Select a plugin to review its registry details."}</p>
-          </div>
-          {#if detailPluginEntry}
-            {@const isInstalled = availablePluginIds.has(detailPluginEntry.id)}
-            <Button.Root
-              variant={isInstalled ? "outline" : "default"}
-              size="sm"
-              disabled={isInstalled || runningAction === `install:${detailPluginEntry.id}`}
-              onclick={() =>
-                void runPluginProgressAction(
-                  `install:${detailPluginEntry.id}`,
-                  detailPluginEntry.id,
-                  `Installing ${detailPluginEntry.name}`,
-                  (signal) =>
-                    app.pluginDistribution.install(detailPluginEntry.id, {
-                      enable: true,
-                      requireOfficial: detailPluginEntry.channel === "official",
-                      signal,
-                    }),
-                )}
-            >{isInstalled ? "Installed" : "Install"}</Button.Root>
-          {/if}
-        </header>
-        <Resizable.PaneGroup direction="horizontal" class="lapis-plugin-detail-dialog__panes">
-          <Resizable.Pane defaultSize={30} minSize={22} maxSize={42}>
-            <aside class="lapis-plugin-detail-dialog__results">
-              <header>
-                <strong>Browse results</strong>
-                <span>{filteredCatalogEntries.length} {filteredCatalogEntries.length === 1 ? "plugin" : "plugins"}</span>
-              </header>
-              <div class="lapis-plugin-detail-dialog__result-list">
-                {#each filteredCatalogEntries as entry (entry.id)}
-                  <button
-                    type="button"
-                    data-active={entry.id === detailPluginId || undefined}
-                    onclick={() => void selectDetail(entry)}
-                  >
-                    <strong>{entry.name}</strong>
-                    <span>{entry.description}</span>
-                    <small>{entry.latestVersion}</small>
-                  </button>
-                {/each}
-                {#if !filteredCatalogEntries.length}<p>No plugins match the current Browse search.</p>{/if}
-              </div>
-            </aside>
-          </Resizable.Pane>
-          <Resizable.Handle />
-          <Resizable.Pane defaultSize={70} minSize={45}>
-            <div class="lapis-plugin-detail-dialog__detail">
-              {#if detailPluginEntry}
-                {@const updatedAt = latestReleaseDates[detailPluginEntry.id]}
-                {@const size = detailPluginDetail ? latestBundleSize(detailPluginDetail) : latestReleaseSizes[detailPluginEntry.id]}
-                {@const updatedLabel = updatedAt ? formatReleaseDate(updatedAt) : null}
-                <div class="lapis-plugin-detail-dialog__metadata">
-                  <div>
-                    <span>Version {detailPluginEntry.latestVersion}</span>
-                    {#if typeof size === "number"}<span>Size {formatByteSize(size)}</span>{/if}
-                    <span>{detailPluginEntry.platforms.map(badge).join(", ")}</span>
-                    {#if updatedLabel}<span>Updated {updatedLabel}</span>{/if}
-                  </div>
-                  <div class="lapis-plugin-card__badges">
-                    <Badge.Badge variant="outline">{badge(detailPluginEntry.channel)}</Badge.Badge>
-                    {#if availablePluginIds.has(detailPluginEntry.id)}<Badge.Badge variant="outline">Installed</Badge.Badge>{/if}
-                    {#each detailPluginEntry.badges ?? [] as entryBadge}<Badge.Badge variant={entryBadge === "revoked" ? "destructive" : "outline"}>{badge(entryBadge)}</Badge.Badge>{/each}
-                    {#each detailPluginEntry.categories as category}<Badge.Badge variant="outline">{badge(category)}</Badge.Badge>{/each}
-                  </div>
-                </div>
-                <div class="lapis-plugin-detail-dialog__readme" data-plugin-readme-url={readmeState.status === "loaded" ? readmeState.url : undefined}>
-                  {#if detailLoading && readmeState.status === "loading"}
-                    <p>Loading README...</p>
-                  {:else if readmeState.status === "loaded"}
-                    <PluginReadmeRenderer app={app} markdown={readmeState.markdown} sourcePath={readmeState.url} />
-                  {:else if readmeState.status === "error"}
-                    <Alert.Root><AlertTriangle class="lapis-plugin-management__icon" /><Alert.Title>README unavailable</Alert.Title><Alert.Description>{readmeState.message}</Alert.Description></Alert.Root>
-                  {:else}
-                    <p>No README is available for this registry entry.</p>
-                  {/if}
-                </div>
-              {:else}
-                <p class="lapis-plugin-management__empty">Select a plugin from the Browse results.</p>
+    <Tabs.Content value="sources" class="lapis-plugin-registry__content">
+      <div class="lapis-plugin-registry__rows">
+        {#each registry.registrySources as sourceState (sourceState.source.id)}
+          {@const source = sourceState.source}
+          {@const isNostr = source.kind === "nostr"}
+          <PluginRegistryRow
+            id={source.id}
+            name={source.name}
+            description={source.url}
+            metadata={[
+              ...(source.builtin ? ["Built-in source"] : []),
+              isNostr
+                ? `${source.relays?.length ?? 0} relay${source.relays?.length === 1 ? "" : "s"}`
+                : "HTTPS registry",
+              source.trustTier === "official"
+                ? "Official source"
+                : "Community source",
+            ]}
+            badges={[
+              { label: source.enabled ? "Enabled" : "Disabled" },
+              ...(isNostr
+                ? [{ label: "Nostr", tone: "community" as const }]
+                : []),
+              {
+                label:
+                  source.trustTier === "official" ? "Official" : "Community",
+                tone:
+                  source.trustTier === "official"
+                    ? ("official" as const)
+                    : ("community" as const),
+              },
+              ...(source.builtin ? [{ label: "Locked" }] : []),
+            ]}
+            status={!source.enabled
+              ? { label: "Disabled" }
+              : sourceState.phase === "error"
+                ? {
+                    label: "Source problem",
+                    reason: sourceState.message,
+                    tone: "warning",
+                  }
+                : isNostr && !sourceState.installReady
+                  ? {
+                      label: "Browse only",
+                      reason:
+                        sourceState.message ??
+                        "Relay install quorum has not been reached",
+                      tone: "warning",
+                    }
+                  : {
+                      label: isNostr ? "Install quorum ready" : "Available",
+                      tone: "success",
+                    }}
+          >
+            {#snippet actions()}
+              {@const sourceToggleAction = `${source.enabled ? "Disable" : "Enable"} ${source.name}`}
+              {#key sourceToggleAction}
+                <Tooltip.Provider>
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props })}
+                        <Switch.Root
+                          {...props}
+                          checked={source.enabled}
+                          disabled={registry.runningAction ===
+                            `source:${source.id}`}
+                          aria-label={sourceToggleAction}
+                          data-tooltip-action={sourceToggleAction}
+                          onCheckedChange={(checked) =>
+                            void setRegistrySourceEnabled(sourceState, checked)}
+                        />
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>{sourceToggleAction}</Tooltip.Content>
+                  </Tooltip.Root>
+                </Tooltip.Provider>
+              {/key}
+              {#if source.enabled && (sourceState.phase === "error" || !sourceState.installReady)}
+                <Button.Root
+                  size="sm"
+                  variant="outline"
+                  onclick={() => void refresh(true)}
+                  ><RefreshCw />Retry</Button.Root
+                >
               {/if}
-            </div>
-          </Resizable.Pane>
-        </Resizable.PaneGroup>
+            {/snippet}
+          </PluginRegistryRow>
+        {/each}
       </div>
-    </Dialog.Content>
-  </Dialog.Root>
+    </Tabs.Content>
+  </Tabs.Root>
 
   <AlertDialog.Root bind:open={uninstallConfirmOpen}>
-    <AlertDialog.Content>
+    <AlertDialog.Content
+      class="lapis-plugin-uninstall-dialog"
+      data-action-mode={uninstallDisableInstead ? "disable" : "uninstall"}
+    >
       <AlertDialog.Header>
-        <AlertDialog.Title>Uninstall plugin</AlertDialog.Title>
-        <AlertDialog.Description>{uninstallTarget ? `Uninstall ${uninstallTarget.pluginId}? This removes the plugin from the vault.` : ""}</AlertDialog.Description>
+        <AlertDialog.Media class="lapis-plugin-uninstall-dialog__media">
+          <Trash2 aria-hidden="true" />
+        </AlertDialog.Media>
+        <AlertDialog.Title>Uninstall plugin?</AlertDialog.Title>
+        <AlertDialog.Description
+          >{uninstallDisableInstead
+            ? "The plugin will stay installed in this vault and can be enabled again later."
+            : "This removes the installed plugin from this vault. You can reinstall it from the registry later."}</AlertDialog.Description
+        >
       </AlertDialog.Header>
+      {#if uninstallTarget}
+        {@const entry = catalogEntry(uninstallTarget.pluginId)}
+        {@const targetSize = installedSize(uninstallTarget)}
+        <div
+          class="lapis-plugin-uninstall-dialog__target"
+          data-ui-component="plugin-uninstall-target"
+        >
+          <PluginRegistryRow
+            id={uninstallTarget.pluginId}
+            name={installedName(uninstallTarget)}
+            description={installedDescription(uninstallTarget)}
+            version={uninstallTarget.installedVersion}
+            metadata={[
+              ...(targetSize === null
+                ? []
+                : [`Size ${formatByteSize(targetSize)}`]),
+            ]}
+            badges={registryRowBadges(entry, uninstallTarget.provenance)}
+            status={uninstallTarget.revoked
+              ? { label: "Revoked", tone: "danger" }
+              : undefined}
+          />
+        </div>
+        {#if resolveRuntimePlugin(uninstallTarget.pluginId)?.enabled}
+          {@const alternateAction = uninstallDisableInstead
+            ? `Choose Uninstall instead for ${installedName(uninstallTarget)}`
+            : `Choose Disable instead for ${installedName(uninstallTarget)}`}
+          <Field.Field
+            orientation="horizontal"
+            class="lapis-plugin-uninstall-dialog__alternative"
+          >
+            <Field.Content>
+              <Field.Title>Disable instead</Field.Title>
+              <Field.Description
+                >Keep the plugin installed and turn it off.</Field.Description
+              >
+            </Field.Content>
+            <Tooltip.Provider>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <Switch.Root
+                      {...props}
+                      bind:checked={uninstallDisableInstead}
+                      aria-label={alternateAction}
+                      data-tooltip-action={alternateAction}
+                    />
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{alternateAction}</Tooltip.Content>
+              </Tooltip.Root>
+            </Tooltip.Provider>
+          </Field.Field>
+        {/if}
+      {/if}
       <AlertDialog.Footer>
-        <AlertDialog.Cancel onclick={() => (uninstallTarget = null)}>Cancel</AlertDialog.Cancel>
-        <AlertDialog.Action onclick={() => void confirmUninstall()}>Uninstall</AlertDialog.Action>
+        <AlertDialog.Cancel onclick={closeUninstallDialog}
+          >Cancel</AlertDialog.Cancel
+        >
+        <AlertDialog.Action
+          class={uninstallDisableInstead
+            ? "lapis-plugin-uninstall-dialog__confirm--disable"
+            : "lapis-plugin-uninstall-dialog__confirm--uninstall"}
+          variant={uninstallDisableInstead ? "default" : "destructive"}
+          data-action-mode={uninstallDisableInstead ? "disable" : "uninstall"}
+          aria-label={uninstallTarget
+            ? `${uninstallDisableInstead ? "Disable" : "Uninstall"} ${installedName(uninstallTarget)}`
+            : `${uninstallDisableInstead ? "Disable" : "Uninstall"} plugin`}
+          onclick={() => void confirmPluginRemovalChoice()}
+          >{#if uninstallDisableInstead}<Power
+              data-icon="inline-start"
+              aria-hidden="true"
+            />Disable plugin{:else}<Trash2
+              data-icon="inline-start"
+              aria-hidden="true"
+            />Uninstall plugin{/if}</AlertDialog.Action
+        >
       </AlertDialog.Footer>
     </AlertDialog.Content>
   </AlertDialog.Root>