@capagents/forgeqe 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capagents/forgeqe",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "ForgeQE: a browser agent CLI that runs goals and test cases in local Chrome or Chromium, or BrowserStack and TestMu AI/LambdaTest when configured, and turns passing runs into tests in your repo",
   "license": "MIT",
   "type": "module",

package/src/tui/agentIcons.ts

@@ -1,39 +1,75 @@
 import { AGENT_HUES, theme } from "./theme.ts"
 
 /**
- * Each agent's face in the shell: a short name and an icon, so it is clear which agent or subagent is working. The icon
- * is one character, a picture of the agent's job, in a colour no other agent has; the name is in that colour too.
- * Plain data, tested without a terminal.
+ * Each agent's face in the shell: a short name and an icon, so it is clear which agent or subagent is working. The
+ * icon is a picture of the agent's job after one set of hexagon tiles (soft tones, a deeper one where shapes overlap),
+ * in a colour no other agent has; the name is in that colour too. Plain data, tested without a terminal.
  */
 
-export type Hue = keyof typeof AGENT_HUES
-
 /**
- * `icon`: one character, one column wide in every terminal. None of them is a mark the shell uses for a state
- * (✓ ✗ ○ ◐ ■ ▸ ✎ ↻), so an agent is never read as a result.
+ * Eight pixels wide and four high: `#` the agent's main tone, `+` its deeper tone (where shapes overlap, or the part
+ * that stands out), `.` empty. A quadrant block holds two by two pixels, so a picture is four characters on two rows.
  */
-export type AgentFace = { name: string; icon: string; hue: Hue }
+export const SHAPES = {
+  /** A plain hexagon: an agent not listed. */
+  hexagon: ["..####..", ".######.", ".######.", "..####.."],
+  /** Hexagons stacked into one: ForgeQE's agent, which starts the others. */
+  hub: ["...##...", ".##++##.", "##++++##", ".##..##."],
+  /** A browser window with its title bar. */
+  window: ["++++++++", "#......#", "#......#", "########"],
+  /** A magnifier. */
+  magnifier: [".###....", "#+++#...", ".###.#..", ".....##."],
+  /** A bar chart. */
+  chart: ["......##", "...##.##", "##.##.##", "++++++++"],
+  /** A funnel: a request narrowed to a specification. */
+  funnel: ["########", ".######.", "..++++..", "...++..."],
+  /** A list with its bullets. */
+  list: ["+.######", "........", "+.####..", "........"],
+  /** A flag on its pole. */
+  flag: ["##+++++.", "##++++..", "##......", "##......"],
+  /** A pencil, its tip at the bottom left. */
+  pencil: [".....+++", "...###+.", ".###....", "+#......"],
+  /** An open book on its spine. */
+  book: ["##....##", "###..###", "###++###", "...++..."],
+  /** A cross. */
+  cross: ["...##...", ".##++##.", ".##++##.", "...##..."],
+  /** A plug with its prongs and cable. */
+  plug: ["..#..#..", ".++++++.", ".++++++.", "...##..."],
+  /** A check mark. */
+  check: ["......##", "##...##.", ".##+##..", "..+++..."],
+  /** A comment bubble. */
+  bubble: ["########", "#.+.+.+#", "########", ".##....."],
+  /** A gavel on its block. */
+  gavel: [".++++...", ".++++#..", ".....##.", "###...##"],
+  /** A bug. */
+  bug: ["+..##..+", ".######.", "+##++##+", ".##++##."],
+} as const
+
+export type Shape = keyof typeof SHAPES
+export type Hue = keyof typeof AGENT_HUES
+
+export type AgentFace = { name: string; shape: Shape; hue: Hue }
 
 /**
  * Keyed by the agent's name in src/agents.ts (its AgentSpec name, or "engine"). Each has its own hue; the hue's
  * neighbourhood says what the agent does: purples plan and lead, blues run and look, greens write code, warm hues judge.
  */
 export const FACES: Record<string, AgentFace> = {
-  forgeqe: { name: "ForgeQE's agent", icon: "⬢", hue: "purple" },
-  "forgeqe-refine": { name: "Refine", icon: "▽", hue: "indigo" },
-  "forgeqe-api-plan": { name: "API planner", icon: "≡", hue: "orchid" },
-  "forgeqe-explore-plan": { name: "Explorer", icon: "⚑", hue: "magenta" },
-  engine: { name: "Browser agent", icon: "◫", hue: "blue" },
-  "forgeqe-find": { name: "Test finder", icon: "◎", hue: "cyan" },
-  "forgeqe-bi": { name: "Insights", icon: "▥", hue: "yellow" },
-  "forgeqe-test": { name: "Scribe", icon: "✐", hue: "green" },
-  "forgeqe-read": { name: "Scribe, reading", icon: "▤", hue: "leaf" },
-  "forgeqe-heal": { name: "Healer", icon: "✚", hue: "lime" },
-  "forgeqe-api": { name: "API test writer", icon: "⇌", hue: "teal" },
-  "forgeqe-review": { name: "Reviewer", icon: "◈", hue: "pink" },
-  "forgeqe-pr-review": { name: "PR reviewer", icon: "⎇", hue: "rose" },
-  "forgeqe-judge": { name: "Judge", icon: "⚖", hue: "coral" },
-  "forgeqe-defect-rca": { name: "Root cause", icon: "✱", hue: "orange" },
+  forgeqe: { name: "ForgeQE's agent", shape: "hub", hue: "purple" },
+  "forgeqe-refine": { name: "Refine", shape: "funnel", hue: "indigo" },
+  "forgeqe-api-plan": { name: "API planner", shape: "list", hue: "orchid" },
+  "forgeqe-explore-plan": { name: "Explorer", shape: "flag", hue: "magenta" },
+  engine: { name: "Browser agent", shape: "window", hue: "blue" },
+  "forgeqe-find": { name: "Test finder", shape: "magnifier", hue: "cyan" },
+  "forgeqe-bi": { name: "Insights", shape: "chart", hue: "yellow" },
+  "forgeqe-test": { name: "Scribe", shape: "pencil", hue: "green" },
+  "forgeqe-read": { name: "Scribe, reading", shape: "book", hue: "leaf" },
+  "forgeqe-heal": { name: "Healer", shape: "cross", hue: "lime" },
+  "forgeqe-api": { name: "API test writer", shape: "plug", hue: "teal" },
+  "forgeqe-review": { name: "Reviewer", shape: "check", hue: "pink" },
+  "forgeqe-pr-review": { name: "PR reviewer", shape: "bubble", hue: "rose" },
+  "forgeqe-judge": { name: "Judge", shape: "gavel", hue: "coral" },
+  "forgeqe-defect-rca": { name: "Root cause", shape: "bug", hue: "orange" },
 }
 
 export const BRAIN = "forgeqe"
