rollout-ui 0.10.0 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ce5665685cf17063621b6e2612fa89366cf8ec7e353322c8219b874c7d1823d
-  data.tar.gz: 2ad0fc635c83d3ae4f6cd54b78cc730a5fc32646538f54c6a07f3a1c17370db3
+  metadata.gz: 8fe93ad84dab349410b8d45fd548837b3c7057db163916ae51af5415f0b6a9bd
+  data.tar.gz: 6b451b50cc1e907a63e94976c103800f26fa6366705ed34e4a31d2faad585507
 SHA512:
-  metadata.gz: 9b4653f7bd4940e933f318fcb1d09530b636dbc405ecd44678dfb894e443429a24f4cedbb82c37f9110673adec99deb458796e1cb20b8fb4bb43667b505b548a
-  data.tar.gz: 5deb01d8c2c3dca6f6687535fb5f125273216ba3fab9afca3cd62326354d2b343a07f2e7e1d31308464a2a898c155716c35ee228867532ad1191e6ced840a9f6
+  metadata.gz: '09ad9b11897744854625b4654e7d2a5c543492ac945ad6b91e5359b1c6aad0bab6ba0927781588f4c8b3c16e221597f625cf9acc4ca1e6c208c260d20a6e6ee8'
+  data.tar.gz: 837fa191cde919c0a88f881cc31fe300311026acf7559410f3f23bdc9ffd27c5d6f9644955337d64019c96e2642343837569d8da31648706bdf7a80d411b9bbb

data/.github/workflows/release.yml

@@ -7,7 +7,8 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-latest
+    # setup-ruby has no build of the .ruby-version Ruby (3.4.7) for ubuntu-26.04.
+    runs-on: ubuntu-24.04
     permissions:
       contents: write
       id-token: write
@@ -37,7 +38,7 @@ jobs:
 
   github-release:
     needs: release
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-26.04
     permissions:
       contents: write
     steps:

data/.github/workflows/test.yml

@@ -5,12 +5,11 @@ on:
     branches:
       - master
   pull_request:
-    branches:
-      - master
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    # setup-ruby has no build of the .ruby-version Ruby (3.4.7) for ubuntu-26.04.
+    runs-on: ubuntu-24.04
     services:
       redis:
         image: redis:7-alpine

data/README.md

@@ -61,8 +61,9 @@ end
 ## Nickname user selector
 
 Configure **both** callbacks below to replace the user ID field with a searchable
-multi-select. Your application supplies the queries; the UI displays nicknames
-and Rollout stores user IDs. This example uses Rails and PostgreSQL:
+nickname picker alongside the enrolled-user list. Your application supplies the
+queries; the UI displays nicknames and Rollout stores user IDs. This example
+uses Rails and PostgreSQL:
 
 ```ruby
 Rollout::UI.configure do
@@ -107,9 +108,59 @@ CREATE INDEX CONCURRENTLY users_nickname_prefix_idx
 ```
 
 Check the query plan against your schema and collation. The selector supports
-keyboard navigation and preserves selections if a lookup fails. Without
-JavaScript, the ID field remains usable. Features with more than 150 selected
-users show only a count.
+keyboard navigation and preserves pending changes if a lookup fails. The
+enrolled count includes unresolved accounts, shown as `Unknown user` with their
+ID in a separate column, but excludes users enabled through groups or percentage.
+
+### Paginated enrollment editing
+
+Every feature shows a paginated enrollment list with **25 users per page**.
+Rows are ordered by user ID. Nicknames are
+looked up only for the visible page, independently of the bounded history lookup.
+There is no longer a 150-user enrollment editing cutoff.
+
+Remove/Undo and nickname additions are staged until **Update**. With JavaScript,
+switching enrollment pages leaves pending changes and unsaved description,
+groups, and percentage fields intact. A pending-changes callout below the table
+opens a **Review** popover listing additions and removals across all pages. Search marks
+already-enrolled users even when they are on another page. The heading counts
+stored enrollments; pending changes are reported separately until saved.
+
+The form submits additions and removals, not a replacement list from the visible
+page. Delta requests use `user_changes=1` and require a full-state
+`feature_version`; malformed markers and missing versions are rejected. After
+version validation, these deltas are applied to the full membership
+inside `with_feature`. Duplicate additions are idempotent; removals take
+precedence if an ID appears in both sets. Legacy full-list `users` submissions
+remain supported.
+
+Without JavaScript or nickname callbacks, add users using comma-separated IDs
+and check Remove for visible rows. **Update before following page links** to
+avoid discarding unsaved form changes. Enrollment pagination remains available
+when nickname lookup fails; unknown IDs are never silently dropped.
+
+## Concurrent edits
+
+Feature forms include a `feature_version` fingerprint of the editable state:
+percentage, groups, enrolled IDs, and description. Ordering of IDs and groups,
+timestamps, and unrelated metadata do not change the fingerprint. Distinct edits
+in the same second and changes made outside the UI are detected.
+
+Updates validate the submitted fingerprint inside `with_feature`, before changing
+state. A stale submission is rejected without saving state or history, and the
+UI redirects to the latest feature so the administrator can review and retry.
+Older non-delta forms without `feature_version` retain the `last_updated_at`
+timestamp check; that legacy check cannot distinguish same-second edits.
+
+Atomic conflict detection depends on the adapter's mutation guarantees. The
+ActiveRecord adapter locks existing feature rows during `with_feature`. The
+Redis adapter does not provide the equivalent lock or compare-and-set guarantee.
+
+Use uncached feature reads for the Rollout instance supplied to the admin UI.
+Process-local adapter caches can otherwise display an older enrolled list and
+form version after another worker saves. Normal feature evaluation can use a
+separate cached instance with the same group definitions. Feature responses send
+`Cache-Control: no-store`; this does not bypass an adapter's server-side cache.
 
 ## Logging
 
@@ -160,6 +211,18 @@ It uses the mount's authentication, caps results server-side, and sends
 list without calling `user_search`. Queries are limited to 100 characters;
 configured minimum lengths and result limits are bounded to 1–100.
 
