@dxos/plugin-registry 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-registry",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "Braneframe plugin gallery",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,6 +18,12 @@
     "#containers": "./src/containers/index.ts",
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
+    "#translations": "./src/translations.ts",
+    "#plugin": {
+      "browser": "./src/RegistryPlugin.tsx",
+      "node": "./src/RegistryPlugin.node.ts",
+      "default": "./src/RegistryPlugin.tsx"
+    },
     "#types": "./src/types.ts"
   },
   "exports": {
@@ -32,12 +38,15 @@
       "browser": "./dist/lib/browser/cli/index.mjs",
       "node": "./dist/lib/node-esm/cli/index.mjs",
       "types": "./dist/types/src/cli/index.d.ts"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -46,20 +55,26 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/cli": "0.73.2",
     "yaml": "^2.8.2",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/cli-util": "0.8.4-main.9be5663bfe",
-    "@dxos/client-protocol": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/effect": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-observability": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe"
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/cli-util": "0.8.4-main.abd8ff62ef",
+    "@dxos/client-protocol": "0.8.4-main.abd8ff62ef",
+    "@dxos/context": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/edge-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-observability": "0.8.4-main.abd8ff62ef",
+    "@dxos/protocols": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-form": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-edge-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -69,11 +84,12 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -81,8 +97,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/{cli/plugin.ts → RegistryPlugin.node.ts}

@@ -15,3 +15,5 @@ export const RegistryPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default RegistryPlugin;

package/src/RegistryPlugin.test.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { RegistryPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('RegistryPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [RegistryPlugin()],
+    });
+
+    // CLI commands activate on startup.
+    expect(harness.manager.getActive()).toContain(moduleId('cli-commands'));
+  });
+});

package/src/RegistryPlugin.tsx

@@ -4,16 +4,22 @@
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
+import { ClientEvents } from '@dxos/plugin-client/types';
 
-import { AppGraphBuilder, OperationHandler, ReactSurface } from '#capabilities';
+import { AppGraphBuilder, OperationHandler, ReactSurface, RegistryState } from '#capabilities';
 import { meta } from '#meta';
-
-import { translations } from './translations';
+import { translations } from '#translations';
 
 export const RegistryPlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    activatesOn: ClientEvents.ClientReady,
+    activate: RegistryState,
+  }),
   Plugin.make,
 );
+
+export default RegistryPlugin;

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

@@ -3,17 +3,31 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Option from 'effect/Option';
 
-import { Capabilities, Capability } from '@dxos/app-framework';
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation, SettingsOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { type PluginEntry } from '@dxos/protocols';
 
 import { REGISTRY_ID, REGISTRY_KEY, registryCategoryId, meta } from '#meta';
+import { RegistryCapabilities } from '#types';
 
 import { LOAD_PLUGIN_DIALOG } from '../containers';
 
