grammar-guard

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const c = await read($, check)
    const mode = await read($, autoMode)
    const running = await read($, busy)
    const msg = await read($, note)
    const before = await read($, undo)
    const issues = c ? c.issues : []

    const fixIssue = (it: Issue, to: string) =>
      withBusy($, 'Fix', async () => {
        const box = await $.prompt.read()
        const cur = c ? placeIssues({ ...c, issues: [it] }, box.text)[0] : undefined
        if (!cur) throw new Error('the text changed; wait for the next check')
        await replaceBox($, box.text.slice(0, cur.start) + to + box.text.slice(cur.end))
      })

    const autocorrect = () =>
      withBusy($, 'Autocorrect', async () => {
        const box = await $.prompt.read()
        if (!box.text.trim()) throw new Error('the prompt box is empty')
        const r = await runFix($, box.text)
        if (typeof r === 'string') throw new Error(r)
        if (!r.count) {
          await update($, note, () => 'Autocorrect: nothing to fix.')
          return
        }
        await replaceBox($, r.text)
        await update($, note, () => `Autocorrect: ${r.count} change(s) · u undoes`)
      })

    const draft = (level: Proposal['level']) =>
      withBusy($, `Draft (${level})`, async () => {
        const box = await $.prompt.read()
        await replaceBox($, await makeDraft($, level, box.text))
        await update($, note, () => `Draft (${level}) is in the box · u undoes`)
      })

    // The word tools live in the band, not a pane: a pane only gets the keyboard over an
    // empty prompt box, and here the box always holds text, so its keys went into the box.
    const openWord = () =>
      withBusy($, 'Word', async () => {
        const box = await $.prompt.read()
        const target = wordAt(box.text, box.cursor)
        if (!target) throw new Error('put the cursor on a word first')
        await update($, word, () => target)
        await update($, wordResult, () => null)
      })

    const closeWord = async () => {
      await update($, word, () => null)
      await update($, wordResult, () => null)
    }

    const restore = () =>
      withBusy($, 'Undo', async () => {
        if (before === null) return
        await $.prompt.fill({ text: before, mode: 'replace' })
        await update($, undo, () => null)
        await checkBox($)
      })

    // B: the word tools, for the word under the cursor, in place of the band's usual rows.
    const target = await read($, word)
    if (target) {
      const res = await read($, wordResult)
      const lang = await nativeLang($)

      const lookup = (tool: WordTool) =>
        withBusy($, WORD_TOOL_NAMES[tool], async () => {
          const box = await $.prompt.read()
          await update($, wordResult, () => null)
          const r = await lookupWord($, tool, target.word, box.text)
          await update($, wordResult, () => r)
        })

      const pick = (choice: string) =>
        withBusy($, 'Replace', async () => {
          const box = await $.prompt.read()
          const isSame = box.text.slice(target.start, target.end) === target.word
          const text = isSame
            ? box.text.slice(0, target.start) + choice + box.text.slice(target.end)
            : swapWord(box.text, target.word, choice)
          await closeWord()
          await replaceBox($, text)
        })

      return (
        <Box flexDirection="column">
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            <Text bold>{target.word}</Text>
            <Button key="tr" label={`Translate ${langPair(lang)}`} hotkey="t" onPress={() => void lookup('tr')} />
            <Button key="syn" label="Synonyms" hotkey="s" onPress={() => void lookup('syn')} />
            <Button key="project" label="Project term" hotkey="p" onPress={() => void lookup('project')} />
            <Button key="back" label="Back" hotkey="b" dimColor onPress={() => void closeWord()} />
            {running || msg ? <Text dimColor>{running ? `${running}…` : msg}</Text> : null}
          </Box>
          {res ? (
            <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
              <Text dimColor>{res.items.length ? `${res.title}:` : `${res.title}: ${res.detail ?? 'no results'}`}</Text>
              {res.items.map((it, i) => (
                <Button
                  key={`pick-${i}`}
                  label={it}
                  hotkey={i < 9 ? String(i + 1) : undefined}
                  onPress={() => void pick(it)}
                />
              ))}
            </Box>
          ) : null}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          {issues.length > 0 ? (
            <Text color="error">{issues.length} issue(s):</Text>
          ) : (
            <Text dimColor>{c ? `no issues · ${c.engine}` : 'grammar-guard'}</Text>
          )}
          {issues.slice(0, 3).map((it, i) =>
            it.replacements[0] !== undefined ? (
              <Button
                key={`fix-${i}`}
                label={`${it.word}→${it.replacements[0] || '(remove)'}`}
                hotkey={String(i + 1)}
                onPress={() => void fixIssue(it, it.replacements[0] ?? '')}
              />
            ) : (
              <Text dimColor>{it.word}?</Text>
            ),
          )}
        </Box>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          <Button key="autocorrect" label="Autocorrect" hotkey="a" onPress={() => void autocorrect()} />
          <Button key="light" label="Light" hotkey="l" onPress={() => void draft('light')} />
          <Button key="medium" label="Medium" hotkey="m" onPress={() => void draft('medium')} />
          <Button key="complete" label="Rewrite" hotkey="r" onPress={() => void draft('complete')} />
          <Button key="word" label="Word" hotkey="w" onPress={() => void openWord()} />
          {before !== null ? <Button key="undo" label="Undo" hotkey="u" onPress={() => void restore()} /> : null}
          <Button
            key="autofix"
            label={`Auto-fix: ${mode}`}
            hotkey="x"
            dimColor={mode === 'off'}
            onPress={() => void setAutoMode($, mode === 'off' ? 'on' : mode === 'on' ? 'ai' : 'off')}
          />
          {running || msg ? <Text dimColor>{running ? `${running}…` : msg}</Text> : null}
        </Box>
      </Box>
    )
  })