status-band

  on('ui.render', { component: 'Pane', requestId: MODS_PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const off = await read($, rowsOff)
    const list = await read($, mods)
    const toggleRow = async (key: string) => {
      const next = off.includes(key) ? off.filter(k => k !== key) : [...off, key]
      await update($, rowsOff, () => next)
      await $.store.set('rowsOff', next)
    }
    const toggleMod = async (m: ModInfo) => {
      const turnOn = !m.isOn
      const error = await switchMod($, m.id, turnOn)
      await update($, mods, ms =>
        (ms ?? []).map((x): ModInfo => (x.id !== m.id ? x : error ? { ...x, pending: 'failed', error } : { ...x, isOn: turnOn, pending: turnOn ? 'on' : 'off' })))
    }
    const state = (isOn: boolean) => <Text color={isOn ? GREEN : MUTED} bold>{isOn ? 'on ' : 'off'}</Text>
    const cState = await read($, compactState)
    const hState = await read($, handoffState)
    const learned = await profileOf($, await $.clock.now())
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Text bold>This chat</Text>
          <Box flexDirection="row" gap={1}>
            <Button key="p-compact" label={compactLabel(cState)} plain onPress={() => void compactNow($)} />
            <Button key="p-handoff" label={handoffLabel(hState)} plain onPress={() => void handoffNow($)} />
          </Box>
          <Text dimColor>{learned.days > 0 ? `Week pace: learned from ${learned.days} days of your activity, recent weeks counting most.` : 'Week pace: midnight to 8am counted as quiet until it has 3 days of your activity.'}</Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>Band rows</Text>
          <Text dimColor>Change right away.</Text>
          {ROWS.map(r => (
            <Box key={`row-${r.key}`} flexDirection="row" gap={1}>
              <Button key={`r-${r.key}`} label={off.includes(r.key) ? 'Turn on' : 'Turn off'} plain onPress={() => void toggleRow(r.key)} />
              {state(!off.includes(r.key))}
              <Text>{r.label}</Text>
            </Box>
          ))}
        </Box>
        <Box flexDirection="column">
          <Text bold>Mods</Text>
          <Text dimColor>Switches apply from your next session.</Text>
          {list === null ? <Text dimColor>Reading your mods…</Text> : null}
          {list?.length === 0 ? <Text dimColor>No mods found.</Text> : null}
          {(list ?? []).map(m => (
            <Box key={`mod-${m.id}`} flexDirection="column">
              <Box flexDirection="row" gap={1}>
                <Button key={`m-${m.id}`} label={m.isOn ? 'Turn off' : 'Turn on'} plain onPress={() => void toggleMod(m)} />
                {state(m.isOn)}
                <Text bold>{m.name}</Text>
                {m.pending === 'on' || m.pending === 'off' ? <Text color={BLUE}>{`(${m.pending} next session)`}</Text> : null}
                {m.pending === 'failed' ? <Text color={RED}>{`could not switch: ${m.error ?? ''}`}</Text> : null}
              </Box>
              {m.description ? (
                <Box marginLeft={5}>
                  <Text dimColor wrap="wrap">{m.description}</Text>
                </Box>
              ) : null}
            </Box>
          ))}
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden)) || (await read($, modsHidden))) return next(e)
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui
    const Svg = e.surface === 'desktop' && 'Svg' in ui ? ui.Svg : null
    const Button = 'Button' in ui ? ui.Button : null
    const now = await $.clock.now()
    const u = await read($, usage)
    const rs = await read($, readings)
    const t = await read($, lastTurn)
    const todo = taskSummary(await read($, tasks))
    const off = await read($, rowsOff)
    const isOn = (key: string) => !off.includes(key)

    const row = (key: string, label: string, ...cells: RenderChildren[]) => (
      <Box key={key} flexDirection="row" gap={1} alignItems="center">
        <Box width={LABEL_W} flexShrink={0}>
          <Text dimColor>{label}</Text>
        </Box>
        {cells}
      </Box>
    )
    // Every row's bar is the same size; a row with no bar keeps the space, so the text lines up.
    const bar = (key: string, source: string | null, alt: string) =>
      Svg ? <Svg key={key} source={source ?? blankSvg()} alt={alt} width={BAR_W} height={BAR_H} /> : null
    const dot = (k: string) => <Text key={k} color={MUTED}>{' · '}</Text>
    const rows: RenderChildren[] = []

    const last = rs[rs.length - 1]
    const mine = await read($, ledger)
    const rest = Object.values(await read($, others)).map(o => o.ledger)
    const sum = totalsOf([mine, ...rest], now)
    const isFull = !!last && last.percent >= CONTEXT_COMPACT
    const cState = await read($, compactState)
    const hState = await read($, handoffState)
    // Compact now and Handoff always show; Compact now is the loud one once the context is full.
    const actions = Button
      ? [
        <Button key="compact" label={compactLabel(cState)} variant={isFull && cState === 'idle' ? 'primary' : 'secondary'} onPress={() => void compactNow($)} />,
        <Button key="handoff" label={handoffLabel(hState)} variant="secondary" onPress={() => void handoffNow($)} />,
      ]
      : null
    let isActionsPlaced = false

    if (Svg) {
      // The desktop: three rings, four money tiles, and a line under them only when something needs you.
      const ring = (key: string, source: string, alt: string, label: string, sub: string, color?: string) => (
        <Box key={key} flexDirection="column" alignItems="center">
          <Svg source={source} alt={alt} width={RING} height={RING} />
          <Text color={color ?? MUTED} bold={color !== undefined}>{label}</Text>
          {sub ? <Text color={MUTED}>{sub}</Text> : null}
        </Box>
      )
      const rings: RenderChildren[] = []
      const pace = u && u.week >= 0 ? weekPace(u.week, u.weekResets, now, await profileOf($, now)) : null
      const weekLeft = u ? resetsIn(u.weekResets, now) : ''
      if (isOn('week') && u && pace) {
        rings.push(ring('rw', ringSvg(u.week, pace.color, [{ at: pace.elapsed, color: '#D3D1C7' }]), `weekly limit ${Math.round(u.week)}% used`,
          pace.level === 'ok' ? 'week' : 'week ⚠', weekLeft ? `resets ${weekLeft}` : '', pace.level === 'ok' ? undefined : pace.color))
      }
      if (isOn('usage') && u && u.fiveHour >= 0) {
        const five = resetsIn(u.fiveResets, now)
        rings.push(ring('r5', ringSvg(u.fiveHour, levelColor(u.fiveHour)), `5-hour window ${Math.round(u.fiveHour)}% used`, '5-hour', five ? `resets ${five}` : ''))
      }
      if (isOn('context') && last) {
        rings.push(ring('rc', ringSvg(last.percent, contextColor(last.percent), [{ at: CONTEXT_COMPACT, color: '#E24B4A' }]), `context ${last.percent}% full`,
          isFull ? 'context ⚠' : 'context', `${short(last.tokens)} / ${short(last.window)}`, isFull ? RED : undefined))
      }
      const showSpend = isOn('spend') && !!u
      const showTokens = isOn('tokens')
      const tile = (key: string, label: string, usd: number, tokens: number) => (
        <Box key={key} flexDirection="column" paddingX={1} backgroundColor={TILE} minWidth={TILE_W}>
          <Text color={MUTED}>{label}</Text>
          {showSpend ? <Text bold>{dollars(usd)}</Text> : null}
          {showTokens ? <Text color={MUTED}>{`${tokensShort(tokens)} tok`}</Text> : null}
        </Box>
      )
      const tiles = showSpend || showTokens
        ? [tile('t0', 'this chat', u ? u.usd : 0, mine.tokens), tile('t1', 'today', sum.today.usd, sum.today.tokens),
          tile('t2', '7 days', sum.week.usd, sum.week.tokens), tile('t3', 'all time', sum.all.usd, sum.all.tokens)]
        : []
      if (rings.length || tiles.length) {
        rows.push(
          <Box key="dash" flexDirection="row" gap={2} alignItems="center" flexWrap="wrap">
            {rings.length ? <Box key="rings" flexDirection="row" gap={2}>{rings}</Box> : null}
            {tiles.length ? <Box key="tiles" flexDirection="row" gap={1}>{tiles}</Box> : null}
            {actions}
          </Box>,
        )
        isActionsPlaced = true
      }
      if (isOn('week') && pace && pace.level !== 'ok') {
        rows.push(<Text key="wwarn" color={pace.color} wrap="truncate-end">{`⚠ Week: ${pace.word}${weekLeft ? ` · resets in ${weekLeft}` : ''}`}</Text>)
      }
      if (isOn('context') && isFull && last) {
        rows.push(<Text key="cwarn" color={RED} wrap="truncate-end">{`⚠ Context ${last.percent}% full: compact to keep the next turns cheap`}</Text>)
      }
    } else {
    // The weekly limit leads: it is the one that runs out for days.
    if (isOn('week') && u && u.week >= 0) {
      const pace = weekPace(u.week, u.weekResets, now, await profileOf($, now))
      const week = resetsIn(u.weekResets, now)
      rows.push(row('week', 'week',
        bar('bw', barSvg(u.week, pace.color, [{ at: pace.elapsed, color: '#D3D1C7' }]), `weekly limit ${Math.round(u.week)}% used`),
        <Text key="wk" wrap="truncate-end">
          <Text color={pace.color} bold>{`${Math.round(u.week)}% used`}</Text>
          <Text color={pace.level === 'ok' ? MUTED : pace.color} bold={pace.level !== 'ok'}>{`  ${pace.level === 'ok' ? '' : '⚠ '}${pace.word}`}</Text>
          {week ? <Text color={MUTED}>{` · resets in ${week}`}</Text> : null}
        </Text>,
      ))
    }

    if (isOn('usage') && u && u.fiveHour >= 0) {
      const five = resetsIn(u.fiveResets, now)
      rows.push(row('usage', '5-hour',
        bar('b5', barSvg(u.fiveHour, levelColor(u.fiveHour)), `5-hour window ${Math.round(u.fiveHour)}%`),
        <Text key="use" wrap="truncate-end">
          <Text color={levelColor(u.fiveHour)} bold>{`${Math.round(u.fiveHour)}% used`}</Text>
          {five ? <Text color={MUTED}>{`  resets in ${five}`}</Text> : null}
        </Text>,
      ))
    }

    if (isOn('context') && last) {
      const prev = rs[rs.length - 2]
      const delta = prev ? last.tokens - prev.tokens : 0
      const color = contextColor(last.percent)
      rows.push(row('context', 'context',
        bar('bc', barSvg(last.percent, color, [{ at: CONTEXT_COMPACT, color: '#E24B4A' }]), `context ${last.percent}% full`),
        <Text key="ctx" wrap="truncate-end">
          <Text color={color} bold>{`${last.percent}% full`}</Text>
          <Text color={MUTED}>{`  ${short(last.tokens)} / ${short(last.window)}`}</Text>
          {delta !== 0 ? <Text color={MUTED}>{`  ${delta > 0 ? '▲ +' : '▼ '}${short(Math.abs(delta))} last turn`}</Text> : null}
          <Text color={isFull ? RED : MUTED} bold={isFull}>{`  ${isFull ? '⚠ ' : ''}${forecast(last.percent)}`}</Text>
        </Text>,
        actions,
      ))
      isActionsPlaced = true
    }

    if (isOn('spend') && u) {
      rows.push(row('spend', 'spend', bar('bs', null, ''),
        <Text key="sp" wrap="truncate-end">
          <Text bold>{dollars(u.usd)}</Text><Text color={MUTED}>{' this chat'}</Text>{dot('s1')}
          <Text bold>{dollars(sum.today.usd)}</Text><Text color={MUTED}>{' today'}</Text>{dot('s2')}
          <Text bold>{dollars(sum.week.usd)}</Text><Text color={MUTED}>{' 7d'}</Text>{dot('s3')}
          <Text bold>{dollars(sum.all.usd)}</Text><Text color={MUTED}>{' all time'}</Text>
        </Text>,
      ))
    }
    if (isOn('tokens') && sum.all.tokens > 0) {
      rows.push(row('tokens', 'tokens', bar('bt', null, ''),
        <Text key="tk" wrap="truncate-end">
          <Text bold>{tokensShort(mine.tokens)}</Text><Text color={MUTED}>{' this chat'}</Text>{dot('t1')}
          <Text bold>{tokensShort(sum.today.tokens)}</Text><Text color={MUTED}>{' today'}</Text>{dot('t2')}
          <Text bold>{tokensShort(sum.week.tokens)}</Text><Text color={MUTED}>{' 7d'}</Text>{dot('t3')}
          <Text bold>{tokensShort(sum.all.tokens)}</Text><Text color={MUTED}>{' all time'}</Text>
        </Text>,
      ))
    }