context-forecast

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const o = await read($, offer)
    if (e.props.hasSurvey || e.props.isWorking || !isOpen(o)) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const below = await next(e)
    const focus = o.focus === null ? 'drafting what to keep…' : o.focus.replace(/^keep:\s*/i, '')
    const rows: BandRow[] = [
      {
        key: 'context-forecast-offer',
        tone: o.status === 'compacting' ? 'active' : 'ask',
        // the turns left are the readout's: the row only asks
        title: 'Compact now?',
        text: `${o.breakKind}, a good moment to compact · focus: ${focus}`,
        maxLines: 3,
        actions: [
          { key: 'context-forecast-compact', label: o.status === 'compacting' ? 'Compacting…' : 'Compact now', isPrimary: true, onPress: () => void compactNow($) },
          { key: 'context-forecast-later', label: 'Not now', isQuiet: true, isDismiss: true, onPress: () => void setOffer($, x => ({ ...x, status: 'dismissed', note: 'dismissed' })) },
        ],
      },
    ]
    if (o.note !== null) rows.push({ key: 'context-forecast-note', tone: o.status === 'failed' ? 'warn' : 'info', text: o.note })
    return band({ Box, Text, Button } as unknown as BandMake, rows, e.props.bodyColumns, below)
  })

export function band(make: BandMake, rows: readonly BandRow[], columns: number, below?: RenderElement | null, glyphs: BandGlyphs = 'full'): RenderElement {
  const drawn = rows.map(r => bandRow(make, r, columns, glyphs))
  return make.Box({ flexDirection: 'column', children: isNothing(below) ? drawn : [...drawn, below as RenderElement] })
}

