persian-voice

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const [l, p, u, settings] = await Promise.all([read($, live), read($, prefs), read($, undo), $.settings.read()])
    const { Box, Button, Text } = $.ui.resolve(e)

    if (!l || isTentative) {
      const isVoiceOn = (settings.voice as { enabled?: boolean } | undefined)?.enabled === true
      return (
        <Box flexDirection="column">
          {isVoiceOn && p.holdSpace && (
            <Text color={AMBER}>⚠ Built-in /voice is on and takes Space: run /voice off (once) to use Persian hold-space.</Text>
          )}
          <Box gap={1}>
            {p.holdSpace && <Text color={RED}>🎙</Text>}
            {p.holdSpace && <Text dimColor>Hold space to talk</Text>}
            {/* With a shortcut, its chord presses this Button from the prompt (the Button must be drawn). */}
            <Button key="talk" label={p.shortcut ? `🎙 Talk (${p.shortcut})` : '🎙 Talk'} action={ACTION} onPress={() => press($)} />
            <Button key="mode" label={`✨ ${MODES[p.mode].label}`} onPress={() => setMode($)} />
            <Button key="send" label={p.autoSend ? '⏎ Auto-send' : '⏎ Manual send'} onPress={() => savePrefs($, { autoSend: !p.autoSend })} />
            <Button key="settings" label="⚙ Settings" onPress={() => openSettings($)} />
            {u && <Button key="undo" label="↩ Use plain translation" onPress={() => usePlain($)} />}
          </Box>
        </Box>
      )
    }

    const phase = isPolishing ? 'polish' : isFinishing ? 'finish' : 'rec'
    const color = phase === 'rec' ? RED : phase === 'finish' ? AMBER : ORANGE
    const spin = SPIN[frame % SPIN.length]
    const head =
      phase === 'rec'
        ? `${frame % 6 < 3 ? '●' : '○'} REC ${clockText(l.ms)}`
        : phase === 'finish'
          ? `${spin} Finishing translation…`
          : `${spin} Polishing · ${polishLabel}…`
    const meter = levels.map(v => BARS[Math.round(Math.min(1, v) * 8)]).join('').padStart(16, ' ')
    const byKey = !isSpaceHold // started by the shortcut, the button or /fa
    const hint =
      phase !== 'rec'
        ? byKey ? '' : 'type a letter to cancel'
        : !byKey
          ? isTapMode
            ? 'tap space to finish · a letter cancels'
            : 'release space to finish · a letter cancels'
          : isHeld
            ? `release ${p.shortcut ?? 'the key'} to finish`
            : `${p.shortcut ? `${p.shortcut} or ` : ''}/fa rec to finish`
    return (
      <Box flexDirection="column" borderStyle="round" borderColor={color} paddingX={1}>
        <Box gap={2}>
          <Text color={color} bold>{head}</Text>
          {phase === 'rec' && <Text color={GREEN}>{meter}</Text>}
          <Text dimColor>{hint}</Text>
        </Box>
        <Text bold wrap="truncate-start">{l.fa || 'Listening…'}</Text>
        <Text dimColor wrap="truncate-start">→ {l.en || '…'}</Text>
        {/* Drawn while a key is held too: the shortcut's repeats, or held Space's `space space` chord,
            reach press() through this Button. */}
        <Box gap={2}>
          {/* Not a visible choice: the shortcut and held Space press this Button through ACTION. */}
          {phase === 'rec' && (!byKey || p.shortcut) && <Button key="hold" label="🎙" plain action={ACTION} onPress={() => press($)} />}
          {/* Finish and send in one click, whatever the auto-send setting says (JEV's hold-back still applies). */}
          {phase === 'rec' && <Button key="sendnow" label="⏎ Send" onPress={() => { sendNow = true; isStopping = true }} />}
          {/* In every phase: until the text is in the box (or sent), a click discards it. */}
          <Button key="cancel" label="✕ Cancel" onPress={() => abort($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: SETTINGS }, async ($, e) => {
    const p = await read($, prefs)
    const els = $.ui.resolve(e)
    if (!('Select' in els) || !('Input' in els)) {
      const { Text } = els // a surface without pickers: show the commands instead
      return <Text>{HELP}</Text>
    }
    const { Box, Button, Input, Select, Text } = els
    const LABEL = 18
    const onOff = (isOn: boolean) => (isOn ? '● On ' : '○ Off')
    return (
      <Box flexDirection="column" paddingX={1}>
        <Text bold color={ORANGE}>How to start a recording</Text>
        <Box gap={1}>
          <Box width={LABEL}><Text>Hold Space</Text></Box>
          <Button key="space" label={onOff(p.holdSpace)} onPress={() => savePrefs($, { holdSpace: !p.holdSpace })} />
          <Text dimColor>{p.holdSpace ? 'hold Space to talk, release to finish' : 'Space only types'}</Text>
        </Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Shortcut</Text></Box>
          {p.shortcut && <Text bold>{p.shortcut}</Text>}
          {p.shortcut && <Button key="unbind" label="Remove" onPress={() => shortcutFromDialog($, 'off')} />}
          {!p.shortcut && <Input key="shortcut" placeholder="type one, e.g. ctrl+x v, then Enter" onSubmit={v => shortcutFromDialog($, v)} />}
        </Box>
        <Box paddingLeft={LABEL + 1}>
          <Text dimColor>Press the shortcut to start, and again to stop.</Text>
        </Box>

        <Box marginTop={1}><Text bold color={ORANGE}>What happens to your words</Text></Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Cleanup mode</Text></Box>
          <Select
            key="mode"
            options={MODE_ORDER.map(m => ({ value: m, label: MODES[m].label }))}
            value={p.mode}
            onSelect={v => setMode($, v as Mode)}
          />
        </Box>
        <Box paddingLeft={LABEL + 1}>
          <Text dimColor wrap="wrap">{MODES[p.mode].about}</Text>
        </Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Auto-send</Text></Box>
          <Button key="send" label={onOff(p.autoSend)} onPress={() => savePrefs($, { autoSend: !p.autoSend })} />
          <Text dimColor>{p.autoSend ? 'sent as soon as you finish' : 'goes into the prompt box; you press Enter'}</Text>
        </Box>

        <Box marginTop={1}><Text bold color={ORANGE}>Microphone and words</Text></Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Speech engine</Text></Box>
          <Select
            key="engine"
            options={Object.entries(ENGINES).map(([value, label]) => ({ value, label }))}
            value={p.engine}
            onSelect={v => savePrefs($, { engine: v as Engine })}
          />
        </Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Microphone</Text></Box>
          <Select key="mic" options={micOptions} value={p.mic} onSelect={v => savePrefs($, { mic: v })} />
        </Box>
        <Box gap={1}>
          <Box width={LABEL}><Text>Word list</Text></Box>
          <Text dimColor wrap="wrap">{wordsInfo}</Text>
        </Box>

        <Box marginTop={1}>
          <Text dimColor>Tab moves · Enter changes · Esc closes · saved for all projects · /fa help lists commands</Text>
        </Box>
      </Box>
    )
  })