feat: redesign orbit header spinner with two satellites + depth fade

ORBIT_SPINNER is now a 10-frame, 5-cell-wide cycle of structural
{glyph, tone} cells (was a 7-frame string array of width 4). Two
satellites trace one full CW orbit per cycle through behind → out
→ closer → in → transit → out → farther → in → transit. Glyph
(⋅ small/far vs ∘ big/close) and color (4-step blue gradient: 60
dim, 67 medDim, 75 med, 117 bright) both encode depth so the orbit
reads as 3D. Planet glyph swapped to ⊝; PHASE_PASS is the planet
at rest ("  ⊝  "), PHASE_FAIL is padded to the new PHASE_WIDTH=5.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Agent IX

packages/cli/src/colors.ts

@@ -19,3 +19,11 @@ export const colors = {
 
 // "IX blue" alias — single source of the accent colour used throughout.
 export const blue = pc.cyan;
+
+// Orbit tone helpers — 4-step blue brightness gradient for the new orbit
+// spinner. Glyph (⋅ vs ∘) and color both track depth: closer = bigger + brighter.
+const c256 = (n: number) => (s: string) => `\x1b[38;5;${n}m${s}\x1b[0m`;
+export const orbitDim = c256(60); //    dark steel  — ⋅ at adj   (deepest visible)
+export const orbitMedDim = c256(67); // steel       — ⋅ at far   (back at equator)
+export const orbitMed = c256(75); //    cornflower  — ∘ at far   (front at equator)
+export const orbitBright = c256(117); // sky blue   — ∘ at adj   (closest)

packages/cli/src/index.ts

@@ -114,10 +114,14 @@ export {
   PHASE_PASS,
   PHASE_FAIL,
   ORBIT_SPINNER,
+  orbitFrameGlyphs,
   colorOrbitFrame,
   renderHeader,
   colorPods,
   colors,
   blue,
   type PhaseState,
+  type OrbitCell,
+  type OrbitFrame,
+  type OrbitTone,
 } from "./style.js";

packages/cli/src/style.ts

@@ -10,11 +10,25 @@
  */
 
 import pc from "picocolors";
-import { ORBIT_SPINNER, type PhaseState } from "@agent-ix/ix-ui-semantic";
-import { colors, blue } from "./colors.js";
+import {
+  ORBIT_SPINNER,
+  orbitFrameGlyphs,
+  type PhaseState,
+  type OrbitCell,
+  type OrbitFrame,
+  type OrbitTone,
+} from "@agent-ix/ix-ui-semantic";
+import {
+  colors,
+  blue,
+  orbitDim,
+  orbitMedDim,
+  orbitMed,
+  orbitBright,
+} from "./colors.js";
 
-export type { PhaseState };
-export { ORBIT_SPINNER, colors, blue };
+export type { PhaseState, OrbitCell, OrbitFrame, OrbitTone };
+export { ORBIT_SPINNER, orbitFrameGlyphs, colors, blue };
 
 // ── Layout ──────────────────────────────────────────────────────────────────
 
@@ -29,7 +43,7 @@ export const ERROR_INDENT = ROW_INDENT + "    ";
 /** Indent for outer-level flow rows (pipe, preflight, completion). */
 export const FLOW_INDENT = " ";
 /** Header indicator width — keeps `[ … ]` aligned across spinner/pass/fail. */
-export const PHASE_WIDTH = 4;
+export const PHASE_WIDTH = 5;
 /** Advance the orbit glyph every N ticks (3 × 80 ms = 240 ms). */
 export const HEADER_TICK_DIV = 3;
 
@@ -70,23 +84,35 @@ export const GLYPH_COMPLETE = blue("✧");
 
 // ── Header rendering ────────────────────────────────────────────────────────
 
+const ORBIT_TONE: Record<OrbitTone, (s: string) => string> = {
+  gray: pc.gray,
+  dim: orbitDim,
+  medDim: orbitMedDim,
+  med: orbitMed,
+  bright: orbitBright,
+};
+
 /**
- * Per-glyph color the orbit frame: planet (⊙/⊚) gray, satellite (∘/⋅/⚬) blue.
+ * Apply per-cell tones to an orbit frame: each non-space cell carries its
+ * own tone (gray, dim, medDim, med, bright). Glyph and color together
+ * encode depth — ⋅ dim = farther, ∘ bright = closer.
  */
-export function colorOrbitFrame(frame: string): string {
-  return [...frame]
-    .map((ch) => {
-      if (ch === "⊙" || ch === "⊚") return pc.gray(ch);
-      if (ch === "∘" || ch === "⋅" || ch === "⚬") return blue(ch);
-      return ch;
-    })
+export function colorOrbitFrame(frame: OrbitFrame): string {
+  return frame
+    .map((c) => (typeof c === "string" ? c : ORBIT_TONE[c.tone](c.glyph)))
     .join("");
 }
 
-/** Frozen "passed" header indicator — orbit at rest. */
-export const PHASE_PASS: string = colorOrbitFrame(ORBIT_SPINNER[5]);
+/** Frozen "passed" header indicator — orbit at rest, planet alone in gray. */
+export const PHASE_PASS: string = colorOrbitFrame([
+  " ",
+  " ",
+  { glyph: "⊝", tone: "gray" },
+  " ",
+  " ",
+]);
 /** Frozen "failed" header indicator — red ⊗, padded to PHASE_WIDTH. */
-export const PHASE_FAIL: string = " " + colors.red("⊗") + "  ";
+export const PHASE_FAIL: string = " " + colors.red("⊗") + "   ";
 
 /** Wrap a header string in gray brackets with gray `·` separators. */
 export function renderHeader(text: string): string {

packages/cli/tests/frame.test.tsx

@@ -8,12 +8,12 @@ const stripAnsi = (s: string): string => s.replace(/\x1b\[[0-9;]*m/g, "");
 
 // FR-002-AC-2 (TC-113): passed status
 describe("FR-002-AC-2 (TC-113)", () => {
-  it("renders frozen ⊙ in passed state", () => {
+  it("renders frozen ⊝ in passed state", () => {
     const { lastFrame } = render(
       <Frame header="ix elements list" status="passed" />,
     );
     const out = stripAnsi(lastFrame() ?? "");
-    expect(out).toContain("⊙");
+    expect(out).toContain("⊝");
     expect(out).toContain("[ ix elements list ]");
   });
 });

packages/cli/tests/style.test.ts

@@ -22,6 +22,7 @@ import {
   PHASE_PASS,
   PHASE_FAIL,
   ORBIT_SPINNER,
+  orbitFrameGlyphs,
   colorOrbitFrame,
   renderHeader,
   colorPods,
@@ -59,10 +60,10 @@ describe("FR-016-AC-5 (TC-304)", () => {
   });
 });
 
-// FR-016-AC-6: PHASE_WIDTH = 4 (TC-305) + TC-CB-04
+// FR-016-AC-6: PHASE_WIDTH = 5 (TC-305) + TC-CB-04
 describe("FR-016-AC-6 (TC-305, TC-CB-04)", () => {
-  it("PHASE_WIDTH is 4", () => {
-    expect(PHASE_WIDTH).toBe(4);
+  it("PHASE_WIDTH is 5", () => {
+    expect(PHASE_WIDTH).toBe(5);
   });
   it("PHASE_PASS is exactly PHASE_WIDTH cells (after stripping ANSI)", () => {
     expect(stripAnsi(PHASE_PASS)).toHaveLength(PHASE_WIDTH);
@@ -115,8 +116,8 @@ describe("FR-001-AC-12 (TC-111)", () => {
 
 // FR-016-AC-10: PHASE_PASS / PHASE_FAIL
 describe("FR-016-AC-10 (TC-309)", () => {
-  it("PHASE_PASS is the orbit at frame index 5", () => {
-    expect(stripAnsi(PHASE_PASS)).toBe(ORBIT_SPINNER[5]);
+  it("PHASE_PASS is the planet at rest (⊝, no satellites)", () => {
+    expect(stripAnsi(PHASE_PASS)).toBe("  ⊝  ");
   });
   it("PHASE_FAIL contains a red ⊗", () => {
     expect(PHASE_FAIL).toContain("⊗");
@@ -127,12 +128,12 @@ describe("FR-016-AC-10 (TC-309)", () => {
 describe("FR-016-AC-11 (TC-310)", () => {
   it("preserves the underlying glyphs after coloring", () => {
     const colored = colorOrbitFrame(ORBIT_SPINNER[0]);
-    expect(stripAnsi(colored)).toBe(ORBIT_SPINNER[0]);
+    expect(stripAnsi(colored)).toBe(orbitFrameGlyphs(ORBIT_SPINNER[0]));
   });
   it("colors orbit and satellite glyphs", () => {
-    // ORBIT[0] contains either ⊚ or ⊙ + a satellite. After coloring there
-    // should be at least one color escape.
-    const colored = colorOrbitFrame(ORBIT_SPINNER[0]);
+    // Frame 1 contains the planet ⊝ plus two sats (⋅ dim, ∘ bright).
+    // After coloring there should be at least one ANSI color escape.
+    const colored = colorOrbitFrame(ORBIT_SPINNER[1]);
     expect(colored).toMatch(/\x1b\[/);
   });
 });

packages/semantic/src/spinners.ts

@@ -13,17 +13,43 @@ export const BRAILLE_SPINNER = [
 
 export const HEADER_SPINNER = ["⊕", "⊘", "⊗", "⊖"];
 
-// Satellite orbiting a planet left→right. Planet ⊙ (or ⊚ when transiting)
-// is always at column 2; all frames are exactly 4 chars wide so the planet is
-// stable. Right-side trail recedes through three glyphs: adjacent ⚬ → gap ∘ →
-// gap ⋅. The trailing char is always a space so no additional separator is
-// needed when rendering before [ header ].
-export const ORBIT_SPINNER = [
-  "∘⊙  ", // near left
-  " ⊚  ", // transiting (satellite in front of planet)
-  " ⊙⚬ ", // near right (adjacent)
-  " ⊙ ∘", // receding right
-  " ⊙ ⋅", // far right (fading)
-  " ⊙  ", // behind
-  "⋅⊙  ", // approaching left
+// ── Orbit spinner ──────────────────────────────────────────────────────────
+//
+// Two satellites 180° apart on a CW orbit, projected to a 5-cell horizontal
+// lane (planet ⊝ at col 2). Each satellite goes through:
+//   behind → out → closer → in → transit → out → farther → in → transit
+// Glyph and color both track depth: ⋅ small/dim = farther, ∘ big/bright = closer.
+
+export type OrbitTone = "gray" | "dim" | "medDim" | "med" | "bright";
+export type OrbitCell = " " | { glyph: string; tone: OrbitTone };
+export type OrbitFrame = OrbitCell[];
+
+const cell = (glyph: string, tone: OrbitTone): OrbitCell => ({ glyph, tone });
+const PLANET = cell("⊝", "gray");
+const TRANSIT = cell("⊚", "gray");
+
+// 10-frame cycle. Frames 5–9 are visually identical to 0–4 (the two sats
+// swap which one is "in front" at each transit).
+//   n=0   ⊚       transit-front  (front sat over planet)
+//   n=1   ⋅⊝∘    out  — back-adj-L (⋅ dim) / front-adj-R (∘ bright)
+//   n=2   ⋅ ⊝ ∘  edge — back-far-L (⋅ medDim) / front-far-R (∘ med)
+//   n=3   ∘ ⊝ ⋅  edge — front-far-L (∘ med)  / back-far-R (⋅ medDim)
+//   n=4   ∘⊝⋅    in   — front-adj-L (∘ bright) / back-adj-R (⋅ dim)
+//   n=5   ⊚       transit (other sat now in front)
+//   n=6–9        identical to 1–4
+export const ORBIT_SPINNER: OrbitFrame[] = [
+  [" ", " ", TRANSIT, " ", " "],
+  [" ", cell("⋅", "dim"), PLANET, cell("∘", "bright"), " "],
+  [cell("⋅", "medDim"), " ", PLANET, " ", cell("∘", "med")],
+  [cell("∘", "med"), " ", PLANET, " ", cell("⋅", "medDim")],
+  [" ", cell("∘", "bright"), PLANET, cell("⋅", "dim"), " "],
+  [" ", " ", TRANSIT, " ", " "],
+  [" ", cell("⋅", "dim"), PLANET, cell("∘", "bright"), " "],
+  [cell("⋅", "medDim"), " ", PLANET, " ", cell("∘", "med")],
+  [cell("∘", "med"), " ", PLANET, " ", cell("⋅", "medDim")],
+  [" ", cell("∘", "bright"), PLANET, cell("⋅", "dim"), " "],
 ];
+
+/** Plain-text glyph string for a frame — useful for tests and logs. */
+export const orbitFrameGlyphs = (frame: OrbitFrame): string =>
+  frame.map((c) => (typeof c === "string" ? c : c.glyph)).join("");

packages/semantic/tests/glyphs.test.ts

@@ -59,17 +59,17 @@ describe("spinners", () => {
     expect(HEADER_SPINNER).toHaveLength(4);
   });
 
-  it("ORBIT_SPINNER has 7 frames", () => {
-    expect(ORBIT_SPINNER).toHaveLength(7);
+  it("ORBIT_SPINNER has 10 frames", () => {
+    expect(ORBIT_SPINNER).toHaveLength(10);
   });
 
-  it("ORBIT_SPINNER frames are all 4 chars wide", () => {
+  it("ORBIT_SPINNER frames are all 5 cells wide", () => {
     for (const frame of ORBIT_SPINNER) {
-      expect(frame).toHaveLength(4);
+      expect(frame).toHaveLength(5);
     }
   });
 
-  it("spinner frames are non-empty strings", () => {
+  it("BRAILLE_SPINNER and HEADER_SPINNER frames are non-empty strings", () => {
     for (const frame of BRAILLE_SPINNER) {
       expect(typeof frame).toBe("string");
       expect(frame.length).toBeGreaterThan(0);
@@ -78,9 +78,21 @@ describe("spinners", () => {
       expect(typeof frame).toBe("string");
       expect(frame.length).toBeGreaterThan(0);
     }
+  });
+
+  it("ORBIT_SPINNER cells are space or {glyph, tone}", () => {
     for (const frame of ORBIT_SPINNER) {
-      expect(typeof frame).toBe("string");
-      expect(frame.length).toBeGreaterThan(0);
+      for (const cell of frame) {
+        if (typeof cell === "string") {
+          expect(cell).toBe(" ");
+        } else {
+          expect(typeof cell.glyph).toBe("string");
+          expect(cell.glyph.length).toBeGreaterThan(0);
+          expect(["gray", "dim", "medDim", "med", "bright"]).toContain(
+            cell.tone,
+          );
+        }
+      }
     }
   });
 });