@mauricode/token-derby 2.4.0 → 2.5.0

package/dist/bin.js

@@ -113,27 +113,64 @@ function tagColor(tag, colors) {
   return null;
 }
 
-// src/ui/HorseSprite.tsx
-import { jsx } from "react/jsx-runtime";
-function HorseSprite({ sprite, colors }) {
-  const grid = renderSprite(sprite, colors);
-  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx(Text, { children: rowToAnsi(row) }, y)) });
-}
-function rowToAnsi(row) {
-  let out = "";
-  for (const cell of row) {
-    if (cell.top === null && cell.bottom === null) {
-      out += " ";
-    } else if (cell.top !== null && cell.bottom !== null) {
-      out += ansiFg(cell.top) + ansiBg(cell.bottom) + "\u2580" + RESET;
-    } else if (cell.top !== null) {
-      out += ansiFg(cell.top) + "\u2580" + RESET;
-    } else {
-      out += ansiFg(cell.bottom) + "\u2584" + RESET;
+// src/hats/render.ts
+function composeHatGrid(baseSprite, hat, variantIdx, horseColors) {
+  const horseH = baseSprite.length;
+  const horseW = baseSprite[0]?.length ?? 0;
+  const hatH = hat.rows.length;
+  const hatW = hat.width;
+  const ext = Math.max(0, hatH - 4);
+  const canvasLeft = Math.min(0, hat.anchor_x);
+  const canvasRight = Math.max(horseW, hat.anchor_x + hatW);
+  const canvasW = canvasRight - canvasLeft;
+  const horseOffsetX = -canvasLeft;
+  const grid = Array.from(
+    { length: horseH + ext },
+    () => Array(canvasW).fill(null)
+  );
+  for (let y = 0; y < horseH; y++) {
+    for (let x = 0; x < horseW; x++) {
+      const tag = baseSprite[y][x];
+      if (tag === null) continue;
+      grid[y + ext][x + horseOffsetX] = tagToColor(tag, horseColors);
     }
   }
-  return out;
+  const hatColors = hatColorsFor(hat, variantIdx);
+  for (let y = 0; y < hatH; y++) {
+    const row = hat.rows[y];
+    for (let x = 0; x < hatW; x++) {
+      const ch = row[x];
+      if (ch === "." || ch === void 0) continue;
+      const gx = hat.anchor_x + x + horseOffsetX;
+      if (gx < 0 || gx >= canvasW) continue;
+      const color = ch === "A" ? hatColors.A : hatColors.Q ?? hatColors.A;
+      grid[y][gx] = color;
+    }
+  }
+  return { grid, offsetX: canvasLeft };
 }
+function tagToColor(tag, c) {
+  switch (tag) {
+    case "B":
+      return c.body;
+    case "M":
+      return c.mane;
+    case "T":
+      return c.tail;
+    case "S":
+      return c.saddle;
+    case "E":
+      return FIXED_COLORS.E;
+    case "H":
+      return FIXED_COLORS.H;
+  }
+}
+function hatColorsFor(hat, variantIdx) {
+  if (hat.rarity === "legendary") return hat.colors;
+  return hat.variants[variantIdx] ?? hat.variants[0];
+}
+
+// src/ui/half-blocks.ts
 var RESET = "\x1B[0m";
 function hexToRgb(hex) {
   const h = hex.replace("#", "");
@@ -151,6 +188,52 @@ function ansiBg(hex) {
   const [r, g, b] = hexToRgb(hex);
   return `\x1B[48;2;${r};${g};${b}m`;
 }
+function hexGridToHalfBlocks(grid) {
+  const W = grid[0]?.length ?? 0;
+  const padded = grid.length % 2 === 0 ? grid : [...grid, Array(W).fill(null)];
+  const lines = [];
+  for (let y = 0; y < padded.length; y += 2) {
+    let line = "";
+    for (let x = 0; x < W; x++) {
+      const top = padded[y][x] ?? null;
+      const bot = padded[y + 1][x] ?? null;
+      if (top === null && bot === null) line += " ";
+      else if (top !== null && bot !== null) line += ansiFg(top) + ansiBg(bot) + "\u2580" + RESET;
+      else if (top !== null) line += ansiFg(top) + "\u2580" + RESET;
+      else line += ansiFg(bot) + "\u2584" + RESET;
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
+// src/ui/HorseSprite.tsx
+import { jsx } from "react/jsx-runtime";
+function HorseSprite({ sprite, colors, hat }) {
+  if (!hat) {
+    const grid2 = renderSprite(sprite, colors);
+    return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: grid2.map((row, y) => /* @__PURE__ */ jsx(Text, { children: rowToAnsi(row) }, y)) });
+  }
+  const { grid } = composeHatGrid(sprite, hat.hat, hat.variant ?? 0, colors);
+  const lines = hexGridToHalfBlocks(grid);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: lines.map((line, i) => /* @__PURE__ */ jsx(Text, { children: line }, i)) });
+}
+var RESET2 = "\x1B[0m";
+function rowToAnsi(row) {
+  let out = "";
+  for (const cell of row) {
+    if (cell.top === null && cell.bottom === null) {
+      out += " ";
+    } else if (cell.top !== null && cell.bottom !== null) {
+      out += ansiFg(cell.top) + ansiBg(cell.bottom) + "\u2580" + RESET2;
+    } else if (cell.top !== null) {
+      out += ansiFg(cell.top) + "\u2580" + RESET2;
+    } else {
+      out += ansiFg(cell.bottom) + "\u2584" + RESET2;
+    }
+  }
+  return out;
+}
 
 // src/ui/palette.ts
 var SLOTS = ["body", "mane", "tail", "saddle"];
@@ -337,8 +420,8 @@ var HEARTBEAT_RETRY_DELAYS_MS = [1e3, 2e3, 4e3, 8e3, 15e3];
 // src/version.ts
 import { createRequire } from "module";
 function readVersion() {
-  if ("2.4.0".length > 0) {
-    return "2.4.0";
+  if ("2.5.0".length > 0) {
+    return "2.5.0";
   }
   try {
     const req = createRequire(import.meta.url);
@@ -466,6 +549,56 @@ var MIDRACE_THRESHOLDS = {
   // sliding window for recent_events
 };
 
+// ../shared/dist/hats.js
+function hatById(id) {
+  return HATS.find((h) => h.id === id);
+}
+var HATS = [
+  // ── COMMON (18) ────────────────────────────────────────────────────────
+  { id: "flat_cap", name: "Flat Cap", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...........", "....AAAA...", "...AAAAAA..", "..AAAAAAA.."], variants: [{ A: "#8B6914" }, { A: "#12301b" }, { A: "#aab5cb" }, { A: "#bdcbaa" }] },
+  { id: "bucket_hat", name: "Bucket Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...QQQQQ...", "...AAAAA...", "...AAAAA...", ".AAAAAAAAA."], variants: [{ A: "#CC2200", Q: "#FFFFFF" }, { A: "#0007cc", Q: "#FFFFFF" }, { A: "#becc00", Q: "#4d3dc7" }, { A: "#cc00c5", Q: "#d6d6dc" }] },
+  { id: "beanie", name: "Beanie", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "....AAA....", "...AAAAA...", "...AAAAA...", "..AAAAAAA.."], variants: [{ A: "#4A7C59" }, { A: "#b21f35" }, { A: "#ec9418" }, { A: "#3a17e6" }] },
+  { id: "stetson", name: "Stetson", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...AA.AA...", "...AAAAA...", "...AAAAA...", "A..AAAAA..A", "AAAAAAAAAAA", "AAAAAAAAAAA"], variants: [{ A: "#C49A00" }, { A: "#272004" }, { A: "#040404" }, { A: "#373606" }] },
+  { id: "party_hat", name: "Party Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", ".....A.....", "....AAA....", "....AQA....", "...AQAQA...", "...AAAAA..."], variants: [{ A: "#FF69B4", Q: "#FFD700" }, { A: "#c46bff", Q: "#ff000d" }, { A: "#fdff6b", Q: "#0400ff" }, { A: "#6bff97", Q: "#05050a" }] },
+  { id: "fez", name: "Fez", rarity: "common", width: 11, anchor_x: 22, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "....Q......", "....AAA....", "....AAA....", "....AAA...."], variants: [{ A: "#CC0000", Q: "#8B0000" }, { A: "#CC0000", Q: "#f5e5e5" }, { A: "#CC0000", Q: "#f1e209" }, { A: "#CC0000", Q: "#0956f1" }] },
+  { id: "sailor_hat", name: "Sailor Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...QQQQQ...", "..AAAAAAA..", "..QQQQQQQ..", "..AAAAAAA.."], variants: [{ A: "#FFFFFF", Q: "#000080" }, { A: "#FFFFFF", Q: "#c0c0ed" }, { A: "#FFFFFF", Q: "#00000a" }, { A: "#FFFFFF", Q: "#0505ef" }] },
+  { id: "newsboy_cap", name: "Newsboy Cap", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...AAAAA...", "..AAAQAAA..", "..AAAAAAA..", "..AAAAAA..."], variants: [{ A: "#5C4033", Q: "#3D2B1F" }, { A: "#e96020", Q: "#131211" }, { A: "#342c28", Q: "#131211" }, { A: "#0a0300", Q: "#ddab78" }] },
+  { id: "tam_o_shanter", name: "Tam O'Shanter", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", ".....Q.....", "....AAA....", "..AAAAAAA..", "..AAAAAAA..", "...AAAAA..."], variants: [{ A: "#006400", Q: "#FF0000" }, { A: "#ff0000", Q: "#016400" }] },
+  { id: "trucker_cap", name: "Trucker Cap", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...AAQQ....", "...AAQQ....", "..AAQQQAA..", "..AAQQQAA.."], variants: [{ A: "#2196F3", Q: "#FFFFFF" }, { A: "#f41fe3", Q: "#FFFFFF" }, { A: "#1ff45f", Q: "#FFFFFF" }] },
+  { id: "hard_hat", name: "Hard Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "....AAA....", "...AAAAA...", "..AAAAAAA..", "..AAAAAAAAA"], variants: [{ A: "#FFD600" }, { A: "#d74c1d" }] },
+  { id: "chef_toque", name: "Chef's Toque", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...AAAAA...", "..AAQAQAA..", "...AQAQA...", "...AQAQA...", "...AQAQA...", "...AAAAA..."], variants: [{ A: "#FFFFFF", Q: "#f9f9f9" }] },
+  { id: "bobble_hat", name: "Bobble Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", ".....Q.....", "...AAAAA...", "...AAAAA...", "..AAAAAAA.."], variants: [{ A: "#C62828", Q: "#FFFFFF" }, { A: "#293bc7", Q: "#FFFFFF" }, { A: "#29c775", Q: "#231f1f" }, { A: "#a529c7", Q: "#d50707" }] },
+  { id: "cowboy_hat", name: "Cowboy Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...AAAAA...", "...AAAAA...", "A.AAAAAAA.A", ".AAAAAAAAA."], variants: [{ A: "#8B4513" }, { A: "#0a0400" }, { A: "#956c50" }] },
+  { id: "baseball_cap", name: "Baseball Cap", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "...AAAAA...", "..AAAAAA...", "..AAAAAAA..", "..AAAAAAAAA"], variants: [{ A: "#1565C0" }, { A: "#8515c1" }, { A: "#15c157" }, { A: "#ef2d0b" }] },
+  { id: "tinfoil_hat", name: "Tinfoil Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", ".....A.....", "....AAA....", "...AAAAA...", "..AAAAAAA.."], variants: [{ A: "#B0BEC5" }, { A: "#6a6c6c" }] },
+  { id: "dunce_cap", name: "Dunce Cap", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", ".....Q.....", "....QAQ....", "...QAAAQ...", "...QAAAQ...", "..QAAAAAQ..", "..AAAAAAA.."], variants: [{ A: "#F8F8F8", Q: "#F44336" }] },
+  { id: "mini_top_hat", name: "Mini Top Hat", rarity: "common", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...AAAAA...", "...AAAAA...", "...AAAAA...", "..AAAAAAA..", "..AAAAAAA.."], variants: [{ A: "#212121" }, { A: "#626060" }] },
+  // ── RARE (10) ──────────────────────────────────────────────────────────
+  { id: "bicorne", name: "Bicorne", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "..AAAQQQQ..", "..AAAAAAA..", "..AAAAAAA..", "...QQQQQ..."], variants: [{ A: "#1A237E", Q: "#FFD700" }, { A: "#01052d", Q: "#544803" }] },
+  { id: "viking_helmet", name: "Viking Helmet", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "..A.AAA.A..", "..AAAAAAA..", "..AAAAAAA..", "..AQQQQQA.."], variants: [{ A: "#9E9E9E", Q: "#8D6E63" }, { A: "#dcdbdb", Q: "#bf3908" }] },
+  { id: "jesters_cap", name: "Jester's Cap", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "..AQAQAQA..", "..AQAQAQA..", "...AAAAA...", "...AAAAA..."], variants: [{ A: "#E53935", Q: "#FFD600" }, { A: "#e5a434", Q: "#0040ff" }, { A: "#34e537", Q: "#eeff00" }, { A: "#e234e5", Q: "#00ff40" }] },
+  { id: "plague_doctor", name: "Plague Doctor Beak", rarity: "rare", width: 11, anchor_x: 24, rows: ["...........", "...........", "...........", "...........", "....QQQ....", "...QAAAQQ..", "...QQQQQQQ.", "..QQQQQ.QQQ", "..QQQQ....Q", "..QQQQ....."], variants: [{ A: "#F5F5F5", Q: "#795548" }, { A: "#e1dbdb", Q: "#080707" }] },
+  { id: "morion", name: "Conquistador Morion", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", ".....Q.....", "...QQQQQ...", "...QAAAQ...", ".A..AAA..A.", "..AAQQQAA.."], variants: [{ A: "#B0BEC5", Q: "#FFD600" }, { A: "#0a4768", Q: "#e6c10a" }] },
+  { id: "shako", name: "Shako", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "........Q..", "........Q..", "........Q..", "........Q..", "..AAAAAAA..", "..AAAAAAA..", "..AAAAAAA..", "..AQQQQQA.."], variants: [{ A: "#45464f", Q: "#00ff2a" }, { A: "#45464f", Q: "#ff4d00" }, { A: "#45464f", Q: "#ff0019" }, { A: "#45464f", Q: "#fff700" }] },
+  { id: "centurion_helm", name: "Centurion Helm", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "....QQQ....", "...QQQQQQ..", "..QQQQQQQQ.", ".QQ..A...Q.", ".Q..AAA....", "...AAAAA...", "..AAAAAAA..", "..AAAAAAA.."], variants: [{ A: "#B0BEC5", Q: "#C62828" }, { A: "#2f3131", Q: "#C62828" }] },
+  { id: "papal_mitre", name: "Papal Mitre", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "....QQQ....", "...QQQQQ...", "...QAAAQ...", "..AAAAAAA.."], variants: [{ A: "#FFFFFF", Q: "#FFD700" }] },
+  { id: "headdress", name: "Headdress", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", "...........", "..AQAQAQA..", "..AQAQAQA..", "..AAAAAAA..", "...QQQQQ..."], variants: [{ A: "#FF8F00", Q: "#1565C0" }] },
+  { id: "sombrero", name: "Sombrero", rarity: "rare", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...........", ".....A.....", "....AAA....", "...AAAAA...", "...AQAQA...", "AAAAAAAAAAA"], variants: [{ A: "#F57F17", Q: "#BF360C" }, { A: "#f8b377", Q: "#3e1204" }, { A: "#d6f877", Q: "#04133e" }, { A: "#d6f877", Q: "#04133e" }] },
+  // ── EPIC (6) ───────────────────────────────────────────────────────────
+  { id: "papal_tiara", name: "Papal Tiara", rarity: "epic", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "....QQ.....", "...QQQQQ...", "...QAAQQ...", "...QQQQQ...", "..AAAAAAA..", "..AQQQQQA.."], variants: [{ A: "#FFFFFF", Q: "#FFD700" }, { A: "#b18e10", Q: "#f3f3f1" }] },
+  { id: "samurai_kabuto", name: "Samurai Kabuto", rarity: "epic", width: 11, anchor_x: 23, rows: ["....Q...Q..", "....QQ.QQ..", ".....QQQ...", ".......Q...", "...AAAAQ...", "..AAAAAQQ..", "..AAAAAQQ..", ".AAAAAAAQ..", "AAAAAAAAQ..", "AAAAAAAAQ.."], variants: [{ A: "#B0BEC5", Q: "#C62828" }, { A: "#050505", Q: "#C62828" }, { A: "#675f5f", Q: "#c4c729" }] },
+  { id: "gladiator_galea", name: "Gladiator Galea", rarity: "epic", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "....QQQQQQ.", "...QQQQQ...", "...QQQQQ...", "...QAAA....", "..AAAAAAA..", "..AAAAAAA..", "..AQQQQQA.."], variants: [{ A: "#B0BEC5", Q: "#C62828" }, { A: "#ffe907", Q: "#C62828" }] },
+  { id: "pharaoh_nemes", name: "Pharaoh Nemes", rarity: "epic", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "..AAAAAAA..", "..AAQAQAA..", "..QAQAQAQ..", "..QAQAQAQ..", "..QQAAAQQ..", "..QQAAAAA..", "...QAQA...."], variants: [{ A: "#FFD700", Q: "#1565C0" }, { A: "#8d342a", Q: "#63686e" }] },
+  { id: "spartan_helmet", name: "Spartan Helmet", rarity: "epic", width: 11, anchor_x: 23, rows: ["...........", "........Q..", ".......QQ..", ".....QQQQ..", "....QQQQQ..", "..QQQQQQ...", ".QQQAA.....", "QQAAAAAAA..", "Q.AAAAAAA..", "..AQQQQQA.."], variants: [{ A: "#B0BEC5", Q: "#B71C1C" }, { A: "#B0BEC5", Q: "#b2b51c" }, { A: "#B0BEC5", Q: "#b5611c" }] },
+  { id: "conquistador_full", name: "Conquistador Helm", rarity: "epic", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", ".....A.....", "....AAA....", "...AAAAA...", "..AAAAAAA..", "...AQQQA...", "...AQQQA..."], variants: [{ A: "#B0BEC5", Q: "#FFD700" }, { A: "#B0BEC5", Q: "#0040ff" }, { A: "#B0BEC5", Q: "#36123b" }] },
+  // ── LEGENDARY (5) ──────────────────────────────────────────────────────
+  { id: "rainbow_crown", name: "Rainbow Crown", rarity: "legendary", width: 11, anchor_x: 23, rows: ["...........", "...........", ".....A.....", "....AQA....", "....AQA....", "....AQA....", "...AAQAA...", "...AQQQA...", "..AAQQQAA..", "..AAAAAAA.."], colors: { A: "#FFD700", Q: "#553f3f" }, animation: { type: "cycle", frames: ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#8B00FF"], fps: 8 } },
+  { id: "inferno_cap", name: "Inferno Cap", rarity: "legendary", width: 11, anchor_x: 23, rows: ["...........", "....AAA....", "...AAAAA...", "....AAA....", ".....Q.....", "A....Q....A", "A...QQQ...A", ".A..QQQ..A.", "..AAAAAAA..", "..AAAAAAA.."], colors: { A: "#FF4500", Q: "#FFD700" }, animation: { type: "cycle", frames: ["#FF0000", "#FF2200", "#FF4500", "#FF6600", "#FF8C00", "#FFA500"], fps: 12 } },
+  { id: "void_hood", name: "Void Hood", rarity: "legendary", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...AAA.....", "..AAAAAA...", ".AAAAAAA...", ".AAAAAAAA..", "AAAAAAAAA..", "AAAAQQQAA..", "AAAAQQQAA.."], colors: { A: "#1A0033", Q: "#d9cfe3" }, animation: { type: "cycle", frames: ["#0D0019", "#1A0033", "#2D004D", "#3D0066", "#2D004D", "#1A0033"], fps: 3 } },
+  { id: "prismatic_jester", name: "Prismatic Jester", rarity: "legendary", width: 11, anchor_x: 23, rows: ["...........", "..Q.Q.Q.Q..", "Q..A.A.A..Q", ".Q.A.A.A.Q.", "..AQAQAQA..", "..AQAQAQA..", "..AAAAAAA..", "..AAAAAAA..", "..AAAAAAA..", "..AAAAAAA.."], colors: { A: "#FF0000", Q: "#0000FF" }, animation: { type: "cycle", frames: ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#8B00FF", "#FF00FF", "#00FFFF"], fps: 15 } },
+  { id: "aurora_helm", name: "Aurora Helm", rarity: "legendary", width: 11, anchor_x: 23, rows: ["...........", "...........", "...........", "...........", "...QQQQQ...", "...QQQQQ...", "..AAAAAAA..", "..AAAAAAA..", "..AQAAAQA..", "..AQAAAQA.."], colors: { A: "#00CED1", Q: "#00FF7F" }, animation: { type: "cycle", frames: ["#0000FF", "#0066FF", "#00BFFF", "#00CED1", "#00FF7F", "#7CFC00", "#00FF7F", "#00CED1"], fps: 4 } }
+];
+
 // src/identity/identity.ts
 import { promises as fs } from "fs";
 import * as path2 from "path";
@@ -668,6 +801,12 @@ function deleteOrgWebhook(orgName) {
     void 0
   );
 }
+function rollHat(stableHorseId) {
+  return request("POST", `/jockey/me/horses/${encodeURIComponent(stableHorseId)}/roll`, void 0, void 0);
+}
+function equipHat(stableHorseId, body) {
+  return request("POST", `/jockey/me/horses/${encodeURIComponent(stableHorseId)}/equip`, body, void 0);
+}
 
 // src/commands/stable-create.ts
 async function stableCreateCommand() {
@@ -800,8 +939,114 @@ async function stableDeleteCommand(name) {
 }
 
 // src/commands/stable-edit.ts
-import React4 from "react";
+import React6 from "react";
 import { render as render3 } from "ink";
+
+// src/ui/HatPicker.tsx
+import { useState as useState3 } from "react";
+import { Box as Box5, Text as Text5, useInput as useInput2 } from "ink";
+
+// src/ui/AnimatedHorseSprite.tsx
+import { useEffect, useState as useState2 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function AnimatedHorseSprite({ sprite, colors, hat }) {
+  const isLegendary = hat.rarity === "legendary";
+  const frames = isLegendary ? hat.animation.frames : [];
+  const fps = isLegendary ? hat.animation.fps : 1;
+  const [idx, setIdx] = useState2(0);
+  useEffect(() => {
+    if (!isLegendary || frames.length <= 1) return;
+    const interval = setInterval(
+      () => setIdx((i) => (i + 1) % frames.length),
+      Math.max(1, Math.round(1e3 / fps))
+    );
+    return () => clearInterval(interval);
+  }, [isLegendary, frames.length, fps]);
+  const renderedHat = isLegendary && frames[idx] ? { ...hat, colors: { ...hat.colors, A: frames[idx] } } : hat;
+  const { grid } = composeHatGrid(sprite, renderedHat, 0, colors);
+  const lines = hexGridToHalfBlocks(grid);
+  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", children: lines.map((line, i) => /* @__PURE__ */ jsx4(Text4, { children: line }, i)) });
+}
+
+// src/ui/HatPicker.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function HatPicker({ hats, equipped, colors, onPick, onCancel }) {
+  const entries = [
+    { kind: "unequip" },
+    ...hats.map((c, idx) => ({ kind: "hat", idx, collected: c }))
+  ];
+  const [cursor, setCursor] = useState3(0);
+  useInput2((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.upArrow) {
+      setCursor((cursor - 1 + entries.length) % entries.length);
+      return;
+    }
+    if (key.downArrow) {
+      setCursor((cursor + 1) % entries.length);
+      return;
+    }
+    if (key.return) {
+      const e = entries[cursor];
+      onPick(e.kind === "unequip" ? null : e.idx);
+      return;
+    }
+  });
+  const focused = entries[cursor];
+  return /* @__PURE__ */ jsxs3(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Text5, { children: "Pick a hat to equip:" }),
+    entries.map((e, i) => {
+      const isCursor = i === cursor;
+      if (e.kind === "unequip") {
+        const isEquipped2 = equipped == null;
+        return /* @__PURE__ */ jsx5(Box5, { flexDirection: "row", children: /* @__PURE__ */ jsxs3(Text5, { children: [
+          isCursor ? "\u25BA" : " ",
+          " ",
+          /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Unequip" }),
+          isEquipped2 ? " \u2713" : ""
+        ] }) }, "unequip");
+      }
+      const hat = hatById(e.collected.id);
+      const name = hat?.name ?? e.collected.id;
+      const variantSuffix = hat && hat.rarity !== "legendary" && e.collected.variant !== void 0 ? ` #${e.collected.variant + 1}` : "";
+      const isEquipped = equipped === e.idx;
+      const rarityColor = hat ? hat.rarity === "legendary" ? "yellow" : hat.rarity === "epic" ? "magenta" : hat.rarity === "rare" ? "blue" : "gray" : "gray";
+      return /* @__PURE__ */ jsx5(Box5, { flexDirection: "row", children: /* @__PURE__ */ jsxs3(Text5, { children: [
+        isCursor ? "\u25BA" : " ",
+        " ",
+        name,
+        variantSuffix,
+        " ",
+        /* @__PURE__ */ jsxs3(Text5, { color: rarityColor, children: [
+          "[",
+          hat?.rarity ?? "?",
+          "]"
+        ] }),
+        isEquipped ? " \u2713" : ""
+      ] }) }, `hat-${e.idx}`);
+    }),
+    /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Preview:" }) }),
+    /* @__PURE__ */ jsx5(PreviewArea, { focused, colors }),
+    /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2191/\u2193 choose \xB7 Enter pick \xB7 Esc cancel" }) })
+  ] });
+}
+function PreviewArea({ focused, colors }) {
+  if (focused.kind === "unequip") {
+    return /* @__PURE__ */ jsx5(HorseSprite, { sprite: MAIN_SPRITE, colors });
+  }
+  const hat = hatById(focused.collected.id);
+  if (!hat) return /* @__PURE__ */ jsx5(HorseSprite, { sprite: MAIN_SPRITE, colors });
+  if (hat.rarity === "legendary") {
+    return /* @__PURE__ */ jsx5(AnimatedHorseSprite, { sprite: MAIN_SPRITE, colors, hat });
+  }
+  return /* @__PURE__ */ jsx5(HorseSprite, { sprite: MAIN_SPRITE, colors, hat: { hat, variant: focused.collected.variant ?? 0 } });
+}
+
+// src/commands/stable-edit.ts
 async function stableEditCommand(name) {
   if (!name) {
     console.error("Usage: token-derby stable edit <name>");
@@ -815,8 +1060,9 @@ async function stableEditCommand(name) {
     return 1;
   }
   let exitCode = 0;
+  let liveColors = existing.colors;
   const app = render3(
-    React4.createElement(HorseCreator, {
+    React6.createElement(HorseCreator, {
       initialColors: existing.colors,
       initialName: existing.name,
       lockName: true,
@@ -824,6 +1070,7 @@ async function stableEditCommand(name) {
       onSubmit: async (_name, colors) => {
         try {
           await updateStableHorse(existing.stable_horse_id, { colors });
+          liveColors = colors;
           app.unmount();
           console.log(`\u2713 Updated "${existing.name}".`);
         } catch (e) {
@@ -844,6 +1091,34 @@ async function stableEditCommand(name) {
     })
   );
   await app.waitUntilExit();
+  if (exitCode === 0 && existing.hats && existing.hats.length > 0) {
+    const equipResult = await new Promise((resolve) => {
+      const app2 = render3(
+        React6.createElement(HatPicker, {
+          hats: existing.hats,
+          equipped: existing.equipped_hat ?? null,
+          colors: liveColors,
+          onPick: (idx) => {
+            app2.unmount();
+            resolve({ done: true, idx });
+          },
+          onCancel: () => {
+            app2.unmount();
+            resolve({ done: false, idx: null });
+          }
+        })
+      );
+    });
+    if (equipResult.done) {
+      try {
+        await equipHat(existing.stable_horse_id, { hat_index: equipResult.idx });
+        console.log(equipResult.idx === null ? "Hat unequipped." : "Hat equipped.");
+      } catch (e) {
+        if (e instanceof ApiError) console.error(`Equip failed: ${e.code} ${e.message}`);
+        else throw e;
+      }
+    }
+  }
   return exitCode;
 }
 async function fetchStable() {
@@ -944,16 +1219,16 @@ function isIso(s) {
 }
 
 // src/commands/join.ts
-import React7 from "react";
+import React9 from "react";
 import { render as render4 } from "ink";
 
 // src/ui/HorsePicker.tsx
-import { useState as useState2 } from "react";
-import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput3 } from "ink";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function HorsePicker({ horses, onPick, onCancel }) {
-  const [idx, setIdx] = useState2(0);
-  useInput2((input, key) => {
+  const [idx, setIdx] = useState4(0);
+  useInput3((input, key) => {
     if (key.escape) {
       onCancel();
       return;
@@ -973,31 +1248,31 @@ function HorsePicker({ horses, onPick, onCancel }) {
     }
   });
   if (horses.length === 0) {
-    return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx4(Text4, { children: "No horses in your stable." }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Run `token-derby stable create` to make one." })
+    return /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx6(Text6, { children: "No horses in your stable." }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Run `token-derby stable create` to make one." })
     ] });
   }
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx4(Text4, { children: "Pick a horse to race:" }),
-    horses.map((h, i) => /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx4(Box4, { flexDirection: "row", children: /* @__PURE__ */ jsxs3(Text4, { children: [
+  return /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx6(Text6, { children: "Pick a horse to race:" }),
+    horses.map((h, i) => /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx6(Box6, { flexDirection: "row", children: /* @__PURE__ */ jsxs4(Text6, { children: [
         i === idx ? "\u25BA" : " ",
         " ",
         h.name,
         " ",
-        /* @__PURE__ */ jsxs3(Text4, { color: "cyan", children: [
+        /* @__PURE__ */ jsxs4(Text6, { color: "cyan", children: [
           "[Lvl. ",
           levelFromXp(h.xp),
           "]"
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs3(Box4, { flexDirection: "row", children: [
-        /* @__PURE__ */ jsx4(Text4, { children: "  " }),
-        /* @__PURE__ */ jsx4(HorseSprite, { sprite: MINI_SPRITE, colors: h.colors })
+      /* @__PURE__ */ jsxs4(Box6, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx6(Text6, { children: "  " }),
+        /* @__PURE__ */ jsx6(HorseSprite, { sprite: MINI_SPRITE, colors: h.colors })
       ] })
     ] }, h.stable_horse_id)),
-    /* @__PURE__ */ jsx4(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\u2191/\u2193 choose \xB7 Enter pick \xB7 Esc cancel" }) })
+    /* @__PURE__ */ jsx6(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\u2191/\u2193 choose \xB7 Enter pick \xB7 Esc cancel" }) })
   ] });
 }
 
@@ -1023,45 +1298,45 @@ async function saveActiveRace(active) {
 }
 
 // src/runtime/run-race.tsx
-import { useEffect, useRef, useState as useState3 } from "react";
-import { Box as Box6, Text as Text6, useApp } from "ink";
+import { useEffect as useEffect2, useRef, useState as useState5 } from "react";
+import { Box as Box8, Text as Text8, useApp } from "ink";
 
 // src/ui/StatusScreen.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text7 } from "ink";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function StatusScreen(props) {
   const { race, ownHorseId, ownHorseName, ownColors, ownUserName, lastHeartbeatAgoSec, lastHeartbeatOk } = props;
   if (!race) {
-    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", children: /* @__PURE__ */ jsx5(Text5, { children: "Joining race\u2026" }) });
+    return /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: /* @__PURE__ */ jsx7(Text7, { children: "Joining race\u2026" }) });
   }
   const own = race.horses.find((h) => h.horse_id === ownHorseId);
   const leader = race.horses[0];
   const elapsedPct = elapsed(race);
   const timeLeft = formatDuration(race.time_left_seconds);
   const lvl = levelInfo((own?.xp ?? 0) + (own?.live_xp ?? 0));
-  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs4(Text5, { children: [
+  return /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs5(Text7, { children: [
       "\u{1F3C7} TOKEN DERBY \u2500\u2500\u2500 ",
-      /* @__PURE__ */ jsx5(Text5, { bold: true, children: race.name }),
+      /* @__PURE__ */ jsx7(Text7, { bold: true, children: race.name }),
       " \u2500\u2500\u2500 status: ",
-      /* @__PURE__ */ jsx5(Text5, { color: statusColor(race.status), children: race.status })
+      /* @__PURE__ */ jsx7(Text7, { color: statusColor(race.status), children: race.status })
     ] }),
-    /* @__PURE__ */ jsxs4(Box5, { marginTop: 1, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx5(HorseSprite, { sprite: MINI_SPRITE, colors: ownColors }),
-      /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsxs4(Text5, { children: [
+    /* @__PURE__ */ jsxs5(Box7, { marginTop: 1, flexDirection: "row", children: [
+      /* @__PURE__ */ jsx7(HorseSprite, { sprite: MINI_SPRITE, colors: ownColors }),
+      /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs5(Text7, { children: [
           "  ",
           ownHorseName,
           " ",
-          /* @__PURE__ */ jsxs4(Text5, { color: "cyan", children: [
+          /* @__PURE__ */ jsxs5(Text7, { color: "cyan", children: [
             "[Lvl. ",
             lvl.level,
             "]"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4(Text5, { children: [
+        /* @__PURE__ */ jsxs5(Text7, { children: [
           "  ",
-          /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+          /* @__PURE__ */ jsxs5(Text7, { dimColor: true, children: [
             "(",
             ownUserName,
             ")"
@@ -1069,43 +1344,43 @@ function StatusScreen(props) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+    /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Tokens (race):  ",
         own?.current_tokens ?? 0
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Position:       ",
         own?.rank ?? "\u2014",
         " of ",
         race.horses.length
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Leader:         ",
         leader ? `${leader.name}${leader.user_name ? ` (${leader.user_name})` : ""} \u2014 ${leader.current_tokens}` : "\u2014"
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Race elapsed:   ",
         (elapsedPct * 100).toFixed(0),
         "%  ",
         bar(elapsedPct, 20)
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Time left:      ",
         timeLeft
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "XP:             ",
         lvl.next_level_xp === null ? `${lvl.xp} (max level)  ${bar(1, 20)}` : `${lvl.xp_into_level}/${lvl.xp_for_level} \u2192 Lvl. ${lvl.level + 1}  ${bar(lvl.progress, 20)}`
       ] }),
-      /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text7, { children: [
         "Last heartbeat: ",
         lastHeartbeatAgoSec === null ? "\u2014" : `${lastHeartbeatAgoSec}s ago`,
         " ",
-        /* @__PURE__ */ jsx5(Text5, { color: lastHeartbeatOk ? "green" : "yellow", children: lastHeartbeatOk ? "\u2713" : "\u26A0" })
+        /* @__PURE__ */ jsx7(Text7, { color: lastHeartbeatOk ? "green" : "yellow", children: lastHeartbeatOk ? "\u2713" : "\u26A0" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Press Ctrl+C to crash out of the race." }) })
+    /* @__PURE__ */ jsx7(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Press Ctrl+C to crash out of the race." }) })
   ] });
 }
 function elapsed(race) {
@@ -1254,25 +1529,25 @@ function initialBaseline(args) {
 }
 
 // src/runtime/run-race.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function RunRace({ active, startingBaseline, pendingMode, ownUserName }) {
   const { exit } = useApp();
-  const [race, setRace] = useState3(null);
-  const [lastHbAt, setLastHbAt] = useState3(null);
-  const [lastHbOk, setLastHbOk] = useState3(true);
-  const [tickNow, setTickNow] = useState3(/* @__PURE__ */ new Date());
-  const [fatalError, setFatalError] = useState3(null);
-  const [achievements, setAchievements] = useState3([]);
+  const [race, setRace] = useState5(null);
+  const [lastHbAt, setLastHbAt] = useState5(null);
+  const [lastHbOk, setLastHbOk] = useState5(true);
+  const [tickNow, setTickNow] = useState5(/* @__PURE__ */ new Date());
+  const [fatalError, setFatalError] = useState5(null);
+  const [achievements, setAchievements] = useState5([]);
   const shownAchievementAtRef = useRef(0);
   const baselineRef = useRef(startingBaseline);
   const pendingRef = useRef(pendingMode);
   const lastTokenSampleRef = useRef(startingBaseline);
   const ctrl = useRef(new AbortController());
-  useEffect(() => {
+  useEffect2(() => {
     const t = setInterval(() => setTickNow(/* @__PURE__ */ new Date()), 1e3);
     return () => clearInterval(t);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (pendingRef.current && race?.status === "live") {
       sumTokensForRace(active).then((total) => {
         baselineRef.current = total;
@@ -1280,7 +1555,7 @@ function RunRace({ active, startingBaseline, pendingMode, ownUserName }) {
       });
     }
   }, [race?.status]);
-  useEffect(() => {
+  useEffect2(() => {
     runHeartbeatLoop({
       sendHeartbeat: async (currentTokens) => {
         const resp = await heartbeat(
@@ -1346,13 +1621,13 @@ function RunRace({ active, startingBaseline, pendingMode, ownUserName }) {
   }, []);
   const lastHeartbeatAgoSec = lastHbAt ? Math.max(0, Math.floor((tickNow.getTime() - lastHbAt.getTime()) / 1e3)) : null;
   if (fatalError) {
-    return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", padding: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { color: "red", bold: true, children: "CLI version mismatch \u2014 disconnected" }),
-      /* @__PURE__ */ jsx6(Text6, { children: fatalError })
+    return /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", padding: 1, children: [
+      /* @__PURE__ */ jsx8(Text8, { color: "red", bold: true, children: "CLI version mismatch \u2014 disconnected" }),
+      /* @__PURE__ */ jsx8(Text8, { children: fatalError })
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx8(
       StatusScreen,
       {
         race,
@@ -1364,23 +1639,23 @@ function RunRace({ active, startingBaseline, pendingMode, ownUserName }) {
         lastHeartbeatOk: lastHbOk
       }
     ),
-    achievements.length > 0 && /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Achievements" }),
+    achievements.length > 0 && /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Achievements" }),
       achievements.map(({ key, event }) => {
         const description = describeAchievement(event, active);
-        return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "row", children: [
-          /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+        return /* @__PURE__ */ jsxs6(Box8, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsxs6(Text8, { dimColor: true, children: [
             "  ",
             formatClockTime(event.at),
             "  "
           ] }),
-          /* @__PURE__ */ jsxs5(Text6, { color: "yellow", bold: true, children: [
+          /* @__PURE__ */ jsxs6(Text8, { color: "yellow", bold: true, children: [
             "+",
             event.xp,
             " XP  "
           ] }),
-          /* @__PURE__ */ jsx6(Text6, { children: event.name }),
-          /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+          /* @__PURE__ */ jsx8(Text8, { children: event.name }),
+          /* @__PURE__ */ jsxs6(Text8, { dimColor: true, children: [
             "  \u2014 ",
             description
           ] })
@@ -1527,14 +1802,14 @@ async function joinCommand(joinCode) {
   };
   await saveActiveRace(active);
   const initial = await buildInitialState({ active, raceStatus: status, rejoin: isResume });
-  const app = render4(React7.createElement(RunRace, { active, ...initial, ownUserName: identity.display_name }));
+  const app = render4(React9.createElement(RunRace, { active, ...initial, ownUserName: identity.display_name }));
   await app.waitUntilExit();
   return 0;
 }
 async function pickHorse(horses) {
   return new Promise((resolve) => {
     const app = render4(
-      React7.createElement(HorsePicker, {
+      React9.createElement(HorsePicker, {
         horses,
         onPick: (h) => {
           app.unmount();
@@ -1669,7 +1944,7 @@ var FETCH_TIMEOUT_MS = 5e3;
 async function updateCommand(deps = {}) {
   const fetchImpl = deps.fetchImpl ?? fetch;
   const spawnImpl = deps.spawnImpl ?? spawn;
-  const promptYesNo = deps.promptYesNo ?? defaultPromptYesNo;
+  const promptYesNo2 = deps.promptYesNo ?? defaultPromptYesNo;
   let latest;
   try {
     latest = await fetchLatestVersion(fetchImpl);
@@ -1683,7 +1958,7 @@ async function updateCommand(deps = {}) {
     return 0;
   }
   console.log(`Current: ${CLI_VERSION}   Latest: ${latest}`);
-  const yes = await promptYesNo("Run upgrade now? [y/N]: ");
+  const yes = await promptYesNo2("Run upgrade now? [y/N]: ");
   if (!yes) {
     console.log(`To upgrade manually:  ${UPGRADE_CMD}`);
     return 0;
@@ -1732,6 +2007,393 @@ function runNpmUpgrade(spawnImpl) {
   });
 }
 
+// src/commands/roll.ts
+import React13 from "react";
+import { render as render5 } from "ink";
+
+// src/ui/RollReveal.tsx
+import { useState as useState7, useEffect as useEffect4, useMemo } from "react";
+import { Box as Box10, Text as Text10 } from "ink";
+
+// src/ui/HatSprite.tsx
+import { useEffect as useEffect3, useState as useState6 } from "react";
+import { Box as Box9, Text as Text9 } from "ink";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function HatSprite({ hat, variant, centerIn }) {
+  const colors = hatColorsFor2(hat, variant ?? 0);
+  const grid = makeHatGrid(hat, colors, centerIn);
+  const lines = hexGridToHalfBlocks(grid);
+  return /* @__PURE__ */ jsx9(Box9, { flexDirection: "column", children: lines.map((line, i) => /* @__PURE__ */ jsx9(Text9, { children: line }, i)) });
+}
+function AnimatedHatSprite({ hat, variant, centerIn }) {
+  if (hat.rarity !== "legendary") {
+    return /* @__PURE__ */ jsx9(HatSprite, { hat, variant, centerIn });
+  }
+  const frames = hat.animation.frames;
+  const fps = hat.animation.fps;
+  const [idx, setIdx] = useState6(0);
+  useEffect3(() => {
+    if (frames.length <= 1) return;
+    const interval = setInterval(
+      () => setIdx((i) => (i + 1) % frames.length),
+      Math.max(1, Math.round(1e3 / fps))
+    );
+    return () => clearInterval(interval);
+  }, [frames.length, fps]);
+  const framed = { ...hat, colors: { ...hat.colors, A: frames[idx] } };
+  return /* @__PURE__ */ jsx9(HatSprite, { hat: framed, variant, centerIn });
+}
+function hatColorsFor2(hat, variantIdx) {
+  if (hat.rarity === "legendary") return hat.colors;
+  return hat.variants[variantIdx] ?? hat.variants[0];
+}
+function makeHatGrid(hat, colors, centerIn) {
+  const w = centerIn?.w ?? hat.width;
+  const h = centerIn?.h ?? hat.rows.length;
+  const offX = Math.floor((w - hat.width) / 2);
+  const offY = Math.floor((h - hat.rows.length) / 2);
+  const grid = Array.from({ length: h }, () => Array(w).fill(null));
+  for (let y = 0; y < hat.rows.length; y++) {
+    const row = hat.rows[y];
+    for (let x = 0; x < hat.width; x++) {
+      const ch = row[x];
+      if (ch === "." || ch === void 0) continue;
+      const gx = x + offX;
+      const gy = y + offY;
+      if (gx < 0 || gx >= w || gy < 0 || gy >= h) continue;
+      grid[gy][gx] = ch === "A" ? colors.A : colors.Q ?? colors.A;
+    }
+  }
+  return grid;
+}
+
+// src/ui/RollReveal.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RESET3 = "\x1B[0m";
+var BOX_COLOR = "#E5C76B";
+var TIER_PALETTE = {
+  common: ["#FFFFFF", "#DDDDDD", "#AAAAAA", "#9E9E9E"],
+  rare: ["#42A5F5", "#1E88E5", "#90CAF9", "#0277BD"],
+  epic: ["#AB47BC", "#8E24AA", "#CE93D8", "#6A1B9A"],
+  legendary: ["#FFD700", "#FF7F00", "#FF0000", "#FF00FF", "#00BFFF", "#7CFC00", "#8B00FF"]
+};
+var CONFETTI_CHARS = ["\u2726", "\u2727", "\u22C6", "\u2605", "\u2606", "\u2728", "*", "\u2022", "\u25C6", "\u25C7"];
+var SCENE_W = 32;
+var SCENE_H = 10;
+function pad(line) {
+  const visible = stripAnsi(line).length;
+  const lead = Math.max(0, Math.floor((SCENE_W - visible) / 2));
+  return " ".repeat(lead) + line + " ".repeat(Math.max(0, SCENE_W - lead - visible));
+}
+function stripAnsi(s) {
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+var BOX_CLOSED = [
+  "",
+  "",
+  "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "\u2551   \u2591\u2591\u2591\u2591\u2591     \u2551",
+  "\u2551\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2551",
+  "\u2551  \u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591  \u2551",
+  "\u2551\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2551",
+  "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  "",
+  ""
+].map(pad);
+var BOX_OPENING_1 = [
+  "",
+  "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  "",
+  "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "\u2551     \u2726       \u2551",
+  "\u2551\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2551",
+  "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  "",
+  ""
+].map(pad);
+var BOX_OPENING_2 = [
+  "  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "  \u2551             \u2551",
+  "  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  "",
+  "     \u2728   \u2605   \u2726",
+  "",
+  "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "\u2551             \u2551",
+  "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  ""
+].map(pad);
+var BOX_EMPTY = [
+  "",
+  "",
+  "",
+  "",
+  "",
+  "",
+  "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
+  "\u2551             \u2551",
+  "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
+  ""
+].map(pad);
+function GiftBox({ frame, color }) {
+  return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", children: frame.map((line, i) => /* @__PURE__ */ jsx10(Text10, { children: line ? ansiFg(color) + line + RESET3 : line }, i)) });
+}
+function printClosedBox() {
+  for (const line of BOX_CLOSED) {
+    const colored = line.trim().length > 0 ? `${ansiFg(BOX_COLOR)}${line}${RESET3}` : line;
+    process.stdout.write(colored + "\n");
+  }
+}
+function spawnParticles(tier, count, cx, cy) {
+  const palette = TIER_PALETTE[tier];
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const angle = i / count * Math.PI * 2 + (Math.random() - 0.5) * 0.6;
+    const speed = 0.8 + Math.random() * 1.6;
+    out.push({
+      x: cx,
+      y: cy,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed * 0.5,
+      char: CONFETTI_CHARS[Math.floor(Math.random() * CONFETTI_CHARS.length)],
+      color: palette[Math.floor(Math.random() * palette.length)]
+    });
+  }
+  return out;
+}
+function ConfettiBurst({ tier }) {
+  const cx = Math.floor(SCENE_W / 2);
+  const cy = Math.floor(SCENE_H / 2);
+  const particles = useMemo(() => spawnParticles(tier, 36, cx, cy), [tier, cx, cy]);
+  const [tick, setTick] = useState7(0);
+  useEffect4(() => {
+    const i = setInterval(() => setTick((t) => t + 1), 70);
+    return () => clearInterval(i);
+  }, []);
+  const grid = Array.from({ length: SCENE_H }, () => Array(SCENE_W).fill(" "));
+  for (const p of particles) {
+    const x = Math.round(p.x + p.vx * tick);
+    const y = Math.round(p.y + p.vy * tick);
+    if (x >= 0 && x < SCENE_W && y >= 0 && y < SCENE_H) {
+      grid[y][x] = ansiFg(p.color) + p.char + RESET3;
+    }
+  }
+  return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx10(Text10, { children: row.join("") }, y)) });
+}
+function RollReveal({ outcome, onDone }) {
+  const isNoHat = outcome.kind === "no_hat";
+  const isLegendary = outcome.kind !== "no_hat" && outcome.hat.rarity === "legendary";
+  const [phase, setPhase] = useState7("open1");
+  useEffect4(() => {
+    const timers = [];
+    timers.push(setTimeout(() => setPhase("open2"), 350));
+    if (isNoHat) {
+      timers.push(setTimeout(() => setPhase("empty"), 700));
+      timers.push(setTimeout(onDone, 1500));
+    } else {
+      timers.push(setTimeout(() => setPhase("burst"), 700));
+      timers.push(setTimeout(() => setPhase("reveal"), 1650));
+      timers.push(setTimeout(onDone, isLegendary ? 4650 : 2650));
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [isNoHat, isLegendary, onDone]);
+  if (phase === "open1") return /* @__PURE__ */ jsx10(GiftBox, { frame: BOX_OPENING_1, color: BOX_COLOR });
+  if (phase === "open2") return /* @__PURE__ */ jsx10(GiftBox, { frame: BOX_OPENING_2, color: BOX_COLOR });
+  if (phase === "empty") return /* @__PURE__ */ jsx10(GiftBox, { frame: BOX_EMPTY, color: BOX_COLOR });
+  if (phase === "burst" && outcome.kind !== "no_hat") {
+    return /* @__PURE__ */ jsx10(ConfettiBurst, { tier: outcome.hat.rarity });
+  }
+  if (outcome.kind === "no_hat") return /* @__PURE__ */ jsx10(GiftBox, { frame: BOX_EMPTY, color: BOX_COLOR });
+  return outcome.hat.rarity === "legendary" ? /* @__PURE__ */ jsx10(AnimatedHatSprite, { hat: outcome.hat, centerIn: { w: SCENE_W, h: SCENE_H } }) : /* @__PURE__ */ jsx10(HatSprite, { hat: outcome.hat, variant: outcome.variant, centerIn: { w: SCENE_W, h: SCENE_H } });
+}
+
+// src/ui/RollHorsePicker.tsx
+import { useState as useState8 } from "react";
+import { Box as Box11, Text as Text11, useInput as useInput4 } from "ink";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function RollHorsePicker({ horses, onPick, onCancel }) {
+  const [idx, setIdx] = useState8(0);
+  useInput4((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (horses.length === 0) return;
+    if (key.upArrow) {
+      setIdx((idx - 1 + horses.length) % horses.length);
+      return;
+    }
+    if (key.downArrow) {
+      setIdx((idx + 1) % horses.length);
+      return;
+    }
+    if (key.return) {
+      onPick(horses[idx]);
+      return;
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx11(Text11, { children: "Pick a horse to roll for:" }),
+    horses.map((h, i) => /* @__PURE__ */ jsxs7(Box11, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx11(Box11, { flexDirection: "row", children: /* @__PURE__ */ jsxs7(Text11, { children: [
+        i === idx ? "\u25BA" : " ",
+        " ",
+        h.name,
+        " ",
+        /* @__PURE__ */ jsxs7(Text11, { color: "cyan", children: [
+          "[Lvl. ",
+          levelFromXp(h.xp),
+          "]"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsxs7(Text11, { color: "yellow", children: [
+          "\u2014 ",
+          h.pending,
+          " roll",
+          h.pending === 1 ? "" : "s"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs7(Box11, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx11(Text11, { children: "  " }),
+        /* @__PURE__ */ jsx11(HorseSprite, { sprite: MINI_SPRITE, colors: h.colors })
+      ] })
+    ] }, h.stable_horse_id)),
+    /* @__PURE__ */ jsx11(Box11, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "\u2191/\u2193 choose \xB7 Enter pick \xB7 Esc cancel" }) })
+  ] });
+}
+
+// src/commands/roll.ts
+function pendingFor(horse) {
+  const level = levelFromXp(horse.xp);
+  const lastRolled = horse.last_rolled_level ?? Math.max(0, level - 1);
+  return level - lastRolled;
+}
+async function promptYesNo(question) {
+  const readline7 = await import("readline/promises");
+  const rl = readline7.createInterface({ input: process.stdin, output: process.stdout });
+  const a = (await rl.question(question)).trim().toLowerCase();
+  rl.close();
+  return a === "" || a === "y" || a === "yes";
+}
+async function runReveal(outcome) {
+  printClosedBox();
+  const readline7 = await import("readline/promises");
+  const rl = readline7.createInterface({ input: process.stdin, output: process.stdout });
+  await rl.question("Press Enter to open the box\u2026 ");
+  rl.close();
+  await new Promise((resolve) => {
+    const app = render5(React13.createElement(RollReveal, {
+      outcome,
+      onDone: () => {
+        app.unmount();
+        resolve();
+      }
+    }));
+  });
+}
+async function rollCommand() {
+  let stable;
+  try {
+    stable = await listStable();
+  } catch (e) {
+    if (e instanceof ApiError) {
+      console.error(`Error: ${e.code} ${e.message}`);
+      return 1;
+    }
+    throw e;
+  }
+  const eligible = stable.horses.map((h) => ({ ...h, pending: pendingFor(h) })).filter((h) => h.pending > 0);
+  if (eligible.length === 0) {
+    console.log("No rolls available. Level up a horse to earn a roll!");
+    return 0;
+  }
+  let chosen = eligible[0];
+  if (eligible.length > 1) {
+    const picked = await new Promise((resolve) => {
+      const app = render5(React13.createElement(RollHorsePicker, {
+        horses: eligible,
+        onPick: (h) => {
+          app.unmount();
+          resolve(h);
+        },
+        onCancel: () => {
+          app.unmount();
+          resolve(null);
+        }
+      }));
+    });
+    if (!picked) {
+      console.log("Cancelled.");
+      return 0;
+    }
+    chosen = picked;
+  }
+  while (true) {
+    let result;
+    try {
+      result = await rollHat(chosen.stable_horse_id);
+    } catch (e) {
+      if (e instanceof ApiError) {
+        if (e.code === "INSUFFICIENT_ROLLS") {
+          console.log("No more rolls available.");
+          return 0;
+        }
+        console.error(`Error: ${e.code} ${e.message}`);
+        return 1;
+      }
+      throw e;
+    }
+    const outcome = (() => {
+      if (result.result === "hat") {
+        const hat = hatById(result.collected.id);
+        if (!hat) return null;
+        return { kind: "hat", hat, variant: result.collected.variant };
+      }
+      if (result.result === "duplicate") {
+        const hat = hatById(result.hat_id);
+        if (!hat) return null;
+        return { kind: "duplicate", hat, variant: result.variant };
+      }
+      return { kind: "no_hat" };
+    })();
+    if (!outcome) {
+      console.error("Server returned an unknown hat id \u2014 catalog mismatch.");
+      return 1;
+    }
+    await runReveal(outcome);
+    if (result.result === "hat") {
+      const hat = hatById(result.collected.id);
+      const variantSuffix = hat.rarity !== "legendary" && result.collected.variant !== void 0 ? ` #${result.collected.variant + 1}` : "";
+      console.log(`
+\u2728 ${hat.name}${variantSuffix} [${hat.rarity.toUpperCase()}]
+`);
+      if (await promptYesNo("Equip now? [Y/n] ")) {
+        try {
+          await equipHat(chosen.stable_horse_id, { hat_index: result.hat_index });
+          console.log(`Equipped on ${chosen.name}.`);
+        } catch (e) {
+          if (e instanceof ApiError) {
+            console.error(`Equip failed: ${e.code} ${e.message}`);
+          } else throw e;
+        }
+      }
+    } else if (result.result === "duplicate") {
+      const hat = hatById(result.hat_id);
+      const variantSuffix = result.variant !== void 0 ? ` #${result.variant + 1}` : "";
+      console.log(`
+You already have ${hat?.name ?? result.hat_id}${variantSuffix}. +${result.xp_awarded} XP.
+`);
+    } else {
+      console.log(`
+No hat this time. +${result.xp_awarded} XP toward your next level.
+`);
+    }
+    if (result.remaining_rolls <= 0) return 0;
+    if (!await promptYesNo(`${result.remaining_rolls} more roll${result.remaining_rolls === 1 ? "" : "s"} available. Roll again? [Y/n] `)) return 0;
+  }
+}
+
 // src/commands/org-create.ts
 import * as readline6 from "readline/promises";
 import { stdin as stdin6, stdout as stdout6 } from "process";
@@ -1946,6 +2608,10 @@ Races:
   token-derby join <join-code>            Join (or resume) a race
   token-derby end <admin-code>            End a race early
 
+Cosmetics:
+  token-derby roll                        Spend a pending roll to try for a hat.
+                                          Earn rolls by leveling up horses.
+
 Environment:
   TOKEN_DERBY_API_BASE                    Override API base URL (default: production)
   TOKEN_DERBY_HOME                        Override identity/stable directory
@@ -2006,6 +2672,7 @@ async function main() {
   }
   if (cmd === "join") return joinCommand(argv[1]);
   if (cmd === "end") return endCommand(argv[1]);
+  if (cmd === "roll") return rollCommand();
   console.error(`Unknown command: ${cmd}`);
   console.error(HELP);
   return 2;