@dxos/plugin-chess 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/package.json

@@ -1,13 +1,26 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.70d3990",
+  "version": "0.8.4-main.74a063c4e0",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#blueprints": "./src/blueprints/index.ts",
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -15,17 +28,29 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./blueprints": {
+      "source": "./src/blueprints/index.ts",
+      "types": "./dist/types/src/blueprints/index.d.ts",
+      "browser": "./dist/lib/browser/blueprints/index.mjs",
+      "node": "./dist/lib/node-esm/blueprints/index.mjs"
+    },
+    "./cli": {
+      "source": "./src/cli/index.ts",
+      "types": "./dist/types/src/cli/index.d.ts",
+      "browser": "./dist/lib/browser/cli/index.mjs",
+      "node": "./dist/lib/node-esm/cli/index.mjs"
+    },
+    "./operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "browser": "./dist/lib/browser/operations/index.mjs",
+      "node": "./dist/lib/node-esm/operations/index.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
-    },
-    "./functions": {
-      "source": "./src/functions/index.ts",
-      "types": "./dist/types/src/functions/index.d.ts",
-      "browser": "./dist/lib/browser/functions/index.mjs",
-      "node": "./dist/lib/node-esm/functions/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -41,47 +66,53 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@automerge/automerge": "3.2.3",
+    "@effect-atom/atom-react": "^0.5.0",
     "chess.js": "^1.0.0",
-    "effect": "3.18.3",
-    "@dxos/app-framework": "0.8.4-main.70d3990",
-    "@dxos/ai": "0.8.4-main.70d3990",
-    "@dxos/assistant": "0.8.4-main.70d3990",
-    "@dxos/async": "0.8.4-main.70d3990",
-    "@dxos/blueprints": "0.8.4-main.70d3990",
-    "@dxos/display-name": "0.8.4-main.70d3990",
-    "@dxos/echo": "0.8.4-main.70d3990",
-    "@dxos/invariant": "0.8.4-main.70d3990",
-    "@dxos/live-object": "0.8.4-main.70d3990",
-    "@dxos/log": "0.8.4-main.70d3990",
-    "@dxos/plugin-client": "0.8.4-main.70d3990",
-    "@dxos/plugin-graph": "0.8.4-main.70d3990",
-    "@dxos/plugin-space": "0.8.4-main.70d3990",
-    "@dxos/react-client": "0.8.4-main.70d3990",
-    "@dxos/react-ui-gameboard": "0.8.4-main.70d3990",
-    "@dxos/react-ui-sfx": "0.8.4-main.70d3990",
-    "@dxos/react-ui-stack": "0.8.4-main.70d3990",
-    "@dxos/schema": "0.8.4-main.70d3990",
-    "@dxos/util": "0.8.4-main.70d3990",
-    "@dxos/functions": "0.8.4-main.70d3990"
+    "effect": "3.20.0",
+    "@dxos/ai": "0.8.4-main.74a063c4e0",
+    "@dxos/assistant": "0.8.4-main.74a063c4e0",
+    "@dxos/app-toolkit": "0.8.4-main.74a063c4e0",
+    "@dxos/async": "0.8.4-main.74a063c4e0",
+    "@dxos/blueprints": "0.8.4-main.74a063c4e0",
+    "@dxos/display-name": "0.8.4-main.74a063c4e0",
+    "@dxos/echo": "0.8.4-main.74a063c4e0",
+    "@dxos/echo-db": "0.8.4-main.74a063c4e0",
+    "@dxos/functions": "0.8.4-main.74a063c4e0",
+    "@dxos/echo-react": "0.8.4-main.74a063c4e0",
+    "@dxos/invariant": "0.8.4-main.74a063c4e0",
+    "@dxos/log": "0.8.4-main.74a063c4e0",
+    "@dxos/plugin-client": "0.8.4-main.74a063c4e0",
+    "@dxos/plugin-graph": "0.8.4-main.74a063c4e0",
+    "@dxos/plugin-markdown": "0.8.4-main.74a063c4e0",
+    "@dxos/plugin-space": "0.8.4-main.74a063c4e0",
+    "@dxos/react-ui-gameboard": "0.8.4-main.74a063c4e0",
+    "@dxos/operation": "0.8.4-main.74a063c4e0",
+    "@dxos/app-framework": "0.8.4-main.74a063c4e0",
+    "@dxos/react-client": "0.8.4-main.74a063c4e0",
+    "@dxos/react-ui-sfx": "0.8.4-main.74a063c4e0",
+    "@dxos/react-ui-mosaic": "0.8.4-main.74a063c4e0",
+    "@dxos/react-ui-stack": "0.8.4-main.74a063c4e0",
+    "@dxos/schema": "0.8.4-main.74a063c4e0",
+    "@dxos/types": "0.8.4-main.74a063c4e0",
+    "@dxos/util": "0.8.4-main.74a063c4e0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/plugin-theme": "0.8.4-main.70d3990",
-    "@dxos/react-ui-theme": "0.8.4-main.70d3990",
-    "@dxos/storybook-utils": "0.8.4-main.70d3990",
-    "@dxos/react-ui": "0.8.4-main.70d3990"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/storybook-utils": "0.8.4-main.74a063c4e0",
+    "@dxos/plugin-theme": "0.8.4-main.74a063c4e0",
+    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
+    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.70d3990",
-    "@dxos/react-ui-theme": "0.8.4-main.70d3990"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
+    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -2,54 +2,48 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
-import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
-import { type CreateObjectIntent } from '@dxos/plugin-space/types';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Annotation } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { type CreateObject } from '@dxos/plugin-space/types';
+
+import { ChessBlueprint } from '#blueprints';
+import { BlueprintDefinition, OperationHandler, ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { Chess } from '#types';
 
-import { BlueprintDefinition, CHESS_BLUEPRINT_KEY, IntentResolver, ReactSurface } from './capabilities';
-import { meta } from './meta';
 import { translations } from './translations';
-import { Chess, ChessAction } from './types';
 
-export const ChessPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/translations`,
-    activatesOn: Events.SetupTranslations,
-    activate: () => contributes(Capabilities.Translations, translations),
-  }),
-  defineModule({
-    id: `${meta.id}/module/metadata`,
-    activatesOn: Events.SetupMetadata,
-    activate: () =>
-      contributes(Capabilities.Metadata, {
-        id: Chess.Game.typename,
-        metadata: {
-          icon: 'ph--shield-chevron--regular',
-          iconHue: 'amber',
-          blueprints: [CHESS_BLUEPRINT_KEY],
-          createObjectIntent: (() => createIntent(ChessAction.Create)) satisfies CreateObjectIntent,
-          addToCollectionOnCreate: true,
-        },
-      }),
-  }),
-  defineModule({
-    id: `${meta.id}/module/schema`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.Schema, [Chess.Game]),
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
-  }),
-  defineModule({
-    id: `${meta.id}/module/intent-resolver`,
-    activatesOn: Events.SetupIntentResolver,
-    activate: IntentResolver,
-  }),
-  defineModule({
-    id: `${meta.id}/module/blueprint`,
-    activatesOn: Events.SetupArtifactDefinition,
-    activate: BlueprintDefinition,
+export const ChessPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Chess.Game.typename,
+      metadata: {
+        icon: Annotation.IconAnnotation.get(Chess.Game).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Chess.Game).pipe(Option.getOrThrow).hue ?? 'white',
+        blueprints: [ChessBlueprint.key],
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Chess.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+      },
+    },
   }),
-]);
+  AppPlugin.addSchemaModule({ schema: [Chess.Game] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);

package/src/blueprints/chess-blueprint.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { trim } from '@dxos/util';
+
+import { Create, Move, Play, Print } from '#operations';
+
+const BLUEPRINT_KEY = 'org.dxos.blueprint.chess';
+
+const operations = [Create, Move, Play, Print];
+
+const make = () =>
+  Blueprint.make({
+    key: BLUEPRINT_KEY,
+    name: 'Chess',
+    tools: Blueprint.toolDefinitions({ operations }),
+    instructions: Template.make({
+      source: trim`
+        You are an expert chess player.
+        To analyze a game you can access the "pgn" property by loading the context object that represents the current game.
+        You could suggest a good next move or offer to play a move.
+        Don't actually make a move unless you are asked to.
+      `,
+    }),
+  });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  make,
+};
+
+export default blueprint;

package/src/blueprints/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { default as ChessBlueprint } from './chess-blueprint';
+export * as ChessFunctions from '../operations';

package/src/capabilities/artifact-definition.ts

@@ -6,21 +6,21 @@
 // @ts-nocheck
 
 import { Chess as ChessJS } from 'chess.js';
-import * as Function from 'effect/Function';
+import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
 import { ToolResult, createTool } from '@dxos/ai';
-import { Capabilities, type PromiseIntentDispatcher, chain, contributes, createIntent } from '@dxos/app-framework';
+import { Capabilities, Capability, type PromiseIntentDispatcher } from '@dxos/app-framework';
 import { ArtifactId, VersionPin, createArtifactElement } from '@dxos/assistant';
 import { defineArtifact } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { trim } from '@dxos/util';
 
-import { meta } from '../meta';
-import { Chess, ChessAction } from '../types';
+import { meta } from '#meta';
+import { Chess } from '#types';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -30,100 +30,106 @@ declare global {
   }
 }
 
-export default () => {
-  const definition = defineArtifact({
-    id: `artifact:${meta.id}`,
-    name: meta.name,
-    description: 'Provides a simple chess engine.',
-    instructions: trim`
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const definition = defineArtifact({
+      id: `artifact:${meta.id}`,
+      name: meta.name,
+      description: 'Provides a simple chess engine.',
+      instructions: trim`
       - If the user's message relates to a chess game, you must return the chess game inside the artifact tag as a valid FEN string with no additional text.
       - Always inspect the chess game at the start of every prompt realting to a chess game, as it might have changed since the interaction.
    `,
-    schema: Chess.Game,
-    tools: [
-      createTool(meta.id, {
-        name: 'create',
-        description: 'Create a new chess game. Returns the artifact definition for the game.',
-        caption: 'Creating chess game...',
-        schema: Schema.Struct({
-          pgn: Schema.String.annotations({ description: 'The state of the chess game in the PGN format.' }),
-        }),
-        execute: async ({ pgn }, { extensions }) => {
-          invariant(extensions?.space, 'No space');
-          invariant(extensions?.dispatch, 'No intent dispatcher');
-          const intent = Function.pipe(
-            createIntent(ChessAction.Create, { pgn }),
-            chain(SpaceAction.AddObject, { target: extensions.space }),
-          );
-          const { data, error } = await extensions.dispatch(intent);
-          if (!data || error) {
-            return ToolResult.Error(error?.message ?? 'Failed to create chess game');
-          }
+      schema: Chess.Game,
+      tools: [
+        createTool(meta.id, {
+          name: 'create',
+          description: 'Create a new chess game. Returns the artifact definition for the game.',
+          caption: 'Creating chess game...',
+          schema: Schema.Struct({
+            pgn: Schema.String.annotations({ description: 'The state of the chess game in the PGN format.' }),
+          }),
+          execute: async ({ pgn }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            invariant(extensions?.invoke, 'No operation invoker');
 
-          return ToolResult.Success(createArtifactElement(data.id), [
-            VersionPin.createBlock(VersionPin.fromObject(data.object)),
-          ]);
-        },
-      }),
-      createTool(meta.id, {
-        name: 'list',
-        description: 'Query all active chess games.',
-        caption: 'Getting games...',
-        schema: Schema.Struct({}),
-        execute: async (_, { extensions }) => {
-          invariant(extensions?.space, 'No space');
-          const { objects: games } = await extensions.space.db.query(Filter.type(Chess.Game)).run();
-          invariant(games.length > 0, 'No chess games found');
+            const game = Chess.make({ pgn });
 
-          return ToolResult.Success(games);
-        },
-      }),
-      createTool(meta.id, {
-        name: 'inspect',
-        description: 'Get the current state of the chess game.',
-        caption: 'Inspecting game...',
-        schema: Schema.Struct({ id: ArtifactId }),
-        execute: async ({ id }, { extensions }) => {
-          invariant(extensions?.space, 'No space');
-          const game = await extensions.space.db
-            .query(Filter.ids(ArtifactId.toDXN(id, extensions.space.id).toString()))
-            .first();
-          invariant(Obj.instanceOf(Chess.Game, game));
+            const { data, error } = await extensions.invoke(SpaceOperation.AddObject, {
+              target: extensions.space,
+              object: game,
+            });
+            if (error) {
+              return ToolResult.Error(error?.message ?? 'Failed to add chess game to space');
+            }
 
-          return ToolResult.Success(game.pgn);
-        },
-      }),
-      createTool(meta.id, {
-        name: 'move',
-        description: 'Make a move in the chess game.',
-        caption: 'Making chess move...',
-        schema: Schema.Struct({
-          id: ArtifactId,
-          move: Schema.String.annotations({
-            description: 'The move to make in the chess game.',
-            examples: ['e4', 'Bf3'],
-          }),
+            return ToolResult.Success(createArtifactElement(game.id), [
+              VersionPin.createBlock(VersionPin.fromObject(game)),
+            ]);
+          },
         }),
-        execute: async ({ id, move }, { extensions }) => {
-          invariant(extensions?.space, 'No space');
-          const game = await extensions.space.db
-            .query(Filter.ids(ArtifactId.toDXN(id, extensions.space.id).toString()))
-            .first();
-          invariant(Obj.instanceOf(Chess.Game, game));
+        createTool(meta.id, {
+          name: 'list',
+          description: 'Query all active chess games.',
+          caption: 'Getting games...',
+          schema: Schema.Struct({}),
+          execute: async (_, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const { objects: games } = await extensions.space.db.query(Filter.type(Chess.Game)).run();
+            invariant(games.length > 0, 'No chess games found');
 
-          const chess = new ChessJS(game.pgn);
-          try {
-            chess.move(move);
-          } catch (error: any) {
-            return ToolResult.Error(error.message);
-          }
+            return ToolResult.Success(games);
+          },
+        }),
+        createTool(meta.id, {
+          name: 'inspect',
+          description: 'Get the current state of the chess game.',
+          caption: 'Inspecting game...',
+          schema: Schema.Struct({ id: ArtifactId }),
+          execute: async ({ id }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const game = await extensions.space.db
+              .query(Filter.id(ArtifactId.toDXN(id, extensions.space.id).toString()))
+              .first();
+            invariant(Obj.instanceOf(Chess.Game, game));
 
-          game.pgn = chess.pgn();
-          return ToolResult.Success(game.pgn);
-        },
-      }),
-    ],
-  });
+            return ToolResult.Success(game.pgn);
+          },
+        }),
+        createTool(meta.id, {
+          name: 'move',
+          description: 'Make a move in the chess game.',
+          caption: 'Making chess move...',
+          schema: Schema.Struct({
+            id: ArtifactId,
+            move: Schema.String.annotations({
+              description: 'The move to make in the chess game.',
+              examples: ['e4', 'Bf3'],
+            }),
+          }),
+          execute: async ({ id, move }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const game = await extensions.space.db
+              .query(Filter.id(ArtifactId.toDXN(id, extensions.space.id).toString()))
+              .first();
+            invariant(Obj.instanceOf(Chess.Game, game));
+
+            const chess = new ChessJS(game.pgn);
+            try {
+              chess.move(move);
+            } catch (error: any) {
+              return ToolResult.Error(error.message);
+            }
+
+            Obj.change(game, (obj) => {
+              obj.pgn = chess.pgn();
+            });
+            return ToolResult.Success(game.pgn);
+          },
+        }),
+      ],
+    });
 
-  return contributes(Capabilities.ArtifactDefinition, definition);
-};
+    return Capability.contributes(Capabilities.ArtifactDefinition, definition);
+  }),
+);