@@ -41,9 +77,51 @@ export const BROWSER = "engine"
 export const SCRIBE = "forgeqe-test"
 
 /** An agent's face; one not listed is named by its id, without the "forgeqe-" prefix, with a plain grey hexagon. */
-export function faceOf(agent: string): AgentFace & { main: string } {
+export function faceOf(agent: string): AgentFace & { main: string; deep: string } {
   const face = FACES[agent]
-  if (face) return { ...face, main: AGENT_HUES[face.hue] }
+  if (face) return { ...face, ...AGENT_HUES[face.hue] }
   const name = agent.replace(/^forgeqe-/, "").replace(/-/g, " ")
-  return { name: name.charAt(0).toUpperCase() + name.slice(1), icon: "⬡", hue: "blue", main: theme.faint }
+  return { name: name.charAt(0).toUpperCase() + name.slice(1), shape: "hexagon", hue: "blue", main: theme.faint, deep: theme.border }
+}
+
+/** Columns an icon takes: two pixels to a quadrant block. */
+export const ICON_WIDTH = SHAPES.hexagon[0].length / 2
+
+/** The quadrant block for each set of its four pixels: top left 1, top right 2, bottom left 4, bottom right 8. */
+const QUADRANT = " ▘▝▀▖▌▞▛▗▚▐▜▄▙▟█"
+
+/** One character of an icon and its colour. */
+export type IconCell = { ch: string; fg: string }
+
+/** "#7fe0d6" toward white by `amount` (0 to 1): the highlight that sweeps across a working agent's icon. */
+export function lighten(hex: string, amount: number): string {
+  const n = parseInt(hex.slice(1), 16)
+  const channel = (shift: number) => {
+    const v = (n >> shift) & 0xff
+    return Math.round(v + (255 - v) * amount)
+  }
+  return `#${[16, 8, 0].map((s) => channel(s).toString(16).padStart(2, "0")).join("")}`
+}
+
+/** Frames in one sweep of the highlight: across the icon, then a pause as long. */
+export const SWEEP_FRAMES = ICON_WIDTH * 2
+
+/**
+ * The agent's icon as two rows of quadrant blocks, each in the tone most of its pixels have (a tie keeps the main
+ * tone). `frame`: while the agent works, the frame of the highlight that sweeps across it, a column at a time, then
+ * rests; undefined, the icon is still.
+ */
+export function iconCells(agent: string, frame?: number): IconCell[][] {
+  const face = faceOf(agent)
+  const px = SHAPES[face.shape]
+  const lit = frame === undefined ? -1 : frame % SWEEP_FRAMES
+  return [0, 1].map((r) =>
+    Array.from({ length: ICON_WIDTH }, (_, c) => {
+      const pixels = [px[r * 2]![c * 2], px[r * 2]![c * 2 + 1], px[r * 2 + 1]![c * 2], px[r * 2 + 1]![c * 2 + 1]]
+      const bits = pixels.reduce((n, p, i) => (p === "#" || p === "+" ? n | (1 << i) : n), 0)
+      const deep = pixels.filter((p) => p === "+").length > pixels.filter((p) => p === "#").length
+      const tone = deep ? face.deep : face.main
+      return { ch: QUADRANT[bits]!, fg: c === lit ? lighten(tone, 0.6) : tone }
+    }),
+  )
 }

package/src/tui/inspector.tsx

@@ -1,8 +1,8 @@
 import type { ScrollBoxRenderable } from "@opentui/core"
-import type { ReactNode, RefObject } from "react"
+import { useEffect, useState, type ReactNode, type RefObject } from "react"
 
 import type { Usage } from "../types.ts"
-import { faceOf } from "./agentIcons.ts"
+import { faceOf, iconCells, ICON_WIDTH } from "./agentIcons.ts"
 import { fitButtons, Spinner, type Button } from "./components.tsx"
 import { crewMs, filesByUse, type CrewMember, type FileUse, type Inspector, type Progress } from "./session.ts"
 import { clip, plainText, tailCut } from "./text.ts"
@@ -67,10 +67,33 @@ export function Panel(props: { title: string; color: string; width?: number; hei
   )
 }
 
-/** An agent's icon and name in its colour, on one line: "◫ Browser agent". */
-export function AgentName({ agent, max = 40 }: { agent: string; max?: number }) {
-  const face = faceOf(agent)
-  return <text fg={face.main}>{`${face.icon} ${clip(face.name, Math.max(4, max - 2))}`}</text>
+/** Milliseconds a frame of a working agent's icon shows: the highlight crosses it and rests in about a second. */
+const SWEEP_MS = 140
+
+/**
+ * An agent's icon (src/tui/agentIcons.ts): its picture in quadrant blocks, four columns and two rows, in its colours.
+ * `live`: the agent is working, and a highlight sweeps across the icon in place of a spinner.
+ */
+export function AgentIcon({ agent, live = false }: { agent: string; live?: boolean }) {
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    if (!live) return
+    const timer = setInterval(() => setFrame((f) => f + 1), SWEEP_MS)
+    return () => clearInterval(timer)
+  }, [live])
+  return (
+    <box style={{ flexDirection: "column", width: ICON_WIDTH, height: 2, flexShrink: 0 }}>
+      {iconCells(agent, live ? frame : undefined).map((row, r) => (
+        <text key={r}>
+          {row.map((cell, c) => (
+            <span key={c} fg={cell.fg}>
+              {cell.ch}
+            </span>
+          ))}
+        </text>
+      ))}
+    </box>
+  )
 }
 
 /** How far the agent's own plan has got, while it has one of two steps or more. */