+`GET /features/:name/users?page=2` returns the visible enrollment
+page, total enrollment count, page metadata, full-state `feature_version`, and
+`lookup_failed`. Pages contain at most 25 users and page numbers are clamped to
+the available range. The response never contains the entire
+membership list and sends `Cache-Control: no-store`.
+
+`GET /features/:name/users/search?q=alice` uses the same nickname callbacks and
+limits, adds an `enrolled` flag to each match based on the full membership, and
+includes `feature_version`. The unscoped `/users/search` response is unchanged.
+Paginated reads never replace the form's original version token; if the rollout
+changes while editing, the administrator must review the newer state.
+
 ## Host Header Validation
 
 When mounted in Rails, requests pass through Rails' `config.hosts` checks. The gem

data/lib/rollout/ui/helpers.rb

@@ -1,3 +1,5 @@
+require "digest/sha2"
+require "json"
 require "rack"
 require "rollout"
 
@@ -5,7 +7,7 @@ require "rollout/ui/version"
 
 module Rollout::UI
   module Helpers
-    USER_EDIT_LIMIT = 150
+    USER_PAGE_SIZE = 25
     USER_SEARCH_MAX_LENGTH = 100
 
     def stylesheet_path(name)
@@ -20,6 +22,14 @@ module Rollout::UI
       "#{request.script_name}/users/search"
     end
 
+    def enrolled_users_path(feature_name)
+      "#{request.script_name}/features/#{feature_name}/users"
+    end
+
+    def feature_user_search_path(feature_name)
+      "#{request.script_name}/features/#{feature_name}/users/search"
+    end
+
     def user_selector_enabled?
       config.defined?(:user_search) && config.defined?(:user_lookup)
     end
@@ -32,11 +42,23 @@ module Rollout::UI
       config.get(:user_search_limit).to_i.clamp(1, 100)
     end
 
-    def user_label(id)
+    def user_label(id, include_id: true)
       id = id.to_s
       return @user_nicknames[id] if @user_nicknames&.key?(id)
 
-      @user_lookup_attempted&.key?(id) ? "Unknown user (##{id})" : "User (##{id})"
+      label = @user_lookup_attempted&.key?(id) ? "Unknown user" : "User"
+      include_id ? "#{label} (##{id})" : label
+    end
+
+    def feature_version(feature)
+      state = [
+        feature.name.to_s,
+        feature.percentage.to_f,
+        feature.groups.map(&:to_s).uniq.sort,
+        feature.users.map(&:to_s).uniq.sort,
+        feature.data["description"].to_s,
+      ]
+      Digest::SHA256.hexdigest(state.to_json)
     end
 
     def index_path

data/lib/rollout/ui/public/css/enrolled-users.css

@@ -0,0 +1,191 @@
+#enrolled-users .enrolled-user-search-field,
+#enrolled-users #pending-user-slot {
+  position: relative;
+}
+
+#enrolled-users .text-gray-500,
+#enrolled-users .text-gray-600,
+#enrolled-users .text-gray-400 {
+  color: #4a5568;
+}
+
+.dark #enrolled-users .text-gray-500,
+.dark #enrolled-users .text-gray-600,
+.dark #enrolled-users .text-gray-400 {
+  color: #b8b8b8;
+}
+
+#enrolled-users input::placeholder {
+  color: #4a5568;
+  opacity: 1;
+}
+
+.dark #enrolled-users input::placeholder {
+  color: #b8b8b8;
+}
+
+#enrolled-users #user-search-dropdown {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+#enrolled-users #user-search-results {
+  max-height: min(16rem, 40vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #user-search-result-status {
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  max-height: min(8rem, 30vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #user-search-results [role="option"] > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-disabled="false"]:not([aria-selected="true"]):hover {
+  background-color: #edf2f7;
+}
+
+.dark #enrolled-users #user-search-results [role="option"][aria-disabled="false"]:not([aria-selected="true"]):hover {
+  background-color: #3a3a3a;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-selected="true"] {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-selected="true"] .text-gray-500 {
+  color: inherit;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-disabled="true"] {
+  cursor: default;
+}
+
+#enrolled-users #user-search-status {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#enrolled-users #pending-user-slot {
+  margin-top: 0.75rem;
+}
+
+#enrolled-users #pending-user-changes:not([hidden]) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 0.5rem;
+  row-gap: 0.5rem;
+}
+
+#enrolled-users #pending-user-summary {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users #pending-user-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#enrolled-users #pending-user-actions > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+}
+
+#enrolled-users #review-user-changes {
+  border-color: currentColor;
+}
+
+#enrolled-users #pending-user-review {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  right: 0;
+  width: min(100%, 28rem);
+  z-index: 20;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+#enrolled-users #pending-user-details {
+  max-height: min(16rem, 50vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #pending-user-details li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+#enrolled-users #pending-user-details li span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users button {
+  min-height: 24px;
+}
+
+#enrolled-users .enrolled-user-pagination {
+  margin-bottom: 0.5rem;
+}
+
+#enrolled-users .enrolled-user-pagination [aria-disabled="true"] {
+  opacity: 0.5;
+}
+
+@media (max-width: 480px) {
+  #enrolled-users #pending-user-changes:not([hidden]) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  #enrolled-users #pending-user-actions {
+    justify-self: center;
+  }
+
+  #enrolled-users #enrolled-users-table {
+    table-layout: fixed;
+  }
+
+  #enrolled-users #enrolled-users-table th,
+  #enrolled-users #enrolled-users-table td {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
+  #enrolled-users #enrolled-users-table th:nth-child(2) {
+    width: 35%;
+  }
+
+  #enrolled-users #enrolled-users-table th:last-child {
+    width: 4rem;
+  }
+
+  #enrolled-users #enrolled-users-table td:nth-child(2) {
+    overflow-wrap: anywhere;
+  }
+
+  #enrolled-users .enrolled-user-pagination a {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}

data/lib/rollout/ui/public/js/enrolled-users.js