export function bandRow(make: BandMake, row: BandRow, columns: number, glyphs: BandGlyphs = 'full'): RenderElement {
  const tone = TONES[row.tone]
  const mark = glyphs === 'full' && row.icon ? row.icon[0] : tone.glyph
  const actions = row.actions ?? []
  const buttons = actions.reduce((n, a) => n + buttonWidth(a) + 1, 0)
  // a full icon (an emoji, say) may take two cells
  const markWidth = glyphs === 'full' && row.icon ? 3 : 2
  const head = row.title ? row.title.length + 3 : 0
  const tail = row.note ? row.note.length + 3 : 0
  const isStacked = actions.length > 0 && columns - markWidth - buttons - head - tail < 24
  const lines = Math.max(1, row.maxLines ?? 2)
  // the first line shares its width with the glyph, the title, the note and (beside it) the buttons; the others have it all
  const firstLine = Math.max(10, columns - markWidth - (isStacked ? 0 : buttons) - head - tail)
  const room = firstLine + (lines - 1) * Math.max(10, columns - markWidth)
  const children: RenderElement[] = []
  if (row.title) children.push(make.Text({ bold: true, children: [row.title] }), make.Text({ dimColor: true, children: [' · '] }))
  children.push(make.Text({ children: [clipText(row.text, room)] }))
  if (row.note) children.push(make.Text({ dimColor: true, children: [` · ${row.note}`] }))
  const glyph = make.Text({ color: tone.color, bold: true, children: [mark] })
  const text = make.Box({ flexShrink: 1, flexGrow: 1, children: [make.Text({ wrap: 'wrap', children })] })
  const drawn = actions.map(a =>
    make.Button({
      key: a.key,
      label: a.label,
      ...(a.hotkey ? { hotkey: a.hotkey } : {}),
      ...(a.isPrimary ? { variant: 'primary' } : {}),
      ...(a.isQuiet ? { dimColor: true } : {}),
      ...(a.isDismiss ? { role: 'dismiss' } : {}),
      onPress: a.onPress,
    }),
  )
  if (!isStacked) return make.Box({ key: row.key, flexDirection: 'row', columnGap: 1, children: [glyph, text, ...drawn] })
  return make.Box({
    key: row.key,
    flexDirection: 'column',
    children: [
      make.Box({ flexDirection: 'row', columnGap: 1, children: [glyph, text] }),
      make.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, paddingLeft: 2, children: drawn }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const list = await read($, points)
    const f = await read($, forecast)
    const o = await read($, offer)
    const spent = await read($, spentUsd)
    const width = Math.max(10, Math.min(60, e.props.bodyColumns - 10))
    const values = list.map(p => p.context)
    const rows = chart(values, f?.threshold ?? null, width, 6)
    const top = Math.max(1, ...values.slice(-width), f?.threshold ?? 0) * 1.05
    const lineRow = f === null ? -1 : 5 - Math.min(5, Math.floor((f.threshold / top) * 6))
    const recent = list.slice(-8).reverse()

    const head =
      f === null
        ? 'No turns measured yet.'
        : `Context ${fmtTokens(f.context)} / ${f.isAutoCompact ? 'auto-compact at' : 'window'} ${f.isThresholdKnown ? '' : '≈'}${fmtTokens(f.threshold)} (${Math.round((f.context / f.threshold) * 100)}%)`
    const outlook = f === null || f.turnsLeft === null ? 'Not enough turns to forecast yet (or the context is not growing).' : forecastLine(f.turnsLeft, f.isAutoCompact)

    return (
      <Box flexDirection="column">
        <Text bold>{head}</Text>
        <Text color="cyan">{outlook}</Text>
        {f !== null && (
          <Text dimColor>
            Growth per turn (smoothed): +{fmtTokens(f.growthTool + f.growthTalk)} = tool results +{fmtTokens(f.growthTool)} · conversation +{fmtTokens(f.growthTalk)}
          </Text>
        )}
        {values.length === 0 ? (
          <Box marginTop={1}>
            <Text dimColor>The chart fills in as turns finish.</Text>
          </Box>
        ) : (
          <Box flexDirection="column" marginTop={1}>
            {rows.map((row, i) => (
              <Text>
                <Text dimColor>{(i === 0 ? fmtTokens(top) : i === lineRow ? fmtTokens(f?.threshold ?? 0) : '').padStart(6)} │</Text>
                <Text color={i <= lineRow ? 'yellow' : 'cyan'}>{row}</Text>
              </Text>
            ))}
            <Text dimColor>{`${''.padStart(6)} └${'─'.repeat(Math.min(width, values.length))}`}</Text>
            <Text dimColor>{`${''.padStart(8)}context per turn, oldest → newest; ─ marks the threshold`}</Text>
          </Box>
        )}
        {recent.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            {recent.map(p => (
              <Text wrap="truncate-end">
                {fmtTokens(p.context).padStart(7)} {p.isFresh ? '  (start)  ' : `+${fmtTokens(p.growth)}`.padEnd(11)}
                <Text dimColor>{p.isFresh ? '' : ` tools ${fmtTokens(p.tool)}`}</Text>
                {p.breakKind === null ? '' : ` · ${p.breakKind}`}
              </Text>
            ))}
          </Box>
        )}
        {o !== null && o.focus !== null && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>
              Focus{' '}
              <Text dimColor>
                ({o.source === 'haiku' ? `drafted by Claude Haiku, ${fmtUsd(o.costUsd)}` : 'from the recent turns, no model'} · {o.status})
              </Text>
            </Text>
            <Text wrap="wrap">{o.focus}</Text>
          </Box>
        )}
        {o !== null && o.note !== null && <Text dimColor wrap="wrap">{o.note}</Text>}
        {spent > 0 && <Text dimColor>Drafting spend this session: {fmtUsd(spent)}</Text>}
        <Box gap={1} marginTop={1} flexWrap="wrap">
          <Button key="compact" hotkey="c" label="Compact now" variant="primary" onPress={() => void compactNow($)} />
          <Button key="draft" hotkey="d" label="Draft focus" onPress={() => void redraft($)} />
          <Button key="dismiss" hotkey="n" label="Not now" onPress={() => setOffer($, x => ({ ...x, status: 'dismissed', note: 'dismissed' }))} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })