@dxos/plugin-chess 0.7.4 → 0.7.5-labs.071a3e2

package/dist/types/src/types/schema.d.ts

@@ -8,20 +8,24 @@ export declare const MoveSchema: S.mutable<S.SchemaClass<{
     readonly target?: string | undefined;
     readonly piece?: string | undefined;
 }, never>>;
-declare const GameType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    playerWhite?: string | undefined;
-    playerBlack?: string | undefined;
-    moves?: string[] | undefined;
-    pgn?: string | undefined;
-} & {
-    id: string;
-}, S.Struct.Encoded<{
+declare const ChessType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectFields<{
+    name: S.optional<typeof S.String>;
     playerWhite: typeof S.String;
     playerBlack: typeof S.String;
     moves: S.mutable<S.Array$<typeof S.String>>;
     pgn: typeof S.String;
+    fen: typeof S.String;
+}, {
+    partial: true;
+}>, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
+    playerWhite: typeof S.String;
+    playerBlack: typeof S.String;
+    moves: S.mutable<S.Array$<typeof S.String>>;
+    pgn: typeof S.String;
+    fen: typeof S.String;
 }>>;
-export declare class GameType extends GameType_base {
+export declare class ChessType extends ChessType_base {
 }
 export {};
 //# sourceMappingURL=schema.d.ts.map

package/dist/types/src/types/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;;;UAQtB,CAAC;;;;;;;;;;;;;;AAEF,qBAAa,QAAS,SAAQ,aAQ7B;CAAG"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;;;UAQtB,CAAC;;;;;;;;;;;;;;;;;;AAEF,qBAAa,SAAU,SAAQ,cAW9B;CAAG"}

package/dist/types/src/types/types.d.ts

@@ -1,10 +1,20 @@
-import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-space';
-import { GameType } from './schema';
-export declare enum ChessAction {
-    CREATE = "dxos.org/plugin/chess/action/create"
+import { S } from '@dxos/echo-schema';
+import { ChessType } from './schema';
+export declare namespace ChessAction {
+    const Create_base: S.TaggedClass<Create, "dxos.org/plugin/chess/action/create", {
+        readonly _tag: S.tag<"dxos.org/plugin/chess/action/create">;
+    } & {
+        input: S.Struct<{
+            name: S.optional<typeof S.String>;
+            fen: S.optional<typeof S.String>;
+        }>;
+        output: S.Struct<{
+            object: typeof ChessType;
+        }>;
+    }>;
+    export class Create extends Create_base {
+    }
+    export {};
 }
-export type ChessProvides = {};
-export type ChessPluginProvides = SurfaceProvides & IntentResolverProvides & GraphBuilderProvides & MetadataRecordsProvides & TranslationsProvides & SchemaProvides;
-export declare const isObject: (object: unknown) => object is GameType;
+export declare const isObject: (object: unknown) => object is typeof ChessType;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKpC,oBAAY,WAAW;IACrB,MAAM,wCAA2B;CAClC;AAED,MAAM,MAAM,aAAa,GAAG,EAAE,CAAC;AAE/B,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,CAAC;AAEjB,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,QAEpD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,yBAAiB,WAAW,CAAC;;;;;;;;;;;;IAG3B,MAAM,OAAO,MAAO,SAAQ,WAQ1B;KAAG;;CACN;AAED,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,OAAO,SAE3D,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,11 +13,6 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -27,9 +22,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -42,19 +34,22 @@
   "dependencies": {
     "@effect/schema": "^0.75.5",
     "@preact/signals-core": "^1.6.0",
-    "chess.js": "^1.0.0-beta.8",
-    "react-chessboard": "^4.7.1",
-    "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.4",
-    "@dxos/async": "0.7.4",
-    "@dxos/invariant": "0.7.4",
-    "@dxos/display-name": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/plugin-client": "0.7.4",
-    "@dxos/plugin-graph": "0.7.4",
-    "@dxos/live-object": "0.7.4",
-    "@dxos/react-client": "0.7.4",
-    "@dxos/plugin-space": "0.7.4"
+    "chess.js": "^1.0.0",
+    "effect": "^3.12.3",
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/artifact": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/display-name": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/assistant": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-client": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-graph": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-space": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-gameboard": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-stack": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -63,16 +58,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -2,98 +2,52 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { NavigationAction, parseIntentPlugin, type PluginDefinition, resolvePlugin } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
-import { SpaceAction } from '@dxos/plugin-space';
-
-import ChessContainer from './components/ChessContainer';
-import meta, { CHESS_PLUGIN } from './meta';
+import { Artifact, IntentResolver, ReactSurface } from './capabilities';
+import { CHESS_PLUGIN, meta } from './meta';
 import translations from './translations';
-import { ChessAction, type ChessPluginProvides, GameType, isObject } from './types';
+import { ChessAction, ChessType } from './types';
 
-export const ChessPlugin = (): PluginDefinition<ChessPluginProvides> => {
-  return {
-    meta,
-    provides: {
-      metadata: {
-        records: {
-          [GameType.typename]: {
-            createObject: ChessAction.CREATE,
+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: ChessType.typename,
+          metadata: {
+            createObject: (props: { name?: string }) => createIntent(ChessAction.Create, props),
             placeholder: ['game title placeholder', { ns: CHESS_PLUGIN }],
             icon: 'ph--shield-chevron--regular',
           },
-        },
-      },
-      echo: {
-        schema: [GameType],
-      },
-      graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: ChessAction.CREATE,
-            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
-            actions: ({ node }) => {
-              const id = node.id.split('/').at(-1);
-              const [spaceId, objectId] = id?.split(':') ?? [];
-              const space = client.spaces.get().find((space) => space.id === spaceId);
-              const object = objectId && space?.db.getObjectById(objectId);
-              const target = objectId ? object : space;
-              if (!target) {
-                return;
-              }
-
-              return [
-                {
-                  id: `${CHESS_PLUGIN}/create/${node.id}`,
-                  data: async () => {
-                    await dispatch([
-                      { plugin: CHESS_PLUGIN, action: ChessAction.CREATE },
-                      { action: SpaceAction.ADD_OBJECT, data: { target } },
-                      { action: NavigationAction.OPEN },
-                    ]);
-                  },
-                  properties: {
-                    label: ['create game label', { ns: CHESS_PLUGIN }],
-                    icon: 'ph--shield-chevron--regular',
-                    testId: 'chessPlugin.createObject',
-                  },
-                },
-              ];
-            },
-          });
-        },
-      },
-      translations,
-      surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'article':
-            case 'section':
-              return isObject(data.object) ? <ChessContainer game={data.object} role={role} /> : null;
-            default:
-              return null;
-          }
-        },
-      },
-      intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case ChessAction.CREATE: {
-              return { data: create(GameType, {}) };
-            }
-          }
-        },
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => contributes(ClientCapabilities.Schema, [ChessType]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+    defineModule({
+      id: `${meta.id}/module/artifact`,
+      activatesOn: Events.Startup,
+      activate: Artifact,
+    }),
+  ]);

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

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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

@@ -0,0 +1,26 @@
+//
+// 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, ChessType } from '../types';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    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

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { ChessType, isObject } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: CHESS_PLUGIN,
+      role: ['article', 'section'],
+      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,22 +2,33 @@
 // 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;
   }
 
   return (
-    <div role='none' className='flex flex-col row-span-2 is-full overflow-hidden'>
-      <Chess game={game} space={space} playerSelector={role === 'article'} />
-    </div>
+    <StackItem.Content toolbar={false}>
+      <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>
+  );
+};