@dxos/plugin-devtools 0.11.1 → 0.12.0-next-2800d0376abcc62d5544afdd744b16b2b960434e

package/src/capabilities/gen/node.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'node' condition.
+
+import { create } from '@bufbuild/protobuf';
+import * as Effect from 'effect/Effect';
+
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';
+import { type Client } from '@dxos/react-client';
+
+import { translations } from '#translations';
+
+const setupDevtools = () => {
+  (globalThis as any).composer ??= {};
+
+  // Used to test how composer handles breaking protocol changes.
+  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
+    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
+    const { createStorageObjects } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = createStorageObjects(
+      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
+    );
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};
+
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'), {
+  requires: [AppCapabilities.AppGraph],
+  environments: ['node'],
+});
+
+export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+
+export const Translations = AppCapability.translations(translations);
+
+export const PluginAsset = undefined;
+export const ReactContext = undefined;
+export const ReactSurface = undefined;

package/src/capabilities/gen/workerd.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.
+
+import { create } from '@bufbuild/protobuf';
+import * as Effect from 'effect/Effect';
+
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';
+import { type Client } from '@dxos/react-client';
+
+import { translations } from '#translations';
+
+const setupDevtools = () => {
+  (globalThis as any).composer ??= {};
+
+  // Used to test how composer handles breaking protocol changes.
+  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
+    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
+    const { createStorageObjects } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = createStorageObjects(
+      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
+    );
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};
+
+export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+
+export const Translations = AppCapability.translations(translations);
+
+export const AppGraphBuilder = undefined;
+export const PluginAsset = undefined;
+export const ReactContext = undefined;
+export const ReactSurface = undefined;

package/src/capabilities/index.ts

@@ -2,8 +2,54 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capability } from '@dxos/app-framework';
+import { create } from '@bufbuild/protobuf';
+import * as Effect from 'effect/Effect';
 
-export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
-export const ReactContext = Capability.lazy('ReactContext', () => import('./react-context'));
-export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';
+import { type Client } from '@dxos/react-client';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../../PLUGIN.mdl?raw';
+
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'), {
+  requires: [AppCapabilities.AppGraph],
+  environments: ['node'],
+});
+export const ReactContext = AppCapability.reactContext(() => import('./react-context'));
+export const ReactSurface = AppCapability.surface(() => import('./react-surface'), {
+  roles: ['org.dxos.role.article', 'org.dxos.role.deckCompanion.devtoolsOverview'],
+});
+export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+export const Translations = AppCapability.translations(translations);
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});
+
+const setupDevtools = () => {
+  (globalThis as any).composer ??= {};
+
+  // Used to test how composer handles breaking protocol changes.
+  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
+    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
+    const { createStorageObjects } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = createStorageObjects(
+      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
+    );
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};

package/src/capabilities/react-context.tsx

@@ -5,7 +5,8 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, Capability } from '@dxos/app-framework';
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
 import { Surface } from '@dxos/app-framework/ui';
 import { DevtoolsContextProvider } from '@dxos/devtools';
 
