clawd-bar

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => drawBand($, e as never, next as never) as never)

async function drawBand($: EngineInterface, e: BandEvent, next: (e: BandEvent) => unknown) {
  if (e.props.hasSurvey || !settings.isPetOn || (await read($, isHidden))) {
    stopAnimation()
    return next(e)
  }
  isEngineWorking = e.props.isWorking
  const now = await $.clock.now()
  const isTerminal = e.surface === 'terminal'
  if (isTerminal) await read($, second)
  else await read($, demoStep)
  if (isTerminal) await read($, barFrame)
  const scene = demoStartedAt === null ? null : demoScene(now - demoStartedAt, now)
  const view = scene ? (scene.ci ?? null) : settings.isCiOn ? ((await read($, ciView)) ?? (await loadView(hostFrom($)))) : null
  const ci = scene || settings.isCiOn ? ciShown(view, now) : null
  const shownVisual = await read($, visual)
  const shownPet = await read($, pet)
  const session: SessionShown = scene?.session ?? {
    ...shownVisual,
    activity: await read($, activity),
    subagents: shownPet.subagents.length,
    place: await read($, place),
  }
  const act = ci?.act ?? session.act
  if (act === 'working' && lastAct !== 'working') cabinetSpell++
  lastAct = act
  const work: Work | null = (scene ? scene.work : shownPet.work) ?? null
  const extras: Extras = ci
    ? {}
    : {
        sweat: (scene ? scene.sweat : shownVisual.isSweating) === true,
        planes: session.subagents,
        ...(work ? { work } : {}),
        ...(act === 'working' ? { game: Math.max(0, cabinetSpell) % CABINET_GAMES } : {}),
      }
  const playKey = CALL_ACTS.has(act) && work ? `${act}:${work.id}` : act
  const usage = scene ? null : await $.session.usage().then(u => u, () => null)
  const meterList: Meter[] = scene ? scene.meters : usage ? meters(usage, now) : []
  hasClock = scene !== null || ci !== null || session.activity.turnStartedAt !== null
  // A live race's lanes move every second; on the desktop that's the one redraw a second worth its rebuild.
  if (!isTerminal && ci?.run) await read($, second)

  const columns = e.props.bodyColumns
  const clawdCols = isTerminal ? CLAWD_COLS : DESKTOP_CLAWD_COLS
  const boxCols = isTerminal ? 1 : DESKTOP_BOX_COLS
  const fit = fitBand(columns, clawdCols, meterList, 10, boxCols, !isTerminal)
  const textWidth = Math.max(10, columns - clawdCols - GAP - (fit.gauges ? fit.width + 2 : 0))
  const els = $.ui.resolve(e) as never as { Box: any; Text: any; Client?: any }
  const { Box, Client } = els
  const turnStartedAt = session.activity.turnStartedAt
  const turnClock =
    !isTerminal && Client && turnStartedAt !== null ? (
      <Client key="turn-clock" module="./ticker.tsx" props={{ elapsedMs: now - turnStartedAt }} />
    ) : undefined
  const lines = ci ? ciLines(els, ci, view, now, textWidth) : sessionLines(els, session, now, turnClock)
  // The terminal's bars move when their values change; the desktop's stand still, since a redraw there costs Clawd his frame.
  if (isTerminal) {
    bars.see(meterList, now)
    barsShown = { meters: meterList, boxes: fit.boxes, look: barLook(meterList, fit.boxes, now) }
    if (!barTimer && bars.isMoving(meterList, fit.boxes, now)) barTimer = $.clock.every(BAR_MS, () => void barTick($))
  }
  const paint = isTerminal ? (m: Meter, boxes: number) => bars.paint(m, boxes, now) : undefined
  const right = [
    <Box key="gauges" flexDirection="row" marginLeft={GAP} flexShrink={0}>
      {gaugeColumns(els, meterList, fit, paint)}
    </Box>,
    fit.gauges ? divider(els) : null,
    <Box key="lines" flexDirection="column" marginLeft={1} flexGrow={1} flexShrink={1} minWidth={0}>
      {lines}
    </Box>,
  ]

  if (e.surface === 'terminal') {
    const { Raster } = $.ui.resolve(e as never) as never as { Raster: any }
    // A new label over the same act keeps its place in the loop; a new call starts its scene over.
    if (!animation || animation.key !== playKey || animation.requestId !== e.requestId) {
      stopAnimation()
      animation = { key: playKey, act, startedAt: now, requestId: e.requestId, extras, painted: '' }
      frameTimer = $.clock.every(FRAME_MS, () => void paintFrame($))
    }
    animation.extras = work ? { ...extras, lead: animation.startedAt - work.startedAt } : extras
    animation.painted = cellsAt(animation, now)
    return (
      <Box flexDirection="row">
        <Raster key={RASTER_KEY} columns={CLAWD_COLS} rows={CLAWD_ROWS} cells={animation.painted} />
        {right}
      </Box>
    )
  }

  const { Svg } = $.ui.resolve(e as never) as never as { Svg: any }
  const drawn = CALL_ACTS.has(act) && work ? JSON.stringify({ ...work, id: undefined, startedAt: undefined }) : `${extras.game ?? ''}`
  const svgKey = `${act}:${extras.sweat ? 1 : 0}:${extras.planes ?? 0}:${drawn}`
  const svg = svgs.get(svgKey) ?? svgFor(act, extras)
  // Most recently used last, so the oldest goes first.
  svgs.delete(svgKey)
  svgs.set(svgKey, svg)
  if (svgs.size > SVG_CACHE) svgs.delete(svgs.keys().next().value!)
  if (desktopPlay?.key !== `${svgKey}:${playKey}`) desktopPlay = { key: `${svgKey}:${playKey}`, startedAt: now }
  // Start the rebuilt frame where the loop already is, so a redraw doesn't send him back to the start.
  const loop = svgLoopMs(act, extras)
  const into = isOnce(act) ? Math.min(now - desktopPlay.startedAt, loop) : (now - desktopPlay.startedAt) % loop
  const source = svg.replace('<style>', `<style>*{animation-delay:-${into}ms!important}`)
  return (
    <Box flexDirection="row" alignItems="center">
      <Svg source={source} alt={session.label} width={SVG_HEIGHT * SVG_ASPECT} height={SVG_HEIGHT} isInteractive />
      {right}
    </Box>
  )
}

