Run Cost Ticker

import { RunCostTicker } from '@/components/ui/run-cost-ticker'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { RunCostTicker } from '@/components/ui/run-cost-ticker'

/** Deterministic accrual frames for a two-model ops run, no Math.random */
type CostFrame = {
  total: number
  running: boolean
  rows: { model: string; tokens: number; cost: number }[]
  holdMs: number
}

const FIRST_FRAME: CostFrame = {
  total: 0.0042,
  running: true,
  rows: [
    { model: 'claude-haiku-4-5', tokens: 12_400, cost: 0.0018 },
    { model: 'claude-sonnet-4-5', tokens: 3_200, cost: 0.0024 },
  ],
  holdMs: 900,
}

const SETTLED_FRAME: CostFrame = {
  total: 0.0342,
  running: false,
  rows: [
    { model: 'claude-haiku-4-5', tokens: 52_800, cost: 0.0079 },
    { model: 'claude-sonnet-4-5', tokens: 26_100, cost: 0.0263 },
  ],
  holdMs: 2800,
}

const FRAMES: CostFrame[] = [
  FIRST_FRAME,
  {
    total: 0.0128,
    running: true,
    rows: [
      { model: 'claude-haiku-4-5', tokens: 28_600, cost: 0.0041 },
      { model: 'claude-sonnet-4-5', tokens: 9_800, cost: 0.0087 },
    ],
    holdMs: 1100,
  },
  {
    total: 0.0246,
    running: true,
    rows: [
      { model: 'claude-haiku-4-5', tokens: 41_200, cost: 0.0062 },
      { model: 'claude-sonnet-4-5', tokens: 18_400, cost: 0.0184 },
    ],
    holdMs: 1100,
  },
  {
    total: 0.0342,
    running: true,
    rows: [
      { model: 'claude-haiku-4-5', tokens: 52_800, cost: 0.0079 },
      { model: 'claude-sonnet-4-5', tokens: 26_100, cost: 0.0263 },
    ],
    holdMs: 1000,
  },
  SETTLED_FRAME,
]

export default function RunCostTickerDemo() {
  const reduced = useReducedMotion()
  const [index, setIndex] = useState(0)
  const frame = FRAMES[index] ?? FIRST_FRAME

  useEffect(() => {
    if (reduced) {
      // completed receipt under reduced motion
      setIndex(FRAMES.length - 1)
      return
    }
    const hold = frame.holdMs
    const id = window.setTimeout(() => {
      setIndex((i) => (i + 1) % FRAMES.length)
    }, hold)
    return () => window.clearTimeout(id)
  }, [index, frame.holdMs, reduced])

  const settled = reduced ? SETTLED_FRAME : frame

  return (
    <div className="mx-auto flex min-h-[440px] w-full max-w-md flex-col justify-center px-4 py-12 sm:px-6 sm:py-16">
      <div className="mb-5">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          meridian-ops · march close
        </p>
        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
          Session spend while reconciling Apex Holdings invoices across Haiku
          triage and Sonnet judgment.
        </p>
      </div>
      <RunCostTicker
        label="Session cost"
        total={settled.total}
        running={settled.running}
        rows={settled.rows}
        currency="$"
        decimals={4}
      />
    </div>
  )
}