context-card

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const now = await read($, card)

    if (e.props.hasSurvey || now === null) {
      return next(e)
    }

    const { Box, Button, Text } = $.ui.resolve(e)
    const clock = await $.clock.now()
    const open = await read($, isOpen)
    const isDesktop = e.surface === 'desktop'
    const isNarrow = (e.props.bodyColumns ?? 100) < 64
    const weekly = now.limits.find(limit => limit.kind === 'seven_day')
    const used = now.slices.filter(slice => !slice.isFree).sort((a, b) => b.tokens - a.tokens)
    // Checked while drawing, so the button appears whichever mod finished loading first.
    const hasSessions = (await $.command.list().catch(() => [])).some(command => command.name === 'sessions')
    const waiting = hasSessions ? await read($, attention) : 0
    const pctColor = fillColor(now.percent)
    const cached = await read($, cache)
    const cacheLeft = cached.lastReplyAt === 0 ? null : cached.ttlMs - (clock - cached.lastReplyAt)

    // The line's bar in whole cells: each category its share of the filled cells, the rest dim.
    const filled = Math.min(LINE_CELLS, Math.round((now.percent / 100) * LINE_CELLS))
    const cells = used.map(slice => ({ slice, n: Math.round((slice.tokens / Math.max(now.tokens, 1)) * filled) }))
    const drawn = cells.reduce((sum, cell) => sum + cell.n, 0)

    const breakdown = (
      <Box flexDirection="column" rowGap={1} paddingX={2} paddingY={1} marginBottom={1} borderStyle="round" borderDimColor>
        <Box flexDirection="row" justifyContent="space-between" columnGap={2}>
          <Text>
            <Text bold color={pctColor}>{`${now.percent}%`}</Text>
            <Text dimColor> of the context window</Text>
          </Text>
          <Box flexDirection="row" columnGap={2}>
            {cacheLeft === null ? null : cacheLeft > 0 ? (
              <Text dimColor>{`${cacheGlyph(cacheLeft, cached.ttlMs)} ${minutesLeft(cacheLeft)}`}</Text>
            ) : (
              <Text color="warning">○ cache cold</Text>
            )}
            {now.compactsAt === null ? null : <Text dimColor>{`auto-compact at ${compact(now.compactsAt)}`}</Text>}
          </Box>
        </Box>
        <Box flexDirection="row" overflow="hidden">
          {used.map(slice => (
            <Box key={`bar-${slice.name}`} width={`${Math.max(slice.percent, 1)}%`} flexShrink={0} overflow="hidden">
              {/* Wider than any bar, so the parent clips it and no ellipsis is drawn at the cut. */}
              <Box width={900} flexShrink={0}>
                <Text color={slice.color}>{'━'.repeat(300)}</Text>
              </Box>
            </Box>
          ))}
          <Box key="bar-free" flexGrow={1} flexShrink={1} overflow="hidden">
            <Box width={900} flexShrink={0}>
              <Text dimColor>{'─'.repeat(300)}</Text>
            </Box>
          </Box>
        </Box>
        <Box flexDirection="row" flexWrap="wrap">
          {used.map(slice => (
            <Box key={`row-${slice.name}`} width={isNarrow ? '50%' : '33%'} paddingRight={3}>
              <Box flexDirection="row" justifyContent="space-between" flexGrow={1}>
                <Text wrap="truncate-end">
                  <Text color={slice.color}>● </Text>
                  <Text dimColor>{slice.name}</Text>
                </Text>
                <Text>{compact(slice.tokens)}</Text>
              </Box>
            </Box>
          ))}
        </Box>
      </Box>
    )

    return (
      <Box flexDirection="column">
        {open ? breakdown : null}
        <Box flexDirection="row" alignItems="center" columnGap={2}>
          <Box key="line" flexDirection="row" alignItems="center" columnGap={2} flexGrow={1} position="relative">
            {isDesktop ? (
              <Text bold color={pctColor}>{`${now.percent}%`}</Text>
            ) : (
              <Button key="toggle" plain label={`${now.percent}%`} onPress={() => void toggleOpen($)} />
            )}
            {isNarrow ? null : (
              <Text dimColor hover={{ dimColor: false }}>
                {`${compact(now.tokens)} / ${compact(now.window)}`}
              </Text>
            )}
            {cacheLeft === null ? null : cacheLeft > 0 ? (
              <Text dimColor>{cacheGlyph(cacheLeft, cached.ttlMs)}</Text>
            ) : (
              <Text color="warning">○</Text>
            )}
            <Text wrap="truncate">
              {cells.map(cell => (
                <Text key={`cell-${cell.slice.name}`} color={cell.slice.color}>
                  {'━'.repeat(cell.n)}
                </Text>
              ))}
              <Text dimColor hover={{ dimColor: false }}>
                {'─'.repeat(Math.max(0, LINE_CELLS - drawn))}
              </Text>
            </Text>
            {now.percent >= 60 && now.compactsAt !== null ? (
              <Text color={pctColor}>{`compacts at ${compact(now.compactsAt)}`}</Text>
            ) : null}
            <Box flexGrow={1} />
            {weekly === undefined ? null : (
              <Box flexDirection="row" columnGap={1} flexShrink={0}>
                {isNarrow ? null : <Text dimColor>weekly</Text>}
                <Text bold color={limitColor(weekly.percentUsed)}>{`${Math.round(weekly.percentUsed)}%`}</Text>
                {weekly.resetsAt === undefined ? null : <Text dimColor>{`↻ ${resetsIn(weekly.resetsAt, clock)}`}</Text>}
              </Box>
            )}
            {/* Desktop: a label-less control laid over the whole line, so a click anywhere on it toggles the breakdown. */}
            {isDesktop ? (
              <Box position="absolute" top={0} left={0} right={0} bottom={0} overflow="hidden">
                {/* The control is wider than any line, so the overlay clips it and its label is never cut with an ellipsis. */}
                <Box width={1200} flexShrink={0}>
                  <Button
                    key="toggle"
                    plain
                    label={'\u00A0'.repeat(600)}
                    hover={{ backgroundColor: '#00000000' }}
                    onPress={() => void toggleOpen($)}
                  />
                </Box>
              </Box>
            ) : null}
          </Box>
          {hasSessions ? (
            <Box flexDirection="row" columnGap={1} flexShrink={0}>
              <Button key="sessions" label="PRs" onPress={() => void update($, paneAsk, count => count + 1)} />
              {waiting > 0 ? (
                <Text bold color="warning">
                  {waiting}
                </Text>
              ) : null}
            </Box>
          ) : null}
        </Box>
      </Box>
    )
  })