decision-log

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text, Markdown } = $.ui.resolve(e)
    const ui: Ui = { Box, Button, Text, Markdown }
    const entries = await read($, records)
    const view = memberOf(selected, e)
    const choice = await read($, view)
    const go = (id: number) => update($, view, () => id)
    const entry = choice > 0 ? find(entries, choice) : undefined
    if (entry !== undefined) return recordTree(ui, entry, go)
    return listTree(ui, entries, e.props.bodyColumns, go)
  })

function recordTree(ui: Ui, entry: DecisionEntry, go: (id: number) => unknown): RenderElement {
  const { Box, Button, Markdown } = ui
  const links = [...entry.supersedes, ...entry.supersededBy]
  return (
    <Box key={`record-${entry.id}`} flexDirection="column">
      <Box flexDirection="row">
        <Button key="back" label="← All decisions" onPress={() => go(-1)} />
        {links.map(id => (
          <Button key={`link-${id}`} label={`#${id}`} onPress={() => go(id)} />
        ))}
      </Box>
      <Markdown key={`md-${entry.id}`} text={recordMarkdown(entry)} />
    </Box>
  )
}

function listTree(ui: Ui, entries: readonly DecisionEntry[], columns: number | undefined, go: (id: number) => unknown): RenderElement {
  const { Box, Text } = ui
  if (entries.length === 0) {
    return (
      <Box key="decisions-empty" flexDirection="column">
        <Text dimColor>{'No decisions recorded yet. Add one with /decide <title> — <why>, or ask Claude to record one.'}</Text>
      </Box>
    )
  }
  return (
    <Box key="decisions-list" flexDirection="column">
      <Text bold>
        {entries.length} decision{entries.length === 1 ? '' : 's'}
      </Text>
      {newestFirst(entries).map(entry => row(ui, entry, columns, go))}
    </Box>
  )
}

function row(ui: Ui, entry: DecisionEntry, columns: number | undefined, go: (id: number) => unknown): RenderElement {
  const { Box, Button, Text } = ui
  const isDim = entry.status === 'superseded'
  // Room for `#nnnn`, the status and spaces; a narrow phone gets a shorter line rather than a wrapped one.
  const titleMax = columns === undefined ? 200 : Math.max(columns - 20, 10)
  return (
    <Box key={`row-${entry.id}`} flexDirection="row">
      <Button key={`open-${entry.id}`} plain label={`#${entry.id}`} dimColor={isDim} onPress={() => go(entry.id)} />
      <Text color={statusColor(entry.status)} dimColor={isDim}>
        {` ${entry.status.padEnd(10)} `}
      </Text>
      <Text dimColor={isDim} wrap="truncate-end">
        {clip(entry.title, titleMax)}
        {supersededNote(entry)}
      </Text>
    </Box>
  )
}