From 6ee92c3853daa2c1c6441edbd586fdb9a7466dd5 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 10:44:50 -0400
Subject: [PATCH 1/8] Place age ranges beside sectors on person edit and show
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Age ranges previously sat in the generic profile-specific categories
block, separated from sectors. Pull the AgeRange type out so it edits as
a column next to sectors, and on the profile render the two as side-by-
side columns with age ranges as the thinner one — reclaiming the empty
space age groups left when it wrapped to its own full-width row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/views/people/_form.html.erb | 91 ++++++++++++++++++++-------------
 app/views/people/show.html.erb  | 65 ++++++++++++-----------
 2 files changed, 92 insertions(+), 64 deletions(-)

diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index f3f31acacb..0c42b8ce02 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -116,52 +116,73 @@
     </div>
   </div>
 
-  <!-- Sectors -->
-  <div class="form-group space-y-4">
-    <div class="font-semibold text-gray-700 mb-2">
-      Sectors
-    </div>
-    <div class="rounded-lg border border-gray-200 <%= DomainTheme.bg_class_for(:sectors) %> p-4 mb-4 shadow-sm
-                flex flex-wrap items-center gap-2"
-         data-controller="primary-sector">
-      <% sectors_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
-      <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_primary_first do |sfi| %>
-        <%= render "shared/sectorable_item_fields", f: sfi, show_admin_flags: true %>
-      <% end %>
+  <!-- Sectors + Age ranges (side by side; age ranges is the thinner column) -->
+  <% age_type, age_cats = (@person_categories_grouped || {}).find { |type, _| type.name == "AgeRange" } %>
+  <% primary_age_ids = @person.primary_age_category_ids %>
+  <div class="flex flex-col lg:flex-row gap-4 items-start">
+    <!-- Sectors -->
+    <div class="form-group space-y-4 w-full lg:flex-1">
+      <div class="font-semibold text-gray-700 mb-2">
+        Sectors
+      </div>
+      <div class="rounded-lg border border-gray-200 <%= DomainTheme.bg_class_for(:sectors) %> p-4 mb-4 shadow-sm
+                  flex flex-wrap items-center gap-2"
+           data-controller="primary-sector">
+        <% sectors_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
+        <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_primary_first do |sfi| %>
+          <%= render "shared/sectorable_item_fields", f: sfi, show_admin_flags: true %>
+        <% end %>
 
-      <%= link_to_add_association "➕ Add Sector",
-                                  f,
-                                  :sectorable_items,
-                                  partial: "shared/sectorable_item_fields",
-                                  render_options: {
-                                    locals: { collection: (@sectors_collection || [])
-                                      .reject { |_, id| (@current_sector_ids || []).include?(id) },
-                                              show_admin_flags: true } },
-                                  class: "btn btn-secondary-outline" %>
-      <%= render "people/other_responses", responses: @person.other_sector_responses %>
+        <%= link_to_add_association "➕ Add Sector",
+                                    f,
+                                    :sectorable_items,
+                                    partial: "shared/sectorable_item_fields",
+                                    render_options: {
+                                      locals: { collection: (@sectors_collection || [])
+                                        .reject { |_, id| (@current_sector_ids || []).include?(id) },
+                                                show_admin_flags: true } },
+                                    class: "btn btn-secondary-outline" %>
+        <%= render "people/other_responses", responses: @person.other_sector_responses %>
+      </div>
     </div>
+
+    <!-- Age ranges -->
+    <% if age_type %>
+      <div class="form-group space-y-4 w-full lg:w-80 lg:flex-shrink-0">
+        <div class="font-semibold text-gray-700 mb-2">
+          <%= age_type.display_label %>
+        </div>
+        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-4 shadow-sm">
+          <%# Ensures the primary-age param is always submitted so unchecking every
+              toggle clears the primary flags. %>
+          <%= hidden_field_tag "person[primary_age_category_ids][]", "" %>
+          <p class="text-sm text-gray-500 mb-3">Check every age group served, then mark the primary ones.</p>
+          <div class="flex flex-wrap gap-3">
+            <% age_cats.each do |category| %>
+              <%= render "shared/category_checkbox", param_key: "person", category: category,
+                         checked: @person.category_ids.include?(category.id),
+                         is_age: true,
+                         primary_checked: primary_age_ids.include?(category.id) %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
   </div>
 
-  <!-- Profile-specific Categories -->
-  <% if @person_categories_grouped.present? %>
-    <% primary_age_ids = @person.primary_age_category_ids %>
+  <!-- Profile-specific Categories (other than age ranges) -->
+  <% other_category_types = (@person_categories_grouped || {}).reject { |type, _| type.name == "AgeRange" } %>
+  <% if other_category_types.present? %>
     <div class="form-group space-y-4">
-      <%# Ensures the primary-age param is always submitted so unchecking every
-          toggle clears the primary flags. %>
-      <%= hidden_field_tag "person[primary_age_category_ids][]", "" %>
-      <% @person_categories_grouped.each do |type, cats| %>
-        <% is_age = type.name == "AgeRange" %>
+      <% other_category_types.each do |type, cats| %>
         <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm">
           <h3 class="font-semibold text-gray-700 mb-3"><%= type.display_label %></h3>
-          <% if is_age %>
-            <p class="text-sm text-gray-500 mb-3">Check every age group served, then mark the primary ones.</p>
-          <% end %>
           <div class="flex flex-wrap gap-3">
             <% cats.each do |category| %>
               <%= render "shared/category_checkbox", param_key: "person", category: category,
                          checked: @person.category_ids.include?(category.id),
-                         is_age: is_age,
-                         primary_checked: is_age && primary_age_ids.include?(category.id) %>
+                         is_age: false,
+                         primary_checked: false %>
             <% end %>
           </div>
         </div>
diff --git a/app/views/people/show.html.erb b/app/views/people/show.html.erb
index d8fdc59d3b..473a22a8b6 100644
--- a/app/views/people/show.html.erb
+++ b/app/views/people/show.html.erb
@@ -131,38 +131,45 @@
               <% end %>
             </div>
           <% end %>
-          <!-- Sectors -->
-          <% if @person.profile_show_sectors? %>
-            <%# One combined list: the primary sector leads as a darker-green starred
-                chip, followed by the additional sectors alphabetically and any
-                free-text "Other" responses. %>
-            <% sectorable_items = @person.sectorable_items.includes(:sector).sort_by { |si| [ si.is_primary? ? 0 : 1, si.sector&.name.to_s.downcase ] } %>
-            <% other_sectors = @person.other_sector_responses %>
-            <div class="md:col-span-2 p-3">
-              <h2 class="text-lg font-semibold text-gray-800 mb-3">Sectors</h2>
-              <% if sectorable_items.any? || other_sectors.any? %>
-                <div class="flex flex-wrap gap-2">
-                  <% sectorable_items.each do |si| %>
-                    <%= render "sectors/tagging_label",
-                                 sector: si.sector,
-                                 is_primary: si.is_primary?,
-                                 display_leader: true,
-                                 is_leader: si.is_leader %>
-                  <% end %>
-                  <%= render "people/other_responses", responses: other_sectors %>
-                </div>
-              <% else %>
-                <p class="text-gray-500 italic">None selected.</p>
-              <% end %>
-            </div>
-          <% end %>
-          <!-- Age groups served -->
+          <!-- Sectors + Age ranges (two columns; age ranges is the thinner column) -->
+          <% sectorable_items = @person.sectorable_items.includes(:sector).sort_by { |si| [ si.is_primary? ? 0 : 1, si.sector&.name.to_s.downcase ] } %>
+          <% other_sectors = @person.other_sector_responses %>
+          <% show_sectors = @person.profile_show_sectors? %>
           <% primary_age_groups = @person.primary_age_groups.to_a %>
           <% additional_age_groups = @person.additional_age_groups.to_a %>
-          <% if primary_age_groups.any? || additional_age_groups.any? %>
+          <% show_age = primary_age_groups.any? || additional_age_groups.any? %>
+          <% if show_sectors || show_age %>
             <div class="md:col-span-2 p-3">
-              <h2 class="text-lg font-semibold text-gray-800 mb-3">Age groups served</h2>
-              <%= render "shared/age_group_tags", primary: primary_age_groups, additional: additional_age_groups %>
+              <div class="flex gap-4 items-start">
+                <% if show_sectors %>
+                  <%# One combined list: the primary sector leads as a darker-green
+                      starred chip, then additional sectors alphabetically and any
+                      free-text "Other" responses. %>
+                  <div class="flex-1 min-w-0">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-3">Sectors</h2>
+                    <% if sectorable_items.any? || other_sectors.any? %>
+                      <div class="flex flex-wrap gap-2">
+                        <% sectorable_items.each do |si| %>
+                          <%= render "sectors/tagging_label",
+                                       sector: si.sector,
+                                       is_primary: si.is_primary?,
+                                       display_leader: true,
+                                       is_leader: si.is_leader %>
+                        <% end %>
+                        <%= render "people/other_responses", responses: other_sectors %>
+                      </div>
+                    <% else %>
+                      <p class="text-gray-500 italic">None selected.</p>
+                    <% end %>
+                  </div>
+                <% end %>
+                <% if show_age %>
+                  <div class="w-32 flex-shrink-0">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-3">Age ranges</h2>
+                    <%= render "shared/age_group_tags", primary: primary_age_groups, additional: additional_age_groups, compact: true %>
+                  </div>
+                <% end %>
+              </div>
             </div>
           <% end %>
         </div>

From 00ace8b3b059c61545f9c0be8d6c2f65524e9fbe Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:02:38 -0400
Subject: [PATCH 2/8] Add a sectors-style age-range chip editor to the person
 form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AgeRange isn't a profile_specific category type, so the person edit form
never actually showed an age-range editor — age groups could only be set
via registration. Add one that mirrors the sector chip UI: add/remove
chips with a primary star, but multi-select primaries (a person serves
several primary age groups) and no leader flag. On the profile, sectors
and age ranges render as two columns; on the form they split 50/50 and
wrap as the viewport narrows.

Saving the form previously did `categories = submitted ids`, which would
wipe every category type the form doesn't show. Scope replacement to the
types the form actually edits (via managed_category_type_ids) so a
person's non-AgeRange taggings — and their is_primary/legacy_id — survive
untouched. Drop category_ids from strong params so assign_attributes no
longer pre-wipes categories before assign_associations runs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 AGENTS.md                                     |  3 +-
 app/controllers/concerns/tag_assignable.rb    | 14 +++-
 app/controllers/people_controller.rb          | 13 ++-
 .../age_range_picker_controller.js            | 54 ++++++++++++
 app/frontend/javascript/controllers/index.js  |  3 +
 app/views/people/_age_range_chip.html.erb     | 30 +++++++
 app/views/people/_form.html.erb               | 54 +++++++-----
 spec/requests/people_age_ranges_spec.rb       | 84 +++++++++++++++++++
 8 files changed, 233 insertions(+), 22 deletions(-)
 create mode 100644 app/frontend/javascript/controllers/age_range_picker_controller.js
 create mode 100644 app/views/people/_age_range_chip.html.erb
 create mode 100644 spec/requests/people_age_ranges_spec.rb

diff --git a/AGENTS.md b/AGENTS.md
index df764e7b9f..69be191590 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -71,7 +71,7 @@ This codebase (Rails 8.1)
 | Directory | Purpose |
 |---|---|
 | `app/frontend/entrypoints/` | Vite entry points (application.js, application.css) |
-| `app/frontend/javascript/controllers/` | Stimulus controllers (74) |
+| `app/frontend/javascript/controllers/` | Stimulus controllers (75) |
 | `app/frontend/javascript/rhino/` | Rich text editor customizations (mentions, grid) |
 | `app/frontend/stylesheets/` | Tailwind CSS and component styles |
 
@@ -268,6 +268,7 @@ end
 
 - `address_select` — Compact numbered picker linking an affiliation to an org address
 - `affiliation_dates` — Recalculate affiliation date ranges
+- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + multi-primary star, no leader)
 - `anchor_highlight` — Highlight anchored elements
 - `asset_picker` — Asset selection UI
 - `autosave` — Auto-save form state
