taskline

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const prefs = await getPrefs($)
    const snap = await getSnapshot($)
    const now = await $.clock.now()
    const cel = await getCelebration($)
    const showing = cel && cfg.celebrate && !prefs.hidden && now - cel.startedAt < CELEBRATE_MS ? cel : null
    if (prefs.hidden || (snap.tasks.length === 0 && !showing)) return next(e)

    const views = buildViews(snap, now, cfg.timing)
    if (views.length === 0 && !showing) return next(e)
    const color = cfg.color && colorEnv
    const width = e.props.bodyColumns
    const budget = Math.max(1, e.props.maxRows - 1)

    // the finish takes the rows it can get above the tasks; one row stays for them
    let raster: { rows: number; scene: Scene } | null = null
    if (showing && e.surface === 'terminal' && cfg.animation) {
      const rowsFree = Math.min(CELEBRATE_ROWS, budget - (views.length ? 1 : 0))
      const sc = rowsFree > 0 ? sceneFor(showing, width, rowsFree, color) : null
      if (sc) raster = { rows: rowsFree, scene: sc }
    }
    mounted = raster ? { requestId: e.requestId, cols: width, rows: raster.rows } : null
    const used = raster ? raster.rows : showing ? 1 : 0
    const rows: Row[] = views.length
      ? layoutRows(views, {
          width,
          layout: prefs.layout,
          maxTasks: cfg.maxTasks,
          maxRows: Math.max(1, budget - used),
          nowMs: now,
          color,
        })
      : []
    if (rows.length === 0 && !showing) return next(e)

    const { Box, Text } = $.ui.resolve(e)
    let top: RenderNode | null = null
    if (raster && e.surface === 'terminal') {
      const { Raster } = $.ui.resolve(e)
      top = (
        <Raster
          key={RASTER_KEY}
          columns={width}
          rows={raster.rows}
          cells={encodeCells(frame(raster.scene, now - showing!.startedAt))}
        />
      )
    } else if (showing) {
      // no room, no animation, or a surface without a Raster: the finish in one line
      top = (
        <Box key="taskline-check-line" flexDirection="row">
          <Text color={color ? PALETTE.ok : undefined} bold wrap="truncate-end">
            {`✔ CHECK!!`}
          </Text>
          <Text dimColor wrap="truncate-end">{`  ${showing.label}`}</Text>
        </Box>
      )
    }

    const band = (
      <Box key="taskline" flexDirection="column">
        {top}
        {rows.map((row, i) => (
          <Box key={`row-${i}`} flexDirection="row">
            {row.map((s, j) => (
              <Text key={`s-${i}-${j}`} color={s.color} dimColor={s.dim} bold={s.bold} wrap="truncate-end">
                {s.text}
              </Text>
            ))}
          </Box>
        ))}
      </Box>
    )
    // other plugins' bands stay: ours goes first, theirs below
    const below = await next(e)
    return below ? (
      <Box flexDirection="column">
        {band}
        {below}
      </Box>
    ) : (
      band
    )
  })