@@ -13,7 +14,7 @@ import { meta } from '#meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Capabilities.ReactContext, {
+    Capability.contribute(Capabilities.ReactContext, {
       id: meta.profile.key,
       context: ({ children }) => (
         <Surface.ProfilerProvider>

package/src/capabilities/react-surface.ts

@@ -4,8 +4,10 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capabilities, Capability } from '@dxos/app-framework';
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
 import { Surface } from '@dxos/app-framework/ui';
+import type * as AppGraph from '@dxos/app-graph/AppGraph';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { EDGE_SERVICE_DEFAULTS, EdgeServiceName } from '@dxos/config';
 import {
@@ -31,10 +33,9 @@ import {
   SwarmPanel,
   WorkflowPanel,
 } from '@dxos/devtools';
-import { type Graph } from '@dxos/plugin-graph';
 import { ToolsExplorer } from '@dxos/react-ui-introspect';
 
-import { DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
+import { CliPanel, DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
 import { Devtools } from '#types';
 
 import {
@@ -48,7 +49,7 @@ import {
 const MCP_SERVER_URL = EDGE_SERVICE_DEFAULTS[EdgeServiceName.Introspect];
 
 type GraphDebug = {
-  graph: Graph.Graph;
+  graph: AppGraph.Graph;
   root: string;
 };
 
@@ -69,7 +70,7 @@ const isGraphDebug = (data: unknown): data is GraphDebug => {
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    return Capability.contributes(Capabilities.ReactSurface, [
+    return Capability.contribute(Capabilities.ReactSurface, [
       Surface.create({
         id: 'appGraph',
         filter: AppSurface.subject(AppSurface.Article, isGraphDebug),
@@ -82,6 +83,11 @@ export default Capability.makeModule(
         component: ToolsExplorer,
         props: () => ({ serverUrl: MCP_SERVER_URL }),
       }),
+      Surface.create({
+        id: 'cli',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Cli),
+        component: CliPanel,
+      }),
       Surface.create({
         id: 'registry',
         filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Registry),

package/src/containers/CliPanel/CliPanel.stories.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import { userEvent } from 'storybook/test';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import * as SpacePlugin from '@dxos/plugin-space/SpacePlugin';
+import { corePlugins } from '@dxos/plugin-testing';
+import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
+import { runCommand, waitForTerminal } from '@dxos/react-ui-terminal/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { CliPanel } from './CliPanel';
+
+const meta = {
+  title: 'plugins/plugin-devtools/containers/CliPanel',
+  component: CliPanel,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withTheme(),
+    withPluginManager({
+      // No setup event: the panel fires `CommandsRequested` itself, which is what pulls the
+      // plugins' command modules in — the same path the app takes.
+      plugins: [
+        ...corePlugins(),
+        // The identity brings a default space, which is what the commands resolve against.
+        ClientPlugin.make({ onClientInitialized: ({ client }) => Effect.asVoid(initializeIdentity(client)) }),
+        StorybookPlugin.make({}),
+        // The real plugin, so the story covers it actually contributing its commands.
+        SpacePlugin.make({}),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+    translations,
+  },
+} satisfies Meta<typeof CliPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Drives real `dx` commands against the story's client, so a break in the wiring between the shell
+ * and the client surfaces here rather than in the app.
+ */
+export const Spec: Story = {
+  play: async ({ canvasElement }) => {
+    const keyboard = (text: string) => userEvent.keyboard(text);
+    await waitForTerminal(canvasElement, 'dx>');
+
+    // `space list` reaches the client and reports its space.
+    await runCommand(canvasElement, 'space list', keyboard);
+    await waitForTerminal(canvasElement, 'SPACE_READY');
+
+    // `database query` reaches ECHO through the layer the command provides for itself.
+    await runCommand(canvasElement, 'database query', keyboard);
+    await waitForTerminal(canvasElement, 'org.dxos.type.spaceProperties');
+
+    // A command from another plugin, whose service arrives via that plugin's contributed layer
+    // rather than anything this panel names.
+    await runCommand(canvasElement, 'config view', keyboard);
+    await waitForTerminal(canvasElement, 'runtime');
+  },
+};

package/src/containers/CliPanel/CliPanel.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Placeholder } from '@dxos/devtools';
+import { useClient } from '@dxos/react-client';
+import { Panel } from '@dxos/react-ui';
+import { Terminal } from '@dxos/react-ui-terminal';
+
+import { useCliApp } from './useCliApp';
+
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const RESET = '\x1b[0m';
+
+const BANNER = `${BOLD}DXOS CLI${RESET}\n${DIM}The dx commands, running against this client. Type "help" for the list.${RESET}`;
+
+/**
+ * Runs the `dx` CLI against the client backing this app.
+ *
+ * The command tree is assembled from the commands the installed plugins contribute, and it and its
+ * services are built once per client, so state the handlers hold survives between commands the way
+ * it does in a long-lived shell.
+ */
+export const CliPanel = () => {
+  const client = useClient();
+  const cli = useCliApp(client);
+
+  // No ScrollArea: xterm owns its own viewport and scrollback.
+  return (
+    <Panel.Root>
+      <Panel.Content>
+        {cli ? (
+          <Terminal command={cli.command} layer={cli.layer} name='dx' banner={BANNER} />
+        ) : (
+          <Placeholder label='No commands' />
+        )}
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+CliPanel.displayName = 'CliPanel';

package/src/containers/CliPanel/index.ts

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

package/src/containers/CliPanel/useCliApp.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as Command from 'effect/unstable/cli/Command';
+import * as Options from 'effect/unstable/cli/Flag';
+import { useEffect, useMemo } from 'react';
+
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as Plugin from '@dxos/app-framework/Plugin';
+import { useCapabilities, usePluginManager } from '@dxos/app-framework/ui';
+import { CommandConfig, type CommandServices } from '@dxos/cli-util';
+import { type Client, ClientService, ConfigService } from '@dxos/client';
+import * as Operation from '@dxos/compute/Operation';
+import { EffectEx } from '@dxos/effect';
+
+const OPERATIONS_UNAVAILABLE = 'Operations are not available in the devtools terminal.';
+
+/**
+ * Commands that create objects invoke operations, which this surface has no runtime for. Failing
+ * with a stated reason beats the bare "Service not found" a missing layer would produce.
+ */
+const operationLayer = Layer.succeed(Operation.Service, {
+  invoke: () => Effect.die(OPERATIONS_UNAVAILABLE),
+  schedule: () => Effect.die(OPERATIONS_UNAVAILABLE),
+  invokePromise: async () => ({ error: new Error(OPERATIONS_UNAVAILABLE) }),
+});
+
+/**
+ * Builds the `dx` command tree and the services its handlers need.
+ *
+ * Mounting is the demand signal: command modules are gated on `CommandsRequested`, which nothing
+ * else in the app fires, so a plugin's commands stay off the critical path until a terminal opens.
+ * The capability is read through its atom, so commands appear as they activate and enabling or
+ * disabling a plugin later rebuilds the tree rather than leaving the terminal on the set that
+ * existed when it mounted.
+ *
+ * The root mirrors the binary's, minus the options that only mean something on a filesystem
+ * (`--config`, `--profile`); everything else resolves the same way, including `--space-id`
+ * defaulting to the first available space.
+ *
+ * Returns `undefined` until something contributes commands — there is no shell to offer yet.
+ */
+export const useCliApp = (client: Client) => {
+  const manager = usePluginManager();
+  const commands = useCapabilities(Capabilities.Command);
+  const contributed = useCapabilities(Capabilities.Layer);
+
+  useEffect(() => {
+    EffectEx.runDetached(manager.activate(ActivationEvents.CommandsRequested));
+  }, [manager]);
+
+  return useMemo(() => {
+    // Destructured rather than passed as an array so the non-empty shape `withSubcommands` requires
+    // is carried by the type instead of asserted.
+    const [first, ...rest] = commands;
+    if (!first) {
+      return undefined;
+    }
+
+    const command = Command.make('dx').pipe(
+      // Shared so they parse anywhere in the line — a plain command config is only read when `dx`
+      // itself is the leaf.
+      Command.withSharedFlags({
+        json: Options.boolean('json').pipe(Options.withDescription('JSON output.')),
+        verbose: Options.boolean('verbose').pipe(Options.withAlias('v'), Options.withDescription('Verbose output.')),
+      }),
+      Command.withSubcommands([first, ...rest]),
+      // After the subcommands so the config reaches them: `provide` wraps the handler it is applied
+      // to, and `withSubcommands` replaces that handler with one that dispatches to the children.
+      // The input widens to a union across the tree, hence the presence checks.
+      Command.provide((input) =>
+        Layer.succeed(CommandConfig, {
+          json: 'json' in input ? input.json : false,
+          verbose: 'verbose' in input ? input.verbose : false,
+          profile: 'default',
+          logLevel: 'info',
+        }),
+      ),
+    );
+
+    // Annotated so a service this host owes is a build error naming it, rather than a
+    // "Service not found" the first time someone runs the command that needed it.
+    const hostLayer: Layer.Layer<CommandServices, never, never> = Layer.mergeAll(
+      ClientService.fromClient(client),
+      ConfigService.fromConfig(client.config),
+      Layer.succeed(Plugin.Service, manager),
+      Layer.succeed(Capability.Service, manager.capabilities),
+      operationLayer,
+    );
+
+    // Plugins carry anything further their own commands need. A contributed layer may fail to
+    // build, and the shell runs on a fiber with nowhere to report that, so it dies here instead
+    // of being smuggled into the terminal as an unhandled error channel.
+    const layer = Layer.orDie(Layer.mergeAll(hostLayer, ...contributed));
+
+    return { command, layer };
+  }, [client, manager, commands, contributed]);
+};

package/src/containers/DebugGraph/DebugGraph.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 
+import * as AppGraph from '@dxos/app-graph/AppGraph';
 import { Tree } from '@dxos/devtools';
-import { Graph } from '@dxos/plugin-graph';
 import { Panel, ScrollArea } from '@dxos/react-ui';
 
-export type DebugGraphProps = { graph: Graph.Graph; root: string };
+export type DebugGraphProps = { graph: AppGraph.Graph; root: string };
 
 export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
   return (
@@ -16,7 +16,7 @@ export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
       <Panel.Content asChild>
         <ScrollArea.Root orientation='all'>
           <ScrollArea.Viewport>
-            <Tree data={Graph.toJSON(graph, root)} />
+            <Tree data={AppGraph.toJSON(graph, root)} />
           </ScrollArea.Viewport>
         </ScrollArea.Root>
       </Panel.Content>

package/src/containers/GithubPanel/GithubComponent.tsx

@@ -4,7 +4,7 @@
 
 import React, { type ReactNode, createContext, useContext, useEffect, useState } from 'react';
 
-import { IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
+import { Flex, IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
 
@@ -136,20 +136,18 @@ const formatRelative = (iso: string): string => {
 
 const PullRow = ({ pull }: { pull: GithubPullRequest }) => (
   <li>
-    <a
-      href={pull.html_url}
-      target='_blank'
-      rel='noopener noreferrer'
-      className='flex items-start gap-2 px-2 py-1 rounded-sm hover:bg-hover-surface'
-    >
-      <img src={pull.user.avatar_url} alt='' className='w-6 h-6 rounded-full shrink-0 mt-0.5' />
-      <div className='flex flex-col min-w-0 flex-1'>
-        <span className='text-sm truncate'>{pull.title}</span>
-        <span className='text-xs text-description truncate'>
-          #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}
-        </span>
-      </div>
-    </a>
+    <Flex asChild align='start' gap='sm' classNames='px-trim-sm py-trim-xs rounded-sm hover:bg-hover-surface'>
+      <a href={pull.html_url} target='_blank' rel='noopener noreferrer'>
+        <img src={pull.user.avatar_url} alt='' className='size-6 rounded-full shrink-0' />
+        <Flex column classNames='min-w-0 flex-1'>
+          {/* `leading-6` gives the title the avatar's line box, so the two align on their own. */}
+          <span className='text-sm leading-6 truncate'>{pull.title}</span>
+          <span className='text-xs text-description truncate'>
+            #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}
+          </span>
+        </Flex>
+      </a>
+    </Flex>
   </li>
 );
 

package/src/containers/RegistryPanel/RegistryPanel.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Operation } from '@dxos/compute';
+import * as Operation from '@dxos/compute/Operation';
 import { JsonView, Placeholder, Searchbar } from '@dxos/devtools';
 import { Entity, Format, Obj, Type } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';

package/src/containers/index.ts

@@ -4,6 +4,7 @@
 
 import { type ComponentType, lazy } from 'react';
 
+export const CliPanel: ComponentType<any> = lazy(() => import('./CliPanel'));
 export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
 export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
 export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel'));

package/src/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './meta';
-export * from './types';
+export * as DevtoolsPlugin from './DevtoolsPlugin';
+export * from '#meta';
+export * from '#types';

package/src/meta.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Plugin } from '@dxos/app-framework';
+import * as Plugin from '@dxos/app-framework/Plugin';
 
 import config from '../dx.config';
 

package/src/{DevtoolsPlugin.test.ts → plugin.test.ts}

@@ -6,19 +6,20 @@ import { describe, test } from 'vitest';
 
 import { createComposerTestApp } from '@dxos/plugin-testing/harness';
 
+import { meta } from '#meta';
 import { DevtoolsPlugin } from '#plugin';
 
-import { meta } from './meta';
-
 const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('DevtoolsPlugin', () => {
-  test('modules activate on the expected events', async ({ expect }) => {
+  // Boot imports the app-graph-builder body (the harness fires the plugin's start event), which
+  // can exceed the default 15s under vite-node transform load.
+  test('modules activate on the expected events', { timeout: 60_000 }, async ({ expect }) => {
     await using harness = await createComposerTestApp({
       plugins: [DevtoolsPlugin()],
     });
 
-    // AppGraphBuilder auto-cascades from Startup (SetupAppGraph).
+    // AppGraphBuilder rides the plugin's start event, fired by the harness after Startup.
     expect(harness.manager.getActive()).toContain(moduleId('AppGraphBuilder'));
   });
 });

package/src/plugin.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Plugin from '@dxos/app-framework/Plugin';
+
+import { AppGraphBuilder, PluginAsset, ReactContext, ReactSurface, SetupDevtools, Translations } from '#capabilities';
+import { meta } from '#meta';
+
+export const DevtoolsPlugin = Plugin.define(meta).pipe(
+  Plugin.addModule(AppGraphBuilder),
+  Plugin.addModule(PluginAsset),
+  Plugin.addModule(ReactContext),
+  Plugin.addModule(ReactSurface),
+  Plugin.addModule(SetupDevtools),
+  Plugin.addModule(Translations),
+  Plugin.make,
+);
+
+export default DevtoolsPlugin;

package/src/translations.ts

@@ -18,6 +18,7 @@ export const translations = [
         'devtools-overview.label': 'Stats',
         'debug-app-graph.label': 'App Graph',
         'debug-tools-explorer.label': 'SDK Explorer',
+        'cli.label': 'CLI',
 
         'reset-data.label': 'Reset data (ERASES ALL DATA)',
         'client.label': 'Client',

package/src/types/Devtools.ts

@@ -18,6 +18,7 @@ const devtoolsId = `${meta.profile.key}.devtools`;
 export const id = devtoolsId;
 export const AppGraph = `${devtoolsId}.appGraph`;
 export const ToolsExplorer = `${devtoolsId}.toolsExplorer`;
+export const Cli = `${devtoolsId}.cli`;
 
 export namespace Client {
   export const id = `${devtoolsId}.client`;

package/src/types/DevtoolsEvents.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as ActivationEvent from '@dxos/app-framework/ActivationEvent';
+
+import { meta } from '#meta';
+
+/**
+ * The feature's start event: the plugin's start-gated modules (and cross-plugin
+ * contributions consumed by this feature) activate here. Fired on demand and by the
+ * host's idle trickle.
+ */
+export const Start = ActivationEvent.pluginStart(meta.profile.key);

package/src/types/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * as Devtools from './Devtools';
+export * as DevtoolsEvents from './DevtoolsEvents';