diff --git a/app/controllers/concerns/tag_assignable.rb b/app/controllers/concerns/tag_assignable.rb
index ed50437548..8b4a932750 100644
--- a/app/controllers/concerns/tag_assignable.rb
+++ b/app/controllers/concerns/tag_assignable.rb
@@ -7,7 +7,19 @@ def assign_associations(record, param_key: nil)
     key = param_key || record.model_name.param_key
 
     selected_category_ids = Array(params[key][:category_ids]).reject(&:blank?).map(&:to_i)
-    record.categories = Category.where(id: selected_category_ids)
+    selected = Category.where(id: selected_category_ids).to_a
+
+    if params[key].key?(:managed_category_type_ids)
+      # The form only edits certain category types (e.g. age ranges + workshop
+      # settings). Preserve taggings of every other type the form never shows so
+      # saving can't silently drop them — and assign the union so the join rows
+      # for preserved categories stay intact (is_primary/legacy_id untouched).
+      managed_type_ids = Array(params[key][:managed_category_type_ids]).reject(&:blank?).map(&:to_i)
+      preserved = record.categories.reject { |category| managed_type_ids.include?(category.category_type_id) }
+      record.categories = (preserved + selected).uniq
+    else
+      record.categories = selected
+    end
 
     if params[key].key?(:sector_ids)
       selected_sector_ids = Array(params[key][:sector_ids]).reject(&:blank?).map(&:to_i)
diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb
index e698aa54eb..f975e0cb8c 100644
--- a/app/controllers/people_controller.rb
+++ b/app/controllers/people_controller.rb
@@ -280,6 +280,18 @@ def set_form_variables
       .group_by(&:category_type)
       .select { |type, _| type&.profile_specific? }
       .sort_by { |type, _| type&.name.to_s.downcase }
+
+    # Age ranges edit as their own sectors-style chip picker (AgeRange isn't a
+    # profile_specific type, so it never appears in @person_categories_grouped).
+    @age_range_type = CategoryType.find_by(name: AgeGroupTaggable::AGE_RANGE_CATEGORY_TYPE)
+    @age_ranges_collection = @age_range_type ? @age_range_type.categories.published.order(:position, :name) : Category.none
+
+    # The category types this form actually edits — age ranges plus every
+    # profile-specific type shown above. assign_associations preserves taggings
+    # of any other type, so saving the form can't drop a person's non-AgeRange
+    # category connections (e.g. art types tagged elsewhere).
+    @managed_category_type_ids = ([ @age_range_type&.id ] +
+      @person_categories_grouped.map { |type, _| type.id }).compact.uniq
   end
 
   def find_duplicate_people(first_name, last_name, email)
@@ -423,7 +435,6 @@ def person_params
       :youtube_url,
       :twitter_url,
       :created_by_id, :updated_by_id,
