next-steps

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const now = await read($, phase)
    const found = await read($, steps)
    const isEmpty = now === 'idle' || (now === 'asking' && found.length === 0)

    if (isEmpty || e.props.hasSurvey || e.props.isWorking) {
      return next(e)
    }

    const how = await read($, via)
    const voiceOn = await read($, voice)
    // The dropdown shows the voice in use, or off.
    const picked = voiceOn ? voiceFile() : VOICE_OFF
    const state = await read($, daemon)
    const placedSteps = await read($, placed)
    // The band is one slot for every mod: what the others draw (the check-handoff-clean-B7 row)
    // stays on top, the mascot goes under it, never over it.
    const below = await next(e)

    if (e.surface === 'terminal') {
      const frame = await read($, tick)
      const { Box, Raster } = $.ui.resolve(e)
      const sprite = toCells(poseFor(now, frame))

      return (
        <Box flexDirection="column">
          {below}
          <Box flexDirection="column" borderStyle="round" borderColor={FRAME_COLOR} paddingX={1}>
            <Box flexDirection="row" gap={2}>
              <Raster
                key="mascot"
                columns={sprite.columns}
                rows={sprite.rows}
                cells={sprite.cells}
              />
              {column($, $.ui.resolve(e), now, frame, found, how, placedSteps, voiceOn, state, voiceChoices(), picked, strings)}
            </Box>
            {supportRow($.ui.resolve(e), strings)}
          </Box>
        </Box>
      )
    }

    // The tick is not read here: a write to it must not draw this instance again.
    const { Box, Svg } = $.ui.resolve(e)
    const sprite = toSvg(now)

    $.ui.log(`next-steps: drew ${now} on ${e.surface}`, { to: 'debug' })

    return (
      <Box flexDirection="column">
        {below}
        <Box flexDirection="column" borderStyle="round" borderColor={FRAME_COLOR} paddingX={1}>
          <Box flexDirection="row" gap={2}>
            <Svg
              key="mascot"
              source={sprite.source}
              alt="Claude"
              width={sprite.width}
              height={sprite.height}
            />
            {column($, $.ui.resolve(e), now, undefined, found, how, placedSteps, voiceOn, state, e.surface === 'mobile' ? null : voiceChoices(), picked, strings)}
          </Box>
          {supportRow($.ui.resolve(e), strings)}
        </Box>
      </Box>
    )
  })

const column = (
  $: EngineInterface,
  t: Basic,
  now: Phase,
  frame: number | undefined,
  found: readonly string[],
  how: Via,
  placedSteps: readonly string[],
  voiceOn: boolean,
  state: Daemon,
  choices: readonly { value: string; label: string }[] | null,
  picked: string,
  texts: Strings,
) => {
  const { Box, Button, Select, Text } = t
  const shows = now === 'asking' || now === 'chatting' || now === 'replying'

  return (
    <Box flexDirection="column">
      <Text bold>{lineFor(now, frame, how, texts)}</Text>
      {shows &&
        found.map((step, index) => {
          const isPlaced = placedSteps.includes(step)

          // The label is the whole step, never shortened: the band has room for it and the text wraps onto more rows.
          return (
            <Button
              key={`step-${index + 1}`}
              plain
              hotkey={String(index + 1)}
              label={isPlaced ? `✓ ${step}` : step}
              dimColor={isPlaced}
              onPress={() => choose($, step).catch(() => {})}
            />
          )
        })}
      {shows && placedSteps.length > 0 && (
        <Text dimColor>{placedLine(placedSteps.length, found.length, how, texts.placed)}</Text>
      )}
      {now !== 'chosen' && (
        <Box flexDirection="row" gap={2}>
          {choices !== null && Select !== undefined && (
            <Select
              key="voice"
              label={voiceLabel(voiceOn, state, texts.voice)}
              options={choices}
              value={picked}
              onSelect={value => {
                void chooseVoice($, value).catch(() => {})
              }}
            />
          )}
          {voiceOn && state === 'ready' && (
            <Button key="stop" hotkey="s" label={texts.button.stop} onPress={() => stopVoice($).catch(() => {})} />
          )}
          <Button key="discuss" hotkey="d" label={texts.button.talk} onPress={() => openChat($).catch(() => {})} />
        </Box>
      )}
    </Box>
  )
}

const supportRow = (t: Basic, texts: Strings) => {
  const { Box, Link, Text } = t

  return (
    <Box flexDirection="row" justifyContent="flex-end">
      <Box flexDirection="row" gap={1}>
        <Text color={SUPPORT_PEACH}>{texts.button.support}</Text>
        <Link key="support-link" href={SUPPORT_URL} label="↗" />
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e, next) => {
    if (e.surface === 'mobile') {
      return next(e)
    }

    const lines = await read($, chat)
    const isBusy = await read($, busy)
    const proposal = await read($, draft)
    const { Box, Button, Input, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column">
        {lines.map((line, index) => (
          <Text key={`line-${index}`} bold={line.who === 'assistant' && line.isError !== true} dimColor={line.isError === true}>
            {`${line.who === 'user' ? strings.pane.you : strings.pane.assistant}: ${line.text}`}
          </Text>
        ))}
        <Input
          key={`say-${fieldId}`}
          label={strings.pane.write}
          placeholder={strings.pane.placeholder}
          autoFocus
          onSubmit={value => {
            void ask($, value).catch(() => {})
          }}
        />
        {isBusy && <Text dimColor>{strings.pane.thinking}</Text>}
        {isBusy && <Button key="cancel" label={strings.pane.cancel} onPress={() => cancelAsk($).catch(() => {})} />}
        {proposal !== '' && (
          <Box flexDirection="column">
            <Text bold>{strings.pane.proposal}</Text>
            <Input
              key={`draft-${draftId}`}
              value={proposal}
              onInput={value => {
                draftEdit = value
              }}
              onSubmit={value => {
                void keepDraft($, value).catch(() => {})
              }}
            />
            <Box flexDirection="row" gap={2}>
              <Button key="copy" label={strings.pane.copy} onPress={() => copyDraft($).catch(() => {})} />
              <Button
                key="send"
                variant="primary"
                label={strings.pane.send}
                onPress={() => sendDraft($).catch(() => {})}
              />
            </Box>
          </Box>
        )}
        <Button key="close" label={strings.pane.close} onPress={() => $.ui.close({ id: PANE_ID }).catch(() => {})} />
      </Box>
    )
  })