export function gaugeColumns(els: Els, meters: Meter[], fit: Fit, paint: (m: Meter, boxes: number) => BarPaint = stillBar) {
  const { Box, Text } = els
  if (!fit.gauges) return []
  const paints = meters.map(m => paint(m, fit.boxes))
  if (fit.isStacked) {
    const column = (key: string, cell: (m: Meter, i: number) => unknown, marginRight = 1) => (
      <Box key={key} flexDirection="column" marginRight={marginRight} flexShrink={0}>
        {meters.map(cell)}
      </Box>
    )
    return [
      column('names', (m, i) => <Text key={i} dimColor>{m.name}</Text>),
      fit.boxes > 0 ? column('bars', (_, i) => <Text key={i}>{bar(els, paints[i]!)}</Text>) : null,
      column('percents', (m, i) => <Box key={i} justifyContent="flex-end">{percent(els, m, paints[i]!.isFlashing)}</Box>, meters.some(m => m.resetIn) ? 2 : GAP),
      meters.some(m => m.resetIn) ? column('resets', (m, i) => <Text key={i} dimColor>{reset(m) || ' '}</Text>, GAP) : null,
    ]
  }
  return meters.map((m, i) => (
    <Box key={`g${i}`} flexDirection="column" marginRight={GAP} flexShrink={0}>
      <Text dimColor>{m.name}</Text>
      <Text>
        {fit.boxes > 0 ? bar(els, paints[i]!) : ''}
        {fit.boxes > 0 ? ' ' : ''}
        {percent(els, m, paints[i]!.isFlashing)}
      </Text>
      <Text dimColor>{reset(m) || ' '}</Text>
    </Box>
  ))
}

function bar({ Text }: Els, paint: BarPaint) {
  const runs: { box: Paint; n: number }[] = []
  for (const box of paint.boxes) {
    const last = runs.at(-1)
    if (last && last.box.color === box.color && last.box.isDim === box.isDim) last.n++
    else runs.push({ box, n: 1 })
  }
  return runs.map(({ box, n }, i) => (
    <Text key={i} color={box.color} dimColor={box.isDim}>
      {BOX.repeat(n)}
    </Text>
  ))
}

const percent = ({ Text }: Els, m: Meter, isFlashing = false) => (
  <Text bold inverse={isFlashing} color={m.percent >= 80 ? m.color : undefined}>
    {m.percent}%
  </Text>
)

export const divider = ({ Text }: Els) => (
  <Text key="divider" dimColor>
    {'│\n│\n│'}
  </Text>
)