// Client A
const { tasks, addTask } = useSystem<TaskManager>({ id: 'project-123' });

// Client B - same instance ID
const { tasks, addTask } = useSystem<TaskManager>({ id: 'project-123' });

// Both see the same tasks. When A adds one, B sees it immediately.

export default class CollaborativeDoc extends AgenticSystem {
  @field content = '';
  @field activeUsers: string[] = [];

  onConnect(connection: Connection) {
    const userId = connection.metadata?.userId;
    if (userId) {
      this.activeUsers.push(userId);
    }
  }

  onDisconnect(connection: Connection) {
    const userId = connection.metadata?.userId;
    this.activeUsers = this.activeUsers.filter(id => id !== userId);
  }
}

function ActiveUsers() {
  const { activeUsers } = useSystem<CollaborativeDoc>({ id: 'doc-123' });

  return (
    <div className="avatars">
      {activeUsers.map(userId => <Avatar key={userId} userId={userId} />)}
    </div>
  );
}

// Client A at T=100ms
actions.setTitle('Version A');

// Client B at T=101ms
actions.setTitle('Version B');

// Result: 'Version B' (executed second)

@field cursors: Record<string, { position: number; userId: string }> = {};

@action()
async updateCursor(userId: string, position: number) {
  this.cursors[userId] = { position, userId };
}

onDisconnect(connection: Connection) {
  delete this.cursors[connection.metadata?.userId];
}

@field currentTurn: string | null = null;
@field turnOrder: string[] = [];

@action()
async takeTurn(userId: string, move: Move) {
  if (this.currentTurn !== userId) {
    throw new Error('Not your turn');
  }
  await this.processMove(move);
  const nextIndex = (this.turnOrder.indexOf(userId) + 1) % this.turnOrder.length;
  this.currentTurn = this.turnOrder[nextIndex];
}