rippletide-package 0.1.0

package/counter/frontend/window.jxa

@@ -0,0 +1,601 @@
+ObjC.import("Cocoa")
+
+const args = $.NSProcessInfo.processInfo.arguments
+const statePath = ObjC.unwrap(args.objectAtIndex(args.count - 1))
+const app = $.NSApplication.sharedApplication
+const width = 200
+const height = 178
+const detailWidth = 380
+const detailHeight = 304
+
+function readState() {
+  const text = $.NSString.stringWithContentsOfFileEncodingError(statePath, $.NSUTF8StringEncoding, null)
+  if (!text) return null
+  try {
+    return JSON.parse(ObjC.unwrap(text))
+  } catch (_) {
+    return null
+  }
+}
+
+app.setActivationPolicy($.NSApplicationActivationPolicyAccessory)
+
+const screen = $.NSScreen.mainScreen.visibleFrame
+const rect = $.NSMakeRect(
+  screen.origin.x + screen.size.width - width - 24,
+  screen.origin.y + screen.size.height - height - 24,
+  width,
+  height,
+)
+const style = $.NSWindowStyleMaskTitled | $.NSWindowStyleMaskClosable | $.NSWindowStyleMaskNonactivatingPanel
+const win = $.NSPanel.alloc.initWithContentRectStyleMaskBackingDefer(rect, style, $.NSBackingStoreBuffered, false)
+
+win.setLevel($.NSFloatingWindowLevel)
+win.setCollectionBehavior(
+  $.NSWindowCollectionBehaviorCanJoinAllSpaces | $.NSWindowCollectionBehaviorFullScreenAuxiliary,
+)
+win.setMovableByWindowBackground(true)
+win.setTitleVisibility($.NSWindowTitleHidden)
+win.setTitlebarAppearsTransparent(true)
+win.setAppearance($.NSAppearance.appearanceNamed($.NSAppearanceNameDarkAqua))
+win.setOpaque(false)
+
+const G = [0.36, 0.86, 0.52] // Codex green
+const CLAUDE = [0.95, 0.55, 0.28]
+const UNKNOWN = [0.72, 0.72, 0.72]
+const RED = [1.0, 0.22, 0.24]
+const GOLD = [1.0, 0.82, 0.3] // milestone celebration accent
+const POPUP_BG = [0.13, 0.13, 0.13]
+const POPUP_RISK_BG = [0.62, 0.03, 0.04]
+const RING_BG = [0.19, 0.19, 0.19]
+const RING_RISK_BG = [0.42, 0.02, 0.03]
+const DIM = [0.55, 0.55, 0.55]
+const rgb = (c, a) => $.NSColor.colorWithCalibratedRedGreenBlueAlpha(c[0], c[1], c[2], a)
+const lerp = (a, b, t) => a + (b - a) * t
+const mixColor = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)]
+const dim = rgb(DIM, 1.0)
+
+win.setBackgroundColor(rgb(POPUP_BG, 1.0))
+
+function providerColor(provider) {
+  if (provider === "claude") return CLAUDE
+  if (provider === "codex") return G
+  return UNKNOWN
+}
+
+// Use NSBox for colored shapes: it takes NSColor directly. (Setting a CGColor on
+// a CALayer through JXA crashes, so layer color setters are off-limits here.)
+function box(frame) {
+  const b = $.NSBox.alloc.initWithFrame(frame)
+  b.setBoxType($.NSBoxCustom)
+  b.setTitlePosition($.NSNoTitle)
+  b.setBorderWidth(0)
+  return b
+}
+
+// A circular gauge whose green core grows to fill the ring as calls add up.
+const D = 104
+const cx = width / 2
+const cy = 42 + D / 2
+
+const ring = box($.NSMakeRect(cx - D / 2, cy - D / 2, D, D))
+ring.setCornerRadius(D / 2)
+ring.setFillColor(rgb(RING_BG, 1))
+ring.setBorderColor(rgb(G, 0.5))
+ring.setBorderWidth(1.5)
+win.contentView.addSubview(ring)
+
+const disc = box($.NSMakeRect(cx, cy, 0, 0))
+disc.setFillColor(rgb(G, 1))
+win.contentView.addSubview(disc)
+
+// A thin outline that expands past the ring and fades out on every call.
+const rippleRing = box($.NSMakeRect(cx - D / 2, cy - D / 2, D, D))
+rippleRing.setFillColor($.NSColor.clearColor)
+rippleRing.setBorderWidth(2)
+rippleRing.setBorderColor(rgb(G, 0))
+rippleRing.setCornerRadius(D / 2)
+win.contentView.addSubview(rippleRing)
+
+function label(y, font, color) {
+  const f = $.NSTextField.alloc.initWithFrame($.NSMakeRect(0, y, width, 20))
+  f.setBezeled(false)
+  f.setDrawsBackground(false)
+  f.setEditable(false)
+  f.setSelectable(false)
+  f.setFont(font)
+  f.setTextColor(color)
+  win.contentView.addSubview(f)
+  return f
+}
+
+const number = label(76, $.NSFont.monospacedDigitSystemFontOfSizeWeight(30, $.NSFontWeightBold), $.NSColor.whiteColor)
+const caption = label(16, $.NSFont.systemFontOfSizeWeight(10.5, $.NSFontWeightSemibold), dim)
+
+const detailRect = $.NSMakeRect(
+  screen.origin.x + screen.size.width - detailWidth - 24,
+  Math.max(screen.origin.y + 24, rect.origin.y - detailHeight - 12),
+  detailWidth,
+  detailHeight,
+)
+const detail = $.NSPanel.alloc.initWithContentRectStyleMaskBackingDefer(detailRect, style, $.NSBackingStoreBuffered, false)
+detail.setLevel($.NSFloatingWindowLevel)
+detail.setCollectionBehavior(
+  $.NSWindowCollectionBehaviorCanJoinAllSpaces | $.NSWindowCollectionBehaviorFullScreenAuxiliary,
+)
+detail.setMovableByWindowBackground(true)
+detail.setTitle("rippletide counter")
+detail.setAppearance($.NSAppearance.appearanceNamed($.NSAppearanceNameDarkAqua))
+detail.setOpaque(false)
+detail.setBackgroundColor($.NSColor.colorWithCalibratedWhiteAlpha(0.11, 0.98))
+detail.setReleasedWhenClosed(false)
+
+function detailField(frame, font, color) {
+  const f = $.NSTextField.alloc.initWithFrame(frame)
+  f.setBezeled(false)
+  f.setDrawsBackground(false)
+  f.setEditable(false)
+  f.setSelectable(false)
+  f.setFont(font)
+  f.setTextColor(color)
+  detail.contentView.addSubview(f)
+  return f
+}
+
+const detailTitle = detailField(
+  $.NSMakeRect(22, detailHeight - 42, detailWidth - 44, 24),
+  $.NSFont.systemFontOfSizeWeight(17, $.NSFontWeightBold),
+  $.NSColor.whiteColor,
+)
+const detailSub = detailField(
+  $.NSMakeRect(22, detailHeight - 63, detailWidth - 44, 18),
+  $.NSFont.systemFontOfSizeWeight(11, $.NSFontWeightMedium),
+  dim,
+)
+const legendCodex = detailField(
+  $.NSMakeRect(22, detailHeight - 84, 54, 16),
+  $.NSFont.systemFontOfSizeWeight(10, $.NSFontWeightSemibold),
+  rgb(G, 1),
+)
+legendCodex.setStringValue("Codex")
+const legendClaude = detailField(
+  $.NSMakeRect(82, detailHeight - 84, 82, 16),
+  $.NSFont.systemFontOfSizeWeight(10, $.NSFontWeightSemibold),
+  rgb(CLAUDE, 1),
+)
+legendClaude.setStringValue("Claude")
+const legendRisky = detailField(
+  $.NSMakeRect(166, detailHeight - 84, 76, 16),
+  $.NSFont.systemFontOfSizeWeight(10, $.NSFontWeightSemibold),
+  rgb(RED, 1),
+)
+legendRisky.setStringValue("Risky")
+
+const rowCount = 8
+const rowTop = detailHeight - 108
+const rowGap = 27
+const barX = 138
+const barW = 168
+const rows = []
+for (let i = 0; i < rowCount; i++) {
+  const y = rowTop - i * rowGap
+  const name = detailField(
+    $.NSMakeRect(22, y - 1, 108, 18),
+    $.NSFont.systemFontOfSizeWeight(10.5, $.NSFontWeightMedium),
+    $.NSColor.colorWithCalibratedWhiteAlpha(0.82, 1.0),
+  )
+  const track = box($.NSMakeRect(barX, y + 4, barW, 7))
+  track.setCornerRadius(3.5)
+  track.setFillColor($.NSColor.colorWithCalibratedWhiteAlpha(0.22, 1.0))
+  detail.contentView.addSubview(track)
+  const bar = box($.NSMakeRect(barX, y + 4, 0, 7))
+  bar.setCornerRadius(3.5)
+  bar.setFillColor(rgb(G, 1))
+  detail.contentView.addSubview(bar)
+  const riskBar = box($.NSMakeRect(barX, y + 4, 0, 7))
+  riskBar.setCornerRadius(3.5)
+  riskBar.setFillColor(rgb(RED, 1))
+  detail.contentView.addSubview(riskBar)
+  const value = detailField(
+    $.NSMakeRect(barX + barW + 10, y - 1, 48, 18),
+    $.NSFont.monospacedDigitSystemFontOfSizeWeight(10.5, $.NSFontWeightSemibold),
+    $.NSColor.whiteColor,
+  )
+  rows.push({ name, track, bar, riskBar, value })
+}
+
+function toggleDetails() {
+  const now = Date.now()
+  if (now - lastToggleAt < 250) return
+  lastToggleAt = now
+  if (detail.isVisible) {
+    detail.orderOut(null)
+  } else {
+    detail.makeKeyAndOrderFront(null)
+  }
+}
+
+function toggleRiskDistribution() {
+  const now = Date.now()
+  if (now - lastRiskToggleAt < 250) return
+  lastRiskToggleAt = now
+  detailMode = detailMode === "models" ? "risks" : detailMode === "risks" ? "reroutes" : "models"
+  shownModelsKey = null
+  const state = readState()
+  const calls = state && typeof state.calls === "number" ? state.calls : 0
+  updateDetails(state, calls)
+}
+
+ObjC.registerSubclass({
+  name: "XrayClickView",
+  superclass: "NSView",
+  methods: {
+    "acceptsFirstMouse:": {
+      types: ["bool", ["id"]],
+      implementation: () => true,
+    },
+    "mouseDown:": {
+      types: ["void", ["id"]],
+      implementation: () => toggleDetails(),
+    },
+  },
+})
+
+ObjC.registerSubclass({
+  name: "XrayRiskClickView",
+  superclass: "NSView",
+  methods: {
+    "acceptsFirstMouse:": {
+      types: ["bool", ["id"]],
+      implementation: () => true,
+    },
+    "mouseDown:": {
+      types: ["void", ["id"]],
+      implementation: () => toggleRiskDistribution(),
+    },
+  },
+})
+
+const clickView = $.XrayClickView.alloc.initWithFrame($.NSMakeRect(0, 0, width, height))
+clickView.setAutoresizingMask($.NSViewWidthSizable | $.NSViewHeightSizable)
+win.contentView.addSubview(clickView)
+
+const riskClickView = $.XrayRiskClickView.alloc.initWithFrame($.NSMakeRect(158, detailHeight - 92, 94, 30))
+riskClickView.setToolTip("Cycle risk categories and rerouted calls")
+detail.contentView.addSubview(riskClickView)
+
+// Center by measuring the text and sizing the field to it.
+function place(f, text, y, h) {
+  f.setStringValue(text)
+  const attrs = $.NSDictionary.dictionaryWithObjectForKey(f.font, $.NSFontAttributeName)
+  const w = Math.ceil($(text).sizeWithAttributes(attrs).width) + 6
+  f.setFrame($.NSMakeRect((width - w) / 2, y, w, h))
+}
+
+const K = 30 // the core approaches full as calls grow (about half-full around K calls)
+
+let shownCalls = null
+let shownRisky = null
+let shownPrefix = null
+let shownModelsKey = null
+let shownDetailCalls = null
+let shownDetailRisky = null
+let shownDetailRerouted = null
+let lastToggleAt = 0
+let lastRiskToggleAt = 0
+let detailMode = "models"
+let displayFrac = 0
+let displayCalls = 0 // the number rolls toward the true count like an odometer
+let renderedInt = -1
+let renderedCaption = null
+let flash = 0 // 1 on a new call, decays each frame
+let riskyFlash = 0 // risky responses briefly override the green pulse with red
+let milestoneFlash = 0 // 1 when a milestone is crossed, tints everything gold
+let milestoneValue = 0
+let ripplePulse = 0 // 1 on a new call, drives the expanding outline
+let rippleColor = G
+let breathT = 0 // frame counter for the idle breathing sine
+
+function truncate(s, n) {
+  s = String(s)
+  return s.length <= n ? s : s.slice(0, Math.max(0, n - 3)) + "..."
+}
+
+// Compact token count (1234 -> 1.2k, 3_400_000 -> 3.4M) and USD cost for the caption.
+function formatTokens(n) {
+  n = Number(n) || 0
+  if (n >= 1e6) return (n / 1e6).toFixed(n >= 1e7 ? 0 : 1) + "M"
+  if (n >= 1e3) return (n / 1e3).toFixed(n >= 1e4 ? 0 : 1) + "k"
+  return String(Math.round(n))
+}
+function formatUsd(n) {
+  n = Number(n) || 0
+  if (n >= 100) return "$" + n.toFixed(0)
+  if (n >= 1) return "$" + n.toFixed(2)
+  if (n > 0) return "$" + n.toFixed(3)
+  return "$0"
+}
+
+// Highest milestone crossed between two call counts (0 if none). Fixed stops
+// early on, then every 1000 so the celebration keeps recurring on long runs.
+function milestoneCrossed(prev, cur) {
+  const stops = [10, 25, 50, 100, 250, 500, 1000]
+  let hit = 0
+  for (let i = 0; i < stops.length; i++) {
+    if (prev < stops[i] && cur >= stops[i]) hit = stops[i]
+  }
+  if (cur >= 1000 && Math.floor(cur / 1000) > Math.floor(prev / 1000)) {
+    hit = Math.floor(cur / 1000) * 1000
+  }
+  return hit
+}
+
+function modelProvider(name, providers) {
+  const explicit = providers && providers[name]
+  if (explicit) return String(explicit)
+  const lower = String(name).toLowerCase()
+  if (lower.includes("claude")) return "claude"
+  if (lower.includes("gpt") || lower.includes("codex") || lower.includes("o3") || lower.includes("o4")) return "codex"
+  return "unknown"
+}
+
+function modelEntries(state) {
+  const models = state && state.models && typeof state.models === "object" ? state.models : {}
+  const providers = state && state.providers && typeof state.providers === "object" ? state.providers : {}
+  const riskyModels = state && state.riskyModels && typeof state.riskyModels === "object" ? state.riskyModels : {}
+  return Object.keys(Object.assign({}, models, riskyModels))
+    .map((name) => {
+      const value = Number(models[name]) || 0
+      const risky = Math.max(0, Math.min(value, Number(riskyModels[name]) || 0))
+      return [name, value, modelProvider(name, providers), risky]
+    })
+    .filter((entry) => entry[1] > 0)
+    .sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0])))
+}
+
+function riskActionEntries(state) {
+  const actions = state && state.riskyActions && typeof state.riskyActions === "object" ? state.riskyActions : {}
+  return Object.keys(actions)
+    .map((name) => [name, Number(actions[name]) || 0])
+    .filter((entry) => entry[1] > 0)
+    .sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0])))
+}
+
+function rerouteEntries(state) {
+  const reroutes = state && state.reroutes && typeof state.reroutes === "object" ? state.reroutes : {}
+  return Object.keys(reroutes)
+    .map((name) => [name.split("claude-").join(""), Number(reroutes[name]) || 0])
+    .filter((entry) => entry[1] > 0)
+    .sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0])))
+}
+
+function updateDetails(state, calls) {
+  const risky = state && typeof state.risky === "number" ? state.risky : 0
+  const rerouted = state && typeof state.rerouted === "number" ? state.rerouted : 0
+  const entries =
+    detailMode === "risks" ? riskActionEntries(state) : detailMode === "reroutes" ? rerouteEntries(state) : modelEntries(state)
+  const key = `${detailMode}:${JSON.stringify(entries)}`
+  if (key === shownModelsKey && calls === shownDetailCalls && risky === shownDetailRisky && rerouted === shownDetailRerouted) return
+  shownModelsKey = key
+  shownDetailCalls = calls
+  shownDetailRisky = risky
+  shownDetailRerouted = rerouted
+
+  if (detailMode === "risks") {
+    updateRiskDetails(entries, risky)
+  } else if (detailMode === "reroutes") {
+    updateRerouteDetails(entries, rerouted)
+  } else {
+    updateModelDetails(entries, calls, risky, rerouted)
+  }
+}
+
+function clearRow(i) {
+  rows[i].name.setStringValue("")
+  rows[i].value.setStringValue("")
+  rows[i].bar.setFrame($.NSMakeRect(barX, rowTop - i * rowGap + 4, 0, 7))
+  rows[i].riskBar.setFrame($.NSMakeRect(barX, rowTop - i * rowGap + 4, 0, 7))
+}
+
+function updateModelDetails(entries, calls, risky, rerouted) {
+  detailTitle.setStringValue("LLM calls by model")
+  const reroutedNote = rerouted > 0 ? ` · ${rerouted} rerouted` : ""
+  detailSub.setStringValue(entries.length ? `${calls} total · ${risky} risky${reroutedNote} · click Risky for more` : `${risky} risky${reroutedNote} · no model calls yet`)
+  legendCodex.setFrame($.NSMakeRect(22, detailHeight - 84, 54, 16))
+  legendCodex.setStringValue("Codex")
+  legendCodex.setTextColor(rgb(G, 1))
+  legendClaude.setStringValue("Claude")
+  legendClaude.setTextColor(rgb(CLAUDE, 1))
+  legendRisky.setStringValue("Risky")
+  legendRisky.setTextColor(rgb(RED, 1))
+
+  const max = entries.length ? entries[0][1] : 1
+  for (let i = 0; i < rowCount; i++) {
+    const entry = entries[i]
+    if (!entry) {
+      clearRow(i)
+      continue
+    }
+    const [name, value, provider, riskyValue] = entry
+    const y = rowTop - i * rowGap
+    const w = Math.max(4, Math.round((value / max) * barW))
+    const riskW = riskyValue > 0 ? Math.max(4, Math.round((riskyValue / value) * w)) : 0
+    rows[i].name.setStringValue(truncate(name, 18))
+    rows[i].value.setStringValue(riskyValue > 0 ? `${riskyValue}/${value}` : String(value))
+    rows[i].bar.setFillColor(rgb(providerColor(provider), 1))
+    rows[i].bar.setFrame($.NSMakeRect(barX, y + 4, w, 7))
+    rows[i].riskBar.setFrame($.NSMakeRect(barX + w - riskW, y + 4, riskW, 7))
+  }
+}
+
+function updateRiskDetails(entries, risky) {
+  // Header sums the ACTION bars (a call can flag several), which differs from the
+  // risky-CALL count shown on the compact window; label it as actions to avoid confusion.
+  const actionTotal = entries.reduce((sum, entry) => sum + (Number(entry[1]) || 0), 0)
+  detailTitle.setStringValue("Risky actions by category")
+  detailSub.setStringValue(entries.length ? `${actionTotal} risky actions · ${risky} risky calls · click Risky for reroutes` : "No risk categories yet · click Risky for reroutes")
+  legendCodex.setFrame($.NSMakeRect(22, detailHeight - 84, 54, 16))
+  legendCodex.setStringValue("Categories")
+  legendCodex.setTextColor(rgb(RED, 1))
+  legendClaude.setStringValue("")
+  legendRisky.setStringValue("Risky")
+  legendRisky.setTextColor(rgb(RED, 1))
+
+  const max = entries.length ? entries[0][1] : 1
+  for (let i = 0; i < rowCount; i++) {
+    const entry = entries[i]
+    if (!entry) {
+      clearRow(i)
+      continue
+    }
+    const [name, value] = entry
+    const y = rowTop - i * rowGap
+    const w = Math.max(4, Math.round((value / max) * barW))
+    rows[i].name.setStringValue(truncate(name, 18))
+    rows[i].value.setStringValue(String(value))
+    rows[i].bar.setFillColor(rgb(RED, 1))
+    rows[i].bar.setFrame($.NSMakeRect(barX, y + 4, w, 7))
+    rows[i].riskBar.setFrame($.NSMakeRect(barX, y + 4, 0, 7))
+  }
+}
+
+// Calls answered by a different model than the one requested. Row names read
+// "requested → served" with the shared claude- prefix dropped to fit.
+function updateRerouteDetails(entries, rerouted) {
+  detailTitle.setStringValue("Rerouted calls by model")
+  detailSub.setStringValue(entries.length ? `${rerouted} answered by another model · click Risky to return` : "No reroutes detected yet · click Risky to return")
+  legendCodex.setFrame($.NSMakeRect(22, detailHeight - 84, 130, 16))
+  legendCodex.setStringValue("Requested → served")
+  legendCodex.setTextColor(rgb(GOLD, 1))
+  legendClaude.setStringValue("")
+  legendRisky.setStringValue("Risky")
+  legendRisky.setTextColor(rgb(RED, 1))
+
+  const max = entries.length ? entries[0][1] : 1
+  for (let i = 0; i < rowCount; i++) {
+    const entry = entries[i]
+    if (!entry) {
+      clearRow(i)
+      continue
+    }
+    const [name, value] = entry
+    const y = rowTop - i * rowGap
+    const w = Math.max(4, Math.round((value / max) * barW))
+    rows[i].name.setStringValue(truncate(name, 18))
+    rows[i].value.setStringValue(String(value))
+    rows[i].bar.setFillColor(rgb(GOLD, 1))
+    rows[i].bar.setFrame($.NSMakeRect(barX, y + 4, w, 7))
+    rows[i].riskBar.setFrame($.NSMakeRect(barX, y + 4, 0, 7))
+  }
+}
+
+function tick() {
+  if (!win.isVisible) return app.terminate(null)
+  const state = readState()
+  const calls = state && typeof state.calls === "number" ? state.calls : 0
+  const risky = state && typeof state.risky === "number" ? state.risky : 0
+  const prefix = state && state.label ? String(state.label).toUpperCase() + " · " : ""
+  if (calls !== shownCalls || risky !== shownRisky || prefix !== shownPrefix) {
+    const prevCalls = shownCalls
+    const gainedCall = prevCalls !== null && calls > prevCalls
+    const gainedRisky = shownRisky !== null && risky > shownRisky
+    const milestone = gainedCall ? milestoneCrossed(prevCalls, calls) : 0
+    if (gainedCall) {
+      flash = 1
+      ripplePulse = 1
+      rippleColor = G
+    }
+    if (milestone) {
+      milestoneFlash = 1
+      milestoneValue = milestone
+      rippleColor = GOLD
+    }
+    if (gainedRisky) {
+      riskyFlash = 1
+      ripplePulse = 1
+      if (!milestone) rippleColor = RED
+    }
+    shownCalls = calls
+    shownRisky = risky
+    shownPrefix = prefix
+  }
+  updateDetails(state, calls)
+
+  // 1. Odometer: roll the shown number toward the true count.
+  displayCalls += (calls - displayCalls) * 0.16
+  if (Math.abs(calls - displayCalls) < 0.5) displayCalls = calls
+  const shownInt = Math.round(displayCalls)
+  if (shownInt !== renderedInt) {
+    place(number, String(shownInt), 76, 40)
+    renderedInt = shownInt
+  }
+
+  // 3. Milestone banner briefly replaces the caption, then reverts on decay.
+  const totalTokens = state && state.tokens && typeof state.tokens.totalTokens === "number" ? state.tokens.totalTokens : 0
+  const costUsd = state && typeof state.costUsd === "number" ? state.costUsd : 0
+  const captionText =
+    milestoneFlash > 0.3 ? `MILESTONE · ${milestoneValue} CALLS` : `${prefix}${formatTokens(totalTokens)} TOK · ${formatUsd(costUsd)}`
+  if (captionText !== renderedCaption) {
+    place(caption, captionText, 16, 15)
+    renderedCaption = captionText
+  }
+
+  const pulse = Math.max(flash, riskyFlash, milestoneFlash)
+
+  // 2. Idle breathing: a slow sine on the core (and ring glow) when nothing is
+  // happening, so the popup stays alive between calls. It fades out under pulses.
+  breathT += 1
+  const idle = Math.max(0, 1 - pulse * 4)
+  const breath = Math.sin(breathT * 0.07) * 0.014 * idle
+
+  const target = calls / (calls + K)
+  displayFrac += (target - displayFrac) * 0.18 // ease the core toward its size
+  const s = Math.max(0, Math.min(1, displayFrac + pulse * 0.06 + breath)) * D // surge on a new call
+  disc.setFrame($.NSMakeRect(cx - s / 2, cy - s / 2, s, s))
+  disc.setCornerRadius(s / 2)
+  const callFill = [lerp(G[0], 0.7, flash), lerp(G[1], 1, flash), lerp(G[2], 0.8, flash)]
+  const fill = mixColor(mixColor(callFill, RED, riskyFlash), GOLD, milestoneFlash)
+  const popupBg = mixColor(POPUP_BG, POPUP_RISK_BG, riskyFlash)
+  const ringBg = mixColor(RING_BG, RING_RISK_BG, riskyFlash)
+  // Tint the number on call/risky pulses but not on the gold milestone, so it
+  // stays legible over the gold core during the burst.
+  const numPulse = Math.max(flash, riskyFlash)
+  const numTint = mixColor(callFill, RED, riskyFlash)
+  const textColor = [lerp(1, numTint[0], numPulse), lerp(1, numTint[1], numPulse), lerp(1, numTint[2], numPulse)]
+  win.setBackgroundColor(rgb(popupBg, 1.0))
+  ring.setFillColor(rgb(ringBg, 1))
+  disc.setFillColor(rgb(fill, 1))
+  ring.setBorderColor(rgb(fill, Math.min(1, lerp(0.45, 1, pulse) + breath * 6)))
+  number.setTextColor(rgb(textColor, 1))
+  caption.setTextColor(rgb(mixColor(mixColor(DIM, [1, 0.88, 0.88], riskyFlash), GOLD, milestoneFlash), 1))
+
+  // 4. Ring ripple: expand the outline past the ring and fade it as it decays.
+  if (ripplePulse > 0.02) {
+    const rs = lerp(s, D * 1.28, 1 - ripplePulse)
+    rippleRing.setFrame($.NSMakeRect(cx - rs / 2, cy - rs / 2, rs, rs))
+    rippleRing.setCornerRadius(rs / 2)
+    rippleRing.setBorderColor(rgb(rippleColor, ripplePulse * 0.55))
+  } else {
+    rippleRing.setBorderColor(rgb(rippleColor, 0))
+  }
+
+  flash *= 0.88
+  riskyFlash *= 0.84
+  milestoneFlash *= 0.94
+  ripplePulse *= 0.9
+  if (flash < 0.02) flash = 0
+  if (riskyFlash < 0.02) riskyFlash = 0
+  if (milestoneFlash < 0.02) milestoneFlash = 0
+  if (ripplePulse < 0.02) ripplePulse = 0
+}
+
+win.makeKeyAndOrderFront(null)
+tick()
+
+$.NSTimer.scheduledTimerWithTimeIntervalRepeatsBlock(0.033, true, () => {
+  try {
+    tick()
+  } catch (_) {}
+})
+
+app.run()

package/counter/src/cli.js

@@ -0,0 +1,22 @@
+// The `counter` feature entry point — `rippletide counter`.
+// Starts the Codex live counter: a floating sticky window that tallies LLM calls, tokens,
+// and estimated cost in real time. macOS for the window; counting works anywhere.
+import { run } from "./counter.js";
+
+const HELP = `counter — a live Codex sticky window: LLM calls, tokens, and estimated cost.
+
+Usage: rippletide counter
+
+Run it, then use Codex (the desktop app or the CLI). A floating window shows the running
+call count, total tokens, and estimated USD cost. It points Codex's openai_base_url at a
+local proxy while running and restores your Codex config on exit. Ctrl-C (or close the
+window) to stop. macOS only for the window.`;
+
+export async function main(argv = []) {
+  const sub = argv[0];
+  if (sub === "-h" || sub === "--help" || sub === "help") {
+    console.log(HELP);
+    return 0;
+  }
+  return await run();
+}