@@ -94,8 +117,10 @@ export const STATUS_ROWS = 2
 export function StatusBar(props: {
   running: boolean
   who: string
-  /** The agent working (its name in src/agents.ts): while the request runs, `who` is written with its icon and colour. */
+  /** The agent working (its name in src/agents.ts): its icon leads both rows while the request runs, and moves. */
   agent?: string
+  /** The colour `who` is written in: the working agent's own; its icon stands in for the spinner. */
+  whoColor?: string
   activity: string
   elapsed: string
   status: string
@@ -106,7 +131,17 @@ export function StatusBar(props: {
   /** Buttons for the view (Focus panels, Close), before Stop; the first to give way when the line is short. */
   actions?: Button[]
 }) {
-  const face = props.running && props.agent ? faceOf(props.agent) : null
+  const icon = props.running && props.agent ? props.agent : null
+  if (icon) {
+    return (
+      <box style={{ flexDirection: "row", height: STATUS_ROWS, flexShrink: 0, paddingLeft: 1 }}>
+        <AgentIcon agent={icon} live />
+        <box style={{ width: props.width - ICON_WIDTH - 1, flexShrink: 0 }}>
+          <StatusBar {...props} agent={undefined} whoColor={faceOf(icon).main} width={props.width - ICON_WIDTH - 1} />
+        </box>
+      </box>
+    )
+  }
   const done = props.status === "done"
   const failed = props.status === "fail"
   const color = props.running ? theme.warn : done ? theme.ok : failed ? theme.err : theme.muted
@@ -115,15 +150,15 @@ export function StatusBar(props: {
   const cells = 12
   const barText = bar ? ` ${bar.done}/${bar.total}  ` : ""
   const stop = "■ Stop · esc"
-  const fixed = state.length + 4 + (face ? 2 : 0) + (props.running ? stop.length + 4 + props.elapsed.length + 2 + (bar ? cells + barText.length : 0) : 0)
+  const fixed = state.length + 4 + (props.running ? stop.length + 4 + props.elapsed.length + 2 + (bar ? cells + barText.length : 0) : 0)
   const actions = fitButtons(props.actions || [], Math.max(0, props.width - fixed - 2))
   const [full, empty] = bar ? progressBar(bar.done, bar.total, cells) : ["", ""]
   return (
     <box style={{ flexDirection: "column", height: STATUS_ROWS, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
       <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
         <box style={{ flexDirection: "row" }}>
-          {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
-          <text fg={face ? face.main : props.running ? theme.text : color}>{`${face ? ` ${face.icon}` : ""} ${clip(state, Math.max(8, props.width - fixed + state.length))}`}</text>
+          {props.whoColor ? null : props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
+          <text fg={props.running ? props.whoColor || theme.text : color}>{`${props.whoColor ? "" : " "}${clip(state, Math.max(8, props.width - fixed + state.length))}`}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
           {actions.map((b) => (
@@ -170,19 +205,18 @@ const CREW_MARK: Record<CrewMember["state"], [string, string]> = {
 
 /** Rows the crew strip takes, the blank row under it included: none until a second agent has joined the request. */
 export function crewRows(s: Inspector): number {
-  return s.crew.length > 1 ? 2 : 0
+  return s.crew.length > 1 ? 3 : 0
 }
 
-/** What a member's state says: "waiting", or how long it has worked. */
+/** What a member's second row says: "waiting", or how long it has worked. */
 function crewState(m: CrewMember, now: number): string {
   return m.state === "waiting" ? "waiting" : formatDuration(crewMs(m, now))
 }
 
-/** Most columns an agent's name takes in the strip. */
-const CREW_NAME = 18
+/** Columns a tile's text takes, and the tile with its icon. */
+const CREW_TEXT = 18
+const crewTextWidth = (m: CrewMember, now: number) => Math.min(CREW_TEXT, Math.max(faceOf(m.agent).name.length, crewState(m, now).length + 2))
 const CREW_GAP = " › "
-/** "◫ Browser agent ✓ 39s": an agent in the strip, its icon, name, state mark, and state. */
-const crewWidth = (m: CrewMember, now: number) => 2 + Math.min(CREW_NAME, faceOf(m.agent).name.length) + 3 + crewState(m, now).length
 
 /**
  * The chat view's line under the conversation while a request runs (the panels closed): the working agent's icon, its
@@ -192,11 +226,11 @@ const crewWidth = (m: CrewMember, now: number) => 2 + Math.min(CREW_NAME, faceOf
 export function AgentWorking(props: { s: Inspector; activity: string; stats: string; width: number }) {
   const { s } = props
   const face = faceOf(s.agent)
-  const room = Math.max(10, props.width - 2)
-  const name = clip(face.name, Math.max(8, room - 6))
+  const room = Math.max(10, props.width - ICON_WIDTH - 1)
+  const name = clip(face.name, Math.max(8, room - 4))
   const stats = `(${props.stats})`
   const chain = s.crew.length > 1 ? s.crew : []
-  const size = (m: CrewMember) => 4 + faceOf(m.agent).name.length
+  const size = (m: CrewMember) => 2 + faceOf(m.agent).name.length
   let first = chain.length
   let used = 0
   while (first > 0) {
@@ -206,40 +240,40 @@ export function AgentWorking(props: { s: Inspector; activity: string; stats: str
     first--
   }
   return (
-    <box style={{ flexDirection: "column", marginTop: 1, flexShrink: 0 }}>
-      <box style={{ flexDirection: "row", height: 1 }}>
-        <Spinner kind="dots" color={face.main} />
-        <text>
-          <span fg={face.main}>{` ${face.icon} ${name}`}</span>
-          <span fg={theme.memory}>{`  ${clip(props.activity || "Working…", Math.max(8, room - name.length - 6))}`}</span>
+    <box style={{ flexDirection: "row", marginTop: 1, flexShrink: 0 }}>
+      <AgentIcon agent={s.agent} live />
+      <box style={{ flexDirection: "column", paddingLeft: 1, flexGrow: 1, flexShrink: 1 }}>
+        <box style={{ flexDirection: "row", height: 1 }}>
+          <text>
+            <span fg={face.main}>{name}</span>
+            <span fg={theme.memory}>{`  ${clip(props.activity || "Working…", Math.max(8, room - name.length - 4))}`}</span>
+          </text>
+        </box>
+        <text style={{ height: 1 }}>
+          {first > 0 ? <span fg={theme.faint}>{`+${first} `}</span> : null}
+          {chain.slice(first).flatMap((m, i) => {
+            const [mark, color] = CREW_MARK[m.state]
+            return [
+              ...(i ? [<span key={`${m.agent}-gap`} fg={theme.border}>{CREW_GAP}</span>] : []),
+              <span key={`${m.agent}-mark`} fg={color}>{`${mark} `}</span>,
+              <span key={m.agent} fg={faceOf(m.agent).main}>{faceOf(m.agent).name}</span>,
+            ]
+          })}
+          <span fg={theme.faint}>{`${chain.length ? "  " : ""}${clip(stats, Math.max(8, room - used))}`}</span>
         </text>
       </box>
-      <text style={{ height: 1, paddingLeft: 2 }}>
-        {first > 0 ? <span fg={theme.faint}>{`+${first} `}</span> : null}
-        {chain.slice(first).flatMap((m, i) => {
-          const [mark, color] = CREW_MARK[m.state]
-          const f = faceOf(m.agent)
-          return [
-            ...(i ? [<span key={`${m.agent}-gap`} fg={theme.border}>{CREW_GAP}</span>] : []),
-            <span key={`${m.agent}-mark`} fg={color}>{`${mark} `}</span>,
-            <span key={m.agent} fg={f.main}>{`${f.icon} ${f.name}`}</span>,
-          ]
-        })}
-        <span fg={theme.faint}>{`${chain.length ? "  " : ""}${clip(stats, Math.max(8, room - used))}`}</span>
-      </text>
     </box>
   )
 }
 
 /**
- * Every agent that took part in the request, in the order they started, on one line: each one's icon and name, and
- * whether it is working (spinning, with its time), waiting for a subagent, or done. The latest that fit; "+N" for the
- * earlier.
+ * Every agent that took part in the request, in the order they started, as tiles: the icon, its name, and whether it
+ * is working (its icon moving, with its time), waiting for a subagent, or done. The latest that fit; "+N" for the earlier.
  */
 export function CrewStrip(props: { s: Inspector; width: number; running: boolean; now?: number }) {
   const now = props.now ?? Date.now()
   const crew = props.s.crew
-  const tileWidth = (m: CrewMember) => crewWidth(m, now)
+  const tileWidth = (m: CrewMember) => ICON_WIDTH + 1 + crewTextWidth(m, now)
   let first = crew.length
   let used = 0
   while (first > 0) {
@@ -250,19 +284,26 @@ export function CrewStrip(props: { s: Inspector; width: number; running: boolean
     first--
   }
   return (
-    <box style={{ flexDirection: "row", height: 1, flexShrink: 0, marginBottom: 1, paddingLeft: 1 }}>
+    <box style={{ flexDirection: "row", height: 2, flexShrink: 0, marginBottom: 1, paddingLeft: 1 }}>
       {first > 0 ? <text fg={theme.faint}>{`+${first} `}</text> : null}
       {crew.slice(first).map((m, i) => {
+        const face = faceOf(m.agent)
         const [mark, color] = CREW_MARK[m.state]
         const live = m.state === "working" && props.running
+        const text = crewTextWidth(m, now)
         return (
           <box key={m.agent} style={{ flexDirection: "row", flexShrink: 0 }}>
             {i ? <text fg={theme.border}>{CREW_GAP}</text> : null}
-            {/* Each agent's icon and name in its own colour, as in the status bar. */}
-            <AgentName agent={m.agent} max={CREW_NAME + 2} />
-            <text>{" "}</text>
-            <box style={{ width: 2, flexShrink: 0 }}>{live ? <Spinner kind="dots" color={color} /> : <text fg={color}>{mark}</text>}</box>
-            <text fg={m.state === "working" ? theme.warn : theme.faint}>{crewState(m, now)}</text>
+            <AgentIcon agent={m.agent} live={live} />
+            <box style={{ flexDirection: "column", width: text + 1, paddingLeft: 1, flexShrink: 0 }}>
+              {/* Each agent's name in its own colour, so its tile, the status bar, and the icon read as one agent. */}
+              <text fg={face.main}>{clip(face.name, text)}</text>
+              <box style={{ flexDirection: "row", height: 1 }}>
+                {/* The working agent's icon moves, so its time needs no spinner beside it. */}
+                {live ? null : <text fg={color} style={{ width: 2, flexShrink: 0 }}>{mark}</text>}
+                <text fg={m.state === "working" ? theme.warn : theme.faint}>{crewState(m, now)}</text>
+              </box>
+            </box>
           </box>
         )
       })}

package/src/tui/theme.ts

@@ -20,29 +20,29 @@ export const theme = {
 }
 
 /**
- * The agents' colours (src/tui/agentIcons.ts), one per agent, for its icon and its name. Neighbouring hues go to agents
- * that do the same kind of work.
+ * The agents' colours (src/tui/agentIcons.ts), one per agent: its main tone, for its name and icon, and the deeper one
+ * where its icon's shapes overlap. Neighbouring hues go to agents that do the same kind of work.
  */
 export const AGENT_HUES = {
   // Plan and lead.
-  purple: "#a78bfa",
-  indigo: "#8fa2ff",
-  orchid: "#e0a3f5",
-  magenta: "#f59fe0",
+  purple: { main: "#a78bfa", deep: "#5b2bc4" },
+  indigo: { main: "#8fa2ff", deep: "#3d4fd6" },
+  orchid: { main: "#e0a3f5", deep: "#a443d6" },
+  magenta: { main: "#f59fe0", deep: "#c2389e" },
   // Run and look.
-  blue: "#a9d0f8",
-  cyan: "#8ee3f5",
-  yellow: "#f0e48c",
+  blue: { main: "#a9d0f8", deep: "#5ea6f0" },
+  cyan: { main: "#8ee3f5", deep: "#1fa3c4" },
+  yellow: { main: "#f0e48c", deep: "#b8a32a" },
   // Write code.
-  green: "#6fd3b2",
-  leaf: "#9be89b",
-  lime: "#cde88a",
-  teal: "#7fe0d6",
+  green: { main: "#6fd3b2", deep: "#3a9a7e" },
+  leaf: { main: "#9be89b", deep: "#3fa34d" },
+  lime: { main: "#cde88a", deep: "#86a92c" },
+  teal: { main: "#7fe0d6", deep: "#1f9c90" },
   // Judge.
-  pink: "#f29bc9",
-  rose: "#ff9eaa",
-  coral: "#ffb199",
-  orange: "#ffc58a",
+  pink: { main: "#f29bc9", deep: "#e0457b" },
+  rose: { main: "#ff9eaa", deep: "#d93a52" },
+  coral: { main: "#ffb199", deep: "#e0603a" },
+  orange: { main: "#ffc58a", deep: "#d6701f" },
 }
 
 /** 950 → "950", 47_100 → "47.1K", 2_300_000 → "2.3M". */