explain-it

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    if (await read($, hasChanges)) {
      return (
        <Box>
          <Text color="cyan">🧩 Not sure what just happened? </Text>
          <Button key="explain" label="Explain it" hotkey="e" onPress={() => start($, 'now')} />
          <Button key="dismiss" label="No thanks" onPress={() => update($, hasChanges, () => false)} />
        </Box>
      )
    }
    if (await read($, hasRecap)) {
      return (
        <Box>
          <Text color="cyan">🧩 Want a recap of what Claude did last time? </Text>
          <Button key="recap" label="Recap" hotkey="r" onPress={() => start($, 'last')} />
          <Button key="dismiss" label="No thanks" onPress={() => update($, hasRecap, () => false)} />
        </Box>
      )
    }
    return next(e)
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const s = await read($, status)
    const all = await read($, saved)
    const i = Math.min(await read($, viewing), all.length - 1)
    const shown = all[i]
    // A thin line between sections, as wide as the pane allows.
    // The terminal draws ─ one letter wide; the desktop's font draws it wider,
    // so the same line needs fewer of them there to stay on one row.
    const width = (e.viewport?.columns ?? 40) - 6
    const rule = '─'.repeat(Math.max(10, Math.min(e.surface === 'terminal' ? 40 : 22, width)))

    if (s.kind !== 'idle' || !shown) {
      return (
        <Box flexDirection="column" padding={1}>
          <Text bold color="cyan">🧩 Explain it</Text>
          <Text dimColor>
            {s.kind === 'writing'
              ? '✨ Putting it in plain English…'
              : s.kind === 'failed'
                ? s.message
                : 'Nothing explained yet. Type /explain-it, or /explain-it last to recap your previous session.'}
          </Text>
          {all.length > 0 && <Button key="history" label="📖 Saved explanations" onPress={() => void showHistory($)} />}
        </Box>
      )
    }

    return (
      <Box flexDirection="column" paddingX={1}>
        <Text bold color="cyan">🧩 {shown.label}</Text>
        <Box marginBottom={1}><Text dimColor>
          {shown.project} · {when(shown.at)} · {i + 1} of {all.length}
        </Text></Box>
        {sections(shown.text).map(({ title, body }, n) => {
          const look = STYLE.find(st => st.match.test(title)) ?? STYLE[STYLE.length - 1]
          return (
            <Box key={`s${n}`} flexDirection="column">
              {n > 0 && <Text dimColor>{rule}</Text>}
              <Text bold color={look.color}>{look.emoji} {title}</Text>
              <Box marginBottom={1}><Text>{body}</Text></Box>
            </Box>
          )
        })}
        <Text dimColor>📚 Words you've learned so far: {await read($, learnedCount)}</Text>
        <Box>
          {i > 0 && <Button key="older" label="◀ Older" onPress={() => update($, viewing, v => Math.max(0, v - 1))} />}
          {i < all.length - 1 && (
            <Button key="newer" label="Newer ▶" onPress={() => update($, viewing, v => Math.min(all.length - 1, v + 1))} />
          )}
          <Button key="again" label="🔄 Explain latest" onPress={() => start($, 'now')} />
        </Box>
      </Box>
    )
  })