ccmod-chronicle

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    const el = $.ui.resolve(e)
    return renderPane(el, viewModel(await $.clock.now()), handlersFor($))
  })

export function renderPane(el, model, h) {
  const { Box } = el
  if (model.detail) return renderDetail(el, model, h)
  return Box({
    flexDirection: 'column',
    rowGap: 1,
    children: [tabRow(el, model, h), statusLine(el, model, h), ...body(el, model, h), aiBlock(el, model, h)].filter(Boolean),
  })
}

function renderDetail(el, model, h) {
  const { Box, Text, Code } = el
  const { t } = model
  const f = model.detail
  const details = f.details || []
  const shown = details.slice(0, DETAIL_MAX).map((d) => Text({ children: [clean('  • ' + d)] }))
  if (details.length > DETAIL_MAX) shown.push(Text({ dimColor: true, children: [t('more', { n: details.length - DETAIL_MAX })] }))
  return Box({
    flexDirection: 'column',
    rowGap: 1,
    children: [
      detailActions(el, t, f, h),
      f.isResolved ? Text({ color: 'success', children: [t('resolved')] }) : null,
      Text({ bold: true, ...(COLOR[f.severity] ? { color: COLOR[f.severity] } : {}), children: [clean(`${MARK[f.severity]} ${f.title}`)] }),
      Text({ dimColor: true, children: [clean(f.evidence)] }),
      shown.length ? Box({ flexDirection: 'column', children: [Text({ bold: true, children: [t('breakdown')] }), ...shown] }) : null,
      Box({ flexDirection: 'column', children: [Text({ bold: true, children: [t('actionHead')] }), Text({ children: [clean('  ' + f.action)] })] }),
      Box({ flexDirection: 'column', children: [Text({ bold: true, children: [t('promptHead')] }), Code({ source: clean(f.copyText) })] }),
      explainBlock(el, model, h),
    ].filter(Boolean),
  })
}

function detailActions(el, t, f, h) {
  const { Box, Button, Link } = el
  return Box({
    flexDirection: 'row',
    columnGap: 2,
    flexWrap: 'wrap',
    children: [
      Button({ key: 'back', label: t('back'), hotkey: 'b', plain: true, onPress: () => h.onBack() }),
      Button({ key: 'copy-' + f.id, label: t('copy'), hotkey: 'c', plain: true, onPress: (press) => h.onCopy(f.copyText, press) }),
      f.applyPrompt ? Button({ key: 'apply-' + f.id, label: t('applyChat'), onPress: () => h.onApply(f) }) : null,
      f.doc ? Link({ href: f.doc, label: t('docs') }) : null,
    ].filter(Boolean),
  })
}

function explainBlock(el, model, h) {
  const { Box, Text, Button, Markdown } = el
  const { t } = model
  const f = model.detail
  const ex = model.explain
  const body = ex?.loading ? [Text({ dimColor: true, children: [t('explaining', { model: ex.model })] })]
    : ex?.error ? [Text({ color: 'error', children: [clean(t('explainFailed', { error: ex.error }))] })]
    : ex?.text ? [Markdown({ key: 'explain-' + f.id, text: clean(ex.text).slice(0, 9000) }), Text({ dimColor: true, children: [usageLine(t, ex)] })]
    : [Text({ dimColor: true, children: [generateHint(t, model.settings)] })]
  return Box({
    flexDirection: 'column',
    children: [
      Box({ flexDirection: 'row', columnGap: 2, children: [Text({ bold: true, children: [t('explainHead')] }), Button({ key: 'explain-again', label: t(ex?.text ? 'regenerate' : 'generate'), hotkey: 'g', plain: true, onPress: () => h.onExplainAgain(f) })] }),
      ...body,
      settingsRow(el, model, h),
      Text({ dimColor: true, children: [t(f.localDetails ? 'sendLocal' : 'sendDetail')] }),
    ],
  })
}

function settingsRow(el, model, h) {
  const { Box, Text, Select } = el
  const { t, settings, aiUsage } = model
  return Box({
    flexDirection: 'column',
    children: [
      Box({
        flexDirection: 'row',
        columnGap: 2,
        flexWrap: 'wrap',
        children: [
          Select({ key: 'ai-model', label: t('modelLabel'), value: settings.model, options: MODEL_OPTIONS.map((m) => ({ value: m, label: CREDIT_MODELS.has(m) ? t('creditLabel', { model: m }) : m })), onSelect: (v) => h.onSetting('aiModel', v) }),
          Select({ key: 'ai-effort', label: 'effort', value: settings.effort, options: EFFORT_OPTIONS.map((x) => ({ value: x, label: x })), onSelect: (v) => h.onSetting('aiEffort', v) }),
        ],
      }),
      Text({ dimColor: true, children: [t('sessionUsage', aiUsage)] }),
    ],
  })
}