@dxos/plugin-devtools 0.11.1 → 0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-devtools",
-  "version": "0.11.1",
+  "version": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
   "description": "DXOS developer inspector plugin.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -43,11 +43,6 @@
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
       "default": "./dist/lib/translations.mjs"
-    },
-    "#types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
@@ -66,9 +61,30 @@
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
       "import": "./dist/lib/translations.mjs"
-    }
+    },
+    "./Devtools": {
+      "source": "./src/types/Devtools.ts",
+      "types": "./dist/types/src/types/Devtools.d.ts",
+      "import": "./dist/lib/Devtools.mjs"
+    },
+    "./DevtoolsEvents": {
+      "source": "./src/types/DevtoolsEvents.ts",
+      "types": "./dist/types/src/types/DevtoolsEvents.d.ts",
+      "import": "./dist/lib/DevtoolsEvents.mjs"
+    },
+    "./package.json": "./package.json"
   },
   "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "Devtools": [
+        "dist/types/src/types/Devtools.d.ts"
+      ],
+      "DevtoolsEvents": [
+        "dist/types/src/types/DevtoolsEvents.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "dx.config.ts",
@@ -76,64 +92,43 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@antv/graphlib": "^2.0.4",
-    "@antv/layout": "^1.2.13",
-    "@tldraw/tldraw": "^3.0.0",
-    "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.11.1",
-    "@dxos/app-toolkit": "0.11.1",
-    "@dxos/assistant-toolkit": "0.11.1",
-    "@dxos/client-services": "0.11.1",
-    "@dxos/compute": "0.11.1",
-    "@dxos/async": "0.11.1",
-    "@dxos/compute-hyperformula": "0.11.1",
-    "@dxos/conductor": "0.11.1",
-    "@dxos/config": "0.11.1",
-    "@dxos/devtools": "0.11.1",
-    "@dxos/echo": "0.11.1",
-    "@dxos/echo-host": "0.11.1",
-    "@dxos/effect": "0.11.1",
-    "@dxos/invariant": "0.11.1",
-    "@dxos/keys": "0.11.1",
-    "@dxos/log": "0.11.1",
-    "@dxos/log-store-idb": "0.11.1",
-    "@dxos/operation": "0.11.1",
-    "@dxos/plugin-client": "0.11.1",
-    "@dxos/plugin-graph": "0.11.1",
-    "@dxos/plugin-inbox": "0.11.1",
-    "@dxos/plugin-markdown": "0.11.1",
-    "@dxos/plugin-script": "0.11.1",
-    "@dxos/plugin-sheet": "0.11.1",
-    "@dxos/plugin-space": "0.11.1",
-    "@dxos/plugin-status-bar": "0.11.1",
-    "@dxos/protocols": "0.11.1",
-    "@dxos/random": "0.11.1",
-    "@dxos/react-client": "0.11.1",
-    "@dxos/react-ui-attention": "0.11.1",
-    "@dxos/react-ui-canvas-compute": "0.11.1",
-    "@dxos/react-ui-canvas-editor": "0.11.1",
-    "@dxos/react-ui-form": "0.11.1",
-    "@dxos/react-ui-introspect": "0.11.1",
-    "@dxos/react-ui-syntax-highlighter": "0.11.1",
-    "@dxos/react-ui-table": "0.11.1",
-    "@dxos/schema": "0.11.1",
-    "@dxos/tracing": "0.11.1",
-    "@dxos/types": "0.11.1",
-    "@dxos/util": "0.11.1"
+    "@effect/cli": "0.75.2",
+    "@dxos/app-framework": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/app-toolkit": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/async": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/client": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/client-services": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/compute": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/config": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/cli-util": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/devtools": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/echo": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/effect": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/keys": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/log": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/plugin-graph": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/plugin-script": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/plugin-space": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-client": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-ui-introspect": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-ui-table": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-ui-terminal": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/util": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.96.2",
+    "@storybook/react-vite": "^10.4.2",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.1.4",
-    "@dxos/plugin-testing": "0.11.1",
-    "@dxos/react-ui": "0.11.1",
-    "@dxos/storybook-utils": "0.11.1",
-    "@dxos/ui-theme": "0.11.1"
+    "@dxos/plugin-client": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/plugin-testing": "0.12.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-ui": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/ui-theme": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -141,9 +136,8 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/random": "0.11.1",
-    "@dxos/react-ui": "0.11.1",
-    "@dxos/ui-theme": "0.11.1"
+    "@dxos/ui-theme": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d",
+    "@dxos/react-ui": "1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d"
   },
   "publishConfig": {
     "access": "public"

package/src/DevtoolsPlugin.node.ts

@@ -2,15 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Plugin } from '@dxos/app-framework';
-import { AppPlugin } from '@dxos/app-toolkit';
+import * as Plugin from '@dxos/app-framework/Plugin';
 
 import { AppGraphBuilder } from '#capabilities';
 import { meta } from '#meta';
 
