ctx-relay

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== NOTES) return next(e)
    return drawNotes($, e)
  })

async function drawNotes($: EngineInterface, e: RenderInput<'Pane'>): Promise<RenderElement> {
  const { Box, Button, Text } = $.ui.resolve(e)
  const n = notes
  const close = <Button key="close" plain hotkey="q" label="close" onPress={() => $.ui.close({ id: NOTES })} />
  if (n === null || n.kind === 'none') {
    return (
      <Box flexDirection="column" backgroundColor={N.PANE} paddingX={1} paddingY={1}>
        <Text color={N.TEXT}>{n?.reason ?? 'Not loaded.'}</Text>
        <Box marginTop={1}>{close}</Box>
      </Box>
    )
  }
  const now = await $.clock.now()
  // 區塊標題：符號染語意色、標籤亮白、數字前置，細線吃剩下的寬（扣 pane 左右 padding；不夠 3 格就不畫）
  const head = (key: string, sym: string, symColor: string, label: string, count?: number) => {
    const title = `${sym} ${count === undefined ? '' : `${count} `}${label} `
    const fill = e.props.bodyColumns - 2 - title.length
    return (
      <Box key={key} flexDirection="row" marginTop={1}>
        <Text color={symColor} bold>{`${sym} `}</Text>
        <Text color={N.TITLE} bold>{`${count === undefined ? '' : `${count} `}${label}`}</Text>
        {fill >= 3 ? <Text color={N.RULE}>{` ${'─'.repeat(fill)}`}</Text> : <Text>{''}</Text>}
      </Box>
    )
  }
  const para = (key: string, text: string, color = N.TEXT) => (
    <Box key={key} paddingLeft={2}><Text color={color} wrap="wrap">{text}</Text></Box>
  )
  const field = (key: string, label: string, text: string) => (
    <Box key={key} flexDirection="row">
      <Box width={9} flexShrink={0}><Text color={N.MUTED}>{label}</Text></Box>
      <Box flexGrow={1} flexShrink={1}><Text color={N.TEXT} wrap="wrap">{text}</Text></Box>
    </Box>
  )
  const tab = (view: NotesView, hotkey: string, label: string) => (
    <Box key={`tab-${view}`} backgroundColor={notesView === view ? N.CARD : undefined} paddingX={1}>
      <Button key={`view-${view}`} plain hotkey={hotkey} label={label} dimColor={notesView !== view} onPress={() => showNotes($, view)} />
    </Box>
  )
  const meta = [n.from === '' ? '' : `from ${n.from}`, n.how, n.thin === '' ? '' : `thin: ${n.thin}`].filter(x => x !== '').join(' · ')
  const body: RenderElement[] = [
    <Box key="title" flexDirection="row" backgroundColor={N.CARD} paddingX={1}>
      <Text color={N.TITLE} bold wrap="truncate-end">{n.branch === '' ? n.name : n.branch}</Text>
      <Box flexGrow={1} />
      <Text color={N.MUTED}>{`  ${ago(now - n.mtimeMs)}`}</Text>
    </Box>,
    <Box key="meta" paddingX={1}><Text color={N.MUTED} wrap="truncate-end">{meta}</Text></Box>,
    <Box key="tabs" flexDirection="row" marginTop={1}>
      {tab('resume', 's', 'status')}
      {tab('evidence', 'v', 'evidence')}
      <Box flexGrow={1} />
      {close}
    </Box>,
  ]
  if (notesView === 'resume') {
    body.push(head('next-h', '▶', N.ACCENT, 'NEXT', n.next.length + n.moreNext))
    if (n.next.length === 0) body.push(para('next-none', 'No next step written; read the gaps and goal first.', N.MUTED))
    n.next.forEach((t, i) => body.push(
      <Box key={`next-${i}`} flexDirection="row">
        <Box width={2} flexShrink={0}><Text color={N.ACCENT}>{'▌'}</Text></Box>
        <Box width={3} flexShrink={0}><Text color={N.ACCENT} bold>{`${i + 1}.`}</Text></Box>
        <Box flexGrow={1} flexShrink={1}><Text color={i === 0 ? N.TITLE : N.TEXT} bold={i === 0} wrap="wrap">{t}</Text></Box>
      </Box>,
    ))
    if (n.moreNext > 0) body.push(<Box key="next-more" paddingLeft={5}><Text color={N.MUTED} wrap="wrap">{`+${n.moreNext} more in the handoff file (path on evidence)`}</Text></Box>)
    if (n.dont.length > 0) {
      body.push(head('dont-h', '✗', N.DANGER, "DON'T", n.dont.length))
      body.push(
        <Box key="dont" paddingLeft={2}>
          <Text wrap="wrap">{n.dont.flatMap((d, i) => [
            ...(i > 0 ? [<Text key={`ds-${i}`} color={N.MUTED}>{' · '}</Text>] : []),
            <Text key={`d-${i}`} color={N.TEXT}>{d}</Text>,
          ])}</Text>
        </Box>,
      )
    }
    body.push(head('gap-h', '▲', N.WARNING, 'GAPS'))
    body.push(n.gaps === '' ? para('gap', 'None recorded.', N.MUTED) : para('gap', n.gaps))
    body.push(<Box key="ctx-gap" marginTop={1} />)
    if (n.goal !== '') body.push(field('goal', 'goal', n.goal))
    if (n.task !== '' || n.phase !== '') body.push(field('phase', 'phase', [n.phase, n.task === '' ? '' : `(${n.task})`].filter(x => x !== '').join(' ')))
    body.push(field('files', 'files', `${n.files} listed in the handoff${n.dirty === '' ? '' : ` · dirty: ${n.dirty}`}`))
  } else {
    body.push(head('ok-h', '✓', N.SUCCESS, 'VERIFIED'))
    if (n.verified !== '') body.push(para('ok', n.verified))
    else if (n.raw.length > 0) {
      body.push(para('raw-h', 'Check notes (not classified):', N.MUTED))
      n.raw.forEach((t, i) => body.push(para(`raw-${i}`, t)))
    } else body.push(para('ok', 'No verified items recorded.', N.MUTED))
    body.push(head('src-h', '·', N.MUTED, 'SOURCE'))
    body.push(field('src-file', 'file', `${n.name}.md`))
    body.push(field('src-path', 'path', n.path))
    if (n.from !== '') body.push(field('src-from', 'session', n.from))
    body.push(field('src-how', 'how', n.how))
    if (n.dirty !== '') body.push(field('src-dirty', 'dirty', n.dirty))
  }
  return <Box flexDirection="column" backgroundColor={N.PANE} paddingX={1} paddingY={1}>{body}</Box>
}