cachebeat

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface !== 'desktop') return next(e)
    const c = await read($, settingsAtom)
    isStatusOnBand = c.statusLine !== 'off'
    const line = await read($, lineAtom)
    if (!isStatusOnBand || !line || e.props.hasSurvey || e.props.isWorking) return next(e)
    const p = await read($, pulse)
    if (p === 'armed' && c.lineAnimate) animateLine($)
    const f = c.lineAnimate ? await read($, lineFrameAtom) : 0
    const { Box, Text } = $.ui.resolve(e)
    // the band's font is proportional: the heart's frames differ in width, so it gets a box of its own
    // and the words after it never move
    const { head, rest, width } = liveLine(line, c, p, f)
    // one glyph keeps its width as it beats: the line is one run of text, spaced as written
    if (width <= 1) return <Box>{paint(Text, joined([...head, ...rest]))}</Box>
    // a wider animation, on this proportional font, would change width from frame to frame and carry
    // the words after it along: each of its characters gets a cell of its own, centered in it, as the
    // terminal's grid has them, so it is as wide as its frames' cells. A cell's margin, not the space,
    // keeps the words off it: that space would collapse at the next box's start, as in HTML
    if (rest[0]) rest[0] = { ...rest[0], text: rest[0].text.replace(/^ /, '') }
    const slots = head.flatMap(sp => glyphs(sp.text).map(ch => ({ ...sp, text: ch })))
    const widths = slotWidths(variant(c.statusHeart)) // a heart's slot is wider, wherever any frame has one
    return (
      <Box flexDirection="row">
        <Box flexDirection="row" flexShrink={0} marginLeft={1} marginRight={1}>
          {slots.map((sp, i) => (
            <Box width={widths[i] ?? 1} flexShrink={0} justifyContent="center">
              {paint(Text, [{ ...sp, text: slotText(sp.text, widths[i] ?? 1) }])}
            </Box>
          ))}
        </Box>
        {paint(Text, rest)}
      </Box>
    )
  })

export function paint(Text: Els['Text'], list: Span[]) {
  return list.map(sp => (sp.color ? <Text color={sp.color} dimColor={sp.dim}>{sp.text}</Text> : <Text dimColor={sp.dim}>{sp.text}</Text>))
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const c = await read($, settingsAtom)
    const page = await read($, pageAtom)
    const tick = await read($, tickAtom)
    const focus = await read($, focusAtom)
    await read($, pulse) // redraws "This session" as it turns on or off
    // the preview's clock runs only while there is a preview to move
    const picked = page.picker ? rowOf(page.picker) : undefined
    const isMoving = picked ? picked.row.key === 'variant' || !!picked.tab.preview : !!TABS.find(t => t.id === page.tab)?.preview
    // at the speed of the part on show: the turn line's on its tab, the heart's elsewhere
    const part = (picked?.tab.id ?? page.tab) === 'status' ? 'line' : 'heart'
    if (!isMoving) stopPaneTicker()
    else if (!paneTicker) paneTicker = $.clock.every(frameMs(lookOf(c, part)), () => void update($, tickAtom, () => ++paneTick))
    const els = $.ui.resolve(e)
    paneSurface = e.surface
    if (!('Input' in els)) return <els.Text>Open cachebeat's settings in the terminal.</els.Text>
    const view = {
      page, tick, focus, columns: e.props.bodyColumns, isOn: s.enabled, sessionMinutes: s.idle === null ? null : s.idle / MIN,
      autoMinutes: AUTO[s.isCacheShort ? '5m' : ttl], notice, isResetArmed, isTerminal: e.surface === 'terminal', customs,
    }
    const { tree, ring: walk } = settingsPane(els, c, view, {
      set: patch => void setSettings($, patch),
      // a press on a tab (Enter, 1-5, a click) shows it and goes into its settings
      tab: id => void goTo($, { tab: id, picker: null }, firstOf(id, c)),
      at: key => void focusOn($, key),
      open: key => {
        // the focus starts on the value set: one of the choices, or the custom field
        const { row } = rowOf(key)!
        const i = row.values.indexOf(c[key])
        void goTo($, { ...page, picker: key }, i >= 0 ? `opt:${i}` : row.custom ? 'custom' : 'opt:0', true)
      },
      pick: (key, value) => void setSettings($, { [key]: value }).then(() => (say($, ''), goTo($, { ...page, picker: null }, `row:${key}`))),
      refuse: text => say($, text),
      resetRow: key => void setSettings($, { [key]: DEFAULTS[key] }).then(() => say($, `${rowOf(key)!.row.label.trim()} back to its default`)),
      back: () => void goTo($, { ...page, picker: null }, `row:${page.picker}`),
      toggleSession: () => void (s.enabled ? Promise.resolve(stop($)) : turnOn($, undefined).then(r => r.text)).then(t => say($, `this session: ${t}`)),
      beatNow: () => void beatNow($).then(t => say($, t)),
      reset: () => {
        if (!isResetArmed) {
          isResetArmed = true
          return say($, '')
        }
        isResetArmed = false
        void setSettings($, DEFAULTS).then(() => say($, 'settings reset to the defaults'))
      },
    })
    ring = walk
    return tree
  })

function preview(els: Els, s: BeatSettings, kind: Preview, tick: number) {
  const { Box, Text } = els
  const x = variant(s.variant)
  const heartLook = lookOf(s, 'heart')
  const lineLook = lookOf(s, 'line')
  const frame = heartLook.animate ? previewFrame(x, tick, heartLook.timing) : x.loop[0]!
  // the hint line takes text alone, drawn dim
  const heart = s.heartPlacement === 'tail' ? [{ text: frame, dim: true }] : spans(frame, heartLook, tick, isLit(frame))
  const sample = statusText(s, 3, 184_000, '42m')
  const lead = lineLook.animate && s.statusHeart !== 'off' ? statusFrame(s.statusHeart, tick, lineLook.timing) : ''
  const lineLit = isLit(lead || statusFrame('beat', tick, lineLook.timing))
  const line = paint(Text, spans(lead ? sample.replace(/^[♥♡]/, lead) : sample, lineLook, tick, lineLit))
  const turn = <Text dimColor>✻ Brewed for 2s</Text>
  const status = s.statusLine === 'off' ? turn
    : (
      <Box flexDirection="column">
        {turn}
        <Box marginTop={s.statusLine === 'spaced' ? 1 : 0}>{line}</Box>
      </Box>
    )
  return (
    <Box flexDirection="column">
      {kind !== 'status' && (
        <Box>
          <Text dimColor>{'heart'.padEnd(8)}</Text>
          {paint(Text, heart)}
          {s.showCount && <Text dimColor> ×3</Text>}
        </Box>
      )}
      {kind !== 'heart' && (
        <Box>
          <Text dimColor>{'status'.padEnd(8)}</Text>
          {status}
        </Box>
      )}
    </Box>
  )
}