trycua--cua/libs/cua-bench/datasets/cua-bench-basic/spreadsheet-cell/gui/index.html

<main
  class="flex flex-col h-full w-full p-4 overflow-auto"
  role="main"
  aria-label="Spreadsheet interface"
>
  <div class="max-w-4xl mx-auto w-full">
    <h1 class="text-xl font-semibold text-gray-900 mb-4">Spreadsheet</h1>

    <!-- Spreadsheet Grid -->
    <div class="border border-gray-300 rounded-lg overflow-hidden bg-white shadow">
      <!-- Header Row -->
      <div class="flex border-b border-gray-300 bg-gray-50">
        <div
          class="w-12 border-r border-gray-300 p-2 text-center text-sm font-medium text-gray-600"
        ></div>
        <div class="flex-1 grid grid-cols-5 gap-0">
          <div class="border-r border-gray-300 p-2 text-center text-sm font-semibold text-gray-700">
            A
          </div>
          <div class="border-r border-gray-300 p-2 text-center text-sm font-semibold text-gray-700">
            B
          </div>
          <div class="border-r border-gray-300 p-2 text-center text-sm font-semibold text-gray-700">
            C
          </div>
          <div class="border-r border-gray-300 p-2 text-center text-sm font-semibold text-gray-700">
            D
          </div>
          <div class="p-2 text-center text-sm font-semibold text-gray-700">E</div>
        </div>
      </div>

      <!-- Data Rows -->
      <div id="spreadsheet-rows">
        <!-- Rows will be generated by JavaScript -->
      </div>
    </div>

    <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
      <p class="text-sm text-blue-800">
        <iconify-icon icon="mdi:information" class="text-blue-600"></iconify-icon>
        Click a cell to select it, then type to enter data. Press Enter to confirm.
      </p>
    </div>
  </div>

  <script>
    // Store cell data globally for evaluation
    window.__cellData = {};

    const columns = ['A', 'B', 'C', 'D', 'E'];
    const rows = 10;

    // Generate spreadsheet rows
    const spreadsheetRows = document.getElementById('spreadsheet-rows');
    for (let row = 1; row <= rows; row++) {
      const rowDiv = document.createElement('div');
      rowDiv.className = 'flex border-b border-gray-300';

      // Row number
      const rowNumDiv = document.createElement('div');
      rowNumDiv.className =
        'w-12 border-r border-gray-300 p-2 text-center text-sm font-medium text-gray-600 bg-gray-50';
      rowNumDiv.textContent = row;
      rowDiv.appendChild(rowNumDiv);

      // Cells
      const cellsDiv = document.createElement('div');
      cellsDiv.className = 'flex-1 grid grid-cols-5 gap-0';

      columns.forEach((col, colIndex) => {
        const cellId = col + row;
        const cellDiv = document.createElement('div');
        cellDiv.className = 'border-r border-gray-300 last:border-r-0 relative';

        const cellInput = document.createElement('input');
        cellInput.type = 'text';
        cellInput.id = 'cell-' + cellId;
        cellInput.className =
          'w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:z-10 bg-transparent';
        cellInput.setAttribute('aria-label', 'Cell ' + cellId);
        cellInput.setAttribute('data-cell', cellId);

        // Handle cell editing
        cellInput.addEventListener('focus', function () {
          this.parentElement.classList.add('ring-2', 'ring-blue-500');
        });

        cellInput.addEventListener('blur', function () {
          this.parentElement.classList.remove('ring-2', 'ring-blue-500');
          // Save the value
          const cellId = this.getAttribute('data-cell');
          const value = this.value.trim();
          if (value) {
            window.__cellData[cellId] = value;
          } else {
            delete window.__cellData[cellId];
          }
        });

        cellInput.addEventListener('keydown', function (e) {
          if (e.key === 'Enter') {
            // Save the value and blur
            const cellId = this.getAttribute('data-cell');
            const value = this.value.trim();
            if (value) {
              window.__cellData[cellId] = value;
            }
            this.blur();
          }
        });

        // Update cell data on input
        cellInput.addEventListener('input', function () {
          const cellId = this.getAttribute('data-cell');
          const value = this.value.trim();
          if (value) {
            window.__cellData[cellId] = value;
          } else {
            delete window.__cellData[cellId];
          }
        });

        cellDiv.appendChild(cellInput);
        cellsDiv.appendChild(cellDiv);
      });

      rowDiv.appendChild(cellsDiv);
      spreadsheetRows.appendChild(rowDiv);
    }
  </script>
</main>