feat(ui): modified-piece indicator on board

packages/chess/src/ui/Board.tsx

@@ -13,6 +13,7 @@ import {
   type SquareOverlayComponent,
 } from './preset-overlays';
 import { VisualEffectLayer } from './VisualEffectLayer';
+import { ModifiedPieceIndicator } from './ModifiedPieceIndicator.js';
 import '../presets/ui-overlays-index';
 
 interface BoardProps {
@@ -327,28 +328,33 @@ export function Board({ facts, legalMoves, onMove, turn, myColor, lastMove, chec
            * FLIP clean.
            */}
           {piece && (
-            <div
+            <>
-              key={piece.id}
+              <div
-              className="absolute inset-0 z-20"
+                key={piece.id}
-              onMouseEnter={() => onPieceHover?.(piece.id)}
+                className="absolute inset-0 z-20"
-              onMouseLeave={() => onPieceHover?.(null)}
+                onMouseEnter={() => onPieceHover?.(piece.id)}
-              onClick={() => onPieceClick?.(piece.id)}
+                onMouseLeave={() => onPieceHover?.(null)}
-            >
+                onClick={() => onPieceClick?.(piece.id)}
-              <Piece
+              >
-                color={piece.color}
+                <Piece
-                type={piece.type}
+                  color={piece.color}
-                pieceId={piece.id}
+                  type={piece.type}
-                square={sq}
+                  pieceId={piece.id}
-                isDraggable={
+                  square={sq}
-                  piece.color === turn &&
+                  isDraggable={
-                  (myColor === null || myColor === undefined || piece.color === myColor)
+                    piece.color === turn &&
-                }
+                    (myColor === null || myColor === undefined || piece.color === myColor)
-                overlays={overlays}
+                  }
-                pieceFacts={factsById.get(piece.id) ?? []}
+                  overlays={overlays}
-                onDragStart={handleDragStart}
+                  pieceFacts={factsById.get(piece.id) ?? []}
-                onDragEnd={handleDragEnd}
+                  onDragStart={handleDragStart}
-              />
+                  onDragEnd={handleDragEnd}
-            </div>
+                />
+              </div>
+              {engine !== undefined && (
+                <ModifiedPieceIndicator pieceId={piece.id} engine={engine} />
+              )}
+            </>
           )}
           
           {/* Rank/File labels (optional but helpful for debug) */}

packages/chess/src/ui/ModifiedPieceIndicator.tsx

@@ -0,0 +1,25 @@
+import { MODIFIER_REGISTRY } from '../modifiers/registry';
+import type { ChessEngine } from '../engine';
+import type { EntityId } from '@paratype/rete';
+
+interface Props {
+  pieceId: number;
+  engine: ChessEngine;
+}
+
+export function ModifiedPieceIndicator({ pieceId, engine }: Props) {
+  const isModified = MODIFIER_REGISTRY.list().some((descriptor) => {
+    return engine.session.get(pieceId as unknown as EntityId, descriptor.attrName) !== undefined;
+  });
+
+  if (!isModified) {
+    return null;
+  }
+
+  return (
+    <div
+      data-testid={`modifier-indicator-${pieceId}`}
+      className="absolute top-1 right-1 w-2 h-2 bg-fuchsia-500 rounded-full ring-1 ring-white shadow-sm pointer-events-none z-30"
+    />
+  );
+}