@@ -0,0 +1,377 @@
+(function() {
+  const section = document.getElementById('enrolled-users');
+  if (!section) return;
+
+  const rows = document.getElementById('enrolled-users-rows');
+  const addField = document.getElementById('users-to-add');
+  const changeInputs = document.getElementById('user-change-inputs');
+  const pageField = document.getElementById('users-page');
+  const status = document.getElementById('enrollment-status');
+  const pending = document.getElementById('pending-user-changes');
+  const details = document.getElementById('pending-user-details');
+  const review = document.getElementById('pending-user-review');
+  const reviewButton = document.getElementById('review-user-changes');
+  const version = document.querySelector('#updateFormSubmit [name="feature_version"]').value;
+  const picker = document.getElementById('user-selector');
+  const additions = new Map();
+  const removals = new Map();
+  const knownMembers = new Map();
+  let currentPage = Number(section.dataset.page);
+  let perPage = Number(section.dataset.perPage);
+  let total = Number(section.dataset.total);
+  let totalPages = Number(section.dataset.totalPages);
+  let pageRevision = 0;
+  let pageController;
+  const conflict = 'This rollout changed while you were editing. Your pending changes are preserved. Reload the page to review the latest state before updating.';
+
+  function checkVersion(data) {
+    if (data.feature_version !== version) {
+      status.textContent = conflict;
+      return false;
+    }
+    return true;
+  }
+
+  function removeButton(row, user) {
+    const cell = row.lastElementChild;
+    let button = cell.querySelector('button');
+    if (!button) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'text-xs text-gray-600 hover:underline';
+      button.addEventListener('click', function() {
+        if (removals.has(user.id)) removals.delete(user.id);
+        else removals.set(user.id, user.nickname);
+        renderPending();
+      });
+      cell.replaceChildren(button);
+    }
+    button.textContent = removals.has(user.id) ? 'Undo' : 'Remove';
+    button.setAttribute('aria-label', (removals.has(user.id) ? 'Undo removal of ' : 'Remove ') + user.nickname + ' (#' + user.id + ')');
+    row.firstElementChild.classList.toggle('line-through', removals.has(user.id));
+    row.firstElementChild.classList.toggle('text-gray-400', removals.has(user.id));
+  }
+
+  function enhanceRows() {
+    rows.querySelectorAll('[data-user-id]').forEach(function(row) {
+      const user = { id: row.dataset.userId, nickname: row.dataset.nickname };
+      knownMembers.set(user.id, user.nickname);
+      removeButton(row, user);
+    });
+  }
+
+  function focusAddField() {
+    (picker ? document.getElementById('user-nickname') : addField).focus();
+  }
+
+  function closeReview(restoreFocus) {
+    review.hidden = true;
+    reviewButton.setAttribute('aria-expanded', 'false');
+    if (restoreFocus && !pending.hidden) reviewButton.focus();
+  }
+
+  function renderPending() {
+    if (picker) addField.value = Array.from(additions.keys()).join(', ');
+    changeInputs.replaceChildren();
+    if (removals.size) {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'users_to_remove';
+      input.value = Array.from(removals.keys()).join(', ');
+      changeInputs.append(input);
+    }
+    pending.hidden = additions.size + removals.size === 0;
+    document.getElementById('pending-user-slot').hidden = pending.hidden;
+    if (pending.hidden) closeReview(false);
+    const counts = [];
+    if (additions.size) counts.push(additions.size + (additions.size === 1 ? ' addition' : ' additions'));
+    if (removals.size) counts.push(removals.size + (removals.size === 1 ? ' removal' : ' removals'));
+    const summary = document.getElementById('pending-user-summary');
+    summary.textContent = counts.length ? counts.join(' · ') + ' pending' : '';
+    summary.title = summary.textContent;
+    details.replaceChildren();
+    [additions, removals].forEach(function(changes, index) {
+      changes.forEach(function(nickname, id) {
+        const item = document.createElement('li');
+        const label = document.createElement('span');
+        label.textContent = (index === 0 ? '+ ' : '− ') + nickname + ' (#' + id + ')';
+        const undo = document.createElement('button');
+        undo.type = 'button';
+        undo.className = 'text-gray-600 hover:underline';
+        undo.textContent = 'Undo';
+        undo.setAttribute('aria-label', 'Undo ' + (index === 0 ? 'addition' : 'removal') + ' of ' + nickname + ' (#' + id + ')');
+        undo.addEventListener('click', function() {
+          const position = Array.from(details.querySelectorAll('button')).indexOf(undo);
+          changes.delete(id);
+          if (!picker) addField.value = Array.from(additions.keys()).join(', ');
+          renderPending();
+          const buttons = details.querySelectorAll('button');
+          if (buttons.length) buttons[Math.min(position, buttons.length - 1)].focus();
+          else focusAddField();
+        });
+        item.append(label, undo);
+        details.append(item);
+      });
+    });
+    enhanceRows();
+  }
+
+  function updateNavigation() {
+    pageField.value = String(currentPage);
+    document.getElementById('enrolled-user-count').textContent = String(total);
+    section.querySelectorAll('[data-user-page-number]').forEach(function(label) {
+      label.textContent = 'Page ' + currentPage + ' of ' + totalPages;
+    });
+    section.querySelectorAll('[data-user-page-direction]').forEach(function(link) {
+      const previous = link.dataset.userPageDirection === 'previous';
+      const page = previous ? Math.max(currentPage - 1, 1) : Math.min(currentPage + 1, totalPages);
+      const disabled = previous ? currentPage === 1 : currentPage === totalPages;
+      const url = new URL(document.getElementById('updateFormSubmit').action);
+      url.searchParams.set('page', page);
+      if (disabled) link.removeAttribute('href');
+      else link.href = url.toString();
+      link.dataset.page = String(page);
+      link.setAttribute('aria-disabled', String(disabled));
+      link.tabIndex = disabled ? -1 : 0;
+    });
+  }
+
+  function showPageStart(direction) {
+    const navigation = document.getElementById('enrolled-users-pagination');
+    const preferred = navigation.querySelector('[data-user-page-direction="' + direction + '"]');
+    const target = preferred && preferred.getAttribute('aria-disabled') !== 'true' ? preferred : navigation.querySelector('[aria-disabled="false"]') || document.getElementById('enrolled-users-table');
+    target.focus({ preventScroll: true });
+    const box = navigation.getBoundingClientRect();
+    if (box.top < 0 || box.bottom + 80 > window.innerHeight) navigation.scrollIntoView({ block: 'start' });
+  }
+
+  async function loadPage(page, direction) {
+    if (pageController) pageController.abort();
+    const revision = ++pageRevision;
+    pageController = new AbortController();
+    status.textContent = 'Loading enrolled users…';
+    try {
+      const url = new URL(section.dataset.usersUrl, window.location.href);
+      url.searchParams.set('page', page);
+      const response = await fetch(url, { headers: { Accept: 'application/json' }, credentials: 'same-origin', cache: 'no-store', signal: pageController.signal });
+      if (!response.ok) throw new Error('Enrollment page unavailable');
+      const data = await response.json();
+      if (revision !== pageRevision) return;
+      if (!checkVersion(data)) return;
+      currentPage = data.page;
+      perPage = data.per_page;
+      total = data.total;
+      totalPages = data.total_pages;
+      rows.replaceChildren();
+      data.users.forEach(function(user) {
+        const row = document.createElement('tr');
+        row.className = 'border-b border-gray-200';
+        row.dataset.userId = user.id;
+        row.dataset.nickname = user.nickname;
+        const nickname = document.createElement('td');
+        nickname.className = 'px-3 py-2 break-all';
+        nickname.textContent = user.nickname;
+        const id = document.createElement('td');
+        id.className = 'px-3 py-2 text-xs text-gray-500';
+        id.textContent = '#' + user.id;
+        const action = document.createElement('td');
+        action.className = 'px-3 py-2 text-right';
+        row.append(nickname, id, action);
+        rows.append(row);
+      });
+      if (!data.users.length) {
+        const row = document.createElement('tr');
+        const cell = document.createElement('td');
+        cell.colSpan = 3;
+        cell.className = 'px-3 py-3 text-gray-500';
+        cell.textContent = 'No explicitly enrolled users.';
+        row.append(cell);
+        rows.append(row);
+      }
+      enhanceRows();
+      updateNavigation();
+      status.textContent = data.lookup_failed ? 'Nicknames could not be loaded. Their user IDs are preserved.' : '';
+      showPageStart(direction);
+    } catch (error) {
+      if (revision !== pageRevision || error.name === 'AbortError') return;
+      status.textContent = 'The enrollment list is temporarily unavailable. Your pending changes are preserved. Try again.';
+    }
+  }
+
+  section.querySelectorAll('[data-user-page-direction]').forEach(function(link) {
+    link.addEventListener('click', function(event) {
+      event.preventDefault();
+      if (this.getAttribute('aria-disabled') !== 'true') loadPage(Number(this.dataset.page), this.dataset.userPageDirection);
+    });
+  });
+  reviewButton.addEventListener('click', function() {
+    if (!review.hidden) { closeReview(true); return; }
+    review.hidden = false;
+    reviewButton.setAttribute('aria-expanded', 'true');
+    (details.querySelector('button') || document.getElementById('close-user-review')).focus();
+  });
+  document.getElementById('close-user-review').addEventListener('click', function() { closeReview(true); });
+  document.addEventListener('pointerdown', function(event) {
+    if (!pending.contains(event.target)) closeReview(false);
+  });
+  pending.addEventListener('focusout', function(event) {
+    if (event.relatedTarget && !pending.contains(event.relatedTarget)) closeReview(false);
+  });
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && !review.hidden) {
+      event.preventDefault();
+      closeReview(true);
+    }
+  });
+  document.getElementById('discard-user-changes').addEventListener('click', function() {
+    additions.clear();
+    removals.clear();
+    addField.value = '';
+    renderPending();
+    focusAddField();
+  });
+  if (!picker) {
+    addField.addEventListener('input', function() {
+      additions.clear();
+      this.value.split(',').map(function(id) { return id.trim(); }).filter(Boolean).forEach(function(id) {
+        if (!knownMembers.has(id)) additions.set(id, 'User');
+      });
+      renderPending();
+    });
+  }
+  enhanceRows();
+  updateNavigation();
+
+  if (!picker) return;
+  const input = document.getElementById('user-nickname');
+  const dropdown = document.getElementById('user-search-dropdown');
+  const list = document.getElementById('user-search-results');
+  const searchStatus = document.getElementById('user-search-status');
+  const resultStatus = document.getElementById('user-search-result-status');
+  const minLength = Number(picker.dataset.minLength);
+  const limit = Number(picker.dataset.limit);
+  let timer;
+  let searchController;
+  let searchRevision = 0;
+  let results = [];
+  let activeIndex = -1;
+
+  function closeList() {
+    dropdown.hidden = true;
+    list.hidden = true;
+    resultStatus.textContent = '';
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    activeIndex = -1;
+  }
+  function cancelSearch() {
+    clearTimeout(timer);
+    if (searchController) searchController.abort();
+    searchRevision++;
+    closeList();
+    searchStatus.textContent = '';
+    searchStatus.title = '';
+  }
+  function showSearchMessage(message) {
+    closeList();
+    searchStatus.textContent = '';
+    resultStatus.textContent = message;
+    dropdown.hidden = false;
+  }
+  function choose(user) {
+    if (user.enrolled) {
+      if (!removals.has(user.id)) return;
+      removals.delete(user.id);
+    } else {
+      if (additions.has(user.id)) return;
+      additions.set(user.id, user.nickname);
+    }
+    renderPending();
+    cancelSearch();
+    input.value = '';
+    input.focus();
+    searchStatus.textContent = user.nickname + ' selected.';
+    searchStatus.title = searchStatus.textContent;
+  }
+  function activate(index) {
+    activeIndex = index;
+    Array.from(list.children).forEach(function(option, i) {
+      option.setAttribute('aria-selected', String(i === index));
+    });
+    const option = list.children[index];
+    if (option) {
+      input.setAttribute('aria-activedescendant', option.id);
+      option.scrollIntoView({ block: 'nearest' });
+    }
+  }
+  async function search(query, revision) {
+    searchController = new AbortController();
+    searchStatus.textContent = 'Searching nicknames…';
+    try {
+      const url = new URL(picker.dataset.searchUrl, window.location.href);
+      url.searchParams.set('q', query);
+      const response = await fetch(url, { signal: searchController.signal, headers: { Accept: 'application/json' }, credentials: 'same-origin', cache: 'no-store' });
+      if (!response.ok) throw new Error('Search unavailable');
+      const data = await response.json();
+      if (revision !== searchRevision) return;
+      if (!checkVersion(data)) { showSearchMessage(conflict); return; }
+      results = data.users;
+      list.replaceChildren();
+      results.forEach(function(user, index) {
+        const option = document.createElement('div');
+        option.id = 'user-search-option-' + index;
+        option.className = 'px-4 py-2 cursor-pointer flex items-center justify-between';
+        const disabled = (user.enrolled && !removals.has(user.id)) || additions.has(user.id);
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', 'false');
+        option.setAttribute('aria-disabled', String(disabled));
+        const nickname = document.createElement('span');
+        nickname.textContent = user.nickname;
+        const note = document.createElement('span');
+        note.className = 'text-xs text-gray-500 ml-2';
+        note.textContent = user.enrolled ? removals.has(user.id) ? 'Undo removal' : 'Already enrolled' : additions.has(user.id) ? 'Pending addition' : 'Add';
+        option.append(nickname, note);
+        option.addEventListener('pointerdown', function(event) { event.preventDefault(); });
+        option.addEventListener('click', function() { choose(user); });
+        list.append(option);
+      });
+      list.hidden = results.length === 0;
+      dropdown.hidden = results.length === 0;
+      input.setAttribute('aria-expanded', String(results.length > 0));
+      searchStatus.textContent = results.length ? '' : 'No matching nicknames.';
+      resultStatus.textContent = results.length ? results.length + (results.length === 1 ? ' match.' : ' matches.') + ' Use ↑/↓ and Enter to select.' : '';
+      if (results.length >= limit) resultStatus.textContent += ' Refine your nickname to narrow the results.';
+    } catch (error) {
+      if (revision !== searchRevision || error.name === 'AbortError') return;
+      showSearchMessage('Nickname search is unavailable. Your pending changes are preserved. Try again.');
+    }
+  }
+  function scheduleSearch() {
+    cancelSearch();
+    const query = input.value.trim();
+    if (Array.from(query).length < minLength) {
+      searchStatus.textContent = query ? 'At least ' + minLength + ' characters' : '';
+      return;
+    }
+    searchStatus.textContent = 'Waiting to search…';
+    const revision = searchRevision;
+    timer = setTimeout(function() { search(query, revision); }, 300);
+  }
+  input.addEventListener('input', scheduleSearch);
+  input.addEventListener('focus', scheduleSearch);
+  input.addEventListener('blur', cancelSearch);
+  input.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') { event.preventDefault(); if (!list.hidden && activeIndex >= 0) choose(results[activeIndex]); }
+    else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !list.hidden) {
+      event.preventDefault();
+      const direction = event.key === 'ArrowDown' ? 1 : -1;
+      let next = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+      for (let i = 0; i < results.length; i++) {
+        next = (next + direction + results.length) % results.length;
+        if (list.children[next].getAttribute('aria-disabled') !== 'true') { activate(next); break; }
+      }
+    } else if (event.key === 'Escape' || event.key === 'Tab') cancelSearch();
+  });
+  document.getElementById('user-id-addition').hidden = true;
+  picker.hidden = false;
+})();

