@dxos/plugin-debug 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/src/capabilities/react-surface.ts

@@ -6,39 +6,25 @@ import * as Effect from 'effect/Effect';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
+import * as Surface from '@dxos/app-framework/Surface';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Obj } from '@dxos/echo';
 import { type IdbLogStore } from '@dxos/log-store-idb';
-import { type Space, isSpace } from '@dxos/react-client/echo';
-import { Position } from '@dxos/util';
+import * as Position from '@dxos/util/Position';
 
-import { DebugStatus, LogStatus, StatsPanel, Wireframe } from '#containers';
+import { DebugPanelDrawer, DebugPanelStatus, DebugStatus, LoggerPanel, StatsPanel, Wireframe } from '#containers';
 import { meta } from '#meta';
 import { DebugNodes, DebugSurface } from '#types';
 
-import { DebugCapabilities } from '../types/Debug';
+import { DebugCapabilities } from '../types/Debug.ts';
 import {
+  DebugConsoleArticle,
   DebugSettingsSurface,
-  LoggerSurface,
   ObjectDebugSurface,
   SpaceGeneratorSurface,
   SpaceObjectsSurface,
-} from './DebugSurfaces';
-
-type SpaceDebug = {
-  type: string;
-  space: Space;
-};
-
-const isSpaceDebug = (data: unknown): data is SpaceDebug =>
-  typeof data === 'object' &&
-  data !== null &&
-  'type' in data &&
-  data.type === DebugNodes.SpaceType &&
-  'space' in data &&
-  isSpace(data.space);
+} from './DebugSurfaces.tsx';
 
 type ReactSurfaceOptions = {
   logStore?: IdbLogStore;
@@ -59,9 +45,9 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'space',
-        filter: AppSurface.subject(AppSurface.Article, isSpaceDebug),
+        filter: AppSurface.literal(DebugSurface.Page, DebugNodes.SpaceType),
         component: SpaceGeneratorSurface,
-        props: ({ role, data: { subject } }) => ({ role, space: subject.space }),
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'wireframe',
@@ -84,6 +70,16 @@ export default Capability.makeModule(
           classNames: 'row-span-2 overflow-hidden',
         }),
       }),
+      Surface.create({
+        id: 'console',
+        filter: AppSurface.literal(DebugSurface.Page, DebugNodes.Console),
+        component: DebugConsoleArticle,
+      }),
+      Surface.create({
+        id: 'logsArticle',
+        filter: AppSurface.literal(DebugSurface.Page, DebugNodes.Logs),
+        component: LoggerPanel,
+      }),
       Surface.create({
         id: 'objectDebug',
         filter: AppSurface.allOf(
@@ -105,20 +101,28 @@ export default Capability.makeModule(
         component: DebugStatus,
       }),
       Surface.create({
-        id: 'logs',
-        filter: Surface.makeFilter(AppSurface.deckCompanion('logs')),
-        component: LoggerSurface,
+        id: 'debugPanelStatus',
+        filter: Surface.makeFilter(AppSurface.StatusIndicator),
+        component: DebugPanelStatus,
       }),
       Surface.create({
-        id: 'logStatus',
-        filter: Surface.makeFilter(AppSurface.StatusIndicator),
-        component: LogStatus,
+        id: 'debugDrawer',
+        filter: Surface.makeFilter(AppSurface.Drawer),
+        component: DebugPanelDrawer,
       }),
       Surface.create({
         id: 'statsPanel',
         filter: Surface.makeFilter(DebugSurface.Stats),
         component: StatsPanel,
       }),
+      Surface.create({
+        id: 'statsCards',
+        filter: Surface.makeFilter(AppSurface.DevtoolsOverview),
+        // After the devtools cards (0–12) and before contributors that sit last.
+        position: 20,
+        component: StatsPanel,
+        props: () => ({ showEmpty: false }),
+      }),
     ]);
   }),
 );

package/src/capabilities/settings.ts

@@ -6,14 +6,14 @@ import * as Effect from 'effect/Effect';
 
 import * as Capability from '@dxos/app-framework/Capability';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { createKvsStore } from '@dxos/effect';
