sidekick

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const p = ((await $.state.get(active)).value ?? null)
    if (!p || e.props.hasSurvey || !(((await $.state.get(isTalk)).value ?? false))) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    const speaking = ((await $.state.get(isSpeaking)).value ?? false)
    const hearing = ((await $.state.get(isListening)).value ?? false)
    const partial = ((await $.state.get(heard)).value ?? '')
    const muted = ((await $.state.get(isMuted)).value ?? false)
    const asked = ((await $.state.get(question)).value ?? null)
    const status = speaking
      ? `🔊 ${p.name} is speaking… talk over to interrupt`
      : e.props.isWorking
        ? `${p.glyph} ${p.name} is working… say "stop" to cancel`
        : hearing
          ? `🎙 listening…`
          : `${p.glyph} ${p.name} is ready`
    return (
      <Box flexDirection="column">
        {asked && (
          <Text color={p.color}>
            ❓ {asked.text} {asked.options.map((o, i) => `  ${i + 1}) ${o}`).join('')}
          </Text>
        )}
        <Box flexDirection="row" columnGap={2}>
          <Text color={p.color}>{status}</Text>
          {hearing && partial && <Text dimColor>{partial}</Text>}
          {speaking && <Button key="skip" label="skip" hotkey="s" plain onPress={() => hush($)} />}
          {!speaking && !hearing && !e.props.isWorking && (
            <Button key="listen" label="listen" hotkey="l" plain onPress={() => void startTalk($)} />
          )}
          <Button key="mute" label={muted ? 'speak' : 'mute'} hotkey="m" plain onPress={() => toggleMute($)} />
          <Button key="end" label="end talk" hotkey="x" plain onPress={() => toggleTalk($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: 'sidekick' }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const list: Persona[] = (await $.state.get(roster)).value ?? []
    const cur = ((await $.state.get(active)).value ?? null)
    const muted = ((await $.state.get(isMuted)).value ?? false)
    const talk = ((await $.state.get(isTalk)).value ?? false)
    return (
      <Box flexDirection="column">
        {list.slice(0, 9).map((p, i) => (
          <Box flexDirection="row" columnGap={1}>
            <Button
              key={`use-${p.id}`}
              label={`${p.glyph} ${p.name}`}
              hotkey={String(i + 1)}
              plain
              dimColor={cur?.id !== p.id}
              onPress={() => setActive($, p)}
            />
            <Text dimColor>{cur?.id === p.id ? `● ${p.tagline}` : p.tagline}</Text>
          </Box>
        ))}
        <Text> </Text>
        <Box flexDirection="row" columnGap={3}>
          <Button key="off" label="off" hotkey="0" plain onPress={() => setActive($, null)} />
          <Button key="mute" label={muted ? 'speak' : 'mute'} hotkey="m" plain onPress={() => toggleMute($)} />
          <Button key="talk" label={talk ? 'end talk' : 'talk'} hotkey="t" plain onPress={() => toggleTalk($)} />
        </Box>
        <Text> </Text>
        <Text dimColor>/sidekick new {'<describe someone>'} to add one</Text>
      </Box>
    )
  })