Default sort order is deterministic and explicitly labeled

Non-deterministic or unlabeled sort order is a functional suitability failure under ISO 25010:2011 — users cannot form a mental model of what they're looking at. A directory that silently returns results in insertion order, or randomizes on each page load, makes it impossible to compare two sessions or share a result. In practice, unnamed sort states generate support requests ("why did the top result change?") and break bookmark workflows entirely. The absence of a sort label also means users cannot tell whether they're browsing by relevance, recency, or rating — so they can't trust any individual result's position.

Expose a labeled sort control in components/SortControl.tsx and persist the active sort in the URL via ?sort=rating.

export function SortControl({ currentSort, onChange }) {
  return (
    <div>
      <label htmlFor="sort">Sort by:</label>
      <select
        id="sort"
        value={currentSort}
        onChange={e => onChange(e.target.value)}
      >
        <option value="relevance">Relevance</option>
        <option value="rating">Rating (highest)</option>
        <option value="newest">Newest</option>
        <option value="distance">Distance (nearest)</option>
      </select>
    </div>
  )
}

In the API handler, always include an explicit orderBy clause — never rely on database insertion order. Pair primary and secondary sort keys (e.g., rating DESC, createdAt DESC) to guarantee stable ordering across pages.

• ID: directory-search-discovery.results-sorting.default-sort-labeled

• Severity: high

• What to look for: Enumerate all relevant files and Load the directory with no filters or search terms applied. Observe the results. Check whether the sort order is consistent (e.g., always sorted by relevance, rating, or date added). Look for a sort control (dropdown, buttons, or select) and verify it displays the currently selected sort option. Check whether "Default" or the active sort method is clearly labeled.

• Pass criteria: No more than 0 violations are acceptable. Results are displayed in a consistent, predictable order. A sort control (dropdown or buttons) is visible and clearly labels the current sort method (e.g., "Sort by: Relevance" or "Sort by: Rating").

• Fail criteria: Results appear in random or non-deterministic order, or the sort control does not label the current sort method, or the results order changes unexpectedly between page reloads with the same filters.

• Skip (N/A) when: Search/results are not implemented or results are not sortable. Signal: no sort control found.

• Detail on fail: "No sort control visible. Results appear in undefined order (possibly random or insertion order)." or "Sort dropdown shows no current selection label. User doesn't know what sort is active."

• Remediation: Implement a clear sort control with labeled options:

  // components/SortControl.tsx
  export function SortControl({ currentSort, onChange }) {
    return (
      <div>
        <label htmlFor="sort">Sort by:</label>
        <select
          id="sort"
          value={currentSort}
          onChange={e => onChange(e.target.value)}
        >
          <option value="relevance">Relevance</option>
          <option value="rating">Rating (highest)</option>
          <option value="newest">Newest</option>
          <option value="distance">Distance (nearest)</option>
        </select>
      </div>
    )
  }
  

  Ensure the sort preference is persisted in the URL (e.g., ?sort=rating) and applied consistently.