@dxos/plugin-registry 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,9 +25,9 @@
         "default": "./src/RegistryPlugin.tsx"
       },
       "types": "./dist/types/src/RegistryPlugin.d.ts",
-      "workerd": "./dist/lib/neutral/RegistryPlugin.workerd.mjs",
-      "node": "./dist/lib/neutral/RegistryPlugin.node.mjs",
-      "default": "./dist/lib/neutral/RegistryPlugin.mjs"
+      "workerd": "./dist/lib/RegistryPlugin.workerd.mjs",
+      "node": "./dist/lib/RegistryPlugin.node.mjs",
+      "default": "./dist/lib/RegistryPlugin.mjs"
     },
     "#translations": "./src/translations.ts",
     "#types": "./src/types.ts"
@@ -36,17 +36,17 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -56,31 +56,32 @@
     "src"
   ],
   "dependencies": {
+    "@effect-atom/atom": "^0.5.3",
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/cli": "0.75.2",
     "yaml": "^2.8.2",
-    "@dxos/app-toolkit": "0.10.0",
-    "@dxos/app-framework": "0.10.0",
-    "@dxos/client": "0.10.0",
-    "@dxos/client-protocol": "0.10.0",
-    "@dxos/compute": "0.10.0",
-    "@dxos/context": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/edge-client": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/cli-util": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/effect": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/plugin-graph": "0.10.0",
-    "@dxos/protocols": "0.10.0",
-    "@dxos/react-ui-list": "0.10.0",
-    "@dxos/react-ui-markdown": "0.10.0",
-    "@dxos/types": "0.10.0",
-    "@dxos/react-ui-mosaic": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/plugin-observability": "0.10.0"
+    "@dxos/app-framework": "0.11.1",
+    "@dxos/app-toolkit": "0.11.1",
+    "@dxos/client": "0.11.1",
+    "@dxos/client-protocol": "0.11.1",
+    "@dxos/compute": "0.11.1",
+    "@dxos/cli-util": "0.11.1",
+    "@dxos/context": "0.11.1",
+    "@dxos/echo": "0.11.1",
+    "@dxos/edge-client": "0.11.1",
+    "@dxos/effect": "0.11.1",
+    "@dxos/invariant": "0.11.1",
+    "@dxos/keys": "0.11.1",
+    "@dxos/link": "0.11.1",
+    "@dxos/log": "0.11.1",
+    "@dxos/plugin-graph": "0.11.1",
+    "@dxos/plugin-observability": "0.11.1",
+    "@dxos/protocols": "0.11.1",
+    "@dxos/react-ui-form": "0.11.1",
+    "@dxos/react-ui-list": "0.11.1",
+    "@dxos/react-ui-markdown": "0.11.1",
+    "@dxos/react-ui-mosaic": "0.11.1",
+    "@dxos/util": "0.11.1"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -90,12 +91,12 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/plugin-testing": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/plugin-testing": "0.11.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/react-ui": "0.11.1",
+    "@dxos/storybook-utils": "0.11.1",
+    "@dxos/ui-theme": "0.11.1"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -103,8 +104,8 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/RegistryCategoryArticle.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+
+import { RegistryArticle } from '#containers';
+
+import { type PluginPredicate, getCategoryPredicate } from '../categories';
+import { useAutoTags, useRegistryPlugins, useRemotePluginIds } from '../hooks';
+
+/**
+ * Resolves the {@link PluginPredicate} for a registry category against the live plugin list.
+ * Shared with the graph builder via {@link getCategoryPredicate} so the category lists and their counts agree.
+ */
+const useCategoryPredicate = (category: string): PluginPredicate => {
+  const manager = usePluginManager();
+  const remoteIds = useRemotePluginIds();
+  const core = useMemo(() => manager.getCore(), [manager]);
+  const enabled = useMemo(() => manager.getEnabled(), [manager]);
+  return useMemo(
+    () => getCategoryPredicate(category, { core, enabled, remoteIds }),
+    [category, core, enabled, remoteIds],
+  );
+};
+
+export type RegistryCategoryArticleProps = {
+  category: string;
+};
+
+/**
+ * Renders the {@link RegistryArticle} surface for one registry category. Centralises the
+ * `usePluginManager` + `useRegistryPlugins` + `useAutoTags` wiring shared by every category surface,
+ * none of which can live in a surface's `props` mapper.
+ */
+export const RegistryCategoryArticle = ({ category }: RegistryCategoryArticleProps) => {
+  const manager = usePluginManager();
+  const filter = useCategoryPredicate(category);
+  const { entries } = useRegistryPlugins();
+  const extraTagsById = useAutoTags(entries);
+  const filtered = useMemo(() => manager.getPlugins().filter(filter), [manager, filter]);
+
+  return <RegistryArticle id={category} plugins={filtered} extraTagsById={extraTagsById} />;
+};

package/src/capabilities/app-graph-builder.ts

@@ -11,7 +11,7 @@ import { DXN } from '@dxos/keys';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 import { Position } from '@dxos/util';
 
-import { REGISTRY_ID, REGISTRY_KEY, meta, registryCategoryId } from '#meta';
+import { REGISTRY_ID, meta } from '#meta';
 
 import { getCategoryPredicate, getRemotePluginIds } from '../categories';
 import { LOAD_PLUGIN_DIALOG } from '../containers';
@@ -63,6 +63,27 @@ export default Capability.makeModule(
       GraphBuilder.createExtension({
         id: 'registry',
         match: NodeMatcher.whenRoot,
+        // REGISTRY_ID is a pinned workspace (the URL's workspace anchor), so it carries no key of its
+        // own; its category and plugin children are the addressable planks (see `categories`/`plugins`).
+        connector: () =>
+          Effect.succeed([
+            Node.make({
+              id: REGISTRY_ID,
+              type: meta.profile.key,
+              properties: {
+                label: ['plugin-registry.label', { ns: meta.profile.key }],
+                icon: 'ph--squares-four--regular',
+                disposition: 'pin-end',
+                position: Position.first,
+                testId: 'treeView.pluginRegistry',
+              },
+            }),
+          ]),
+      }),
+      GraphBuilder.createExtension({
+        id: 'categories',
+        url: { key: 'category', kind: 'item', path: [] },
+        match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
         connector: (_node, get) => {
           const manager = capabilities.get(Capabilities.PluginManager);
           const plugins = get(manager.plugins);
@@ -77,82 +98,64 @@ export default Capability.makeModule(
 
           return Effect.succeed([
             Node.make({
-              id: REGISTRY_ID,
-              type: meta.profile.key,
+              id: 'bundled',
+              type: 'category',
+              data: 'bundled',
               properties: {
-                label: ['plugin-registry.label', { ns: meta.profile.key }],
+                label: ['bundled-plugins.label', { ns: meta.profile.key }],
                 icon: 'ph--squares-four--regular',
-                disposition: 'pin-end',
-                position: Position.first,
-                testId: 'treeView.pluginRegistry',
+                testId: 'pluginRegistry.bundled',
+                count: categoryCount('bundled'),
+              },
+            }),
+            Node.make({
+              id: 'installed',
+              type: 'category',
+              data: 'installed',
+              properties: {
+                label: ['installed-plugins.label', { ns: meta.profile.key }],
+                icon: 'ph--check--regular',
+                testId: 'pluginRegistry.installed',
+                count: categoryCount('installed'),
+              },
+            }),
+            Node.make({
+              id: 'recommended',
+              type: 'category',
+              data: 'recommended',
+              properties: {
+                label: ['recommended-plugins.label', { ns: meta.profile.key }],
+                icon: 'ph--star--regular',
+                testId: 'pluginRegistry.recommended',
+                count: categoryCount('recommended'),
+              },
+            }),
+            Node.make({
+              id: 'labs',
+              type: 'category',
+              data: 'labs',
+              properties: {
+                label: ['labs-plugins.label', { ns: meta.profile.key }],
+                icon: 'ph--flask--regular',
+                testId: 'pluginRegistry.labs',
+                count: categoryCount('labs'),
               },
-              nodes: [
-                Node.make({
-                  id: registryCategoryId('bundled'),
-                  type: 'category',
-                  data: registryCategoryId('bundled'),
-                  properties: {
-                    label: ['bundled-plugins.label', { ns: meta.profile.key }],
-                    icon: 'ph--squares-four--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.bundled',
-                    count: categoryCount(registryCategoryId('bundled')),
-                  },
-                }),
-                Node.make({
-                  id: registryCategoryId('installed'),
-                  type: 'category',
-                  data: registryCategoryId('installed'),
-                  properties: {
-                    label: ['installed-plugins.label', { ns: meta.profile.key }],
-                    icon: 'ph--check--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.installed',
-                    count: categoryCount(registryCategoryId('installed')),
-                  },
-                }),
-                Node.make({
-                  id: registryCategoryId('recommended'),
-                  type: 'category',
-                  data: registryCategoryId('recommended'),
-                  properties: {
-                    label: ['recommended-plugins.label', { ns: meta.profile.key }],
-                    icon: 'ph--star--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.recommended',
-                    count: categoryCount(registryCategoryId('recommended')),
-                  },
-                }),
-                Node.make({
-                  id: registryCategoryId('labs'),
-                  type: 'category',
-                  data: registryCategoryId('labs'),
-                  properties: {
-                    label: ['labs-plugins.label', { ns: meta.profile.key }],
-                    icon: 'ph--flask--regular',
-                    key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.labs',
-                    count: categoryCount(registryCategoryId('labs')),
-                  },
-                }),
-                ...(registryCount > 0
-                  ? [
-                      Node.make({
-                        id: registryCategoryId('registry'),
-                        type: 'category',
-                        data: registryCategoryId('registry'),
-                        properties: {
-                          label: ['registry-plugins.label', { ns: meta.profile.key }],
-                          icon: 'ph--users-three--regular',
-                          key: REGISTRY_KEY,
-                          testId: 'pluginRegistry.registry',
-                          count: registryCount,
-                        },
-                      }),
-                    ]
-                  : []),
-              ],
             }),
+            ...(registryCount > 0
+              ? [
+                  Node.make({
+                    id: 'registry',
+                    type: 'category',
+                    data: 'registry',
+                    properties: {
+                      label: ['registry-plugins.label', { ns: meta.profile.key }],
+                      icon: 'ph--users-three--regular',
+                      testId: 'pluginRegistry.registry',
+                      count: registryCount,
+                    },
+                  }),
+                ]
+              : []),
           ]);
         },
       }),
@@ -179,6 +182,7 @@ export default Capability.makeModule(
       }),
       GraphBuilder.createExtension({
         id: 'plugins',
+        url: { key: 'registry', kind: 'item', path: [] },
         match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
         connector: (_node, get) => {
           const manager = capabilities.get(Capabilities.PluginManager);
@@ -199,7 +203,9 @@ export default Capability.makeModule(
 
           const registryEntries = get(manager.pluginRegistry.plugins).entries;
           const registryNodes = registryEntries
-            .filter((entry) => !installedIds.has(DXN.make(entry.profile.key)))
+            // `profile.key` is the bare NSID on both sides; comparing against a `dxn:`-prefixed
+            // URI here would never match and would duplicate every installed plugin's node.
+            .filter((entry) => !installedIds.has(entry.profile.key))
             .map((entry) => {
               const plugin = toDisplayPlugin(entry);
               return Node.make({

package/src/capabilities/react-surface.ts

@@ -0,0 +1,85 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import { type ComponentProps } from 'react';
+
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+
+import { DisableDependentsAlert } from '#components';
+import {
+  LOAD_PLUGIN_DIALOG,
+  LoadPluginDialog,
+  PluginArticle,
+  PublicRegistryArticle,
+  RegistrySettingsContainer,
+} from '#containers';
+import { DISABLE_DEPENDENTS_DIALOG, meta } from '#meta';
+
+import { RegistryCategoryArticle } from './RegistryCategoryArticle';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'bundled',
+        filter: AppSurface.literal(AppSurface.Article, 'bundled'),
+        component: RegistryCategoryArticle,
+        props: () => ({ category: 'bundled' }),
+      }),
+      Surface.create({
+        id: 'installed',
+        filter: AppSurface.literal(AppSurface.Article, 'installed'),
+        component: RegistryCategoryArticle,
+        props: () => ({ category: 'installed' }),
+      }),
+      Surface.create({
+        id: 'recommended',
+        filter: AppSurface.literal(AppSurface.Article, 'recommended'),
+        component: RegistryCategoryArticle,
+        props: () => ({ category: 'recommended' }),
+      }),
+      Surface.create({
+        id: 'labs',
+        filter: AppSurface.literal(AppSurface.Article, 'labs'),
+        component: RegistryCategoryArticle,
+        props: () => ({ category: 'labs' }),
+      }),
+      Surface.create({
+        id: 'registry',
+        filter: AppSurface.literal(AppSurface.Article, 'registry'),
+        component: PublicRegistryArticle,
+        props: () => ({ id: 'registry' }),
+      }),
+      Surface.create({
+        id: 'pluginDetails',
+        filter: AppSurface.subject(AppSurface.Article, Plugin.isPlugin),
+        component: PluginArticle,
+        props: ({ data: { subject } }) => ({ subject }),
+      }),
+      Surface.create({
+        id: LOAD_PLUGIN_DIALOG,
+        filter: AppSurface.component(AppSurface.Dialog, LOAD_PLUGIN_DIALOG),
+        component: LoadPluginDialog,
+      }),
+      Surface.create({
+        id: DISABLE_DEPENDENTS_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof DisableDependentsAlert>>(
+          AppSurface.Dialog,
+          DISABLE_DEPENDENTS_DIALOG,
+        ),
+        component: DisableDependentsAlert,
+        props: ({ data: { props } }) => ({ ...props }),
+      }),
+      Surface.create({
+        id: 'pluginSettings',
+        filter: AppSurface.settings(AppSurface.Article, meta.profile.key),
+        component: RegistrySettingsContainer,
+        props: ({ data: { subject } }) => ({ subject }),
+      }),
+    ]),
+  ),
+);

package/src/categories.test.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { Plugin } from '@dxos/app-framework';
+
+import { getCategoryPredicate } from './categories';
+
+const context = { core: [], enabled: [], remoteIds: new Set<string>() };
+
+describe('getCategoryPredicate', () => {
+  test('recommended selects the beta and alpha tiers', ({ expect }) => {
+    const predicate = getCategoryPredicate('recommended', context);
+    expect(predicate(makePlugin('beta-plugin', ['beta']))).toBe(true);
+    expect(predicate(makePlugin('alpha-plugin', ['alpha']))).toBe(true);
+    expect(predicate(makePlugin('labs-plugin', ['labs']))).toBe(false);
+    // An untagged plugin makes no quality claim, so it must not be recommended.
+    expect(predicate(makePlugin('untagged-plugin'))).toBe(false);
+  });
+
+  test('recommended matches a tier tag in any position', ({ expect }) => {
+    const predicate = getCategoryPredicate('recommended', context);
+    expect(predicate(makePlugin('alpha-connector', ['alpha', 'connector']))).toBe(true);
+    expect(predicate(makePlugin('labs-connector', ['labs', 'connector']))).toBe(false);
+  });
+
+  test('recommended excludes core and remote plugins', ({ expect }) => {
+    const key = 'org.dxos.plugin.example';
+    const plugin = makePlugin(key, ['beta']);
+    expect(getCategoryPredicate('recommended', { ...context, core: [key] })(plugin)).toBe(false);
+    expect(getCategoryPredicate('recommended', { ...context, remoteIds: new Set([key]) })(plugin)).toBe(false);
+  });
+
+  test('labs selects the labs tier regardless of core membership', ({ expect }) => {
+    const key = 'labs-plugin';
+    const predicate = getCategoryPredicate('labs', { ...context, core: [key] });
+    expect(predicate(makePlugin(key, ['labs']))).toBe(true);
+    expect(predicate(makePlugin('alpha-plugin', ['alpha']))).toBe(false);
+  });
+});
+
+const makePlugin = (key: string, tags?: string[]) =>
+  Plugin.make(Plugin.define({ profile: { key, name: key, tags } }))();

package/src/categories.ts

@@ -4,10 +4,11 @@
 
 import { type Plugin, UrlLoader } from '@dxos/app-framework';
 
-import { registryCategoryId } from './meta';
-
 export type PluginPredicate = (plugin: Plugin.Plugin) => boolean;
 
+/** Quality tiers surfaced in `recommended`; an untagged plugin is excluded rather than assumed ready. */
+const RECOMMENDED_TIERS: readonly string[] = ['beta', 'alpha'];
+
 export type CategoryFilterContext = {
   /** Core (bundled-by-default) plugin ids. */
   core: readonly string[];
@@ -26,14 +27,16 @@ export const getCategoryPredicate = (
   { core, enabled, remoteIds }: CategoryFilterContext,
 ): PluginPredicate => {
   switch (category) {
-    case registryCategoryId('bundled'):
+    case 'bundled':
       return ({ meta }) => !core.includes(meta.profile.key) && !remoteIds.has(meta.profile.key);
-    case registryCategoryId('installed'):
+    case 'installed':
       return ({ meta }) => !core.includes(meta.profile.key) && enabled.includes(meta.profile.key);
-    case registryCategoryId('recommended'):
+    case 'recommended':
       return ({ meta }) =>
-        !core.includes(meta.profile.key) && !remoteIds.has(meta.profile.key) && !meta.profile.tags?.includes('labs');
-    case registryCategoryId('labs'):
+        !core.includes(meta.profile.key) &&
+        !remoteIds.has(meta.profile.key) &&
+        (meta.profile.tags?.some((tag) => RECOMMENDED_TIERS.includes(tag)) ?? false);
+    case 'labs':
       return ({ meta }) => meta.profile.tags?.includes('labs') ?? false;
     default:
       return () => false;

package/src/commands/registry/util.ts

@@ -13,8 +13,8 @@ import * as Schema from 'effect/Schema';
 import { AppSpace } from '@dxos/app-toolkit';
 import { type Client } from '@dxos/client';
 import { Filter } from '@dxos/echo';
+import { AccessToken } from '@dxos/link';
 import { ALL_NSIDS, NSID } from '@dxos/protocols';
-import { AccessToken } from '@dxos/types';
 
 export { ALL_NSIDS, NSID };
 

package/src/components/PluginList/PluginItem.tsx

@@ -141,7 +141,7 @@ export const PluginItem = ({
         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',
+        'items-stretch p-0 pe-2 cursor-default h-[14rem] w-full gap-3 dx-modal-surface rounded-md overflow-hidden',
       )}
     >
       <div className={mx(gridRows, 'rounded-l-md', styles.surface)}>
@@ -218,8 +218,10 @@ export const PluginItem = ({
 
 const tagColors: Record<RegistryTagType, ChromaticPalette | NeutralPalette> = {
   new: 'rose',
-  beta: 'teal',
-  labs: 'blue',
+  // Tier hues ramp green -> blue -> purple so the ordering reads without knowing the labels.
+  beta: 'green',
+  alpha: 'blue',
+  labs: 'purple',
   popular: 'green',
   featured: 'pink',
   experimental: 'amber',

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

@@ -75,7 +75,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'bg-deck-surface' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'dx-deck-surface' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/RegistrySettings/RegistrySettings.tsx

@@ -96,7 +96,7 @@ export const RegistrySettings = ({
         <Form.Content>
           <Form.Section title={t('dev-plugin.section.title')}>
             <Message.Root valence='neutral'>
-              <Message.Content>{t('dev-plugin.description')}</Message.Content>
+              <Message.Body>{t('dev-plugin.description')}</Message.Body>
             </Message.Root>
             <Form.Row label={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
               <Input.Root>
@@ -120,7 +120,7 @@ export const RegistrySettings = ({
             </Form.Row>
             {enabled && !loadedDevId && !busy && (
               <Message.Root valence='warning'>
-                <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
+                <Message.Body>{t('dev-plugin.not-loaded.message')}</Message.Body>
               </Message.Root>
             )}
           </Form.Section>

package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx

@@ -114,8 +114,8 @@ export const BaseRegistryArticle = composable<HTMLDivElement, BaseRegistryArticl
       (pluginId: string) =>
         invokePromise(LayoutOperation.Open, {
           subject: [getPluginPath(pluginId)],
-          pivotId: id,
-          positioning: 'end',
+          pivotId: getPluginPath(id),
+          disposition: 'add',
         }),
       [invokePromise, id],
     );

package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx

@@ -86,3 +86,5 @@ export const LoadPluginDialog = () => {
     </Dialog.Content>
   );
 };
+
+LoadPluginDialog.displayName = 'LoadPluginDialog';

package/src/containers/PluginArticle/PluginArticle.tsx

@@ -76,9 +76,11 @@ export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
     (targetId: string) => {
       void invokePromise(LayoutOperation.Open, {
         subject: [getPluginPath(targetId)],
+        pivotId: getPluginPath(pluginId),
+        disposition: 'add',
       });
     },
-    [invokePromise],
+    [invokePromise, pluginId],
   );
 
   const actions = usePluginActions({
@@ -117,3 +119,5 @@ export const PluginArticle = ({ subject: plugin }: PluginArticleProps) => {
     />
   );
 };
+
+PluginArticle.displayName = 'PluginArticle';

package/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.tsx

@@ -57,3 +57,5 @@ export const RegistrySettingsContainer = ({ subject }: RegistrySettingsContainer
     />
   );
 };
+
+RegistrySettingsContainer.displayName = 'RegistrySettingsContainer';