js/apps/account-ui/src/applications/Applications.tsx:66

• localeCompare will throw if (a.clientName || a.clientId) (or the RHS) is undefined (e.g., if an API response is missing both). To make this robust, coerce both sort keys to strings with a safe fallback (e.g., a.clientName ?? a.clientId ?? "") before calling localeCompare.

    (signal) => getApplications({ signal, context }),
    (clients) =>
      setApplications(
        [...clients]
          .sort((a, b) =>
            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
            ),
          )
          .map((c) => ({ ...c, open: false })),
      ),
    [key],
  );

js/apps/account-ui/src/applications/Applications.tsx:66

• The indentation on these newly added lines appears to include non-standard whitespace (e.g., non-breaking spaces). This can create noisy diffs and potentially trip formatting/lint tooling. Please retype/reformat this block using the repo’s standard indentation (and run the formatter, if applicable) so it uses regular spaces.

    (signal) => getApplications({ signal, context }),
    (clients) =>
      setApplications(
        [...clients]
          .sort((a, b) =>
            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
            ),
          )
          .map((c) => ({ ...c, open: false })),
      ),
    [key],
  );

js/apps/account-ui/src/applications/Applications.tsx:66

• These lines appear to contain non-standard indentation characters (e.g., non‑breaking spaces). This can cause formatting/lint churn and inconsistent diffs across editors/CI. Re-indent with regular spaces and run the repo formatter (e.g., Prettier/ESLint autofix) to normalize whitespace.

    (signal) => getApplications({ signal, context }),
    (clients) =>
      setApplications(
        [...clients]
          .sort((a, b) =>
            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
            ),
          )
          .map((c) => ({ ...c, open: false })),
      ),
    [key],
  );

js/apps/account-ui/test/applications.spec.ts:44

• The UI sort now falls back to clientId when clientName is missing, but the test data only covers clientName sorting. Add at least one application without clientName (or with an empty string) and assert it is sorted by clientId to cover the fallback path.

  test("sorts applications alphabetically", async ({ page }) => {
    await using testBed = await createTestBed();

    await page.route("**/applications", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([
          {
            clientId: "zebra-client",
            clientName: "Zebra Application",
          },
          {
            clientId: "alpha-client",
            clientName: "Alpha Application",
          },
          {
            clientId: "beta-client",
            clientName: "Beta Application",
          },
        ]),
      });
    });

js/apps/account-ui/src/applications/Applications.tsx:62

• Optional: localeCompare without explicit options can produce case-sensitive or locale-dependent ordering that may surprise users (e.g., mixed case, diacritics). If the intended behavior is a consistent, case-insensitive alphabetical sort, consider passing explicit localeCompare options (e.g., { sensitivity: \"base\" }) or using the app’s active locale.

          .sort((a, b) =>
            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
            ),
          )

js/apps/account-ui/src/applications/Applications.tsx:64

• The comparator uses the raw clientName, but the list renders label(t, ...). Bundle-valued names such as ${client_account-console} are therefore sorted under $ rather than their localized display text, so the visible list is not alphabetical; compare the resolved labels instead.

            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
              locale,

js/apps/account-ui/src/applications/Applications.tsx:66

• When two clients have the same displayed name, this comparator returns 0 and preserves their nondeterministic order from the server's HashSet, which conflicts with the issue's predictable-order goal. Add a stable secondary comparison such as clientId.

This issue also appears on line 62 of the same file.

          .sort((a, b) =>
            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,
              locale,
            ),
          )

js/apps/account-ui/src/applications/Applications.tsx:60

• The sort key is not always the name shown to the user: label() translates bundle-backed client names such as ${client_account-console}, while this compares the raw placeholder. Those built-in clients will therefore sort under $ instead of their localized visible name; compare the label(t, ...) results used by the list rendering.

            (a.clientName || a.clientId).localeCompare(
              b.clientName || b.clientId,