trycua--cua/libs/cua-bench/datasets/cua-bench-basic/typing-input/gui/index.html

<main class="flex flex-col h-full w-full p-6" role="main" aria-label="Text input task interface">
  <div class="max-w-md mx-auto w-full">
    <h1 class="text-xl font-semibold text-gray-900 mb-4">Type into the field</h1>

    <div class="flex flex-col gap-2">
      <label for="text-input" class="text-sm font-medium text-gray-700"> {{FIELD_LABEL}} </label>
      <input
        type="text"
        id="text-input"
        class="px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
        placeholder="Type here..."
        aria-label="Text input field"
      />
    </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>
        Type the required text into the input field above
      </p>
    </div>
  </div>

  <script>
    // Store input value globally for evaluation
    window.__inputValue = null;

    const inputField = document.getElementById('text-input');

    // Update the global value whenever the input changes
    inputField.addEventListener('input', function () {
      window.__inputValue = this.value;
    });

    // Also capture on blur in case the agent doesn't trigger input event
    inputField.addEventListener('blur', function () {
      window.__inputValue = this.value;
    });
  </script>
</main>