-      category_ids: [],
       sectorable_items_attributes: [ :id, :sector_id, :is_leader, :is_primary, :_destroy ],
       addresses_attributes: [
         :id,
diff --git a/app/frontend/javascript/controllers/age_range_picker_controller.js b/app/frontend/javascript/controllers/age_range_picker_controller.js
new file mode 100644
index 0000000000..f1408277d2
--- /dev/null
+++ b/app/frontend/javascript/controllers/age_range_picker_controller.js
@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Drives the age-range chip editor on the person form. Mirrors the sector chip
+// UI (add/remove + a primary star) but a person can serve several primary age
+// groups, so the star toggles are independent — unlike primary_sector, which is
+// single-select — and there is no leader/crown flag. New chips are cloned from a
+// <template> so their markup stays defined once in the ERB partial. Each chip
+// writes person[category_ids][] and, when starred, person[primary_age_category_ids][].
+export default class extends Controller {
+  static targets = ["select", "template", "chip"]
+
+  connect() {
+    this.refreshSelect()
+  }
+
+  add(event) {
+    const select = event.target
+    const id = select.value
+    if (!id) return
+    const name = select.options[select.selectedIndex].text
+    const html = this.templateTarget.innerHTML
+      .replaceAll("__ID__", id)
+      .replaceAll("__NAME__", name)
+    select.insertAdjacentHTML("beforebegin", html)
+    select.value = ""
+    this.refreshSelect()
+  }
+
+  remove(event) {
+    event.target.closest("[data-age-range-picker-target='chip']")?.remove()
+    this.refreshSelect()
+  }
+
+  // Darken the chip while it is a primary age group, matching the sector chip's
+  // starred styling.
+  togglePrimary(event) {
+    const chip = event.target.closest("[data-age-range-picker-target='chip']")
+    if (!chip) return
+    const primary = event.target.checked
+    chip.classList.toggle("bg-amber-50", primary)
+    chip.classList.toggle("border-amber-300", primary)
+    chip.classList.toggle("bg-white", !primary)
+    chip.classList.toggle("border-gray-300", !primary)
+  }
+
+  // Hide options already chosen so each age range can be added at most once.
+  refreshSelect() {
+    const chosen = this.chipTargets.map((chip) => chip.dataset.categoryId)
+    Array.from(this.selectTarget.options).forEach((option) => {
+      if (!option.value) return
+      option.hidden = chosen.includes(option.value)
+    })
+  }
+}
diff --git a/app/frontend/javascript/controllers/index.js b/app/frontend/javascript/controllers/index.js
index 62b3cebdea..f071888d65 100644
--- a/app/frontend/javascript/controllers/index.js
+++ b/app/frontend/javascript/controllers/index.js
@@ -9,6 +9,9 @@ application.register("affiliation-dates", AffiliationDatesController)
 import AffiliationFacilitatorWarningController from "./affiliation_facilitator_warning_controller"
 application.register("affiliation-facilitator-warning", AffiliationFacilitatorWarningController)
 
+import AgeRangePickerController from "./age_range_picker_controller"
+application.register("age-range-picker", AgeRangePickerController)
+
 import AllocationRefController from "./allocation_ref_controller"
 application.register("allocation-ref", AllocationRefController)
 
diff --git a/app/views/people/_age_range_chip.html.erb b/app/views/people/_age_range_chip.html.erb
new file mode 100644
index 0000000000..247ea9b034
--- /dev/null
+++ b/app/views/people/_age_range_chip.html.erb
@@ -0,0 +1,30 @@
+<%# A single age-range chip in the person form's age picker. Mirrors the sector
+    chip (shared/_sectorable_item_fields): the name, a primary star, and a remove
+    ✖. Unlike sectors, a person can serve several primary age groups, so the star
+    is multi-select and there is no leader/crown flag. Writes person[category_ids][]
+    (membership) and, when starred, person[primary_age_category_ids][] so it round-
+    trips through the existing TagAssignable flow. category_id/category_name are
+    "__ID__"/"__NAME__" placeholders when rendered into the add <template>. %>
+<% is_primary = local_assigns.fetch(:is_primary, false) %>
+<div class="inline-flex items-center gap-2 rounded-md border
+            <%= is_primary ? "border-amber-300 bg-amber-50" : "border-gray-300 bg-white" %>
+            text-gray-700 px-3 py-1 text-sm font-medium transition"
+     data-age-range-picker-target="chip"
+     data-category-id="<%= category_id %>">
+  <input type="hidden" name="person[category_ids][]" value="<%= category_id %>">
+  <span><%= category_name %></span>
+  <label class="cursor-pointer leading-none" title="Mark as a primary age group served">
+    <input type="checkbox"
+           name="person[primary_age_category_ids][]"
+           value="<%= category_id %>"
+           class="peer sr-only"
+           <%= "checked" if is_primary %>
+           data-action="age-range-picker#togglePrimary">
+    <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
+    <span class="sr-only">Primary</span>
+  </label>
+  <button type="button"
+          data-action="age-range-picker#remove"
+          class="ml-0.5 text-gray-400 hover:text-gray-600 font-bold text-xs transition"
+          aria-label="Remove age range">✖</button>
+</div>
diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index 0c42b8ce02..92423a8719 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -116,12 +116,16 @@
     </div>
   </div>
 
-  <!-- Sectors + Age ranges (side by side; age ranges is the thinner column) -->
-  <% age_type, age_cats = (@person_categories_grouped || {}).find { |type, _| type.name == "AgeRange" } %>
-  <% primary_age_ids = @person.primary_age_category_ids %>
-  <div class="flex flex-col lg:flex-row gap-4 items-start">
+  <!-- Sectors + Age ranges (split width; both wrap their chips) -->
+  <%# Tells the controller which category types this form edits, so saving only
+      replaces age-range and workshop-setting taggings and preserves any other
+      type the form never shows. %>
+  <% (@managed_category_type_ids || []).each do |type_id| %>
+    <%= hidden_field_tag "person[managed_category_type_ids][]", type_id %>
+  <% end %>
+  <div class="flex flex-wrap gap-4 items-start">
     <!-- Sectors -->
-    <div class="form-group space-y-4 w-full lg:flex-1">
+    <div class="form-group space-y-4 flex-1 min-w-[20rem]">
       <div class="font-semibold text-gray-700 mb-2">
         Sectors
       </div>
@@ -147,24 +151,36 @@
     </div>
 
     <!-- Age ranges -->
-    <% if age_type %>
-      <div class="form-group space-y-4 w-full lg:w-80 lg:flex-shrink-0">
+    <% if @age_ranges_collection.present? %>
+      <div class="form-group space-y-4 flex-1 min-w-[20rem]">
         <div class="font-semibold text-gray-700 mb-2">
-          <%= age_type.display_label %>
+          Age ranges
         </div>
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-4 shadow-sm">
-          <%# Ensures the primary-age param is always submitted so unchecking every
-              toggle clears the primary flags. %>
+        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-4 shadow-sm
+                    flex flex-wrap items-center gap-2"
+             data-controller="age-range-picker">
+          <%# Always submit empty values so removing every chip clears the
+              membership and primary taggings. %>
+          <%= hidden_field_tag "person[category_ids][]", "" %>
           <%= hidden_field_tag "person[primary_age_category_ids][]", "" %>
-          <p class="text-sm text-gray-500 mb-3">Check every age group served, then mark the primary ones.</p>
-          <div class="flex flex-wrap gap-3">
-            <% age_cats.each do |category| %>
-              <%= render "shared/category_checkbox", param_key: "person", category: category,
-                         checked: @person.category_ids.include?(category.id),
-                         is_age: true,
-                         primary_checked: primary_age_ids.include?(category.id) %>
+
+          <% @person.primary_age_groups.each do |category| %>
+            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: true %>
+          <% end %>
+          <% @person.additional_age_groups.each do |category| %>
+            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: false %>
+          <% end %>
+
+          <select data-age-range-picker-target="select"
+                  data-action="age-range-picker#add"
+                  class="rounded-md border border-gray-300 bg-white text-sm text-gray-600 px-3 py-1.5 cursor-pointer focus:ring-0">
+            <option value="">➕ Add age range</option>
+            <% @age_ranges_collection.each do |category| %>
+              <option value="<%= category.id %>"><%= category.name %></option>
             <% end %>
-          </div>
+          </select>
+
+          <template data-age-range-picker-target="template"><%= render "people/age_range_chip", category_id: "__ID__", category_name: "__NAME__", is_primary: false %></template>
         </div>
       </div>
     <% end %>
diff --git a/spec/requests/people_age_ranges_spec.rb b/spec/requests/people_age_ranges_spec.rb
new file mode 100644
index 0000000000..ca4c99da7f
--- /dev/null
+++ b/spec/requests/people_age_ranges_spec.rb
@@ -0,0 +1,84 @@
+require "rails_helper"
+
+RSpec.describe "Person age ranges", type: :request do
+  let(:admin) { create(:user, :admin) }
+  let(:person) { create(:person) }
+
+  # AgeGroupTaggable matches the type by the exact name "AgeRange".
+  let(:age_type) { create(:category_type, :published, name: "AgeRange") }
+  let!(:children) { create(:category, :published, category_type: age_type, name: "Children (0-12)") }
+  let!(:adults) { create(:category, :published, category_type: age_type, name: "Adults (18+)") }
+
+  # A category of some other type that the person form never shows.
+  let(:art_type) { create(:category_type, :published, name: "ArtType") }
+  let(:clay) { create(:category, :published, category_type: art_type, name: "Clay") }
+
+  before { sign_in admin }
+
+  def update_person(category_ids:, primary_age_category_ids: [])
+    patch person_path(person), params: {
+      person: {
+        first_name: person.first_name,
+        category_ids: category_ids,
+        primary_age_category_ids: primary_age_category_ids,
+        managed_category_type_ids: [ age_type.id ]
+      }
+    }
+  end
+
+  describe "edit form" do
+    it "renders the age-range chip picker with every published age range" do
+      get edit_person_path(person)
+
+      expect(response.body).to include("age-range-picker")
+      expect(response.body).to include("Children (0-12)")
+      expect(response.body).to include("Adults (18+)")
+    end
+  end
+
+  describe "saving age ranges" do
+    it "tags the selected age ranges and marks the chosen ones primary" do
+      update_person(category_ids: [ children.id, adults.id ], primary_age_category_ids: [ children.id ])
+
+      person.reload
+      expect(person.primary_age_groups).to contain_exactly(children)
+      expect(person.additional_age_groups).to contain_exactly(adults)
+    end
+  end
+
+  describe "preserving non-AgeRange category connections" do
+    before do
+      person.categories << clay
+      # Give the Clay tagging a primary flag so we can prove it is left untouched.
+      person.categorizable_items.find_by(category: clay).update!(is_primary: true)
+    end
+
+    it "does not delete or edit the person's non-AgeRange category connections" do
+      original_item = person.categorizable_items.find_by(category: clay)
+
+      # The form only ever submits age-range ids in category_ids — Clay is not on
+      # the form. Saving must keep it anyway.
+      update_person(category_ids: [ children.id ], primary_age_category_ids: [ children.id ])
+
+      person.reload
+      expect(person.categories).to include(clay)
+
+      surviving_item = person.categorizable_items.find_by(category: clay)
+      # Same row (not destroyed + recreated) and its primary flag is unchanged.
+      expect(surviving_item.id).to eq(original_item.id)
+      expect(surviving_item.is_primary).to be(true)
+
+      # And the age ranges were still applied alongside the preserved tagging.
+      expect(person.primary_age_groups).to contain_exactly(children)
+    end
+
+    it "clears age ranges without touching the non-AgeRange tagging" do
+      update_person(category_ids: [ "" ])
+
+      person.reload
+      expect(person.primary_age_groups).to be_empty
+      expect(person.additional_age_groups).to be_empty
+      expect(person.categories).to include(clay)
+    end
+  end
+end

From 494acbea7d2e9bd5c72847ae5ae4a752d0666d56 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:08:44 -0400
Subject: [PATCH 3/8] Match age-range picker to the sector chip box (equal
 height, button add)

Make the two boxes equal height by stretching each column and letting the
card grow (flex-col + flex-1 + content-start). Replace the age-range add
<select> with an "Add age range" button styled and behaving like cocoon's
"Add Sector": it inserts a chip containing a picker, the controller keys
the chip's primary star to the chosen id and stops a range being added
twice, and disables the button once every range is in use.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../age_range_picker_controller.js            | 63 ++++++++++++-------
 app/views/people/_age_range_chip.html.erb     | 14 ++---
 .../people/_age_range_new_field.html.erb      | 28 +++++++++
 app/views/people/_form.html.erb               | 30 +++++----
 4 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 app/views/people/_age_range_new_field.html.erb

diff --git a/app/frontend/javascript/controllers/age_range_picker_controller.js b/app/frontend/javascript/controllers/age_range_picker_controller.js
index f1408277d2..3d9505d306 100644
--- a/app/frontend/javascript/controllers/age_range_picker_controller.js
+++ b/app/frontend/javascript/controllers/age_range_picker_controller.js
@@ -1,34 +1,42 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Drives the age-range chip editor on the person form. Mirrors the sector chip
-// UI (add/remove + a primary star) but a person can serve several primary age
-// groups, so the star toggles are independent — unlike primary_sector, which is
-// single-select — and there is no leader/crown flag. New chips are cloned from a
-// <template> so their markup stays defined once in the ERB partial. Each chip
-// writes person[category_ids][] and, when starred, person[primary_age_category_ids][].
+// UI: the "Add age range" button inserts a new chip with a select (like cocoon's
+// "Add Sector"), persisted chips show the name as a span. A person can serve
+// several primary age groups, so the star toggles are independent — unlike
+// primary_sector, which is single-select — and there is no leader/crown flag.
+// New chips are cloned from a <template> so their markup stays defined once in
+// the ERB partial. Each chip writes person[category_ids][] and, when starred,
+// person[primary_age_category_ids][].
 export default class extends Controller {
-  static targets = ["select", "template", "chip"]
+  static targets = ["addButton", "template", "chip", "chipSelect", "primaryToggle"]
+  static values = { total: Number }
 
   connect() {
-    this.refreshSelect()
+    this.refreshOptions()
   }
 
-  add(event) {
+  add() {
+    const chip = this.templateTarget.content.firstElementChild.cloneNode(true)
+    this.addButtonTarget.insertAdjacentElement("beforebegin", chip)
+    chip.querySelector("[data-age-range-picker-target='chipSelect']")?.focus()
+    this.refreshOptions()
+  }
+
+  // A new chip's range was chosen: key its primary star to that id (so starring
+  // submits the right category) and re-filter the other selects.
+  choose(event) {
     const select = event.target
-    const id = select.value
-    if (!id) return
-    const name = select.options[select.selectedIndex].text
-    const html = this.templateTarget.innerHTML
-      .replaceAll("__ID__", id)
-      .replaceAll("__NAME__", name)
-    select.insertAdjacentHTML("beforebegin", html)
-    select.value = ""
-    this.refreshSelect()
+    const chip = select.closest("[data-age-range-picker-target='chip']")
+    chip.dataset.categoryId = select.value
+    const toggle = chip.querySelector("[data-age-range-picker-target='primaryToggle']")
+    if (toggle) toggle.value = select.value
+    this.refreshOptions()
   }
 
   remove(event) {
     event.target.closest("[data-age-range-picker-target='chip']")?.remove()
-    this.refreshSelect()
+    this.refreshOptions()
   }
 
   // Darken the chip while it is a primary age group, matching the sector chip's
@@ -43,12 +51,19 @@ export default class extends Controller {
     chip.classList.toggle("border-gray-300", !primary)
   }
 
-  // Hide options already chosen so each age range can be added at most once.
-  refreshSelect() {
-    const chosen = this.chipTargets.map((chip) => chip.dataset.categoryId)
-    Array.from(this.selectTarget.options).forEach((option) => {
-      if (!option.value) return
-      option.hidden = chosen.includes(option.value)
+  // Keep each picker from offering a range already chosen by another chip, and
+  // disable the add button once every range is in use.
+  refreshOptions() {
+    const chosen = this.chipTargets.map((chip) => chip.dataset.categoryId).filter((id) => id)
+    this.chipSelectTargets.forEach((select) => {
+      Array.from(select.options).forEach((option) => {
+        if (!option.value) return
+        option.hidden = option.value !== select.value && chosen.includes(option.value)
+      })
     })
+    const exhausted = chosen.length >= this.totalValue
+    this.addButtonTarget.disabled = exhausted
+    this.addButtonTarget.classList.toggle("opacity-50", exhausted)
+    this.addButtonTarget.classList.toggle("pointer-events-none", exhausted)
   }
 }
diff --git a/app/views/people/_age_range_chip.html.erb b/app/views/people/_age_range_chip.html.erb
index 247ea9b034..d97c868c5f 100644
--- a/app/views/people/_age_range_chip.html.erb
+++ b/app/views/people/_age_range_chip.html.erb
@@ -1,10 +1,10 @@
-<%# A single age-range chip in the person form's age picker. Mirrors the sector
-    chip (shared/_sectorable_item_fields): the name, a primary star, and a remove
-    ✖. Unlike sectors, a person can serve several primary age groups, so the star
-    is multi-select and there is no leader/crown flag. Writes person[category_ids][]
-    (membership) and, when starred, person[primary_age_category_ids][] so it round-
-    trips through the existing TagAssignable flow. category_id/category_name are
-    "__ID__"/"__NAME__" placeholders when rendered into the add <template>. %>
+<%# A persisted age-range chip in the person form's age picker — the read-only
+    form a saved sector chip takes (name span, not a select). Mirrors the sector
+    chip: the name, a primary star, and a remove ✖. Unlike sectors, a person can
+    serve several primary age groups, so the star is multi-select and there is no
+    leader/crown flag. Writes person[category_ids][] (membership) and, when
+    starred, person[primary_age_category_ids][]. New (unsaved) chips use
+    people/_age_range_new_field instead, which offers a select. %>
 <% is_primary = local_assigns.fetch(:is_primary, false) %>
 <div class="inline-flex items-center gap-2 rounded-md border
             <%= is_primary ? "border-amber-300 bg-amber-50" : "border-gray-300 bg-white" %>
diff --git a/app/views/people/_age_range_new_field.html.erb b/app/views/people/_age_range_new_field.html.erb
new file mode 100644
index 0000000000..9cc325690a
--- /dev/null
+++ b/app/views/people/_age_range_new_field.html.erb
@@ -0,0 +1,28 @@
+<%# The blank age-range chip the "Add age range" button inserts — mirrors a new
+    sector chip (shared/_sectorable_item_fields with no sector_id): a select to
+    pick an unused range, a primary star, and a remove ✖. Lives in a <template>;
+    the age-range-picker controller clones it on add and keys the star's value to
+    the chosen category id on select. %>
+<div class="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white
+            text-gray-700 px-3 py-1 text-sm font-medium transition"
+     data-age-range-picker-target="chip"
+     data-category-id="">
+  <%= select_tag "person[category_ids][]",
+                 options_for_select([ [ "Select age range…", "" ] ] + @age_ranges_collection.map { |category| [ category.name, category.id ] }),
+                 data: { age_range_picker_target: "chipSelect", action: "age-range-picker#choose" },
+                 class: "bg-transparent border-none focus:ring-0 text-sm text-gray-500 cursor-pointer py-0" %>
+  <label class="cursor-pointer leading-none" title="Mark as a primary age group served">
+    <input type="checkbox"
+           name="person[primary_age_category_ids][]"
+           value=""
+           class="peer sr-only"
+           data-age-range-picker-target="primaryToggle"
+           data-action="age-range-picker#togglePrimary">
+    <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
+    <span class="sr-only">Primary</span>
+  </label>
+  <button type="button"
+          data-action="age-range-picker#remove"
+          class="ml-0.5 text-gray-400 hover:text-gray-600 font-bold text-xs transition"
+          aria-label="Remove age range">✖</button>
+</div>
diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index 92423a8719..bbb86c807f 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -123,14 +123,14 @@
   <% (@managed_category_type_ids || []).each do |type_id| %>
     <%= hidden_field_tag "person[managed_category_type_ids][]", type_id %>
   <% end %>
-  <div class="flex flex-wrap gap-4 items-start">
+  <div class="flex flex-wrap gap-4 items-stretch">
     <!-- Sectors -->
-    <div class="form-group space-y-4 flex-1 min-w-[20rem]">
+    <div class="form-group flex flex-col flex-1 min-w-[20rem]">
       <div class="font-semibold text-gray-700 mb-2">
         Sectors
       </div>
-      <div class="rounded-lg border border-gray-200 <%= DomainTheme.bg_class_for(:sectors) %> p-4 mb-4 shadow-sm
-                  flex flex-wrap items-center gap-2"
+      <div class="rounded-lg border border-gray-200 <%= DomainTheme.bg_class_for(:sectors) %> p-4 shadow-sm
+                  flex flex-wrap items-center content-start gap-2 flex-1"
            data-controller="primary-sector">
         <% sectors_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
         <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_primary_first do |sfi| %>
@@ -152,13 +152,14 @@
 
     <!-- Age ranges -->
     <% if @age_ranges_collection.present? %>
-      <div class="form-group space-y-4 flex-1 min-w-[20rem]">
+      <div class="form-group flex flex-col flex-1 min-w-[20rem]">
         <div class="font-semibold text-gray-700 mb-2">
           Age ranges
         </div>
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-4 shadow-sm
-                    flex flex-wrap items-center gap-2"
-             data-controller="age-range-picker">
+        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm
+                    flex flex-wrap items-center content-start gap-2 flex-1"
+             data-controller="age-range-picker"
+             data-age-range-picker-total-value="<%= @age_ranges_collection.size %>">
           <%# Always submit empty values so removing every chip clears the
               membership and primary taggings. %>
           <%= hidden_field_tag "person[category_ids][]", "" %>
@@ -171,16 +172,13 @@
             <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: false %>
           <% end %>
 
-          <select data-age-range-picker-target="select"
+          <%# Mirrors "Add Sector": a button that inserts a chip with a picker. %>
+          <button type="button"
                   data-action="age-range-picker#add"
-                  class="rounded-md border border-gray-300 bg-white text-sm text-gray-600 px-3 py-1.5 cursor-pointer focus:ring-0">
-            <option value="">➕ Add age range</option>
-            <% @age_ranges_collection.each do |category| %>
-              <option value="<%= category.id %>"><%= category.name %></option>
-            <% end %>
-          </select>
+                  data-age-range-picker-target="addButton"
+                  class="btn btn-secondary-outline">➕ Add age range</button>
 
-          <template data-age-range-picker-target="template"><%= render "people/age_range_chip", category_id: "__ID__", category_name: "__NAME__", is_primary: false %></template>
+          <template data-age-range-picker-target="template"><%= render "people/age_range_new_field" %></template>
         </div>
       </div>
     <% end %>

From 551ce4f0b5c6e10f3fe6709e8bc51fd8efbcb4d9 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:12:08 -0400
Subject: [PATCH 4/8] Make age-range primary star single-select, floating to
 front
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match primary_sector: lighting one star clears the others and prepends
that chip, so a person has at most one primary age range. Registration's
"primary age group" is itself a single-select dropdown, so the data never
has more than one primary — the edit UI now reflects that.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 AGENTS.md                                     |  2 +-
 .../age_range_picker_controller.js            | 48 +++++++++++++------
 app/views/people/_age_range_chip.html.erb     |  9 ++--
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 69be191590..24e004f687 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -268,7 +268,7 @@ end
 
 - `address_select` — Compact numbered picker linking an affiliation to an org address
 - `affiliation_dates` — Recalculate affiliation date ranges
-- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + multi-primary star, no leader)
+- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + single-primary star that floats to front, no leader)
 - `anchor_highlight` — Highlight anchored elements
 - `asset_picker` — Asset selection UI
 - `autosave` — Auto-save form state
diff --git a/app/frontend/javascript/controllers/age_range_picker_controller.js b/app/frontend/javascript/controllers/age_range_picker_controller.js
index 3d9505d306..ed5018789b 100644
--- a/app/frontend/javascript/controllers/age_range_picker_controller.js
+++ b/app/frontend/javascript/controllers/age_range_picker_controller.js
@@ -2,18 +2,18 @@ import { Controller } from "@hotwired/stimulus"
 
 // Drives the age-range chip editor on the person form. Mirrors the sector chip
 // UI: the "Add age range" button inserts a new chip with a select (like cocoon's
-// "Add Sector"), persisted chips show the name as a span. A person can serve
-// several primary age groups, so the star toggles are independent — unlike
-// primary_sector, which is single-select — and there is no leader/crown flag.
-// New chips are cloned from a <template> so their markup stays defined once in
-// the ERB partial. Each chip writes person[category_ids][] and, when starred,
-// person[primary_age_category_ids][].
+// "Add Sector"), persisted chips show the name as a span, and the primary star is
+// single-select — lighting one clears the others and floats it to the front, the
+// same as primary_sector — with no leader/crown flag. New chips are cloned from a
+// <template> so their markup stays defined once in the ERB partial. Each chip
+// writes person[category_ids][] and, when starred, person[primary_age_category_ids][].
 export default class extends Controller {
   static targets = ["addButton", "template", "chip", "chipSelect", "primaryToggle"]
   static values = { total: Number }
 
   connect() {
     this.refreshOptions()
+    this.style()
   }
 
   add() {
@@ -39,16 +39,34 @@ export default class extends Controller {
     this.refreshOptions()
   }
 
-  // Darken the chip while it is a primary age group, matching the sector chip's
-  // starred styling.
+  // Single-select primary: lighting one star clears the others and floats that
+  // chip to the front, mirroring primary_sector#selectPrimary.
   togglePrimary(event) {
-    const chip = event.target.closest("[data-age-range-picker-target='chip']")
-    if (!chip) return
-    const primary = event.target.checked
-    chip.classList.toggle("bg-amber-50", primary)
-    chip.classList.toggle("border-amber-300", primary)
-    chip.classList.toggle("bg-white", !primary)
-    chip.classList.toggle("border-gray-300", !primary)
+    if (event.target.checked) {
+      this.primaryToggleTargets.forEach((toggle) => {
+        if (toggle !== event.target) toggle.checked = false
+      })
+      this.moveToFront(event.target)
+    }
+    this.style()
+  }
+
+  moveToFront(toggle) {
+    const chip = toggle.closest("[data-age-range-picker-target='chip']")
+    if (chip) this.element.prepend(chip)
+  }
+
+  // Darken whichever chip is primary, matching the sector chip's starred styling.
+  style() {
+    this.primaryToggleTargets.forEach((toggle) => {
+      const chip = toggle.closest("[data-age-range-picker-target='chip']")
+      if (!chip) return
+      const primary = toggle.checked
+      chip.classList.toggle("bg-amber-50", primary)
+      chip.classList.toggle("border-amber-300", primary)
+      chip.classList.toggle("bg-white", !primary)
+      chip.classList.toggle("border-gray-300", !primary)
+    })
   }
 
   // Keep each picker from offering a range already chosen by another chip, and
diff --git a/app/views/people/_age_range_chip.html.erb b/app/views/people/_age_range_chip.html.erb
index d97c868c5f..bd56599863 100644
--- a/app/views/people/_age_range_chip.html.erb
+++ b/app/views/people/_age_range_chip.html.erb
@@ -1,9 +1,9 @@
 <%# A persisted age-range chip in the person form's age picker — the read-only
     form a saved sector chip takes (name span, not a select). Mirrors the sector
-    chip: the name, a primary star, and a remove ✖. Unlike sectors, a person can
-    serve several primary age groups, so the star is multi-select and there is no
-    leader/crown flag. Writes person[category_ids][] (membership) and, when
-    starred, person[primary_age_category_ids][]. New (unsaved) chips use
+    chip: the name, a single-select primary star (lighting one clears the others
+    and floats it to front), and a remove ✖. No leader/crown flag. Writes
+    person[category_ids][] (membership) and, when starred,
+    person[primary_age_category_ids][]. New (unsaved) chips use
     people/_age_range_new_field instead, which offers a select. %>
 <% is_primary = local_assigns.fetch(:is_primary, false) %>
 <div class="inline-flex items-center gap-2 rounded-md border
@@ -19,6 +19,7 @@
            value="<%= category_id %>"
            class="peer sr-only"
            <%= "checked" if is_primary %>
+           data-age-range-picker-target="primaryToggle"
            data-action="age-range-picker#togglePrimary">
     <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
     <span class="sr-only">Primary</span>

From 53bf7be26ed2e81737797ba1f3ca532fe30158d3 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:19:08 -0400
Subject: [PATCH 5/8] Keep age-range chips in category position order, no
 reorder

Drop the move-to-front on starring a primary age range and render the
selected ranges merged in category position order instead of primary-first,
so chips don't jump around as you star/unstar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 AGENTS.md                                     |  2 +-
 .../age_range_picker_controller.js            | 19 +++++++------------
 app/views/people/_age_range_chip.html.erb     |  5 +++--
 app/views/people/_form.html.erb               | 12 +++++++-----
 spec/requests/people_age_ranges_spec.rb       | 14 ++++++++++++++
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 24e004f687..71e724fe60 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -268,7 +268,7 @@ end
 
 - `address_select` — Compact numbered picker linking an affiliation to an org address
 - `affiliation_dates` — Recalculate affiliation date ranges
-- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + single-primary star that floats to front, no leader)
+- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + single-primary star, no reorder, no leader)
 - `anchor_highlight` — Highlight anchored elements
 - `asset_picker` — Asset selection UI
 - `autosave` — Auto-save form state
diff --git a/app/frontend/javascript/controllers/age_range_picker_controller.js b/app/frontend/javascript/controllers/age_range_picker_controller.js
index ed5018789b..f42539f286 100644
--- a/app/frontend/javascript/controllers/age_range_picker_controller.js
+++ b/app/frontend/javascript/controllers/age_range_picker_controller.js
@@ -3,10 +3,11 @@ import { Controller } from "@hotwired/stimulus"
 // Drives the age-range chip editor on the person form. Mirrors the sector chip
 // UI: the "Add age range" button inserts a new chip with a select (like cocoon's
 // "Add Sector"), persisted chips show the name as a span, and the primary star is
-// single-select — lighting one clears the others and floats it to the front, the
-// same as primary_sector — with no leader/crown flag. New chips are cloned from a
-// <template> so their markup stays defined once in the ERB partial. Each chip
-// writes person[category_ids][] and, when starred, person[primary_age_category_ids][].
+// single-select — lighting one clears the others — with no leader/crown flag.
+// Unlike primary_sector, chips are NOT reordered: they stay in category position
+// order (the server renders them that way). New chips are cloned from a <template>
+// so their markup stays defined once in the ERB partial. Each chip writes
+// person[category_ids][] and, when starred, person[primary_age_category_ids][].
 export default class extends Controller {
   static targets = ["addButton", "template", "chip", "chipSelect", "primaryToggle"]
   static values = { total: Number }
@@ -39,23 +40,17 @@ export default class extends Controller {
     this.refreshOptions()
   }
 
-  // Single-select primary: lighting one star clears the others and floats that
-  // chip to the front, mirroring primary_sector#selectPrimary.
+  // Single-select primary: lighting one star clears the others. Chips keep their
+  // position order — no reordering, unlike primary_sector.
   togglePrimary(event) {
     if (event.target.checked) {
       this.primaryToggleTargets.forEach((toggle) => {
         if (toggle !== event.target) toggle.checked = false
       })
-      this.moveToFront(event.target)
     }
     this.style()
   }
 
-  moveToFront(toggle) {
-    const chip = toggle.closest("[data-age-range-picker-target='chip']")
-    if (chip) this.element.prepend(chip)
-  }
-
   // Darken whichever chip is primary, matching the sector chip's starred styling.
   style() {
     this.primaryToggleTargets.forEach((toggle) => {
diff --git a/app/views/people/_age_range_chip.html.erb b/app/views/people/_age_range_chip.html.erb
index bd56599863..246a5ac350 100644
--- a/app/views/people/_age_range_chip.html.erb
+++ b/app/views/people/_age_range_chip.html.erb
@@ -1,7 +1,8 @@
 <%# A persisted age-range chip in the person form's age picker — the read-only
     form a saved sector chip takes (name span, not a select). Mirrors the sector
-    chip: the name, a single-select primary star (lighting one clears the others
-    and floats it to front), and a remove ✖. No leader/crown flag. Writes
+    chip: the name, a single-select primary star (lighting one clears the others;
+    chips stay in category position order, no reordering), and a remove ✖. No
+    leader/crown flag. Writes
     person[category_ids][] (membership) and, when starred,
     person[primary_age_category_ids][]. New (unsaved) chips use
     people/_age_range_new_field instead, which offers a select. %>
diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index bbb86c807f..3ed2dfd333 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -165,11 +165,13 @@
           <%= hidden_field_tag "person[category_ids][]", "" %>
           <%= hidden_field_tag "person[primary_age_category_ids][]", "" %>
 
-          <% @person.primary_age_groups.each do |category| %>
-            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: true %>
-          <% end %>
-          <% @person.additional_age_groups.each do |category| %>
-            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: false %>
+          <%# Keep the chips in category position order — don't float the primary
+              to the front. primary_age_groups / additional_age_groups are each
+              already position-sorted, so the merged list re-sorts by position. %>
+          <% primary_age_ids = @person.primary_age_category_ids %>
+          <% selected_age_groups = (@person.primary_age_groups + @person.additional_age_groups).sort_by { |category| [ category.position || 0, category.name.to_s ] } %>
+          <% selected_age_groups.each do |category| %>
+            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: primary_age_ids.include?(category.id) %>
           <% end %>
 
           <%# Mirrors "Add Sector": a button that inserts a chip with a picker. %>
diff --git a/spec/requests/people_age_ranges_spec.rb b/spec/requests/people_age_ranges_spec.rb
index ca4c99da7f..f6a4e17796 100644
--- a/spec/requests/people_age_ranges_spec.rb
+++ b/spec/requests/people_age_ranges_spec.rb
@@ -6,7 +6,9 @@
 
   # AgeGroupTaggable matches the type by the exact name "AgeRange".
   let(:age_type) { create(:category_type, :published, name: "AgeRange") }
+  # Created in order so the positioned gem assigns positions children < teens < adults.
   let!(:children) { create(:category, :published, category_type: age_type, name: "Children (0-12)") }
+  let!(:teens) { create(:category, :published, category_type: age_type, name: "Teens (13-17)") }
   let!(:adults) { create(:category, :published, category_type: age_type, name: "Adults (18+)") }
 
   # A category of some other type that the person form never shows.
@@ -34,6 +36,18 @@ def update_person(category_ids:, primary_age_category_ids: [])
       expect(response.body).to include("Children (0-12)")
       expect(response.body).to include("Adults (18+)")
     end
+
+    it "renders selected age ranges in category position order, not primary first" do
+      person.categories << children << teens << adults
+      # Mark the last-positioned range primary; it must NOT float to the front.
+      person.categorizable_items.find_by(category: adults).update!(is_primary: true)
+
+      get edit_person_path(person)
+
+      body = response.body
+      expect(body.index("Children (0-12)")).to be < body.index("Teens (13-17)")
+      expect(body.index("Teens (13-17)")).to be < body.index("Adults (18+)")
+    end
   end
 
   describe "saving age ranges" do

From 2dbe5a35ce6f4cae7485a279721e32599ffe14eb Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:22:06 -0400
Subject: [PATCH 6/8] Stop floating the primary sector to front on the person
 edit form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror the age-range change for sectors: the edit form now renders sector
chips alphabetically (sectors have no position column) via a new
sectorable_items_ordered, and the primary-sector controller no longer
moves the starred chip to the front — so starring doesn't reshuffle them.
Profile, recipients, and dashboard views keep leading with the primary via
sectorable_items_primary_first.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../controllers/primary_sector_controller.js  | 15 +++++--------
 app/models/concerns/sectors_taggable.rb       | 11 +++++++++-
 app/views/people/_form.html.erb               |  2 +-
 spec/models/concerns/sectors_taggable_spec.rb | 21 +++++++++++++++++++
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/app/frontend/javascript/controllers/primary_sector_controller.js b/app/frontend/javascript/controllers/primary_sector_controller.js
index 9231509e5f..a31b01dc2e 100644
--- a/app/frontend/javascript/controllers/primary_sector_controller.js
+++ b/app/frontend/javascript/controllers/primary_sector_controller.js
@@ -2,8 +2,11 @@ import { Controller } from "@hotwired/stimulus"
 
 // Drives the sector chip editor on the person/organization form. Enforces a
 // single primary sector — lighting one star clears the others — and darkens
-// the starred chip. The leader (crown) flag is independent and multi-select,
-// so it needs no JS and is styled purely via CSS (peer-checked).
+// the starred chip. Chips stay in their rendered (alphabetical) order; the
+// primary is not floated to the top, so starring doesn't reshuffle them.
+// Profile/recipients/dashboard views still lead with the primary on display.
+// The leader (crown) flag is independent and multi-select, so it needs no JS
+// and is styled purely via CSS (peer-checked).
 export default class extends Controller {
   static targets = ["chip", "primary"]
 
@@ -16,18 +19,10 @@ export default class extends Controller {
       this.primaryTargets.forEach((checkbox) => {
         if (checkbox !== event.target) checkbox.checked = false
       })
-      this.moveToFront(event.target)
     }
     this.style()
   }
 
-  // Jump the newly-primary chip to the front, mirroring the primary-first order
-  // the server renders on save.
-  moveToFront(checkbox) {
-    const chip = checkbox.closest("[data-primary-sector-target='chip']")
-    if (chip) this.element.prepend(chip)
-  }
-
   // Reflect each chip's primary state: darker fill and stronger border when set.
   style() {
     this.primaryTargets.forEach((checkbox) => {
diff --git a/app/models/concerns/sectors_taggable.rb b/app/models/concerns/sectors_taggable.rb
index eb6affbf04..14b6bad2e6 100644
--- a/app/models/concerns/sectors_taggable.rb
+++ b/app/models/concerns/sectors_taggable.rb
@@ -12,11 +12,20 @@ module SectorsTaggable
   # Sectorable items ordered for display: the primary sector first, then the
   # rest alphabetically by sector name. Sorts the in-memory association rather
   # than issuing a query, so it stays correct when a form re-renders its
-  # unsaved items after a failed save.
+  # unsaved items after a failed save. Used by profile, recipients, and dashboard
+  # views, where the primary should always lead.
   def sectorable_items_primary_first
     sectorable_items.sort_by { |item| [ item.is_primary? ? 0 : 1, item.sector&.name.to_s.downcase ] }
   end
 
+  # Sectorable items in stable order for the edit form: alphabetically by sector
+  # name (sectors have no position column, so name is the position-equivalent).
+  # Unlike sectorable_items_primary_first, the primary is NOT floated to the top,
+  # so starring a sector on the form doesn't reshuffle the chips.
+  def sectorable_items_ordered
+    sectorable_items.sort_by { |item| item.sector&.name.to_s.downcase }
+  end
+
   # Additively tag sectors as primary/additional without disturbing other
   # taggings — used by registration, where a respondent names a single primary
   # sector (the dropdown) plus any number of additional sectors (the checkboxes).
diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index 3ed2dfd333..0537cff382 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -133,7 +133,7 @@
                   flex flex-wrap items-center content-start gap-2 flex-1"
            data-controller="primary-sector">
         <% sectors_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
-        <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_primary_first do |sfi| %>
+        <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_ordered do |sfi| %>
           <%= render "shared/sectorable_item_fields", f: sfi, show_admin_flags: true %>
         <% end %>
 
diff --git a/spec/models/concerns/sectors_taggable_spec.rb b/spec/models/concerns/sectors_taggable_spec.rb
index 959ac53ae9..ec6e114afe 100644
--- a/spec/models/concerns/sectors_taggable_spec.rb
+++ b/spec/models/concerns/sectors_taggable_spec.rb
@@ -51,4 +51,25 @@
       expect(person.sectorable_items.find_by(sector: health).is_primary).to be true
     end
   end
+
+  describe "ordering" do
+    before do
+      # Healthcare is the primary but sorts last alphabetically.
+      person.sectorable_items.create!(sector: education, is_primary: false)
+      person.sectorable_items.create!(sector: housing, is_primary: false)
+      person.sectorable_items.create!(sector: health, is_primary: true)
+    end
+
+    it "#sectorable_items_primary_first leads with the primary (for display)" do
+      names = person.sectorable_items_primary_first.map { |item| item.sector.name }
+
+      expect(names).to eq([ "Healthcare", "Education", "Housing" ])
+    end
+
+    it "#sectorable_items_ordered keeps alphabetical order, not primary first (for the edit form)" do
+      names = person.sectorable_items_ordered.map { |item| item.sector.name }
+
+      expect(names).to eq([ "Education", "Healthcare", "Housing" ])
+    end
+  end
 end

From 03103e03114424d0dbbbccaff106a5fd2b5b1d4f Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:40:52 -0400
Subject: [PATCH 7/8] Unify age-range and sector pickers on one cocoon
 mechanism
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Age ranges now edit through cocoon nested fields like sectors, via a
scoped age_range_categorizable_items association with accepts_nested_
attributes_for, instead of the bespoke category_ids/template Stimulus
picker. Both pickers share one primary_tag controller (renamed from
primary_sector) whose highlight colors come from the Classes API, so the
single-primary star behaves identically. Drop the age-range-specific JS
controller and partials.

Because age ranges no longer ride category_ids, they're removed from
managed_category_type_ids — category_ids now carries only workshop
settings, and nested attributes manage the age taggings directly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 AGENTS.md                                     |  4 +-
 app/controllers/people_controller.rb          | 24 +++---
 .../age_range_picker_controller.js            | 82 -------------------
 app/frontend/javascript/controllers/index.js  |  7 +-
 .../controllers/primary_sector_controller.js  | 38 ---------
 .../controllers/primary_tag_controller.js     | 37 +++++++++
 app/models/concerns/age_group_taggable.rb     | 17 +++-
 app/models/person.rb                          |  9 ++
 app/views/people/_age_range_chip.html.erb     | 32 --------
 .../people/_age_range_new_field.html.erb      | 28 -------
 app/views/people/_form.html.erb               | 48 +++++------
 .../shared/_age_range_item_fields.html.erb    | 37 +++++++++
 .../shared/_sectorable_item_fields.html.erb   |  4 +-
 spec/requests/people_age_ranges_spec.rb       | 47 ++++++-----
 14 files changed, 167 insertions(+), 247 deletions(-)
 delete mode 100644 app/frontend/javascript/controllers/age_range_picker_controller.js
 delete mode 100644 app/frontend/javascript/controllers/primary_sector_controller.js
 create mode 100644 app/frontend/javascript/controllers/primary_tag_controller.js
 delete mode 100644 app/views/people/_age_range_chip.html.erb
 delete mode 100644 app/views/people/_age_range_new_field.html.erb
 create mode 100644 app/views/shared/_age_range_item_fields.html.erb

diff --git a/AGENTS.md b/AGENTS.md
index 71e724fe60..34fbb47364 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -71,7 +71,7 @@ This codebase (Rails 8.1)
 | Directory | Purpose |
 |---|---|
 | `app/frontend/entrypoints/` | Vite entry points (application.js, application.css) |
-| `app/frontend/javascript/controllers/` | Stimulus controllers (75) |
+| `app/frontend/javascript/controllers/` | Stimulus controllers (74) |
 | `app/frontend/javascript/rhino/` | Rich text editor customizations (mentions, grid) |
 | `app/frontend/stylesheets/` | Tailwind CSS and component styles |
 
@@ -268,7 +268,6 @@ end
 
 - `address_select` — Compact numbered picker linking an affiliation to an org address
 - `affiliation_dates` — Recalculate affiliation date ranges
-- `age_range_picker` — Sectors-style chip editor for a person's age ranges (add/remove + single-primary star, no reorder, no leader)
 - `anchor_highlight` — Highlight anchored elements
 - `asset_picker` — Asset selection UI
 - `autosave` — Auto-save form state
@@ -292,6 +291,7 @@ end
 - `paginated_fields` — Client-side pagination of nested fields
 - `password_toggle` — Show/hide password fields
 - `prefetch_lazy` — Prefetch lazy-loaded content
+- `primary_tag` — Shared single-primary star for the sector and age-range cocoon chip editors (clears other stars, highlights via configurable classes, no reorder)
 - `print_options` — Print options toggle for analytics
 - `reminder_preview` — Live-preview a custom message in the reminder email as the admin types it on the bulk-reminder page
 - `remote_select` — AJAX-powered select dropdown
diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb
index f975e0cb8c..efa4de8050 100644
--- a/app/controllers/people_controller.rb
+++ b/app/controllers/people_controller.rb
@@ -281,17 +281,20 @@ def set_form_variables
       .select { |type, _| type&.profile_specific? }
       .sort_by { |type, _| type&.name.to_s.downcase }
 
-    # Age ranges edit as their own sectors-style chip picker (AgeRange isn't a
-    # profile_specific type, so it never appears in @person_categories_grouped).
+    # Age ranges edit as their own sectors-style cocoon chip picker (AgeRange
+    # isn't a profile_specific type, so it never appears in
+    # @person_categories_grouped). Tagged via age_range_categorizable_items nested
+    # attributes, not category_ids.
     @age_range_type = CategoryType.find_by(name: AgeGroupTaggable::AGE_RANGE_CATEGORY_TYPE)
-    @age_ranges_collection = @age_range_type ? @age_range_type.categories.published.order(:position, :name) : Category.none
-
-    # The category types this form actually edits — age ranges plus every
-    # profile-specific type shown above. assign_associations preserves taggings
-    # of any other type, so saving the form can't drop a person's non-AgeRange
-    # category connections (e.g. art types tagged elsewhere).
-    @managed_category_type_ids = ([ @age_range_type&.id ] +
-      @person_categories_grouped.map { |type, _| type.id }).compact.uniq
+    age_ranges = @age_range_type ? @age_range_type.categories.published.order(:position, :name) : Category.none
+    @age_ranges_collection = age_ranges.pluck(:name, :id)
+    @current_age_range_category_ids = @person.age_range_categorizable_items.map(&:category_id)
+
+    # The category types this form edits via category_ids — the profile-specific
+    # types shown below (workshop settings). assign_associations preserves taggings
+    # of any other type (age ranges included, handled by nested attributes), so
+    # saving the form can't drop a person's other category connections.
+    @managed_category_type_ids = @person_categories_grouped.map { |type, _| type.id }
   end
 
   def find_duplicate_people(first_name, last_name, email)
@@ -436,6 +439,7 @@ def person_params
       :twitter_url,
       :created_by_id, :updated_by_id,
       sectorable_items_attributes: [ :id, :sector_id, :is_leader, :is_primary, :_destroy ],
+      age_range_categorizable_items_attributes: [ :id, :category_id, :is_primary, :_destroy ],
       addresses_attributes: [
         :id,
         :address_type,
diff --git a/app/frontend/javascript/controllers/age_range_picker_controller.js b/app/frontend/javascript/controllers/age_range_picker_controller.js
deleted file mode 100644
index f42539f286..0000000000
--- a/app/frontend/javascript/controllers/age_range_picker_controller.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-// Drives the age-range chip editor on the person form. Mirrors the sector chip
-// UI: the "Add age range" button inserts a new chip with a select (like cocoon's
-// "Add Sector"), persisted chips show the name as a span, and the primary star is
-// single-select — lighting one clears the others — with no leader/crown flag.
-// Unlike primary_sector, chips are NOT reordered: they stay in category position
-// order (the server renders them that way). New chips are cloned from a <template>
-// so their markup stays defined once in the ERB partial. Each chip writes
-// person[category_ids][] and, when starred, person[primary_age_category_ids][].
-export default class extends Controller {
-  static targets = ["addButton", "template", "chip", "chipSelect", "primaryToggle"]
-  static values = { total: Number }
-
-  connect() {
-    this.refreshOptions()
-    this.style()
-  }
-
-  add() {
-    const chip = this.templateTarget.content.firstElementChild.cloneNode(true)
-    this.addButtonTarget.insertAdjacentElement("beforebegin", chip)
-    chip.querySelector("[data-age-range-picker-target='chipSelect']")?.focus()
-    this.refreshOptions()
-  }
-
-  // A new chip's range was chosen: key its primary star to that id (so starring
-  // submits the right category) and re-filter the other selects.
-  choose(event) {
-    const select = event.target
-    const chip = select.closest("[data-age-range-picker-target='chip']")
-    chip.dataset.categoryId = select.value
-    const toggle = chip.querySelector("[data-age-range-picker-target='primaryToggle']")
-    if (toggle) toggle.value = select.value
-    this.refreshOptions()
-  }
-
-  remove(event) {
-    event.target.closest("[data-age-range-picker-target='chip']")?.remove()
-    this.refreshOptions()
-  }
-
-  // Single-select primary: lighting one star clears the others. Chips keep their
-  // position order — no reordering, unlike primary_sector.
-  togglePrimary(event) {
-    if (event.target.checked) {
-      this.primaryToggleTargets.forEach((toggle) => {
-        if (toggle !== event.target) toggle.checked = false
-      })
-    }
-    this.style()
-  }
-
-  // Darken whichever chip is primary, matching the sector chip's starred styling.
-  style() {
-    this.primaryToggleTargets.forEach((toggle) => {
-      const chip = toggle.closest("[data-age-range-picker-target='chip']")
-      if (!chip) return
-      const primary = toggle.checked
-      chip.classList.toggle("bg-amber-50", primary)
-      chip.classList.toggle("border-amber-300", primary)
-      chip.classList.toggle("bg-white", !primary)
-      chip.classList.toggle("border-gray-300", !primary)
-    })
-  }
-
-  // Keep each picker from offering a range already chosen by another chip, and
-  // disable the add button once every range is in use.
-  refreshOptions() {
-    const chosen = this.chipTargets.map((chip) => chip.dataset.categoryId).filter((id) => id)
-    this.chipSelectTargets.forEach((select) => {
-      Array.from(select.options).forEach((option) => {
-        if (!option.value) return
-        option.hidden = option.value !== select.value && chosen.includes(option.value)
-      })
-    })
-    const exhausted = chosen.length >= this.totalValue
-    this.addButtonTarget.disabled = exhausted
-    this.addButtonTarget.classList.toggle("opacity-50", exhausted)
-    this.addButtonTarget.classList.toggle("pointer-events-none", exhausted)
-  }
-}
diff --git a/app/frontend/javascript/controllers/index.js b/app/frontend/javascript/controllers/index.js
index f071888d65..13e2909844 100644
--- a/app/frontend/javascript/controllers/index.js
+++ b/app/frontend/javascript/controllers/index.js
@@ -9,9 +9,6 @@ application.register("affiliation-dates", AffiliationDatesController)
 import AffiliationFacilitatorWarningController from "./affiliation_facilitator_warning_controller"
 application.register("affiliation-facilitator-warning", AffiliationFacilitatorWarningController)
 
-import AgeRangePickerController from "./age_range_picker_controller"
-application.register("age-range-picker", AgeRangePickerController)
-
 import AllocationRefController from "./allocation_ref_controller"
 application.register("allocation-ref", AllocationRefController)
 
@@ -162,8 +159,8 @@ application.register("searchable-select", SearchableSelectController)
 import SectionFilterController from "./section_filter_controller"
 application.register("section-filter", SectionFilterController)
 
-import PrimarySectorController from "./primary_sector_controller"
-application.register("primary-sector", PrimarySectorController)
+import PrimaryTagController from "./primary_tag_controller"
+application.register("primary-tag", PrimaryTagController)
 
 import FormSectionToggleController from "./form_section_toggle_controller"
 application.register("form-section-toggle", FormSectionToggleController)
diff --git a/app/frontend/javascript/controllers/primary_sector_controller.js b/app/frontend/javascript/controllers/primary_sector_controller.js
deleted file mode 100644
index a31b01dc2e..0000000000
--- a/app/frontend/javascript/controllers/primary_sector_controller.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-// Drives the sector chip editor on the person/organization form. Enforces a
-// single primary sector — lighting one star clears the others — and darkens
-// the starred chip. Chips stay in their rendered (alphabetical) order; the
-// primary is not floated to the top, so starring doesn't reshuffle them.
-// Profile/recipients/dashboard views still lead with the primary on display.
-// The leader (crown) flag is independent and multi-select, so it needs no JS
-// and is styled purely via CSS (peer-checked).
-export default class extends Controller {
-  static targets = ["chip", "primary"]
-
-  connect() {
-    this.style()
-  }
-
-  selectPrimary(event) {
-    if (event.target.checked) {
-      this.primaryTargets.forEach((checkbox) => {
-        if (checkbox !== event.target) checkbox.checked = false
-      })
-    }
-    this.style()
-  }
-
-  // Reflect each chip's primary state: darker fill and stronger border when set.
-  style() {
-    this.primaryTargets.forEach((checkbox) => {
-      const chip = checkbox.closest("[data-primary-sector-target='chip']")
-      if (!chip) return
-      const primary = checkbox.checked
-      chip.classList.toggle("bg-lime-200", primary)
-      chip.classList.toggle("border-lime-500", primary)
-      chip.classList.toggle("bg-white", !primary)
-      chip.classList.toggle("border-gray-300", !primary)
-    })
-  }
-}
diff --git a/app/frontend/javascript/controllers/primary_tag_controller.js b/app/frontend/javascript/controllers/primary_tag_controller.js
new file mode 100644
index 0000000000..2d1d34a76f
--- /dev/null
+++ b/app/frontend/javascript/controllers/primary_tag_controller.js
@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Drives a chip editor with a single-select "primary" star, shared by the sector
+// and age-range pickers on the person/organization form. Lighting one star clears
+// the others; the configurable primary/default classes highlight the starred chip.
+// Chips are NOT reordered — they keep their rendered (alphabetical / position)
+// order, so starring doesn't reshuffle them. Profile/recipients/dashboard views
+// still lead with the primary on display. The sector chip's leader (crown) flag is
+// independent and CSS-only, so it needs no JS here.
+export default class extends Controller {
+  static targets = ["chip", "primary"]
+  static classes = ["primary", "default"]
+
+  connect() {
+    this.style()
+  }
+
+  selectPrimary(event) {
+    if (event.target.checked) {
+      this.primaryTargets.forEach((checkbox) => {
+        if (checkbox !== event.target) checkbox.checked = false
+      })
+    }
+    this.style()
+  }
+
+  // Reflect each chip's primary state: highlight the starred chip, reset the rest.
+  style() {
+    this.primaryTargets.forEach((checkbox) => {
+      const chip = checkbox.closest("[data-primary-tag-target='chip']")
+      if (!chip) return
+      const primary = checkbox.checked
+      this.primaryClasses.forEach((klass) => chip.classList.toggle(klass, primary))
+      this.defaultClasses.forEach((klass) => chip.classList.toggle(klass, !primary))
+    })
+  }
+}
diff --git a/app/models/concerns/age_group_taggable.rb b/app/models/concerns/age_group_taggable.rb
index b9770aecc5..cef6de3c81 100644
--- a/app/models/concerns/age_group_taggable.rb
+++ b/app/models/concerns/age_group_taggable.rb
@@ -27,12 +27,23 @@ def primary_age_category_ids
     primary_age_groups.map(&:id)
   end
 
+  # AgeRange categorizable_items (primary and additional together) in category
+  # position order, for the cocoon chip editor on the person form. Filters the
+  # in-memory association like primary_age_groups does, and is NOT primary-first —
+  # starring a chip shouldn't reshuffle the list. Display surfaces still lead with
+  # the primary via primary_age_groups / additional_age_groups.
+  def age_range_items_ordered
+    categorizable_items
+      .select { |item| age_range_item?(item) }
+      .sort_by { |item| [ item.category&.position || 0, item.category&.name.to_s ] }
+  end
+
   # Flip is_primary on the AgeRange categorizable_items to match the given set.
   # Runs after category membership has been assigned (the edit-form flow), so it
   # only updates existing items rather than creating them.
   def apply_primary_age_groups!(primary_category_ids)
     primary = sanitize_age_ids(primary_category_ids).to_set
-    age_range_categorizable_items.includes(:category).find_each do |item|
+    age_range_items_relation.includes(:category).find_each do |item|
       desired = primary.include?(item.category_id)
       item.update!(is_primary: desired) if item.is_primary? != desired
     end
@@ -64,7 +75,9 @@ def age_range_item?(item)
     item.category&.category_type&.name == AGE_RANGE_CATEGORY_TYPE
   end
 
-  def age_range_categorizable_items
+  # Query relation of this record's AgeRange categorizable_items. Named to avoid
+  # colliding with Person's age_range_categorizable_items nested association.
+  def age_range_items_relation
     categorizable_items
       .joins(category: :category_type)
       .where(category_types: { name: AGE_RANGE_CATEGORY_TYPE })
diff --git a/app/models/person.rb b/app/models/person.rb
index 424dd07d15..290647645f 100644
--- a/app/models/person.rb
+++ b/app/models/person.rb
@@ -65,6 +65,15 @@ class Person < ApplicationRecord
   accepts_nested_attributes_for :contact_methods, allow_destroy: true, reject_if: :all_blank
   accepts_nested_attributes_for :sectorable_items, allow_destroy: true,
                                 reject_if: proc { |attrs| attrs["sector_id"].blank? }
+  # Age ranges edit through cocoon nested fields like sectors. A scoped view of
+  # categorizable_items (AgeRange categories only) so the form's add/remove and
+  # primary toggle round-trip as nested attributes — the is_primary flag splits
+  # primary vs additional, no separate primary_age_category_ids param needed.
+  has_many :age_range_categorizable_items,
+           -> { joins(category: :category_type).where(category_types: { name: AgeGroupTaggable::AGE_RANGE_CATEGORY_TYPE }) },
+           class_name: "CategorizableItem", as: :categorizable, inverse_of: :categorizable
+  accepts_nested_attributes_for :age_range_categorizable_items, allow_destroy: true,
+                                reject_if: proc { |attrs| attrs["category_id"].blank? }
   accepts_nested_attributes_for :user, update_only: true
   accepts_nested_attributes_for :affiliations, allow_destroy: true,
     reject_if: proc { |attrs| attrs["organization_id"].blank? }
diff --git a/app/views/people/_age_range_chip.html.erb b/app/views/people/_age_range_chip.html.erb
deleted file mode 100644
index 246a5ac350..0000000000
--- a/app/views/people/_age_range_chip.html.erb
+++ /dev/null
@@ -1,32 +0,0 @@
-<%# A persisted age-range chip in the person form's age picker — the read-only
-    form a saved sector chip takes (name span, not a select). Mirrors the sector
-    chip: the name, a single-select primary star (lighting one clears the others;
-    chips stay in category position order, no reordering), and a remove ✖. No
-    leader/crown flag. Writes
-    person[category_ids][] (membership) and, when starred,
-    person[primary_age_category_ids][]. New (unsaved) chips use
-    people/_age_range_new_field instead, which offers a select. %>
-<% is_primary = local_assigns.fetch(:is_primary, false) %>
-<div class="inline-flex items-center gap-2 rounded-md border
-            <%= is_primary ? "border-amber-300 bg-amber-50" : "border-gray-300 bg-white" %>
-            text-gray-700 px-3 py-1 text-sm font-medium transition"
-     data-age-range-picker-target="chip"
-     data-category-id="<%= category_id %>">
-  <input type="hidden" name="person[category_ids][]" value="<%= category_id %>">
-  <span><%= category_name %></span>
-  <label class="cursor-pointer leading-none" title="Mark as a primary age group served">
-    <input type="checkbox"
-           name="person[primary_age_category_ids][]"
-           value="<%= category_id %>"
-           class="peer sr-only"
-           <%= "checked" if is_primary %>
-           data-age-range-picker-target="primaryToggle"
-           data-action="age-range-picker#togglePrimary">
-    <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
-    <span class="sr-only">Primary</span>
-  </label>
-  <button type="button"
-          data-action="age-range-picker#remove"
-          class="ml-0.5 text-gray-400 hover:text-gray-600 font-bold text-xs transition"
-          aria-label="Remove age range">✖</button>
-</div>
diff --git a/app/views/people/_age_range_new_field.html.erb b/app/views/people/_age_range_new_field.html.erb
deleted file mode 100644
index 9cc325690a..0000000000
--- a/app/views/people/_age_range_new_field.html.erb
+++ /dev/null
@@ -1,28 +0,0 @@
-<%# The blank age-range chip the "Add age range" button inserts — mirrors a new
-    sector chip (shared/_sectorable_item_fields with no sector_id): a select to
-    pick an unused range, a primary star, and a remove ✖. Lives in a <template>;
-    the age-range-picker controller clones it on add and keys the star's value to
-    the chosen category id on select. %>
-<div class="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white
-            text-gray-700 px-3 py-1 text-sm font-medium transition"
-     data-age-range-picker-target="chip"
-     data-category-id="">
-  <%= select_tag "person[category_ids][]",
-                 options_for_select([ [ "Select age range…", "" ] ] + @age_ranges_collection.map { |category| [ category.name, category.id ] }),
-                 data: { age_range_picker_target: "chipSelect", action: "age-range-picker#choose" },
-                 class: "bg-transparent border-none focus:ring-0 text-sm text-gray-500 cursor-pointer py-0" %>
-  <label class="cursor-pointer leading-none" title="Mark as a primary age group served">
-    <input type="checkbox"
-           name="person[primary_age_category_ids][]"
-           value=""
-           class="peer sr-only"
-           data-age-range-picker-target="primaryToggle"
-           data-action="age-range-picker#togglePrimary">
-    <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
-    <span class="sr-only">Primary</span>
-  </label>
-  <button type="button"
-          data-action="age-range-picker#remove"
-          class="ml-0.5 text-gray-400 hover:text-gray-600 font-bold text-xs transition"
-          aria-label="Remove age range">✖</button>
-</div>
diff --git a/app/views/people/_form.html.erb b/app/views/people/_form.html.erb
index 0537cff382..91d182a607 100644
--- a/app/views/people/_form.html.erb
+++ b/app/views/people/_form.html.erb
@@ -117,9 +117,10 @@
   </div>
 
   <!-- Sectors + Age ranges (split width; both wrap their chips) -->
-  <%# Tells the controller which category types this form edits, so saving only
-      replaces age-range and workshop-setting taggings and preserves any other
-      type the form never shows. %>
+  <%# Tells the controller which category types this form edits via category_ids
+      (workshop settings); saving replaces only those and preserves any other type
+      the form never shows. Age ranges are edited as nested attributes, separately. %>
+  <%= hidden_field_tag "person[category_ids][]", "" %>
   <% (@managed_category_type_ids || []).each do |type_id| %>
     <%= hidden_field_tag "person[managed_category_type_ids][]", type_id %>
   <% end %>
@@ -131,7 +132,9 @@
       </div>
       <div class="rounded-lg border border-gray-200 <%= DomainTheme.bg_class_for(:sectors) %> p-4 shadow-sm
                   flex flex-wrap items-center content-start gap-2 flex-1"
-           data-controller="primary-sector">
+           data-controller="primary-tag"
+           data-primary-tag-primary-class="border-lime-500 bg-lime-200"
+           data-primary-tag-default-class="border-gray-300 bg-white">
         <% sectors_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
         <%= f.simple_fields_for :sectorable_items, sectors_owner.sectorable_items_ordered do |sfi| %>
           <%= render "shared/sectorable_item_fields", f: sfi, show_admin_flags: true %>
@@ -158,29 +161,22 @@
         </div>
         <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm
                     flex flex-wrap items-center content-start gap-2 flex-1"
-             data-controller="age-range-picker"
-             data-age-range-picker-total-value="<%= @age_ranges_collection.size %>">
-          <%# Always submit empty values so removing every chip clears the
-              membership and primary taggings. %>
-          <%= hidden_field_tag "person[category_ids][]", "" %>
-          <%= hidden_field_tag "person[primary_age_category_ids][]", "" %>
-
-          <%# Keep the chips in category position order — don't float the primary
-              to the front. primary_age_groups / additional_age_groups are each
-              already position-sorted, so the merged list re-sorts by position. %>
-          <% primary_age_ids = @person.primary_age_category_ids %>
-          <% selected_age_groups = (@person.primary_age_groups + @person.additional_age_groups).sort_by { |category| [ category.position || 0, category.name.to_s ] } %>
-          <% selected_age_groups.each do |category| %>
-            <%= render "people/age_range_chip", category_id: category.id, category_name: category.name, is_primary: primary_age_ids.include?(category.id) %>
-          <% end %>
-
-          <%# Mirrors "Add Sector": a button that inserts a chip with a picker. %>
-          <button type="button"
-                  data-action="age-range-picker#add"
-                  data-age-range-picker-target="addButton"
-                  class="btn btn-secondary-outline">➕ Add age range</button>
+             data-controller="primary-tag"
+             data-primary-tag-primary-class="border-amber-300 bg-amber-50"
+             data-primary-tag-default-class="border-gray-300 bg-white">
+        <% age_owner = f.object.respond_to?(:object) ? f.object.object : f.object %>
+        <%= f.simple_fields_for :age_range_categorizable_items, age_owner.age_range_items_ordered do |afi| %>
+          <%= render "shared/age_range_item_fields", f: afi %>
+        <% end %>
 
-          <template data-age-range-picker-target="template"><%= render "people/age_range_new_field" %></template>
+        <%= link_to_add_association "➕ Add age range",
+                                    f,
+                                    :age_range_categorizable_items,
+                                    partial: "shared/age_range_item_fields",
+                                    render_options: {
+                                      locals: { collection: (@age_ranges_collection || [])
+                                        .reject { |_, id| (@current_age_range_category_ids || []).include?(id) } } },
+                                    class: "btn btn-secondary-outline" %>
         </div>
       </div>
     <% end %>
diff --git a/app/views/shared/_age_range_item_fields.html.erb b/app/views/shared/_age_range_item_fields.html.erb
new file mode 100644
index 0000000000..58d36fa43a
--- /dev/null
+++ b/app/views/shared/_age_range_item_fields.html.erb
@@ -0,0 +1,37 @@
+<%# A cocoon nested field for one age-range tagging on the person form — the
+    age-range counterpart of shared/_sectorable_item_fields. A persisted item
+    shows its name; a new one (added via "Add age range") shows a select. The
+    single-select primary star is driven by the shared primary-tag controller.
+    There is no leader/crown flag for age ranges. %>
+<% collection ||= @age_ranges_collection || Category.age_ranges.published.order(:position, :name).pluck(:name, :id) %>
+<% is_primary = f.object&.is_primary? %>
+<div class="nested-fields inline-flex items-center gap-2
+            rounded-md border <%= is_primary ? "border-amber-300 bg-amber-50" : "border-gray-300 bg-white" %>
+            text-gray-700 px-3 py-1 text-sm font-medium transition"
+     data-primary-tag-target="chip">
+  <% if f.object&.category_id.present? %>
+    <%= f.hidden_field :category_id %>
+    <span><%= f.object.category&.name %></span>
+  <% else %>
+    <%= f.input :category_id,
+                as: :select,
+                label: false,
+                collection: collection,
+                selected: f.object&.category_id,
+                include_blank: "Select age range…",
+                wrapper: false,
+                input_html: {
+                  class: "bg-transparent border-none focus:ring-0 text-sm text-gray-500 cursor-pointer py-0"
+                } %>
+  <% end %>
+  <label class="cursor-pointer leading-none" title="Mark as a primary age group served">
+    <%= f.check_box :is_primary,
+                    class: "peer sr-only",
+                    data: { primary_tag_target: "primary", action: "primary-tag#selectPrimary" } %>
+    <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
+    <span class="sr-only">Primary</span>
+  </label>
+  <%= link_to_remove_association "✖",
+                                 f,
+                                 class: "ml-0.5 text-gray-400 hover:text-gray-600 font-bold text-xs transition" %>
+</div>
diff --git a/app/views/shared/_sectorable_item_fields.html.erb b/app/views/shared/_sectorable_item_fields.html.erb
index fb25a3b304..51dff6159e 100644
--- a/app/views/shared/_sectorable_item_fields.html.erb
+++ b/app/views/shared/_sectorable_item_fields.html.erb
@@ -5,7 +5,7 @@
 <div class="nested-fields inline-flex items-center gap-2
             rounded-md border <%= is_primary ? "border-lime-500 bg-lime-200" : "border-gray-300 bg-white" %>
             text-gray-700 px-3 py-1 text-sm font-medium transition"
-     data-primary-sector-target="chip">
+     data-primary-tag-target="chip">
   <% if f.object&.sector_id.present? %>
     <%= f.hidden_field :sector_id %>
     <span><%= f.object.sector&.name %></span>
@@ -25,7 +25,7 @@
     <label class="admin-only cursor-pointer leading-none" title="Mark as primary sector">
       <%= f.check_box :is_primary,
                       class: "peer sr-only",
-                      data: { primary_sector_target: "primary", action: "primary-sector#selectPrimary" } %>
+                      data: { primary_tag_target: "primary", action: "primary-tag#selectPrimary" } %>
       <i class="fa-solid fa-star text-base text-gray-300 peer-checked:text-amber-400 transition-colors" aria-hidden="true"></i>
       <span class="sr-only">Primary</span>
     </label>
diff --git a/spec/requests/people_age_ranges_spec.rb b/spec/requests/people_age_ranges_spec.rb
index f6a4e17796..6da2b29c72 100644
--- a/spec/requests/people_age_ranges_spec.rb
+++ b/spec/requests/people_age_ranges_spec.rb
@@ -17,22 +17,26 @@
 
   before { sign_in admin }
 
-  def update_person(category_ids:, primary_age_category_ids: [])
+  # Age ranges are saved as age_range_categorizable_items nested attributes (the
+  # cocoon picker), not category_ids. category_ids only carries workshop settings,
+  # of which there are none here.
+  def update_person(age_items:)
     patch person_path(person), params: {
       person: {
         first_name: person.first_name,
-        category_ids: category_ids,
-        primary_age_category_ids: primary_age_category_ids,
-        managed_category_type_ids: [ age_type.id ]
+        category_ids: [ "" ],
+        managed_category_type_ids: [],
+        age_range_categorizable_items_attributes: age_items
       }
     }
   end
 
   describe "edit form" do
-    it "renders the age-range chip picker with every published age range" do
+    it "renders the cocoon age-range editor with every published age range" do
       get edit_person_path(person)
 
-      expect(response.body).to include("age-range-picker")
+      expect(response.body).to include("primary-tag")
+      expect(response.body).to include("Add age range")
       expect(response.body).to include("Children (0-12)")
       expect(response.body).to include("Adults (18+)")
     end
@@ -51,13 +55,27 @@ def update_person(category_ids:, primary_age_category_ids: [])
   end
 
   describe "saving age ranges" do
-    it "tags the selected age ranges and marks the chosen ones primary" do
-      update_person(category_ids: [ children.id, adults.id ], primary_age_category_ids: [ children.id ])
+    it "tags the selected age ranges and marks the chosen one primary" do
+      update_person(age_items: [
+        { category_id: children.id, is_primary: "1" },
+        { category_id: adults.id, is_primary: "0" }
+      ])
 
       person.reload
       expect(person.primary_age_groups).to contain_exactly(children)
       expect(person.additional_age_groups).to contain_exactly(adults)
     end
+
+    it "removes an age range via _destroy" do
+      person.categories << children
+      item = person.categorizable_items.find_by(category: children)
+
+      update_person(age_items: [ { id: item.id, category_id: children.id, _destroy: "1" } ])
+
+      person.reload
+      expect(person.primary_age_groups).to be_empty
+      expect(person.additional_age_groups).to be_empty
+    end
   end
 
   describe "preserving non-AgeRange category connections" do
@@ -70,9 +88,7 @@ def update_person(category_ids:, primary_age_category_ids: [])
     it "does not delete or edit the person's non-AgeRange category connections" do
       original_item = person.categorizable_items.find_by(category: clay)
 
-      # The form only ever submits age-range ids in category_ids — Clay is not on
-      # the form. Saving must keep it anyway.
-      update_person(category_ids: [ children.id ], primary_age_category_ids: [ children.id ])
+      update_person(age_items: [ { category_id: children.id, is_primary: "1" } ])
 
       person.reload
       expect(person.categories).to include(clay)
@@ -85,14 +101,5 @@ def update_person(category_ids:, primary_age_category_ids: [])
       # And the age ranges were still applied alongside the preserved tagging.
       expect(person.primary_age_groups).to contain_exactly(children)
     end
-
-    it "clears age ranges without touching the non-AgeRange tagging" do
-      update_person(category_ids: [ "" ])
-
-      person.reload
-      expect(person.primary_age_groups).to be_empty
-      expect(person.additional_age_groups).to be_empty
-      expect(person.categories).to include(clay)
-    end
   end
 end

From a49441d642afd9e6fd2fceac450f64eb00838676 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:54:02 -0400
Subject: [PATCH 8/8] Retain age ranges on form error and validate a single
 primary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes for the cocoon age picker:

- age_range_items_ordered now reads the age_range_categorizable_items
  association the nested attributes build into (not the general
  categorizable_items), so a range picked before a failed save survives
  the re-render — its chip and primary star come back. Mirrors how
  sectors read sectorable_items.

- Add a Person at_most_one_primary_age_range validation mirroring
  SectorsTaggable, so posting two primary age ranges is a form error.
  Person-only: organizations aggregate several members' primary age
  groups, so they legitimately have more than one.

Update professional_field_identifiers_spec to assert the cocoon chips
instead of the old age checkboxes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/models/concerns/age_group_taggable.rb     | 11 -----
 app/models/person.rb                          | 22 +++++++++
 .../professional_field_identifiers_spec.rb    | 27 ++++++----
 spec/requests/people_age_ranges_spec.rb       | 49 +++++++++++++++++++
 4 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/app/models/concerns/age_group_taggable.rb b/app/models/concerns/age_group_taggable.rb
index cef6de3c81..95c7083b3d 100644
--- a/app/models/concerns/age_group_taggable.rb
+++ b/app/models/concerns/age_group_taggable.rb
@@ -27,17 +27,6 @@ def primary_age_category_ids
     primary_age_groups.map(&:id)
   end
 
-  # AgeRange categorizable_items (primary and additional together) in category
-  # position order, for the cocoon chip editor on the person form. Filters the
-  # in-memory association like primary_age_groups does, and is NOT primary-first —
-  # starring a chip shouldn't reshuffle the list. Display surfaces still lead with
-  # the primary via primary_age_groups / additional_age_groups.
-  def age_range_items_ordered
-    categorizable_items
-      .select { |item| age_range_item?(item) }
-      .sort_by { |item| [ item.category&.position || 0, item.category&.name.to_s ] }
-  end
-
   # Flip is_primary on the AgeRange categorizable_items to match the given set.
   # Runs after category membership has been assigned (the edit-form flow), so it
   # only updates existing items rather than creating them.
diff --git a/app/models/person.rb b/app/models/person.rb
index 290647645f..4934334313 100644
--- a/app/models/person.rb
+++ b/app/models/person.rb
@@ -55,6 +55,11 @@ class Person < ApplicationRecord
   CONTACT_TYPES = [ "work", "personal" ].freeze
   validates :email_type, inclusion: { in: %w[work personal] }, allow_blank: true
   validates :email_2_type, inclusion: { in: %w[work personal] }, allow_blank: true
+  # Mirrors SectorsTaggable's single-primary rule for age ranges — the chip
+  # editor's single-star JS is the first line of defense, this guards imports,
+  # the console, and bad form posts. Person-only: organizations aggregate
+  # several members' primary age groups, so they legitimately have more than one.
+  validate :at_most_one_primary_age_range
   # TODO: add validation for zip code containing only numbers
   # TODO: add validation on STATE
   # TODO: add validation on phone number type
@@ -252,8 +257,25 @@ def other_workshop_setting_responses
     other_form_responses(OTHER_WORKSHOP_SETTING_IDENTIFIERS)
   end
 
+  # The age-range nested items in category position order for the cocoon chip
+  # editor. Reads the same association the form's nested attributes build into, so
+  # unsaved picks survive a failed save (and aren't primary-first — starring
+  # shouldn't reshuffle them). Display surfaces lead with the primary instead.
+  def age_range_items_ordered
+    age_range_categorizable_items.sort_by { |item| [ item.category&.position || 0, item.category&.name.to_s ] }
+  end
+
   private
 
+  # Count the in-memory set (not a DB query): nested attributes build the items in
+  # one transaction, so a row-level check would see none persisted yet.
+  def at_most_one_primary_age_range
+    primary_count = age_range_categorizable_items.reject(&:marked_for_destruction?).count(&:is_primary?)
+    return if primary_count <= 1
+
+    errors.add(:base, "Only one age range can be marked as primary")
+  end
+
   def other_form_responses(identifiers)
     form_submissions
       .joins(form_answers: :form_field)
diff --git a/spec/requests/events/professional_field_identifiers_spec.rb b/spec/requests/events/professional_field_identifiers_spec.rb
index d9581741f7..c5d832613b 100644
--- a/spec/requests/events/professional_field_identifiers_spec.rb
+++ b/spec/requests/events/professional_field_identifiers_spec.rb
@@ -125,11 +125,11 @@
 
           # Sector chips render only for tagged sectors, so their presence proves the tag.
           expect(page.text).to include("Education", "Mental Health", "Equine therapy")
-          # Age categories all render as checkboxes; the tagged ones are checked, with
-          # the primary toggle set only on the primary age group.
-          expect(membership_checked?(page, age_adults)).to be(true)
-          expect(membership_checked?(page, age_teens)).to be(true)
-          expect(membership_checked?(page, age_children)).to be(true)
+          # Age ranges render as cocoon chips; a chip exists only for a tagged range,
+          # with the primary star checked only on the primary age group.
+          expect(age_tagged?(page, age_adults)).to be(true)
+          expect(age_tagged?(page, age_teens)).to be(true)
+          expect(age_tagged?(page, age_children)).to be(true)
           expect(primary_age_checked?(page, age_adults)).to be(true)
           expect(primary_age_checked?(page, age_teens)).to be(false)
         end
@@ -187,13 +187,22 @@ def checkbox_values(field)
     dom.css("input[type=checkbox][name='public_registration[form_fields][#{field.id}][]']").map { |node| node["value"] }
   end
 
-  def membership_checked?(page, category)
-    box = page.at_css("input[name='person[category_ids][]'][value='#{category.id}']")
-    box&.key?("checked") || false
+  # The age cocoon nested-attributes index whose category_id field holds this
+  # category, or nil when the range isn't tagged (no chip rendered).
+  def age_field_index(page, category)
+    field = page.at_css("input[name^='person[age_range_categorizable_items_attributes]'][name$='[category_id]'][value='#{category.id}']")
+    field && field["name"][/attributes\]\[(\d+)\]/, 1]
+  end
+
+  def age_tagged?(page, category)
+    age_field_index(page, category).present?
   end
 
   def primary_age_checked?(page, category)
-    box = page.at_css("input[name='person[primary_age_category_ids][]'][value='#{category.id}']")
+    index = age_field_index(page, category)
+    return false unless index
+
+    box = page.at_css("input[type=checkbox][name='person[age_range_categorizable_items_attributes][#{index}][is_primary]']")
     box&.key?("checked") || false
   end
 
diff --git a/spec/requests/people_age_ranges_spec.rb b/spec/requests/people_age_ranges_spec.rb
index 6da2b29c72..92c7b03dac 100644
--- a/spec/requests/people_age_ranges_spec.rb
+++ b/spec/requests/people_age_ranges_spec.rb
@@ -78,6 +78,55 @@ def update_person(age_items:)
     end
   end
 
+  describe "re-rendering after a validation error" do
+    it "retains a newly chosen age range and its primary flag, with options available" do
+      patch person_path(person), params: {
+        person: {
+          first_name: person.first_name,
+          last_name: "",
+          category_ids: [ "" ],
+          managed_category_type_ids: [],
+          age_range_categorizable_items_attributes: [
+            { category_id: children.id, is_primary: "1" }
+          ]
+        }
+      }
+
+      expect(response).to have_http_status(:unprocessable_content)
+      # The chosen age range comes back as a rendered chip, not dropped, with its
+      # category_id retained in a nested-attributes field.
+      expect(response.body).to include("<span>Children (0-12)</span>")
+      expect(response.body).to match(/value="#{children.id}"\s+name="person\[age_range_categorizable_items_attributes\]\[\d+\]\[category_id\]"/)
+      # Its primary star comes back checked.
+      expect(response.body).to match(/primary-tag#selectPrimary[^>]*checked="checked"/)
+      # The add picker still offers the other ranges.
+      expect(response.body).to include("Teens (13-17)")
+    end
+  end
+
+  describe "more than one primary age range" do
+    it "fails validation with the same single-primary rule as sectors" do
+      update_person(age_items: [
+        { category_id: children.id, is_primary: "1" },
+        { category_id: adults.id, is_primary: "1" }
+      ])
+
+      expect(response).to have_http_status(:unprocessable_content)
+      expect(response.body).to include("Only one age range can be marked as primary")
+
+      person.reload
+      expect(person.primary_age_groups).to be_empty
+    end
+
+    it "is enforced at the model level" do
+      person.age_range_categorizable_items.build(category: children, is_primary: true)
+      person.age_range_categorizable_items.build(category: adults, is_primary: true)
+
+      expect(person).not_to be_valid
+      expect(person.errors[:base]).to include("Only one age range can be marked as primary")
+    end
+  end
+
   describe "preserving non-AgeRange category connections" do
     before do
       person.categories << clay