[iFrame] Add the url order tracker example to the iframe catalog

[josemontespg]

Summary

Adds url-order-tracker.json (46_url-order-tracker) to the iframe catalog examples and wires it into the Lit, Angular, and React explorer apps: a WebAppFrameUrl app that lists the orders bound from /orders, writes a status summary back to /summary for a sibling Text, dispatches order_delivered when an order status turns to delivered, and dispatches order_selected when one is clicked.

Changes

• catalogs/iframe/examples/url-order-tracker.json & typescript/catalogs/iframe/tests/fixtures/apps/order_tracker.html: the example and the external app HTML fixture.
• typescript/catalogs/iframe/tests/examples/url_order_tracker.test.ts, catalog.test.ts, README.md, CHANGELOG.md: iframe catalog example registration and Karma test.
• renderers/{lit,angular,react}/a2ui_explorer: serves /a2ui-fixtures/apps/order_tracker.html, rewrites placeholder URLs in 46_url-order-tracker to the local origin, and adds Karma integration tests (46_url-order-tracker.{spec.ts,test.tsx}).

Verification

• yarn --cwd typescript/catalogs/iframe test: 244 Karma specs pass.
• yarn --cwd renderers/{lit,react}/a2ui_explorer test:karma: pass.
• python3 specification/scripts/validate.py and ./scripts/fix_format.sh --check pass.

Related to #3157

[gemini-code-assist]

Code Review

This pull request introduces a new catalog example, url-order-tracker.json, which demonstrates a WebAppFrameUrl order tracker. It includes the corresponding fixture application order_tracker.html and comprehensive end-to-end tests to validate its functionality. The feedback suggests two robustness improvements in the fixture application: first, validating the subpath index in applyOrdersUpdate to avoid state corruption from invalid index parsing, and second, adding defensive checks for null or undefined elements in the orders array to prevent runtime errors.

[gemini-code-assist]

In applyOrdersUpdate, parsing the index using Number(msg.subpath.split('/')[1]) can lead to unexpected behavior if the subpath is malformed or empty (e.g., Number("") evaluates to 0, and Number(undefined) evaluates to NaN). In JavaScript, calling splice(NaN, 1) will default to removing the first element of the array (index 0), which can corrupt the state.

We should defensively validate that the extracted index is a valid non-negative integer string before parsing and using it.

Suggested change

	// The host diffs the array and sends each changed order as a subpath update such as "/1".
	var index = Number(msg.subpath.split('/')[1]);
	if (msg.value === undefined) {
	orders.splice(index, 1);
	} else {
	orders[index] = msg.value;
	}
	// The host diffs the array and sends each changed order as a subpath update such as "/1".
	var parts = msg.subpath.split('/');
	var indexStr = parts[1];
	if (!/^\d+$/.test(indexStr)) {
	return;
	}
	var index = Number(indexStr);
	if (msg.value === undefined) {
	orders.splice(index, 1);
	} else {
	orders[index] = msg.value;
	}

[gemini-code-assist]

To ensure robustness and adhere to defensive programming principles, we should guard against null or undefined elements in the orders array. If an element in orders is null or undefined, accessing properties like order.status or order.id will throw a runtime TypeError and crash the application loop inside the iframe.

Let's add nullish/falsy checks for order in summarize, render, and ordersChanged.

      function summarize() {
        return STATUSES.map(function (status) {
          var count = orders.filter(function (order) {
            return order && order.status === status;
          }).length;
          return count ? count + ' ' + status : '';
        })
          .filter(Boolean)
          .join(', ');
      }

      function render() {
        var list = document.getElementById('orders');
        list.textContent = '';
        orders.forEach(function (order) {
          if (!order) return;
          var button = document.createElement('button');
          button.textContent = order.id + ' - ' + order.status;
          button.addEventListener('click', function () {
            send({type: 'a2ui_action', action: 'order_selected', data: {orderId: order.id}});
          });
          var item = document.createElement('li');
          item.appendChild(button);
          list.appendChild(item);
        });
      }

      function ordersChanged() {
        orders.forEach(function (order) {
          if (!order) return;
          var lastStatus = lastStatusById[order.id];
          if (order.status === 'delivered' && lastStatus && lastStatus !== 'delivered') {
            send({type: 'a2ui_action', action: 'order_delivered', data: {orderId: order.id}});
          }
        });
        lastStatusById = {};
        orders.forEach(function (order) {
          if (order) {
            lastStatusById[order.id] = order.status;
          }
        });
        render();
        // "summary" is listed in mutableData, so the host writes it back to /summary.
        send({type: 'a2ui_data_model_change', key: 'summary', value: summarize()});
        send({type: 'a2ui_size_changed', height: document.body.scrollHeight + 32});
      }