usage-mod

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isBandOn || e.props.hasSurvey) return next(e)
    const tiers = bandTiers(await bandSnapshot($), showSpend)
    if (tiers.length === 0) return next(e)

    const els = $.ui.resolve(e)
    const { Box, Button, Svg } = els
    const details = <Button key="details" label="Details" plain onPress={() => $.ui.open({ id: PANE, title: 'Usage' })} />
    if (e.surface === 'terminal') {
      const rows = pickLayout(tiers, e.props.bodyColumns - DETAILS_CELLS, cellWidth)
      return (
        <Box flexDirection="column">
          {rows.map((row, i) => (
            <Box key={`row-${i}`} columnGap={1}>
              {chipRow(els, row)}
              {i === 0 ? details : null}
            </Box>
          ))}
        </Box>
      )
    }
    const rows = pickLayout(tiers, e.props.bodyColumns * CELL_PX - DETAILS_PX, bandWidth)
    return (
      <Box flexDirection="column" rowGap={1}>
        {rows.map((row, i) => {
          const band = bandSvg(row)
          return (
            <Box key={`row-${i}`} columnGap={2} alignItems="center">
              <Svg source={band.source} alt={band.alt} width={band.width} height={band.height} isInteractive={isInteractive} />
              {i === 0 ? details : null}
            </Box>
          )
        })}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Button, Svg } = els
    const model = paneModel(await snapshot($))
    const refreshButton = <Button key="refresh" label="Refresh spend" onPress={() => refresh($, refreshMs)} />
    if (e.surface === 'terminal') {
      return (
        <Box flexDirection="column" gap={1}>
          {terminalPane(els, model)}
          {refreshButton}
        </Box>
      )
    }
    // The card is laid out at the panel's own width, so its blocks run edge to edge.
    const card = paneSvg(model, Math.max(280, Math.floor(e.props.bodyColumns * CELL_PX)))
    return (
      <Box flexDirection="column" gap={1}>
        <Svg source={card.source} alt={card.alt} width={card.width} height={card.height} isInteractive={isInteractive} />
        {refreshButton}
      </Box>
    )
  })