handoff

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const Input = 'Input' in ui ? ui.Input : undefined
    const p = await read($, picker)
    const inHerdr = (await $.env.get('HERDR_PANE_ID')) !== undefined
    const busy = p.phase === 'working'

    const go = (where: Where) => () => {
      void launch($, where)
    }

    return (
      <Box flexDirection="column" gap={1}>
        {Input && <Input
          key="task"
          label="Task: "
          placeholder="what the new session should do (blank: infer from the conversation)"
          value={p.task}
          onInput={(value: string) => void update($, picker, s => ({ ...s, task: value }))}
          onSubmit={go(inHerdr ? 'pane' : 'bg')}
          submitLabel={inHerdr ? 'new pane' : 'background'}
        />}
        <Box flexDirection="row" gap={2}>
          <Text dimColor>Context:</Text>
          <Button key="mode-brief" plain dimColor={p.mode !== 'brief'}
            onPress={() => void update($, picker, s => ({ ...s, mode: 'brief' as Mode }))}>
            {p.mode === 'brief' ? 'Brief (selected)' : 'Brief'}
          </Button>
          <Button key="mode-fork" plain dimColor={p.mode !== 'fork'}
            onPress={() => void update($, picker, s => ({ ...s, mode: 'fork' as Mode }))}>
            {p.mode === 'fork' ? 'Full fork (selected)' : 'Full fork'}
          </Button>
        </Box>
        {busy ? (
          <Text>{p.status}</Text>
        ) : (
          <Box flexDirection="row" gap={2} flexWrap="wrap">
            {inHerdr && <Button key="pane" variant="primary" autoFocus onPress={go('pane')}>New pane</Button>}
            {inHerdr && <Button key="tab" onPress={go('tab')}>New tab</Button>}
            <Button key="bg" autoFocus={inHerdr ? undefined : true} onPress={go('bg')}>Background</Button>
            <Button key="copy" onPress={go('copy')}>Copy brief</Button>
          </Box>
        )}
        {!busy && p.status !== '' && <Text color={p.phase === 'error' ? 'red' : undefined}>{p.status}</Text>}
        <Text dimColor>Esc cancels</Text>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const kids = await read($, children)
    if (e.props.hasSurvey || kids.length === 0) return next(e)
    await read($, checkedAt)
    const now = await $.clock.now()
    const { Box, Text, Button } = $.ui.resolve(e)

    // Click only, no hotkeys: a band hotkey would take a digit typed into an
    // empty prompt. Plain and dim, underlined under the pointer (plain wins over variant).
    const link = (scope: string) => ({ plain: true as const, dimColor: true, variant: 'primary' as const, hover: { scope, underline: true } })

    return (
      <Box flexDirection="column" borderStyle="round" paddingX={1}>
        {kids.map(c => {
          const isRunning = c.phase === 'running'
          const canCompare = isRunning && (c.state === 'idle' || c.state === 'done')
          const label = c.phase === 'running' ? c.state : c.step
          const color = c.phase === 'failed' ? 'red' : c.state.startsWith('waiting') || c.state === 'blocked' ? 'yellow' : c.state === 'done' ? 'green' : undefined
          const place = c.where === 'bg' ? `background ${c.id ?? ''}` : c.pane ?? ''
          return (
            <Box flexDirection="row" gap={1}>
              <Text color="gray">handoff</Text>
              <Text wrap="truncate-end">{c.name}</Text>
              <Text color={color} wrap="truncate-end">{label}</Text>
              {isRunning && <Text color="gray">{age(now - c.startedAt)} · {place}</Text>}
              {isRunning && <Button key={`jump:${c.key}`} {...link(`jump:${c.key}`)} onPress={() => void jump($, c)}>jump</Button>}
              {canCompare && <Button key={`compare:${c.key}`} {...link(`compare:${c.key}`)} onPress={() => void compare($, c)}>compare</Button>}
            </Box>
          )
        })}
      </Box>
    )
  })