@dxos/plugin-registry 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/PluginFailureBadge/PluginFailureBadge.tsx

@@ -15,8 +15,6 @@ type IconSize = 4 | 5 | 6 | 8;
 
 export type PluginFailureBadgeProps = {
   failure: PluginManager.PluginFailure;
-  /** Optional override for the trigger icon's tailwind classes. */
-  iconClassNames?: string;
   /** Visual size of the warning icon (passed through to react-ui `<Icon />`). */
   size?: IconSize;
 };
@@ -28,41 +26,40 @@ export type PluginFailureBadgeProps = {
  * message — enough for an operator to tell "remote host is offline" apart
  * from "the plugin crashed".
  */
-export const PluginFailureBadge = ({ failure, iconClassNames, size = 4 }: PluginFailureBadgeProps) => {
-  const { t } = useTranslation(meta.id);
-
-  const phaseLabel = failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label');
-  const reasonLabel =
-    failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label');
+export const PluginFailureBadge = ({ failure, size }: PluginFailureBadgeProps) => {
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
         <IconButton
-          variant='ghost'
+          variant='destructive'
+          icon='ph--warning--bold'
           iconOnly
           noTooltip
-          icon='ph--warning--bold'
           size={size}
-          iconClassNames={iconClassNames}
           label={t('failure-badge.label')}
           data-testid={`pluginFailureBadge.${failure.id}`}
-          // Don't bubble up to row click handlers (e.g. the card's `onClick`
-          // that opens the details pane). The popover is the action here.
           onClick={(event) => event.stopPropagation()}
         />
       </Popover.Trigger>
-      <Popover.Content>
-        <Popover.Viewport>
-          <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
-            <p className='font-medium text-sm'>
-              {t('failure-title.label', { phase: phaseLabel, reason: reasonLabel })}
-            </p>
-            <p className='text-description text-sm break-words'>{failure.error.message}</p>
-          </div>
-        </Popover.Viewport>
-        <Popover.Arrow />
-      </Popover.Content>
+      <Popover.Portal>
+        <Popover.Content>
+          <Popover.Viewport>
+            <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
+              <p className='font-medium text-sm'>
+                {t('failure-title.label', {
+                  phase: failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label'),
+                  reason:
+                    failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label'),
+                })}
+              </p>
+              <p className='text-description text-sm break-words'>{failure.error.message}</p>
+            </div>
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };

package/src/components/PluginList/PluginItem.tsx

@@ -12,11 +12,11 @@ import {
   IconButton,
   Input,
   Link,
-  ListItem,
   type NeutralPalette,
   Tag,
   useTranslation,
 } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
 import { mx } from '@dxos/ui-theme';
 import { getStyles } from '@dxos/ui-theme';
 
@@ -78,8 +78,10 @@ export const PluginItem = ({
   onSettings,
   failure,
 }: PluginItemProps) => {
-  const { t } = useTranslation(meta.id);
-  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
+  const { t } = useTranslation(meta.profile.key);
+  const { key: id, name, description, tags, icon: rawIcon } = plugin.meta.profile;
+  const icon = rawIcon?.key ?? 'ph--circle--regular';
+  const iconHue = rawIcon?.hue ?? 'neutral';
   const displayTags = useMemo(() => {
     if (!extraTags || extraTags.length === 0) {
       return tags ?? [];
@@ -97,7 +99,6 @@ export const PluginItem = ({
   const showInstallButton = !!onInstall && !isInstalled;
   const showUpdateButton = !!onUpdate && isInstalled && !!hasUpdate;
   const inputId = `${id}-input`;
-  const labelId = `${id}-label`;
   const descriptionId = `${id}-description`;
   const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
 
@@ -132,12 +133,16 @@ export const PluginItem = ({
   const gridRows = 'grid grid-cols-1 grid-rows-[40px_1fr_min-content_40px]';
 
   return (
-    <ListItem.Root
-      key={id}
-      labelId={labelId}
+    <Listbox.Item
+      id={id}
       data-testid={`pluginList.${id}`}
       aria-describedby={descriptionId}
-      classNames={mx(gridCols, 'h-[14rem] w-full gap-3 pe-2 bg-modal-surface rounded-md overflow-hidden')}
+      classNames={mx(
+        gridCols,
+        // Override `Listbox.Item`'s default row chrome (flex/items-center/padding/cursor) so the
+        // bespoke card grid stretches both columns to full height and controls its own padding.
+        'items-stretch p-0 pe-2 cursor-default h-[14rem] w-full gap-3 bg-modal-surface rounded-md overflow-hidden',
+      )}
     >
       <div className={mx(gridRows, 'rounded-l-md', styles.surface)}>
         <div className='flex justify-center row-start-2 cursor-pointer' onClick={handleClick}>
@@ -156,8 +161,8 @@ export const PluginItem = ({
         </div>
 
         <div className='flex -ms-0.5 overflow-x-auto scrollbar-none'>
-          {displayTags.map((tag) => (
-            <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase'>
+          {displayTags.map((tag: string) => (
+            <Tag key={tag} hue={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase'>
               {tag}
             </Tag>
           ))}
@@ -207,7 +212,7 @@ export const PluginItem = ({
           </div>
         </div>
       </div>
-    </ListItem.Root>
+    </Listbox.Item>
   );
 };
 

package/src/components/PluginList/PluginList.stories.tsx

@@ -38,8 +38,7 @@ const DefaultStory = () => {
             name: `${random.commerce.productName()}`,
             description: random.lorem.sentences(Math.ceil(Math.random() * 3)),
             tags: random.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
-            icon: random.helpers.arrayElement(icons),
-            iconHue: getHashHue(random.string.uuid()),
+            icon: { key: random.helpers.arrayElement(icons), hue: getHashHue(random.string.uuid()) },
             homePage: random.datatype.boolean({ probability: 0.5 }) ? random.internet.url() : undefined,
             source: random.internet.url(),
           }),

package/src/components/PluginList/PluginList.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type Plugin, type PluginManager } from '@dxos/app-framework';
-import { List } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
 
 import { PluginItem, type PluginItemProps } from './PluginItem';
 
@@ -36,17 +36,22 @@ export const PluginList = ({
   ...props
 }: PluginListProps) => {
   return (
-    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4'>
-      {plugins.map((plugin) => (
-        <PluginItem
-          key={plugin.meta.id}
-          plugin={plugin}
-          extraTags={extraTagsById?.[plugin.meta.id]}
-          hasUpdate={updateAvailableIds?.has(plugin.meta.id)}
-          failure={failuresById?.[plugin.meta.id]}
-          {...props}
-        />
-      ))}
-    </List>
+    <Listbox.Root>
+      <Listbox.Content
+        aria-label='plugins'
+        classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4'
+      >
+        {plugins.map((plugin) => (
+          <PluginItem
+            key={plugin.meta.profile.key}
+            plugin={plugin}
+            extraTags={extraTagsById?.[plugin.meta.profile.key]}
+            hasUpdate={updateAvailableIds?.has(plugin.meta.profile.key)}
+            failure={failuresById?.[plugin.meta.profile.key]}
+            {...props}
+          />
+        ))}
+      </Listbox.Content>
+    </Listbox.Root>
   );
 };

package/src/components/RegistrySettings/RegistrySettings.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { RegistrySettings } from './RegistrySettings';
+
+const meta = {
+  title: 'plugins/plugin-registry/components/RegistrySettings',
+  component: RegistrySettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RegistrySettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: { devPluginUrl: 'http://localhost:3967', devPluginEnabled: false },
+    onSettingsChange: () => {},
+    activeDevPluginIds: [],
+    onEnableDev: async () => {},
+    onDisableDev: async () => {},
+  },
+};
+
+export const Enabled: Story = {
+  args: {
+    settings: { devPluginUrl: 'http://localhost:3967', devPluginEnabled: true },
+    onSettingsChange: () => {},
+    activeDevPluginIds: [],
+    onEnableDev: async () => {},
+    onDisableDev: async () => {},
+  },
+};

package/src/components/RegistrySettings/RegistrySettings.tsx

@@ -7,13 +7,13 @@ import React, { useCallback, useState } from 'react';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { log } from '@dxos/log';
 import { Button, Input, Message, useTranslation } from '@dxos/react-ui';
-import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
 
-import { type RegistrySettings as RegistrySettingsType } from '../../types';
+import { RegistrySettingsSchema, type RegistrySettings as RegistrySettingsType } from '../../types';
 
-export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
+export type RegistrySettingsProps = AppSurface.SettingsProps<
   RegistrySettingsType,
   {
     activeDevPluginIds: readonly string[];
@@ -29,6 +29,10 @@ export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
  * re-attach it on the next reload, surviving HMR-triggered reloads. If the
  * dev server is offline at boot, the toggle stays on and a warning is logged
  * (the manager's `failed` atom also surfaces a badge on the plugin list).
+ *
+ * The URL input and toggle are rendered as `Form.Row` action rows (not schema
+ * fields): the input needs a dynamic disabled state and the toggle runs async
+ * enable/disable side effects, neither of which a plain schema field expresses.
  */
 export const RegistrySettings = ({
   settings,
@@ -37,7 +41,7 @@ export const RegistrySettings = ({
   onEnableDev,
   onDisableDev,
 }: RegistrySettingsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [busy, setBusy] = useState(false);
   const enabled = !!settings.devPluginEnabled;
   const url = settings.devPluginUrl ?? '';
@@ -87,34 +91,41 @@ export const RegistrySettings = ({
       : t('dev-plugin.enable.label');
 
   return (
-    <SettingsForm.Viewport>
-      <SettingsForm.Section title={t('dev-plugin.section.title')}>
-        <Message.Root valence='neutral'>
-          <Message.Content>{t('dev-plugin.description')}</Message.Content>
-        </Message.Root>
-        <SettingsForm.Item title={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
-          <Input.TextInput
-            classNames='ms-2'
-            disabled={!onSettingsChange || enabled || busy}
-            value={url}
-            onChange={(event) => onSettingsChange?.((current) => ({ ...current, devPluginUrl: event.target.value }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item title={t('dev-plugin.toggle.label')} description={t('dev-plugin.toggle.description')}>
-          <Button
-            variant={enabled ? undefined : 'primary'}
-            disabled={busy || (!enabled && !trimmedUrl)}
-            onClick={() => void handleToggle()}
-          >
-            {buttonLabel}
-          </Button>
-        </SettingsForm.Item>
-        {enabled && !loadedDevId && !busy && (
-          <Message.Root valence='warning'>
-            <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
-          </Message.Root>
-        )}
-      </SettingsForm.Section>
-    </SettingsForm.Viewport>
+    <Form.Root variant='settings' readonly={!onSettingsChange} schema={RegistrySettingsSchema} values={settings}>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('dev-plugin.section.title')}>
+            <Message.Root valence='neutral'>
+              <Message.Content>{t('dev-plugin.description')}</Message.Content>
+            </Message.Root>
+            <Form.Row label={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
+              <Input.Root>
+                <Input.TextInput
+                  disabled={!onSettingsChange || enabled || busy}
+                  value={url}
+                  onChange={(event) =>
+                    onSettingsChange?.((current) => ({ ...current, devPluginUrl: event.target.value }))
+                  }
+                />
+              </Input.Root>
+            </Form.Row>
+            <Form.Row label={t('dev-plugin.toggle.label')} description={t('dev-plugin.toggle.description')}>
+              <Button
+                variant={enabled ? undefined : 'primary'}
+                disabled={!onSettingsChange || busy || (!enabled && !trimmedUrl)}
+                onClick={() => void handleToggle()}
+              >
+                {buttonLabel}
+              </Button>
+            </Form.Row>
+            {enabled && !loadedDevId && !busy && (
+              <Message.Root valence='warning'>
+                <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
+              </Message.Root>
+            )}
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };

package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx

@@ -20,7 +20,7 @@ import { getPluginPath, meta } from '#meta';
 import { useDisableConfirmation } from '../../hooks';
 
 const matchesFilter = (plugin: Plugin.Plugin, query: string) => {
-  const haystack = `${plugin.meta.name ?? ''} ${plugin.meta.id}`.toLowerCase();
+  const haystack = `${plugin.meta.profile.name ?? ''} ${plugin.meta.profile.key}`.toLowerCase();
   return haystack.includes(query);
 };
 
@@ -67,7 +67,7 @@ export const BaseRegistryArticle = composable<HTMLDivElement, BaseRegistryArticl
     },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const manager = usePluginManager();
     const { invoke, invokePromise } = useOperationInvoker();
     const allSettings = useCapabilities(AppCapabilities.Settings);

package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx

@@ -12,11 +12,11 @@ import { Button, Dialog, Input, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '../../meta';
 
-export const LOAD_PLUGIN_DIALOG = DXN.make(`${meta.id}.loadPluginDialog`);
+export const LOAD_PLUGIN_DIALOG = DXN.make(`${meta.profile.key}.loadPluginDialog`);
 
 export const LoadPluginDialog = () => {
   const manager = usePluginManager();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [url, setUrl] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -33,7 +33,7 @@ export const LoadPluginDialog = () => {
 
     void Effect.gen(function* () {
       const plugin = yield* manager.add(trimmed);
-      yield* manager.enable(plugin.meta.id);
+      yield* manager.enable(plugin.meta.profile.key);
       closeRef.current?.click();
     }).pipe(
       Effect.catchAll((err) =>

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -24,19 +24,18 @@ import {
 export type PluginArticleProps = { subject: Plugin.Plugin };
 
 export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
-  const pluginId = plugin.meta.id;
+  const pluginId = plugin.meta.profile.key;
   const manager = usePluginManager();
   const plugins = useAtomValue(manager.plugins);
   const remotePluginIds = useRemotePluginIds();
   const provider = useRegistryPluginProvider();
   const { invokePromise } = useOperationInvoker();
 
-  const { catalogEntry, moduleUrl, repo } = useCatalogEntry(pluginId);
+  const { catalogEntry, moduleUrl } = useCatalogEntry(pluginId);
   const { installedVersionTag, syncInstalledVersion } = useInstalledVersionTag(pluginId, plugins);
   const { pickerVersions, selectedVersionTag, setSelectedVersionTag } = useVersionPicker({
     provider,
     pluginId,
-    repo,
     moduleUrl,
     installedVersionTag,
   });
@@ -44,11 +43,14 @@ export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
   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 isInstalled = useMemo(
+    () => plugins.some((candidate) => candidate.meta.profile.key === pluginId),
+    [plugins, pluginId],
+  );
   const isCore = manager.getCore().includes(pluginId);
   const canUninstall = isInstalled && !isCore && remotePluginIds.has(pluginId);
   const hasUpdate =
-    isInstalled && !!catalogEntry && !!installedVersionTag && installedVersionTag !== catalogEntry.version;
+    isInstalled && !!catalogEntry && !!installedVersionTag && installedVersionTag !== catalogEntry.release?.version;
 
   // Recompute graph slices whenever the plugin list changes, so installs /
   // removals through other surfaces (or this article's own actions) keep the
@@ -66,7 +68,7 @@ export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
   // 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,
+    (id: string): string => plugins.find((candidate) => candidate.meta.profile.key === id)?.meta.profile.name ?? id,
     [plugins],
   );
 

package/src/containers/PublicRegistryArticle/PublicRegistryArticle.tsx

@@ -6,7 +6,7 @@ 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 { Plugin, UrlLoader } from '@dxos/app-framework';
 import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
 import { EffectEx } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
@@ -19,29 +19,30 @@ 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 sortEntries = (a: Plugin.Meta, b: Plugin.Meta) =>
+  (a.profile.name ?? a.profile.key).localeCompare(b.profile.name ?? b.profile.key);
 
 const sortPlugins = (a: Plugin.Plugin, b: Plugin.Plugin) =>
-  (a.meta.name ?? a.meta.id).localeCompare(b.meta.name ?? b.meta.id);
+  (a.meta.profile.name ?? a.meta.profile.key).localeCompare(b.meta.profile.name ?? b.meta.profile.key);
 
 /**
  * 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 =>
+const toDisplayPlugin = (plugin: Plugin.Meta): Plugin.Plugin =>
   ({
     [Plugin.PluginTypeId]: Plugin.PluginTypeId,
     meta: Plugin.makeMeta({
-      key: DXN.make(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,
+      key: DXN.make(plugin.profile.key),
+      name: plugin.profile.name,
+      description: plugin.profile.description,
+      homePage: plugin.profile.homePage,
+      source: plugin.profile.source,
+      screenshots: plugin.profile.screenshots,
+      tags: plugin.profile.tags,
+      icon: plugin.profile.icon,
+      author: plugin.profile.author,
     }),
     modules: [],
   }) as Plugin.Plugin;
@@ -52,18 +53,18 @@ export type PublicRegistryArticleProps = {
 
 export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryArticleProps>(
   ({ id, ...props }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     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 installedIds = useMemo(() => plugins.map((plugin) => plugin.meta.profile.key), [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)),
+      () => new Set(manager.getPlugins().map((plugin) => plugin.meta.profile.key)),
     );
 
     const [installingIds, setInstallingIds] = useState<readonly string[]>([]);
@@ -74,7 +75,9 @@ export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryAr
     const moduleUrlById = useMemo(() => {
       const map: Record<string, string> = {};
       for (const entry of sortedEntries) {
-        map[entry.id] = entry.moduleUrl;
+        if (entry.release?.moduleUrl) {
+          map[entry.profile.key] = entry.release.moduleUrl;
+        }
       }
       return map;
     }, [sortedEntries]);
@@ -83,7 +86,9 @@ export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryAr
     const versionById = useMemo(() => {
       const map: Record<string, string> = {};
       for (const entry of sortedEntries) {
-        map[entry.id] = entry.version;
+        if (entry.release?.version) {
+          map[entry.profile.key] = entry.release.version;
+        }
       }
       return map;
     }, [sortedEntries]);
@@ -92,13 +97,15 @@ export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryAr
     // 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 catalogIds = new Set(sortedEntries.map((entry) => entry.profile.key));
       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 fromUrlOnly = plugins.filter(
+        (plugin) => remoteIds.has(plugin.meta.profile.key) && !catalogIds.has(plugin.meta.profile.key),
+      );
       const installedFirst = [...fromCatalog, ...fromUrlOnly].sort((a, b) => {
-        const aInstalled = installedSnapshot.has(a.meta.id);
-        const bInstalled = installedSnapshot.has(b.meta.id);
+        const aInstalled = installedSnapshot.has(a.meta.profile.key);
+        const bInstalled = installedSnapshot.has(b.meta.profile.key);
         if (aInstalled !== bInstalled) {
           return aInstalled ? -1 : 1;
         }
@@ -117,14 +124,14 @@ export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryAr
         setInstallingIds((prev) => (prev.includes(pluginId) ? prev : [...prev, pluginId]));
         void Effect.gen(function* () {
           const plugin = yield* manager.add(moduleUrl);
-          yield* manager.enable(plugin.meta.id);
+          yield* manager.enable(plugin.meta.profile.key);
           // Persist the installed version for future update detection.
           if (version) {
-            UrlLoader.setInstalledVersion(plugin.meta.id, version);
+            UrlLoader.setInstalledVersion(plugin.meta.profile.key, version);
           }
           yield* invoke(ObservabilityOperation.SendEvent, {
             name: 'plugins.install',
-            properties: { plugin: plugin.meta.id, source: 'registry' },
+            properties: { plugin: plugin.meta.profile.key, source: 'registry' },
           });
         }).pipe(
           Effect.ensuring(Effect.sync(() => setInstallingIds((prev) => prev.filter((pid) => pid !== pluginId)))),
@@ -146,13 +153,13 @@ export const PublicRegistryArticle = composable<HTMLDivElement, PublicRegistryAr
           // 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);
+          yield* manager.enable(plugin.meta.profile.key);
           if (version) {
-            UrlLoader.setInstalledVersion(plugin.meta.id, version);
+            UrlLoader.setInstalledVersion(plugin.meta.profile.key, version);
           }
           yield* invoke(ObservabilityOperation.SendEvent, {
             name: 'plugins.update',
-            properties: { plugin: plugin.meta.id, source: 'registry' },
+            properties: { plugin: plugin.meta.profile.key, source: 'registry' },
           });
         }).pipe(
           Effect.ensuring(Effect.sync(() => setUpdatingIds((prev) => prev.filter((pid) => pid !== pluginId)))),

package/src/containers/PublicRegistryArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export { PublicRegistryArticle as default, PublicRegistryArticle } from './PublicRegistryArticle';
+export { PublicRegistryArticle, PublicRegistryArticle as default } from './PublicRegistryArticle';

package/src/containers/RegistryArticle/RegistryArticle.tsx

@@ -12,7 +12,7 @@ import { composable } from '@dxos/react-ui';
 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);
+  (a.meta.profile.name ?? a.meta.profile.key).localeCompare(b.meta.profile.name ?? b.meta.profile.key);
 
 export type RegistryArticleProps = {
   id: string;

package/src/containers/RegistryArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { RegistryArticle as default, RegistryArticle } from './RegistryArticle';
+export { RegistryArticle, RegistryArticle as default } from './RegistryArticle';

package/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.tsx

@@ -6,7 +6,7 @@ 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 { usePluginManager, useSettingsState } from '@dxos/app-framework/ui';
 import { type AppCapabilities } from '@dxos/app-toolkit';
 import { EffectEx } from '@dxos/effect';
 
@@ -33,7 +33,7 @@ export const RegistrySettingsContainer = ({ subject }: RegistrySettingsContainer
       await EffectEx.runAndForwardErrors(
         Effect.gen(function* () {
           const plugin = yield* manager.add(url);
-          yield* manager.enable(plugin.meta.id);
+          yield* manager.enable(plugin.meta.profile.key);
         }),
       );
     },