data/lib/rollout/ui/public/js/user-selector.js

@@ -5,6 +5,7 @@
   const field = document.getElementById('users');
   const input = document.getElementById('user-nickname');
   const chips = document.getElementById('selected-users');
+  const count = document.getElementById('enrolled-user-count');
   const list = document.getElementById('user-search-results');
   const status = document.getElementById('user-search-status');
   const minLength = Number(picker.dataset.minLength);
@@ -36,6 +37,7 @@
   }
 
   function renderChips() {
+    if (count) count.textContent = String(selected.size);
     chips.replaceChildren();
     selected.forEach(function(nickname, id) {
       const chip = document.createElement('span');

data/lib/rollout/ui/version.rb

@@ -1,5 +1,5 @@
 class Rollout
   module UI
-    VERSION = "0.10.0"
+    VERSION = "0.10.1"
   end
 end

data/lib/rollout/ui/views/features/partials/enrolled_users.erb

@@ -0,0 +1,66 @@
+<link rel="stylesheet" href="<%= h(stylesheet_path('enrolled-users')) %>">
+<section id="enrolled-users" class="mb-5" aria-labelledby="enrolled-users-heading" data-users-url="<%= h(enrolled_users_path(@feature.name)) %>" data-total="<%= h(@users_total_count) %>" data-page="<%= h(@user_page) %>" data-per-page="<%= h(@users_per_page) %>" data-total-pages="<%= h(@users_total_pages) %>">
+  <input type="hidden" name="user_changes" value="1">
+  <input type="hidden" name="page" id="users-page" value="<%= h(@user_page) %>">
+  <h3 id="enrolled-users-heading" class="text-gray-500 mb-2">Users (<span id="enrolled-user-count"><%= h(@users_total_count) %></span>)</h3>
+  <div id="user-id-addition" class="mb-4">
+    <label class="block text-gray-500 mb-2" for="users-to-add">Add user IDs</label>
+    <input id="users-to-add" name="users_to_add" class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 bg-white" placeholder="Comma-separated user IDs" autocomplete="off">
+  </div>
+  <% if user_selector_enabled? %>
+    <div id="user-selector" class="mb-2" data-search-url="<%= h(feature_user_search_path(@feature.name)) %>" data-min-length="<%= h(user_search_min_length) %>" data-limit="<%= h(user_search_limit) %>" hidden>
+      <label class="block text-gray-500 mb-2" for="user-nickname" title="Search by nickname. At least <%= h(user_search_min_length) %> characters.">Add user</label>
+      <div class="enrolled-user-search-field">
+        <input id="user-nickname" class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 bg-white" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="user-search-results" aria-describedby="user-search-status user-search-result-status" autocomplete="off" spellcheck="false" maxlength="<%= USER_SEARCH_MAX_LENGTH %>" placeholder="Search by nickname…" title="Search by nickname. At least <%= h(user_search_min_length) %> characters.">
+        <div id="user-search-dropdown" class="border rounded-sm bg-white" hidden>
+          <div id="user-search-results" role="listbox" aria-label="Matching nicknames" hidden></div>
+          <p id="user-search-result-status" class="text-xs text-gray-600" role="status" aria-live="polite"></p>
+        </div>
+      </div>
+      <p id="user-search-status" class="text-xs text-gray-600" role="status" aria-live="polite"></p>
+    </div>
+  <% end %>
+  <div id="user-change-inputs" hidden></div>
+  <%= erb :"features/partials/user_pagination", layout: false %>
+  <table id="enrolled-users-table" class="w-full text-left" aria-label="Explicitly enrolled users" tabindex="-1">
+    <thead class="text-xs text-gray-500 bg-gray-200">
+      <tr><th scope="col" class="px-3 py-2 font-normal">Nickname</th><th scope="col" class="px-3 py-2 font-normal">User ID</th><th scope="col" class="px-3 py-2 font-normal text-right">Action</th></tr>
+    </thead>
+    <tbody id="enrolled-users-rows">
+      <% if @selected_users.empty? %>
+        <tr><td colspan="3" class="px-3 py-3 text-gray-500">No explicitly enrolled users.</td></tr>
+      <% end %>
+      <% @selected_users.each do |user| %>
+        <tr class="border-b border-gray-200" data-user-id="<%= h(user[:id]) %>" data-nickname="<%= h(user[:nickname]) %>">
+          <td class="px-3 py-2 break-all"><%= h(user[:nickname]) %></td>
+          <td class="px-3 py-2 text-xs text-gray-500">#<%= h(user[:id]) %></td>
+          <td class="px-3 py-2 text-right">
+            <label class="text-xs text-gray-600"><input type="checkbox" name="users_to_remove[]" value="<%= h(user[:id]) %>" aria-label="Remove <%= h(user[:nickname]) %> (#<%= h(user[:id]) %>)"> Remove</label>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  <p id="enrollment-status" class="text-gray-500 mt-2" role="status" aria-live="polite"></p>
+  <% if @selected_user_lookup_failed %>
+    <p class="text-gray-500 mt-2" role="status">Selected nicknames could not be loaded. Their user IDs are preserved.</p>
+  <% end %>
+  <noscript><p class="text-xs text-gray-500 mt-2">Update changes before switching pages. Add users by ID and check Remove for users on the current page.</p></noscript>
+  <div id="pending-user-slot" hidden>
+    <div id="pending-user-changes" class="border border-gray-300 rounded-sm bg-white p-3 text-xs text-gray-600" hidden>
+      <p id="pending-user-summary" class="text-sm font-semibold" role="status" aria-live="polite" aria-atomic="true"></p>
+      <div id="pending-user-actions" role="group" aria-label="Pending user actions">
+        <button id="review-user-changes" type="button" class="border rounded-sm bg-gray-100 px-3 py-2 font-semibold hover:bg-gray-200" aria-expanded="false" aria-controls="pending-user-review">Review</button>
+        <button id="discard-user-changes" type="button" class="px-2 py-2 hover:underline" aria-label="Discard user changes">Discard</button>
+      </div>
+      <div id="pending-user-review" class="border rounded-sm bg-white p-3" role="region" aria-labelledby="pending-user-review-heading" hidden>
+        <div class="flex items-center justify-between mb-2">
+          <h4 id="pending-user-review-heading">Pending user changes</h4>
+          <button id="close-user-review" type="button" class="hover:underline" aria-label="Close pending user changes">Close</button>
+        </div>
+        <ul id="pending-user-details"></ul>
+      </div>
+    </div>
+  </div>
+</section>
+<script src="<%= h(javascript_path('enrolled-users')) %>" defer></script>

data/lib/rollout/ui/views/features/partials/user_pagination.erb

@@ -0,0 +1,7 @@
+<nav id="enrolled-users-pagination" class="enrolled-user-pagination flex items-center justify-between text-xs" aria-label="Enrolled user pages">
+  <span id="users-page-number" class="text-gray-600" data-user-page-number aria-live="polite">Page <%= h(@user_page) %> of <%= h(@users_total_pages) %></span>
+  <div class="flex items-center">
+    <a id="users-previous" class="border rounded-sm py-2 px-3 text-gray-600 mr-2" role="link"<% if @user_page > 1 %> href="<%= h("#{feature_path(@feature.name)}?#{Rack::Utils.build_query(page: @user_page - 1)}") %>"<% end %> data-user-page-direction="previous" data-page="<%= [@user_page - 1, 1].max %>" aria-disabled="<%= @user_page == 1 %>"<% if @user_page == 1 %> tabindex="-1"<% end %>>&larr; Previous</a>
+    <a id="users-next" class="border rounded-sm py-2 px-3 text-gray-600" role="link"<% if @user_page < @users_total_pages %> href="<%= h("#{feature_path(@feature.name)}?#{Rack::Utils.build_query(page: @user_page + 1)}") %>"<% end %> data-user-page-direction="next" data-page="<%= [@user_page + 1, @users_total_pages].min %>" aria-disabled="<%= @user_page == @users_total_pages %>"<% if @user_page == @users_total_pages %> tabindex="-1"<% end %>>Next &rarr;</a>
+  </div>
+</nav>

data/lib/rollout/ui/views/features/show.erb

@@ -6,8 +6,9 @@
 <h2 class="font-semibold text-xl text-gray-500 pt-12"><%= h(@feature.name) %></h2>
 
 <div class="w-8 h-1 bg-gray-300 my-10"></div>
-<main class="p-6 bg-gray-100 max-w-lg w-full text-sm rounded-sm">
+<main class="p-6 bg-gray-100 max-w-3xl w-full text-sm rounded-sm">
   <form id="updateFormSubmit" action="<%= h(feature_path(@feature.name)) %>" method="POST">
+    <input type="hidden" name="feature_version" value="<%= h(feature_version(@feature)) %>">
     <input type="hidden" name="last_updated_at" value="<%= h(@feature.data['updated_at']) %>">
     <div class="mb-5">
       <label class="block text-gray-500 mb-2" for="description">Description</label>
@@ -29,17 +30,7 @@
       <input class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="percentage" id="percentage" value="<%= h(@feature.percentage) %>" type="number" step="0.1">
     </div>
 
-    <div class="mb-5">
-      <label class="block text-gray-500 mb-2" for="users">Users</label>
-      <% if @feature.users.count > USER_EDIT_LIMIT %>
-        <div class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-gray-100"><%= h(@feature.users.count) %></div>
-      <% else %>
-        <textarea class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="users" id="users" rows="2"><%= h(@feature.users.join(', ')) %></textarea>
-        <% if user_selector_enabled? %>
-          <%= erb :"features/partials/user_selector", layout: false %>
-        <% end %>
-      <% end %>
-    </div>
+    <%= erb :"features/partials/enrolled_users", layout: false %>
   </form>
 
   <div class="flex items-center justify-end">

data/lib/rollout/ui/web.rb

@@ -30,6 +30,14 @@ module Rollout::UI
     class Dispatcher
       include Helpers
 
+      class StaleFeature < StandardError
+      end
+
+      class InvalidEnrollment < StandardError
+      end
+
+      STALE_FEATURE_MESSAGE = 'This rollout changed since you opened it. Your update was not saved. Review the latest state and try again.'
+
       VIEWS_PATH = File.expand_path('views', __dir__)
       TEMPLATE_CACHE = {}
       HISTORY_USER_LOOKUP_LIMIT = 150
@@ -37,6 +45,8 @@ module Rollout::UI
       ROUTES = [
         [:GET, %r{\A/\z}, :index],
         [:GET, %r{\A/users/search\z}, :search_users],
+        [:GET, %r{\A/features/(?<feature_name>[^/]+)/users/search\z}, :search_feature_users],
+        [:GET, %r{\A/features/(?<feature_name>[^/]+)/users\z}, :enrolled_users],
         [:GET, %r{\A/features/new\z}, :new_feature],
         [:POST, %r{\A/features/new\z}, :create_feature],
         [:POST, %r{\A/features/(?<feature_name>[^/]+)/activate-percentage\z}, :activate_percentage],
@@ -103,13 +113,14 @@ module Rollout::UI
       end
 
       def show
+        response['cache-control'] = 'no-store'
         @rollout = config.get(:instance)
         @feature = @rollout.get(params[:feature_name])
 
         if json_request?
           json(feature_to_hash(@feature))
         else
-          load_selected_users if user_selector_enabled? && @feature.users.count <= USER_EDIT_LIMIT
+          load_selected_users
           @history_events = @rollout.respond_to?(:logging) ? @rollout.logging.events(@feature.name).reverse : []
           load_history_user_nicknames(@history_events)
           render_view(:'features/show')
@@ -141,11 +152,91 @@ module Rollout::UI
         end
       end
 
+      def search_feature_users
+        return not_found unless user_selector_enabled?
+
+        response['cache-control'] = 'no-store'
+        @rollout = config.get(:instance)
+        begin
+          @feature = @rollout.get(params[:feature_name])
+        rescue StandardError
+          return not_found
+        end
+
+        query = params[:q]
+        unless query.nil? || query.is_a?(String)
+          response.status = 400
+          return json(error: 'Nickname must be a string.')
+        end
+        query = query.to_s.strip
+        if query.length > USER_SEARCH_MAX_LENGTH
+          response.status = 400
+          return json(error: "Nickname must be at most #{USER_SEARCH_MAX_LENGTH} characters.")
+        end
+        return json(users: [], feature_version: feature_version(@feature)) if query.length < user_search_min_length
+
+        enrolled_ids = @feature.users.map(&:to_s)
+        begin
+          users = config.get(:user_search, query, user_search_limit)
+          json(
+            users: users.take(user_search_limit).map do |user|
+              hashed = user_to_hash(user)
+              hashed.merge(enrolled: enrolled_ids.include?(hashed[:id]))
+            end,
+            feature_version: feature_version(@feature),
+          )
+        rescue StandardError
+          response.status = 503
+          json(error: 'Nickname search is temporarily unavailable. Please try again.')
+        end
+      end
+
+      def enrolled_users
+        response['cache-control'] = 'no-store'
+        @rollout ||= config.get(:instance)
+        begin
+          @feature = @rollout.get(params[:feature_name])
+        rescue StandardError
+          return not_found
+        end
+        load_selected_users
+
+        json(
+          users: @selected_users,
+          total: @users_total_count,
+          page: @user_page,
+          per_page: @users_per_page,
+          total_pages: @users_total_pages,
+          feature_version: feature_version(@feature),
+          lookup_failed: @selected_user_lookup_failed || false,
+        )
+      end
+
       def load_selected_users
-        ids = @feature.users.map(&:to_s)
-        lookup_user_nicknames(ids)
-        @selected_users = ids.map { |id| { id: id, nickname: user_label(id) } }
-        @selected_user_lookup_failed = @user_lookup_failed
+        @users_per_page = USER_PAGE_SIZE
+        all_ids = @feature.users.map { |id| id.to_s }.uniq.sort
+        @users_total_count = all_ids.size
+        @users_total_pages = [ (all_ids.size.to_f / @users_per_page).ceil, 1 ].max
+        @user_page = parse_users_page(params[:page], @users_total_pages)
+        offset = (@user_page - 1) * @users_per_page
+        page_ids = all_ids[offset, @users_per_page] || []
+        if config.defined?(:user_lookup)
+          lookup_user_nicknames(page_ids)
+        end
+        @selected_users = page_ids.map { |id| { id: id, nickname: user_label(id, include_id: false) } }
+        @selected_user_lookup_failed = @user_lookup_failed == true
+      end
+
+      def parse_users_page(value, total_pages)
+        candidate = 1
+        unless value.is_a?(Array) || value.is_a?(Hash)
+          raw = value.to_s.strip
+          candidate = raw.to_i if raw.match?(/\A\d+\z/)
+        end
+        candidate = 1 if candidate < 1
+        candidate = total_pages if candidate > total_pages
+        candidate = 1 if candidate < 1
+        candidate
       end
 
       def load_history_user_nicknames(events)
@@ -170,6 +261,8 @@ module Rollout::UI
       end
 
       def lookup_user_nicknames(ids)
+        return unless config.defined?(:user_lookup)
+
         @user_nicknames ||= {}
         @user_lookup_attempted ||= {}
         missing_ids = ids.uniq.reject { |id| @user_lookup_attempted.key?(id) }
@@ -195,26 +288,97 @@ module Rollout::UI
       end
 
       def update
+        enrollment = parse_enrollment!
         rollout = config.get(:instance)
         actor = config.get(:actor, scope: self)
-        feature_data = rollout.get(params[:feature_name]).data
-        if feature_data['updated_at'] && params[:last_updated_at].to_s != feature_data['updated_at'].to_s
-          return redirect_to("#{feature_path(params[:feature_name])}?error=Rollout version outdated. Review changes below and try again.")
-        end
 
         with_rollout_context(rollout, actor: actor) do
           rollout.with_feature(params[:feature_name]) do |feature|
+            validate_feature_version!(feature, enrollment)
             feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
             feature.groups = (params[:groups] || []).reject(&:empty?).map(&:to_sym)
-            if params[:users]
-              feature.users = params[:users].split(',').map(&:strip).reject(&:empty?).uniq.sort
-            end
+            apply_enrollment!(feature, enrollment)
             feature.data["description"] = params[:description]
             feature.data["updated_at"] = Time.now.to_i
           end
         end
 
-        redirect_to feature_path(params[:feature_name])
+        redirect_location = feature_path(params[:feature_name])
+        if params.key?(:page)
+          after_feature = config.get(:instance).get(params[:feature_name])
+          total_pages = [ (after_feature.users.map(&:to_s).uniq.size.to_f / USER_PAGE_SIZE).ceil, 1 ].max
+          page = parse_users_page(params[:page], total_pages)
+          redirect_location = "#{feature_path(params[:feature_name])}?#{Rack::Utils.build_query('page' => page)}"
+        end
+        redirect_to redirect_location
+      rescue StaleFeature => error
+        query = Rack::Utils.build_query(error: error.message)
+        redirect_to("#{feature_path(params[:feature_name])}?#{query}")
+      rescue InvalidEnrollment
+        bad_request(StandardError.new('invalid enrollment update'))
+      end
+
+      # Delta mode is only the scalar marker "1" plus a real fingerprint.
+      # Any other present marker is rejected so it cannot fall through to a
+      # legacy full-list replacement. Legacy replacement runs only when the
+      # marker is absent, and only for a scalar string.
+      def parse_enrollment!
+        if params.key?(:user_changes)
+          raise InvalidEnrollment unless params[:user_changes] == '1'
+          raise InvalidEnrollment unless params[:feature_version].is_a?(String) && !params[:feature_version].empty?
+          additions = parse_delta_ids(params[:users_to_add])
+          removals = parse_delta_ids(params[:users_to_remove])
+          raise InvalidEnrollment if additions.nil? || removals.nil?
+          return [:delta, additions, removals]
+        end
+
+        return nil unless params.key?(:users)
+
+        users = params[:users]
+        return nil if users.nil?
+        raise InvalidEnrollment unless users.is_a?(String)
+        [:legacy, users]
+      end
+
+      def apply_enrollment!(feature, enrollment)
+        return if enrollment.nil?
+
+        kind, *payload = enrollment
+        if kind == :delta
+          additions, removals = payload
+          current = feature.users.map { |id| id.to_s }.uniq
+          feature.users = (current + additions - removals).uniq.sort
+        else
+          feature.users = payload.fetch(0).split(',').map(&:strip).reject(&:empty?).uniq.sort
+        end
+      end
+
+      def parse_delta_ids(value)
+        return [] if value.nil?
+        return nil unless value.is_a?(String) || value.is_a?(Array)
+        list = value.is_a?(Array) ? value : value.to_s.split(',')
+        return nil unless list.all? { |entry| entry.is_a?(String) }
+        list.map(&:strip).reject(&:empty?)
+      rescue StandardError
+        nil
+      end
+
+      def validate_feature_version!(feature, enrollment = nil)
+        if enrollment&.first == :delta
+          version = params[:feature_version]
+          raise InvalidEnrollment unless version.is_a?(String) && !version.empty?
+          if version != feature_version(feature)
+            raise StaleFeature, STALE_FEATURE_MESSAGE
+          end
+          return
+        end
+
+        stale = if params.key?(:feature_version)
+          params[:feature_version].to_s != feature_version(feature)
+        else
+          feature.data['updated_at'] && params[:last_updated_at].to_s != feature.data['updated_at'].to_s
+        end
+        raise StaleFeature, STALE_FEATURE_MESSAGE if stale
       end
 
       def activate_percentage

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rollout-ui
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.10.1
 platform: ruby
 authors:
 - FetLife
@@ -227,12 +227,16 @@ files:
 - lib/rollout/ui.rb
 - lib/rollout/ui/config.rb
 - lib/rollout/ui/helpers.rb
+- lib/rollout/ui/public/css/enrolled-users.css
 - lib/rollout/ui/public/css/tailwind.min.css
+- lib/rollout/ui/public/js/enrolled-users.js
 - lib/rollout/ui/public/js/user-selector.js
 - lib/rollout/ui/version.rb
 - lib/rollout/ui/views/features/index.erb
 - lib/rollout/ui/views/features/new.erb
+- lib/rollout/ui/views/features/partials/enrolled_users.erb
 - lib/rollout/ui/views/features/partials/event_log.erb
+- lib/rollout/ui/views/features/partials/user_pagination.erb
 - lib/rollout/ui/views/features/partials/user_selector.erb
 - lib/rollout/ui/views/features/show.erb
 - lib/rollout/ui/views/layout.erb