stepline

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const plan = await read($, planAtom)
    if (plan === null || e.props.hasSurvey || (await read($, paneOpenAtom))) return next(e)
    // A plan this session's model hasn't been given waits for /stepline.
    const isKnown = plan.knownBy === (await $.session.id())
    const step = currentStep(plan)
    if (step === undefined && (!isKnown || (await read($, doneSeenAtom)))) return next(e)

    const { Box, Button, Text } = $.ui.resolve(e)
    // What the mods after this one draw stays in the band, under the plan.
    const theirs = await next(e)
    const width = Math.min(e.props.bodyColumns, CARD_MAX_WIDTH)
    const total = plan.steps.length
    const count = `${doneCount(plan)}/${total}`

    // Every row starts with a label in a narrow column, so the eye can scan down it.
    const planLabel = (
      <Box width={LABEL_WIDTH} flexShrink={0}>
        <Text bold color="planMode">
          PLAN
        </Text>
      </Box>
    )
    const label = (text: string) => (
      <Box width={LABEL_WIDTH} flexShrink={0}>
        <Text dimColor>{text}</Text>
      </Box>
    )

    let rows
    if (step === undefined) {
      rows = (
        <Box flexDirection="row">
          {planLabel}
          <Box flexShrink={1}>
            <Text color="success" wrap="truncate-end">{`✔ ${plan.title}: all ${total} steps done`}</Text>
          </Box>
        </Box>
      )
    } else if (!isKnown) {
      rows = (
        <Box flexDirection="row">
          {planLabel}
          <Box flexShrink={1}>
            <Text dimColor wrap="truncate-end">
              {`Unfinished: "${plan.title}" ${count} · /stepline to resume`}
            </Text>
          </Box>
        </Box>
      )
    } else {
      const after = plan.steps.find(one => one.n > step.n && !isClosed(one.status))
      const barWidth = Math.max(8, Math.min(20, Math.floor(width / 6)))
      const filled = Math.round((doneCount(plan) / Math.max(1, total)) * barWidth)
      // What the model is doing off the plan takes the Next row's place.
      let under: { label: string; mark: string; text: string } | undefined
      const aside = await read($, asideAtom)
      if (aside !== null) under = { label: 'Aside', mark: '↳ ', text: aside.text }
      else if (after !== undefined) under = { label: 'Next', mark: '  ', text: `${after.n}. ${after.title}` }
      rows = (
        <Box flexDirection="column">
          <Box flexDirection="row" justifyContent="space-between" columnGap={3}>
            <Box flexDirection="row" flexShrink={1}>
              {planLabel}
              <Box flexShrink={1}>
                <Text bold wrap="truncate-end">
                  {plan.title}
                </Text>
              </Box>
            </Box>
            <Box flexDirection="row" flexShrink={0} columnGap={3}>
              <Box flexDirection="row">
                <Text color="planMode">{'▰'.repeat(filled)}</Text>
                <Text dimColor>{'▱'.repeat(barWidth - filled)}</Text>
                <Text>{` ${count}`}</Text>
              </Box>
              <Button key="all-steps" label="all steps" hotkey="a" plain onPress={() => openPane($)} />
            </Box>
          </Box>
          <Box flexDirection="row">
            {label('Now')}
            <Text color={ICON_COLOR[step.status]}>{`${ICON[step.status]} `}</Text>
            <Box flexShrink={1}>
              <Text bold wrap="truncate-end">{`${step.n}. ${step.title}`}</Text>
            </Box>
          </Box>
          {under !== undefined && (
            <Box flexDirection="row">
              {label(under.label)}
              <Text dimColor>{under.mark}</Text>
              <Box flexShrink={1}>
                <Text dimColor wrap="truncate-end">
                  {under.text}
                </Text>
              </Box>
            </Box>
          )}
        </Box>
      )
    }

    // A thin frame in the plan-mode color sets the plan apart from the transcript.
    return (
      <Box flexDirection="column">
        <Box
          flexDirection="column"
          width={width}
          borderStyle="round"
          borderColor="planMode"
          borderDimColor
          paddingX={1}
        >
          {rows}
        </Box>
        {theirs}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const plan = await read($, planAtom)
    if (plan === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>No plan yet. Approve a plan in plan mode and its steps show up here.</Text>
          <Box marginTop={1}>
            <Text dimColor>Esc or /stepline closes this</Text>
          </Box>
        </Box>
      )
    }

    const total = plan.steps.length
    const done = doneCount(plan)
    const isFinished = done === total
    const current = currentStep(plan)
    const aside = await read($, asideAtom)
    const count = ` ${done}/${total}`
    const barWidth = Math.max(4, Math.min(30, e.props.bodyColumns - count.length))
    const filled = Math.round((done / Math.max(1, total)) * barWidth)

    // Long plans show a window that starts just above the first open step.
    const room = Math.max(3, (e.viewport?.rows ?? 40) - 9)
    const firstOpen = plan.steps.findIndex(step => !isClosed(step.status))
    const start = Math.max(0, Math.min((firstOpen < 0 ? total : firstOpen) - 1, total - room))
    const shown = plan.steps.slice(start, start + room)
    const below = total - start - shown.length

    return (
      <Box flexDirection="column">
        <Text bold color={isFinished ? 'success' : 'text'} wrap="truncate-end">
          {isFinished ? `✔ ${plan.title}` : plan.title}
        </Text>
        <Box flexDirection="row" marginBottom={1}>
          <Text color="planMode">{'▰'.repeat(filled)}</Text>
          <Text dimColor>{'▱'.repeat(barWidth - filled)}</Text>
          <Text bold={isFinished}>{count}</Text>
        </Box>
        {start > 0 && <Text dimColor>{`  ↑ ${start} more done`}</Text>}
        {shown.map(step => (
          <Box flexDirection="column">
            <Box flexDirection="row">
              <Text color={ICON_COLOR[step.status]}>{`${ICON[step.status]} `}</Text>
              <Text
                wrap="truncate-end"
                bold={step.status === 'in_progress'}
                dimColor={isClosed(step.status)}
                strikethrough={step.status === 'skipped'}
              >
                {`${step.n}. ${step.title}${step.isAdded === true ? ' +' : ''}`}
              </Text>
            </Box>
            {/* What the model is doing off the plan sits under the step it left. */}
            {aside !== null && step.n === current?.n && (
              <Text dimColor wrap="truncate-end">
                {`  ↳ ${aside.text}`}
              </Text>
            )}
          </Box>
        ))}
        {below > 0 && <Text dimColor>{`  ↓ ${below} more`}</Text>}
        {plan.revisedFrom !== undefined && <Text dimColor>(revised from an earlier approval)</Text>}
        {plan.splitBy === 'parser' && (
          <Text dimColor>(split from the plan's own list: the model call failed)</Text>
        )}
        <Box marginTop={1}>
          <Text dimColor>Esc or /stepline closes this</Text>
        </Box>
      </Box>
    )
  })