@dxos/plugin-registry 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Button, Dialog, Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export const LOAD_PLUGIN_DIALOG = `${meta.id}.LoadPluginDialog`;
+
+export const LoadPluginDialog = () => {
+  const manager = usePluginManager();
+  const { t } = useTranslation(meta.id);
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleLoad = useCallback(() => {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    void Effect.gen(function* () {
+      const plugin = yield* manager.add(trimmed);
+      yield* manager.enable(plugin.meta.id);
+      closeRef.current?.click();
+    }).pipe(
+      Effect.catchAll((err) =>
+        Effect.sync(() => {
+          setError(String(err));
+        }),
+      ),
+      Effect.tap(() => Effect.sync(() => setLoading(false))),
+      runAndForwardErrors,
+    );
+  }, [url, manager]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('load-by-url-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        {/* TODO(burdon): Form section. */}
+        <div className='flex flex-col gap-4'>
+          <Input.Root validationValence={error ? 'error' : undefined}>
+            <Input.Label>{t('plugin-url.label')}</Input.Label>
+            <Input.TextInput
+              placeholder='https://example.com/manifest.json'
+              value={url}
+              onChange={(event) => {
+                setUrl(event.target.value);
+                setError(null);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleLoad();
+                }
+              }}
+              disabled={loading}
+              autoFocus
+            />
+            {error && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+          </Input.Root>
+          <div className='flex justify-end'>
+            <Button variant='primary' disabled={!url.trim() || loading} onClick={handleLoad}>
+              {loading ? t('loading.label') : t('load-plugin.label')}
+            </Button>
+          </div>
+        </div>
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/LoadPluginDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { LoadPluginDialog as default } from './LoadPluginDialog';

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -2,27 +2,116 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
-import { usePluginManager } from '@dxos/app-framework/ui';
-import { runAndForwardErrors } from '@dxos/effect';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 
-import { PluginDetail } from '../../components';
+import { PluginDetail } from '#components';
+import { getPluginPath } from '#meta';
+
+import {
+  useCatalogEntry,
+  useInstalledVersionTag,
+  usePluginActions,
+  useRegistryPluginProvider,
+  useRemotePluginIds,
+  useVersionPicker,
+} from '../../hooks';
 
-// TODO(burdon): Convert to ECHO type.
 export type PluginArticleProps = { subject: Plugin.Plugin };
 
 export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
+  const pluginId = plugin.meta.id;
   const manager = usePluginManager();
-  const enabled = manager.getEnabled().includes(plugin.meta.id);
-  const handleEnableChange = useCallback(
-    (enabled: boolean) =>
-      enabled
-        ? runAndForwardErrors(manager.enable(plugin.meta.id))
-        : runAndForwardErrors(manager.disable(plugin.meta.id)),
-    [manager, plugin.meta.id],
+  const plugins = useAtomValue(manager.plugins);
+  const remotePluginIds = useRemotePluginIds();
+  const provider = useRegistryPluginProvider();
+  const { invokePromise } = useOperationInvoker();
+
+  const { catalogEntry, moduleUrl, repo } = useCatalogEntry(pluginId);
+  const { installedVersionTag, syncInstalledVersion } = useInstalledVersionTag(pluginId, plugins);
+  const { pickerVersions, selectedVersionTag, setSelectedVersionTag } = useVersionPicker({
+    provider,
+    pluginId,
+    repo,
+    moduleUrl,
+    installedVersionTag,
+  });
+
+  const enabled = manager.getEnabled().includes(pluginId);
+  const failed = useAtomValue(manager.failed);
+  const failure = useMemo(() => failed.find((entry) => entry.id === pluginId), [failed, pluginId]);
+  const isInstalled = useMemo(() => plugins.some((candidate) => candidate.meta.id === pluginId), [plugins, pluginId]);
+  const isCore = manager.getCore().includes(pluginId);
+  const canUninstall = isInstalled && !isCore && remotePluginIds.has(pluginId);
+  const hasUpdate =
+    isInstalled && !!catalogEntry && !!installedVersionTag && installedVersionTag !== catalogEntry.version;
+
+  // Recompute graph slices whenever the plugin list changes, so installs /
+  // removals through other surfaces (or this article's own actions) keep the
+  // detail view in sync.
+  const dependencies = useMemo(
+    () => manager.getDependencies(pluginId, { transitive: false }),
+    [manager, pluginId, plugins],
+  );
+  const dependents = useMemo(
+    () => manager.getDependents(pluginId, { transitive: false }),
+    [manager, pluginId, plugins],
   );
 
-  return <PluginDetail plugin={plugin} enabled={enabled} onEnabledChange={handleEnableChange} />;
+  // Resolves a plugin id to its display name. A plugin's translations are
+  // only loaded when it is activated, so the always-available `meta.name`
+  // from the registered plugin set is the right source for chip labels.
+  const handleResolvePluginName = useCallback(
+    (id: string): string => plugins.find((candidate) => candidate.meta.id === id)?.meta.name ?? id,
+    [plugins],
+  );
+
+  const handleNavigateToPlugin = useCallback(
+    (targetId: string) => {
+      void invokePromise(LayoutOperation.Open, {
+        subject: [getPluginPath(targetId)],
+      });
+    },
+    [invokePromise],
+  );
+
+  const actions = usePluginActions({
+    manager,
+    pluginId,
+    isInstalled,
+    moduleUrl,
+    catalogEntry,
+    pickerVersions,
+    selectedVersionTag,
+    syncInstalledVersion,
+  });
+
+  return (
+    <PluginDetail
+      plugin={plugin}
+      enabled={enabled}
+      installing={actions.installing}
+      updating={actions.updating}
+      hasUpdate={hasUpdate}
+      installedVersionTag={installedVersionTag}
+      selectedVersionTag={selectedVersionTag}
+      versions={pickerVersions}
+      dependencies={dependencies}
+      dependents={dependents}
+      failure={failure}
+      onOpenSpec={actions.handleOpenSpec}
+      onEnabledChange={actions.handleEnableChange}
+      onInstall={!isInstalled && moduleUrl ? actions.handleInstall : undefined}
+      onInstallVersion={pickerVersions.length > 0 ? actions.handleInstallVersion : undefined}
+      onNavigateToPlugin={handleNavigateToPlugin}
+      onResolvePluginName={handleResolvePluginName}
+      onUninstall={canUninstall ? actions.handleUninstall : undefined}
+      onUpdate={hasUpdate ? actions.handleUpdate : undefined}
+      onVersionChange={setSelectedVersionTag}
+    />
+  );
 };

package/src/containers/PluginArticle/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { PluginArticle } from './PluginArticle';
-
-export default PluginArticle;
+export { PluginArticle as default } from './PluginArticle';

package/src/containers/PublicRegistryArticle/PublicRegistryArticle.tsx

@@ -0,0 +1,192 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { type Registry, Plugin, UrlLoader } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { runAndForwardErrors } from '@dxos/effect';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
+import { useTranslation } from '@dxos/react-ui';
+import { composable } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+import { useAutoTags, useRegistryPlugins, useUpdateAvailableIds } from '../../hooks';
+import { BaseRegistryArticle } from '../BaseRegistryArticle';
+
+const sortEntries = (a: Registry.Plugin, b: Registry.Plugin) => (a.name ?? a.id).localeCompare(b.name ?? b.id);
+
+const sortPlugins = (a: Plugin.Plugin, b: Plugin.Plugin) =>
+  (a.meta.name ?? a.meta.id).localeCompare(b.meta.name ?? b.meta.id);
+
+/**
+ * Turns a registry catalog entry into a minimal Plugin object so we can reuse
+ * {@link BaseRegistryArticle} for rendering. The synthesized plugin has no
+ * modules — it exists only for display until the user installs it.
+ */
+const toDisplayPlugin = (plugin: Registry.Plugin): Plugin.Plugin =>
+  ({
+    [Plugin.PluginTypeId]: Plugin.PluginTypeId,
+    meta: {
+      id: plugin.id,
+      name: plugin.name,
+      description: plugin.description,
+      homePage: plugin.homePage,
+      source: plugin.source,
+      screenshots: plugin.screenshots,
+      tags: plugin.tags,
+      icon: plugin.icon,
+      iconHue: plugin.iconHue,
+    },
+    modules: [],
+  }) as Plugin.Plugin;
+
+export type PublicRegistryArticleProps = {
+  id: string;
+};
+
+export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryArticleProps>(
+  ({ id, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const manager = usePluginManager();
+    const { invoke } = useOperationInvoker();
+    const { entries, loading, error } = useRegistryPlugins();
+    const plugins = useAtomValue(manager.plugins);
+    const installedIds = useMemo(() => plugins.map((plugin) => plugin.meta.id), [plugins]);
+    const extraTagsById = useAutoTags(entries);
+
+    // Snapshot of installed plugin ids at mount time. Used to sort installed
+    // plugins to the top without having newly-installed rows jump up mid-session.
+    const [installedSnapshot] = useState<ReadonlySet<string>>(
+      () => new Set(manager.getPlugins().map((plugin) => plugin.meta.id)),
+    );
+
+    const [installingIds, setInstallingIds] = useState<readonly string[]>([]);
+    const [updatingIds, setUpdatingIds] = useState<readonly string[]>([]);
+    const updateAvailableIds = useUpdateAvailableIds(entries);
+
+    const sortedEntries = useMemo(() => [...entries].sort(sortEntries), [entries]);
+    const moduleUrlById = useMemo(() => {
+      const map: Record<string, string> = {};
+      for (const entry of sortedEntries) {
+        map[entry.id] = entry.moduleUrl;
+      }
+      return map;
+    }, [sortedEntries]);
+
+    // Maps plugin id → current registry version (i.e. plugin.version from the catalog).
+    const versionById = useMemo(() => {
+      const map: Record<string, string> = {};
+      for (const entry of sortedEntries) {
+        map[entry.id] = entry.version;
+      }
+      return map;
+    }, [sortedEntries]);
+
+    // Single list with installed-at-mount plugins sorted to the top. Sort order
+    // is based on the mount-time snapshot so rows don't jump as the user
+    // installs plugins during the session.
+    const items = useMemo(() => {
+      const catalogIds = new Set(sortedEntries.map((entry) => entry.id));
+      const remoteIds = new Set(UrlLoader.getRemoteEntries().map((entry) => entry.id));
+      const fromCatalog = sortedEntries.map(toDisplayPlugin);
+      const fromUrlOnly = plugins.filter((plugin) => remoteIds.has(plugin.meta.id) && !catalogIds.has(plugin.meta.id));
+      const installedFirst = [...fromCatalog, ...fromUrlOnly].sort((a, b) => {
+        const aInstalled = installedSnapshot.has(a.meta.id);
+        const bInstalled = installedSnapshot.has(b.meta.id);
+        if (aInstalled !== bInstalled) {
+          return aInstalled ? -1 : 1;
+        }
+        return sortPlugins(a, b);
+      });
+      return installedFirst;
+    }, [sortedEntries, installedSnapshot, plugins]);
+
+    const handleInstall = useCallback(
+      (pluginId: string) => {
+        const moduleUrl = moduleUrlById[pluginId];
+        const version = versionById[pluginId];
+        if (!moduleUrl) {
+          return;
+        }
+        setInstallingIds((prev) => (prev.includes(pluginId) ? prev : [...prev, pluginId]));
+        void Effect.gen(function* () {
+          const plugin = yield* manager.add(moduleUrl);
+          yield* manager.enable(plugin.meta.id);
+          // Persist the installed version for future update detection.
+          if (version) {
+            UrlLoader.setInstalledVersion(plugin.meta.id, version);
+          }
+          yield* invoke(ObservabilityOperation.SendEvent, {
+            name: 'plugins.install',
+            properties: { plugin: plugin.meta.id, source: 'registry' },
+          });
+        }).pipe(
+          Effect.ensuring(Effect.sync(() => setInstallingIds((prev) => prev.filter((pid) => pid !== pluginId)))),
+          runAndForwardErrors,
+        );
+      },
+      [invoke, manager, moduleUrlById, versionById],
+    );
+
+    const handleUpdate = useCallback(
+      (pluginId: string) => {
+        const moduleUrl = moduleUrlById[pluginId];
+        const version = versionById[pluginId];
+        if (!moduleUrl) {
+          return;
+        }
+        setUpdatingIds((prev) => (prev.includes(pluginId) ? prev : [...prev, pluginId]));
+        void Effect.gen(function* () {
+          // Unload the old version then re-install from the new URL.
+          yield* manager.remove(pluginId);
+          const plugin = yield* manager.add(moduleUrl);
+          yield* manager.enable(plugin.meta.id);
+          if (version) {
+            UrlLoader.setInstalledVersion(plugin.meta.id, version);
+          }
+          yield* invoke(ObservabilityOperation.SendEvent, {
+            name: 'plugins.update',
+            properties: { plugin: plugin.meta.id, source: 'registry' },
+          });
+        }).pipe(
+          Effect.ensuring(Effect.sync(() => setUpdatingIds((prev) => prev.filter((pid) => pid !== pluginId)))),
+          runAndForwardErrors,
+        );
+      },
+      [invoke, manager, moduleUrlById, versionById],
+    );
+
+    const empty = error ? (
+      <div className='p-4 text-description'>{t('registry.error.label', { message: error.message })}</div>
+    ) : loading ? (
+      <div className='p-4 text-description'>{t('registry.loading.label')}</div>
+    ) : (
+      <div className='p-4 text-description'>{t('registry.empty.label')}</div>
+    );
+
+    return (
+      <BaseRegistryArticle
+        {...props}
+        id={id}
+        source='registry'
+        plugins={items}
+        installed={installedIds}
+        installing={installingIds}
+        updating={updatingIds}
+        updateAvailableIds={updateAvailableIds}
+        extraTagsById={extraTagsById}
+        onInstall={handleInstall}
+        onUpdate={handleUpdate}
+        empty={empty}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+PublicRegistryArticle.displayName = 'PublicRegistryArticle';

package/src/containers/PublicRegistryArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { PublicRegistryArticle as default, PublicRegistryArticle } from './PublicRegistryArticle';

package/src/containers/RegistryArticle/RegistryArticle.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useMemo } from 'react';
+
+import { type Plugin, type PluginManager } from '@dxos/app-framework';
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { composable } from '@dxos/ui-theme';
+
+import { BaseRegistryArticle } from '../BaseRegistryArticle';
+
+const sortByPluginMeta = (a: Plugin.Plugin, b: Plugin.Plugin) =>
+  (a.meta.name ?? a.meta.id).localeCompare(b.meta.name ?? b.meta.id);
+
+export type RegistryArticleProps = {
+  id: string;
+  plugins: Plugin.Plugin[];
+  /**
+   * Map from plugin id → display-only tags (e.g. `registry`, `local`) computed by the caller.
+   */
+  extraTagsById?: Record<string, readonly string[]>;
+};
+
+export const RegistryArticle = composable<HTMLDivElement, RegistryArticleProps>(
+  ({ id, plugins: pluginsProp, extraTagsById, ...props }, forwardedRef) => {
+    const manager = usePluginManager();
+    const failed = useAtomValue(manager.failed);
+    const plugins = useMemo(() => [...pluginsProp].sort(sortByPluginMeta), [pluginsProp]);
+    const failuresById = useMemo(
+      () =>
+        failed.reduce<Record<string, PluginManager.PluginFailure>>((acc, failure) => {
+          acc[failure.id] = failure;
+          return acc;
+        }, {}),
+      [failed],
+    );
+
+    return (
+      <BaseRegistryArticle
+        {...props}
+        id={id}
+        plugins={plugins}
+        extraTagsById={extraTagsById}
+        failuresById={failuresById}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+RegistryArticle.displayName = 'RegistryArticle';

package/src/containers/RegistryArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { RegistryArticle as default, RegistryArticle } from './RegistryArticle';

package/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback } from 'react';
+
+import { useSettingsState, usePluginManager } from '@dxos/app-framework/ui';
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+
+import { RegistrySettings } from '../../components';
+import { type RegistrySettings as RegistrySettingsType } from '../../types';
+
+export type RegistrySettingsContainerProps = {
+  subject: AppCapabilities.Settings;
+};
+
+/**
+ * Wires the {@link RegistrySettings} presentational component to the plugin
+ * manager and the settings atom: subscribes to `manager.devPluginIds` for the
+ * "currently loaded" indicator and exposes enable/disable callbacks that drive
+ * the manager's add/enable/remove flow.
+ */
+export const RegistrySettingsContainer = ({ subject }: RegistrySettingsContainerProps) => {
+  const manager = usePluginManager();
+  const { settings, updateSettings } = useSettingsState<RegistrySettingsType>(subject.atom);
+  const activeDevPluginIds = useAtomValue(manager.devPluginIds);
+
+  const onEnableDev = useCallback(
+    async (url: string) => {
+      await runAndForwardErrors(
+        Effect.gen(function* () {
+          const plugin = yield* manager.add(url);
+          yield* manager.enable(plugin.meta.id);
+        }),
+      );
+    },
+    [manager],
+  );
+
+  const onDisableDev = useCallback(
+    async (id: string) => {
+      await runAndForwardErrors(manager.remove(id));
+    },
+    [manager],
+  );
+
+  return (
+    <RegistrySettings
+      settings={settings}
+      onSettingsChange={updateSettings}
+      activeDevPluginIds={activeDevPluginIds}
+      onEnableDev={onEnableDev}
+      onDisableDev={onDisableDev}
+    />
+  );
+};

package/src/containers/RegistrySettingsContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { RegistrySettingsContainer as default } from './RegistrySettingsContainer';

package/src/containers/index.ts

@@ -4,5 +4,9 @@
 
 import { type ComponentType, lazy } from 'react';
 
+export { LOAD_PLUGIN_DIALOG } from './LoadPluginDialog/LoadPluginDialog';
+export const LoadPluginDialog: ComponentType<any> = lazy(() => import('./LoadPluginDialog'));
 export const PluginArticle: ComponentType<any> = lazy(() => import('./PluginArticle'));
-export const PluginRegistry: ComponentType<any> = lazy(() => import('./PluginRegistry'));
+export const PublicRegistryArticle: ComponentType<any> = lazy(() => import('./PublicRegistryArticle'));
+export const RegistryArticle: ComponentType<any> = lazy(() => import('./RegistryArticle'));
+export const RegistrySettingsContainer: ComponentType<any> = lazy(() => import('./RegistrySettingsContainer'));

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './useAutoTags';
+export * from './useCatalogEntry';
+export * from './useDisableConfirmation';
+export * from './useInstalledVersionTag';
+export * from './usePluginActions';
+export * from './useRegistryPlugins';
+export * from './useUpdateAvailable';
+export * from './useVersionPicker';

package/src/hooks/useAutoTags.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type Registry, UrlLoader } from '@dxos/app-framework';
+
+/**
+ * Auto-tags that are derived at display time rather than persisted to `Plugin.Meta`.
+ * - `registry`: plugin id appears in the registry catalog manifest.
+ * - `local`: plugin was loaded from a `localhost` / `127.0.0.1` / `::1` URL.
+ */
+export type AutoTagsMap = Record<string, readonly string[]>;
+
+/**
+ * Computes the per-plugin-id extra tags the UI should display.
+ *
+ * Reads the persisted remote-plugin entries synchronously to derive `local`, and
+ * adds `registry` for any plugin id found in the supplied registry manifest entries.
+ */
+export const useAutoTags = (registryEntries: readonly Registry.Plugin[]): AutoTagsMap =>
+  useMemo(() => {
+    const byId: Record<string, string[]> = {};
+    const addTag = (id: string, tag: string) => {
+      const existing = byId[id];
+      if (!existing) {
+        byId[id] = [tag];
+      } else if (!existing.includes(tag)) {
+        existing.push(tag);
+      }
+    };
+
+    for (const entry of UrlLoader.getRemoteEntries()) {
+      if (UrlLoader.isLocalUrl(entry.url)) {
+        addTag(entry.id, 'local');
+      }
+    }
+    for (const entry of registryEntries) {
+      addTag(entry.id, 'registry');
+    }
+
+    return byId;
+  }, [registryEntries]);
+
+/**
+ * Returns the set of plugin ids known to originate from a remote URL (not bundled).
+ * Used to filter the Official/Recommended sections so third-party plugins are excluded.
+ */
+export const useRemotePluginIds = (): ReadonlySet<string> =>
+  useMemo(() => new Set(UrlLoader.getRemoteEntries().map((entry) => entry.id)), []);

package/src/hooks/useCatalogEntry.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type Registry } from '@dxos/app-framework';
+
+import { useRegistryPlugins } from './useRegistryPlugins';
+
+/**
+ * Resolves the registry catalog entry for a plugin by id, plus the two fields
+ * (`moduleUrl`, `repo`) the rest of the article cares about.
+ */
+export const useCatalogEntry = (
+  pluginId: string,
+): {
+  catalogEntry: Registry.Plugin | undefined;
+  moduleUrl: string | undefined;
+  repo: string | undefined;
+} => {
+  const { entries } = useRegistryPlugins();
+  const catalogEntry = useMemo(() => entries.find((entry) => entry.id === pluginId), [entries, pluginId]);
+  return { catalogEntry, moduleUrl: catalogEntry?.moduleUrl, repo: catalogEntry?.repo };
+};