+/**
+ * Turns a community manifest entry into a minimal {@link Plugin.Plugin} so it
+ * can be attached as the graph node's `data`. The synthesized plugin has no
+ * modules and only exists so the article surface can render details for
+ * community plugins that haven't been installed yet.
+ */
+const toDisplayPlugin = (entry: PluginEntry): Plugin.Plugin =>
+  ({
+    [Plugin.PluginTypeId]: Plugin.PluginTypeId,
+    meta: entry.meta,
+    modules: [],
+  }) as Plugin.Plugin;
+
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const capabilities = yield* Capability.Service;
@@ -47,18 +61,19 @@ export default Capability.makeModule(
                 label: ['plugin-registry.label', { ns: meta.id }],
                 icon: 'ph--squares-four--regular',
                 disposition: 'pin-end',
+                position: 'hoist',
                 testId: 'treeView.pluginRegistry',
               },
               nodes: [
                 Node.make({
-                  id: registryCategoryId('all'),
+                  id: registryCategoryId('official'),
                   type: 'category',
-                  data: registryCategoryId('all'),
+                  data: registryCategoryId('official'),
                   properties: {
-                    label: ['all-plugins.label', { ns: meta.id }],
+                    label: ['official-plugins.label', { ns: meta.id }],
                     icon: 'ph--squares-four--regular',
                     key: REGISTRY_KEY,
-                    testId: 'pluginRegistry.all',
+                    testId: 'pluginRegistry.official',
                   },
                 }),
                 Node.make({
@@ -94,15 +109,24 @@ export default Capability.makeModule(
                     testId: 'pluginRegistry.labs',
                   },
                 }),
+                Node.make({
+                  id: registryCategoryId('community'),
+                  type: 'category',
+                  data: registryCategoryId('community'),
+                  properties: {
+                    label: ['community-plugins.label', { ns: meta.id }],
+                    icon: 'ph--users-three--regular',
+                    key: REGISTRY_KEY,
+                    testId: 'pluginRegistry.community',
+                  },
+                }),
               ],
             }),
           ]),
       }),
       GraphBuilder.createExtension({
         id: 'actions',
-        match: NodeMatcher.whenAny(NodeMatcher.whenId(`root/${REGISTRY_ID}`), (node) =>
-          node.properties.key === REGISTRY_KEY ? Option.some(node) : Option.none(),
-        ),
+        match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
         actions: () =>
           Effect.succeed([
             {
@@ -124,11 +148,30 @@ export default Capability.makeModule(
       GraphBuilder.createExtension({
         id: 'plugins',
         match: NodeMatcher.whenId(`root/${REGISTRY_ID}`),
-        connector: () => {
+        connector: (_node, get) => {
           const manager = capabilities.get(Capabilities.PluginManager);
-          return Effect.succeed(
-            manager.getPlugins().map((plugin) =>
-              Node.make({
+          const installedIds = new Set(manager.getPlugins().map((plugin) => plugin.meta.id));
+          const stateAtom = capabilities.getAll(RegistryCapabilities.State).at(0);
+
+          const installedNodes = manager.getPlugins().map((plugin) =>
+            Node.make({
+              id: plugin.meta.id,
+              type: 'org.dxos.plugin',
+              data: plugin,
+              properties: {
+                label: plugin.meta.name ?? plugin.meta.id,
+                icon: plugin.meta.icon ?? 'ph--circle--regular',
+                disposition: 'hidden',
+              },
+            }),
+          );
+
+          const communityEntries = stateAtom ? get(stateAtom).entries : [];
+          const communityNodes = communityEntries
+            .filter((entry) => !installedIds.has(entry.meta.id))
+            .map((entry) => {
+              const plugin = toDisplayPlugin(entry);
+              return Node.make({
                 id: plugin.meta.id,
                 type: 'org.dxos.plugin',
                 data: plugin,
@@ -137,9 +180,10 @@ export default Capability.makeModule(
                   icon: plugin.meta.icon ?? 'ph--circle--regular',
                   disposition: 'hidden',
                 },
-              }),
-            ),
-          );
+              });
+            });
+
+          return Effect.succeed([...installedNodes, ...communityNodes]);
         },
       }),
     ]);

package/src/capabilities/index.ts

@@ -3,7 +3,7 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
@@ -11,3 +11,4 @@ export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHan
   () => import('./operation-handler'),
 );
 export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const RegistryState = Capability.lazy('RegistryState', () => import('./state'));

package/src/capabilities/operation-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { RegistryOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -5,89 +5,114 @@
 import * as Effect from 'effect/Effect';
 import React, { useMemo } from 'react';
 
-import { Capabilities, Capability } from '@dxos/app-framework';
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { Surface, usePluginManager } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 
-import { LOAD_PLUGIN_DIALOG, LoadPluginDialog, PluginArticle, PluginRegistry } from '#containers';
+import { CommunityRegistry, LOAD_PLUGIN_DIALOG, LoadPluginDialog, PluginArticle, PluginRegistry } from '#containers';
 import { registryCategoryId } from '#meta';
 
+import { useAutoTags, useCommunityPlugins, useRemotePluginIds } from '../hooks';
+
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: 'all',
-        role: 'article',
-        filter: AppSurface.literalSection(registryCategoryId('all')),
+        id: 'official',
+        filter: AppSurface.literal(AppSurface.Article, registryCategoryId('official')),
         component: () => {
           const manager = usePluginManager();
+          const remoteIds = useRemotePluginIds();
+          const { entries } = useCommunityPlugins();
+          const extraTagsById = useAutoTags(entries);
           const filtered = useMemo(
-            () => manager.getPlugins().filter(({ meta }) => !manager.getCore().includes(meta.id)),
-            [],
+            () =>
+              manager
+                .getPlugins()
+                .filter(({ meta }) => !manager.getCore().includes(meta.id))
+                .filter(({ meta }) => !remoteIds.has(meta.id)),
+            [manager, remoteIds],
           );
 
-          return <PluginRegistry id={registryCategoryId('all')} plugins={filtered} />;
+          return (
+            <PluginRegistry id={registryCategoryId('official')} plugins={filtered} extraTagsById={extraTagsById} />
+          );
         },
       }),
       Surface.create({
         id: 'installed',
-        role: 'article',
-        filter: AppSurface.literalSection(registryCategoryId('installed')),
+        filter: AppSurface.literal(AppSurface.Article, registryCategoryId('installed')),
         component: () => {
           const manager = usePluginManager();
+          const { entries } = useCommunityPlugins();
+          const extraTagsById = useAutoTags(entries);
           const filtered = useMemo(
             () =>
               manager
                 .getPlugins()
                 .filter(({ meta }) => !manager.getCore().includes(meta.id))
                 .filter(({ meta }) => manager.getEnabled().includes(meta.id)),
-            [],
+            [manager],
           );
 
-          return <PluginRegistry id={registryCategoryId('installed')} plugins={filtered} />;
+          return (
+            <PluginRegistry id={registryCategoryId('installed')} plugins={filtered} extraTagsById={extraTagsById} />
+          );
         },
       }),
       Surface.create({
         id: 'recommended',
-        role: 'article',
-        filter: AppSurface.literalSection(registryCategoryId('recommended')),
+        filter: AppSurface.literal(AppSurface.Article, registryCategoryId('recommended')),
         component: () => {
           const manager = usePluginManager();
+          const remoteIds = useRemotePluginIds();
+          const { entries } = useCommunityPlugins();
+          const extraTagsById = useAutoTags(entries);
           const filtered = useMemo(
             () =>
               manager
                 .getPlugins()
                 .filter(({ meta }) => !manager.getCore().includes(meta.id))
+                .filter(({ meta }) => !remoteIds.has(meta.id))
                 .filter(({ meta }) => !meta.tags?.includes('labs')),
-            [],
+            [manager, remoteIds],
           );
 
-          return <PluginRegistry id={registryCategoryId('recommended')} plugins={filtered} />;
+          return (
+            <PluginRegistry id={registryCategoryId('recommended')} plugins={filtered} extraTagsById={extraTagsById} />
+          );
         },
       }),
       Surface.create({
         id: 'labs',
-        role: 'article',
-        filter: AppSurface.literalSection(registryCategoryId('labs')),
+        filter: AppSurface.literal(AppSurface.Article, registryCategoryId('labs')),
         component: () => {
           const manager = usePluginManager();
-          const filtered = useMemo(() => manager.getPlugins().filter(({ meta }) => meta.tags?.includes('labs')), []);
+          const { entries } = useCommunityPlugins();
+          const extraTagsById = useAutoTags(entries);
+          const filtered = useMemo(
+            () => manager.getPlugins().filter(({ meta }) => meta.tags?.includes('labs')),
+            [manager],
+          );
 
-          return <PluginRegistry id={registryCategoryId('labs')} plugins={filtered} />;
+          return <PluginRegistry id={registryCategoryId('labs')} plugins={filtered} extraTagsById={extraTagsById} />;
         },
       }),
+      Surface.create({
+        id: 'community',
+        filter: AppSurface.literal(AppSurface.Article, registryCategoryId('community')),
+        component: () => <CommunityRegistry id={registryCategoryId('community')} />,
+      }),
       Surface.create({
         id: 'plugin-details',
-        role: 'article',
-        filter: AppSurface.pluginSection(),
+        filter: AppSurface.subject(AppSurface.Article, Plugin.isPlugin),
         component: ({ data: { subject } }) => {
           return <PluginArticle subject={subject} />;
         },
       }),
       Surface.create({
         id: LOAD_PLUGIN_DIALOG,
-        role: 'dialog',
-        filter: AppSurface.componentDialog(LOAD_PLUGIN_DIALOG),
+        filter: AppSurface.component(AppSurface.Dialog, LOAD_PLUGIN_DIALOG),
         component: () => <LoadPluginDialog />,
       }),
     ]),

package/src/capabilities/state.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
+
+import { RegistryCapabilities, type CommunityPluginsState } from '#types';
+
+import { loadCommunityPlugins } from '../hooks';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const client = yield* Capability.get(ClientCapabilities.Client);
+
+    const communityPluginsAtom = Atom.make<CommunityPluginsState>({ entries: [], loading: true, error: null }).pipe(
+      Atom.keepAlive,
+    );
+
+    yield* loadCommunityPlugins(client.edge.http).pipe(
+      Effect.match({
+        onSuccess: (entries) => registry.set(communityPluginsAtom, { entries, loading: false, error: null }),
+        onFailure: (error) => {
+          log.catch(error);
+          registry.set(communityPluginsAtom, { entries: [], loading: false, error });
+        },
+      }),
+      Effect.forkDaemon,
+    );
+
+    return Capability.contributes(RegistryCapabilities.State, communityPluginsAtom);
+  }),
+);

