usage-ticker

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    status = withWorking(status, e.props.isWorking)
    const now = await $.clock.now()
    if (e.surface === 'terminal') {
      const { Box, Button, Raster, Text } = $.ui.resolve(e)
      requestId = e.requestId
      cols = rasterWidth(e.props.bodyColumns)
      reserve = reserveFor(e.props.bodyColumns)
      const frame = frameAt(now)
      if (frame !== null) {
        textShown = false
        const meter = <Raster key="meter" columns={frame.cols} rows={frame.rows} cells={encodeCells(frame.cells)} />
        if (reserve === 0) return meter
        return (
          <Box flexDirection="row">
            {meter}
            <Box flexDirection="column" width={BUTTON_COLS}>
              <Button key="period" label={buttonLabel(period)} hotkey="p" onPress={() => void pressPeriod($)} />
              <Text dimColor wrap="truncate">{rangeLabel || cardTitle(period)}</Text>
            </Box>
          </Box>
        )
      }
      textShown = true
      return <Text dimColor wrap="truncate">{lineAt(now)}</Text>
    }
    if (e.surface === 'desktop') {
      const { Box, Button, Svg } = $.ui.resolve(e)
      deskBand = true
      textShown = false
      deskColumns = e.viewport?.columns ?? e.props.bodyColumns
      deskRenders++
      const strip = stripDrawing(now)
      return (
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg source={strip.source} alt={strip.alt} width={strip.width} height={strip.height} isInteractive={STRIP_INTERACTIVE} />
          <Button key="period" label={buttonLabel(period)} hotkey="p" onPress={() => void pressPeriod($)} />
          <Button key="details" label="Details" onPress={() => void openDetails($)} />
        </Box>
      )
    }
    // The editor and the phone: one line of text.
    const { Text } = $.ui.resolve(e)
    deskBand = false
    textShown = true
    return <Text dimColor wrap="truncate">{lineAt(now)}</Text>
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE_ID) return next(e)
    const now = await clockNow($)
    if (e.surface !== 'desktop') {
      const { Text } = $.ui.resolve(e)
      return <Text dimColor wrap="truncate">{lineAt(now)}</Text>
    }
    try {
      const { Box, Button, Svg, Text } = $.ui.resolve(e)
      deskPane = true
      paneColumns = e.props.bodyColumns
      const v = paneNow(now)
      paneDrawn = paneKey(v)
      // The card's width inside its border and padding (two cells a side); the surface scales an Svg down if it is less.
      const sparkWidth = Math.min(480, Math.max(200, Math.round((paneColumns ?? 56) * PX_PER_COLUMN) - 31))
      if (PANE_SVGS && v.week) ringMemo = memoMarkup(ringMemo, ringKey(v.week, v.now, v.offsetMin), () => ringBadgeSvg(v.week!, v.now, v.offsetMin))
      if (PANE_SVGS && v.daily.length > 0) sparkMemo = memoMarkup(sparkMemo, sparkKey(v.daily, v.accent, sparkWidth), () => sparkSvg(v.daily, v.accent, sparkWidth))
      const diag = diagLine({ renders: deskRenders, changes: sourceChanges, invalidates, reason: lastReason })
      return (
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="row" gap={1}>
            {PERIODS.map(p => (
              <Button key={`tab-${p}`} label={buttonLabel(p)} {...(p === period ? { variant: 'primary' as const } : {})} onPress={() => void choosePeriod($, p)} />
            ))}
          </Box>
          <Box flexDirection="column" backgroundColor={hex(PANE_CARD)} borderStyle="round" borderColor={PANE_EDGE} paddingX={2} paddingY={1}>
            <Box flexDirection="row" justifyContent="space-between" alignItems="flex-end">
              <Text bold color={INK.figure}>{v.total}</Text>
              <Text color={INK.label} wrap="truncate">{v.meta}</Text>
            </Box>
            <Box flexDirection="row" justifyContent="space-between" marginTop={1}>
              <Text color={INK.label}>By model</Text>
              <Text color={INK.dim} wrap="truncate">{v.source}</Text>
            </Box>
            {v.emptyText !== null ? (
              <Text color={INK.dim}>{v.emptyText}</Text>
            ) : (
              v.rows.map(r => (
                <Box key={`row-${r.top ? 'top' : r.name.replace(/[^a-z0-9]+/gi, '-')}`} flexDirection="row" gap={1}>
                  <Box width={v.nameCols}>
                    <Text color={INK.text} wrap="truncate">{r.name}</Text>
                  </Box>
                  <Box width={v.barCols} flexGrow={1} height={1} backgroundColor={v.barTrack}>
                    <Box width={r.bar} height={1} backgroundColor={r.top ? v.accent : v.barRest} />
                  </Box>
                  {v.detailCols > 0 ? (
                    <Box width={v.detailCols} justifyContent="flex-end">
                      <Text color={INK.label}>{r.detail}</Text>
                    </Box>
                  ) : null}
                  <Box width={v.valueCols} justifyContent="flex-end">
                    <Text color={INK.figure}>{r.value}</Text>
                  </Box>
                </Box>
              ))
            )}
            <Box flexDirection="row" justifyContent="space-between" marginTop={1}>
              <Text color={INK.label}>{v.daily.length > 0 ? `Last ${v.daily.length} days` : 'No daily history yet'}</Text>
              <Text color={INK.dim}>{v.peak}</Text>
            </Box>
            {PANE_SVGS && sparkMemo && v.daily.length > 0 ? <Svg source={sparkMemo.value} alt={`Daily spend, ${v.peak}`} width={sparkWidth} height={SPARK_HEIGHT} isInteractive={PANE_SVG_INTERACTIVE} /> : null}
            <Box flexDirection="row" gap={2} alignItems="center" marginTop={1}>
              {PANE_SVGS && ringMemo && v.week ? <Svg source={ringMemo.value} alt={v.weekCaption} width={RING_SIZE} height={RING_SIZE} isInteractive={PANE_SVG_INTERACTIVE} /> : null}
              <Box flexDirection="column">
                <Text color={INK.label}>{v.weekLabel}</Text>
                {!PANE_SVGS && v.weekUsed !== null ? <Text color={v.accent}>{v.weekUsed}</Text> : null}
                <Text color={v.weekDanger ? v.accent : INK.figure}>{v.weekCaption}</Text>
                {v.pace !== null ? (
                  <Text color={INK.label}>
                    Pace <Text color={INK.text}>{v.pace}</Text>
                    {v.readingAge !== null ? <Text color={INK.dim}>{` · ${v.readingAge}`}</Text> : null}
                  </Text>
                ) : v.readingAge !== null ? (
                  <Text color={INK.dim}>{v.readingAge}</Text>
                ) : null}
              </Box>
            </Box>
            <Box marginTop={1}>
              <Text color={INK.dim} wrap="wrap">{diag}</Text>
            </Box>
          </Box>
        </Box>
      )
    } catch (err) {
      // Drawing the pane failed: the figures as one line and the reason, rather than no pane at all.
      const { Box, Button, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="row" gap={1}>
            {PERIODS.map(p => (
              <Button key={`tab-${p}`} label={buttonLabel(p)} {...(p === period ? { variant: 'primary' as const } : {})} onPress={() => void choosePeriod($, p)} />
            ))}
          </Box>
          <Text wrap="truncate">{lineAt(now)}</Text>
          <Text dimColor wrap="truncate">{`Details could not be drawn: ${plainError(err)}`}</Text>
        </Box>
      )
    }
  })