-export const DevtoolsPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  Plugin.make,
-);
+export const DevtoolsPlugin = Plugin.define(meta).pipe(Plugin.addModule(AppGraphBuilder), Plugin.make);
 
 export default DevtoolsPlugin;

package/src/DevtoolsPlugin.test.ts

@@ -13,12 +13,14 @@ 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/DevtoolsPlugin.tsx

@@ -4,8 +4,9 @@
 
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
-import { AppPlugin } from '@dxos/app-toolkit';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as Plugin from '@dxos/app-framework/Plugin';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
 import { type Client } from '@dxos/react-client';
 
 import { AppGraphBuilder, ReactContext, ReactSurface } from '#capabilities';
@@ -15,23 +16,24 @@ import { translations } from '#translations';
 // eslint-disable-next-line import/no-relative-packages
 import pluginSpec from '../PLUGIN.mdl?raw';
 
+const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+
 export const DevtoolsPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  AppPlugin.addReactContextModule({ activate: ReactContext }),
-  Plugin.addModule({
-    id: Capability.getModuleTag(ReactSurface) ?? 'surfaces',
-    activatesOn: ActivationEvents.SetupReactSurface,
-    activate: () => ReactSurface(),
-  }),
-  AppPlugin.addTranslationsModule({ translations }),
-  Plugin.addModule({
-    id: 'setup-devtools',
-    activatesOn: ActivationEvents.Startup,
-    activate: () => Effect.sync(() => setupDevtools()),
-  }),
-  AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
-  }),
+  Plugin.addModule(AppGraphBuilder),
+  Plugin.addModule(ReactContext),
+  Plugin.addModule(ReactSurface),
+  Plugin.addModule(AppCapability.translations(translations)),
+  Plugin.addModule(SetupDevtools),
+  Plugin.addModule(
+    AppCapability.pluginAsset({
+      pluginId: meta.profile.key,
+      path: 'PLUGIN.mdl',
+      content: pluginSpec,
+      mimeType: 'application/x-mdl',
+    }),
+  ),
   Plugin.make,
 );
 

package/src/DevtoolsPlugin.workerd.ts

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

package/src/capabilities/DevtoolsSurfaces.tsx

