prompt-coach

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // 설문이 띠를 쓰는 동안에는 비켜 준다.
    if (e.props.hasSurvey || e.surface === 'mobile') {
      return next(e)
    }

    const settings = await current($)
    const t = textsOf(settings)
    const working = await read($, busy)
    const kept = await read($, original)
    const direction = await read($, note)
    const isTerminal = e.surface === 'terminal'
    const keys = showsKeys(settings, e.surface)
    const { Box, Button, Text } = $.ui.resolve(e)
    // 터미널은 꾸밈 없는 흐린 글자 버튼, 데스크톱은 테두리와 바탕이 있는 앱 기본 버튼이다.
    const look = isTerminal ? { plain: true as const, dimColor: true } : {}

    trace($, `band surface=${e.surface}`)

    if (working !== null) {
      return (
        <Box gap={1} alignItems="center">
          <Text color={BRAND}>✻</Text>
          <Text color={HINT}>{working}</Text>
        </Box>
      )
    }

    const actions: { key: ButtonId; label: string; hotkey: string; run: () => void }[] = [
      { key: 'template', label: t.template, hotkey: 't', run: () => void insertTemplate($) },
      { key: 'ask', label: t.ask, hotkey: 'q', run: () => void askGaps($, e.surface) },
      { key: 'refine', label: t.refine, hotkey: 'r', run: () => void refine($, e.surface) },
      { key: 'undo', label: t.undo, hotkey: 'u', run: () => void restore($) },
    ]
    const shown = actions.filter(one => settings.buttons[one.key] && (one.key !== 'undo' || kept !== null))

    return (
      <Box gap={isTerminal ? 2 : 1} alignItems="center" flexWrap="wrap">
        <Text color={BRAND}>✻</Text>
        {shown.map(one => (
          <Button key={one.key} label={one.label} {...look} {...(keys ? { hotkey: one.hotkey } : {})} onPress={one.run} />
        ))}
        <Box flexGrow={1} />
        {direction.trim() === '' ? null : <Text color={HINT}>{t.directionOn}</Text>}
        <Button
          key="settings"
          label={t.settings}
          plain
          dimColor
          {...(keys ? { hotkey: 's' } : {})}
          onPress={() => void openSettings($)}
        />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: SETTINGS }, async ($, e) => {
    const settings = await current($)
    const t = textsOf(settings)
    const active = await read($, tab)
    const { Box, Button, Link, Text } = $.ui.resolve(e)
    // 모바일 앱에 건네는 표에도 Input 이름은 있지만 아무것도 그리지 않는다. 그래서 화면 이름으로 가른다.
    const Input = e.surface === 'mobile' ? undefined : $.ui.resolve(e).Input
    const isTerminal = e.surface === 'terminal'
    const keys = showsKeys(settings, e.surface)
    // 고른 것은 바탕과 테두리가 있는 버튼, 나머지는 흐린 글자 버튼으로 그린다. 탭 줄도 같은 모양이다.
    const picked = (isPicked: boolean) => (isPicked ? {} : { plain: true as const, dimColor: true })

    const choice = <V extends string | number>(
      name: string,
      value: V,
      options: readonly { value: V; label: string }[],
      pick: (next: V) => Promise<unknown>,
    ) => (
      <Box key={`${name}-choices`} gap={1} flexWrap="wrap" alignItems="center">
        {options.map(option => (
          <Button
            key={`${name}-${option.value}`}
            label={option.label}
            {...picked(option.value === value)}
            onPress={() => void pick(option.value)}
          />
        ))}
      </Box>
    )

    const onOff = (name: string, value: boolean, pick: (next: boolean) => Promise<unknown>) =>
      choice(
        name,
        value ? 'on' : 'off',
        [
          { value: 'on', label: t.on },
          { value: 'off', label: t.off },
        ],
        next => pick(next === 'on'),
      )

    // 글자 칸. 칠 때는 상태를 쓰지 않고, 저장(적용)이나 Enter 에서만 쓴다. 쓰면 칸이 새로 그려져 한글 조합이 끊긴다.
    // 다시 그려도 그린 값이 그대로면 앱이 친 글을 살려 둔다. 모바일 앱에는 칸이 없어서 지금 값을 글로 보여 준다.
    const field = (name: string, value: string, placeholder: string, submitLabel: string, save: (next: string) => Promise<unknown>) =>
      Input === undefined ? (
        <Box key={`${name}-value`}>
          <Text color={HINT}>
            {value.trim() === '' ? t.none : value} · {t.mobileText}
          </Text>
        </Box>
      ) : (
        <Input
          key={name}
          value={value}
          placeholder={placeholder}
          submitLabel={submitLabel}
          onSubmit={(next: string) => void save(next.trim())}
        />
      )

    const block = (name: string, title: string, hint: string | undefined, control: RenderElement | null) => (
      <Box key={name} flexDirection="column">
        <Text bold>{title}</Text>
        {hint === undefined ? null : <Text color={HINT}>{hint}</Text>}
        {control === null ? null : (
          <Box key={`${name}-control`} marginTop={isTerminal ? 0 : 1}>
            {control}
          </Box>
        )}
      </Box>
    )

    let body: RenderElement[]

    if (active === 'ask') {
      body = [
        block(
          'maxQuestions',
          t.maxQuestionsLabel,
          t.maxQuestionsHint,
          choice(
            'maxQuestions',
            settings.maxQuestions,
            QUESTION_COUNTS.map(value => ({ value, label: String(value) })),
            value => savePrefs($, all => ({ ...all, maxQuestions: value })),
          ),
        ),
        block(
          'askStyle',
          t.askStyleLabel,
          t.askStyleHint,
          field('askStyle', settings.askStyle, t.askStylePlaceholder, t.save, value => saveText($, 'askStyle', value)),
        ),
        block('askModel', t.askModelLabel, t.askModelHint(await $.session.model()), null),
      ]
    } else if (active === 'refine') {
      body = [
        block(
          'refineModel',
          t.refineModelLabel,
          t.refineModelHint,
          choice(
            'refineModel',
            settings.refineModel,
            MODELS.map(value => ({ value, label: value === 'session' ? t.sessionModel : value })),
            value => savePrefs($, all => ({ ...all, refineModel: value })),
          ),
        ),
        block(
          'refineEffort',
          t.effortLabel,
          settings.refineModel === 'haiku' ? t.effortHaiku : t.effortHint,
          choice(
            'refineEffort',
            settings.refineEffort,
            EFFORTS.map(value => ({ value, label: value })),
            value => savePrefs($, all => ({ ...all, refineEffort: value })),
          ),
        ),
        block(
          'refineStyle',
          t.refineStyleLabel,
          t.refineStyleHint,
          field('refineStyle', settings.refineStyle, t.refineStylePlaceholder, t.save, value => saveText($, 'refineStyle', value)),
        ),
        block(
          'minDraft',
          t.minDraftLabel,
          t.minDraftHint,
          choice(
            'minDraft',
            settings.minDraft,
            MIN_DRAFTS.map(value => ({ value, label: t.chars(value) })),
            value => savePrefs($, all => ({ ...all, minDraft: value })),
          ),
        ),
      ]
    } else if (active === 'template') {
      const lines = await templateLines($, settings)
      const state = settings.template === undefined ? t.templateBuiltIn : t.templateCustom

      body = [
        block('template', t.templateLabel, t.templateHint, <Text color={HINT}>{state}</Text>),
        <Box key="tpl-lines" flexDirection="column" gap={isTerminal ? 0 : 1}>
          {lines.map((line, index) =>
            Input === undefined ? (
              <Box key={`tpl-text-${index}`}>
                <Text>{line === '' ? ' ' : line}</Text>
              </Box>
            ) : (
              <Box key={`tpl-row-${index}`} gap={1} alignItems="center">
                <Input
                  key={`tpl-line-${index}`}
                  value={line}
                  placeholder={t.linePlaceholder}
                  onInput={(next: string) => void typedLines.set(index, next)}
                  onSubmit={(next: string) => {
                    typedLines.set(index, next)
                    void saveTemplate($)
                  }}