package/src/cli/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './plugin';
-export * from './storage';
+export * from '../storage';

package/src/components/PluginDetail/PluginDetail.stories.tsx

@@ -8,7 +8,8 @@ import { Plugin } from '@dxos/app-framework';
 import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { PluginDetail } from './PluginDetail';
 
 const meta = {

package/src/components/PluginDetail/PluginDetail.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
-import { Icon, Input, Link, ScrollArea, useTranslation } from '@dxos/react-ui';
+import { Button, Icon, Input, Link, ScrollArea, useTranslation } from '@dxos/react-ui';
 import { composable, composableProps, getStyles, mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
@@ -14,10 +14,21 @@ export type PluginDetailProps = {
   plugin: Plugin.Plugin;
   enabled?: boolean;
   onEnabledChange?: (enabled: boolean) => void;
+  /**
+   * When provided, an Uninstall button is rendered. Leave undefined for core
+   * or non-removable plugins.
+   */
+  onUninstall?: () => void;
+  /**
+   * When provided, the plugin is not installed and an Install button is shown
+   * in place of the enable Switch.
+   */
+  onInstall?: () => void;
+  installing?: boolean;
 };
 
 export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
-  ({ plugin, enabled, onEnabledChange, ...props }, forwardedRef) => {
+  ({ plugin, enabled, onEnabledChange, onUninstall, onInstall, installing, ...props }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
     const {
       id,
@@ -41,9 +52,15 @@ export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
             <div role='none' className='flex flex-col gap-6'>
               <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 w-full pt-1'>
                 <h2 className='text-xl'>{name}</h2>
-                <Input.Root>
-                  <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
-                </Input.Root>
+                {onInstall ? (
+                  <Button density='fine' variant='primary' disabled={installing} onClick={onInstall}>
+                    {installing ? t('installing.label') : t('install.label')}
+                  </Button>
+                ) : (
+                  <Input.Root>
+                    <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
+                  </Input.Root>
+                )}
                 <p className='pt-0.5 text-sm text-description'>{id}</p>
               </div>
               <div role='none'>
@@ -73,6 +90,11 @@ export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
                   )}
                 </div>
               </div>
+              {onUninstall && (
+                <div role='none'>
+                  <Button onClick={onUninstall}>{t('uninstall.label')}</Button>
+                </div>
+              )}
             </div>
           </div>
         </ScrollArea.Viewport>