@@ -7,16 +7,17 @@
 import React, { type ComponentType, useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
+import * as GraphPath from '@dxos/app-toolkit/GraphPath';
+import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
 import { useActiveSpace } from '@dxos/app-toolkit/ui';
 import { InvocationTraceContainer, SpaceInfoPanel, SpaceListPanel, TestingPanel } from '@dxos/devtools';
 import { Feed } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { ScriptOperation } from '@dxos/plugin-script';
+import * as ScriptOperation from '@dxos/plugin-script/ScriptOperation';
 import { SpaceOperation } from '@dxos/plugin-space';
 import { type Space } from '@dxos/react-client/echo';
 
-import { Devtools } from '#types';
+import * as Devtools from '../types/Devtools';
 
 export type ActiveSpacePanelProps = {
   /** Stable module-level panel component; the surface passes it through its `props` mapper. */

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

@@ -4,17 +4,26 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability } from '@dxos/app-framework';
-import { AppCapabilities, AppNode, AppNodeMatcher, GraphPath } from '@dxos/app-toolkit';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppNode from '@dxos/app-toolkit/AppNode';
+import * as AppNodeMatcher from '@dxos/app-toolkit/AppNodeMatcher';
+import * as GraphPath from '@dxos/app-toolkit/GraphPath';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 import { type Space } from '@dxos/react-client/echo';
 import { Position } from '@dxos/util';
 
 import { meta } from '#meta';
-import { Devtools } from '#types';
+
+import * as Devtools from '../types/Devtools';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
+    // Read the app graph through its atom so the extension establishes a reactive dependency
+    // and re-evaluates once the capability lands (dependency modules contribute individually,
+    // not batched per wave).
+    const appGraphAtom = yield* Capability.atom(AppCapabilities.AppGraph);
+
     const extensions = yield* Effect.all([
       GraphBuilder.createExtension({
         id: 'root',
@@ -25,7 +34,7 @@ export default Capability.makeModule(
               id: 'resetData',
               data: () =>
                 Effect.sync(() => {
-                  window.location.href = '/reset.html#continue';
+                  window.location.href = '/reset.html';
                 }),
               properties: {
                 label: ['reset-data.label', { ns: meta.profile.key }],
@@ -40,7 +49,7 @@ export default Capability.makeModule(
         match: NodeMatcher.whenAny(NodeMatcher.whenRoot, AppNodeMatcher.whenNavTreeGroup(GraphPath.GroupTypes.system)),
         connector: (_nodeOrSpace: Node.Node | Space, get) =>
           Effect.gen(function* () {
-            const [graph] = get(yield* Capability.atom(AppCapabilities.AppGraph));
+            const [graph] = get(appGraphAtom);
 
             return [
               Node.make({
@@ -71,6 +80,15 @@ export default Capability.makeModule(
                       icon: 'ph--toolbox--regular',
                     },
                   }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Cli),
+                    data: Devtools.Cli,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['cli.label', { ns: meta.profile.key }],
+                      icon: 'ph--terminal-window--regular',
+                    },
+                  }),
                   Node.make({
                     id: Devtools.nodeId(Devtools.Client.id),
                     data: null,
@@ -383,6 +401,6 @@ export default Capability.makeModule(
       }),
     ]);
 
-    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+    return Capability.contribute(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/index.ts

@@ -2,8 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capability } from '@dxos/app-framework';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
 
-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'));
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'), {
+  requires: [AppCapabilities.AppGraph],
+});
+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'],
+});

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,7 +4,8 @@
 
 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 { AppSurface } from '@dxos/app-toolkit/ui';
 import { EDGE_SERVICE_DEFAULTS, EdgeServiceName } from '@dxos/config';
@@ -34,9 +35,9 @@ import {
 import { type Graph } from '@dxos/plugin-graph';
 import { ToolsExplorer } from '@dxos/react-ui-introspect';
 
-import { DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
-import { Devtools } from '#types';
+import { CliPanel, DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
 
+import * as Devtools from '../types/Devtools';
 import {
   ActiveSpacePanel,
   EdgeTestingSurface,
@@ -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,74 @@
+//
+// 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 { SpacePlugin } from '@dxos/plugin-space/plugin';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+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({ onClientInitialized: ({ client }) => Effect.asVoid(initializeIdentity(client)) }),
+        StorybookPlugin({}),
+        // The real plugin, so the story covers it actually contributing its commands.
+        SpacePlugin({}),
+      ],
+    }),
+  ],
+  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,97 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+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;
+    }
+
+    // `provide` comes after the subcommands so the config reaches them in the type as well as at
+    // runtime; applied before, every subcommand still advertises `CommandConfig` as unmet.
+    const command = Command.make('dx', {
+      json: Options.boolean('json', { ifPresent: true }).pipe(Options.withDescription('JSON output.')),
+      verbose: Options.boolean('verbose', { ifPresent: true }).pipe(
+        Options.withAlias('v'),
+        Options.withDescription('Verbose output.'),
+      ),
+    }).pipe(
+      Command.withSubcommands([first, ...rest]),
+      Command.provide(({ json, verbose }) =>
+        Layer.succeed(CommandConfig, { json, verbose, 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]);
+};