+import * as KvsStore from '@dxos/effect/KvsStore';
 
 import { meta } from '#meta';
 import { Debug, Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
-    const settingsAtom = createKvsStore({
+    const settingsAtom = KvsStore.make({
       key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({}),

package/src/capabilities/space-templates.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+
+import {
+  IncidentSpace,
+  PipelineSpace,
+  ReviewSpace,
+  StockfishSpace,
+  TidepoolSpace,
+  WeatherSpace,
+  WorkerSpace,
+} from '../samples/index.ts';
+
+export default [
+  PipelineSpace.makeTemplate(),
+  TidepoolSpace.makeTemplate(),
+  StockfishSpace.makeTemplate(),
+  WorkerSpace.makeTemplate(),
+  WeatherSpace.makeTemplate(),
+  IncidentSpace.makeTemplate(),
+  ReviewSpace.makeTemplate(),
+] satisfies ReadonlyArray<AppCapabilities.SpaceTemplate>;

package/src/capabilities/stats-panel.ts

@@ -3,7 +3,7 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';

package/src/components/SchemaTable/SchemaTable.tsx

@@ -2,20 +2,50 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Type } from '@dxos/echo';
-import { IconButton, ThemedClassName } from '@dxos/react-ui';
+import { log } from '@dxos/log';
+import * as Button from '@dxos/react-ui/Button';
+import * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
-export type SchemaTableProps = ThemedClassName<{
+export type SchemaTableProps = Util.ThemedClassName<{
   types: any[];
   objects?: Record<string, number | undefined>;
   label: string;
-  onClick: (typename: string) => void;
+  /** May be async — the row awaits it, so a generator's failure is reported rather than unowned. */
+  onClick: (typename: string) => Promise<void> | void;
 }>;
 
+/**
+ * Row display name: a preset descriptor may carry one, otherwise the key it is created by.
+ *
+ * The field is `presetLabel` rather than `name` because a class-based type entity already has a
+ * `name` — its JS class name — so keying off that suppressed the count on every real type row.
+ */
+const rowName = (type: { presetLabel?: string }, typename: string | undefined): string =>
+  (typeof type.presetLabel === 'string' ? type.presetLabel : undefined) ?? typename ?? '';
+
 export const SchemaTable = ({ classNames, types, objects = {}, label, onClick }: SchemaTableProps) => {
+  const [pending, setPending] = useState<string>();
+  const handleClick = useCallback(
+    async (typename: string) => {
+      if (pending !== undefined) {
+        return;
+      }
+      setPending(typename);
+      try {
+        await onClick(typename);
+      } catch (err) {
+        log.catch(err);
+      } finally {
+        setPending(undefined);
+      }
+    },
+    [onClick, pending],
+  );
+
   return (
     <div className={mx('grid grid-cols-[1fr_80px_40px] gap-1 overflow-none', classNames)}>
       <h2 className='p-2'>{label}</h2>
@@ -25,14 +55,18 @@ export const SchemaTable = ({ classNames, types, objects = {}, label, onClick }:
         const typename = typeof type.typename === 'string' ? type.typename : Type.getTypename(type);
         return (
           <div key={typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-            <div className='px-2 text-sm font-mono text-subdued'>{typename}</div>
-            <div className='px-2 text-right font-mono'>{typename ? (objects[typename] ?? 0) : 0}</div>
-            <IconButton
+            <div className='px-2 text-sm font-mono text-fg-subtle'>{rowName(type, typename)}</div>
+            {/* A labelled row is a preset rather than a type, so it has no object count to show. */}
+            <div className='px-2 text-right font-mono'>
+              {typeof type.presetLabel === 'string' ? '—' : typename ? (objects[typename] ?? 0) : 0}
+            </div>
+            <Button.Root
               variant='ghost'
-              icon='ph--plus--regular'
+              icon={pending === typename ? 'ph--spinner--regular' : 'ph--plus--regular'}
               iconOnly
-              label='Create data'
-              onClick={() => typename && onClick(typename)}
+              disabled={pending !== undefined}
+              label={`Create ${rowName(type, typename)}`}
+              onClick={() => typename && void handleClick(typename)}
             />
           </div>
         );

package/src/components/SchemaTable/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './SchemaTable';
+export * from './SchemaTable.tsx';

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -2,13 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
+
+import type * as PluginManager from '@dxos/app-framework/PluginManager';
 import { addressToA1Notation } from '@dxos/compute-hyperformula/types';
+import * as Operation from '@dxos/compute/Operation';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { EID, Filter, Key, Type, View } from '@dxos/echo';
+import * as EffectEx from '@dxos/effect/EffectEx';
 import { OperationInvoker } from '@dxos/operation';
 import * as Drawing from '@dxos/plugin-illustrator/Drawing';
 import * as Markdown from '@dxos/plugin-markdown/Markdown';
 import * as Sheet from '@dxos/plugin-sheet/Sheet';
+import * as SpaceCapabilities from '@dxos/plugin-space/SpaceCapabilities';
 import * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';
 import * as Tldraw from '@dxos/plugin-tldraw/Tldraw';
 import { random } from '@dxos/random';
@@ -28,7 +34,8 @@ export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) =
 
 export const createGenerator = <S extends Type.AnyObj>(
   client: Client,
-  invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
+  invoker: OperationInvoker.OperationInvoker,
+  manager: PluginManager.PluginManager,
   schema: S,
 ): ObjectGenerator<Type.InstanceType<S>> => {
   return async (space: Space, n: number): Promise<Type.InstanceType<S>[]> => {
@@ -44,7 +51,20 @@ export const createGenerator = <S extends Type.AnyObj>(
           .find((s) => Type.getTypename(s) === typename)
       : undefined;
     if (!view && !staticSchema) {
-      await invokePromise(SpaceOperation.AddType, { type: schema, show: false }, { spaceId: space.id });
+      const { data } = await invoker.invokePromise(
+        SpaceOperation.AddType,
+        { type: schema, show: false },
+        { spaceId: space.id },
+      );
+      // The operation's process cannot see the managers, so the plugins (e.g. the table for the type) are told here.
+      if (data && !data.notified) {
+        await EffectEx.runAndForwardErrors(
+          SpaceCapabilities.notifyTypeAdded(
+            { plugins: manager, capabilities: manager.capabilities },
+            { db: space.db, type: data.object, show: false },
+          ).pipe(Effect.provideService(Operation.Service, invoker)),
+        );
+      }
     }
 
     // Create objects.

package/src/components/SpaceGenerator/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './presets';
-export * from './ObjectGenerator';
+export * from './presets.ts';
+export * from './ObjectGenerator.tsx';

package/src/components/SpaceGenerator/presets.ts

@@ -4,7 +4,8 @@
 
 import * as Schema from 'effect/Schema';
 
-import { RunInstructions, WebSearchSkill } from '@dxos/assistant-toolkit';
+import * as AgentOperation from '@dxos/assistant-toolkit/AgentOperation';
+import * as WebSearchSkill from '@dxos/assistant-toolkit/WebSearchSkill';
 import * as Instructions from '@dxos/compute/Instructions';
 import * as Operation from '@dxos/compute/Operation';
 import * as Trigger from '@dxos/compute/Trigger';
@@ -38,7 +39,7 @@ import { ViewModel } from '@dxos/schema';
 import { Message, Organization, Person, Pipeline } from '@dxos/types';
 import { range, trim } from '@dxos/util';
 
-import { type ObjectGenerator } from './ObjectGenerator';
+import { type ObjectGenerator } from './ObjectGenerator.tsx';
 
 export enum PresetName {
   DXOS_TEAM = 'dxos-team',
@@ -162,7 +163,6 @@ export const generator = () => ({
           const researchPrompt = space.db.add(
             Instructions.make({
               name: 'Research',
-              description: 'Research organization',
 
               // TODO(dmaretskyi): This mocks research (returns pre-baked result), the actual research might take compute minutes.
               // Remove the mock prompt to do the actual research.
@@ -179,7 +179,7 @@ export const generator = () => ({
             Trigger.make({
               enabled: true,
               spec: Trigger.specSubscription(organizationsQuery),
-              runnable: Ref.make(Operation.serialize(RunInstructions)),
+              runnable: Ref.make(Operation.serialize(AgentOperation.RunInstructions)),
               input: {
                 instructions: Ref.make(researchPrompt),
                 input: '{{event.subject}}',

package/src/components/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './SchemaTable';
-export * from './SpaceGenerator';
+export * from './SchemaTable/index.ts';
+export * from './SpaceGenerator/index.ts';

package/src/containers/DebugConsole/DebugConsole.stories.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { DebugConsole } from './DebugConsole.tsx';
+
+const meta = {
+  title: 'plugins/plugin-debug/containers/DebugConsole',
+  component: DebugConsole,
+  decorators: [withPluginManager(), withTheme(), withLayout({ layout: 'centered' })],
+  parameters: { translations },
+} satisfies Meta<typeof DebugConsole>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onClose: () => {},
+  },
+};

package/src/containers/DebugConsole/DebugConsole.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useMemo, useRef } from 'react';
+
+import * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';
+import { Terminal, type TerminalApi } from '@dxos/react-ui-terminal';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as SystemButton from '@dxos/react-ui/SystemButton';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
+
+import { meta } from '#meta';
+
+import { createDebugCli } from './cli.ts';
+
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const RESET = '\x1b[0m';
+
+/** Sizes a host that has no size of its own; a host with a definite size passes `fit` instead. */
+const FIXED_GRID = { cols: 100, rows: 24 };
+
+const BANNER = `${BOLD}Debug console${RESET}\n${DIM}snapshot · plugins · enable · disable · ops · invoke · eval · port — "help" for details.${RESET}`;
+
+export type DebugConsoleProps = {
+  /** Rendered as a close button in the toolbar when provided (the popover host closes itself). */
+  onClose?: () => void;
+  /** Fits the terminal to its container; without it the fixed grid sizes a content-sized host. */
+  fit?: boolean;
+};
+
+/**
+ * The debug console: the introspection surface an agent drives over the debug port (operations,
+ * snapshot, plugin management, eval), as an interactive Effect-CLI terminal.
+ */
+export const DebugConsole = ({ onClose, fit }: DebugConsoleProps) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  const manager = PluginManagerProvider.usePluginManager();
+  const apiRef = useRef<TerminalApi | null>(null);
+  const lastResultRef = useRef('');
+  const cli = useMemo(
+    () =>
+      createDebugCli(manager, {
+        onResult: (text) => {
+          lastResultRef.current = text;
+        },
+      }),
+    [manager],
+  );
+
+  const handleClear = useCallback(() => {
+    apiRef.current?.clear();
+    apiRef.current?.focus();
+  }, []);
+
+  return (
+    <Panel.Root>
+      <Panel.Body>
+        <Terminal
+          ref={apiRef}
+          command={cli.command}
+          layer={cli.layer}
+          name='debug'
+          banner={BANNER}
+          dimensions={fit ? undefined : FIXED_GRID}
+        />
+      </Panel.Body>
+      <Panel.Footer>
+        <Toolbar.Root classNames='bg-transparent'>
+          <Button.Root
+            variant='ghost'
+            iconOnly
+            icon='ph--eraser--regular'
+            label={t('console.clear.label')}
+            onClick={handleClear}
+          />
+          <SystemButton.Clipboard
+            variant='ghost'
+            iconOnly
+            label={t('console.copy.label')}
+            onCopy={() => lastResultRef.current}
+          />
+          <Toolbar.Separator />
+          {onClose && <SystemButton.Close variant='ghost' iconOnly onClick={onClose} />}
+        </Toolbar.Root>
+      </Panel.Footer>
+    </Panel.Root>
+  );
+};
+
+DebugConsole.displayName = 'DebugConsole';