coachline

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    width = e.viewport?.columns ?? width
    const s = await read($, state)
    const err = await read($, error)
    const note = await read($, msg)
    if (!s) return <Text dimColor>{err || 'coachline: loading…'}</Text>

    const header = (
      <Box key="header">
        <Text bold>coachline · this thread · {s.entries.length} prompt{s.entries.length === 1 ? '' : 's'}</Text>
        <Text>{'  '}</Text>
        <Text color={s.ai ? 'green' : 'gray'}>{s.ai ? '● Claude on' : '○ Claude off'}</Text>
      </Box>
    )
    const footer = [
      err ? <Text key="err" color="red">{err}</Text> : null,
      note ? <Text key="msg" dimColor>{note}</Text> : null,
      s.notice && !s.entries.length ? <Text key="notice" dimColor>{s.notice}</Text> : null,
    ]
    if (!s.entries.length) {
      return (
        <Box flexDirection="column">
          {header}
          <Text dimColor>Send a prompt: coachline coaches it here.</Text>
          {footer}
        </Box>
      )
    }

    const at = await read($, sel)
    const i = at < 0 || at >= s.entries.length ? s.entries.length - 1 : at
    const cur: PaneEntry | undefined = s.entries[i]
    if (!cur) return <Text dimColor>coachline: loading…</Text>
    const isFull = await read($, full)
    const pats = await read($, showPatterns)

    const copy = async () => {
      const r = await $.ui.copy({ text: cur.after, surface: e.surface })
      await update($, msg, () => (r.isCopied ? `copied the enhanced prompt (${cur.after.length} characters)` : NO_CLIPBOARD))
    }
    const analyse = async () => {
      const r = await run($, s.session ? ['--enhance', cur.key, '--session', s.session] : ['--enhance', cur.key])
      await update($, msg, () => (r.ok ? r.out.trim() : r.err))
      await refresh($)
    }
    const mark = async (status: 'dismissed' | 'adopted', id: string) => {
      const r = await run($, ['--mark', status, id])
      await update($, msg, () => (r.ok ? r.out.trim() : r.err))
      await refresh($)
    }
    const research = async () => {
      const r = await run($, s.session ? ['--research', cur.key, '--session', s.session] : ['--research', cur.key])
      await update($, msg, () => (r.ok ? r.out.trim() : r.err))
    }
    const install = async () => {
      if (!s.skill) return
      const r = await run($, ['--install', s.skill])
      await update($, msg, () => (r.ok ? r.out.trim() : r.err))
    }

    const line = (l: PaneLine, n: number) => {
      const [section, kind, text, right, action] = l
      if (kind === 'blank') return <Text key={`l${n}`}> </Text>
      if (kind === 'head') {
        return (
          // the label or button sits right after the title, never against the pane's right edge, where the pane's own close mark is
          <Box key={`l${n}`}>
            <Text bold color={HEAD_COLOR[section] ?? 'blueBright'}>{text}</Text>
            <Text>{'  '}</Text>
            {action === 'copy' ? <Button key="copy" label="Copy" onPress={copy} />
              : right ? <Text dimColor>{right}</Text> : null}
          </Box>
        )
      }
      if (kind === 'itemacts' && action?.startsWith('item:')) {
        const id = action.slice('item:'.length)
        return (
          <Box key={`l${n}`}>
            <Text>{'  '}</Text>
            <Button key={`hide:${id}`} label="Hide" onPress={() => mark('dismissed', id)} />
            <Text>{'  '}</Text>
            <Button key={`use:${id}`} label="I use this" onPress={() => mark('adopted', id)} />
          </Box>
        )
      }
      if (action === 'enter') return <Button key="whole" label="Show the whole prompt" onPress={() => update($, full, () => true)} />
      return <Text key={`l${n}`} color={COLOR[kind]} dimColor={kind === 'bluedim' || kind === 'meta'} bold={kind === 'prompt'}>{text}</Text>
    }

    const card = isFull
      ? [<Text key="fullhead" bold>Your prompt</Text>, <Text key="fulltext" color="whiteBright">{cur.text}</Text>,
         <Button key="less" label="Show less" onPress={() => update($, full, () => false)} />]
      : cur.lines.map(line)
    // watch.py's card names keys ("press e"); here one Analyse button stands for them, whatever the prompt's state
    const canAnalyse = !cur.after && cur.state !== 'off'

    return (
      <Box flexDirection="column">
        {header}
        <Box flexDirection="column" marginY={1}>{card}</Box>
        {canAnalyse && <Button key="analyse" label={cur.state === 'pending' ? 'Analyse again' : 'Analyse'} onPress={analyse} />}
        {s.research && !!cur.after && cur.state !== 'off' && <Button key="research" label="Look again on the web" onPress={research} />}
        {s.patterns.length > 0 && (
          <Box flexDirection="column">
            <Button key="patterns" label={pats ? 'Hide patterns' : `${s.patterns.length} pattern${s.patterns.length === 1 ? '' : 's'} from your past chats`}
              onPress={() => update($, showPatterns, v => !v)} />
            {pats && s.patterns.map((p, n) => <Text key={`p${n}`} color="blueBright">{p}</Text>)}
            {s.skill && <Button key="skill" label={`Install the drafted skill /${s.skill}`} onPress={install} />}
          </Box>
        )}
        <Text dimColor>Prompts in this thread</Text>
        {s.entries.map((x, n) => (
          <Button key={`e${n}`} label={`${n === i ? '›' : ' '} ${x.glyph} ${x.stamp}  ${x.text.replace(/\s+/g, ' ').slice(0, Math.max(10, width - 16))}`}
            onPress={() => update($, sel, () => n)} />
        ))}
        {footer}
      </Box>
    )
  })