package/src/capabilities/blueprint-definition.ts

@@ -2,35 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
-import { trim } from '@dxos/util';
+import * as Effect from 'effect/Effect';
 
-import { create, move, play } from '../functions';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 
-const functions: FunctionDefinition[] = [create, move, play];
+import { ChessBlueprint } from '#blueprints';
 
-export const CHESS_BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, ChessBlueprint)]));
 
-export default () => {
-  return [
-    contributes(Capabilities.Functions, functions),
-    contributes(
-      Capabilities.BlueprintDefinition,
-      Blueprint.make({
-        key: CHESS_BLUEPRINT_KEY,
-        name: 'Chess',
-        tools: Blueprint.toolDefinitions({ functions }),
-        instructions: Template.make({
-          source: trim`
-            You are an expert chess player.
-            To analyze a game you can access the "pgn" property by loading the context object that represents the current game.
-            You could suggest a good next move or offer to play a move.
-            Don't actually make a move unless you are asked to.
-          `,
-        }),
-      }),
-    ),
-  ];
-};
+export default blueprintDefinition;

package/src/capabilities/index.ts

@@ -2,10 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
 
-export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-
-export * from './blueprint-definition';
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,14 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { ChessHandlers } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, ChessHandlers);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -2,22 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 
-import { ChessboardContainer } from '../components';
-import { meta } from '../meta';
-import { Chess } from '../types';
+import { ChessArticle, ChessCard } from '#containers';
+import { Chess } from '#types';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: meta.id,
-      role: ['article', 'section', 'card--intrinsic', 'card--extrinsic', 'card--popover', 'card--transclusion'],
-      // TODO(burdon): Could this be standardized so that we don't require a subject property.
-      filter: (data): data is { subject: Chess.Game } => Obj.instanceOf(Chess.Game, data.subject),
-      component: ({ data, role }) => <ChessboardContainer game={data.subject} role={role} />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'game',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section'],
+        filter: AppSurface.objectArticle(Chess.Game),
+        component: ({ data, role }) => (
+          <ChessArticle role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'game-card',
+        role: ['card--content'],
+        filter: AppSurface.objectCard(Chess.Game),
+        component: ({ data, role }) => <ChessCard role={role} subject={data.subject} />,
+      }),
+    ]),
+  ),
+);