From c7894cb664e1f657b18c4989e1932430dc9b1a1a Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Fri, 11 Sep 2026 03:26:27 -0400
Subject: [PATCH] fix(roster): order rank groups by Payload _order index

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/frontend/roster/RosterView.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/frontend/roster/RosterView.tsx b/src/components/frontend/roster/RosterView.tsx
index 2b8a70e..935cea2 100644
--- a/src/components/frontend/roster/RosterView.tsx
+++ b/src/components/frontend/roster/RosterView.tsx
@@ -214,11 +214,12 @@ function UnitBox({
       </div>
 
       {leader && (
-        <div className="mb-2">
+        <div>
           <span className="text-[10px] uppercase tracking-wider text-muted-foreground flex items-center gap-1 mb-1">
             <CrownIcon className="size-3" /> Commanding
           </span>
           <MemberCard member={leader} />
+          <hr className="my-2 w-1/3 mx-auto"/>
         </div>
       )}
 
@@ -304,8 +305,21 @@ function ByRankView({ members }: { members: RosterMember[] }) {
     list.push(m);
     grouped.set(m.rank.name, list);
   }
+  for (const list of grouped.values()) list.sort(rosterMemberOrder);
 
-  const sorted = [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b));
+  // `_order` is Payload's orderable fractional index: descending string
+  // compare = highest rank first (same convention as `rosterMemberOrder`).
+  // Ranks without `_order` sink to the bottom.
+  const sorted = [...grouped.entries()].sort(([, groupA], [, groupB]) => {
+    const aOrder = groupA[0].rank._order ?? null;
+    const bOrder = groupB[0].rank._order ?? null;
+    if (aOrder !== null && bOrder !== null && aOrder !== bOrder) {
+      return bOrder.localeCompare(aOrder);
+    }
+    if (aOrder === null && bOrder !== null) return 1;
+    if (aOrder !== null && bOrder === null) return -1;
+    return groupA[0].rank.name.localeCompare(groupB[0].rank.name);
+  });
 
   return (
     <div className="flex flex-col gap-4">