@dxos/plugin-chess 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.071a3e2

package/src/capabilities/artifact.ts

@@ -0,0 +1,109 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+import { pipe } from 'effect';
+
+import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
+import { createArtifactElement } from '@dxos/assistant';
+import { isInstanceOf, ObjectId, S } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { Filter, type Space } from '@dxos/react-client/echo';
+
+import { ChessAction, ChessType } from '../types';
+
+// TODO(burdon): Factor out.
+declare global {
+  interface ToolContextExtensions {
+    space?: Space;
+    dispatch?: PromiseIntentDispatcher;
+  }
+}
+
+export default () => {
+  const definition = defineArtifact({
+    id: 'plugin-chess',
+    instructions: `
+  Chess:
+  - 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.
+  `,
+    schema: ChessType,
+    tools: [
+      defineTool({
+        name: 'chess_new',
+        description: 'Create a new chess game. Returns the artifact definition for the game',
+        schema: S.Struct({
+          fen: S.String.annotations({ description: 'The state of the chess game in the FEN format.' }),
+        }),
+        execute: async ({ fen }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          invariant(extensions?.dispatch, 'No intent dispatcher');
+          const intent = pipe(
+            createIntent(ChessAction.Create, { fen }),
+            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');
+          }
+
+          return ToolResult.Success(createArtifactElement(data.id));
+        },
+      }),
+      defineTool({
+        name: 'chess_query',
+        description: 'Query all active chess games.',
+        schema: S.Struct({}),
+        execute: async (_, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          const { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          invariant(games.length > 0, 'No chess games found');
+          return ToolResult.Success(games);
+        },
+      }),
+      defineTool({
+        name: 'chess_inspect',
+        description: 'Get the current state of the chess game.',
+        schema: S.Struct({ id: ObjectId }),
+        execute: async ({ id }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          const { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          const game = games.find((game) => game.id === id);
+          invariant(isInstanceOf(ChessType, game));
+          return ToolResult.Success(game.fen);
+        },
+      }),
+      defineTool({
+        name: 'chess_move',
+        description: 'Make a move in the chess game.',
+        schema: S.Struct({
+          id: ObjectId,
+          move: S.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 { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          const game = games.find((game) => game.id === id);
+          invariant(isInstanceOf(ChessType, game));
+          const board = new Chess(game.fen);
+          try {
+            board.move(move);
+          } catch (error: any) {
+            return ToolResult.Error(error.message);
+          }
+          game.pgn = board.pgn();
+          game.fen = board.fen();
+          return ToolResult.Success(game.fen);
+        },
+      }),
+    ],
+  });
+
+  return contributes(Capabilities.ArtifactDefinition, definition);
+};

package/src/capabilities/index.ts

@@ -4,5 +4,6 @@
 
 import { lazy } from '@dxos/app-framework';
 
+export const Artifact = lazy(() => import('./artifact'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -2,17 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Chess } from 'chess.js';
+
 import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
 import { create } from '@dxos/live-object';
 
-import { ChessAction, GameType } from '../types';
+import { ChessAction, ChessType } from '../types';
 
 export default () =>
   contributes(
     Capabilities.IntentResolver,
-    createResolver(ChessAction.Create, ({ name }) => ({
-      data: {
-        object: create(GameType, { name }),
+    createResolver({
+      intent: ChessAction.Create,
+      resolve: ({ name, fen }) => {
+        const pgn = fen ? new Chess(fen).pgn() : undefined;
+        return {
+          data: {
+            object: create(ChessType, { name, fen, pgn }),
+          },
+        };
       },
-    })),
+    }),
   );

package/src/capabilities/react-surface.tsx

@@ -5,18 +5,25 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
 
 import { ChessContainer } from '../components';
+import { ChessComponent } from '../components/ChessComponent';
 import { CHESS_PLUGIN } from '../meta';
-import { isObject, type GameType } from '../types';
+import { ChessType, isObject } from '../types';
 
 export default () =>
-  contributes(
-    Capabilities.ReactSurface,
+  contributes(Capabilities.ReactSurface, [
     createSurface({
       id: CHESS_PLUGIN,
       role: ['article', 'section'],
-      filter: (data): data is { subject: GameType } => isObject(data.subject),
+      filter: (data): data is { subject: ChessType } => isObject(data.subject),
       component: ({ data, role }) => <ChessContainer game={data.subject} role={role} />,
     }),
-  );
+    createSurface({
+      id: 'plugin-chess',
+      role: 'canvas-node',
+      filter: (data): data is any => isInstanceOf(ChessType, data),
+      component: ({ data }) => <ChessComponent game={data} />,
+    }),
+  ]);

package/src/components/ChessComponent.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { getSpace } from '@dxos/react-client/echo';
+import { ChessModel, Board, Chessboard, type BoardRootProps } from '@dxos/react-ui-gameboard';
+
+import { type ChessType } from '../types';
+
+export const ChessComponent = ({ game }: { game: ChessType }) => {
+  const model = useMemo(() => new ChessModel(), []);
+  useEffect(() => {
+    if (!model || game.pgn !== model?.game.pgn()) {
+      const chess = new Chess();
+      if (game.pgn) {
+        chess.loadPgn(game.pgn);
+      }
+
+      model.initialize(chess.fen());
+    }
+  }, [game.pgn]);
+
+  const space = getSpace(game);
+  if (!space) {
+    return null;
+  }
+
+  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>(
+    (move) => {
+      if (model.makeMove(move)) {
+        game.pgn = model.game.pgn();
+        return true;
+      }
+
+      return false;
+    },
+    [model],
+  );
+
+  return (
+    <Board.Root model={model} onDrop={handleDrop}>
+      <Chessboard />
+    </Board.Root>
+  );
+};

package/src/components/ChessContainer.tsx

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ComponentProps } from 'react';
+import React from 'react';
 
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { Chess } from './Chess';
+import { ChessComponent } from './ChessComponent';
+import { PlayerSelector } from './PlayerSelector';
+import { type ChessType } from '../types';
 
-const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game'> & { role?: string }) => {
+const ChessContainer = ({ game }: { game: ChessType; role?: string }) => {
   const space = getSpace(game);
   if (!space) {
     return null;
@@ -17,7 +19,15 @@ const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game
 
   return (
     <StackItem.Content toolbar={false}>
-      <Chess game={game} space={space} playerSelector={role === 'article'} />
+      <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
+        <div />
+
+        <div className='flex m-4 overflow-hidden'>
+          <ChessComponent game={game} />
+        </div>
+
+        <PlayerSelector space={space} game={game} />
+      </div>
     </StackItem.Content>
   );
 };

package/src/components/ChessPanel.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowURightDown, Circle } from '@phosphor-icons/react';
+import { type Color } from 'chess.js';
+import React, { type FC } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type ChessModel } from '@dxos/react-ui-gameboard';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+export type ChessPanelProps = ThemedClassName<{
+  model: ChessModel;
+  orientation?: Color;
+  onFlip?: () => void;
+}>;
+
+export const ChessPanel: FC<ChessPanelProps> = ({ classNames, model, orientation = 'w', onFlip }) => {
+  const game = model.game;
+  const history = game.history();
+  const label = game.isGameOver()
+    ? game.isCheckmate()
+      ? 'CHECKMATE'
+      : game.isStalemate()
+        ? 'STALEMATE'
+        : 'DRAW'
+    : game.isCheck()
+      ? 'CHECK'
+      : history.length
+        ? `Move ${history.length}`
+        : '';
+
+  const Player = ({ color }: { color: Color }) => {
+    const turn = color === game.turn();
+
+    return (
+      <div className='flex items-center'>
+        <Circle
+          className={mx(getSize(4), turn && (game.isCheckmate() ? 'text-red-500' : 'text-green-500'))}
+          weight={turn ? 'fill' : 'thin'}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className={mx('flex flex-col', classNames)}>
+      <div className='flex items-center justify-between pl-2 pr-2 border-b' style={{ height: 32 }}>
+        <Player color={orientation === 'w' ? 'b' : 'w'} />
+        {onFlip && (
+          <button onClick={onFlip}>
+            <ArrowURightDown weight='thin' className={getSize(6)} />
+          </button>
+        )}
+      </div>
+
+      <div className='flex flex-col justify-center pl-2 font-thin' style={{ height: 40 }}>
+        {label}
+      </div>
+
+      <div className='flex items-center justify-between pl-2 pr-2 border-t' style={{ height: 32 }}>
+        <Player color={orientation} />
+      </div>
+    </div>
+  );
+};

package/src/components/Chessboard.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useMemo } from 'react';
+
+import { Board, Chessboard, ChessModel } from '@dxos/react-ui-gameboard';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ChessPanel } from './ChessPanel';
+
+const Render = () => {
+  const model = useMemo(() => new ChessModel(), []);
+
+  return (
+    <div className='flex grow mx-8 gap-8 items-center overflow-hidden'>
+      <Board.Root model={model} onDrop={(move) => model.makeMove(move)}>
+        <Chessboard />
+      </Board.Root>
+      <ChessPanel model={model} classNames='w-[200px]' />
+    </div>
+  );
+};
+
+const meta: Meta<typeof Chessboard> = {
+  title: 'plugins/plugin-chess/Chessboard',
+  component: Chessboard,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+type Story = StoryObj<typeof Chessboard>;
+
+export default meta;
+
+export const Default: Story = {};

package/src/components/{Chess.tsx → PlayerSelector.tsx}

@@ -3,63 +3,16 @@
 //
 
 import { CrownCross } from '@phosphor-icons/react';
-import { Chess as ChessJs } from 'chess.js';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { generateName } from '@dxos/display-name';
-import { invariant } from '@dxos/invariant';
 import { useMembers, type Space, type SpaceMember } from '@dxos/react-client/echo';
 import { Input, Select, useThemeContext } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { Chessboard, type ChessModel, type ChessMove } from './Chessboard';
-import { type GameType } from '../types';
+import { type ChessType } from '../types';
 
-const useChessModel = (game: GameType) => {
-  const [model, setModel] = useState<ChessModel>();
-
-  useEffect(() => {
-    if (!model || game.pgn !== model?.chess.pgn()) {
-      const chess = new ChessJs();
-      if (game.pgn) {
-        chess.loadPgn(game.pgn);
-      }
-
-      setModel({ chess });
-    }
-  }, [game.pgn]);
-
-  const handleUpdate = (move: ChessMove) => {
-    invariant(model);
-    if (model.chess.move(move)) {
-      game!.pgn = model.chess.pgn();
-      setModel({ ...model });
-    }
-  };
-
-  return { model, handleUpdate };
-};
-
-export const Chess = ({ space, game, playerSelector }: { space: Space; game: GameType; playerSelector?: boolean }) => {
-  const { model, handleUpdate } = useChessModel(game);
-  if (!model) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
-      <div />
-      <div className='flex grow justify-center overflow-hidden'>
-        <div className='flex grow max-w-[600px] items-center overflow-hidden'>
-          <Chessboard model={model} onUpdate={handleUpdate} />
-        </div>
-      </div>
-      {playerSelector && <PlayerSelector game={game} space={space} />}
-    </div>
-  );
-};
-
-const PlayerSelector = ({ game, space }: { game: GameType; space: Space }) => {
+export const PlayerSelector = ({ space, game }: { space: Space; game: ChessType }) => {
   const members = useMembers(space.key);
 
   return (

package/src/components/index.ts

@@ -4,7 +4,6 @@
 
 import { lazy } from 'react';
 
-export * from './Chess';
-export * from './Chessboard';
+export * from './ChessComponent';
 
 export const ChessContainer = lazy(() => import('./ChessContainer'));

package/src/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './capabilities';
 export * from './components';
 export * from './meta';
 

package/src/meta.ts

@@ -9,7 +9,9 @@ export const CHESS_PLUGIN = 'dxos.org/plugin/chess';
 export const meta = {
   id: CHESS_PLUGIN,
   name: 'Chess',
-  description: 'Play chess.',
+  description:
+    'Chess is a simple plugin which allows you to render an interactive chessboard inside of a plank. This chessboard can be used for collaborative chess games, or for practice experiments with the LLM. ',
   icon: 'ph--shield-chevron--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-chess',
+  screenshots: ['https://dxos.network/plugin-details-chess-dark.png'],
 } satisfies PluginMeta;

package/src/translations.ts

@@ -3,12 +3,12 @@
 //
 
 import { CHESS_PLUGIN } from './meta';
-import { GameType } from './types';
+import { ChessType } from './types';
 
 export default [
   {
     'en-US': {
-      [GameType.typename]: {
+      [ChessType.typename]: {
         'typename label': 'Game',
       },
       [CHESS_PLUGIN]: {

package/src/types/schema.ts

@@ -14,13 +14,15 @@ export const MoveSchema = S.mutable(
   ),
 );
 
-export class GameType extends TypedObject({ typename: 'dxos.org/type/Chess', version: '0.1.0' })(
+export class ChessType extends TypedObject({ typename: 'dxos.org/type/Chess', version: '0.1.0' })(
   {
     name: S.optional(S.String),
     playerWhite: S.String,
     playerBlack: S.String,
     moves: S.mutable(S.Array(S.String)),
+    // TODO(wittjosiah): Remove. Redundant with moves.
     pgn: S.String,
+    fen: S.String,
   },
   { partial: true },
 ) {}

package/src/types/types.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { S } from '@dxos/echo-schema';
+import { isInstanceOf, S } from '@dxos/echo-schema';
 import { isReactiveObject } from '@dxos/live-object';
 
-import { GameType } from './schema';
+import { ChessType } from './schema';
 import { CHESS_PLUGIN } from '../meta';
 
 export namespace ChessAction {
@@ -14,13 +14,14 @@ export namespace ChessAction {
   export class Create extends S.TaggedClass<Create>()(`${CHESS_ACTION}/create`, {
     input: S.Struct({
       name: S.optional(S.String),
+      fen: S.optional(S.String),
     }),
     output: S.Struct({
-      object: GameType,
+      object: ChessType,
     }),
   }) {}
 }
 
-export const isObject = (object: unknown): object is GameType => {
-  return isReactiveObject(object) && object instanceof GameType;
+export const isObject = (object: unknown): object is typeof ChessType => {
+  return isReactiveObject(object) && isInstanceOf(ChessType, object);
 };

package/dist/lib/browser/ChessContainer-EG4RG2MG.mjs

@@ -1,26 +0,0 @@
-import {
-  Chess
-} from "./chunk-6NAJOKLY.mjs";
-
-// packages/plugins/plugin-chess/src/components/ChessContainer.tsx
-import React from "react";
-import { getSpace } from "@dxos/react-client/echo";
-import { StackItem } from "@dxos/react-ui-stack";
-var ChessContainer = ({ game, role }) => {
-  const space = getSpace(game);
-  if (!space) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(StackItem.Content, {
-    toolbar: false
-  }, /* @__PURE__ */ React.createElement(Chess, {
-    game,
-    space,
-    playerSelector: role === "article"
-  }));
-};
-var ChessContainer_default = ChessContainer;
-export {
-  ChessContainer_default as default
-};
-//# sourceMappingURL=ChessContainer-EG4RG2MG.mjs.map

package/dist/lib/browser/ChessContainer-EG4RG2MG.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ChessContainer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentProps } from 'react';\n\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { Chess } from './Chess';\n\nconst ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game'> & { role?: string }) => {\n  const space = getSpace(game);\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content toolbar={false}>\n      <Chess game={game} space={space} playerSelector={role === 'article'} />\n    </StackItem.Content>\n  );\n};\n\nexport default ChessContainer;\n"],
-  "mappings": ";;;;;AAIA,OAAOA,WAAoC;AAE3C,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;AAI1B,IAAMC,iBAAiB,CAAC,EAAEC,MAAMC,KAAI,MAAkE;AACpG,QAAMC,QAAQC,SAASH,IAAAA;AACvB,MAAI,CAACE,OAAO;AACV,WAAO;EACT;AAEA,SACE,sBAAA,cAACE,UAAUC,SAAO;IAACC,SAAS;KAC1B,sBAAA,cAACC,OAAAA;IAAMP;IAAYE;IAAcM,gBAAgBP,SAAS;;AAGhE;AAEA,IAAA,yBAAeF;",
-  "names": ["React", "getSpace", "StackItem", "ChessContainer", "game", "role", "space", "getSpace", "StackItem", "Content", "toolbar", "Chess", "playerSelector"]
-}