ambient

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const now = await shownSettings($)
    const rows = Math.min(now.rows, e.props.maxRows)
    const isOffered =
      now.isOn &&
      !e.props.hasSurvey &&
      rows >= MIN_ROWS &&
      (e.surface === 'terminal' || e.surface === 'desktop')

    if (!isOffered) {
      return next(e)
    }

    if (now.when === 'working' && !e.props.isWorking && !(await read($, isPicking))) {
      return next(e)
    }

    const ui = $.ui.resolve(e)

    return (
      <ui.Client
        key={BAND}
        module="./band.tsx"
        props={await propsOf($, now, e.props.isWorking)}
        width="100%"
        height={rows}
      />
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const now = await read($, settings)

    return (
      <Box flexDirection="column">
        <Text dimColor>The band above the prompt · pick its scene</Text>
        {SCENES.map((scene, index) => (
          <Box gap={1}>
            <Text color={scene.hue}>{now.isOn && scene.id === now.scene ? '●' : ' '}</Text>
            <Button
              key={scene.id}
              plain
              hotkey={HOTKEYS[index]}
              label={scene.name.padEnd(9)}
              onPress={() => picked($, scene.id)}
            />
            <Text dimColor wrap="truncate-end">
              {scene.about}
            </Text>
          </Box>
        ))}
        <Box gap={1}>
          <Text>{now.isOn ? ' ' : '●'}</Text>
          <Button
            key="off"
            plain
            hotkey="o"
            label="Off"
            onPress={() => stored($, { isOn: false })}
          />
        </Box>
        <Box gap={2} marginTop={1}>
          <Button
            key="shorter"
            plain
            hotkey="j"
            label="shorter"
            onPress={() =>
              stored($, kept => ({ rows: Math.max(MIN_ROWS, kept.rows - 1) }))
            }
          />
          <Button
            key="taller"
            plain
            hotkey="k"
            label="taller"
            onPress={() =>
              stored($, kept => ({ rows: Math.min(MAX_ROWS, kept.rows + 1) }))
            }
          />
          <Text dimColor>{now.rows} rows</Text>
        </Box>
        <Box gap={2}>
          <Button
            key="sound"
            plain
            hotkey="v"
            label={`sound ${now.isSoundOn ? 'on' : 'off'}`}
            onPress={() => stored($, kept => ({ isSoundOn: !kept.isSoundOn }))}
          />
          <Button
            key="quieter"
            plain
            hotkey="z"
            label="quieter"
            onPress={() =>
              stored($, kept => ({ volume: Math.max(0, kept.volume - VOLUME_STEP) }))
            }
          />
          <Button
            key="louder"
            plain
            hotkey="x"
            label="louder"
            onPress={() =>
              stored($, kept => ({ volume: Math.min(100, kept.volume + VOLUME_STEP) }))
            }
          />
          <Text dimColor>{now.volume}%</Text>
        </Box>
        <Box gap={2}>
          <Button
            key="shuffle"
            plain
            hotkey="s"
            label={`shuffle ${now.isShuffled ? 'on' : 'off'}`}
            onPress={() => stored($, kept => ({ isShuffled: !kept.isShuffled }))}
          />
          <Button
            key="when"
            plain
            hotkey="w"
            label={now.when === 'working' ? 'shows while Claude works' : 'shows always'}
            onPress={() =>
              stored($, kept => ({
                when: kept.when === 'working' ? 'always' : 'working',
              }))
            }
          />
          <Button
            key="backdrop"
            plain
            hotkey="g"
            label={`backdrop ${now.hasBackdrop ? 'on' : 'off'}`}
            onPress={() => stored($, kept => ({ hasBackdrop: !kept.hasBackdrop }))}
          />
        </Box>
        <Box marginTop={1}>
          <Text dimColor>Under the prompt · the controls its row holds</Text>
        </Box>
        <Box columnGap={2} flexWrap="wrap">
          {CONTROLS.map(control => (
            <Button
              key={`control-${control.id}`}
              plain
              hotkey={control.hotkey}
              dimColor={!(isRowShown(now) && now.controls.includes(control.id))}
              label={`${isRowShown(now) && now.controls.includes(control.id) ? '●' : '○'} ${control.id}`}
              onPress={() =>
                shownControl(
                  $,
                  control.id,
                  !(isRowShown(now) && now.controls.includes(control.id)),
                )
              }
            />
          ))}
        </Box>
      </Box>
    )
  })